Improve Settings page with category color customization and streamlined navigation

Settings Page Improvements:
- Remove Settings from all navigation bars (sidebar, mobile bottom, hamburger menu)
- Make Settings accessible ONLY via Profile page blue button
- Remove redundant sections (Checklists, Data, About)
- Focus on core settings: Account, Appearance, Categories

Category Color Customization:
- Add clickable color swatches (40x40px buttons with hover animation)
- System categories: Users can customize colors via personal preferences
- Custom categories: Full edit capabilities (label and color)
- Individual reset buttons for system category colors
- Auto-generate category keys from display labels
- Fix disabled input styling (dark background, readable text)

User Experience:
- Color swatches replace separate edit buttons for cleaner design
- JavaScript auto-generates keys from labels (no manual key entry)
- Per-user color preferences stored in User.category_colors JSON field
- Settings integrated into profile management workflow

Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ChefJulio

CLAUDE.md

@@ -827,7 +827,7 @@ Both `index()` route and `/api/checklists` endpoint use identical logic:
 
 ## UI/UX Guidelines
 - Sidebar navigation icons aligned to top (not center)
-- Settings gear icon positioned at bottom of sidebar
+- **Settings access**: ONLY via Profile page button (removed from nav bars)
 - All form labels must have good contrast (use #e6edf3 in dark, #1f2937 in light)
 - Checklist filter on All Entries dynamically shows/hides based on Task type selection
 - Collapsible sections use Bootstrap collapse with chevron rotation animation
@@ -914,6 +914,48 @@ Colors flow from **casual/ignorable** (green) to **urgent/obligatory** (red):
 
 📚 **[Category System Documentation](docs/systems/category-system.md)** - database model, user creation, validation, legacy migration, sharing
 
+## Settings Page - CRITICAL
+**Clean, focused settings page accessible only via user's profile page**
+
+### Navigation
+- **❌ Removed from all navigation bars** (sidebar, mobile bottom bar, hamburger menu)
+- **✅ Accessible only via Profile page** - Blue "Settings" button in top-right corner
+- Why: Creates cleaner navigation, makes Settings part of profile management workflow
+
+### Sections
+1. **Account** - Username, display name, password changes with collapsible forms
+2. **Appearance** - Theme selection (Dark/Light) with visual previews
+3. **Categories** - Built-in and custom category management
+
+### Category Color Customization
+- **System categories**: Click color swatch (40x40px button) to edit color only
+  - Color preferences stored per-user in `category_colors` JSON field
+  - Overrides default system colors without affecting other users
+  - Individual reset button to restore default color
+- **Custom categories**: Click color swatch to edit label and color
+  - Key auto-generated from display label (lowercase, underscores for spaces)
+  - Cannot change key after creation (immutable identifier)
+  - Delete button (only if category not in use)
+
+### UX Patterns
+- **Clickable color swatches**: 40x40px buttons with hover scale animation (1.1x)
+- **Disabled input styling**: Dark slate background (`#1e293b`) with gray text (`#94a3b8`)
+- **Auto-generated keys**: JavaScript converts "Gaming Stream" → "gaming_stream"
+- **Collapsible forms**: Username, display name, password changes hidden until clicked
+
+### Critical Rules
+```python
+# ✅ System category color updates stored per-user
+category_colors = current_user.get_category_colors() or {}
+category_colors[category.key] = color
+current_user.set_category_colors(category_colors)
+
+# ✅ Custom category keys auto-generated (never exposed to user)
+key = display_label.toLowerCase().replace(/[^a-z0-9\s]/g, '').trim().replace(/\s+/g, '_')
+```
+
+**Removed sections**: Checklists, Data, About (redundant or premature)
+
 ## Help Me On A Higher Level
 - Never, ever, ever, EVER, make a bandaid, technical debt heavy correction to fix problems. ALWAYS suggest better ways to do things in a general sense if you sense one.
 - Think about what I'm asking for, scope out and consider if there's a better way to handle a parent issue that would fix it first

app.py

@@ -2479,25 +2479,41 @@ def settings_update_colors():
             """Update category color preferences"""
             from models import Category
 
-            # Check if user wants to reset to defaults
+            # Check if user wants to reset all to defaults
             if request.form.get('reset'):
                 # Reset to defaults
-                current_user.set_category_colors(DEFAULT_CATEGORY_COLORS)
+                current_user.set_category_colors({})
                 db.session.commit()
                 flash("Category colors reset to defaults", "success")
                 return redirect(url_for('settings_view'))
 
-            # Update category colors from form (legacy support)
-            category_colors = current_user.get_category_colors() or DEFAULT_CATEGORY_COLORS.copy()
+            # Get all system categories to handle dynamically
+            system_categories = Category.query.filter_by(is_system=True, user_id=None).all()
 
-            for cat_key in ['event', 'meeting', 'reminder', 'birthday', 'holiday', 'movie_release', 'tv_show_release']:
-                color = request.form.get(f'color_{cat_key}')
+            # Update category colors from form
+            category_colors = current_user.get_category_colors() or {}
+
+            # Check if user wants to reset a specific category
+            for category in system_categories:
+                reset_key = f'reset_{category.key}'
+                if request.form.get(reset_key):
+                    # Remove this category from user preferences (will use default)
+                    if category.key in category_colors:
+                        del category_colors[category.key]
+                    current_user.set_category_colors(category_colors)
+                    db.session.commit()
+                    flash(f"'{category.display_label}' color reset to default", "success")
+                    return redirect(url_for('settings_view'))
+
+            # Check form for any color_* fields matching system category keys
+            for category in system_categories:
+                color = request.form.get(f'color_{category.key}')
                 if color:
-                    category_colors[cat_key] = color
+                    category_colors[category.key] = color
 
             current_user.set_category_colors(category_colors)
             db.session.commit()
-            flash("Category colors updated successfully", "success")
+            flash("Category color updated successfully", "success")
             return redirect(url_for('settings_view'))
 
         @app.route("/settings/category/create", methods=["POST"])
@@ -3203,6 +3219,11 @@ def change_display_name():
             flash(f"Display name changed from '{old_display_name}' to '{new_display_name}' successfully!", "success")
             return redirect(url_for('settings_view'))
 
+        # ===== SOCIAL SYSTEM ROUTES =====
+        # Import and register social routes from separate module
+        from social_routes import register_social_routes
+        register_social_routes(app)
+
     return app