From c79cd183d42098de32823b293c7a76621938dd54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Tue, 9 Jun 2026 13:24:33 +0200
Subject: [PATCH] refactor: replace dashboard sidebar list with compact
 dropdown

- Single-line select dropdown instead of one list item per dashboard
- Scales to any number of teams without clutter
- "+ New dashboard" as last option in dropdown
- Preserves the create flow with inline name input

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/app-shell.tsx | 116 ++++++++++++++++---------------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/web/src/components/app-shell.tsx b/web/src/components/app-shell.tsx
index f68d43e..b5e4fad 100644
--- a/web/src/components/app-shell.tsx
+++ b/web/src/components/app-shell.tsx
@@ -202,66 +202,70 @@ function SidebarNav() {
       {dashboards.length > 0 && (
         <div className="mt-4">
           {!collapsed && (
-            <div className="flex items-center justify-between px-2 py-1.5">
-              <button
-                type="button"
-                onClick={() => setExpanded((e) => ({ ...e, dashboards: !e.dashboards }))}
-                className="flex items-center gap-1 text-[11px] font-semibold text-sidebar-foreground/45 uppercase hover:text-sidebar-foreground/70"
+            <button
+              type="button"
+              onClick={() => setExpanded((e) => ({ ...e, dashboards: !e.dashboards }))}
+              className="flex w-full items-center gap-1 px-2 py-1.5 text-[11px] font-semibold text-sidebar-foreground/45 uppercase hover:text-sidebar-foreground/70"
+            >
+              <ChevronRightIcon
+                className={cn("h-3 w-3 transition-transform", expanded.dashboards && "rotate-90")}
+              />
+              Dashboards
+            </button>
+          )}
+          {expanded.dashboards && dashboards.length > 0 && (
+            <div className="px-2">
+              <select
+                value={dashboards.find((d) => pathname.startsWith("/dashboards/") && pathname.endsWith(d.id))?.id ?? ""}
+                onChange={(e) => {
+                  const id = e.target.value;
+                  if (id === "_new") {
+                    setAddingDashboard(true);
+                    e.target.value = dashboards.find((d) => pathname.startsWith("/dashboards/") && pathname.endsWith(d.id))?.id ?? "";
+                    return;
+                  }
+                  if (id) window.location.href = `/dashboards/${id}`;
+                }}
+                className="h-7 w-full rounded border border-sidebar-border bg-sidebar-accent px-1.5 text-[12px] text-sidebar-foreground outline-none"
               >
-                <ChevronRightIcon
-                  className={cn("h-3 w-3 transition-transform", expanded.dashboards && "rotate-90")}
-                />
-                Dashboards
-              </button>
-              {addingDashboard ? (
-                <div className="flex items-center gap-1">
-                  <input
-                    value={newDashboardName}
-                    onChange={(e) => setNewDashboardName(e.target.value)}
-                    placeholder="Name"
-                    className="h-6 w-24 rounded border border-sidebar-border bg-sidebar-accent px-1.5 text-[11px] text-sidebar-foreground outline-none"
-                    autoFocus
-                    onKeyDown={async (e) => {
-                      if (e.key === "Enter" && newDashboardName.trim()) {
-                        const { data } = await createDashboard({ name: newDashboardName.trim(), is_default: false });
-                        if (data) {
-                          setDashboards((prev) => [...prev, data]);
-                          setNewDashboardName("");
-                          setAddingDashboard(false);
-                          window.location.href = `/dashboards/${data.id}`;
-                        }
-                      } else if (e.key === "Escape") {
-                        setNewDashboardName("");
-                        setAddingDashboard(false);
-                      }
-                    }}
-                  />
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => setAddingDashboard(true)}
-                  className="text-sidebar-foreground/35 hover:text-sidebar-foreground/70"
-                  title="New dashboard"
-                >
-                  <PlusIcon className="h-3 w-3" />
-                </button>
-              )}
+                {dashboards.map((dash) => (
+                  <option key={dash.id} value={dash.id}>{dash.name}</option>
+                ))}
+                <option value="_new">+ New dashboard</option>
+              </select>
             </div>
           )}
-          {expanded.dashboards && dashboards.map((dash) => {
-            const active =
-              pathname.startsWith("/dashboards/") && pathname.endsWith(dash.id);
-            return (
-              <SidebarNavItem
-                key={dash.id}
-                href={`/dashboards/${dash.id}`}
-                icon={LayoutGridIcon}
-                label={dash.name}
-                active={active}
+          {addingDashboard && (
+            <div className="mt-1 px-2">
+              <input
+                value={newDashboardName}
+                onChange={(e) => setNewDashboardName(e.target.value)}
+                placeholder="Dashboard name"
+                className="h-7 w-full rounded border border-sidebar-border bg-sidebar-accent px-1.5 text-[12px] text-sidebar-foreground outline-none"
+                autoFocus
+                onKeyDown={async (e) => {
+                  if (e.key === "Enter" && newDashboardName.trim()) {
+                    const { data } = await createDashboard({ name: newDashboardName.trim(), is_default: false });
+                    if (data) {
+                      setDashboards((prev) => [...prev, data]);
+                      setNewDashboardName("");
+                      setAddingDashboard(false);
+                      window.location.href = `/dashboards/${data.id}`;
+                    }
+                  } else if (e.key === "Escape") {
+                    setNewDashboardName("");
+                    setAddingDashboard(false);
+                  }
+                }}
+                onBlur={() => {
+                  if (!newDashboardName.trim()) {
+                    setNewDashboardName("");
+                    setAddingDashboard(false);
+                  }
+                }}
               />
-            );
-          })}
+            </div>
+          )}
         </div>
       )}