refactor(web): streamline sidebar items and optimize icon imports in routing components

Author: bchapuis

apps/web/src/components/app-header.tsx

@@ -1,6 +1,6 @@
+import BookOpen from "lucide-react/icons/book-open";
 import Bot from "lucide-react/icons/bot";
 import Building from "lucide-react/icons/building";
-import BookOpen from "lucide-react/icons/book-open";
 import Settings from "lucide-react/icons/settings";
 import { Link } from "react-router";
 

apps/web/src/components/org-layout.tsx

@@ -1,17 +1,70 @@
 import type { OrganizationInfo } from "@dafthunk/types";
+import {
+  Database,
+  KeyRound,
+  LayoutDashboard,
+  Lock,
+  Logs,
+  SquareTerminal,
+  Target,
+  Users,
+} from "lucide-react";
 import React, { useEffect } from "react";
 import { useParams } from "react-router";
 
 import { useAuth } from "@/components/auth-context";
 import { AppLayout } from "@/components/layouts/app-layout";
-import { getDashboardSidebarItems } from "@/routes";
 import { useOrganizations } from "@/services/organizations-service";
 
 interface OrgLayoutProps {
   children: React.ReactNode;
   title: string;
 }
 
+export const getDashboardSidebarItems = (orgHandle: string) => [
+  {
+    title: "Dashboard",
+    url: `/org/${orgHandle}/dashboard`,
+    icon: LayoutDashboard,
+  },
+  {
+    title: "Workflows",
+    url: `/org/${orgHandle}/workflows`,
+    icon: SquareTerminal,
+  },
+
+  {
+    title: "Datasets",
+    url: `/org/${orgHandle}/datasets`,
+    icon: Database,
+  },
+  {
+    title: "Secrets",
+    url: `/org/${orgHandle}/secrets`,
+    icon: Lock,
+  },
+  {
+    title: "Deployments",
+    url: `/org/${orgHandle}/deployments`,
+    icon: Target,
+  },
+  {
+    title: "Executions",
+    url: `/org/${orgHandle}/executions`,
+    icon: Logs,
+  },
+  {
+    title: "API Keys",
+    url: `/org/${orgHandle}/api-keys`,
+    icon: KeyRound,
+  },
+  {
+    title: "Members",
+    url: `/org/${orgHandle}/members`,
+    icon: Users,
+  },
+];
+
 export const OrgLayout: React.FC<OrgLayoutProps> = ({ children, title }) => {
   const params = useParams<{ handle: string }>();
   const { organization, setSelectedOrganization } = useAuth();

apps/web/src/pages/members-page.tsx

@@ -8,7 +8,6 @@ import { toast } from "sonner";
 import { InsetError } from "@/components/inset-error";
 import { InsetLoading } from "@/components/inset-loading";
 import { InsetLayout } from "@/components/layouts/inset-layout";
-import { usePageBreadcrumbs } from "@/hooks/use-page";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
@@ -40,6 +39,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { usePageBreadcrumbs } from "@/hooks/use-page";
 import {
   addMembership,
   removeMembership,

apps/web/src/routes.tsx

@@ -1,15 +1,4 @@
-import {
-  Building2,
-  Database,
-  KeyRound,
-  LayoutDashboard,
-  Lock,
-  Logs,
-  SquareTerminal,
-  Target,
-  User,
-  Users,
-} from "lucide-react";
+import { Building2, User } from "lucide-react";
 import React from "react";
 import type { RouteObject, RouterState } from "react-router";
 import { Navigate } from "react-router";
@@ -64,50 +53,6 @@ export type AppRouteObject = RouteObject & {
   handle?: RouteHandle;
 };
 
-export const getDashboardSidebarItems = (orgHandle: string) => [
-  {
-    title: "Dashboard",
-    url: `/org/${orgHandle}/dashboard`,
-    icon: LayoutDashboard,
-  },
-  {
-    title: "Workflows",
-    url: `/org/${orgHandle}/workflows`,
-    icon: SquareTerminal,
-  },
-
-  {
-    title: "Datasets",
-    url: `/org/${orgHandle}/datasets`,
-    icon: Database,
-  },
-  {
-    title: "Secrets",
-    url: `/org/${orgHandle}/secrets`,
-    icon: Lock,
-  },
-  {
-    title: "Deployments",
-    url: `/org/${orgHandle}/deployments`,
-    icon: Target,
-  },
-  {
-    title: "Executions",
-    url: `/org/${orgHandle}/executions`,
-    icon: Logs,
-  },
-  {
-    title: "API Keys",
-    url: `/org/${orgHandle}/api-keys`,
-    icon: KeyRound,
-  },
-  {
-    title: "Members",
-    url: `/org/${orgHandle}/members`,
-    icon: Users,
-  },
-];
-
 const settingsSidebarItems = [
   {
     title: "Profile",