From cd5d27c4c322cf0b54e5b0aa77d5f4d9b794bd6f Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Mon, 4 Aug 2025 15:14:28 +0000
Subject: [PATCH] feat: add new UI components for user profile and settings
 panels

---
 static/index.html | 1981 +++++++++++++++++++++++++++++----------------
 1 file changed, 1261 insertions(+), 720 deletions(-)
diff --git a/static/index.html b/static/index.html
index 1c156de..73e71b3 100644
--- a/static/index.html
+++ b/static/index.html
@@ -552,228 +552,584 @@
     </style>
 </head>
 <body>
-    <!-- Navigation -->
-    <nav>
-        <div class="nav-container">
-            <a href="#" class="logo" onclick="showFeed()">Rant</a>
-            <div class="nav-links">
-                <a href="#" onclick="showFeed()">Feed</a>
-                <a href="#" onclick="showSearch()">Search</a>
-                <span id="navProfile" style="display: none;">
-                    <a href="#" onclick="showMyProfile()">Profile</a>
-                    <a href="#" onclick="showNotifications()">Notifications <span id="notifCount"></span></a>
-                </span>
-                <span id="navAuth">
-                    <button class="btn btn-secondary" onclick="showLogin()">Login</button>
-                    <button class="btn" onclick="showRegister()">Sign Up</button>
-                </span>
-                <span id="navUser" style="display: none;">
-                    <button class="btn btn-secondary" onclick="logout()">Logout</button>
-                </span>
-            </div>
-        </div>
-    </nav>
+    <!-- Navigation Component -->
+    <rant-navigation></rant-navigation>
 
-    <!-- Main Content -->
-    <div id="content" class="container">
-        <!-- Feed will be loaded here -->
-    </div>
+    <!-- Main Content Container -->
+    <div id="content" class="container"></div>
 
     <!-- Floating Action Button -->
-    <button class="fab" id="createRantBtn" style="display: none;" onclick="showCreateRant()">+</button>
+    <rant-fab></rant-fab>
 
-    <!-- Modals -->
-    <div id="modal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2 id="modalTitle">Modal Title</h2>
-                <button class="close-btn" onclick="closeModal()">&times;</button>
-            </div>
-            <div id="modalBody">
-                <!-- Modal content will be loaded here -->
-            </div>
-        </div>
-    </div>
+    <!-- Modal Component -->
+    <rant-modal></rant-modal>
 
     <script>
-        // Global state
-        let authToken = null;
-        let currentUser = null;
-        let currentSort = 'recent';
-        let currentView = 'feed';
+        // Global Event Bus for Component Communication
+        class EventBus {
+            constructor() {
+                this.events = {};
+            }
 
-        // API Configuration
-        const API_URL = '/api';
-        const APP_ID = 3;
+            on(event, callback) {
+                if (!this.events[event]) {
+                    this.events[event] = [];
+                }
+                this.events[event].push(callback);
+            }
 
-        // Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            checkAuth();
-            showFeed();
-        });
+            off(event, callback) {
+                if (this.events[event]) {
+                    this.events[event] = this.events[event].filter(cb => cb !== callback);
+                }
+            }
 
-        // Auth functions
-        function checkAuth() {
-            const token = localStorage.getItem('authToken');
-            if (token) {
-                authToken = JSON.parse(token);
-                currentUser = {
-                    id: authToken.user_id,
-                    token_id: authToken.id,
-                    token_key: authToken.key
-                };
-                updateNavigation(true);
-                checkNotifications();
-            } else {
-                updateNavigation(false);
+            emit(event, data) {
+                if (this.events[event]) {
+                    this.events[event].forEach(callback => callback(data));
+                }
             }
         }
 
-        function updateNavigation(isLoggedIn) {
-            document.getElementById('navAuth').style.display = isLoggedIn ? 'none' : 'inline';
-            document.getElementById('navUser').style.display = isLoggedIn ? 'inline' : 'none';
-            document.getElementById('navProfile').style.display = isLoggedIn ? 'inline' : 'none';
-            document.getElementById('createRantBtn').style.display = isLoggedIn ? 'flex' : 'none';
+        const eventBus = new EventBus();
+
+        // Auth Manager Singleton
+        class AuthManager {
+            constructor() {
+                this.authToken = null;
+                this.currentUser = null;
+                this.API_URL = '/api';
+                this.APP_ID = 3;
+                this.checkAuth();
+            }
+
+            checkAuth() {
+                const token = localStorage.getItem('authToken');
+                if (token) {
+                    this.authToken = JSON.parse(token);
+                    this.currentUser = {
+                        id: this.authToken.user_id,
+                        token_id: this.authToken.id,
+                        token_key: this.authToken.key
+                    };
+                    eventBus.emit('auth-changed', { isLoggedIn: true, user: this.currentUser });
+                } else {
+                    eventBus.emit('auth-changed', { isLoggedIn: false });
+                }
+            }
+
+            async apiCall(endpoint, options = {}) {
+                let url = `${this.API_URL}${endpoint}`;
+                
+                // Add auth to FormData or URLSearchParams if logged in
+                if (this.currentUser && options.body) {
+                    if (options.body instanceof FormData) {
+                        options.body.append('app', this.APP_ID);
+                        options.body.append('token_id', this.currentUser.token_id);
+                        options.body.append('token_key', this.currentUser.token_key);
+                        options.body.append('user_id', this.currentUser.id);
+                    } else if (options.body instanceof URLSearchParams) {
+                        options.body.append('app', this.APP_ID);
+                        options.body.append('token_id', this.currentUser.token_id);
+                        options.body.append('token_key', this.currentUser.token_key);
+                        options.body.append('user_id', this.currentUser.id);
+                    }
+                }
+
+                // Add auth to query params for GET requests
+                if (this.currentUser && (options.method === 'GET' || !options.method)) {
+                    const separator = endpoint.includes('?') ? '&' : '?';
+                    url += `${separator}app=${this.APP_ID}&token_id=${this.currentUser.token_id}&token_key=${this.currentUser.token_key}&user_id=${this.currentUser.id}`;
+                }
+
+                try {
+                    const response = await fetch(url, options);
+                    const data = await response.json();
+                    return data;
+                } catch (error) {
+                    console.error('API Error:', error);
+                    return { success: false, error: error.message };
+                }
+            }
+
+            async login(username, password) {
+                const formData = new FormData();
+                formData.append('username', username);
+                formData.append('password', password);
+                formData.append('app', this.APP_ID);
+                
+                const data = await this.apiCall('/users/auth-token', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (data.success) {
+                    this.authToken = data.auth_token;
+                    this.currentUser = {
+                        id: this.authToken.user_id,
+                        token_id: this.authToken.id,
+                        token_key: this.authToken.key
+                    };
+                    localStorage.setItem('authToken', JSON.stringify(this.authToken));
+                    eventBus.emit('auth-changed', { isLoggedIn: true, user: this.currentUser });
+                }
+                
+                return data;
+            }
+
+            logout() {
+                localStorage.removeItem('authToken');
+                this.authToken = null;
+                this.currentUser = null;
+                eventBus.emit('auth-changed', { isLoggedIn: false });
+            }
+
+            isLoggedIn() {
+                return !!this.currentUser;
+            }
         }
 
+        const authManager = new AuthManager();
 
-async function apiCall(endpoint, options = {}) {
-    let url = `${API_URL}${endpoint}`;
-    
-    // Add auth to FormData or URLSearchParams if logged in
-    if (currentUser && options.body) {
-        if (options.body instanceof FormData) {
-            options.body.append('app', APP_ID);
-            options.body.append('token_id', currentUser.token_id);
-            options.body.append('token_key', currentUser.token_key);
-            options.body.append('user_id', currentUser.id);
-        } else if (options.body instanceof URLSearchParams) {
-            options.body.append('app', APP_ID);
-            options.body.append('token_id', currentUser.token_id);
-            options.body.append('token_key', currentUser.token_key);
-            options.body.append('user_id', currentUser.id);
+        // Helper functions
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
         }
-    }
 
-    // Add auth to query params for GET requests
-    if (currentUser && (options.method === 'GET' || !options.method)) {
-        const separator = endpoint.includes('?') ? '&' : '?';
-        url += `${separator}app=${APP_ID}&token_id=${currentUser.token_id}&token_key=${currentUser.token_key}&user_id=${currentUser.id}`;
-    }
-
-    try {
-        const response = await fetch(url, options);
-        const data = await response.json();
-        return data;
-    } catch (error) {
-        console.error('API Error:', error);
-        return { success: false, error: error.message };
-    }
-}
-
-
-        // View functions
-        async function showFeed(sort = 'recent') {
-            currentView = 'feed';
-            currentSort = sort;
+        function formatTime(timestamp) {
+            const date = new Date(timestamp * 1000);
+            const now = new Date();
+            const diff = Math.floor((now - date) / 1000);
             
-            const content = document.getElementById('content');
-            content.innerHTML = `
-                <div class="sort-options">
-                    <button class="sort-btn ${sort === 'recent' ? 'active' : ''}" onclick="showFeed('recent')">Recent</button>
-                    <button class="sort-btn ${sort === 'top' ? 'active' : ''}" onclick="showFeed('top')">Top</button>
-                    <button class="sort-btn ${sort === 'algo' ? 'active' : ''}" onclick="showFeed('algo')">Algorithm</button>
-                </div>
-                <div class="loading">
-                    <div class="spinner"></div>
-                    <p>Loading rants...</p>
-                </div>
-            `;
+            if (diff < 60) return 'just now';
+            if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+            if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+            if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+            
+            return date.toLocaleDateString();
+        }
 
-            const params = new URLSearchParams({ sort, limit: 50, skip: 0, app: APP_ID });
-            const data = await apiCall(`/rant/rants?${params}`);
+        // Navigation Component
+        class RantNavigation extends HTMLElement {
+            constructor() {
+                super();
+                this.notificationCount = 0;
+                this.checkNotificationInterval = null;
+            }
 
-            if (data.success) {
-                content.innerHTML = `
-                    <div class="sort-options">
-                        <button class="sort-btn ${sort === 'recent' ? 'active' : ''}" onclick="showFeed('recent')">Recent</button>
-                        <button class="sort-btn ${sort === 'top' ? 'active' : ''}" onclick="showFeed('top')">Top</button>
-                        <button class="sort-btn ${sort === 'algo' ? 'active' : ''}" onclick="showFeed('algo')">Algorithm</button>
+            connectedCallback() {
+                this.render();
+                eventBus.on('auth-changed', (data) => this.handleAuthChange(data));
+                eventBus.on('navigate', (view) => this.handleNavigate(view));
+                
+                if (authManager.isLoggedIn()) {
+                    this.startNotificationCheck();
+                }
+            }
+
+            disconnectedCallback() {
+                eventBus.off('auth-changed', this.handleAuthChange);
+                eventBus.off('navigate', this.handleNavigate);
+                this.stopNotificationCheck();
+            }
+
+            handleAuthChange(data) {
+                this.render();
+                if (data.isLoggedIn) {
+                    this.startNotificationCheck();
+                } else {
+                    this.stopNotificationCheck();
+                }
+            }
+
+            handleNavigate(view) {
+                // Handle navigation updates if needed
+            }
+
+            startNotificationCheck() {
+                this.checkNotifications();
+                this.checkNotificationInterval = setInterval(() => {
+                    this.checkNotifications();
+                }, 60000);
+            }
+
+            stopNotificationCheck() {
+                if (this.checkNotificationInterval) {
+                    clearInterval(this.checkNotificationInterval);
+                    this.checkNotificationInterval = null;
+                }
+            }
+
+            async checkNotifications() {
+                if (!authManager.isLoggedIn()) return;
+                
+                const params = new URLSearchParams({ 
+                    ext_prof: 1, 
+                    last_time: Math.floor(Date.now() / 1000) - 86400
+                });
+                
+                const data = await authManager.apiCall(`/users/me/notif-feed?${params}`);
+                
+                if (data.success) {
+                    this.notificationCount = data.data.num_unread;
+                    this.updateNotificationCount();
+                }
+            }
+
+            updateNotificationCount() {
+                const notifCount = this.querySelector('#notifCount');
+                if (notifCount) {
+                    if (this.notificationCount > 0) {
+                        notifCount.textContent = `(${this.notificationCount})`;
+                        notifCount.style.color = 'var(--error)';
+                    } else {
+                        notifCount.textContent = '';
+                    }
+                }
+            }
+
+            render() {
+                const isLoggedIn = authManager.isLoggedIn();
+                
+                this.innerHTML = `
+                    <nav>
+                        <div class="nav-container">
+                            <a href="#" class="logo">Rant</a>
+                            <div class="nav-links">
+                                <a href="#" data-view="feed">Feed</a>
+                                <a href="#" data-view="search">Search</a>
+                                ${isLoggedIn ? `
+                                    <span>
+                                        <a href="#" data-view="profile">Profile</a>
+                                        <a href="#" data-view="notifications">Notifications <span id="notifCount"></span></a>
+                                    </span>
+                                    <span>
+                                        <button class="btn btn-secondary" id="logoutBtn">Logout</button>
+                                    </span>
+                                ` : `
+                                    <span>
+                                        <button class="btn btn-secondary" data-modal="login">Login</button>
+                                        <button class="btn" data-modal="register">Sign Up</button>
+                                    </span>
+                                `}
+                            </div>
+                        </div>
+                    </nav>
+                `;
+
+                // Add event listeners
+                this.querySelectorAll('[data-view]').forEach(link => {
+                    link.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        const view = e.target.dataset.view;
+                        eventBus.emit('navigate', view);
+                    });
+                });
+
+                this.querySelectorAll('[data-modal]').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const modalType = e.target.dataset.modal;
+                        eventBus.emit('show-modal', modalType);
+                    });
+                });
+
+                const logoutBtn = this.querySelector('#logoutBtn');
+                if (logoutBtn) {
+                    logoutBtn.addEventListener('click', () => {
+                        authManager.logout();
+                        eventBus.emit('navigate', 'feed');
+                    });
+                }
+
+                const logo = this.querySelector('.logo');
+                logo.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    eventBus.emit('navigate', 'feed');
+                });
+
+                this.updateNotificationCount();
+            }
+        }
+
+        // Rant Card Component
+        class RantCard extends HTMLElement {
+            static get observedAttributes() {
+                return ['rant-data', 'clickable'];
+            }
+
+            constructor() {
+                super();
+                this.rantData = null;
+            }
+
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (name === 'rant-data' && newValue) {
+                    this.rantData = JSON.parse(newValue);
+                    this.render();
+                }
+            }
+
+            connectedCallback() {
+                if (this.rantData) {
+                    this.render();
+                }
+            }
+
+            render() {
+                if (!this.rantData) return;
+
+                const rant = this.rantData;
+                const tags = rant.tags.map(tag => `<span class="tag">${tag}</span>`).join('');
+                const voteClass = rant.vote_state === 1 ? 'voted' : rant.vote_state === -1 ? 'downvoted' : '';
+                const clickable = this.getAttribute('clickable') !== 'false';
+                
+                this.innerHTML = `
+                    <div class="rant-card" ${clickable ? `style="cursor: pointer;"` : ''}>
+                        <div class="rant-header">
+                            <div class="avatar" style="background: #${rant.user_avatar.b}">
+                                ${rant.user_username[0].toUpperCase()}
+                            </div>
+                            <div class="user-info">
+                                <div class="username" data-user-id="${rant.user_id}">${rant.user_username}</div>
+                                <div class="score">${rant.user_score} points</div>
+                            </div>
+                        </div>
+                        <div class="rant-content">${escapeHtml(rant.text)}</div>
+                        ${rant.attached_image ? `<img src="${rant.attached_image}" alt="Rant image" class="rant-image">` : ''}
+                        ${tags ? `<div class="tags">${tags}</div>` : ''}
+                        <div class="rant-footer">
+                            <div class="rant-actions">
+                                <button class="action-btn ${voteClass}" data-action="vote" data-vote="${rant.vote_state === 1 ? 0 : 1}">
+                                    ++ ${rant.score}
+                                </button>
+                                <button class="action-btn" data-action="comments">
+                                    💬 ${rant.num_comments}
+                                </button>
+                            </div>
+                            <div>${formatTime(rant.created_time)}</div>
+                        </div>
                     </div>
                 `;
+
+                // Add event listeners
+                const card = this.querySelector('.rant-card');
+                if (clickable) {
+                    card.addEventListener('click', (e) => {
+                        if (!e.target.closest('button') && !e.target.closest('.username')) {
+                            eventBus.emit('navigate', { view: 'rant', id: rant.id });
+                        }
+                    });
+                }
+
+                this.querySelector('.username').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    eventBus.emit('navigate', { view: 'profile', id: rant.user_id });
+                });
+
+                this.querySelectorAll('[data-action]').forEach(btn => {
+                    btn.addEventListener('click', async (e) => {
+                        e.stopPropagation();
+                        const action = btn.dataset.action;
+                        
+                        if (action === 'vote') {
+                            if (!authManager.isLoggedIn()) {
+                                eventBus.emit('show-modal', 'login');
+                                return;
+                            }
+                            
+                            const vote = parseInt(btn.dataset.vote);
+                            await this.voteRant(rant.id, vote);
+                        } else if (action === 'comments') {
+                            eventBus.emit('navigate', { view: 'rant', id: rant.id });
+                        }
+                    });
+                });
+            }
+
+            async voteRant(rantId, vote) {
+                const formData = new FormData();
+                formData.append('vote', vote);
+                if (vote === -1) {
+                    formData.append('reason', 0);
+                }
                 
-                data.rants.forEach(rant => {
-                    content.innerHTML += createRantCard(rant);
+                const data = await authManager.apiCall(`/rant/rants/${rantId}/vote`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (data.success) {
+                    eventBus.emit('refresh-view');
+                }
+            }
+        }
+
+        // Loading Spinner Component
+        class LoadingSpinner extends HTMLElement {
+            connectedCallback() {
+                this.innerHTML = `
+                    <div class="loading">
+                        <div class="spinner"></div>
+                        <p>${this.getAttribute('message') || 'Loading...'}</p>
+                    </div>
+                `;
+            }
+        }
+
+        // Sort Options Component
+        class SortOptions extends HTMLElement {
+            static get observedAttributes() {
+                return ['active-sort'];
+            }
+
+            constructor() {
+                super();
+                this.activeSort = 'recent';
+            }
+
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (name === 'active-sort') {
+                    this.activeSort = newValue;
+                    this.render();
+                }
+            }
+
+            connectedCallback() {
+                this.render();
+            }
+
+            render() {
+                this.innerHTML = `
+                    <div class="sort-options">
+                        <button class="sort-btn ${this.activeSort === 'recent' ? 'active' : ''}" data-sort="recent">Recent</button>
+                        <button class="sort-btn ${this.activeSort === 'top' ? 'active' : ''}" data-sort="top">Top</button>
+                        <button class="sort-btn ${this.activeSort === 'algo' ? 'active' : ''}" data-sort="algo">Algorithm</button>
+                    </div>
+                `;
+
+                this.querySelectorAll('[data-sort]').forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        const sort = btn.dataset.sort;
+                        eventBus.emit('sort-changed', sort);
+                    });
                 });
             }
         }
 
-        function createRantCard(rant) {
-            const tags = rant.tags.map(tag => `<span class="tag">${tag}</span>`).join('');
-            const voteClass = rant.vote_state === 1 ? 'voted' : rant.vote_state === -1 ? 'downvoted' : '';
-            
-            return `
-                <div class="rant-card" onclick="showRant(${rant.id})">
-                    <div class="rant-header">
-                        <div class="avatar" style="background: #${rant.user_avatar.b}">
-                            ${rant.user_username[0].toUpperCase()}
-                        </div>
-                        <div class="user-info">
-                            <div class="username">${rant.user_username}</div>
-                            <div class="score">${rant.user_score} points</div>
-                        </div>
-                    </div>
-                    <div class="rant-content">${escapeHtml(rant.text)}</div>
-                    ${rant.attached_image ? `<img src="${rant.attached_image}" alt="Rant image" class="rant-image">` : ''}
-                    ${tags ? `<div class="tags">${tags}</div>` : ''}
-                    <div class="rant-footer">
-                        <div class="rant-actions">
-                            <button class="action-btn ${voteClass}" onclick="event.stopPropagation(); voteRant(${rant.id}, ${rant.vote_state === 1 ? 0 : 1})">
-                                ++ ${rant.score}
-                            </button>
-                            <button class="action-btn" onclick="event.stopPropagation(); showRant(${rant.id})">
-                                💬 ${rant.num_comments}
-                            </button>
-                        </div>
-                        <div>${formatTime(rant.created_time)}</div>
-                    </div>
-                </div>
-            `;
+        // Feed View Component
+        class FeedView extends HTMLElement {
+            constructor() {
+                super();
+                this.currentSort = 'recent';
+            }
+
+            async connectedCallback() {
+                this.innerHTML = `
+                    <sort-options active-sort="${this.currentSort}"></sort-options>
+                    <loading-spinner message="Loading rants..."></loading-spinner>
+                `;
+
+                eventBus.on('sort-changed', (sort) => this.handleSortChange(sort));
+                eventBus.on('refresh-view', () => this.loadFeed());
+
+                await this.loadFeed();
+            }
+
+            disconnectedCallback() {
+                eventBus.off('sort-changed', this.handleSortChange);
+                eventBus.off('refresh-view', this.loadFeed);
+            }
+
+            handleSortChange(sort) {
+                this.currentSort = sort;
+                this.loadFeed();
+            }
+
+            async loadFeed() {
+                const params = new URLSearchParams({ 
+                    sort: this.currentSort, 
+                    limit: 50, 
+                    skip: 0, 
+                    app: authManager.APP_ID 
+                });
+                
+                const data = await authManager.apiCall(`/rant/rants?${params}`);
+
+                if (data.success) {
+                    this.innerHTML = `
+                        <sort-options active-sort="${this.currentSort}"></sort-options>
+                    `;
+                    
+                    const container = document.createElement('div');
+                    data.rants.forEach(rant => {
+                        const rantCard = document.createElement('rant-card');
+                        rantCard.setAttribute('rant-data', JSON.stringify(rant));
+                        container.appendChild(rantCard);
+                    });
+                    
+                    this.appendChild(container);
+
+                    // Re-add event listener after re-render
+                    eventBus.on('sort-changed', (sort) => this.handleSortChange(sort));
+                }
+            }
         }
 
-        async function showRant(rantId) {
-            currentView = 'rant';
-            
-            const content = document.getElementById('content');
-            content.innerHTML = `
-                <div class="loading">
-                    <div class="spinner"></div>
-                    <p>Loading rant...</p>
-                </div>
-            `;
+        // Rant Detail View Component
+        class RantDetailView extends HTMLElement {
+            static get observedAttributes() {
+                return ['rant-id'];
+            }
 
-            const params = new URLSearchParams({ app: APP_ID });
-            const data = await apiCall(`/rant/rants/${rantId}?${params}`);
+            constructor() {
+                super();
+                this.rantId = null;
+                this.rantData = null;
+            }
 
-            if (data.success) {
-                const rant = data.rant;
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (name === 'rant-id') {
+                    this.rantId = newValue;
+                    this.loadRant();
+                }
+            }
+
+            async loadRant() {
+                if (!this.rantId) return;
+
+                this.innerHTML = `<loading-spinner message="Loading rant..."></loading-spinner>`;
+
+                const params = new URLSearchParams({ app: authManager.APP_ID });
+                const data = await authManager.apiCall(`/rant/rants/${this.rantId}?${params}`);
+
+                if (data.success) {
+                    this.rantData = data;
+                    this.render();
+                }
+            }
+
+            render() {
+                const { rant, comments, subscribed } = this.rantData;
                 const tags = rant.tags.map(tag => `<span class="tag">${tag}</span>`).join('');
                 const voteClass = rant.vote_state === 1 ? 'voted' : rant.vote_state === -1 ? 'downvoted' : '';
+                const isOwner = authManager.currentUser && authManager.currentUser.id === rant.user_id;
                 
-                content.innerHTML = `
-                    <button class="btn btn-secondary" onclick="showFeed()">← Back to Feed</button>
+                this.innerHTML = `
+                    <button class="btn btn-secondary" id="backBtn">← Back to Feed</button>
                     <div class="rant-card" style="margin-top: 1rem;">
                         <div class="rant-header">
                             <div class="avatar" style="background: #${rant.user_avatar.b}">
                                 ${rant.user_username[0].toUpperCase()}
                             </div>
                             <div class="user-info">
-                                <div class="username" onclick="showProfile(${rant.user_id})" style="cursor: pointer;">${rant.user_username}</div>
+                                <div class="username" data-user-id="${rant.user_id}" style="cursor: pointer;">${rant.user_username}</div>
                                 <div class="score">${rant.user_score} points</div>
                             </div>
-                            ${currentUser && currentUser.id === rant.user_id ? `
-                                <button class="btn btn-secondary" onclick="editRant(${rant.id})">Edit</button>
-                                <button class="btn btn-secondary" onclick="deleteRant(${rant.id})" style="margin-left: 0.5rem;">Delete</button>
+                            ${isOwner ? `
+                                <button class="btn btn-secondary" data-action="edit">Edit</button>
+                                <button class="btn btn-secondary" data-action="delete" style="margin-left: 0.5rem;">Delete</button>
                             ` : ''}
                         </div>
                         <div class="rant-content">${escapeHtml(rant.text)}</div>
@@ -781,91 +1137,299 @@ async function apiCall(endpoint, options = {}) {
                         ${tags ? `<div class="tags">${tags}</div>` : ''}
                         <div class="rant-footer">
                             <div class="rant-actions">
-                                <button class="action-btn ${voteClass}" onclick="voteRant(${rant.id}, ${rant.vote_state === 1 ? 0 : 1})">
+                                <button class="action-btn ${voteClass}" data-action="vote" data-vote="${rant.vote_state === 1 ? 0 : 1}">
                                     ++ ${rant.score}
                                 </button>
-                                <button class="action-btn ${rant.vote_state === -1 ? 'downvoted' : ''}" onclick="voteRant(${rant.id}, ${rant.vote_state === -1 ? 0 : -1})">
+                                <button class="action-btn ${rant.vote_state === -1 ? 'downvoted' : ''}" data-action="vote" data-vote="${rant.vote_state === -1 ? 0 : -1}">
                                     -- 
                                 </button>
-                                <button class="action-btn ${data.subscribed ? 'voted' : ''}" onclick="toggleFavorite(${rant.id}, ${data.subscribed})">
-                                    ${data.subscribed ? '★' : '☆'} Favorite
+                                <button class="action-btn ${subscribed ? 'voted' : ''}" data-action="favorite">
+                                    ${subscribed ? '★' : '☆'} Favorite
                                 </button>
                             </div>
                             <div>${formatTime(rant.created_time)}</div>
                         </div>
                     </div>
                     
-                    <div class="comments-section">
-                        <h3>Comments (${data.comments.length})</h3>
-                        <div id="commentsList">
-                            ${data.comments.map(comment => createCommentHTML(comment)).join('')}
-                        </div>
-                        ${currentUser ? `
-                            <div class="comment-form">
-                                <h4>Add a comment</h4>
-                                <form onsubmit="postComment(event, ${rant.id})">
-                                    <div class="form-group">
-                                        <textarea name="comment" placeholder="Write your comment..." required></textarea>
-                                    </div>
-                                    <button type="submit" class="btn">Post Comment</button>
-                                </form>
-                            </div>
-                        ` : '<p style="text-align: center; margin-top: 2rem;">Login to comment</p>'}
-                    </div>
+                    <comments-section rant-id="${this.rantId}" comments='${JSON.stringify(comments)}'></comments-section>
                 `;
+
+                // Add event listeners
+                this.querySelector('#backBtn').addEventListener('click', () => {
+                    eventBus.emit('navigate', 'feed');
+                });
+
+                this.querySelector('.username').addEventListener('click', () => {
+                    eventBus.emit('navigate', { view: 'profile', id: rant.user_id });
+                });
+
+                this.querySelectorAll('[data-action]').forEach(btn => {
+                    btn.addEventListener('click', async () => {
+                        const action = btn.dataset.action;
+                        
+                        if (action === 'vote') {
+                            if (!authManager.isLoggedIn()) {
+                                eventBus.emit('show-modal', 'login');
+                                return;
+                            }
+                            const vote = parseInt(btn.dataset.vote);
+                            await this.voteRant(vote);
+                        } else if (action === 'favorite') {
+                            if (!authManager.isLoggedIn()) {
+                                eventBus.emit('show-modal', 'login');
+                                return;
+                            }
+                            await this.toggleFavorite();
+                        } else if (action === 'edit') {
+                            eventBus.emit('show-modal', { type: 'edit-rant', rant });
+                        } else if (action === 'delete') {
+                            await this.deleteRant();
+                        }
+                    });
+                });
+            }
+
+            async voteRant(vote) {
+                const formData = new FormData();
+                formData.append('vote', vote);
+                if (vote === -1) {
+                    formData.append('reason', 0);
+                }
+                
+                const data = await authManager.apiCall(`/rant/rants/${this.rantId}/vote`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (data.success) {
+                    this.loadRant();
+                }
+            }
+
+            async toggleFavorite() {
+                const endpoint = this.rantData.subscribed ? 'unfavorite' : 'favorite';
+                const formData = new FormData();
+                
+                const data = await authManager.apiCall(`/rant/rants/${this.rantId}/${endpoint}`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (data.success) {
+                    this.loadRant();
+                }
+            }
+
+            async deleteRant() {
+                if (!confirm('Are you sure you want to delete this rant?')) return;
+                
+                const params = new URLSearchParams();
+                params.append('app', authManager.APP_ID);
+                params.append('token_id', authManager.currentUser.token_id);
+                params.append('token_key', authManager.currentUser.token_key);
+                params.append('user_id', authManager.currentUser.id);
+                
+                const data = await authManager.apiCall(`/rant/rants/${this.rantId}?${params}`, {
+                    method: 'DELETE'
+                });
+                
+                if (data.success) {
+                    eventBus.emit('navigate', 'feed');
+                }
             }
         }
 
-        function createCommentHTML(comment) {
-            const voteClass = comment.vote_state === 1 ? 'voted' : comment.vote_state === -1 ? 'downvoted' : '';
-            
-            return `
-                <div class="comment">
-                    <div class="rant-header">
-                        <div class="avatar" style="background: #${comment.user_avatar.b}">
-                            ${comment.user_username[0].toUpperCase()}
+        // Comments Section Component
+        class CommentsSection extends HTMLElement {
+            static get observedAttributes() {
+                return ['rant-id', 'comments'];
+            }
+
+            constructor() {
+                super();
+                this.rantId = null;
+                this.comments = [];
+            }
+
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (name === 'rant-id') {
+                    this.rantId = newValue;
+                } else if (name === 'comments') {
+                    this.comments = JSON.parse(newValue);
+                    this.render();
+                }
+            }
+
+            render() {
+                this.innerHTML = `
+                    <div class="comments-section">
+                        <h3>Comments (${this.comments.length})</h3>
+                        <div id="commentsList">
+                            ${this.comments.map(comment => this.createCommentHTML(comment)).join('')}
                         </div>
-                        <div class="user-info">
-                            <div class="username" onclick="showProfile(${comment.user_id})" style="cursor: pointer;">${comment.user_username}</div>
-                            <div class="score">${comment.user_score} points</div>
-                        </div>
-                        ${currentUser && currentUser.id === comment.user_id ? `
-                            <button class="btn btn-secondary" onclick="deleteComment(${comment.id}, ${comment.rant_id})">Delete</button>
-                        ` : ''}
+                        ${authManager.isLoggedIn() ? `
+                            <form class="comment-form" id="commentForm">
+                                <h4>Add a comment</h4>
+                                <div class="form-group">
+                                    <textarea name="comment" placeholder="Write your comment..." required></textarea>
+                                </div>
+                                <button type="submit" class="btn">Post Comment</button>
+                            </form>
+                        ` : '<p style="text-align: center; margin-top: 2rem;">Login to comment</p>'}
                     </div>
-                    <div class="rant-content">${escapeHtml(comment.body)}</div>
-                    <div class="rant-footer">
-                        <div class="rant-actions">
-                            <button class="action-btn ${voteClass}" onclick="voteComment(${comment.id}, ${comment.vote_state === 1 ? 0 : 1})">
-                                ++ ${comment.score}
-                            </button>
+                `;
+
+                // Add event listeners
+                const form = this.querySelector('#commentForm');
+                if (form) {
+                    form.addEventListener('submit', (e) => this.postComment(e));
+                }
+
+                this.querySelectorAll('[data-comment-action]').forEach(btn => {
+                    btn.addEventListener('click', async () => {
+                        const action = btn.dataset.commentAction;
+                        const commentId = btn.dataset.commentId;
+                        
+                        if (action === 'vote') {
+                            const vote = parseInt(btn.dataset.vote);
+                            await this.voteComment(commentId, vote);
+                        } else if (action === 'delete') {
+                            await this.deleteComment(commentId);
+                        }
+                    });
+                });
+
+                this.querySelectorAll('.username').forEach(username => {
+                    username.addEventListener('click', () => {
+                        const userId = username.dataset.userId;
+                        eventBus.emit('navigate', { view: 'profile', id: parseInt(userId) });
+                    });
+                });
+            }
+
+            createCommentHTML(comment) {
+                const voteClass = comment.vote_state === 1 ? 'voted' : comment.vote_state === -1 ? 'downvoted' : '';
+                const isOwner = authManager.currentUser && authManager.currentUser.id === comment.user_id;
+                
+                return `
+                    <div class="comment">
+                        <div class="rant-header">
+                            <div class="avatar" style="background: #${comment.user_avatar.b}">
+                                ${comment.user_username[0].toUpperCase()}
+                            </div>
+                            <div class="user-info">
+                                <div class="username" data-user-id="${comment.user_id}" style="cursor: pointer;">${comment.user_username}</div>
+                                <div class="score">${comment.user_score} points</div>
+                            </div>
+                            ${isOwner ? `
+                                <button class="btn btn-secondary" data-comment-action="delete" data-comment-id="${comment.id}">Delete</button>
+                            ` : ''}
+                        </div>
+                        <div class="rant-content">${escapeHtml(comment.body)}</div>
+                        <div class="rant-footer">
+                            <div class="rant-actions">
+                                <button class="action-btn ${voteClass}" data-comment-action="vote" data-comment-id="${comment.id}" data-vote="${comment.vote_state === 1 ? 0 : 1}">
+                                    ++ ${comment.score}
+                                </button>
+                            </div>
+                            <div>${formatTime(comment.created_time)}</div>
                         </div>
-                        <div>${formatTime(comment.created_time)}</div>
                     </div>
-                </div>
-            `;
+                `;
+            }
+
+            async postComment(event) {
+                event.preventDefault();
+                const formData = new FormData(event.target);
+                
+                const data = await authManager.apiCall(`/rant/rants/${this.rantId}/comments`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (data.success) {
+                    eventBus.emit('refresh-view');
+                }
+            }
+
+            async voteComment(commentId, vote) {
+                if (!authManager.isLoggedIn()) {
+                    eventBus.emit('show-modal', 'login');
+                    return;
+                }
+                
+                const formData = new FormData();
+                formData.append('vote', vote);
+                
+                const data = await authManager.apiCall(`/comments/${commentId}/vote`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (data.success) {
+                    eventBus.emit('refresh-view');
+                }
+            }
+
+            async deleteComment(commentId) {
+                if (!confirm('Are you sure you want to delete this comment?')) return;
+                
+                const params = new URLSearchParams();
+                params.append('app', authManager.APP_ID);
+                params.append('token_id', authManager.currentUser.token_id);
+                params.append('token_key', authManager.currentUser.token_key);
+                params.append('user_id', authManager.currentUser.id);
+                
+                const data = await authManager.apiCall(`/comments/${commentId}?${params}`, {
+                    method: 'DELETE'
+                });
+                
+                if (data.success) {
+                    eventBus.emit('refresh-view');
+                }
+            }
         }
 
-        async function showProfile(userId) {
-            currentView = 'profile';
-            
-            const content = document.getElementById('content');
-            content.innerHTML = `
-                <div class="loading">
-                    <div class="spinner"></div>
-                    <p>Loading profile...</p>
-                </div>
-            `;
+        // Profile View Component
+        class ProfileView extends HTMLElement {
+            static get observedAttributes() {
+                return ['user-id'];
+            }
 
-            const params = new URLSearchParams({ app: APP_ID });
-            const data = await apiCall(`/users/${userId}?${params}`);
+            constructor() {
+                super();
+                this.userId = null;
+                this.profileData = null;
+                this.activeTab = 'rants';
+            }
 
-            if (data.success) {
-                const profile = data.profile;
-                const isOwnProfile = currentUser && currentUser.id === userId;
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (name === 'user-id') {
+                    this.userId = newValue;
+                    this.loadProfile();
+                }
+            }
+
+            async loadProfile() {
+                if (!this.userId) return;
+
+                this.innerHTML = `<loading-spinner message="Loading profile..."></loading-spinner>`;
+
+                const params = new URLSearchParams({ app: authManager.APP_ID });
+                const data = await authManager.apiCall(`/users/${this.userId}?${params}`);
+
+                if (data.success) {
+                    this.profileData = data.profile;
+                    this.render();
+                }
+            }
+
+            render() {
+                const profile = this.profileData;
+                const isOwnProfile = authManager.currentUser && authManager.currentUser.id === parseInt(this.userId);
                 
-                content.innerHTML = `
-                    <button class="btn btn-secondary" onclick="showFeed()">← Back to Feed</button>
+                this.innerHTML = `
+                    <button class="btn btn-secondary" id="backBtn">← Back to Feed</button>
                     <div class="profile-header">
                         <div class="profile-avatar avatar" style="background: #${profile.avatar.b}">
                             ${profile.username[0].toUpperCase()}
@@ -890,39 +1454,52 @@ async function apiCall(endpoint, options = {}) {
                                 <div class="stat-label">Comments</div>
                             </div>
                         </div>
-                        ${isOwnProfile ? `<button class="btn" onclick="showEditProfile()" style="margin-top: 1rem;">Edit Profile</button>` : ''}
+                        ${isOwnProfile ? `<button class="btn" id="editProfileBtn" style="margin-top: 1rem;">Edit Profile</button>` : ''}
                     </div>
                     
                     <div class="tabs">
-                        <button class="tab active" onclick="showProfileTab('rants', ${userId})">Rants</button>
-                        <button class="tab" onclick="showProfileTab('comments', ${userId})">Comments</button>
-                        <button class="tab" onclick="showProfileTab('favorites', ${userId})">Favorites</button>
+                        <button class="tab ${this.activeTab === 'rants' ? 'active' : ''}" data-tab="rants">Rants</button>
+                        <button class="tab ${this.activeTab === 'comments' ? 'active' : ''}" data-tab="comments">Comments</button>
+                        <button class="tab ${this.activeTab === 'favorites' ? 'active' : ''}" data-tab="favorites">Favorites</button>
                     </div>
                     
                     <div id="profileContent">
-                        ${profile.content.content.rants.map(rant => createRantCard(rant)).join('')}
+                        ${this.renderTabContent()}
                     </div>
                 `;
-            }
-        }
 
-        async function showProfileTab(tab, userId) {
-            // Update active tab
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            event.target.classList.add('active');
-            
-            const params = new URLSearchParams({ app: APP_ID });
-            const data = await apiCall(`/users/${userId}?${params}`);
-            
-            if (data.success) {
-                const profile = data.profile;
-                const contentDiv = document.getElementById('profileContent');
+                // Add event listeners
+                this.querySelector('#backBtn').addEventListener('click', () => {
+                    eventBus.emit('navigate', 'feed');
+                });
+
+                const editBtn = this.querySelector('#editProfileBtn');
+                if (editBtn) {
+                    editBtn.addEventListener('click', () => {
+                        eventBus.emit('show-modal', 'edit-profile');
+                    });
+                }
+
+                this.querySelectorAll('[data-tab]').forEach(tab => {
+                    tab.addEventListener('click', () => {
+                        this.activeTab = tab.dataset.tab;
+                        this.render();
+                    });
+                });
+            }
+
+            renderTabContent() {
+                const profile = this.profileData;
                 
-                if (tab === 'rants') {
-                    contentDiv.innerHTML = profile.content.content.rants.map(rant => createRantCard(rant)).join('');
-                } else if (tab === 'comments') {
-                    contentDiv.innerHTML = profile.content.content.comments.map(comment => `
-                        <div class="rant-card" onclick="showRant(${comment.rant_id})">
+                if (this.activeTab === 'rants') {
+                    return profile.content.content.rants.map(rant => {
+                        const card = document.createElement('rant-card');
+                        card.setAttribute('rant-data', JSON.stringify(rant));
+                        return card.outerHTML;
+                    }).join('');
+                } else if (this.activeTab === 'comments') {
+                    return profile.content.content.comments.map(comment => `
+                        <div class="rant-card" style="cursor: pointer;" data-rant-id="${comment.rant_id}">
                             <div class="rant-content">${escapeHtml(comment.body)}</div>
                             <div class="rant-footer">
                                 <div class="rant-actions">
@@ -932,500 +1509,464 @@ async function apiCall(endpoint, options = {}) {
                             </div>
                         </div>
                     `).join('');
-                } else if (tab === 'favorites') {
-                    contentDiv.innerHTML = profile.content.content.favorites.map(rant => createRantCard(rant)).join('');
+                } else if (this.activeTab === 'favorites') {
+                    return profile.content.content.favorites.map(rant => {
+                        const card = document.createElement('rant-card');
+                        card.setAttribute('rant-data', JSON.stringify(rant));
+                        return card.outerHTML;
+                    }).join('');
                 }
             }
         }
 
-        function showMyProfile() {
-            if (currentUser) {
-                showProfile(currentUser.id);
+        // Search View Component
+        class SearchView extends HTMLElement {
+            connectedCallback() {
+                this.render();
+            }
+
+            render() {
+                this.innerHTML = `
+                    <div class="search-box">
+                        <form class="search-form" id="searchForm">
+                            <input type="text" name="term" placeholder="Search rants..." required>
+                            <button type="submit" class="btn">Search</button>
+                        </form>
+                    </div>
+                    <div id="searchResults"></div>
+                `;
+
+                this.querySelector('#searchForm').addEventListener('submit', (e) => this.search(e));
+            }
+
+            async search(event) {
+                event.preventDefault();
+                const term = event.target.term.value;
+                
+                const resultsDiv = this.querySelector('#searchResults');
+                resultsDiv.innerHTML = `<loading-spinner message="Searching..."></loading-spinner>`;
+                
+                const params = new URLSearchParams({ term, app: authManager.APP_ID });
+                const data = await authManager.apiCall(`/rant/search?${params}`);
+                
+                if (data.success) {
+                    if (data.results.length === 0) {
+                        resultsDiv.innerHTML = '<p style="text-align: center; color: var(--text-dim);">No results found</p>';
+                    } else {
+                        resultsDiv.innerHTML = '';
+                        data.results.forEach(rant => {
+                            const rantCard = document.createElement('rant-card');
+                            rantCard.setAttribute('rant-data', JSON.stringify(rant));
+                            resultsDiv.appendChild(rantCard);
+                        });
+                    }
+                }
             }
         }
 
-        function showSearch() {
-            currentView = 'search';
-            
-            const content = document.getElementById('content');
-            content.innerHTML = `
-                <div class="search-box">
-                    <form class="search-form" onsubmit="search(event)">
-                        <input type="text" name="term" placeholder="Search rants..." required>
-                        <button type="submit" class="btn">Search</button>
-                    </form>
-                </div>
-                <div id="searchResults"></div>
-            `;
-        }
+        // Notifications View Component
+        class NotificationsView extends HTMLElement {
+            async connectedCallback() {
+                this.innerHTML = `<loading-spinner message="Loading notifications..."></loading-spinner>`;
+                await this.loadNotifications();
+            }
 
-        async function search(event) {
-            event.preventDefault();
-            const term = event.target.term.value;
-            
-            const resultsDiv = document.getElementById('searchResults');
-            resultsDiv.innerHTML = `
-                <div class="loading">
-                    <div class="spinner"></div>
-                    <p>Searching...</p>
-                </div>
-            `;
-            
-            const params = new URLSearchParams({ term, app: APP_ID });
-            const data = await apiCall(`/rant/search?${params}`);
-            
-            if (data.success) {
-                if (data.results.length === 0) {
-                    resultsDiv.innerHTML = '<p style="text-align: center; color: var(--text-dim);">No results found</p>';
+            async loadNotifications() {
+                const params = new URLSearchParams({ 
+                    ext_prof: 1, 
+                    last_time: Math.floor(Date.now() / 1000) - 86400
+                });
+                
+                const data = await authManager.apiCall(`/users/me/notif-feed?${params}`);
+                
+                if (data.success) {
+                    const items = data.data.items;
+                    
+                    this.innerHTML = `
+                        <h2>Notifications</h2>
+                        ${items.length === 0 ? '<p style="text-align: center; color: var(--text-dim); margin-top: 2rem;">No notifications</p>' : ''}
+                        ${items.map(notif => `
+                            <div class="rant-card" data-rant-id="${notif.rant_id}" style="cursor: pointer;">
+                                <p><strong>${notif.username}</strong> ${notif.type === 'comment' ? 'commented on your rant' : 'mentioned you'}</p>
+                                <p style="color: var(--text-dim); font-size: 0.9rem;">${formatTime(notif.created_time)}</p>
+                            </div>
+                        `).join('')}
+                    `;
+                    
+                    this.querySelectorAll('[data-rant-id]').forEach(card => {
+                        card.addEventListener('click', () => {
+                            const rantId = card.dataset.rantId;
+                            eventBus.emit('navigate', { view: 'rant', id: rantId });
+                        });
+                    });
+                    
+                    // Clear notification count
+                    eventBus.emit('notifications-read');
                 } else {
-                    resultsDiv.innerHTML = data.results.map(rant => createRantCard(rant)).join('');
+                    this.innerHTML = `
+                        <h2>Notifications</h2>
+                        <p style="text-align: center; color: var(--error); margin-top: 2rem;">Failed to load notifications</p>
+                    `;
                 }
             }
         }
 
-async function showNotifications() {
-    currentView = 'notifications';
-    
-    const content = document.getElementById('content');
-    content.innerHTML = `
-        <div class="loading">
-            <div class="spinner"></div>
-            <p>Loading notifications...</p>
-        </div>
-    `;
-    
-    const params = new URLSearchParams({ 
-        ext_prof: 1, 
-        last_time: Math.floor(Date.now() / 1000) - 86400
-    });
-    
-    const data = await apiCall(`/users/me/notif-feed?${params}`);
-    
-    if (data.success) {
-        const items = data.data.items;
-        
-        content.innerHTML = `
-            <h2>Notifications</h2>
-            ${items.length === 0 ? '<p style="text-align: center; color: var(--text-dim); margin-top: 2rem;">No notifications</p>' : ''}
-            ${items.map(notif => `
-                <div class="rant-card" onclick="showRant(${notif.rant_id})" style="cursor: pointer;">
-                    <p><strong>${notif.username}</strong> ${notif.type === 'comment' ? 'commented on your rant' : 'mentioned you'}</p>
-                    <p style="color: var(--text-dim); font-size: 0.9rem;">${formatTime(notif.created_time)}</p>
-                </div>
-            `).join('')}
-        `;
-        
-        // Update notification count
-        updateNotificationCount(0);
-    } else {
-        content.innerHTML = `
-            <h2>Notifications</h2>
-            <p style="text-align: center; color: var(--error); margin-top: 2rem;">Failed to load notifications: ${data.error || 'Unknown error'}</p>
-        `;
-    }
-}
+        // Modal Component
+        class RantModal extends HTMLElement {
+            connectedCallback() {
+                this.innerHTML = `
+                    <div id="modal" class="modal">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h2 id="modalTitle">Modal Title</h2>
+                                <button class="close-btn">&times;</button>
+                            </div>
+                            <div id="modalBody">
+                                <!-- Modal content will be loaded here -->
+                            </div>
+                        </div>
+                    </div>
+                `;
 
+                this.querySelector('.close-btn').addEventListener('click', () => this.close());
+                this.querySelector('#modal').addEventListener('click', (e) => {
+                    if (e.target.id === 'modal') {
+                        this.close();
+                    }
+                });
 
-
-
-async function checkNotifications() {
-    if (!currentUser) return;
-    
-    const params = new URLSearchParams({ 
-        ext_prof: 1, 
-        last_time: Math.floor(Date.now() / 1000) - 86400
-    });
-    
-    const data = await apiCall(`/users/me/notif-feed?${params}`);
-    
-    if (data.success) {
-        updateNotificationCount(data.data.num_unread);
-    }
-}
-
-
-        function updateNotificationCount(count) {
-            const notifCount = document.getElementById('notifCount');
-            if (count > 0) {
-                notifCount.textContent = `(${count})`;
-                notifCount.style.color = 'var(--error)';
-            } else {
-                notifCount.textContent = '';
+                eventBus.on('show-modal', (type) => this.show(type));
             }
-        }
 
-        // Modal functions
-        function showModal(title, content) {
-            document.getElementById('modalTitle').textContent = title;
-            document.getElementById('modalBody').innerHTML = content;
-            document.getElementById('modal').classList.add('active');
-        }
-
-        function closeModal() {
-            document.getElementById('modal').classList.remove('active');
-        }
-
-        function showLogin() {
-            showModal('Login', `
-                <form onsubmit="login(event)">
-                    <div class="alert error" id="loginError"></div>
-                    <div class="form-group">
-                        <label>Username or Email</label>
-                        <input type="text" name="username" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Password</label>
-                        <input type="password" name="password" required>
-                    </div>
-                    <button type="submit" class="btn" style="width: 100%;">Login</button>
-                    <p style="text-align: center; margin-top: 1rem;">
-                        Don't have an account? <a href="#" onclick="showRegister()">Sign up</a>
-                    </p>
-                </form>
-            `);
-        }
-
-        function showRegister() {
-            showModal('Sign Up', `
-                <form onsubmit="register(event)">
-                    <div class="alert error" id="registerError"></div>
-                    <div class="form-group">
-                        <label>Email</label>
-                        <input type="email" name="email" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Username</label>
-                        <input type="text" name="username" required minlength="4" maxlength="15">
-                    </div>
-                    <div class="form-group">
-                        <label>Password</label>
-                        <input type="password" name="password" required>
-                    </div>
-                    <button type="submit" class="btn" style="width: 100%;">Sign Up</button>
-                    <p style="text-align: center; margin-top: 1rem;">
-                        Already have an account? <a href="#" onclick="showLogin()">Login</a>
-                    </p>
-                </form>
-            `);
-        }
-
-        function showCreateRant() {
-            if (!currentUser) {
-                showLogin();
-                return;
+            show(modalData) {
+                const modalType = typeof modalData === 'string' ? modalData : modalData.type;
+                
+                switch (modalType) {
+                    case 'login':
+                        this.showLogin();
+                        break;
+                    case 'register':
+                        this.showRegister();
+                        break;
+                    case 'create-rant':
+                        this.showCreateRant();
+                        break;
+                    case 'edit-profile':
+                        this.showEditProfile();
+                        break;
+                    case 'edit-rant':
+                        this.showEditRant(modalData.rant);
+                        break;
+                }
             }
-            
-            showModal('Create Rant', `
-                <form onsubmit="createRant(event)">
-                    <div class="alert error" id="rantError"></div>
-                    <div class="form-group">
-                        <label>What's on your mind?</label>
-                        <textarea name="rant" placeholder="Share your thoughts..." required></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Tags (comma separated)</label>
-                        <input type="text" name="tags" placeholder="rant, javascript, devops">
-                    </div>
-                    <div class="form-group">
-                        <label>Type</label>
-                        <select name="type">
-                            <option value="1">Rant</option>
-                            <option value="2">Collab</option>
-                            <option value="3">Question</option>
-                            <option value="4">devRant</option>
-                            <option value="5">Random</option>
-                        </select>
-                    </div>
-                    <button type="submit" class="btn" style="width: 100%;">Post Rant</button>
-                </form>
-            `);
-        }
 
-        function showEditProfile() {
-            showModal('Edit Profile', `
-                <form onsubmit="updateProfile(event)">
-                    <div class="alert success" id="profileSuccess"></div>
-                    <div class="form-group">
-                        <label>About</label>
-                        <textarea name="about" placeholder="Tell us about yourself..."></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Skills</label>
-                        <input type="text" name="skills" placeholder="JavaScript, Python, DevOps">
-                    </div>
-                    <div class="form-group">
-                        <label>Location</label>
-                        <input type="text" name="location" placeholder="San Francisco, CA">
-                    </div>
-                    <div class="form-group">
-                        <label>Website</label>
-                        <input type="url" name="website" placeholder="https://example.com">
-                    </div>
-                    <div class="form-group">
-                        <label>GitHub Username</label>
-                        <input type="text" name="github" placeholder="username">
-                    </div>
-                    <button type="submit" class="btn" style="width: 100%;">Update Profile</button>
-                </form>
-            `);
-        }
+            close() {
+                this.querySelector('#modal').classList.remove('active');
+            }
 
-        // Action functions
-        async function login(event) {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            formData.append('app', APP_ID);
-            
-            const data = await apiCall('/users/auth-token', {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success) {
-                authToken = data.auth_token;
-                currentUser = {
-                    id: authToken.user_id,
-                    token_id: authToken.id,
-                    token_key: authToken.key
-                };
-                localStorage.setItem('authToken', JSON.stringify(authToken));
-                updateNavigation(true);
-                closeModal();
-                showFeed();
-                checkNotifications();
-            } else {
-                showError('loginError', data.error);
+            setContent(title, content) {
+                this.querySelector('#modalTitle').textContent = title;
+                this.querySelector('#modalBody').innerHTML = content;
+                this.querySelector('#modal').classList.add('active');
             }
-        }
 
-        async function register(event) {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            formData.append('app', APP_ID);
-            formData.append('type', 1);
-            
-            const data = await apiCall('/users', {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success) {
-                closeModal();
-                showLogin();
-                alert('Registration successful! Please login.');
-            } else {
-                showError('registerError', data.error);
-            }
-        }
+            showLogin() {
+                this.setContent('Login', `
+                    <form id="loginForm">
+                        <div class="alert error" id="loginError"></div>
+                        <div class="form-group">
+                            <label>Username or Email</label>
+                            <input type="text" name="username" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Password</label>
+                            <input type="password" name="password" required>
+                        </div>
+                        <button type="submit" class="btn" style="width: 100%;">Login</button>
+                        <p style="text-align: center; margin-top: 1rem;">
+                            Don't have an account? <a href="#" id="showRegisterLink">Sign up</a>
+                        </p>
+                    </form>
+                `);
 
-        function logout() {
-            localStorage.removeItem('authToken');
-            authToken = null;
-            currentUser = null;
-            updateNavigation(false);
-            showFeed();
-        }
+                this.querySelector('#loginForm').addEventListener('submit', async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const data = await authManager.login(formData.get('username'), formData.get('password'));
+                    
+                    if (data.success) {
+                        this.close();
+                        eventBus.emit('navigate', 'feed');
+                    } else {
+                        this.showError('loginError', data.error);
+                    }
+                });
 
-        async function createRant(event) {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            
-            const data = await apiCall('/rant/rants', {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success) {
-                closeModal();
-                showRant(data.rant_id);
-            } else {
-                showError('rantError', data.error);
+                this.querySelector('#showRegisterLink').addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.showRegister();
+                });
             }
-        }
 
-        async function voteRant(rantId, vote) {
-            if (!currentUser) {
-                showLogin();
-                return;
-            }
-            
-            const formData = new FormData();
-            formData.append('vote', vote);
-            if (vote === -1) {
-                formData.append('reason', 0); // Not for me
-            }
-            
-            const data = await apiCall(`/rant/rants/${rantId}/vote`, {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success && currentView === 'rant') {
-                showRant(rantId);
-            } else if (data.success) {
-                showFeed(currentSort);
-            }
-        }
+            showRegister() {
+                this.setContent('Sign Up', `
+                    <form id="registerForm">
+                        <div class="alert error" id="registerError"></div>
+                        <div class="form-group">
+                            <label>Email</label>
+                            <input type="email" name="email" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Username</label>
+                            <input type="text" name="username" required minlength="4" maxlength="15">
+                        </div>
+                        <div class="form-group">
+                            <label>Password</label>
+                            <input type="password" name="password" required>
+                        </div>
+                        <button type="submit" class="btn" style="width: 100%;">Sign Up</button>
+                        <p style="text-align: center; margin-top: 1rem;">
+                            Already have an account? <a href="#" id="showLoginLink">Login</a>
+                        </p>
+                    </form>
+                `);
 
-        async function voteComment(commentId, vote) {
-            if (!currentUser) {
-                showLogin();
-                return;
+                this.querySelector('#registerForm').addEventListener('submit', async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    formData.append('app', authManager.APP_ID);
+                    formData.append('type', 1);
+                    
+                    const data = await authManager.apiCall('/users', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    if (data.success) {
+                        this.close();
+                        this.showLogin();
+                        alert('Registration successful! Please login.');
+                    } else {
+                        this.showError('registerError', data.error);
+                    }
+                });
+
+                this.querySelector('#showLoginLink').addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.showLogin();
+                });
             }
-            
-            const formData = new FormData();
-            formData.append('vote', vote);
-            
-            const data = await apiCall(`/comments/${commentId}/vote`, {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success && currentView === 'rant') {
-                // Refresh current rant view
-                const rantCard = document.querySelector('.rant-card');
-                if (rantCard) {
-                    const rantId = parseInt(rantCard.getAttribute('onclick').match(/\d+/)[0]);
-                    showRant(rantId);
+
+            showCreateRant() {
+                if (!authManager.isLoggedIn()) {
+                    this.showLogin();
+                    return;
+                }
+                
+                this.setContent('Create Rant', `
+                    <form id="createRantForm">
+                        <div class="alert error" id="rantError"></div>
+                        <div class="form-group">
+                            <label>What's on your mind?</label>
+                            <textarea name="rant" placeholder="Share your thoughts..." required></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label>Tags (comma separated)</label>
+                            <input type="text" name="tags" placeholder="rant, javascript, devops">
+                        </div>
+                        <div class="form-group">
+                            <label>Type</label>
+                            <select name="type">
+                                <option value="1">Rant</option>
+                                <option value="2">Collab</option>
+                                <option value="3">Question</option>
+                                <option value="4">devRant</option>
+                                <option value="5">Random</option>
+                            </select>
+                        </div>
+                        <button type="submit" class="btn" style="width: 100%;">Post Rant</button>
+                    </form>
+                `);
+
+                this.querySelector('#createRantForm').addEventListener('submit', async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    
+                    const data = await authManager.apiCall('/rant/rants', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    if (data.success) {
+                        this.close();
+                        eventBus.emit('navigate', { view: 'rant', id: data.rant_id });
+                    } else {
+                        this.showError('rantError', data.error);
+                    }
+                });
+            }
+
+            showEditProfile() {
+                this.setContent('Edit Profile', `
+                    <form id="editProfileForm">
+                        <div class="alert success" id="profileSuccess"></div>
+                        <div class="form-group">
+                            <label>About</label>
+                            <textarea name="about" placeholder="Tell us about yourself..."></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label>Skills</label>
+                            <input type="text" name="skills" placeholder="JavaScript, Python, DevOps">
+                        </div>
+                        <div class="form-group">
+                            <label>Location</label>
+                            <input type="text" name="location" placeholder="San Francisco, CA">
+                        </div>
+                        <div class="form-group">
+                            <label>Website</label>
+                            <input type="url" name="website" placeholder="https://example.com">
+                        </div>
+                        <div class="form-group">
+                            <label>GitHub Username</label>
+                            <input type="text" name="github" placeholder="username">
+                        </div>
+                        <button type="submit" class="btn" style="width: 100%;">Update Profile</button>
+                    </form>
+                `);
+
+                this.querySelector('#editProfileForm').addEventListener('submit', async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    
+                    // Add profile_ prefix to all fields
+                    const profileData = new FormData();
+                    for (let [key, value] of formData.entries()) {
+                        profileData.append(`profile_${key}`, value);
+                    }
+                    
+                    const data = await authManager.apiCall('/users/me/edit-profile', {
+                        method: 'POST',
+                        body: profileData
+                    });
+                    
+                    if (data.success) {
+                        this.showSuccess('profileSuccess', 'Profile updated successfully!');
+                        setTimeout(() => {
+                            this.close();
+                            eventBus.emit('navigate', { view: 'profile', id: authManager.currentUser.id });
+                        }, 1500);
+                    }
+                });
+            }
+
+            showError(elementId, message) {
+                const errorEl = this.querySelector(`#${elementId}`);
+                if (errorEl) {
+                    errorEl.textContent = message;
+                    errorEl.classList.add('active');
+                }
+            }
+
+            showSuccess(elementId, message) {
+                const successEl = this.querySelector(`#${elementId}`);
+                if (successEl) {
+                    successEl.textContent = message;
+                    successEl.classList.add('active');
                 }
             }
         }
 
-        async function toggleFavorite(rantId, isFavorited) {
-            if (!currentUser) {
-                showLogin();
-                return;
-            }
-            
-            const endpoint = isFavorited ? 'unfavorite' : 'favorite';
-            const formData = new FormData();
-            
-            const data = await apiCall(`/rant/rants/${rantId}/${endpoint}`, {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success) {
-                showRant(rantId);
+        // Floating Action Button Component
+        class RantFab extends HTMLElement {
+            connectedCallback() {
+                this.innerHTML = `
+                    <button class="fab" id="createRantBtn" style="display: none;">+</button>
+                `;
+
+                this.querySelector('#createRantBtn').addEventListener('click', () => {
+                    eventBus.emit('show-modal', 'create-rant');
+                });
+
+                eventBus.on('auth-changed', (data) => {
+                    this.querySelector('#createRantBtn').style.display = data.isLoggedIn ? 'flex' : 'none';
+                });
+
+                // Initial check
+                if (authManager.isLoggedIn()) {
+                    this.querySelector('#createRantBtn').style.display = 'flex';
+                }
             }
         }
 
-        async function postComment(event, rantId) {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            
-            const data = await apiCall(`/rant/rants/${rantId}/comments`, {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (data.success) {
-                showRant(rantId);
+        // Main App Component
+        class RantApp extends HTMLElement {
+            constructor() {
+                super();
+                this.currentViewData = 'feed';
+            }
+
+            connectedCallback() {
+                eventBus.on('navigate', (viewData) => this.navigate(viewData));
+                eventBus.on('refresh-view', () => this.refreshView());
+                
+                // Initial navigation
+                this.navigate('feed');
+            }
+
+            navigate(viewData) {
+                const view = typeof viewData === 'string' ? viewData : viewData.view;
+                const params = typeof viewData === 'object' ? viewData : {};
+                
+                this.currentViewData = viewData;
+                const content = document.getElementById('content');
+                
+                switch (view) {
+                    case 'feed':
+                        content.innerHTML = '<feed-view></feed-view>';
+                        break;
+                    case 'rant':
+                        content.innerHTML = `<rant-detail-view rant-id="${params.id}"></rant-detail-view>`;
+                        break;
+                    case 'profile':
+                        const userId = params.id || authManager.currentUser?.id;
+                        content.innerHTML = `<profile-view user-id="${userId}"></profile-view>`;
+                        break;
+                    case 'search':
+                        content.innerHTML = '<search-view></search-view>';
+                        break;
+                    case 'notifications':
+                        if (authManager.isLoggedIn()) {
+                            content.innerHTML = '<notifications-view></notifications-view>';
+                        } else {
+                            eventBus.emit('show-modal', 'login');
+                        }
+                        break;
+                }
+            }
+
+            refreshView() {
+                this.navigate(this.currentViewData);
             }
         }
 
-        async function deleteRant(rantId) {
-            if (!confirm('Are you sure you want to delete this rant?')) return;
-            
-            const params = new URLSearchParams();
-            params.append('app', APP_ID);
-            params.append('token_id', currentUser.token_id);
-            params.append('token_key', currentUser.token_key);
-            params.append('user_id', currentUser.id);
-            
-            const data = await apiCall(`/rant/rants/${rantId}?${params}`, {
-                method: 'DELETE'
-            });
-            
-            if (data.success) {
-                showFeed();
-            }
-        }
+        // Register all custom elements
+        customElements.define('rant-navigation', RantNavigation);
+        customElements.define('rant-card', RantCard);
+        customElements.define('loading-spinner', LoadingSpinner);
+        customElements.define('sort-options', SortOptions);
+        customElements.define('feed-view', FeedView);
+        customElements.define('rant-detail-view', RantDetailView);
+        customElements.define('comments-section', CommentsSection);
+        customElements.define('profile-view', ProfileView);
+        customElements.define('search-view', SearchView);
+        customElements.define('notifications-view', NotificationsView);
+        customElements.define('rant-modal', RantModal);
+        customElements.define('rant-fab', RantFab);
+        customElements.define('rant-app', RantApp);
 
-        async function deleteComment(commentId, rantId) {
-            if (!confirm('Are you sure you want to delete this comment?')) return;
-            
-            const params = new URLSearchParams();
-            params.append('app', APP_ID);
-            params.append('token_id', currentUser.token_id);
-            params.append('token_key', currentUser.token_key);
-            params.append('user_id', currentUser.id);
-            
-            const data = await apiCall(`/comments/${commentId}?${params}`, {
-                method: 'DELETE'
-            });
-            
-            if (data.success) {
-                showRant(rantId);
-            }
-        }
-
-        async function updateProfile(event) {
-            event.preventDefault();
-            const formData = new FormData(event.target);
-            
-            // Add profile_ prefix to all fields
-            const profileData = new FormData();
-            for (let [key, value] of formData.entries()) {
-                profileData.append(`profile_${key}`, value);
-            }
-            
-            const data = await apiCall('/users/me/edit-profile', {
-                method: 'POST',
-                body: profileData
-            });
-            
-            if (data.success) {
-                showSuccess('profileSuccess', 'Profile updated successfully!');
-                setTimeout(() => {
-                    closeModal();
-                    showMyProfile();
-                }, 1500);
-            }
-        }
-
-        // Helper functions
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-
-        function formatTime(timestamp) {
-            const date = new Date(timestamp * 1000);
-            const now = new Date();
-            const diff = Math.floor((now - date) / 1000);
-            
-            if (diff < 60) return 'just now';
-            if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-            if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-            if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
-            
-            return date.toLocaleDateString();
-        }
-
-        function showError(elementId, message) {
-            const errorEl = document.getElementById(elementId);
-            if (errorEl) {
-                errorEl.textContent = message;
-                errorEl.classList.add('active');
-            }
-        }
-
-        function showSuccess(elementId, message) {
-            const successEl = document.getElementById(elementId);
-            if (successEl) {
-                successEl.textContent = message;
-                successEl.classList.add('active');
-            }
-        }
-
-        // Poll for notifications every minute
-        setInterval(() => {
-            if (currentUser) {
-                checkNotifications();
-            }
-        }, 60000);
+        // Initialize the app
+        const app = document.createElement('rant-app');
+        document.body.appendChild(app);
     </script>
 </body>
 </html>

No results found