feat: move projects to sidebar rail and speed up session switching (#506)

* feat: move projects from header tabs to left sidebar rail

* refactor: remove variant from git generation session context

* feat: implemented drandrop action for navrails

* refactor: improve sidebar drag-and-drop smoothness and remove floating overlay

* fix: prevent mobile nav rail touch from closing drawer and opening menu

* fix: hide header tabs on desktop

* fix: prevent session flicker when switching projects

* style: soften chat panel divider borders

* style: improve icon contrast across core navigation

* fix: stabilize session selection during project switching

* style: unify sidebar surfaces and transparent section layers

* style: remove UI shadows and keep only scroll shadow

* perf: speed up project switching with cached session loading

* perf: speed up Git changes view and background refresh

* perf: make session switching lighter and less aggressive

* perf: optimized sessions list loading while project switching

* perf: smooth chat rendering and reduce interaction spikes

* fix: restore reliable load older messages visibility

packages/ui/src/stores/useProjectsStore.ts

@@ -7,6 +7,25 @@ import { updateDesktopSettings } from '@/lib/persistence';
 import { getSafeStorage } from './utils/safeStorage';
 import { useDirectoryStore } from './useDirectoryStore';
 import { streamDebugEnabled } from '@/stores/utils/streamDebug';
+import { PROJECT_COLORS } from '@/lib/projectMeta';
+
+/** Pick a color key that's least used among existing projects */
+const pickAutoColor = (projects: ProjectEntry[]): string => {
+  const colorKeys = PROJECT_COLORS.map((c) => c.key);
+  const usageCounts = new Map<string, number>();
+  for (const key of colorKeys) {
+    usageCounts.set(key, 0);
+  }
+  for (const p of projects) {
+    if (p.color && usageCounts.has(p.color)) {
+      usageCounts.set(p.color, (usageCounts.get(p.color) ?? 0) + 1);
+    }
+  }
+  // Find minimum usage, then pick randomly among those with min usage
+  const minUsage = Math.min(...usageCounts.values());
+  const candidates = colorKeys.filter((k) => usageCounts.get(k) === minUsage);
+  return candidates[Math.floor(Math.random() * candidates.length)];
+};
 
 interface ProjectPathValidationResult {
   ok: boolean;
@@ -280,6 +299,7 @@ export const useProjectsStore = create<ProjectsStore>()(
         id,
         path: normalizedPath,
         label,
+        color: pickAutoColor(get().projects),
         addedAt: now,
         lastOpenedAt: now,
       };