94ffa69d21
## Problem Fixed: Community selection in settings was using hardcoded list that didn't match the actual enabled communities in the admin panel's collection_targets configuration. ## Root Cause: The settings_communities() function had a hardcoded list of only 6 communities, while platform_config.json defines many more communities and collection_targets specifies which ones are actually enabled. ## Solution: - **Dynamic community loading** - Reads from platform_config.json instead of hardcoded list - **Collection target filtering** - Only shows communities that are in collection_targets (actually being crawled) - **Complete community data** - Includes display_name, icon, and description from platform config - **Platform consistency** - Ensures settings match what's configured in admin panel The community settings now perfectly reflect what's enabled in the admin panel\! 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
434 lines
14 KiB
HTML
434 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BalanceBoard - Content Feed</title>
|
|
{% for css_path in theme.css_dependencies %}
|
|
<link rel="stylesheet" href="{{ css_path }}">
|
|
{% endfor %}
|
|
<style>
|
|
/* Enhanced Navigation Styles */
|
|
.nav-top {
|
|
background: var(--surface-color);
|
|
border-bottom: 1px solid var(--divider-color);
|
|
padding: 0.5rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-top-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.nav-brand-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-balance {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.brand-board {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.nav-user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.nav-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--primary-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.nav-username {
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.hamburger-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.hamburger-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.hamburger-toggle:hover {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.hamburger-line {
|
|
width: 20px;
|
|
height: 2px;
|
|
background: var(--text-primary);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hamburger-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
background: var(--surface-color);
|
|
border: 1px solid var(--divider-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
min-width: 200px;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.hamburger-dropdown.show {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: block;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: var(--divider-color);
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.nav-login-prompt {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-nav-login, .btn-nav-signup {
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-nav-login {
|
|
background: var(--surface-color);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.btn-nav-login:hover {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.btn-nav-signup {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-nav-signup:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.nav-username {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Enhanced Top Navigation -->
|
|
<nav class="nav-top">
|
|
<div class="nav-top-container">
|
|
<a href="/" class="nav-brand">
|
|
<img src="/logo.png" alt="BalanceBoard Logo" class="nav-logo">
|
|
<div class="nav-brand-text">
|
|
<span class="brand-balance">balance</span><span class="brand-board">Board</span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="nav-user-section">
|
|
<!-- Logged in user state -->
|
|
<div class="nav-user-info" style="display: none;">
|
|
<div class="nav-avatar">JD</div>
|
|
<span class="nav-username">johndoe</span>
|
|
<div class="hamburger-menu">
|
|
<button class="hamburger-toggle" onclick="toggleDropdown()">
|
|
<div class="hamburger-line"></div>
|
|
<div class="hamburger-line"></div>
|
|
<div class="hamburger-line"></div>
|
|
</button>
|
|
<div class="hamburger-dropdown" id="userDropdown">
|
|
<a href="/settings" class="dropdown-item">
|
|
⚙️ Settings
|
|
</a>
|
|
<a href="/settings/profile" class="dropdown-item">
|
|
👤 Profile
|
|
</a>
|
|
<a href="/settings/communities" class="dropdown-item">
|
|
🌐 Communities
|
|
</a>
|
|
<a href="/settings/filters" class="dropdown-item">
|
|
🎛️ Filters
|
|
</a>
|
|
<a href="/bookmarks" class="dropdown-item">
|
|
📚 Bookmarks
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="/admin" class="dropdown-item" style="display: none;">
|
|
🛠️ Admin
|
|
</a>
|
|
<div class="dropdown-divider" style="display: none;"></div>
|
|
<a href="/logout" class="dropdown-item">
|
|
🚪 Sign Out
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logged out state -->
|
|
<div class="nav-login-prompt">
|
|
<a href="/login" class="btn-nav-login">Log In</a>
|
|
<a href="/signup" class="btn-nav-signup">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="app-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<!-- User Card -->
|
|
<div class="sidebar-section user-card">
|
|
<div class="login-prompt">
|
|
<div class="user-avatar">?</div>
|
|
<p>Join BalanceBoard to customize your feed</p>
|
|
<a href="/login" class="btn-login">Log In</a>
|
|
<a href="/signup" class="btn-signup">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="sidebar-section">
|
|
<h3>Navigation</h3>
|
|
<ul class="nav-menu">
|
|
<li><a href="/" class="nav-item active">
|
|
<span class="nav-icon">🏠</span>
|
|
<span>Home</span>
|
|
</a></li>
|
|
<li><a href="#" class="nav-item">
|
|
<span class="nav-icon">🔥</span>
|
|
<span>Popular</span>
|
|
</a></li>
|
|
<li><a href="#" class="nav-item">
|
|
<span class="nav-icon">⭐</span>
|
|
<span>Saved</span>
|
|
</a></li>
|
|
<li><a href="#" class="nav-item">
|
|
<span class="nav-icon">📊</span>
|
|
<span>Analytics</span>
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="sidebar-section">
|
|
<h3>Filter by Platform</h3>
|
|
<div class="filter-tags">
|
|
<a href="#" class="filter-tag active">All</a>
|
|
<a href="#" class="filter-tag">Reddit</a>
|
|
<a href="#" class="filter-tag">HackerNews</a>
|
|
<a href="#" class="filter-tag">Lobsters</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About -->
|
|
<div class="sidebar-section">
|
|
<h3>About</h3>
|
|
<p style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;">
|
|
BalanceBoard filters and curates content from multiple platforms to help you stay informed.
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<header>
|
|
<h1>{{ filterset_name|title or 'All Posts' }}</h1>
|
|
<p class="post-count">{{ posts|length }} posts</p>
|
|
</header>
|
|
<div id="posts-container">
|
|
{% for post in posts %}
|
|
{{ post|safe }}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{% for js_path in theme.js_dependencies %}
|
|
<script src="{{ js_path }}"></script>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
// Dropdown functionality
|
|
function toggleDropdown() {
|
|
const dropdown = document.getElementById('userDropdown');
|
|
dropdown.classList.toggle('show');
|
|
}
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const dropdown = document.getElementById('userDropdown');
|
|
const toggle = document.querySelector('.hamburger-toggle');
|
|
|
|
if (!toggle.contains(event.target) && !dropdown.contains(event.target)) {
|
|
dropdown.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Check user authentication state (this would be dynamic in a real app)
|
|
function checkAuthState() {
|
|
// This would normally check with the server
|
|
// For now, we'll show the logged out state
|
|
document.querySelector('.nav-user-info').style.display = 'none';
|
|
document.querySelector('.nav-login-prompt').style.display = 'flex';
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', checkAuthState);
|
|
|
|
// Bookmark functionality
|
|
async function toggleBookmark(postId, button) {
|
|
try {
|
|
button.disabled = true;
|
|
const originalText = button.querySelector('.bookmark-text').textContent;
|
|
button.querySelector('.bookmark-text').textContent = 'Saving...';
|
|
|
|
const response = await fetch('/api/bookmark', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ post_uuid: postId })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to toggle bookmark');
|
|
}
|
|
|
|
// Update button state
|
|
updateBookmarkButton(button, data.bookmarked);
|
|
|
|
} catch (error) {
|
|
console.error('Error toggling bookmark:', error);
|
|
alert('Error: ' + error.message);
|
|
button.querySelector('.bookmark-text').textContent = originalText;
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
}
|
|
|
|
function updateBookmarkButton(button, isBookmarked) {
|
|
const icon = button.querySelector('.bookmark-icon');
|
|
const text = button.querySelector('.bookmark-text');
|
|
|
|
if (isBookmarked) {
|
|
button.classList.add('bookmarked');
|
|
icon.textContent = '📌';
|
|
text.textContent = 'Saved';
|
|
} else {
|
|
button.classList.remove('bookmarked');
|
|
icon.textContent = '🔖';
|
|
text.textContent = 'Save';
|
|
}
|
|
}
|
|
|
|
// Load bookmark states for visible posts
|
|
async function loadBookmarkStates() {
|
|
const bookmarkButtons = document.querySelectorAll('.bookmark-btn');
|
|
|
|
for (const button of bookmarkButtons) {
|
|
const postId = button.getAttribute('data-post-id');
|
|
|
|
try {
|
|
const response = await fetch(`/api/bookmark-status/${postId}`);
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.bookmarked) {
|
|
updateBookmarkButton(button, true);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading bookmark status:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Load bookmark states when page loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
setTimeout(loadBookmarkStates, 500); // Small delay to ensure posts are rendered
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|