Merge pull request 'UI: sidebar add icons to sections' (#2605) from hsjobeki/clan-core:hsjobeki-main into main

pkgs/webview-ui/app/src/components/Sidebar/index.tsx

@@ -8,9 +8,11 @@ import { SidebarHeader } from "./SidebarHeader";
 import { SidebarListItem } from "./SidebarListItem";
 import { Typography } from "../Typography";
 import "./css/sidebar.css";
+import Icon, { IconVariant } from "../icon";
 
 export const SidebarSection = (props: {
   title: string;
+  icon: IconVariant;
   children: JSX.Element;
 }) => {
   const { title, children } = props;
@@ -19,7 +21,7 @@ export const SidebarSection = (props: {
     <details class="sidebar__section accordeon" open>
       <summary class="accordeon__header">
         <Typography
-          class="uppercase"
+          class="inline-flex w-full gap-2 uppercase"
           tag="p"
           hierarchy="body"
           size="xs"
@@ -27,7 +29,9 @@ export const SidebarSection = (props: {
           color="tertiary"
           inverted={true}
         >
+          <Icon icon={props.icon} />
           {title}
+          <Icon icon="CaretDown" class="ml-auto" />
         </Typography>
       </summary>
       <div class="accordeon__body">{children}</div>
@@ -64,7 +68,7 @@ export const Sidebar = (props: RouteSectionProps) => {
         {(meta) => <SidebarHeader clanName={meta().name} />}
       </Show>
       <div class="sidebar__body max-h-[calc(100vh-4rem)] overflow-scroll">
-        <For each={routes.filter((r) => !r.hidden && r.path != "/clans")}>
+        <For each={routes.filter((r) => !r.hidden)}>
           {(route: AppRoute) => (
             <Show
               when={route.children}
@@ -73,7 +77,10 @@ export const Sidebar = (props: RouteSectionProps) => {
               }
             >
               {(children) => (
-                <SidebarSection title={route.label}>
+                <SidebarSection
+                  title={route.label}
+                  icon={route.icon || "Paperclip"}
+                >
                   <ul>
                     <For each={children().filter((r) => !r.hidden)}>
                       {(child) => (

pkgs/webview-ui/app/src/components/icon/index.tsx

@@ -67,7 +67,7 @@ const icons = {
   Update,
 };
 
-type IconVariant = keyof typeof icons;
+export type IconVariant = keyof typeof icons;
 
 interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
   icon: IconVariant;

pkgs/webview-ui/app/src/index.tsx

@@ -19,6 +19,7 @@ import { ModuleList } from "./routes/modules/list";
 import { ModuleDetails } from "./routes/modules/details";
 import { ModuleDetails as AddModule } from "./routes/modules/add";
 import { ApiTester } from "./api_test";
+import { IconVariant } from "./components/icon";
 
 export const client = new QueryClient();
 
@@ -40,7 +41,7 @@ if (import.meta.env.DEV) {
 
 export type AppRoute = Omit<RouteDefinition, "children"> & {
   label: string;
-  icon?: string;
+  icon?: IconVariant;
   children?: AppRoute[];
   hidden?: boolean;
 };
@@ -55,7 +56,7 @@ export const routes: AppRoute[] = [
   {
     path: "/machines",
     label: "Machines",
-    icon: "devices_other",
+    icon: "Grid",
     children: [
       {
         path: "/",
@@ -78,7 +79,8 @@ export const routes: AppRoute[] = [
   {
     path: "/clans",
     label: "Clans",
-    icon: "groups",
+    hidden: true,
+    icon: "List",
     children: [
       {
         path: "/",
@@ -101,7 +103,7 @@ export const routes: AppRoute[] = [
   {
     path: "/modules",
     label: "Modules",
-    icon: "apps",
+    icon: "Search",
     children: [
       {
         path: "/",
@@ -125,32 +127,37 @@ export const routes: AppRoute[] = [
   {
     path: "/tools",
     label: "Tools",
-    icon: "bolt",
+    icon: "Folder",
     children: [
       {
         path: "/flash",
-        label: "Clan Installer",
+        label: "Flash Installer",
         component: () => <Flash />,
       },
-      {
-        path: "/hosts",
-        label: "Local Hosts",
-        component: () => <HostList />,
-      },
     ],
   },
   {
     path: "/welcome",
     label: "",
-    hidden: false,
+    hidden: true,
     component: () => <Welcome />,
   },
   {
-    path: "/api_testing",
-    label: "api_testing",
-    icon: "bolt",
-    hidden: false,
-    component: () => <ApiTester />,
+    path: "/internal-dev",
+    label: "Internal (Only visible in dev mode)",
+    children: [
+      {
+        path: "/hosts",
+        label: "Local Hosts",
+        component: () => <HostList />,
+      },
+      {
+        path: "/api_testing",
+        label: "api_testing",
+        hidden: false,
+        component: () => <ApiTester />,
+      },
+    ],
   },
 ];