feat: 🐛 Fix theme persistence and sidebar navigation issues; set dark mode as default and enhance client-side routing

Author: sizzlebop

CHANGELOG.md

@@ -7,6 +7,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.1.1] - 2025-12-01
+
+### 🐛 Bug Fixes: Theme Persistence & Navigation
+
+This patch release fixes critical theme persistence issues where the dark theme wasn't being applied as default and theme settings would reset when clicking sidebar navigation buttons.
+
+#### Fixed
+- **Dark Theme Not Default** – Fixed `getUserSettings()` in `queries.ts` to use correct default values when creating new user settings:
+  - Changed `mode` default from `'light'` to `'dark'`
+  - Changed `accentThemeId` default from `'default'` to `'byte-classic'`
+  - Changed `iconThemeId` default from `'default'` to `'neon-grid'`
+  - Changed `glassIntensity` default from `0` to `60`
+  - Changed `customIconColor` default from `''` to `'#f472b6'`
+  - Changed `backgroundConfig` default from `'{}'` to `'{"type":"default"}'`
+  - Changed `fontConfig` default from `'{}'` to `'{"uiFont":"system","monoFont":"geist-mono"}'`
+- **Theme Reset on Sidebar Click** – Fixed sidebar navigation causing full page reloads which reset theme to API defaults
+  - **Root Cause**: Sidebar navigation items used `<a href={...}>` tags instead of Next.js `<Link>` component
+  - **Solution**: Changed all sidebar navigation items in `AppLayout.tsx` from `<a>` to `<Link>` for proper client-side navigation
+  - Previously clicking Dashboard, Search, Tags, or Settings would trigger a full page reload
+  - Now navigation is instant and preserves all React state including theme settings
+
+#### Technical Details
+- **Modified Files**:
+  - `src/lib/db/queries.ts`: Fixed `getUserSettings()` default values
+  - `src/components/layout/AppLayout.tsx`: Changed `<a>` tags to `<Link>` components for sidebar nav
+- **Database**: Cleared existing `user_settings` row to allow fresh creation with correct defaults
+- **Import Added**: `import Link from 'next/link'` in AppLayout.tsx
+
+#### Migration Notes
+- Users should hard refresh their browser (Ctrl+Shift+R / Cmd+Shift+R) after updating
+- If theme issues persist, clear localStorage keys starting with `bytebox-` or clear site data
+- New installations will automatically use dark theme as default
+
+---
+
 ## [2.1.0] - 2025-12-01
 
 ### 🎨 Card Modal Editing & UX Improvements

OVERVIEW.md

@@ -1,7 +1,7 @@
 # 📚 ByteBox – Project Overview
 
 **Last Updated**: December 1, 2025  
-**Version**: 2.1.0  
+**Version**: 2.1.1  
 **Author**: [Pink Pixel](https://pinkpixel.dev)  
 **License**: Apache 2.0  
 **Status**: ✅ Stable & Complete
@@ -126,7 +126,7 @@ bytebox/
 │   │   │   ├── CreateCardModal.tsx    # New card creation modal with file upload and dark theme support
 │   │   │   └── DraggableCard.tsx      # Card with @dnd-kit drag wrapper
 │   │   ├── layout/                    # Layout components
-│   │   │   ├── AppLayout.tsx          # Main app shell (sidebar, header, collapsible with icon/banner logo)
+│   │   │   ├── AppLayout.tsx          # Main app shell (sidebar with Next.js Link navigation, header, collapsible with icon/banner logo)
 │   │   │   ├── Board.tsx              # Kanban board wrapper (drag context)
 │   │   │   └── DraggableBoard.tsx     # Board with @dnd-kit drop zones and CSS Grid columns
 │   │   └── ui/                        # Reusable UI components
@@ -489,10 +489,12 @@ bytebox/
 
 ### 9️⃣ Collapsible Sidebar
 
-**Technology**: React state + Tailwind CSS transitions
+**Technology**: React state + Tailwind CSS transitions + Next.js Link
 
 **Implementation**:
 - `AppLayout.tsx` manages `sidebarOpen` state for expand/collapse behavior
+- Uses Next.js `Link` component for all sidebar navigation (Dashboard, Search, Tags, Settings)
+- Client-side navigation preserves React state and theme settings across page transitions
 - Sidebar transitions smoothly between 320px (expanded) and 96px (collapsed) widths
 - **Logo Switching**:
   - Expanded: Shows full `logo_banner.png` (240×120)

ROADMAP.md

@@ -1,7 +1,7 @@
 # ByteBox Development Roadmap 🗺️
 
 **Last Updated:** December 1, 2025  
-**Current Version:** 2.1.0  
+**Current Version:** 2.1.1  
 **Next Version:** 2.2.0 (Planned - Phase 4)  
 **Status:** 🚀 Active Development
 
@@ -85,6 +85,16 @@ _No features currently in progress. Ready for Phase 4!_
 
 ## ✅ Recently Completed
 
+### v2.1.1: Theme Persistence & Navigation Fixes 🐛
+**Status:** ✅ Complete (2025-12-01)  
+**Priority:** Critical  
+**Released:** v2.1.1
+
+Critical bug fixes for theme persistence and sidebar navigation:
+- **Dark Theme Default** - Fixed `getUserSettings()` to use correct default values (dark mode, byte-classic accent, neon-grid icons, etc.)
+- **Sidebar Navigation** - Changed `<a>` tags to Next.js `<Link>` component for client-side navigation
+- **Theme No Longer Resets** - Sidebar clicks now preserve React state instead of triggering full page reloads
+
 ### v2.1.0: Card Modal Editing & UX Improvements 🎨
 **Status:** ✅ Complete (2025-12-01)  
 **Priority:** High  
@@ -319,6 +329,7 @@ Make ByteBox fully responsive and mobile-friendly with proper touch interactions
 | Customizable Dashboard | ✅ Complete | 1.5.0 | 2025-11-29 |
 | Database-Backed Settings | ✅ Complete | 2.0.0 | 2025-12-01 |
 | Appearance Overhaul | ✅ Complete | 2.0.0 | 2025-12-01 |
+| Theme Persistence Fix | ✅ Complete | 2.1.1 | 2025-12-01 |
 | Category Pages | 💭 Concept | TBD | TBD |
 | Quick Links Bar | 💭 Concept | TBD | TBD |
 | Mobile App Layout | 💭 Concept | TBD | TBD |
@@ -382,6 +393,10 @@ Make ByteBox fully responsive and mobile-friendly with proper touch interactions
    - ✅ Prisma 7 upgrade with better-sqlite3 adapter
    - ✅ Custom accent themes persistence
    - ✅ Settings presets persistence
+7. ✅ ~~**Theme Persistence & Navigation Fixes**~~ DONE (v2.1.1)
+   - ✅ Fixed default theme settings (dark mode default)
+   - ✅ Fixed sidebar navigation to use Next.js Link
+   - ✅ Theme no longer resets on sidebar clicks
 
 ### Upcoming Sprint (Phase 4)
 1. **Category-Specific Pages** 📑 (Next Priority)