feat: Major UI improvements - categories sidebar, floating toolbar, focus mode

Categories sidebar:
- Collapsible first column with category management
- Create new categories directly from sidebar
- Thin tab when collapsed
- Moved user info, logout, and theme selector here

Note editor redesign:
- Clean toolbar with pill-style buttons
- Category dropdown with folder icon
- Preview toggle in toolbar
- Streamlined action buttons

Floating formatting toolbar:
- Appears on text selection
- Bold, italic, strikethrough, code, code block, quote, lists, link, headings
- Active state highlighting for applied formats
- Toggle behavior removes formatting if already applied

Focus mode:
- Hides sidebars for distraction-free writing
- Content centered with max-width
- Escape key to exit
- Scrolling works from anywhere in viewport

src/components/NotesList.tsx

@@ -8,10 +8,6 @@ interface NotesListProps {
   onCreateNote: () => void;
   onDeleteNote: (note: Note) => void;
   onSync: () => void;
-  onLogout: () => void;
-  username: string;
-  theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   searchText: string;
   onSearchChange: (text: string) => void;
   showFavoritesOnly: boolean;
@@ -26,10 +22,6 @@ export function NotesList({
   onCreateNote,
   onDeleteNote,
   onSync,
-  onLogout,
-  username,
-  theme,
-  onThemeChange,
   searchText,
   onSearchChange,
   showFavoritesOnly,
@@ -215,73 +207,6 @@ export function NotesList({
           ))
         )}
       </div>
-
-      {/* User Info and Logout */}
-      <div className="border-t border-gray-200 p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
-        <div className="flex items-center justify-between mb-3">
-          <div className="flex items-center space-x-2 min-w-0">
-            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0">
-              {username.charAt(0).toUpperCase()}
-            </div>
-            <span className="text-sm text-gray-700 dark:text-gray-200 truncate font-medium">{username}</span>
-          </div>
-          <button
-            onClick={onLogout}
-            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0"
-            title="Logout"
-          >
-            <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-            </svg>
-          </button>
-        </div>
-        
-        {/* Theme Toggle */}
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-gray-500 dark:text-gray-400">Theme</span>
-          <div className="flex items-center space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
-            <button
-              onClick={() => onThemeChange('light')}
-              className={`p-1.5 rounded transition-colors ${
-                theme === 'light' 
-                  ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' 
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-              }`}
-              title="Light mode"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-              </svg>
-            </button>
-            <button
-              onClick={() => onThemeChange('dark')}
-              className={`p-1.5 rounded transition-colors ${
-                theme === 'dark' 
-                  ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' 
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-              }`}
-              title="Dark mode"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-              </svg>
-            </button>
-            <button
-              onClick={() => onThemeChange('system')}
-              className={`p-1.5 rounded transition-colors ${
-                theme === 'system' 
-                  ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' 
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-              }`}
-              title="System theme"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }