feat dashboard latout

knip.json

@@ -1,10 +1,8 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "ignore": [
-    ".git/**",
     "src/api/**",
     "src/components/ui/**",
-    "openapi-ts.config.ts",
     "src/config/announcements.ts",
     "src/components/shared/BetaFeatureWrapper/BetaFeatureWrapper.tsx"
   ],

src/hooks/useRecentlyViewed.ts

@@ -5,9 +5,9 @@ import { getStorage } from "@/utils/typedStorage";
 const RECENTLY_VIEWED_KEY = "Home/recently_viewed";
 const MAX_ITEMS = 5;
 
-export type RecentlyViewedType = "pipeline" | "run" | "component";
+type RecentlyViewedType = "pipeline" | "run" | "component";
 
-export interface RecentlyViewedItem {
+interface RecentlyViewedItem {
   type: RecentlyViewedType;
   id: string;
   name: string;

src/routes/Dashboard/DashboardLayout.tsx

@@ -0,0 +1,72 @@
+import { Link, Outlet } from "@tanstack/react-router";
+
+import { Icon, type IconName } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading, Text } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
+
+interface SidebarItem {
+  to: string;
+  label: string;
+  icon: IconName;
+}
+
+const SIDEBAR_ITEMS: SidebarItem[] = [
+  { to: "/dashboard/runs", label: "Runs", icon: "Play" },
+  { to: "/dashboard/pipelines", label: "Pipelines", icon: "GitBranch" },
+  { to: "/dashboard/components", label: "Components", icon: "Package" },
+  { to: "/dashboard/favorites", label: "Favorites", icon: "Star" },
+  { to: "/dashboard/recently-viewed", label: "Recently Viewed", icon: "Clock" },
+];
+
+export function DashboardLayout() {
+  return (
+    <div className="container mx-auto p-6 max-w-6xl">
+      <BlockStack gap="6">
+        <InlineStack gap="2" blockAlign="center">
+          <Heading level={1}>Dashboard</Heading>
+          <Text
+            as="span"
+            size="xs"
+            weight="semibold"
+            className="px-2 py-1 rounded-full bg-amber-100 text-amber-800"
+          >
+            Beta
+          </Text>
+        </InlineStack>
+
+        <InlineStack gap="8" blockAlign="start" className="w-full min-h-100">
+          <BlockStack
+            gap="1"
+            className="w-48 shrink-0 border-r border-border pr-4"
+          >
+            {SIDEBAR_ITEMS.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                className="w-full"
+                activeProps={{ className: "is-active" }}
+              >
+                {({ isActive }) => (
+                  <div
+                    className={cn(
+                      "flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm cursor-pointer hover:bg-accent",
+                      isActive && "bg-accent font-medium",
+                    )}
+                  >
+                    <Icon name={item.icon} size="sm" />
+                    <Text size="sm">{item.label}</Text>
+                  </div>
+                )}
+              </Link>
+            ))}
+          </BlockStack>
+
+          <BlockStack className="flex-1 min-w-0">
+            <Outlet />
+          </BlockStack>
+        </InlineStack>
+      </BlockStack>
+    </div>
+  );
+}

src/routes/router.ts

@@ -17,7 +17,7 @@ import { isFlagEnabled } from "@/components/shared/Settings/useFlags";
 import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants";
 
 import RootLayout from "../components/layout/RootLayout";
-import { Dashboard } from "./Dashboard/Dashboard";
+import { DashboardLayout } from "./Dashboard/DashboardLayout";
 import Editor from "./Editor";
 import Home from "./Home";
 import { ImportPage } from "./Import";
@@ -45,6 +45,11 @@ const DASHBOARD_PATH = "/dashboard";
 export const APP_ROUTES = {
   HOME: "/",
   DASHBOARD: DASHBOARD_PATH,
+  DASHBOARD_RUNS: `${DASHBOARD_PATH}/runs`,
+  DASHBOARD_PIPELINES: `${DASHBOARD_PATH}/pipelines`,
+  DASHBOARD_COMPONENTS: `${DASHBOARD_PATH}/components`,
+  DASHBOARD_FAVORITES: `${DASHBOARD_PATH}/favorites`,
+  DASHBOARD_RECENTLY_VIEWED: `${DASHBOARD_PATH}/recently-viewed`,
   QUICK_START: QUICK_START_PATH,
   IMPORT: IMPORT_PATH,
   PIPELINE_EDITOR: `${EDITOR_PATH}/$name`,
@@ -83,14 +88,55 @@ const indexRoute = createRoute({
 const dashboardRoute = createRoute({
   getParentRoute: () => mainLayout,
   path: APP_ROUTES.DASHBOARD,
-  component: Dashboard,
+  component: DashboardLayout,
   beforeLoad: () => {
     if (!isFlagEnabled("dashboard")) {
       throw redirect({ to: APP_ROUTES.HOME });
     }
   },
 });
 
+const dashboardIndexRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/",
+  beforeLoad: () => {
+    throw redirect({ to: APP_ROUTES.DASHBOARD_RUNS });
+  },
+});
+
+// Placeholder component — replaced in subsequent PRs
+const ComingSoon = () => null;
+
+const dashboardRunsRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/runs",
+  component: ComingSoon,
+});
+
+const dashboardPipelinesRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/pipelines",
+  component: ComingSoon,
+});
+
+const dashboardComponentsRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/components",
+  component: ComingSoon,
+});
+
+const dashboardFavoritesRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/favorites",
+  component: ComingSoon,
+});
+
+const dashboardRecentlyViewedRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/recently-viewed",
+  component: ComingSoon,
+});
+
 const quickStartRoute = createRoute({
   getParentRoute: () => mainLayout,
   path: APP_ROUTES.QUICK_START,
@@ -207,9 +253,18 @@ const settingsRouteTree = settingsLayoutRoute.addChildren([
   secretsRouteTree,
 ]);
 
+const dashboardRouteTree = dashboardRoute.addChildren([
+  dashboardIndexRoute,
+  dashboardRunsRoute,
+  dashboardPipelinesRoute,
+  dashboardComponentsRoute,
+  dashboardFavoritesRoute,
+  dashboardRecentlyViewedRoute,
+]);
+
 const appRouteTree = mainLayout.addChildren([
   indexRoute,
-  dashboardRoute,
+  dashboardRouteTree,
   quickStartRoute,
   settingsRouteTree,
   importRoute,