favorites function

frontend/app.js

@@ -11,6 +11,8 @@ let playerMode = 'modal';
 let playerHome = null;
 let onFullscreenChange = null;
 let onWebkitEndFullscreen = null;
+const FAVORITES_KEY = 'favorites';
+const FAVORITES_VISIBILITY_KEY = 'favoritesVisible';
 
 // 2. Observer Definition (Must be defined before initApp uses it)
 const observer = new IntersectionObserver((entries) => {
@@ -33,6 +35,12 @@ async function InitializeLocalStorage() {
     if (!localStorage.getItem('theme')) {
         localStorage.setItem('theme', 'dark');
     }
+    if (!localStorage.getItem(FAVORITES_KEY)) {
+        localStorage.setItem(FAVORITES_KEY, JSON.stringify([]));
+    }
+    if (!localStorage.getItem(FAVORITES_VISIBILITY_KEY)) {
+        localStorage.setItem(FAVORITES_VISIBILITY_KEY, 'true');
+    }
     // We always run this to make sure session is fresh
     await InitializeServerStatus();
 }
@@ -151,18 +159,29 @@ function renderVideos(videos) {
     if (!grid) return;
 
     const items = videos && Array.isArray(videos.items) ? videos.items : [];
+    const favoritesSet = getFavoritesSet();
     items.forEach(v => {
         if (renderedVideoIds.has(v.id)) return;
         
         const card = document.createElement('div');
         card.className = 'video-card';
         const durationText = formatDuration(v.duration);
+        const favoriteKey = getFavoriteKey(v);
         card.innerHTML = `
+            <button class="favorite-btn" type="button" aria-pressed="false" aria-label="Add to favorites" data-fav-key="${favoriteKey || ''}">♡</button>
             <img src="${v.thumb}" alt="${v.title}">
             <h4>${v.title}</h4>
             <p class="video-meta">${v.channel}</p>
             ${durationText ? `<p class="video-duration">${durationText}</p>` : ''}
         `;
+        const favoriteBtn = card.querySelector('.favorite-btn');
+        if (favoriteBtn && favoriteKey) {
+            setFavoriteButtonState(favoriteBtn, favoritesSet.has(favoriteKey));
+            favoriteBtn.onclick = (event) => {
+                event.stopPropagation();
+                toggleFavorite(v);
+            };
+        }
         card.onclick = () => openPlayer(v.url);
         grid.appendChild(card);
         renderedVideoIds.add(v.id);
@@ -206,6 +225,122 @@ function getMobileVideoHost() {
     return host;
 }
 
+function getFavorites() {
+    try {
+        const raw = localStorage.getItem(FAVORITES_KEY);
+        const parsed = raw ? JSON.parse(raw) : [];
+        return Array.isArray(parsed) ? parsed : [];
+    } catch (err) {
+        return [];
+    }
+}
+
+function setFavorites(items) {
+    localStorage.setItem(FAVORITES_KEY, JSON.stringify(items));
+}
+
+function getFavoriteKey(video) {
+    if (!video) return null;
+    return video.key || video.id || video.url || null;
+}
+
+function normalizeFavorite(video) {
+    const key = getFavoriteKey(video);
+    if (!key) return null;
+    return {
+        key,
+        id: video.id || null,
+        url: video.url || '',
+        title: video.title || '',
+        thumb: video.thumb || '',
+        channel: video.channel || '',
+        duration: video.duration || 0
+    };
+}
+
+function getFavoritesSet() {
+    return new Set(getFavorites().map((item) => item.key));
+}
+
+function setFavoriteButtonState(button, isFavorite) {
+    button.classList.toggle('is-favorite', isFavorite);
+    button.textContent = isFavorite ? '♥' : '♡';
+    button.setAttribute('aria-pressed', isFavorite ? 'true' : 'false');
+    button.setAttribute('aria-label', isFavorite ? 'Remove from favorites' : 'Add to favorites');
+}
+
+function syncFavoriteButtons() {
+    const favoritesSet = getFavoritesSet();
+    document.querySelectorAll('.favorite-btn[data-fav-key]').forEach((button) => {
+        const key = button.dataset.favKey;
+        if (!key) return;
+        setFavoriteButtonState(button, favoritesSet.has(key));
+    });
+}
+
+function toggleFavorite(video) {
+    const key = getFavoriteKey(video);
+    if (!key) return;
+    const favorites = getFavorites();
+    const existingIndex = favorites.findIndex((item) => item.key === key);
+    if (existingIndex >= 0) {
+        favorites.splice(existingIndex, 1);
+    } else {
+        const entry = normalizeFavorite(video);
+        if (entry) favorites.unshift(entry);
+    }
+    setFavorites(favorites);
+    renderFavoritesBar();
+    syncFavoriteButtons();
+}
+
+function isFavoritesVisible() {
+    return localStorage.getItem(FAVORITES_VISIBILITY_KEY) !== 'false';
+}
+
+function setFavoritesVisible(isVisible) {
+    localStorage.setItem(FAVORITES_VISIBILITY_KEY, isVisible ? 'true' : 'false');
+}
+
+function renderFavoritesBar() {
+    const bar = document.getElementById('favorites-bar');
+    const list = document.getElementById('favorites-list');
+    const empty = document.getElementById('favorites-empty');
+    if (!bar || !list) return;
+
+    const favorites = getFavorites();
+    const visible = isFavoritesVisible();
+    bar.style.display = visible ? 'block' : 'none';
+
+    list.innerHTML = "";
+    favorites.forEach((item) => {
+        const card = document.createElement('div');
+        card.className = 'favorite-card';
+        card.dataset.favKey = item.key;
+        card.innerHTML = `
+            <button class="favorite-btn is-favorite" type="button" aria-pressed="true" aria-label="Remove from favorites" data-fav-key="${item.key}">♥</button>
+            <img src="${item.thumb}" alt="${item.title}">
+            <div class="favorite-info">
+                <h4>${item.title}</h4>
+                <p>${item.channel}</p>
+            </div>
+        `;
+        card.onclick = () => openPlayer(item.url);
+        const favoriteBtn = card.querySelector('.favorite-btn');
+        if (favoriteBtn) {
+            favoriteBtn.onclick = (event) => {
+                event.stopPropagation();
+                toggleFavorite(item);
+            };
+        }
+        list.appendChild(card);
+    });
+
+    if (empty) {
+        empty.style.display = favorites.length > 0 ? 'none' : 'block';
+    }
+}
+
 // 4. Initialization (Run this last)
 async function initApp() {
     // Clear old data if you want a fresh start every refresh
@@ -214,6 +349,7 @@ async function initApp() {
     await InitializeLocalStorage();
     applyTheme();
     renderMenu();
+    renderFavoritesBar();
 
     const sentinel = document.getElementById('sentinel');
     if (sentinel) {
@@ -240,6 +376,7 @@ async function initApp() {
     });
 
     await loadVideos();
+    syncFavoriteButtons();
 }
 
 function applyTheme() {
@@ -595,6 +732,7 @@ function renderMenu() {
     const addSourceBtn = document.getElementById('add-source-btn');
     const sourceInput = document.getElementById('source-input');
     const reloadChannelBtn = document.getElementById('reload-channel-btn');
+    const favoritesToggle = document.getElementById('favorites-toggle');
 
     if (!sourceSelect || !channelSelect || !filtersContainer) return;
 
@@ -686,6 +824,14 @@ function renderMenu() {
         };
     }
 
+    if (favoritesToggle) {
+        favoritesToggle.checked = isFavoritesVisible();
+        favoritesToggle.onchange = () => {
+            setFavoritesVisible(favoritesToggle.checked);
+            renderFavoritesBar();
+        };
+    }
+
     if (sourcesList) {
         sourcesList.innerHTML = "";
         serverEntries.forEach((entry) => {

frontend/index.html

@@ -29,6 +29,14 @@
         </div>
     </header>
 
+    <section id="favorites-bar" class="favorites-bar" aria-label="Favorites">
+        <div class="favorites-header">
+            <h3>Favorites</h3>
+        </div>
+        <div id="favorites-list" class="favorites-list"></div>
+        <div id="favorites-empty" class="favorites-empty">No favorites yet. Tap the heart on a video to save it here.</div>
+    </section>
+
     <div class="sidebar-overlay" id="overlay" onclick="closeDrawers()"></div>
 
     <aside id="drawer-menu" class="sidebar">
@@ -69,6 +77,15 @@
                     <option value="light">Light</option>
                 </select>
             </div>
+            <div class="setting-item setting-toggle">
+                <div class="setting-label-row">
+                    <label for="favorites-toggle">Favorites Bar</label>
+                </div>
+                <label class="toggle">
+                    <input type="checkbox" id="favorites-toggle">
+                    <span class="toggle-track"></span>
+                </label>
+            </div>
             <div class="sidebar-section">
                 <h4 class="sidebar-subtitle">Sources</h4>
                 <div class="setting-item">

frontend/style.css

@@ -333,6 +333,60 @@ body.theme-light .sidebar {
     margin-bottom: 0;
 }
 
+.setting-toggle .setting-label-row {
+    margin-bottom: 10px;
+}
+
+.toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 46px;
+    height: 26px;
+}
+
+.toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-track {
+    position: absolute;
+    inset: 0;
+    border-radius: 999px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    transition: all 0.2s ease;
+}
+
+.toggle-track::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--text-primary);
+    transition: transform 0.2s ease, background 0.2s ease;
+    box-shadow: 0 4px 10px var(--shadow);
+}
+
+.toggle input:checked + .toggle-track {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.toggle input:checked + .toggle-track::after {
+    transform: translateX(20px);
+    background: var(--bg-primary);
+}
+
+.toggle input:focus-visible + .toggle-track {
+    box-shadow: 0 0 0 4px var(--focus-ring);
+}
+
 .btn-link {
     background: transparent;
     border: none;
@@ -584,6 +638,102 @@ body.theme-light .setting-item select option {
     cursor: not-allowed;
 }
 
+/* Favorites Bar */
+.favorites-bar {
+    padding: 16px clamp(16px, 3vw, 36px) 4px;
+    max-width: var(--grid-max);
+    margin: 0 auto;
+}
+
+.favorites-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.favorites-header h3 {
+    font-size: 12px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    font-family: var(--font-display);
+}
+
+.favorites-list {
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 12px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+}
+
+.favorites-list::-webkit-scrollbar {
+    height: 8px;
+}
+
+.favorites-list::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 999px;
+}
+
+.favorites-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.favorite-card {
+    position: relative;
+    flex: 0 0 auto;
+    width: 220px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    overflow: hidden;
+    cursor: pointer;
+    box-shadow: 0 8px 18px var(--shadow);
+    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+    scroll-snap-align: start;
+}
+
+.favorite-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 14px 24px var(--shadow);
+    border-color: var(--border-hover);
+}
+
+.favorite-card img {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    background: var(--bg-tertiary);
+}
+
+.favorite-info {
+    padding: 10px 12px 12px 12px;
+}
+
+.favorite-info h4 {
+    font-size: 13px;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text-primary);
+    font-family: var(--font-display);
+    line-height: 1.3;
+}
+
+.favorite-info p {
+    margin: 4px 0 0 0;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.favorites-empty {
+    font-size: 13px;
+    color: var(--text-secondary);
+    padding: 4px 0 12px 0;
+}
+
 /* Grid Container */
 .grid-container {
     display: grid;
@@ -699,6 +849,7 @@ body.theme-light .setting-item select option {
     height: 100%;
     border: 1px solid var(--border);
     box-shadow: 0 6px 16px var(--shadow);
+    position: relative;
 }
 
 .video-card:hover {
@@ -749,6 +900,41 @@ body.theme-light .setting-item select option {
     font-weight: 500;
 }
 
+.favorite-btn {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: rgba(0, 0, 0, 0.55);
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    z-index: 1;
+    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+body.theme-light .favorite-btn {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.favorite-btn:hover {
+    transform: scale(1.05);
+    background: var(--bg-secondary);
+}
+
+.favorite-btn.is-favorite {
+    color: #ff3b30;
+    border-color: rgba(255, 59, 48, 0.6);
+    background: rgba(255, 59, 48, 0.12);
+}
+
 /* Modal */
 .modal {
     display: none;