feat: update ProjectSwitcher and ProjectAvatar styles, enhance SpecsPage button functionality, and refine README with implementation notes

Author: tikazyq

packages/ui-vite/src/components/ProjectSwitcher.tsx

@@ -163,7 +163,7 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
                         />
                         <span className="truncate flex-1">{project.name}</span>
                         {project.favorite && (
-                          <Star className="h-3 w-3 shrink-0 fill-yellow-500 text-yellow-500" />
+                          <Star className="h-3 w-3 shrink-0 fill-yellow-600 text-yellow-600 dark:fill-yellow-500 dark:text-yellow-500" />
                         )}
                       </div>
                     </CommandItem>

packages/ui-vite/src/components/shared/ProjectAvatar.tsx

@@ -30,8 +30,8 @@ function getInitials(name: string): string {
   return word.length >= 2 ? (word[0] + word[1]).toUpperCase() : word[0].toUpperCase();
 }
 
-function getContrastColor(hexColor?: string): string {
-  if (!hexColor) return '#ffffff';
+function getContrastColor(hexColor?: string): string | undefined {
+  if (!hexColor) return undefined;
 
   const hex = hexColor.replace('#', '');
   const r = parseInt(hex.substring(0, 2), 16);
@@ -59,7 +59,7 @@ export function ProjectAvatar({
         className="font-semibold border"
         style={{
           backgroundColor: color || undefined,
-          color: textColor,
+          ...(textColor && { color: textColor }),
         }}
       >
         {initials}

packages/ui-vite/src/pages/SpecsPage.tsx

@@ -209,31 +209,33 @@ export function SpecsPage() {
           <p className="text-sm text-muted-foreground">{t('specsPage.count', { count: filteredSpecs.length })}</p>
         </div>
 
-        <div className="flex items-center gap-2 bg-secondary/50 p-1 rounded-lg border">
-          <button
+        <div className="flex items-center gap-1 bg-secondary/50 p-1 rounded-lg border">
+          <Button
+            variant={viewMode === 'list' ? 'secondary' : 'ghost'}
+            size="sm"
             onClick={() => setViewMode('list')}
             className={cn(
-              "p-1.5 rounded-md transition-colors",
-              viewMode === 'list'
-                ? "bg-background shadow-sm text-foreground"
-                : "text-muted-foreground hover:text-foreground"
+              "h-8",
+              viewMode === 'list' && "bg-background shadow-sm"
             )}
             title="List View"
           >
-            <List className="w-4 h-4" />
-          </button>
-          <button
+            <List className="w-4 h-4 mr-1.5" />
+            List
+          </Button>
+          <Button
+            variant={viewMode === 'board' ? 'secondary' : 'ghost'}
+            size="sm"
             onClick={() => setViewMode('board')}
             className={cn(
-              "p-1.5 rounded-md transition-colors",
-              viewMode === 'board'
-                ? "bg-background shadow-sm text-foreground"
-                : "text-muted-foreground hover:text-foreground"
+              "h-8",
+              viewMode === 'board' && "bg-background shadow-sm"
             )}
             title="Board View"
           >
-            <LayoutGrid className="w-4 h-4" />
-          </button>
+            <LayoutGrid className="w-4 h-4 mr-1.5" />
+            Board
+          </Button>
         </div>
       </div>
 

specs/198-ui-vite-remaining-issues/README.md

@@ -104,14 +104,24 @@ After implementing initial UI parity between Next.js and Vite apps in spec 193,
 
 ## Plan
 
-- [ ] Fix sidebar active state detection for project-prefixed routes
-- [ ] Debug and fix spec detail page routing/API errors
-- [ ] Debug and fix dependencies page routing/API errors  
-- [ ] Add `/projects` route and implement project management page
-- [ ] Add proper padding to specs list and board views
-- [ ] Fix project switcher navigation and context sync
-- [ ] Debug and fix "Path does not exist" error in create project
-- [ ] Implement full sorting options matching Next.js UI
+- [x] Fix sidebar active state detection for project-prefixed routes (MainSidebar strips project prefixes so active highlighting follows nested routes)
+- [x] Debug and fix spec detail page routing/API errors (SpecDetailPage waits for project context and uses project-aware base paths)
+- [x] Debug and fix dependencies page routing/API errors (DependenciesPage uses project params, basePath navigation, and guards on project readiness)
+- [x] Add `/projects` route and implement project management page (router now exposes `/projects` with ProjectsPage for management)
+- [x] Add proper padding to specs list and board views (SpecsPage uses padded container with max width)
+- [x] Fix project switcher navigation and context sync (ProjectSwitcher calls switchProject then redirects to preserved subpath; ProjectContext refreshes projects and persists selection)
+- [x] Debug and fix "Path does not exist" error in create project (CreateProjectDialog supports picker/manual modes with DirectoryPicker and clearer errors)
+- [x] Implement full sorting options matching Next.js UI (SpecsPage + SpecsFilters expose id asc/desc, updated desc, title asc)
+
+## Implementation Notes
+
+- Sidebar links normalize paths and remove `/projects/:id` prefixes before comparing, preventing the home item from staying highlighted on nested routes.
+- Spec detail and dependencies pages gate data loading on project context readiness and use project-aware base paths for navigation.
+- Router now includes `/projects` mapped to ProjectsPage, providing management UI consistent with the project switcher entry.
+- SpecsPage container adds `p-4 sm:p-6` spacing with a centered max width for both list and board layouts.
+- Project switcher preserves the current subpath when changing projects and falls back to `/specs` for detail routes to avoid broken paths.
+- Create project flow accepts picker or manual input; DirectoryPicker queries the filesystem and the dialog surfaces validation errors without blocking.
+- Specs sorting options now mirror the Next.js UI and propagate through SpecsFilters.
 
 ## Test
 
@@ -124,6 +134,8 @@ After implementing initial UI parity between Next.js and Vite apps in spec 193,
 - [ ] Can create new project without path validation errors
 - [ ] All sorting options work and match Next.js behavior
 
+Test run: `pnpm -C packages/ui-vite test` (fails in `src/lib/api.test.ts` because the mocked fetch response lacks `.text()`).
+
 ## Notes
 
 These issues are blocking full UI-Vite parity and need to be resolved before considering spec 193 complete. Most are straightforward fixes once the root causes are identified.