updated modules with description

Author: smithg09

src/Components/Sidebar/Tool.tsx

@@ -12,9 +12,10 @@ type ToolProps = {
   tool: SidebarTool;
   handleNavigation: (to: string) => void;
   showDescription: boolean;
+  isModule?: boolean;
 };
 
-const Tool = ({ tool, showDescription, handleNavigation }: ToolProps) => {
+const Tool = ({ tool, showDescription, handleNavigation, isModule }: ToolProps) => {
   const location = useLocation();
   const theme = useMantineTheme();
 
@@ -26,13 +27,18 @@ const Tool = ({ tool, showDescription, handleNavigation }: ToolProps) => {
       })}
       mt={SIDEBAR_CONSTANTS.SPACING.ITEM_MARGIN_TOP}
       onClick={() => handleNavigation(tool.to)}
+      title={tool.description}
     >
       <Box className={classes.itemContent} w="100%">
         {cloneElement(tool.icon as ReactElement, {
-          size: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM,
+          size: isModule ? SIDEBAR_CONSTANTS.ICON_SIZE.SMALL : SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM,
           background: theme.colors?.blue[5],
           flex: 1,
-          style: { minWidth: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM },
+          style: {
+            minWidth: isModule
+              ? SIDEBAR_CONSTANTS.ICON_SIZE.SMALL
+              : SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM,
+          },
         })}
         <Box w="80%">
           <Text size="xs" fw={location.pathname === tool.to ? "600" : "400"}>

src/Components/Sidebar/constants.ts

@@ -1,6 +1,6 @@
 export const SIDEBAR_CONSTANTS = {
   ICON_SIZE: {
-    SMALL: 16,
+    SMALL: 15,
     MEDIUM: 18,
     LARGE: 20,
   },

src/Components/Sidebar/index.tsx

@@ -15,7 +15,7 @@ import cx from "clsx";
 import { useLocation, useNavigate } from "react-router-dom";
 import classes from "./styles.module.css";
 
-import { moduleIcons } from "@/constants/tools";
+import { moduleRegistry, ToolModule } from "@/constants/tools";
 import { useSidebarShortcuts } from "@/hooks/useSidebarShortcuts";
 import { useSidebarState } from "@/hooks/useSidebarState";
 import { DragDropContext, Draggable, Droppable, OnDragEndResponder } from "@hello-pangea/dnd";
@@ -162,44 +162,63 @@ export const Sidebar = ({ collapsed, setCollapsed }: Props) => {
                   item: classes.accordionItem,
                   content: classes.accordionContent,
                 }}
-                defaultValue={"Encoders / Decoders"}
+                defaultValue={"Network"}
               >
-                {sidebarTools
-                  .reduce((acc, tool) => {
-                    if (!acc.find(t => t === tool.module)) {
-                      acc.push(tool.module);
-                    }
-                    return acc;
-                  }, [] as string[])
-                  .filter(module => module !== "")
+                {Object.values(moduleRegistry)
+                  .sort((a: ToolModule, b: ToolModule) => a.order - b.order)
+                  .filter(module => sidebarTools.find(tool => tool.module === module.id))
                   .map(module => (
-                    <Accordion.Item key={module} value={module}>
+                    <Accordion.Item key={module.id} value={module.id}>
                       <Accordion.Control>
-                        <Group wrap="nowrap" style={{ whiteSpace: "nowrap" }} gap={8}>
-                          {cloneElement(moduleIcons[module] as ReactElement, {
+                        <Group
+                          wrap="nowrap"
+                          style={{ whiteSpace: "nowrap" }}
+                          gap={8}
+                          title={module.description}
+                        >
+                          {cloneElement(module.icon as ReactElement, {
                             size: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM,
                             flex: 1,
                             style: {
                               minWidth: SIDEBAR_CONSTANTS.ICON_SIZE.MEDIUM,
                               marginRight: 1,
                             },
                           })}
-                          <Text size="13px" fw="500">
-                            {module}
-                          </Text>
+                          <Group gap={8} w="95%">
+                            <Text size="12px" fw="500">
+                              {module.name}
+                            </Text>
+                            {showDescription && (
+                              <Text
+                                size="11px"
+                                c="dimmed"
+                                w="80%"
+                                styles={{
+                                  root: {
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                  },
+                                }}
+                              >
+                                {module.description}
+                              </Text>
+                            )}
+                          </Group>
                         </Group>
                       </Accordion.Control>
                       <Accordion.Panel>
                         <Box>
                           {sidebarTools
-                            .filter(t => t.module === module)
+                            .filter(t => t.module === module.id)
                             .filter(t => !hiddenTools.includes(t.id))
                             .map(tool => (
                               <Tool
                                 key={tool.id}
                                 tool={tool}
                                 showDescription={showDescription}
                                 handleNavigation={handleNavigation}
+                                isModule
                               />
                             ))}
                         </Box>
@@ -227,7 +246,6 @@ export const Sidebar = ({ collapsed, setCollapsed }: Props) => {
                                   ...provided.draggableProps.style,
                                   userSelect: "none",
                                 }}
-                                title={tool.description}
                               >
                                 <Tool
                                   tool={tool}

src/Components/Sidebar/styles.module.css

@@ -128,7 +128,6 @@
   background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
 
-
 .accordionItem {
   z-index: 0;
   transition: transform 150ms ease;