So, is this just the code to put somewhere, and that in turn would give me the app?

components/loader.js

@@ -0,0 +1,116 @@
+class LoaderComponent extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                * {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+                
+                :host {
+                    display: contents;
+                }
+                
+                .loader-grid {
+                    display: grid;
+                    grid-template-columns: repeat(1, 1fr);
+                    gap: 1.5rem;
+                }
+                
+                @media (min-width: 768px) {
+                    .loader-grid {
+                        grid-template-columns: repeat(2, 1fr);
+                    }
+                }
+                
+                @media (min-width: 1024px) {
+                    .loader-grid {
+                        grid-template-columns: repeat(3, 1fr);
+                    }
+                }
+                
+                .skeleton-card {
+                    background: white;
+                    border-radius: 1rem;
+                    overflow: hidden;
+                    border: 1px solid #e5e7eb;
+                }
+                
+                :host-context(.dark) .skeleton-card {
+                    background: #1f2937;
+                    border-color: #374151;
+                }
+                
+                .skeleton-image {
+                    height: 12rem;
+                    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+                    background-size: 200% 100%;
+                    animation: shimmer 1.5s infinite;
+                }
+                
+                :host-context(.dark) .skeleton-image {
+                    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+                    background-size: 200% 100%;
+                }
+                
+                .skeleton-content {
+                    padding: 1.25rem;
+                }
+                
+                .skeleton-line {
+                    height: 0.75rem;
+                    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+                    background-size: 200% 100%;
+                    animation: shimmer 1.5s infinite;
+                    border-radius: 0.25rem;
+                    margin-bottom: 0.75rem;
+                }
+                
+                :host-context(.dark) .skeleton-line {
+                    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+                    background-size: 200% 100%;
+                }
+                
+                .skeleton-line.short {
+                    width: 60%;
+                }
+                
+                .skeleton-line.title {
+                    height: 1.25rem;
+                    margin-bottom: 1rem;
+                }
+                
+                @keyframes shimmer {
+                    0% { background-position: 200% 0; }
+                    100% { background-position: -200% 0; }
+                }
+            </style>
+            
+            <div class="loader-grid">
+                ${Array(6).fill(0).map(() => `
+                    <div class="skeleton-card">
+                        <div class="skeleton-image"></div>
+                        <div class="skeleton-content">
+                            <div class="skeleton-line short"></div>
+                            <div class="skeleton-line title"></div>
+                            <div class="skeleton-line"></div>
+                            <div class="skeleton-line short"></div>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+}
+
+customElements.define('loader-component', LoaderComponent);

components/news-card.js

@@ -0,0 +1,354 @@
+class NewsCard extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    static get observedAttributes() {
+        return ['title', 'url', 'permalink', 'author', 'score', 'comments', 'created', 'thumbnail', 'category', 'priority'];
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const title = this.getAttribute('title') || '';
+        const url = this.getAttribute('url') || '';
+        const permalink = this.getAttribute('permalink') || '';
+        const author = this.getAttribute('author') || '';
+        const score = this.getAttribute('score') || '0';
+        const comments = this.getAttribute('comments') || '0';
+        const created = this.getAttribute('created') || new Date().toISOString();
+        const thumbnail = this.getAttribute('thumbnail') || '';
+        const category = this.getAttribute('category') || 'general';
+        const priority = this.getAttribute('priority') || 'low';
+
+        const categoryColors = {
+            ai: 'from-primary-500 to-secondary-500',
+            science: 'from-emerald-500 to-teal-500',
+            tech: 'from-amber-500 to-orange-500',
+            nhl: 'from-orange-500 to-blue-600',
+            general: 'from-gray-500 to-gray-600'
+        };
+
+        const tagColors = {
+            ai: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+            science: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+            tech: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+            nhl: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+            general: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+        };
+
+        const timeAgo = this.getTimeAgo(new Date(created));
+        const hasImage = thumbnail && thumbnail.startsWith('http');
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                * {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+                
+                :host {
+                    display: block;
+                }
+                
+                .card {
+                    background: white;
+                    border-radius: 1rem;
+                    overflow: hidden;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    border: 1px solid #e5e7eb;
+                    cursor: pointer;
+                }
+                
+                :host-context(.dark) .card {
+                    background: #1f2937;
+                    border-color: #374151;
+                }
+                
+                .card:hover {
+                    transform: translateY(-4px);
+                    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
+                }
+                
+                .image-container {
+                    position: relative;
+                    height: 12rem;
+                    overflow: hidden;
+                }
+                
+                .image-container img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    transition: transform 0.5s ease;
+                }
+                
+                .card:hover .image-container img {
+                    transform: scale(1.1);
+                }
+                
+                .gradient-bg {
+                    height: 8rem;
+                    background: linear-gradient(135deg, var(--gradient-from, #0ea5e9), var(--gradient-to, #8b5cf6));
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                
+                .gradient-bg svg {
+                    width: 4rem;
+                    height: 4rem;
+                    color: rgba(255,255,255,0.3);
+                }
+                
+                .tag {
+                    position: absolute;
+                    top: 0.75rem;
+                    left: 0.75rem;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.5rem;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    backdrop-filter: blur(4px);
+                }
+                
+                .priority-indicator {
+                    position: absolute;
+                    top: 0.75rem;
+                    right: 0.75rem;
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    background: #ef4444;
+                    border-radius: 50%;
+                    animation: pulse 2s ease-in-out infinite;
+                }
+                
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; transform: scale(1); }
+                    50% { opacity: 0.5; transform: scale(1.2); }
+                }
+                
+                .content {
+                    padding: 1.25rem;
+                }
+                
+                .meta {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-size: 0.75rem;
+                    color: #6b7280;
+                    margin-bottom: 0.75rem;
+                }
+                
+                :host-context(.dark) .meta {
+                    color: #9ca3af;
+                }
+                
+                .meta img {
+                    width: 1.25rem;
+                    height: 1.25rem;
+                    border-radius: 50%;
+                }
+                
+                .title {
+                    font-size: 1rem;
+                    font-weight: 600;
+                    color: #111827;
+                    line-height: 1.5;
+                    margin-bottom: 1rem;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    transition: color 0.2s ease;
+                }
+                
+                :host-context(.dark) .title {
+                    color: #f9fafb;
+                }
+                
+                .card:hover .title {
+                    color: #0ea5e9;
+                }
+                
+                :host-context(.dark) .card:hover .title {
+                    color: #38bdf8;
+                }
+                
+                .footer {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                
+                .stats {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 0.875rem;
+                    color: #6b7280;
+                }
+                
+                :host-context(.dark) .stats {
+                    color: #9ca3af;
+                }
+                
+                .stat {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+                
+                .stat svg {
+                    width: 1rem;
+                    height: 1rem;
+                }
+                
+                .save-btn {
+                    padding: 0.5rem;
+                    border-radius: 0.5rem;
+                    border: none;
+                    background: transparent;
+                    cursor: pointer;
+                    color: #6b7280;
+                    transition: all 0.2s ease;
+                }
+                
+                :host-context(.dark) .save-btn {
+                    color: #9ca3af;
+                }
+                
+                .save-btn:hover {
+                    background: #f3f4f6;
+                    color: #0ea5e9;
+                }
+                
+                :host-context(.dark) .save-btn:hover {
+                    background: #374151;
+                    color: #38bdf8;
+                }
+                
+                .overlay {
+                    position: absolute;
+                    inset: 0;
+                    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
+                    opacity: 0;
+                    transition: opacity 0.3s ease;
+                }
+                
+                .card:hover .overlay {
+                    opacity: 1;
+                }
+            </style>
+            
+            <article class="card" onclick="window.open('${url && !url.startsWith('#') ? url : permalink}', '_blank')">
+                ${hasImage ? `
+                <div class="image-container">
+                    <img src="${thumbnail}" alt="" loading="lazy">
+                    <div class="overlay"></div>
+                    <span class="tag ${tagColors[category] || tagColors.general}">${category}</span>
+                    ${priority === 'high' ? '<span class="priority-indicator"></span>' : ''}
+                </div>
+                ` : `
+                <div class="gradient-bg" style="--gradient-from: ${this.getGradientColors(category).from}; --gradient-to: ${this.getGradientColors(category).to}">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${this.getIconPath(category)}</svg>
+                    <span class="tag ${tagColors[category] || tagColors.general}" style="position: absolute; top: 0.75rem; left: 0.75rem;">${category}</span>
+                </div>
+                `}
+                
+                <div class="content">
+                    <div class="meta">
+                        <img src="https://static.photos/minimal/32x32/${author.charCodeAt(0) || 65}" alt="">
+                        <span>${author}</span>
+                        <span>•</span>
+                        <span>${timeAgo}</span>
+                    </div>
+                    
+                    <h3 class="title">${this.escapeHtml(title)}</h3>
+                    
+                    <div class="footer">
+                        <div class="stats">
+                            <span class="stat">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+                                ${this.formatNumber(parseInt(score))}
+                            </span>
+                            <span class="stat">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                                ${comments}
+                            </span>
+                        </div>
+                        <button class="save-btn" onclick="event.stopPropagation(); window.saveArticle && window.saveArticle('${this.getAttribute('id') || ''}')">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
+                        </button>
+                    </div>
+                </div>
+            </article>
+        `;
+    }
+
+    getGradientColors(category) {
+        const colors = {
+            ai: { from: '#0ea5e9', to: '#8b5cf6' },
+            science: { from: '#10b981', to: '#14b8a6' },
+            tech: { from: '#f59e0b', to: '#f97316' },
+            nhl: { from: '#f47920', to: '#041e42' },
+            general: { from: '#6b7280', to: '#4b5563' }
+        };
+        return colors[category] || colors.general;
+    }
+
+    getIconPath(category) {
+        const icons = {
+            ai: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>',
+            science: '<circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>',
+            tech: '<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line>',
+            nhl: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>',
+            general: '<circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>'
+        };
+        return icons[category] || icons.general;
+    }
+
+    getTimeAgo(date) {
+        const seconds = Math.floor((new Date() - date) / 1000);
+        const intervals = {
+            year: 31536000,
+            month: 2592000,
+            week: 604800,
+            day: 86400,
+            hour: 3600,
+            minute: 60
+        };
+        for (const [unit, secondsInUnit] of Object.entries(intervals)) {
+            const interval = Math.floor(seconds / secondsInUnit);
+            if (interval >= 1) {
+                return `${interval} ${unit}${interval > 1 ? 's' : ''} ago`;
+            }
+        }
+        return 'just now';
+    }
+
+    formatNumber(num) {
+        if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+        if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+        return num.toString();
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+customElements.define('news-card', NewsCard);

components/sidebar.js

@@ -0,0 +1,289 @@
+class SideBar extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEvents();
+    }
+
+    render() {
+        const dark = document.documentElement.classList.contains('dark');
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                * {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+                
+                :host {
+                    display: block;
+                }
+                
+                .sidebar {
+                    position: fixed;
+                    top: 64px;
+                    left: 0;
+                    bottom: 0;
+                    width: 256px;
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(12px);
+                    border-right: 1px solid rgba(229, 231, 235, 0.5);
+                    padding: 1.5rem 1rem;
+                    overflow-y: auto;
+                    z-index: 40;
+                    transform: translateX(-100%);
+                    transition: transform 0.3s ease;
+                }
+                
+                .sidebar.open {
+                    transform: translateX(0);
+                }
+                
+                @media (min-width: 1024px) {
+                    .sidebar {
+                        transform: translateX(0);
+                    }
+                }
+                
+                :host-context(.dark) .sidebar,
+                .sidebar.dark {
+                    background: rgba(15, 23, 42, 0.95);
+                    border-right-color: rgba(75, 85, 99, 0.5);
+                }
+                
+                .section {
+                    margin-bottom: 1.5rem;
+                }
+                
+                .section-title {
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    color: #9ca3af;
+                    margin-bottom: 0.75rem;
+                    padding-left: 0.75rem;
+                }
+                
+                :host-context(.dark) .section-title,
+                .sidebar.dark .section-title {
+                    color: #6b7280;
+                }
+                
+                .nav-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.625rem 0.75rem;
+                    border-radius: 0.75rem;
+                    text-decoration: none;
+                    color: #374151;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    transition: all 0.2s ease;
+                    margin-bottom: 0.25rem;
+                }
+                
+                :host-context(.dark) .nav-item,
+                .sidebar.dark .nav-item {
+                    color: #d1d5db;
+                }
+                
+                .nav-item:hover {
+                    background: #f3f4f6;
+                    color: #0ea5e9;
+                }
+                
+                :host-context(.dark) .nav-item:hover,
+                .sidebar.dark .nav-item:hover {
+                    background: #374151;
+                    color: #38bdf8;
+                }
+                
+                .nav-item.active {
+                    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
+                    color: white;
+                }
+                
+                .nav-icon {
+                    width: 20px;
+                    height: 20px;
+                    flex-shrink: 0;
+                }
+                
+                .stats-card {
+                    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
+                    border-radius: 1rem;
+                    padding: 1rem;
+                    color: white;
+                    margin-top: 1rem;
+                }
+                
+                .stats-header {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    opacity: 0.9;
+                    margin-bottom: 0.75rem;
+                }
+                
+                .stat-row {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0.5rem 0;
+                    border-bottom: 1px solid rgba(255,255,255,0.2);
+                }
+                
+                .stat-row:last-child {
+                    border-bottom: none;
+                }
+                
+                .stat-label {
+                    font-size: 0.875rem;
+                    opacity: 0.9;
+                }
+                
+                .stat-value {
+                    font-size: 1.125rem;
+                    font-weight: 700;
+                }
+                
+                .live-indicator {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    margin-top: 1rem;
+                    padding: 0.75rem;
+                    background: rgba(16, 185, 129, 0.1);
+                    border-radius: 0.75rem;
+                }
+                
+                .live-dot {
+                    width: 8px;
+                    height: 8px;
+                    background: #10b981;
+                    border-radius: 50%;
+                    animation: pulse 2s ease-in-out infinite;
+                }
+                
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; transform: scale(1); }
+                    50% { opacity: 0.5; transform: scale(1.2); }
+                }
+                
+                .live-text {
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    color: #10b981;
+                }
+            </style>
+            
+            <aside class="sidebar ${dark ? 'dark' : ''}" id="sidebar">
+                <div class="section">
+                    <div class="section-title">Discover</div>
+                    <a href="#ai-section" class="nav-item active" data-section="ai">
+                        <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path></svg>
+                        Artificial Intelligence
+                    </a>
+                    <a href="#science-section" class="nav-item" data-section="science">
+                        <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+                        Science & Space
+                    </a>
+                    <a href="#tech-section" class="nav-item" data-section="tech">
+                        <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
+                        Technology
+                    </a>
+                    <a href="#nhl-section" class="nav-item" data-section="nhl" style="color: #f47920;">
+                        <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+                        NHL & McDavid
+                    </a>
+                </div>
+                
+                <div class="section">
+                    <div class="section-title">Quick Stats</div>
+                    <div class="stats-card">
+                        <div class="stats-header">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                            Live Updates
+                        </div>
+                        <div class="stat-row">
+                            <span class="stat-label">AI Articles</span>
+                            <span class="stat-value" id="sidebar-ai-count">0</span>
+                        </div>
+                        <div class="stat-row">
+                            <span class="stat-label">McDavid PTS</span>
+                            <span class="stat-value" id="sidebar-mcdavid-pts">--</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="live-indicator">
+                    <span class="live-dot"></span>
+                    <span class="live-text">Live Data Feed</span>
+                </div>
+            </aside>
+        `;
+    }
+
+    setupEvents() {
+        const sidebar = this.shadowRoot.getElementById('sidebar');
+        const navItems = this.shadowRoot.querySelectorAll('.nav-item');
+        
+        // Toggle sidebar on mobile
+        window.addEventListener('toggleSidebar', () => {
+            sidebar.classList.toggle('open');
+        });
+        
+        // Update active state on scroll
+        const sections = ['ai-section', 'science-section', 'tech-section', 'nhl-section'];
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const section = entry.target.id.replace('-section', '');
+                    navItems.forEach(item => {
+                        item.classList.toggle('active', item.dataset.section === section);
+                    });
+                }
+            });
+        }, { threshold: 0.3 });
+        
+        sections.forEach(id => {
+            const el = document.getElementById(id);
+            if (el) observer.observe(el);
+        });
+        
+        // Close sidebar on mobile when clicking a link
+        navItems.forEach(item => {
+            item.addEventListener('click', () => {
+                if (window.innerWidth < 1024) {
+                    sidebar.classList.remove('open');
+                }
+            });
+        });
+        
+        // Listen for theme changes
+        window.addEventListener('themechange', () => {
+            const dark = document.documentElement.classList.contains('dark');
+            sidebar.classList.toggle('dark', dark);
+        });
+        
+        // Listen for stats updates
+        window.addEventListener('statsupdate', (e) => {
+            const aiCount = this.shadowRoot.getElementById('sidebar-ai-count');
+            const mcdavidPts = this.shadowRoot.getElementById('sidebar-mcdavid-pts');
+            if (aiCount && e.detail.aiCount !== undefined) aiCount.textContent = e.detail.aiCount;
+            if (mcdavidPts && e.detail.mcdavidPoints !== undefined) mcdavidPts.textContent = e.detail.mcdavidPoints;
+        });
+    }
+}
+
+customElements.define('side-bar', SideBar);

components/topic-filter.js

@@ -0,0 +1,135 @@
+class TopicFilter extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEvents();
+    }
+
+    render() {
+        const dark = document.documentElement.classList.contains('dark');
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                * {
+                    margin: 0;
+                    padding: 0;
+                    box-sizing: border-box;
+                }
+                
+                :host {
+                    display: block;
+                }
+                
+                .filter-container {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    overflow-x: auto;
+                    padding: 0.25rem;
+                    scrollbar-width: none;
+                    -ms-overflow-style: none;
+                }
+                
+                .filter-container::-webkit-scrollbar {
+                    display: none;
+                }
+                
+                .filter-btn {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    border-radius: 9999px;
+                    border: 1px solid #e5e7eb;
+                    background: white;
+                    color: #374151;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    white-space: nowrap;
+                    flex-shrink: 0;
+                }
+                
+                :host-context(.dark) .filter-btn {
+                    background: #1f2937;
+                    border-color: #374151;
+                    color: #d1d5db;
+                }
+                
+                .filter-btn:hover {
+                    border-color: #0ea5e9;
+                    color: #0ea5e9;
+                }
+                
+                .filter-btn.active {
+                    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
+                    border-color: transparent;
+                    color: white;
+                    transform: scale(1.05);
+                }
+                
+                .filter-btn svg {
+                    width: 16px;
+                    height: 16px;
+                }
+                
+                .filter-label {
+                    font-size: 0.875rem;
+                    font-weight: 600;
+                    color: #6b7280;
+                    margin-right: 0.5rem;
+                    flex-shrink: 0;
+                }
+                
+                :host-context(.dark) .filter-label {
+                    color: #9ca3af;
+                }
+            </style>
+            
+            <div class="filter-container">
+                <span class="filter-label">Filter:</span>
+                <button class="filter-btn active" data-filter="all">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
+                    All Topics
+                </button>
+                <button class="filter-btn" data-filter="ai">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path></svg>
+                    AI
+                </button>
+                <button class="filter-btn" data-filter="science">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+                    Science
+                </button>
+                <button class="filter-btn" data-filter="tech">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
+                    Tech
+                </button>
+                <button class="filter-btn" data-filter="nhl" style="color: #f47920;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+                    NHL
+                </button>
+            </div>
+        `;
+    }
+
+    setupEvents() {
+        const buttons = this.shadowRoot.querySelectorAll('.filter-btn');
+        
+        buttons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                buttons.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                const filter = btn.dataset.filter;
+                window.dispatchEvent(new CustomEvent('filterchange', { detail: { filter } }));
+            });
+        });
+    }
+}
+
+customElements.define('topic-filter', TopicFilter);

script.js

@@ -533,7 +533,6 @@ function showToast(message) {
     document.body.appendChild(toast);
     setTimeout(() => toast.remove(), 3000);
 }
-
 function updateLastUpdated() {
     const el = document.getElementById('last-updated');
     if (el && state.lastUpdated) {
@@ -545,8 +544,15 @@ function updateLastUpdated() {
     if (aiCount) {
         aiCount.textContent = state.aiArticles.length;
     }
+    
+    // Dispatch stats update event for sidebar
+    window.dispatchEvent(new CustomEvent('statsupdate', { 
+        detail: { 
+            aiCount: state.aiArticles.length,
+            mcdavidPoints: state.mcdavidStats?.points || '--'
+        } 
+    }));
 }
-
 // Fallback Data
 function loadFallbackData() {
     const fallbackAI = [