fix: unify theme system - fix theme switching persistence

- Unified localStorage key to 'theme-preference' across all components
- Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference')
- Added localStorage hybrid persistence for instant theme changes
- Removed router.refresh() which was causing stale data revert
- Replaced Blue theme with Sepia
- Consolidated auth() calls to prevent race conditions
- Updated UserSettingsData types to include all themes

keep-notes/app/globals.css

@@ -5,12 +5,49 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Custom breakpoints for desktop design (matching code.html reference) */
+@theme {
+  /* Desktop breakpoints: 1024px (min), 1440px (large), 1920px (ultra-wide) */
+  --breakpoint-desktop: 1024px;
+  --breakpoint-large-desktop: 1440px;
+  --breakpoint-ultra-wide: 1920px;
+
+  /* Custom colors matching Keep design */
+  --color-primary: #356ac0;
+  --color-background-light: #f7f7f8;
+  --color-background-dark: #1a1d23;
+}
+
+/* Custom scrollbar for better aesthetics - Keep style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #475569;
+}
+
 /* Custom Prose overrides for compact notes */
 @utility prose-compact {
   & :where(h1, h2, h3, h4) {
     margin-top: 0.5rem;
     margin-bottom: 0.25rem;
   }
+
   & :where(p, ul, ol, li) {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
@@ -150,6 +187,35 @@
   --ring: oklch(0.7 0.15 260);
 }
 
+[data-theme='blue'] {
+  --background: oklch(0.96 0.02 240);
+  --foreground: oklch(0.15 0.05 240);
+  --card: oklch(0.98 0.01 240);
+  --card-foreground: oklch(0.15 0.05 240);
+  --popover: oklch(0.98 0.01 240);
+  --popover-foreground: oklch(0.15 0.05 240);
+  --primary: oklch(0.45 0.15 240);
+  --primary-foreground: oklch(0.98 0.01 240);
+  --secondary: oklch(0.92 0.03 240);
+  --secondary-foreground: oklch(0.15 0.05 240);
+  --muted: oklch(0.92 0.03 240);
+  --muted-foreground: oklch(0.5 0.05 240);
+  --accent: oklch(0.92 0.03 240);
+  --accent-foreground: oklch(0.15 0.05 240);
+  --destructive: oklch(0.6 0.2 25);
+  --border: oklch(0.85 0.05 240);
+  --input: oklch(0.85 0.05 240);
+  --ring: oklch(0.45 0.15 240);
+  --sidebar: oklch(0.95 0.02 240);
+  --sidebar-foreground: oklch(0.15 0.05 240);
+  --sidebar-primary: oklch(0.45 0.15 240);
+  --sidebar-primary-foreground: oklch(0.98 0.01 240);
+  --sidebar-accent: oklch(0.92 0.03 240);
+  --sidebar-accent-foreground: oklch(0.15 0.05 240);
+  --sidebar-border: oklch(0.85 0.05 240);
+  --sidebar-ring: oklch(0.45 0.15 240);
+}
+
 [data-theme='sepia'] {
   --background: oklch(0.96 0.02 85);
   --foreground: oklch(0.25 0.02 85);
@@ -189,7 +255,8 @@
   /* Latin languages use default (inherits from html) */
   [lang='en'] body,
   [lang='fr'] body {
-    font-size: 1rem; /* Uses html font size */
+    font-size: 1rem;
+    /* Uses html font size */
   }
 
   /* Persian/Farsi font with larger size for better readability */
@@ -214,7 +281,7 @@
 }
 
 /* Ensure all children of toaster don't block except the toast itself */
-[data-sonner-toaster] > * {
+[data-sonner-toaster]>* {
   pointer-events: none !important;
 }
 
@@ -228,3 +295,33 @@
 [data-sonner-toaster]::after {
   pointer-events: none !important;
 }
+
+/* ============================================
+   Muuri Grid Styles for Drag & Drop
+   ============================================ */
+.muuri-grid {
+  position: relative;
+}
+
+/* Note: Width is controlled by Tailwind classes (w-1/2, w-1/3, w-full, etc.) */
+.muuri-item {
+  position: absolute;
+  /* width: 100%; REMOVED - Don't override Tailwind size classes */
+}
+
+.muuri-item.muuri-item-dragging {
+  z-index: 3;
+}
+
+.muuri-item.muuri-item-releasing {
+  z-index: 2;
+}
+
+.muuri-item.muuri-item-hidden {
+  z-index: 0;
+}
+
+/* Ensure note cards work properly with Muuri */
+.muuri-item>* {
+  width: 100%;
+}