feat: module based grouping of tools

Author: smithg09

README.md

@@ -24,15 +24,14 @@ Devbox is a lightweight, cross-platform desktop application built with Tauri (Ru
 
 - [x] Move tool position
 - [x] Quick access icon on menu
-- [ ] Grouped tools
+- [x] Grouped tools
 - [x] Hide/Unhide tools
-- [ ] Smart clipboard
 - [ ] Dashboard
   - [ ] Pin notes
   - [ ] Frequently used tools
   - [ ] All tools
   - [ ] Add Custom RSS Feed (maybe)
-- [ ] Quick access tools from menu toolbar (maybe)
+- [ ] Smart clipboard
 - [ ] Tools shortcut from MAC spotlight (maybe)
 
 ### Tools
@@ -79,6 +78,6 @@ Devbox is a lightweight, cross-platform desktop application built with Tauri (Ru
 - [ ] Hashing Text
 - [ ] Hasing Files
 - [ ] Notes
-- [ ] World clock
+- [ ] Timezone
 - [ ] WebSocket Client
 - [ ] Mock API Server / Webhook test

src/App.tsx

@@ -1,29 +1,29 @@
-import classes from "./App.module.css";
-import "@mantine/spotlight/styles.css";
 import "@mantine/dropzone/styles.css";
+import "@mantine/spotlight/styles.css";
+import classes from "./App.module.css";
 
 import { Box, Stack } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { loader as monacoLoader } from "@monaco-editor/react";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { check } from "@tauri-apps/plugin-updater";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import {
   ImperativePanelHandle,
   Panel,
   PanelGroup,
   PanelResizeHandle,
 } from "react-resizable-panels";
-import { check } from "@tauri-apps/plugin-updater";
-import { relaunch } from "@tauri-apps/plugin-process";
+import { useLocation, useNavigate } from "react-router-dom";
 
-import { Sidebar } from "./Components/Sidebar";
 import { BsSearch } from "react-icons/bs";
-import { useRouteTransition } from "./hooks/useRouteAnim";
-import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
-import { insertTauriDragRegion } from "./utils/dragRegion";
-import { APP_CONFIG } from "./constants/app";
 import { AppRoutes } from "./Components/AppRoutes";
+import { Sidebar } from "./Components/Sidebar";
+import { APP_CONFIG } from "./constants/app";
 import { sidebarTools } from "./constants/sidebar";
+import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
+import { useRouteTransition } from "./hooks/useRouteAnim";
+import { insertTauriDragRegion } from "./utils/dragRegion";
 
 const PANEL_CONFIG = APP_CONFIG.PANEL;
 

src/Components/Settings.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 
 export interface SidebarConfig {
   showDescription: boolean;
+  showModules: boolean;
   hiddenTools: string[];
 }
 
@@ -13,6 +14,7 @@ export default function Settings() {
     key: "sidebarConfig",
     defaultValue: {
       showDescription: false,
+      showModules: true,
       hiddenTools: [],
     },
   });
@@ -27,6 +29,11 @@ export default function Settings() {
     setSidebarConfig(newConfig);
   };
 
+  const handleToggleModules = async (checked: boolean) => {
+    const newConfig = { ...sidebarConfig, showModules: checked };
+    setSidebarConfig(newConfig);
+  };
+
   const handleToolVisibility = async (toolId: string, checked: boolean) => {
     let updatedHidden: string[];
     if (!checked) {
@@ -57,6 +64,11 @@ export default function Settings() {
           checked={!!sidebarConfig.showDescription}
           onChange={e => handleToggle(e.currentTarget.checked)}
         />
+        <Switch
+          label="Group tools by module"
+          checked={!!sidebarConfig.showModules}
+          onChange={e => handleToggleModules(e.currentTarget.checked)}
+        />
 
         {/* Manage Tools */}
         <Stack gap="xs" mt="md">

src/Components/Sidebar/Tool.tsx

@@ -0,0 +1,64 @@
+import { Box, Text, useMantineTheme } from "@mantine/core";
+import cx from "clsx";
+
+import { SidebarTool } from "./types";
+
+import { cloneElement, ReactElement } from "react";
+import { useLocation } from "react-router-dom";
+import { SIDEBAR_CONSTANTS } from "./constants";
+import classes from "./styles.module.css";
+
+type ToolProps = {
+  tool: SidebarTool;
+  handleNavigation: (to: string) => void;
+  showDescription: boolean;
+};
+
+const Tool = ({ tool, showDescription, handleNavigation }: ToolProps) => {
+  const location = useLocation();
+  const theme = useMantineTheme();
+
+  return (
+    <Box
+      key={tool.id}
+      className={cx(classes.navigationItem, {
+        [classes.selectedNavigationItem]: location.pathname === tool.to,
+      })}
+      mt={SIDEBAR_CONSTANTS.SPACING.ITEM_MARGIN_TOP}
+      onClick={() => handleNavigation(tool.to)}
+    >
+      <Box className={classes.itemContent} w="100%">
+        {cloneElement(tool.icon as ReactElement, {
+          size: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM,
+          background: theme.colors?.blue[5],
+          flex: 1,
+          style: { minWidth: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM },
+        })}
+        <Box w="80%">
+          <Text size="xs" fw={location.pathname === tool.to ? "600" : "400"}>
+            {tool.text}
+          </Text>
+          {showDescription && tool.description && (
+            <Text
+              size="11px"
+              c="dimmed"
+              mt={2}
+              w="100%"
+              styles={{
+                root: {
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                },
+              }}
+            >
+              {tool.description}
+            </Text>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Tool;

src/Components/Sidebar/constants.ts

@@ -5,7 +5,7 @@ export const SIDEBAR_CONSTANTS = {
     LARGE: 20,
   },
   SPACING: {
-    ITEM_MARGIN_TOP: 2,
+    ITEM_MARGIN_TOP: 6,
   },
   SCROLL_BEHAVIOR: {
     BLOCK: "center" as const,