refine left nav: project glyphs, activity indicators, and design tokens

ui/goose2/src/features/chat/ui/ChatInputToolbar.tsx

@@ -33,21 +33,13 @@ import {
   getCatalogEntry,
   resolveAgentProviderCatalogIdStrict,
 } from "@/features/providers/providerCatalog";
+import { ProjectGlyph } from "@/shared/ui/ProjectGlyph";
 
 const NO_PROJECT_VALUE = "__no_project__";
 const CREATE_PROJECT_VALUE = "__create_project__";
 
 function ProjectDot({ color }: { color?: string | null }) {
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        "inline-block size-2 rounded-full",
-        color ? "" : "bg-muted-foreground/40",
-      )}
-      style={color ? { backgroundColor: color } : undefined}
-    />
-  );
+  return <ProjectGlyph color={color} className="size-3.5" />;
 }
 
 interface ChatInputToolbarProps {

ui/goose2/src/features/projects/ui/CreateProjectDialog.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/shared/ui/button";
 import { Checkbox } from "@/shared/ui/checkbox";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
+import { ProjectGlyph } from "@/shared/ui/ProjectGlyph";
 import {
   Dialog,
   DialogContent,
@@ -292,14 +293,15 @@ export function CreateProjectDialog({
                   type="button"
                   onClick={() => setColor(c)}
                   className={cn(
-                    "h-6 w-6 rounded-full border-2 transition-transform",
+                    "flex h-7 w-7 items-center justify-center rounded-md border transition-transform",
                     color === c
-                      ? "border-foreground scale-110"
-                      : "border-transparent hover:scale-105",
+                      ? "border-foreground bg-accent/30 scale-105"
+                      : "border-transparent hover:scale-105 hover:bg-accent/20",
                   )}
-                  style={{ backgroundColor: c }}
                   aria-label={t("dialog.colorAria", { color: c })}
-                />
+                >
+                  <ProjectGlyph color={c} className="size-4" />
+                </button>
               ))}
             </div>
           </div>

ui/goose2/src/features/projects/ui/ProjectsView.tsx

@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import { SearchBar } from "@/shared/ui/SearchBar";
 import { Button, buttonVariants } from "@/shared/ui/button";
+import { ProjectGlyph } from "@/shared/ui/ProjectGlyph";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -215,9 +216,9 @@ export function ProjectsView({ onStartChat }: ProjectsViewProps) {
                   className="flex items-start justify-between gap-3 rounded-lg border border-border px-4 py-3"
                 >
                   <div className="min-w-0 flex-1 flex items-start gap-3">
-                    <span
-                      className="inline-block w-2.5 h-2.5 rounded-full mt-1.5 shrink-0"
-                      style={{ backgroundColor: project.color }}
+                    <ProjectGlyph
+                      color={project.color}
+                      className="mt-0.5 size-4 shrink-0"
                     />
                     <div className="min-w-0 flex-1">
                       <p className="text-sm font-medium">{project.name}</p>

ui/goose2/src/features/settings/ui/SettingsModal.tsx

@@ -42,6 +42,7 @@ import {
 import { useChatSessionStore } from "@/features/chat/stores/chatSessionStore";
 import { useProjectStore } from "@/features/projects/stores/projectStore";
 import { getDisplaySessionTitle } from "@/features/chat/lib/sessionTitle";
+import { ProjectGlyph } from "@/shared/ui/ProjectGlyph";
 
 import type { Session } from "@/shared/types/chat";
 
@@ -312,9 +313,9 @@ export function SettingsModal({
                         className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2"
                       >
                         <div className="flex items-center gap-2 min-w-0">
-                          <span
-                            className="inline-block w-2 h-2 rounded-full flex-shrink-0"
-                            style={{ backgroundColor: project.color }}
+                          <ProjectGlyph
+                            color={project.color}
+                            className="size-3.5 flex-shrink-0"
                           />
                           <span className="text-sm truncate">
                             {project.name}

ui/goose2/src/features/sidebar/ui/Sidebar.tsx

@@ -313,7 +313,7 @@ export function Sidebar({
               collapsed ? "justify-center" : "justify-between",
             )}
           >
-            <GooseIcon className="text-muted-foreground" />
+            <GooseIcon className="text-foreground" />
             {!collapsed && (
               <Button
                 type="button"
@@ -365,13 +365,13 @@ export function Sidebar({
 
             <div
               className={cn(
-                "flex items-center w-full rounded-md transition-all duration-300 ease-out",
+                "mb-4 flex items-center w-full rounded-md transition-all duration-300 ease-out",
                 collapsed
                   ? "justify-center p-3 text-muted-foreground"
                   : "gap-2 border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-transparent",
               )}
             >
-              <Search className="size-3.5 flex-shrink-0" />
+              <Search className="size-3.5 flex-shrink-0 text-[var(--text-placeholder)]" />
               {!collapsed && (
                 <>
                   <input
@@ -388,25 +388,14 @@ export function Sidebar({
                     }}
                     placeholder={t("search.placeholder")}
                     className={cn(
-                      "focus-override appearance-none bg-transparent border-none text-xs flex-1 min-w-0 placeholder:text-muted-foreground outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+                      "focus-override appearance-none bg-transparent border-none text-xs flex-1 min-w-0 placeholder:text-[var(--text-placeholder)] outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
                       labelTransition,
                       labelVisible
                         ? "opacity-100 w-auto"
                         : "opacity-0 w-0 overflow-hidden",
                     )}
                     onClick={(e) => e.stopPropagation()}
                   />
-                  <kbd
-                    className={cn(
-                      "text-[10px] text-muted-foreground px-1 py-0.5 rounded font-mono flex-shrink-0",
-                      labelTransition,
-                      labelVisible
-                        ? "opacity-100 w-auto"
-                        : "opacity-0 w-0 overflow-hidden px-0",
-                    )}
-                  >
-                    ⌘K
-                  </kbd>
                 </>
               )}
             </div>
@@ -491,7 +480,7 @@ export function Sidebar({
 
           {!collapsed && (
             <>
-              <div className="relative z-10 my-2 -mx-1.5 bg-border h-px" />
+              <div className="relative z-10 my-3" />
 
               {sidebarSearch.submittedQuery ? (
                 <div className="relative z-10 space-y-2">

ui/goose2/src/features/sidebar/ui/SidebarChatRow.tsx

@@ -28,6 +28,7 @@ interface SidebarChatRowProps {
   isActive: boolean;
   isRunning?: boolean;
   hasUnread?: boolean;
+  reserveActivitySpace?: boolean;
   className?: string;
   onSelect?: (id: string) => void;
   onRename?: (id: string, nextTitle: string) => void;
@@ -42,6 +43,7 @@ export function SidebarChatRow({
   isActive,
   isRunning = false,
   hasUnread = false,
+  reserveActivitySpace = false,
   className,
   onSelect,
   onRename,
@@ -64,6 +66,9 @@ export function SidebarChatRow({
     t("common:session.defaultTitle"),
   );
   const [draftTitle, setDraftTitle] = useState(editableTitle);
+  const showActivityIndicator = isRunning || hasUnread;
+  const shouldReserveActivitySpace =
+    reserveActivitySpace || showActivityIndicator;
 
   useEffect(() => {
     setDraftTitle(editableTitle);
@@ -186,10 +191,17 @@ export function SidebarChatRow({
           isActive ? ACTIVE_CHAT_ROW_CLASS : INACTIVE_CHAT_ROW_CLASS,
         )}
       >
+        {shouldReserveActivitySpace && (
+          <span className="flex h-3 w-3 shrink-0 items-center justify-center">
+            <SessionActivityIndicator
+              isRunning={isRunning}
+              hasUnread={hasUnread}
+            />
+          </span>
+        )}
         <span className="flex-1 min-w-0 truncate text-left">
           {displayTitle}
         </span>
-        <SessionActivityIndicator isRunning={isRunning} hasUnread={hasUnread} />
       </Button>
 
       <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>

ui/goose2/src/features/sidebar/ui/SidebarProjectsSection.tsx

@@ -13,6 +13,7 @@ import { Button } from "@/shared/ui/button";
 import type { AppView } from "@/app/AppShell";
 import type { ProjectInfo } from "@/features/projects/api/projects";
 import { SessionActivityIndicator } from "@/shared/ui/SessionActivityIndicator";
+import { ProjectGlyph } from "@/shared/ui/ProjectGlyph";
 import { SidebarItemMenu } from "./SidebarItemMenu";
 import { SidebarChatRow } from "./SidebarChatRow";
 
@@ -152,15 +153,15 @@ function ProjectSection({
               : PROJECT_ROW_TEXT_CLASS,
           )}
         >
-          <span className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center">
-            <span
-              className="absolute inline-block h-2 w-2 rounded-full transition-opacity duration-150 group-hover:opacity-0"
-              style={{ backgroundColor: project.color }}
+          <span className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
+            <ProjectGlyph
+              color={project.color}
+              className="absolute size-4 transition-opacity duration-150 group-hover:opacity-0"
             />
             {isExpanded ? (
-              <IconChevronDown className="absolute h-3 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+              <IconChevronDown className="absolute h-4 w-4 opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
             ) : (
-              <IconChevronRight className="absolute h-3 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+              <IconChevronRight className="absolute h-4 w-4 opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
             )}
           </span>
           <span className="flex-1 min-w-0 truncate text-left">
@@ -330,7 +331,7 @@ export function SidebarProjectsSection({
       >
         <span
           className={cn(
-            "text-xs font-light uppercase tracking-wider text-muted-foreground flex-1 pl-3",
+            "text-xs font-medium tracking-normal text-muted-foreground/60 flex-1 pl-3",
             labelTransition,
             labelVisible
               ? "opacity-100 w-auto"
@@ -368,10 +369,7 @@ export function SidebarProjectsSection({
               onClick={() => onNavigate?.("projects")}
               className="rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/50"
             >
-              <span
-                className="inline-block size-2.5 rounded-full"
-                style={{ backgroundColor: project.color }}
-              />
+              <ProjectGlyph color={project.color} className="size-[18px]" />
             </Button>
           ))}
         </div>
@@ -411,8 +409,8 @@ export function SidebarProjectsSection({
       >
         <div
           className={cn(
-            "my-2 -mx-1.5 bg-border transition-all duration-300",
-            collapsed ? "w-5 mx-auto h-px" : "h-px",
+            "my-3 transition-all duration-300",
+            collapsed ? "my-2" : "",
           )}
         />
         <div
@@ -423,7 +421,7 @@ export function SidebarProjectsSection({
         >
           <span
             className={cn(
-              "text-xs font-light uppercase tracking-wider text-muted-foreground flex-1 pl-3",
+              "text-xs font-medium tracking-normal text-muted-foreground/60 flex-1 pl-3",
               labelTransition,
               labelVisible
                 ? "opacity-100 w-auto"
@@ -493,6 +491,7 @@ export function SidebarProjectsSection({
                     isActive={isActive}
                     isRunning={session.isRunning ?? false}
                     hasUnread={session.hasUnread ?? false}
+                    reserveActivitySpace={false}
                     onSelect={onSelectSession}
                     onRename={onRenameChat}
                     onArchive={onArchiveChat}

ui/goose2/src/features/sidebar/ui/__tests__/SidebarChatRow.test.tsx

@@ -108,6 +108,43 @@ describe("SidebarChatRow", () => {
     expect(screen.getByLabelText(/unread messages/i)).toBeInTheDocument();
   });
 
+  it("does not reserve activity space by default when idle", () => {
+    const { container } = render(
+      <SidebarChatRow id="session-1" title="Idle Chat" isActive={false} />,
+    );
+
+    expect(
+      container.querySelector(".h-3.w-3.shrink-0.items-center.justify-center"),
+    ).toBeNull();
+  });
+
+  it("does not reserve activity space for recents until activity exists", () => {
+    const { container, rerender } = render(
+      <SidebarChatRow
+        id="session-1"
+        title="Recent Chat"
+        isActive={false}
+        reserveActivitySpace={false}
+      />,
+    );
+
+    expect(
+      container.querySelector(".h-3.w-3.shrink-0.items-center.justify-center"),
+    ).toBeNull();
+
+    rerender(
+      <SidebarChatRow
+        id="session-1"
+        title="Recent Chat"
+        isActive={false}
+        hasUnread
+        reserveActivitySpace={false}
+      />,
+    );
+
+    expect(screen.getByLabelText(/unread messages/i)).toBeInTheDocument();
+  });
+
   it("keeps the localized default title in rename mode without persisting it", async () => {
     const user = userEvent.setup();
     const onRename = vi.fn();

ui/goose2/src/shared/i18n/locales/en/sidebar.json

@@ -18,7 +18,7 @@
   },
   "search": {
     "error": "Message search failed. Showing metadata matches only.",
-    "placeholder": "Search chats by title, persona, project, or message...",
+    "placeholder": "Search conversations",
     "searching": "Searching chats..."
   },
   "sections": {

ui/goose2/src/shared/i18n/locales/es/sidebar.json

@@ -18,7 +18,7 @@
   },
   "search": {
     "error": "La búsqueda de mensajes falló. Mostrando solo coincidencias de metadatos.",
-    "placeholder": "Busca chats por título, persona, proyecto o mensaje...",
+    "placeholder": "Buscar conversaciones",
     "searching": "Buscando chats..."
   },
   "sections": {