From 2c70e87630fab003660cef052d9495e474ab1348 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 13:17:43 -0500
Subject: [PATCH] Add icons to top nav items

Rocket for Start, play circle for Workflow Runs, chart bar for
Insights, gear for Settings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/arc-web/app/layouts/app-shell.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/arc-web/app/layouts/app-shell.tsx b/apps/arc-web/app/layouts/app-shell.tsx
index a7d7de40b..c7627ad35 100644
--- a/apps/arc-web/app/layouts/app-shell.tsx
+++ b/apps/arc-web/app/layouts/app-shell.tsx
@@ -7,7 +7,14 @@ import {
   MenuItem,
   MenuItems,
 } from "@headlessui/react";
-import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import {
+  Bars3Icon,
+  ChartBarIcon,
+  Cog6ToothIcon,
+  PlayCircleIcon,
+  RocketLaunchIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
 import { Link, Outlet, useLocation, useMatches } from "react-router";
 
 const user = {
@@ -18,10 +25,10 @@ const user = {
 };
 
 const navigation = [
-  { name: "Start", href: "/start" },
-  { name: "Workflow Runs", href: "/runs" },
-  { name: "Insights", href: "/insights" },
-  { name: "Settings", href: "/settings" },
+  { name: "Start", href: "/start", icon: RocketLaunchIcon },
+  { name: "Workflow Runs", href: "/runs", icon: PlayCircleIcon },
+  { name: "Insights", href: "/insights", icon: ChartBarIcon },
+  { name: "Settings", href: "/settings", icon: Cog6ToothIcon },
 ];
 
 const userNavigation = [{ name: "Sign out", href: "#" }];
@@ -61,9 +68,10 @@ export default function AppShell() {
                           current
                             ? "bg-navy-950/50 text-white"
                             : "text-ice-300 hover:bg-white/5 hover:text-white",
-                          "rounded-md px-3 py-2 text-sm font-medium",
+                          "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium",
                         )}
                       >
+                        <item.icon className="size-4" aria-hidden="true" />
                         {item.name}
                       </Link>
                     );
@@ -133,9 +141,10 @@ export default function AppShell() {
                     current
                       ? "bg-navy-950 text-white"
                       : "text-ice-300 hover:bg-white/5 hover:text-white",
-                    "block rounded-md px-3 py-2 text-base font-medium",
+                    "flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium",
                   )}
                 >
+                  <item.icon className="size-5" aria-hidden="true" />
                   {item.name}
                 </DisclosureButton>
               );