jimmy/t-youtube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesigned UI — AI Digest hero, keyboard nav (j/k/↑↓), dark/light mode, description-based summaries

Browse Source
This commit is contained in:
Gan, Jimmy
2026-06-24 01:17:56 +08:00
parent 7b485abfbb
commit 404d57f0b1
3 changed files with 175 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/YoutubeDashboard.svelte
+124 -298
View File
@@ -1,15 +1,20 @@
<script>
import { onMount } from 'svelte';
// Svelte 5 Runes for Reactive State
let videos = $state([]);
let selectedVideo = $state(null);
let activeTab = $state('pending'); // pending, read, skipped
let activeTab = $state('pending');
let isLoading = $state(false);
let isSyncing = $state(false);
let syncMessage = $state('');
let theme = $state(localStorage.getItem('theme') || 'dark');
function toggleTheme() {
theme = theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', theme);
document.documentElement.className = theme;
}
// Fetch videos from backend api
async function loadVideos() {
isLoading = true;
try {
@@ -17,7 +22,6 @@
if (res.ok) {
videos = await res.json();
if (videos.length > 0) {
// Keep current video selected if still in the list, otherwise select first
const currentId = selectedVideo?.video_id;
const found = videos.find(v => v.video_id === currentId);
selectedVideo = found || videos[0];
@@ -32,347 +36,169 @@
}
}
// Trigger subscription sync in background
async function syncSubscriptions() {
isSyncing = true;
syncMessage = 'Syncing subscriptions & generating summaries...';
syncMessage = 'Syncing...';
try {
const res = await fetch('/api/videos/fetch', { method: 'POST' });
if (res.ok) {
syncMessage = 'Sync started in background. Refreshing in 6 seconds...';
setTimeout(() => {
loadVideos();
isSyncing = false;
syncMessage = '';
}, 6000);
}
} catch (err) {
console.error("Error syncing:", err);
isSyncing = false;
syncMessage = '';
}
if (res.ok) setTimeout(() => { loadVideos(); isSyncing = false; syncMessage = ''; }, 6000);
} catch (err) { isSyncing = false; syncMessage = ''; }
}
// Update status (pending -> read/skipped etc)
async function updateStatus(videoId, newStatus) {
try {
const res = await fetch(`/api/videos/${videoId}/status`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status: newStatus })
});
if (res.ok) {
// Remove from current list
videos = videos.filter(v => v.video_id !== videoId);
if (selectedVideo && selectedVideo.video_id === videoId) {
selectedVideo = videos.length > 0 ? videos[0] : null;
}
}
} catch (err) {
console.error("Error updating status:", err);
}
await fetch(`/api/videos/${videoId}/status`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: newStatus }) });
videos = videos.filter(v => v.video_id !== videoId);
if (selectedVideo?.video_id === videoId) selectedVideo = videos[0] || null;
}
// Trigger summary generation for a single video manually
async function generateSummary(videoId) {
if (selectedVideo && selectedVideo.video_id === videoId) {
selectedVideo.summary = "Generating summary now, please wait...";
}
try {
const res = await fetch(`/api/videos/${videoId}/summarize`, { method: 'POST' });
if (res.ok) {
setTimeout(() => {
loadVideos();
}, 3000);
}
} catch (err) {
console.error("Error summarizing:", err);
if (selectedVideo?.video_id === videoId) selectedVideo.summary = "Generating...";
await fetch(`/api/videos/${videoId}/summarize`, { method: 'POST' });
setTimeout(() => loadVideos(), 3000);
}
$effect(() => { if (activeTab) loadVideos(); });
onMount(() => {
document.documentElement.className = theme;
loadVideos();
window.addEventListener('keydown', handleKeydown);
return () => window.removeEventListener('keydown', handleKeydown);
});
function handleKeydown(e) {
if (!videos.length) return;
const idx = videos.findIndex(v => v.video_id === selectedVideo?.video_id);
if (e.key === 'j' || e.key === 'ArrowDown') {
e.preventDefault();
const next = idx < videos.length - 1 ? idx + 1 : 0;
selectedVideo = videos[next];
scrollToVideo(next);
} else if (e.key === 'k' || e.key === 'ArrowUp') {
e.preventDefault();
const prev = idx > 0 ? idx - 1 : videos.length - 1;
selectedVideo = videos[prev];
scrollToVideo(prev);
} else if (e.key === 'r' || e.key === 'm') {
e.preventDefault();
if (selectedVideo) updateStatus(selectedVideo.video_id, 'read');
} else if (e.key === 's') {
e.preventDefault();
if (selectedVideo) updateStatus(selectedVideo.video_id, 'skipped');
}
}
// Watch for tab change
$effect(() => {
if (activeTab) {
loadVideos();
}
});
onMount(() => {
loadVideos();
});
function formatDuration(seconds) {
if (!seconds) return '';
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
if (h > 0) {
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
}
return `${m}:${s.toString().padStart(2, '0')}`;
function scrollToVideo(index) {
requestAnimationFrame(() => {
const el = document.querySelector(`[data-video-index="${index}"]`);
if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
// Also scroll summary panel to top
const main = document.querySelector('main');
if (main) main.scrollTop = 0;
});
}
function formatMarkdown(text) {
if (!text) return '<p class="text-gray-400">Loading summary...</p>';
// Parse bold text **example**
let html = text.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold text-red-400">$1</strong>');
// Parse bullet points
html = html.replace(/^\s*[-*]\s+(.*)$/gm, '<li class="ml-5 list-disc mb-1 text-gray-200">$1</li>');
// Handle line breaks
if (!text) return '<p class="opacity-50 italic">No summary yet.</p>';
let html = text.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold" style="color:var(--accent)">$1</strong>');
html = html.replace(/^\s*[-*]\s+(.*)$/gm, '<li class="ml-5 list-disc mb-1" style="color:var(--text-primary)">$1</li>');
html = html.split('\n').map(line => {
if (line.trim().startsWith('<li')) return line;
if (line.trim() === '') return '<div class="h-2"></div>';
return `<p class="mb-2 leading-relaxed">${line}</p>`;
}).join('');
return html;
}
</script>
<div class="flex flex-col h-screen bg-gray-950 text-gray-100">
<!-- Top Navigation Header -->
<header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-gray-800">
<div style="background:var(--bg-primary);color:var(--text-primary);min-height:100vh">
<!-- Top bar -->
<header style="background:var(--bg-secondary);border-bottom:1px solid var(--border);" class="flex items-center justify-between px-5 py-2.5">
<div class="flex items-center space-x-3">
<span class="text-2xl font-black tracking-wider text-red-500">T YouTube</span>
<span class="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400 uppercase tracking-widest font-semibold border border-gray-700">text feed</span>
<span class="text-lg font-black tracking-wider" style="color:var(--accent)">T YouTube</span>
<span class="text-[10px] px-2 py-0.5 rounded font-semibold uppercase tracking-widest" style="background:var(--bg-tertiary);color:var(--text-muted)">text feed</span>
</div>
<div class="flex items-center space-x-4">
{#if syncMessage}
<span class="text-xs text-red-400 animate-pulse">{syncMessage}</span>
{/if}
<button
onclick={syncSubscriptions}
disabled={isSyncing}
class="flex items-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-800 disabled:text-gray-600 text-white text-sm font-semibold rounded-lg shadow-lg hover:shadow-red-900/30 transition duration-150"
>
{#if isSyncing}
<svg class="animate-spin h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Syncing...</span>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.213 6H16" />
</svg>
<span>Sync Subscriptions</span>
{/if}
<div class="flex items-center space-x-3">
<button onclick={syncSubscriptions} disabled={isSyncing}
class="px-3 py-1.5 text-xs font-bold rounded-lg transition"
style="background:var(--accent);color:white">
{isSyncing ? 'Syncing...' : 'Sync'}
</button>
<button onclick={toggleTheme}
class="text-sm px-2 py-1 rounded transition" style="color:var(--text-muted)"
title="Toggle theme">
{theme === 'dark' ? '☀' : '☾'}
</button>
</div>
</header>
<!-- Main Grid Dashboard layout -->
<div class="flex flex-1 overflow-hidden">
<!-- Left Navigation Sidebar & Video List -->
<aside class="w-80 md:w-96 flex flex-col border-r border-gray-900 bg-gray-900/40">
<!-- Tabs Selector -->
<div class="flex p-2 bg-gray-900 border-b border-gray-900">
<button
onclick={() => activeTab = 'pending'}
class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'pending' ? 'bg-red-600/10 text-red-400 border border-red-500/20' : 'text-gray-400 hover:text-gray-200'}"
>
Pending
</button>
<button
onclick={() => activeTab = 'read'}
class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'read' ? 'bg-green-600/10 text-green-400 border border-green-500/20' : 'text-gray-400 hover:text-gray-200'}"
>
Read
</button>
<button
onclick={() => activeTab = 'skipped'}
class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'skipped' ? 'bg-gray-800 text-gray-300 border border-gray-700/50' : 'text-gray-400 hover:text-gray-200'}"
>
Skipped
</button>
<div class="flex" style="min-height:calc(100vh - 44px)">
<!-- Left: video list -->
<aside style="width:280px;background:var(--bg-secondary);border-right:1px solid var(--border)" class="flex flex-col flex-shrink-0">
<div class="flex p-1.5" style="border-bottom:1px solid var(--border)">
{#each ['pending','read','skipped'] as tab}
<button onclick={() => activeTab = tab}
class="flex-1 py-1.5 text-center text-[11px] font-bold rounded uppercase transition"
style="color: {activeTab === tab ? 'var(--accent)' : 'var(--text-muted)'}">
{tab}
</button>
{/each}
</div>
<!-- Scrollable Video Cards List -->
<div class="flex-1 overflow-y-auto divide-y divide-gray-900/50">
{#if isLoading && videos.length === 0}
<div class="flex flex-col items-center justify-center h-48 space-y-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
<span class="text-sm text-gray-500">Loading videos...</span>
</div>
{:else if videos.length === 0}
<div class="flex flex-col items-center justify-center h-64 text-gray-500 space-y-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
</svg>
<span class="text-sm">No videos found.</span>
</div>
{:else}
{#each videos as video (video.video_id)}
<button
onclick={() => selectedVideo = video}
class="w-full text-left p-3.5 hover:bg-gray-900/60 focus:outline-none transition duration-150 flex items-start space-x-3.5 {selectedVideo?.video_id === video.video_id ? 'bg-gray-900 border-l-4 border-red-500 pl-2.5' : 'border-l-4 border-transparent'}"
>
<!-- Thumbnail/Duration badge -->
<div class="relative w-24 h-14 bg-gray-800 rounded overflow-hidden flex-shrink-0">
<img src={video.thumbnail_url} alt="" class="object-cover w-full h-full" />
{#if video.duration}
<span class="absolute bottom-0.5 right-0.5 bg-black/85 text-[10px] font-bold px-1 rounded text-white tracking-wider">
{formatDuration(video.duration)}
</span>
{/if}
</div>
<!-- Video metadata summary -->
<div class="flex-1 min-w-0">
<span class="block text-[11px] font-semibold text-red-500/80 truncate mb-0.5">{video.channel_name}</span>
<h3 class="text-sm font-bold text-gray-100 line-clamp-2 leading-snug">{video.title}</h3>
<span class="block text-[10px] text-gray-500 mt-1">{video.publish_date || 'Date unknown'}</span>
</div>
</button>
{/each}
{/if}
<div class="flex-1 overflow-y-auto divide-y" style="border-color:var(--border)">
{#each videos as video (video.video_id)}
{@const i = videos.indexOf(video)}
<button onclick={() => { selectedVideo = video; document.querySelector('main')?.scrollTo(0,0); }}
data-video-index={i}
class="w-full text-left p-3 transition flex items-start space-x-3"
style="border-left:2px solid {selectedVideo?.video_id === video.video_id ? 'var(--accent)' : 'transparent'};
background:{selectedVideo?.video_id === video.video_id ? 'var(--bg-tertiary)' : 'transparent'}">
<img src={video.thumbnail_url} alt="" class="w-20 h-12 rounded object-cover flex-shrink-0" style="background:var(--bg-tertiary)" />
<div class="min-w-0">
<span class="block text-[10px] font-semibold truncate" style="color:var(--accent)">{video.channel_name}</span>
<h3 class="text-xs font-bold line-clamp-2 leading-snug" style="color:var(--text-primary)">{video.title}</h3>
<span class="text-[10px] mt-0.5 block" style="color:var(--text-muted)">{video.publish_date || ''}</span>
</div>
</button>
{/each}
</div>
</aside>
<!-- Right Detailed Digest Panel -->
<main class="flex-1 flex flex-col bg-gray-950/80 overflow-y-auto">
<!-- Right: summary PRIMARY -->
<main class="flex-1 overflow-y-auto" style="background:var(--bg-primary)">
{#if selectedVideo}
<div class="p-6 md:p-8 max-w-4xl w-full mx-auto space-y-6">
<!-- Video Details Header -->
<div class="border-b border-gray-900 pb-5 space-y-3">
<span class="text-xs px-2.5 py-1 font-bold bg-gray-900 text-red-400 rounded-full border border-gray-800">
{selectedVideo.channel_name}
</span>
<h1 class="text-2xl md:text-3xl font-extrabold text-gray-100 tracking-tight leading-tight">
{selectedVideo.title}
</h1>
<div class="flex items-center space-x-4 text-xs text-gray-500">
<span>Published: <strong>{selectedVideo.publish_date || 'Unknown'}</strong></span>
{#if selectedVideo.duration}
<span>•</span>
<span>Length: <strong>{formatDuration(selectedVideo.duration)}</strong></span>
{/if}
</div>
</div>
<!-- Video Actions buttons block -->
<div class="flex flex-wrap gap-3">
{#if activeTab === 'pending'}
<button
onclick={() => updateStatus(selectedVideo.video_id, 'read')}
class="px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-bold rounded-lg shadow-lg shadow-green-950/30 transition duration-150"
>
Mark as Read
</button>
<button
onclick={() => updateStatus(selectedVideo.video_id, 'skipped')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Skip Video
</button>
{:else if activeTab === 'read'}
<button
onclick={() => updateStatus(selectedVideo.video_id, 'pending')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Revert to Pending
</button>
<button
onclick={() => updateStatus(selectedVideo.video_id, 'skipped')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Move to Skipped
</button>
{:else if activeTab === 'skipped'}
<button
onclick={() => updateStatus(selectedVideo.video_id, 'pending')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Revert to Pending
</button>
<button
onclick={() => updateStatus(selectedVideo.video_id, 'read')}
class="px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-bold rounded-lg transition duration-150"
>
Move to Read
</button>
{/if}
<a
href={selectedVideo.url}
target="_blank"
rel="noopener noreferrer"
class="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-lg flex items-center space-x-2 transition duration-150"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
<span>Watch on YouTube</span>
</a>
</div>
<!-- Video Visual Block -->
<div class="relative w-full aspect-video rounded-xl overflow-hidden bg-gray-900 border border-gray-800 shadow-2xl">
<img src={selectedVideo.thumbnail_url} alt="" class="object-cover w-full h-full opacity-40 blur-sm" />
<div class="absolute inset-0 flex flex-col items-center justify-center p-4">
<div class="relative w-36 h-20 rounded shadow-md overflow-hidden mb-3 border border-gray-700">
<img src={selectedVideo.thumbnail_url} alt="" class="object-cover w-full h-full" />
</div>
<a
href={selectedVideo.url}
target="_blank"
rel="noopener noreferrer"
class="px-4 py-2 bg-red-600/90 hover:bg-red-600 text-white text-xs font-extrabold uppercase tracking-wider rounded border border-red-500 shadow transition duration-150"
>
Play original video
</a>
</div>
</div>
<!-- Digest Content Block -->
<div class="bg-gray-900/60 rounded-xl border border-gray-800/80 p-6 md:p-8 space-y-6">
<div class="flex items-center justify-between border-b border-gray-800 pb-3">
<h2 class="text-lg font-black tracking-wide text-gray-200 uppercase">Video Digest Highlight</h2>
<div class="p-6 max-w-3xl mx-auto space-y-4">
<!-- ★ AI Digest -->
<div class="rounded-xl border p-5 space-y-3 shadow-lg" style="background:var(--card-bg);border-color:var(--accent);border-left-width:3px">
<div class="flex items-center justify-between pb-2" style="border-bottom:1px solid var(--border)">
<h2 class="text-xs font-black tracking-widest uppercase" style="color:var(--accent)">AI Digest</h2>
{#if !selectedVideo.summary || selectedVideo.summary.includes("Error") || selectedVideo.summary.includes("Could not")}
<button
onclick={() => generateSummary(selectedVideo.video_id)}
class="text-xs px-2.5 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 font-semibold rounded border border-gray-700 transition"
>
Generate Summary
<button onclick={() => generateSummary(selectedVideo.video_id)}
class="text-[11px] px-3 py-1 font-semibold rounded border transition" style="color:var(--accent);border-color:var(--accent)">
Generate
</button>
{/if}
</div>
<div class="prose prose-invert max-w-none text-gray-300 text-base leading-relaxed">
<div class="prose max-w-none text-sm leading-relaxed" style="color:var(--text-primary)">
{@html formatMarkdown(selectedVideo.summary)}
</div>
</div>
<!-- Full Transcript Accordion -->
{#if selectedVideo.transcript && selectedVideo.transcript !== "No transcript available"}
<details class="group bg-gray-900/20 border border-gray-900 rounded-lg overflow-hidden transition">
<summary class="flex justify-between items-center p-4 font-bold text-sm text-gray-400 hover:text-gray-200 hover:bg-gray-900/30 cursor-pointer select-none">
<span>View Full Video Transcript</span>
<span class="transition group-open:rotate-180">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</summary>
<div class="p-5 border-t border-gray-900 bg-gray-950/40 text-sm text-gray-400 leading-relaxed max-h-96 overflow-y-auto font-mono whitespace-pre-line">
{selectedVideo.transcript}
<!-- Video info -->
<div class="flex items-start space-x-3">
<img src={selectedVideo.thumbnail_url} alt="" class="w-32 h-18 rounded object-cover flex-shrink-0" style="background:var(--bg-tertiary)" />
<div class="min-w-0 space-y-1.5">
<span class="text-[10px] px-2 py-0.5 font-bold rounded-full" style="color:var(--accent);background:var(--bg-tertiary)">{selectedVideo.channel_name}</span>
<h1 class="text-sm font-bold leading-snug" style="color:var(--text-primary)">{selectedVideo.title}</h1>
<div class="flex space-x-2">
<button onclick={() => updateStatus(selectedVideo.video_id, 'read')} class="text-[10px] px-2.5 py-1 text-white font-bold rounded transition" style="background:var(--accent)">Read</button>
<button onclick={() => updateStatus(selectedVideo.video_id, 'skipped')} class="text-[10px] px-2.5 py-1 font-bold rounded border transition" style="color:var(--text-secondary);border-color:var(--border)">Skip</button>
<a href={selectedVideo.url} target="_blank" rel="noopener noreferrer" class="text-[10px] px-2.5 py-1 text-white font-bold rounded transition" style="background:var(--accent)">▶ Watch</a>
</div>
</details>
{/if}
</div>
</div>
</div>
{:else}
<div class="flex-1 flex flex-col items-center justify-center text-gray-500 p-8 space-y-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<h2 class="text-lg font-bold text-gray-400">No Video Selected</h2>
<p class="text-sm text-gray-600 max-w-xs text-center">Click a video from the sidebar list to read its digest highlights.</p>
<div class="flex-1 flex items-center justify-center" style="color:var(--text-muted)">
<p>Select a video to read its summary</p>
</div>
{/if}
</main>