From b7c6b8bfc64b53e87f407010dbb53e55d036f1fd Mon Sep 17 00:00:00 2001
From: Shirone <kacperlachowiczwp.pl@wp.pl>
Date: Tue, 27 Jan 2026 00:15:38 +0100
Subject: [PATCH] feat(ui): Show project name in classic sidebar layout

Add project name display at the top of the navigation for the classic
(discord) sidebar style, which previously didn't show the project name
anywhere. Shows the project icon (custom or Lucide) and name with a
separator below.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../sidebar/components/sidebar-navigation.tsx | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
index 46872b6a..905448cd 100644
--- a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
+++ b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useRef } from 'react';
 import type { NavigateOptions } from '@tanstack/react-router';
-import { ChevronDown, Wrench, Github } from 'lucide-react';
+import { ChevronDown, Wrench, Github, Folder } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { formatShortcut, useAppStore } from '@/store/app-store';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import type { NavSection } from '../types';
 import type { Project } from '@/lib/electron';
 import type { SidebarStyle } from '@automaker/types';
@@ -97,6 +100,17 @@ export function SidebarNavigation({
     return !!currentProject;
   });
 
+  // Get the icon component for the current project
+  const getProjectIcon = (): LucideIcon => {
+    if (currentProject?.icon && currentProject.icon in LucideIcons) {
+      return (LucideIcons as unknown as Record<string, LucideIcon>)[currentProject.icon];
+    }
+    return Folder;
+  };
+
+  const ProjectIcon = getProjectIcon();
+  const hasCustomIcon = !!currentProject?.customIconPath;
+
   return (
     <nav
       ref={navRef}
@@ -106,6 +120,27 @@ export function SidebarNavigation({
         sidebarStyle === 'discord' ? 'pt-3' : 'mt-1'
       )}
     >
+      {/* Project name display for classic/discord mode */}
+      {sidebarStyle === 'discord' && currentProject && sidebarOpen && (
+        <div className="mb-3">
+          <div className="flex items-center gap-2.5 px-3 py-2">
+            {hasCustomIcon ? (
+              <img
+                src={getAuthenticatedImageUrl(currentProject.customIconPath!, currentProject.path)}
+                alt={currentProject.name}
+                className="w-5 h-5 rounded object-cover"
+              />
+            ) : (
+              <ProjectIcon className="w-5 h-5 text-brand-500 shrink-0" />
+            )}
+            <span className="text-sm font-medium text-foreground truncate">
+              {currentProject.name}
+            </span>
+          </div>
+          <div className="h-px bg-border/40 mx-1 mt-1" />
+        </div>
+      )}
+
       {/* Navigation sections */}
       {visibleSections.map((section, sectionIdx) => {
         const isCollapsed = section.label ? collapsedNavSections[section.label] : false;