good startHEAD main

author: Thomas Grothe <grothe.tr@gmail.com> 2026-03-07 23:32:05 -0500
committer: Thomas Grothe <grothe.tr@gmail.com> 2026-03-07 23:32:05 -0500
commit: dbd1386a43ae9e7013809be2e0bd0e1c049059fc (patch)
tree: 22588cb21dfa1cc941e13031e73cb85cdfb7f402 /src
25 files changed, 3249 insertions, 0 deletions
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..dd23a9e
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,159 @@
+:root {
+  --bg-primary: #0f0f0f;
+  --bg-secondary: #1a1a1a;
+  --bg-hover: #252525;
+  --text-primary: #f1f1f1;
+  --text-secondary: #aaa;
+  --text-muted: #717171;
+  --border-color: #303030;
+  --accent-color: #3ea6ff;
+  --error-color: #ff4444;
+  --max-width: 1400px;
+}
+
+[data-theme="light"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9f9f9;
+  --bg-hover: #f0f0f0;
+  --text-primary: #0f0f0f;
+  --text-secondary: #606060;
+  --text-muted: #909090;
+  --border-color: #e5e5e5;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+}
+
+button {
+  font-family: inherit;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: var(--text-primary);
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 0;
+  color: var(--text-muted);
+}
+
+.loading::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  margin-left: 0.75rem;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--accent-color);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.error {
+  padding: 2rem;
+  text-align: center;
+  color: var(--error-color);
+}
+
+.empty {
+  padding: 4rem 2rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.btn:hover {
+  opacity: 0.9;
+}
+
+.btn-primary {
+  background: var(--accent-color);
+  color: #fff;
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.btn-danger {
+  background: var(--error-color);
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .video-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .video-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..e6bfd9f
--- /dev/null
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="@sveltejs/kit" />
+
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..84ffad1
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/src/lib/api/youtube.ts b/src/lib/api/youtube.ts
new file mode 100644
index 0000000..8ade3c5
--- /dev/null
+++ b/src/lib/api/youtube.ts
@@ -0,0 +1,253 @@
+export interface VideoThumbnail {
+  url: string;
+  width?: number;
+  height?: number;
+}
+
+export interface VideoInfo {
+  videoId: string;
+  title: string;
+  author: string;
+  authorId: string;
+  videoThumbnails: VideoThumbnail[];
+  description: string;
+  viewCount: number;
+  publishedText: string;
+  lengthSeconds: number;
+}
+
+export interface VideoFormat {
+  formatId: string;
+  url: string;
+  ext: string;
+  resolution?: string;
+  height?: number;
+  width?: number;
+  qualityLabel?: string;
+}
+
+export interface VideoDetails extends VideoInfo {
+  likeCount?: number;
+  formats: VideoFormat[];
+}
+
+export interface ChannelInfo {
+  author: string;
+  authorId: string;
+  authorThumbnails: VideoThumbnail[];
+  subCount: number;
+  description: string;
+  videos: VideoInfo[];
+}
+
+interface YtdlpSearchResult {
+  id: string;
+  title: string;
+  channel: string;
+  channel_id: string;
+  thumbnail: string;
+  thumbnails: { url: string; width?: number; height?: number }[];
+  duration: number;
+  view_count: number;
+  upload_date: string;
+}
+
+interface YtdlpVideo {
+  id: string;
+  title: string;
+  description: string;
+  channel: string;
+  channel_id: string;
+  thumbnail: string;
+  thumbnails: { url: string; width?: number; height?: number }[];
+  duration: number;
+  view_count: number;
+  upload_date: string;
+  like_count?: number;
+  formats: {
+    format_id: string;
+    url: string;
+    ext: string;
+    resolution?: string;
+    height?: number;
+    width?: number;
+    format_note?: string;
+  }[];
+}
+
+interface YtdlpChannel {
+  id: string;
+  channel: string;
+  channel_id: string;
+  description: string;
+  channel_follower_count: number;
+  thumbnails: { url: string; width?: number; height?: number }[];
+  entries?: YtdlpSearchResult[];
+}
+
+function formatUploadDate(dateStr: string): string {
+  if (!dateStr || dateStr.length !== 8) return '';
+  const year = dateStr.slice(0, 4);
+  const month = dateStr.slice(4, 6);
+  const day = dateStr.slice(6, 8);
+  const date = new Date(`${year}-${month}-${day}`);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+  if (days === 0) return 'Today';
+  if (days === 1) return 'Yesterday';
+  if (days < 7) return `${days} days ago`;
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+  if (days < 365) return `${Math.floor(days / 30)} months ago`;
+  return `${Math.floor(days / 365)} years ago`;
+}
+
+function transformSearchResult(item: YtdlpSearchResult): VideoInfo {
+  return {
+    videoId: item.id,
+    title: item.title,
+    author: item.channel,
+    authorId: item.channel_id,
+    videoThumbnails: item.thumbnails?.length
+      ? item.thumbnails
+      : [{ url: item.thumbnail }],
+    description: '',
+    viewCount: item.view_count || 0,
+    publishedText: formatUploadDate(item.upload_date),
+    lengthSeconds: item.duration || 0
+  };
+}
+
+function transformVideo(item: YtdlpVideo): VideoDetails {
+  return {
+    videoId: item.id,
+    title: item.title,
+    author: item.channel,
+    authorId: item.channel_id,
+    videoThumbnails: item.thumbnails?.length
+      ? item.thumbnails
+      : [{ url: item.thumbnail }],
+    description: item.description || '',
+    viewCount: item.view_count || 0,
+    publishedText: formatUploadDate(item.upload_date),
+    lengthSeconds: item.duration || 0,
+    likeCount: item.like_count,
+    formats: item.formats.map(f => ({
+      formatId: f.format_id,
+      url: f.url,
+      ext: f.ext,
+      resolution: f.resolution,
+      height: f.height,
+      width: f.width,
+      qualityLabel: f.format_note || (f.height ? `${f.height}p` : undefined)
+    }))
+  };
+}
+
+function transformChannel(item: YtdlpChannel): ChannelInfo {
+  return {
+    author: item.channel,
+    authorId: item.channel_id,
+    authorThumbnails: item.thumbnails || [],
+    subCount: item.channel_follower_count || 0,
+    description: item.description || '',
+    videos: (item.entries || []).map(transformSearchResult)
+  };
+}
+
+export async function search(query: string): Promise<VideoInfo[]> {
+  const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+  if (!response.ok) {
+    throw new Error('Search failed');
+  }
+  const results: YtdlpSearchResult[] = await response.json();
+  return results.map(transformSearchResult);
+}
+
+export async function getVideo(videoId: string): Promise<VideoDetails> {
+  const response = await fetch(`/api/video/${videoId}`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch video');
+  }
+  const video: YtdlpVideo = await response.json();
+  return transformVideo(video);
+}
+
+export async function getChannel(channelId: string): Promise<ChannelInfo> {
+  const response = await fetch(`/api/channel/${encodeURIComponent(channelId)}`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch channel');
+  }
+  const channel: YtdlpChannel = await response.json();
+  return transformChannel(channel);
+}
+
+export async function getTrending(): Promise<VideoInfo[]> {
+  const response = await fetch('/api/trending');
+  if (!response.ok) {
+    throw new Error('Failed to fetch trending');
+  }
+  const results: YtdlpSearchResult[] = await response.json();
+  return results.map(transformSearchResult);
+}
+
+export async function getRelatedVideos(videoId: string): Promise<VideoInfo[]> {
+  const response = await fetch(`/api/related/${videoId}`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch related videos');
+  }
+  const results: YtdlpSearchResult[] = await response.json();
+  return results.map(transformSearchResult);
+}
+
+export interface ImportedPlaylist {
+  id: string;
+  title: string;
+  channel: string;
+  channelId: string;
+  videos: VideoInfo[];
+}
+
+export async function importPlaylist(playlistUrl: string): Promise<ImportedPlaylist> {
+  const response = await fetch(`/api/playlist?url=${encodeURIComponent(playlistUrl)}`);
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to import playlist');
+  }
+  const data = await response.json();
+  return {
+    id: data.id,
+    title: data.title,
+    channel: data.channel,
+    channelId: data.channel_id,
+    videos: data.entries.map(transformSearchResult)
+  };
+}
+
+export function formatDuration(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function formatViews(views: number): string {
+  if (views >= 1000000) {
+    return `${(views / 1000000).toFixed(1)}M views`;
+  }
+  if (views >= 1000) {
+    return `${(views / 1000).toFixed(1)}K views`;
+  }
+  return `${views} views`;
+}
+
+export function getBestThumbnail(thumbnails: VideoThumbnail[]): string {
+  if (!thumbnails || thumbnails.length === 0) return '';
+  const sorted = [...thumbnails].sort((a, b) => (b.width || 0) - (a.width || 0));
+  return sorted[0]?.url || '';
+}
diff --git a/src/lib/components/ChannelCard.svelte b/src/lib/components/ChannelCard.svelte
new file mode 100644
index 0000000..8747efa
--- /dev/null
+++ b/src/lib/components/ChannelCard.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+  import type { VideoThumbnail } from '$lib/api/youtube';
+  import { subscriptions } from '$lib/stores/subscriptions';
+
+  interface Props {
+    channelId: string;
+    channelName: string;
+    thumbnails: VideoThumbnail[];
+    subCount?: number;
+    videoCount?: number;
+    showSubscribeButton?: boolean;
+  }
+
+  let {
+    channelId,
+    channelName,
+    thumbnails,
+    subCount,
+    videoCount,
+    showSubscribeButton = true
+  }: Props = $props();
+
+  const thumbnail = $derived(thumbnails[0]?.url || '');
+
+  const isSubscribed = $derived(subscriptions.isSubscribed($subscriptions, channelId));
+
+  function formatSubCount(count: number | undefined): string {
+    if (!count) return '';
+    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M subscribers`;
+    if (count >= 1000) return `${(count / 1000).toFixed(1)}K subscribers`;
+    return `${count} subscribers`;
+  }
+
+  function handleSubscribe(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isSubscribed) {
+      subscriptions.remove(channelId);
+    } else {
+      subscriptions.add(channelId, channelName, thumbnails);
+    }
+  }
+</script>
+
+<a href="/channel/{channelId}" class="channel-card">
+  <div class="thumbnail">
+    {#if thumbnail}
+      <img src={thumbnail} alt={channelName} loading="lazy" />
+    {:else}
+      <div class="placeholder">{channelName[0]}</div>
+    {/if}
+  </div>
+  <div class="info">
+    <h3 class="name">{channelName}</h3>
+    <div class="meta">
+      {#if subCount}
+        <span>{formatSubCount(subCount)}</span>
+      {/if}
+      {#if videoCount}
+        <span class="separator">•</span>
+        <span>{videoCount} videos</span>
+      {/if}
+    </div>
+  </div>
+  {#if showSubscribeButton}
+    <button
+      class="subscribe-btn"
+      class:subscribed={isSubscribed}
+      onclick={handleSubscribe}
+    >
+      {isSubscribed ? 'Subscribed' : 'Subscribe'}
+    </button>
+  {/if}
+</a>
+
+<style>
+  .channel-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 8px;
+    transition: background 0.15s ease;
+  }
+
+  .channel-card:hover {
+    background: var(--bg-hover);
+  }
+
+  .thumbnail {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--bg-secondary);
+    flex-shrink: 0;
+  }
+
+  .thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+  }
+
+  .info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .name {
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0 0 0.25rem;
+    color: var(--text-primary);
+  }
+
+  .meta {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+  }
+
+  .separator {
+    margin: 0 0.25rem;
+  }
+
+  .subscribe-btn {
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    border: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--accent-color);
+    color: #fff;
+    transition: opacity 0.15s ease;
+  }
+
+  .subscribe-btn:hover {
+    opacity: 0.9;
+  }
+
+  .subscribe-btn.subscribed {
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+  }
+</style>
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
new file mode 100644
index 0000000..d81ba14
--- /dev/null
+++ b/src/lib/components/SearchBar.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+
+  let query = $state('');
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    if (query.trim()) {
+      goto(`/search?q=${encodeURIComponent(query.trim())}`);
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      query = '';
+    }
+  }
+</script>
+
+<form class="search-bar" onsubmit={handleSubmit}>
+  <input
+    type="text"
+    bind:value={query}
+    placeholder="Search videos..."
+    onkeydown={handleKeydown}
+  />
+  <button type="submit" aria-label="Search">
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    </svg>
+  </button>
+</form>
+
+<style>
+  .search-bar {
+    display: flex;
+    max-width: 600px;
+    width: 100%;
+  }
+
+  input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    border: 1px solid var(--border-color);
+    border-right: none;
+    border-radius: 4px 0 0 4px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    outline: none;
+  }
+
+  input:focus {
+    border-color: var(--accent-color);
+  }
+
+  input::placeholder {
+    color: var(--text-muted);
+  }
+
+  button {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0 4px 4px 0;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  button:hover {
+    background: var(--bg-hover);
+  }
+</style>
diff --git a/src/lib/components/VideoCard.svelte b/src/lib/components/VideoCard.svelte
new file mode 100644
index 0000000..61bf975
--- /dev/null
+++ b/src/lib/components/VideoCard.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { formatDuration, formatViews, getBestThumbnail, type VideoThumbnail } from '$lib/api/youtube';
+
+  interface Props {
+    videoId: string;
+    title: string;
+    author: string;
+    authorId: string;
+    thumbnails: VideoThumbnail[];
+    viewCount: number;
+    publishedText: string;
+    lengthSeconds: number;
+  }
+
+  let {
+    videoId,
+    title,
+    author,
+    authorId,
+    thumbnails,
+    viewCount,
+    publishedText,
+    lengthSeconds
+  }: Props = $props();
+
+  const thumbnail = $derived(getBestThumbnail(thumbnails));
+  const duration = $derived(formatDuration(lengthSeconds));
+  const views = $derived(formatViews(viewCount));
+</script>
+
+<a href="/watch/{videoId}" class="video-card">
+  <div class="thumbnail">
+    <img src={thumbnail} alt={title} loading="lazy" />
+    <span class="duration">{duration}</span>
+  </div>
+  <div class="info">
+    <h3 class="title">{title}</h3>
+    <span
+      class="author"
+      role="link"
+      tabindex="0"
+      onclick={(e) => { e.preventDefault(); e.stopPropagation(); window.location.href = `/channel/${authorId}`; }}
+      onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); window.location.href = `/channel/${authorId}`; } }}
+    >
+      {author}
+    </span>
+    <div class="meta">
+      <span>{views}</span>
+      <span class="separator">•</span>
+      <span>{publishedText}</span>
+    </div>
+  </div>
+</a>
+
+<style>
+  .video-card {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.15s ease;
+  }
+
+  .video-card:hover {
+    transform: translateY(-2px);
+  }
+
+  .thumbnail {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .duration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+
+  .info {
+    padding: 0.75rem 0;
+  }
+
+  .title {
+    font-size: 0.95rem;
+    font-weight: 500;
+    line-height: 1.3;
+    margin: 0 0 0.5rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: var(--text-primary);
+  }
+
+  .author {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    display: block;
+    margin-bottom: 0.25rem;
+    cursor: pointer;
+  }
+
+  .author:hover {
+    color: var(--text-primary);
+  }
+
+  .meta {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+
+  .separator {
+    margin: 0 0.25rem;
+  }
+</style>
diff --git a/src/lib/components/VideoPlayer.svelte b/src/lib/components/VideoPlayer.svelte
new file mode 100644
index 0000000..0829c8b
--- /dev/null
+++ b/src/lib/components/VideoPlayer.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+  import type { VideoFormat } from '$lib/api/youtube';
+
+  interface Props {
+    formats: VideoFormat[];
+    title: string;
+  }
+
+  let { formats, title }: Props = $props();
+
+  let videoElement: HTMLVideoElement | undefined = $state();
+  let currentQuality = $state('');
+
+  const sortedFormats = $derived(
+    [...formats]
+      .filter(f => f.url && f.height)
+      .sort((a, b) => (b.height || 0) - (a.height || 0))
+  );
+
+  const selectedFormat = $derived(
+    currentQuality
+      ? sortedFormats.find(f => f.qualityLabel === currentQuality) || sortedFormats[0]
+      : sortedFormats[0]
+  );
+
+  function handleQualityChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    const newQuality = select.value;
+    const currentTime = videoElement?.currentTime || 0;
+    const wasPlaying = videoElement && !videoElement.paused;
+
+    currentQuality = newQuality;
+
+    if (videoElement) {
+      videoElement.load();
+      videoElement.currentTime = currentTime;
+      if (wasPlaying) {
+        videoElement.play();
+      }
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!videoElement) return;
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+    switch (e.key) {
+      case ' ':
+      case 'k':
+        e.preventDefault();
+        if (videoElement.paused) {
+          videoElement.play();
+        } else {
+          videoElement.pause();
+        }
+        break;
+      case 'f':
+        e.preventDefault();
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        } else {
+          videoElement.requestFullscreen();
+        }
+        break;
+      case 'm':
+        e.preventDefault();
+        videoElement.muted = !videoElement.muted;
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        videoElement.currentTime -= 5;
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        videoElement.currentTime += 5;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        videoElement.volume = Math.min(1, videoElement.volume + 0.1);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        videoElement.volume = Math.max(0, videoElement.volume - 0.1);
+        break;
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9':
+        e.preventDefault();
+        videoElement.currentTime = (parseInt(e.key) / 10) * videoElement.duration;
+        break;
+    }
+  }
+
+  function getMimeType(ext: string): string {
+    const types: Record<string, string> = {
+      mp4: 'video/mp4',
+      webm: 'video/webm',
+      mkv: 'video/x-matroska'
+    };
+    return types[ext] || 'video/mp4';
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="player-container">
+  {#if selectedFormat}
+    <video
+      bind:this={videoElement}
+      controls
+      autoplay
+      {title}
+    >
+      <source src={selectedFormat.url} type={getMimeType(selectedFormat.ext)} />
+      Your browser does not support the video tag.
+    </video>
+  {:else}
+    <div class="no-video">
+      <p>No playable video format found</p>
+    </div>
+  {/if}
+
+  {#if sortedFormats.length > 1}
+    <div class="quality-selector">
+      <label for="quality">Quality:</label>
+      <select id="quality" onchange={handleQualityChange} value={selectedFormat?.qualityLabel}>
+        {#each sortedFormats as format}
+          <option value={format.qualityLabel}>{format.qualityLabel || format.height + 'p'}</option>
+        {/each}
+      </select>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .player-container {
+    width: 100%;
+    background: #000;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  video {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    display: block;
+  }
+
+  .no-video {
+    aspect-ratio: 16 / 9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+  }
+
+  .quality-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: var(--bg-secondary);
+  }
+
+  .quality-selector label {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+  }
+
+  .quality-selector select {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.9rem;
+  }
+</style>
diff --git a/src/lib/server/ytdlp.ts b/src/lib/server/ytdlp.ts
new file mode 100644
index 0000000..2f6f47e
--- /dev/null
+++ b/src/lib/server/ytdlp.ts
@@ -0,0 +1,329 @@
+import { spawn } from 'child_process';
+
+export interface YtdlpVideo {
+  id: string;
+  title: string;
+  description: string;
+  channel: string;
+  channel_id: string;
+  channel_url: string;
+  thumbnail: string;
+  thumbnails: { url: string; width?: number; height?: number }[];
+  duration: number;
+  view_count: number;
+  upload_date: string;
+  like_count?: number;
+  formats: YtdlpFormat[];
+}
+
+export interface YtdlpFormat {
+  format_id: string;
+  url: string;
+  ext: string;
+  resolution?: string;
+  height?: number;
+  width?: number;
+  vcodec?: string;
+  acodec?: string;
+  format_note?: string;
+}
+
+export interface YtdlpSearchResult {
+  id: string;
+  title: string;
+  channel: string;
+  channel_id: string;
+  channel_url: string;
+  thumbnail: string;
+  thumbnails: { url: string; width?: number; height?: number }[];
+  duration: number;
+  view_count: number;
+  upload_date: string;
+}
+
+export interface YtdlpChannel {
+  id: string;
+  channel: string;
+  channel_id: string;
+  description: string;
+  channel_follower_count: number;
+  thumbnails: { url: string; width?: number; height?: number }[];
+  entries?: YtdlpSearchResult[];
+}
+
+function runYtdlp(args: string[]): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const proc = spawn('yt-dlp', args);
+    let stdout = '';
+    let stderr = '';
+
+    proc.stdout.on('data', (data: Buffer) => {
+      stdout += data.toString();
+    });
+
+    proc.stderr.on('data', (data: Buffer) => {
+      stderr += data.toString();
+    });
+
+    proc.on('close', (code: number | null) => {
+      if (code === 0) {
+        resolve(stdout);
+      } else {
+        reject(new Error(stderr || `yt-dlp exited with code ${code}`));
+      }
+    });
+
+    proc.on('error', (err: Error) => {
+      reject(err);
+    });
+  });
+}
+
+export async function search(query: string, limit = 20): Promise<YtdlpSearchResult[]> {
+  const output = await runYtdlp([
+    `ytsearch${limit}:${query}`,
+    '--dump-json',
+    '--flat-playlist',
+    '--no-warnings',
+    '--ignore-errors'
+  ]);
+
+  const results: YtdlpSearchResult[] = [];
+  for (const line of output.trim().split('\n')) {
+    if (!line) continue;
+    try {
+      const item = JSON.parse(line);
+      if (item.duration && item.duration >= 60) {
+        results.push({
+          id: item.id,
+          title: item.title,
+          channel: item.channel || item.uploader || '',
+          channel_id: item.channel_id || item.uploader_id || '',
+          channel_url: item.channel_url || item.uploader_url || '',
+          thumbnail: item.thumbnail || item.thumbnails?.[0]?.url || '',
+          thumbnails: item.thumbnails || [],
+          duration: item.duration || 0,
+          view_count: item.view_count || 0,
+          upload_date: item.upload_date || ''
+        });
+      }
+    } catch {
+      // Skip invalid JSON lines
+    }
+  }
+
+  return results;
+}
+
+export async function getVideo(videoId: string): Promise<YtdlpVideo> {
+  const output = await runYtdlp([
+    `https://www.youtube.com/watch?v=${videoId}`,
+    '--dump-json',
+    '--no-warnings'
+  ]);
+
+  const data = JSON.parse(output);
+  return {
+    id: data.id,
+    title: data.title,
+    description: data.description || '',
+    channel: data.channel || data.uploader || '',
+    channel_id: data.channel_id || data.uploader_id || '',
+    channel_url: data.channel_url || data.uploader_url || '',
+    thumbnail: data.thumbnail || data.thumbnails?.[0]?.url || '',
+    thumbnails: data.thumbnails || [],
+    duration: data.duration || 0,
+    view_count: data.view_count || 0,
+    upload_date: data.upload_date || '',
+    like_count: data.like_count,
+    formats: (data.formats || []).filter((f: YtdlpFormat) =>
+      f.vcodec !== 'none' && f.acodec !== 'none' && f.url
+    ).map((f: YtdlpFormat) => ({
+      format_id: f.format_id,
+      url: f.url,
+      ext: f.ext,
+      resolution: f.resolution,
+      height: f.height,
+      width: f.width,
+      vcodec: f.vcodec,
+      acodec: f.acodec,
+      format_note: f.format_note
+    }))
+  };
+}
+
+export async function getChannel(channelId: string): Promise<YtdlpChannel> {
+  const url = channelId.startsWith('@')
+    ? `https://www.youtube.com/${channelId}`
+    : `https://www.youtube.com/channel/${channelId}`;
+
+  const output = await runYtdlp([
+    `${url}/videos`,
+    '--dump-json',
+    '--flat-playlist',
+    '--playlist-end', '30',
+    '--no-warnings',
+    '--ignore-errors'
+  ]);
+
+  const lines = output.trim().split('\n').filter(Boolean);
+  const entries: YtdlpSearchResult[] = [];
+  let channelInfo: Partial<YtdlpChannel> = {};
+
+  for (const line of lines) {
+    try {
+      const item = JSON.parse(line);
+      if (item.channel_id || item.uploader_id) {
+        channelInfo = {
+          id: item.channel_id || item.uploader_id,
+          channel: item.channel || item.uploader || '',
+          channel_id: item.channel_id || item.uploader_id || '',
+          description: item.description || '',
+          channel_follower_count: item.channel_follower_count || 0,
+          thumbnails: item.thumbnails || []
+        };
+      }
+      if (item.id && item.title && item.duration && item.duration >= 60) {
+        entries.push({
+          id: item.id,
+          title: item.title,
+          channel: item.channel || item.uploader || '',
+          channel_id: item.channel_id || item.uploader_id || '',
+          channel_url: item.channel_url || item.uploader_url || '',
+          thumbnail: item.thumbnail || item.thumbnails?.[0]?.url || '',
+          thumbnails: item.thumbnails || [],
+          duration: item.duration || 0,
+          view_count: item.view_count || 0,
+          upload_date: item.upload_date || ''
+        });
+      }
+    } catch {
+      // Skip invalid JSON
+    }
+  }
+
+  return {
+    id: channelInfo.channel_id || channelId,
+    channel: channelInfo.channel || '',
+    channel_id: channelInfo.channel_id || channelId,
+    description: channelInfo.description || '',
+    channel_follower_count: channelInfo.channel_follower_count || 0,
+    thumbnails: channelInfo.thumbnails || [],
+    entries
+  };
+}
+
+export interface YtdlpPlaylist {
+  id: string;
+  title: string;
+  channel: string;
+  channel_id: string;
+  entries: YtdlpSearchResult[];
+}
+
+export async function getRelatedVideos(title: string, excludeId: string): Promise<YtdlpSearchResult[]> {
+  // Extract key words from title for search
+  const keywords = title
+    .replace(/[^\w\s]/g, '')
+    .split(/\s+/)
+    .filter(w => w.length > 3)
+    .slice(0, 5)
+    .join(' ');
+
+  if (!keywords) return [];
+
+  const results = await search(keywords, 15);
+  return results.filter(r => r.id !== excludeId).slice(0, 10);
+}
+
+export async function getPlaylist(playlistUrl: string): Promise<YtdlpPlaylist> {
+  const output = await runYtdlp([
+    playlistUrl,
+    '--dump-json',
+    '--flat-playlist',
+    '--no-warnings',
+    '--ignore-errors'
+  ]);
+
+  const lines = output.trim().split('\n').filter(Boolean);
+  const entries: YtdlpSearchResult[] = [];
+  let playlistInfo: Partial<YtdlpPlaylist> = {};
+
+  for (const line of lines) {
+    try {
+      const item = JSON.parse(line);
+
+      // Capture playlist metadata from first item
+      if (!playlistInfo.id && item.playlist_id) {
+        playlistInfo = {
+          id: item.playlist_id,
+          title: item.playlist_title || item.playlist || 'Imported Playlist',
+          channel: item.playlist_uploader || item.channel || item.uploader || '',
+          channel_id: item.playlist_uploader_id || item.channel_id || item.uploader_id || ''
+        };
+      }
+
+      if (item.id && item.title) {
+        entries.push({
+          id: item.id,
+          title: item.title,
+          channel: item.channel || item.uploader || '',
+          channel_id: item.channel_id || item.uploader_id || '',
+          channel_url: item.channel_url || item.uploader_url || '',
+          thumbnail: item.thumbnail || item.thumbnails?.[0]?.url || `https://i.ytimg.com/vi/${item.id}/hqdefault.jpg`,
+          thumbnails: item.thumbnails || [],
+          duration: item.duration || 0,
+          view_count: item.view_count || 0,
+          upload_date: item.upload_date || ''
+        });
+      }
+    } catch {
+      // Skip invalid JSON
+    }
+  }
+
+  return {
+    id: playlistInfo.id || '',
+    title: playlistInfo.title || 'Imported Playlist',
+    channel: playlistInfo.channel || '',
+    channel_id: playlistInfo.channel_id || '',
+    entries
+  };
+}
+
+export async function getTrending(): Promise<YtdlpSearchResult[]> {
+  const output = await runYtdlp([
+    'https://www.youtube.com/feed/trending',
+    '--dump-json',
+    '--flat-playlist',
+    '--playlist-end', '30',
+    '--no-warnings',
+    '--ignore-errors'
+  ]);
+
+  const results: YtdlpSearchResult[] = [];
+  for (const line of output.trim().split('\n')) {
+    if (!line) continue;
+    try {
+      const item = JSON.parse(line);
+      if (item.duration && item.duration >= 60) {
+        results.push({
+          id: item.id,
+          title: item.title,
+          channel: item.channel || item.uploader || '',
+          channel_id: item.channel_id || item.uploader_id || '',
+          channel_url: item.channel_url || item.uploader_url || '',
+          thumbnail: item.thumbnail || item.thumbnails?.[0]?.url || '',
+          thumbnails: item.thumbnails || [],
+          duration: item.duration || 0,
+          view_count: item.view_count || 0,
+          upload_date: item.upload_date || ''
+        });
+      }
+    } catch {
+      // Skip invalid JSON
+    }
+  }
+
+  return results;
+}
diff --git a/src/lib/stores/playlists.ts b/src/lib/stores/playlists.ts
new file mode 100644
index 0000000..ee516dc
--- /dev/null
+++ b/src/lib/stores/playlists.ts
@@ -0,0 +1,123 @@
+import { writable } from 'svelte/store';
+import { get, set } from 'idb-keyval';
+
+export interface PlaylistVideo {
+  videoId: string;
+  title: string;
+  author: string;
+  authorId: string;
+  thumbnail: string;
+  lengthSeconds: number;
+}
+
+export interface Playlist {
+  id: string;
+  name: string;
+  videos: PlaylistVideo[];
+  createdAt: number;
+  updatedAt: number;
+}
+
+const STORAGE_KEY = 'actualyt-playlists';
+
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2);
+}
+
+function createPlaylistStore() {
+  const { subscribe, set: setStore, update } = writable<Playlist[]>([]);
+  let initialized = false;
+
+  async function init() {
+    if (initialized) return;
+    try {
+      const stored = await get<Playlist[]>(STORAGE_KEY);
+      if (stored) {
+        setStore(stored);
+      }
+      initialized = true;
+    } catch (e) {
+      console.error('Failed to load playlists:', e);
+    }
+  }
+
+  async function persist(playlists: Playlist[]) {
+    try {
+      await set(STORAGE_KEY, playlists);
+    } catch (e) {
+      console.error('Failed to save playlists:', e);
+    }
+  }
+
+  return {
+    subscribe,
+    init,
+    create: async (name: string): Promise<string> => {
+      const id = generateId();
+      const now = Date.now();
+      const newPlaylist: Playlist = {
+        id,
+        name,
+        videos: [],
+        createdAt: now,
+        updatedAt: now
+      };
+      update(playlists => {
+        const newPlaylists = [...playlists, newPlaylist];
+        persist(newPlaylists);
+        return newPlaylists;
+      });
+      return id;
+    },
+    delete: async (id: string) => {
+      update(playlists => {
+        const newPlaylists = playlists.filter(p => p.id !== id);
+        persist(newPlaylists);
+        return newPlaylists;
+      });
+    },
+    rename: async (id: string, name: string) => {
+      update(playlists => {
+        const newPlaylists = playlists.map(p =>
+          p.id === id ? { ...p, name, updatedAt: Date.now() } : p
+        );
+        persist(newPlaylists);
+        return newPlaylists;
+      });
+    },
+    addVideo: async (playlistId: string, video: PlaylistVideo) => {
+      update(playlists => {
+        const newPlaylists = playlists.map(p => {
+          if (p.id !== playlistId) return p;
+          if (p.videos.some(v => v.videoId === video.videoId)) return p;
+          return {
+            ...p,
+            videos: [...p.videos, video],
+            updatedAt: Date.now()
+          };
+        });
+        persist(newPlaylists);
+        return newPlaylists;
+      });
+    },
+    removeVideo: async (playlistId: string, videoId: string) => {
+      update(playlists => {
+        const newPlaylists = playlists.map(p => {
+          if (p.id !== playlistId) return p;
+          return {
+            ...p,
+            videos: p.videos.filter(v => v.videoId !== videoId),
+            updatedAt: Date.now()
+          };
+        });
+        persist(newPlaylists);
+        return newPlaylists;
+      });
+    },
+    getById: (playlists: Playlist[], id: string): Playlist | undefined => {
+      return playlists.find(p => p.id === id);
+    }
+  };
+}
+
+export const playlists = createPlaylistStore();
diff --git a/src/lib/stores/subscriptions.ts b/src/lib/stores/subscriptions.ts
new file mode 100644
index 0000000..91f3d36
--- /dev/null
+++ b/src/lib/stores/subscriptions.ts
@@ -0,0 +1,65 @@
+import { writable } from 'svelte/store';
+import { get, set } from 'idb-keyval';
+import type { VideoThumbnail } from '$lib/api/youtube';
+
+export interface Subscription {
+  channelId: string;
+  channelName: string;
+  thumbnail: string;
+}
+
+const STORAGE_KEY = 'actualyt-subscriptions';
+
+function createSubscriptionStore() {
+  const { subscribe, set: setStore, update } = writable<Subscription[]>([]);
+  let initialized = false;
+
+  async function init() {
+    if (initialized) return;
+    try {
+      const stored = await get<Subscription[]>(STORAGE_KEY);
+      if (stored) {
+        setStore(stored);
+      }
+      initialized = true;
+    } catch (e) {
+      console.error('Failed to load subscriptions:', e);
+    }
+  }
+
+  async function persist(subs: Subscription[]) {
+    try {
+      await set(STORAGE_KEY, subs);
+    } catch (e) {
+      console.error('Failed to save subscriptions:', e);
+    }
+  }
+
+  return {
+    subscribe,
+    init,
+    add: async (channelId: string, channelName: string, thumbnails: VideoThumbnail[]) => {
+      update(subs => {
+        if (subs.some(s => s.channelId === channelId)) {
+          return subs;
+        }
+        const thumbnail = thumbnails[0]?.url || '';
+        const newSubs = [...subs, { channelId, channelName, thumbnail }];
+        persist(newSubs);
+        return newSubs;
+      });
+    },
+    remove: async (channelId: string) => {
+      update(subs => {
+        const newSubs = subs.filter(s => s.channelId !== channelId);
+        persist(newSubs);
+        return newSubs;
+      });
+    },
+    isSubscribed: (subs: Subscription[], channelId: string): boolean => {
+      return subs.some(s => s.channelId === channelId);
+    }
+  };
+}
+
+export const subscriptions = createSubscriptionStore();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..24c72c6
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  import '../app.css';
+  import SearchBar from '$lib/components/SearchBar.svelte';
+  import { subscriptions } from '$lib/stores/subscriptions';
+  import { playlists } from '$lib/stores/playlists';
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+
+  let { children } = $props();
+  let theme = $state<'dark' | 'light'>('dark');
+
+  onMount(() => {
+    subscriptions.init();
+    playlists.init();
+
+    const stored = localStorage.getItem('actualyt-theme');
+    if (stored === 'light' || stored === 'dark') {
+      theme = stored;
+    }
+  });
+
+  function toggleTheme() {
+    theme = theme === 'dark' ? 'light' : 'dark';
+    if (browser) {
+      localStorage.setItem('actualyt-theme', theme);
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>ActualYT</title>
+</svelte:head>
+
+<div class="app" data-theme={theme}>
+  <header class="header">
+    <div class="header-content container">
+      <a href="/" class="logo">ActualYT</a>
+      <SearchBar />
+      <nav class="nav">
+        <a href="/subscriptions" class="nav-link">Subscriptions</a>
+        <a href="/playlists" class="nav-link">Playlists</a>
+        <button class="theme-toggle" onclick={toggleTheme} aria-label="Toggle theme">
+          {#if theme === 'dark'}
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
+            </svg>
+          {:else}
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
+            </svg>
+          {/if}
+        </button>
+      </nav>
+    </div>
+  </header>
+
+  <main class="main">
+    {@render children()}
+  </main>
+</div>
+
+<style>
+  .app {
+    min-height: 100vh;
+    background: var(--bg-primary);
+  }
+
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .header-content {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .logo {
+    font-size: 1.25rem;
+    font-weight: 700;
+    text-decoration: none;
+    color: var(--accent-color);
+    flex-shrink: 0;
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-left: auto;
+  }
+
+  .nav-link {
+    text-decoration: none;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+    transition: color 0.15s ease;
+  }
+
+  .nav-link:hover {
+    color: var(--text-primary);
+  }
+
+  .theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+
+  .theme-toggle:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .main {
+    padding: 2rem 0;
+  }
+
+  @media (max-width: 768px) {
+    .header-content {
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    .nav {
+      order: -1;
+      width: 100%;
+      justify-content: flex-end;
+    }
+
+    .logo {
+      order: -2;
+    }
+  }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..8477c7c
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getTrending, type VideoInfo } from '$lib/api/youtube';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+
+  let videos = $state<VideoInfo[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+
+  onMount(async () => {
+    try {
+      videos = await getTrending();
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Failed to load videos';
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>ActualYT - Home</title>
+</svelte:head>
+
+<div class="container">
+  <h1 class="section-title">Trending</h1>
+
+  {#if loading}
+    <div class="loading">Loading videos</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else if videos.length === 0}
+    <div class="empty">No videos found</div>
+  {:else}
+    <div class="video-grid">
+      {#each videos as video (video.videoId)}
+        <VideoCard
+          videoId={video.videoId}
+          title={video.title}
+          author={video.author}
+          authorId={video.authorId}
+          thumbnails={video.videoThumbnails}
+          viewCount={video.viewCount}
+          publishedText={video.publishedText}
+          lengthSeconds={video.lengthSeconds}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/src/routes/api/channel/[id]/+server.ts b/src/routes/api/channel/[id]/+server.ts
new file mode 100644
index 0000000..c9aa67f
--- /dev/null
+++ b/src/routes/api/channel/[id]/+server.ts
@@ -0,0 +1,18 @@
+import { json } from '@sveltejs/kit';
+import { getChannel } from '$lib/server/ytdlp';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ params }) => {
+  const { id } = params;
+  if (!id) {
+    return json({ error: 'Missing channel ID' }, { status: 400 });
+  }
+
+  try {
+    const channel = await getChannel(id);
+    return json(channel);
+  } catch (e) {
+    console.error('Channel fetch error:', e);
+    return json({ error: 'Failed to fetch channel' }, { status: 500 });
+  }
+};
diff --git a/src/routes/api/playlist/+server.ts b/src/routes/api/playlist/+server.ts
new file mode 100644
index 0000000..b70ac26
--- /dev/null
+++ b/src/routes/api/playlist/+server.ts
@@ -0,0 +1,23 @@
+import { json } from '@sveltejs/kit';
+import { getPlaylist } from '$lib/server/ytdlp';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ url }) => {
+  const playlistUrl = url.searchParams.get('url');
+  if (!playlistUrl) {
+    return json({ error: 'Missing playlist URL' }, { status: 400 });
+  }
+
+  // Validate it's a YouTube playlist URL
+  if (!playlistUrl.includes('youtube.com/playlist') && !playlistUrl.includes('list=')) {
+    return json({ error: 'Invalid YouTube playlist URL' }, { status: 400 });
+  }
+
+  try {
+    const playlist = await getPlaylist(playlistUrl);
+    return json(playlist);
+  } catch (e) {
+    console.error('Playlist fetch error:', e);
+    return json({ error: 'Failed to fetch playlist' }, { status: 500 });
+  }
+};
diff --git a/src/routes/api/related/[id]/+server.ts b/src/routes/api/related/[id]/+server.ts
new file mode 100644
index 0000000..9fcd9c3
--- /dev/null
+++ b/src/routes/api/related/[id]/+server.ts
@@ -0,0 +1,19 @@
+import { json } from '@sveltejs/kit';
+import { getVideo, getRelatedVideos } from '$lib/server/ytdlp';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ params }) => {
+  const { id } = params;
+  if (!id) {
+    return json({ error: 'Missing video ID' }, { status: 400 });
+  }
+
+  try {
+    const video = await getVideo(id);
+    const related = await getRelatedVideos(video.title, id);
+    return json(related);
+  } catch (e) {
+    console.error('Related videos fetch error:', e);
+    return json({ error: 'Failed to fetch related videos' }, { status: 500 });
+  }
+};
diff --git a/src/routes/api/search/+server.ts b/src/routes/api/search/+server.ts
new file mode 100644
index 0000000..57bf347
--- /dev/null
+++ b/src/routes/api/search/+server.ts
@@ -0,0 +1,18 @@
+import { json } from '@sveltejs/kit';
+import { search } from '$lib/server/ytdlp';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ url }) => {
+  const query = url.searchParams.get('q');
+  if (!query) {
+    return json({ error: 'Missing query parameter' }, { status: 400 });
+  }
+
+  try {
+    const results = await search(query);
+    return json(results);
+  } catch (e) {
+    console.error('Search error:', e);
+    return json({ error: 'Search failed' }, { status: 500 });
+  }
+};
diff --git a/src/routes/api/trending/+server.ts b/src/routes/api/trending/+server.ts
new file mode 100644
index 0000000..b19ed21
--- /dev/null
+++ b/src/routes/api/trending/+server.ts
@@ -0,0 +1,13 @@
+import { json } from '@sveltejs/kit';
+import { getTrending } from '$lib/server/ytdlp';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async () => {
+  try {
+    const videos = await getTrending();
+    return json(videos);
+  } catch (e) {
+    console.error('Trending fetch error:', e);
+    return json({ error: 'Failed to fetch trending' }, { status: 500 });
+  }
+};
diff --git a/src/routes/api/video/[id]/+server.ts b/src/routes/api/video/[id]/+server.ts
new file mode 100644
index 0000000..9a64c36
--- /dev/null
+++ b/src/routes/api/video/[id]/+server.ts
@@ -0,0 +1,18 @@
+import { json } from '@sveltejs/kit';
+import { getVideo } from '$lib/server/ytdlp';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ params }) => {
+  const { id } = params;
+  if (!id) {
+    return json({ error: 'Missing video ID' }, { status: 400 });
+  }
+
+  try {
+    const video = await getVideo(id);
+    return json(video);
+  } catch (e) {
+    console.error('Video fetch error:', e);
+    return json({ error: 'Failed to fetch video' }, { status: 500 });
+  }
+};
diff --git a/src/routes/channel/[id]/+page.svelte b/src/routes/channel/[id]/+page.svelte
new file mode 100644
index 0000000..05ba2d7
--- /dev/null
+++ b/src/routes/channel/[id]/+page.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { getChannel, type ChannelInfo } from '$lib/api/youtube';
+  import { subscriptions } from '$lib/stores/subscriptions';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+
+  let channel = $state<ChannelInfo | null>(null);
+  let loading = $state(true);
+  let error = $state('');
+
+  const channelId = $derived($page.params.id);
+  const isSubscribed = $derived(
+    channel ? subscriptions.isSubscribed($subscriptions, channel.authorId) : false
+  );
+
+  $effect(() => {
+    const id = $page.params.id;
+    if (id) loadChannel(id);
+  });
+
+  async function loadChannel(id: string) {
+    loading = true;
+    error = '';
+
+    try {
+      channel = await getChannel(id);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Failed to load channel';
+      channel = null;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleSubscribe() {
+    if (!channel) return;
+    if (isSubscribed) {
+      subscriptions.remove(channel.authorId);
+    } else {
+      subscriptions.add(channel.authorId, channel.author, channel.authorThumbnails);
+    }
+  }
+
+  function formatSubCount(count: number): string {
+    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M subscribers`;
+    if (count >= 1000) return `${(count / 1000).toFixed(1)}K subscribers`;
+    return `${count} subscribers`;
+  }
+</script>
+
+<svelte:head>
+  <title>{channel?.author || 'Channel'} - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  {#if loading}
+    <div class="loading">Loading channel</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else if channel}
+    <div class="channel-page">
+      <div class="channel-header">
+        <div class="channel-info">
+          {#if channel.authorThumbnails && channel.authorThumbnails.length > 0}
+            <img
+              src={channel.authorThumbnails[0].url}
+              alt={channel.author}
+              class="avatar"
+            />
+          {/if}
+          <div class="channel-text">
+            <h1 class="channel-name">{channel.author}</h1>
+            {#if channel.subCount > 0}
+              <p class="sub-count">{formatSubCount(channel.subCount)}</p>
+            {/if}
+          </div>
+        </div>
+        <button
+          class="btn"
+          class:btn-primary={!isSubscribed}
+          class:btn-secondary={isSubscribed}
+          onclick={handleSubscribe}
+        >
+          {isSubscribed ? 'Subscribed' : 'Subscribe'}
+        </button>
+      </div>
+
+      {#if channel.description}
+        <p class="description">{channel.description}</p>
+      {/if}
+
+      <h2 class="section-title">Videos</h2>
+
+      {#if channel.videos.length === 0}
+        <div class="empty">No videos found</div>
+      {:else}
+        <div class="video-grid">
+          {#each channel.videos as video (video.videoId)}
+            <VideoCard
+              videoId={video.videoId}
+              title={video.title}
+              author={video.author}
+              authorId={video.authorId}
+              thumbnails={video.videoThumbnails}
+              viewCount={video.viewCount}
+              publishedText={video.publishedText}
+              lengthSeconds={video.lengthSeconds}
+            />
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .channel-page {
+    max-width: 1200px;
+  }
+
+  .channel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .channel-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .channel-name {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+  }
+
+  .sub-count {
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .description {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    white-space: pre-wrap;
+    line-height: 1.6;
+  }
+
+  @media (max-width: 600px) {
+    .channel-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+    }
+
+    .channel-name {
+      font-size: 1.25rem;
+    }
+  }
+</style>
diff --git a/src/routes/playlists/+page.svelte b/src/routes/playlists/+page.svelte
new file mode 100644
index 0000000..eb06e69
--- /dev/null
+++ b/src/routes/playlists/+page.svelte
@@ -0,0 +1,353 @@
+<script lang="ts">
+  import { playlists } from '$lib/stores/playlists';
+  import { importPlaylist, getBestThumbnail } from '$lib/api/youtube';
+
+  let newPlaylistName = $state('');
+  let showCreateForm = $state(false);
+  let showImportForm = $state(false);
+  let importUrl = $state('');
+  let importing = $state(false);
+  let importError = $state('');
+
+  async function createPlaylist() {
+    if (!newPlaylistName.trim()) return;
+    await playlists.create(newPlaylistName.trim());
+    newPlaylistName = '';
+    showCreateForm = false;
+  }
+
+  function handleCreateKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      createPlaylist();
+    } else if (e.key === 'Escape') {
+      showCreateForm = false;
+      newPlaylistName = '';
+    }
+  }
+
+  function handleImportKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      handleImport();
+    } else if (e.key === 'Escape') {
+      showImportForm = false;
+      importUrl = '';
+      importError = '';
+    }
+  }
+
+  async function handleImport() {
+    if (!importUrl.trim()) return;
+
+    importing = true;
+    importError = '';
+
+    try {
+      const imported = await importPlaylist(importUrl.trim());
+
+      // Create the playlist locally
+      const playlistId = await playlists.create(imported.title);
+
+      // Add all videos to it
+      for (const video of imported.videos) {
+        await playlists.addVideo(playlistId, {
+          videoId: video.videoId,
+          title: video.title,
+          author: video.author,
+          authorId: video.authorId,
+          thumbnail: getBestThumbnail(video.videoThumbnails) || `https://i.ytimg.com/vi/${video.videoId}/hqdefault.jpg`,
+          lengthSeconds: video.lengthSeconds
+        });
+      }
+
+      importUrl = '';
+      showImportForm = false;
+    } catch (e) {
+      importError = e instanceof Error ? e.message : 'Failed to import playlist';
+    } finally {
+      importing = false;
+    }
+  }
+
+  async function deletePlaylist(id: string, name: string) {
+    if (confirm(`Delete playlist "${name}"?`)) {
+      await playlists.delete(id);
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Playlists - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  <div class="header">
+    <h1 class="section-title">Playlists</h1>
+    <div class="header-actions">
+      {#if !showCreateForm && !showImportForm}
+        <button class="btn btn-secondary" onclick={() => showImportForm = true}>
+          Import from YouTube
+        </button>
+        <button class="btn btn-primary" onclick={() => showCreateForm = true}>
+          + New Playlist
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  {#if showCreateForm}
+    <div class="form-section">
+      <h3 class="form-title">Create New Playlist</h3>
+      <div class="form-row">
+        <input
+          type="text"
+          bind:value={newPlaylistName}
+          placeholder="Playlist name"
+          onkeydown={handleCreateKeydown}
+        />
+        <button class="btn btn-primary" onclick={createPlaylist}>Create</button>
+        <button class="btn btn-secondary" onclick={() => { showCreateForm = false; newPlaylistName = ''; }}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  {#if showImportForm}
+    <div class="form-section">
+      <h3 class="form-title">Import YouTube Playlist</h3>
+      <p class="form-hint">Paste a YouTube playlist URL to import all its videos</p>
+      <div class="form-row">
+        <input
+          type="text"
+          bind:value={importUrl}
+          placeholder="https://www.youtube.com/playlist?list=..."
+          onkeydown={handleImportKeydown}
+          disabled={importing}
+        />
+        <button class="btn btn-primary" onclick={handleImport} disabled={importing}>
+          {importing ? 'Importing...' : 'Import'}
+        </button>
+        <button class="btn btn-secondary" onclick={() => { showImportForm = false; importUrl = ''; importError = ''; }} disabled={importing}>
+          Cancel
+        </button>
+      </div>
+      {#if importError}
+        <p class="form-error">{importError}</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if $playlists.length === 0 && !showCreateForm && !showImportForm}
+    <div class="empty">
+      <p>You haven't created any playlists yet.</p>
+      <p>Create a playlist or import one from YouTube.</p>
+    </div>
+  {:else if $playlists.length > 0}
+    <div class="playlist-grid">
+      {#each $playlists as playlist (playlist.id)}
+        <a href="/playlists/{playlist.id}" class="playlist-card">
+          <div class="thumbnail">
+            {#if playlist.videos.length > 0}
+              <img src={playlist.videos[0].thumbnail} alt="" />
+              <span class="count">{playlist.videos.length} videos</span>
+            {:else}
+              <div class="empty-thumb">
+                <svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
+                  <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"/>
+                </svg>
+              </div>
+            {/if}
+          </div>
+          <div class="info">
+            <h3 class="name">{playlist.name}</h3>
+            <p class="meta">{playlist.videos.length} videos</p>
+          </div>
+          <button
+            class="delete-btn"
+            onclick={(e) => { e.preventDefault(); deletePlaylist(playlist.id, playlist.name); }}
+            aria-label="Delete playlist"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+            </svg>
+          </button>
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .section-title {
+    margin-bottom: 0;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .form-section {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .form-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem;
+  }
+
+  .form-hint {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin: 0 0 1rem;
+  }
+
+  .form-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .form-row input {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 1rem;
+  }
+
+  .form-row input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+  }
+
+  .form-row input:disabled {
+    opacity: 0.6;
+  }
+
+  .form-error {
+    color: var(--error-color);
+    font-size: 0.9rem;
+    margin: 0.75rem 0 0;
+  }
+
+  .playlist-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .playlist-card {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+    transition: transform 0.15s ease;
+  }
+
+  .playlist-card:hover {
+    transform: translateY(-2px);
+  }
+
+  .thumbnail {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .count {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    padding: 4px 8px;
+    font-size: 0.8rem;
+  }
+
+  .empty-thumb {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+  }
+
+  .info {
+    padding: 0.75rem 0;
+  }
+
+  .name {
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0 0 0.25rem;
+  }
+
+  .meta {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .delete-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .playlist-card:hover .delete-btn {
+    opacity: 1;
+  }
+
+  .delete-btn:hover {
+    background: var(--error-color);
+  }
+
+  @media (max-width: 600px) {
+    .header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .form-row {
+      flex-direction: column;
+    }
+  }
+</style>
diff --git a/src/routes/playlists/[id]/+page.svelte b/src/routes/playlists/[id]/+page.svelte
new file mode 100644
index 0000000..21de34f
--- /dev/null
+++ b/src/routes/playlists/[id]/+page.svelte
@@ -0,0 +1,294 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { playlists, type Playlist } from '$lib/stores/playlists';
+  import { formatDuration } from '$lib/api/youtube';
+
+  const playlistId = $derived($page.params.id ?? '');
+  const playlist = $derived(playlists.getById($playlists, playlistId));
+
+  let editing = $state(false);
+  let editName = $state('');
+
+  function startEditing() {
+    if (!playlist) return;
+    editName = playlist.name;
+    editing = true;
+  }
+
+  function saveEdit() {
+    if (!editName.trim() || !playlist) return;
+    playlists.rename(playlist.id, editName.trim());
+    editing = false;
+  }
+
+  function cancelEdit() {
+    editing = false;
+    editName = '';
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') saveEdit();
+    else if (e.key === 'Escape') cancelEdit();
+  }
+
+  function removeVideo(videoId: string) {
+    if (!playlist) return;
+    playlists.removeVideo(playlist.id, videoId);
+  }
+
+  async function deletePlaylist() {
+    if (!playlist) return;
+    if (confirm(`Delete playlist "${playlist.name}"?`)) {
+      await playlists.delete(playlist.id);
+      goto('/playlists');
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>{playlist?.name || 'Playlist'} - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  {#if !playlist}
+    <div class="error">Playlist not found</div>
+  {:else}
+    <div class="playlist-page">
+      <div class="playlist-header">
+        {#if editing}
+          <input
+            type="text"
+            bind:value={editName}
+            onkeydown={handleKeydown}
+            class="edit-input"
+            autofocus
+          />
+          <button class="btn btn-primary" onclick={saveEdit}>Save</button>
+          <button class="btn btn-secondary" onclick={cancelEdit}>Cancel</button>
+        {:else}
+          <h1 class="title">{playlist.name}</h1>
+          <div class="actions">
+            <button class="btn btn-secondary" onclick={startEditing}>Rename</button>
+            <button class="btn btn-danger" onclick={deletePlaylist}>Delete</button>
+          </div>
+        {/if}
+      </div>
+
+      <p class="meta">{playlist.videos.length} videos</p>
+
+      {#if playlist.videos.length === 0}
+        <div class="empty">
+          <p>This playlist is empty.</p>
+          <p>Add videos from the watch page using the "Save" button.</p>
+        </div>
+      {:else}
+        <div class="video-list">
+          {#each playlist.videos as video, index (video.videoId)}
+            <div class="video-item">
+              <span class="index">{index + 1}</span>
+              <a href="/watch/{video.videoId}" class="video-link">
+                <div class="thumbnail">
+                  <img src={video.thumbnail} alt="" />
+                  <span class="duration">{formatDuration(video.lengthSeconds)}</span>
+                </div>
+                <div class="info">
+                  <h3 class="video-title">{video.title}</h3>
+                  <span
+                    class="author"
+                    role="link"
+                    tabindex="0"
+                    onclick={(e) => { e.preventDefault(); e.stopPropagation(); window.location.href = `/channel/${video.authorId}`; }}
+                    onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); window.location.href = `/channel/${video.authorId}`; } }}
+                  >
+                    {video.author}
+                  </span>
+                </div>
+              </a>
+              <button
+                class="remove-btn"
+                onclick={() => removeVideo(video.videoId)}
+                aria-label="Remove from playlist"
+              >
+                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                </svg>
+              </button>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .playlist-page {
+    max-width: 900px;
+  }
+
+  .playlist-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+    flex: 1;
+  }
+
+  .edit-input {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    font-size: 1.25rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+
+  .edit-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .meta {
+    color: var(--text-muted);
+    margin-bottom: 2rem;
+  }
+
+  .video-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .video-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem;
+    border-radius: 8px;
+    transition: background 0.15s ease;
+  }
+
+  .video-item:hover {
+    background: var(--bg-hover);
+  }
+
+  .index {
+    width: 24px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    flex-shrink: 0;
+  }
+
+  .video-link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+    text-decoration: none;
+    color: inherit;
+    min-width: 0;
+  }
+
+  .thumbnail {
+    position: relative;
+    width: 120px;
+    aspect-ratio: 16 / 9;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .duration {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    padding: 1px 4px;
+    border-radius: 2px;
+    font-size: 0.75rem;
+  }
+
+  .info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .video-title {
+    font-size: 0.95rem;
+    font-weight: 500;
+    margin: 0 0 0.25rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .author {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .author:hover {
+    color: var(--text-primary);
+  }
+
+  .remove-btn {
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s ease, background 0.15s ease;
+    flex-shrink: 0;
+  }
+
+  .video-item:hover .remove-btn {
+    opacity: 1;
+  }
+
+  .remove-btn:hover {
+    background: var(--bg-secondary);
+    color: var(--error-color);
+  }
+
+  @media (max-width: 600px) {
+    .thumbnail {
+      width: 100px;
+    }
+
+    .index {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
new file mode 100644
index 0000000..29bf7dc
--- /dev/null
+++ b/src/routes/search/+page.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { search, type VideoInfo } from '$lib/api/youtube';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+
+  let results = $state<VideoInfo[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+  let currentQuery = $state('');
+
+  $effect(() => {
+    const query = $page.url.searchParams.get('q') || '';
+    if (query !== currentQuery) {
+      currentQuery = query;
+      loadResults(query);
+    }
+  });
+
+  async function loadResults(query: string) {
+    if (!query) {
+      results = [];
+      loading = false;
+      return;
+    }
+
+    loading = true;
+    error = '';
+
+    try {
+      results = await search(query);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Search failed';
+      results = [];
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>{currentQuery ? `${currentQuery} - Search` : 'Search'} - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  {#if currentQuery}
+    <h1 class="section-title">Results for "{currentQuery}"</h1>
+  {:else}
+    <h1 class="section-title">Search</h1>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Searching</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else if !currentQuery}
+    <div class="empty">Enter a search term to find videos</div>
+  {:else if results.length === 0}
+    <div class="empty">No results found for "{currentQuery}"</div>
+  {:else}
+    <div class="video-grid">
+      {#each results as result (result.videoId)}
+        {#if result.videoId && result.title}
+          <VideoCard
+            videoId={result.videoId}
+            title={result.title}
+            author={result.author || ''}
+            authorId={result.authorId || ''}
+            thumbnails={result.videoThumbnails || []}
+            viewCount={result.viewCount || 0}
+            publishedText={result.publishedText || ''}
+            lengthSeconds={result.lengthSeconds || 0}
+          />
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/src/routes/subscriptions/+page.svelte b/src/routes/subscriptions/+page.svelte
new file mode 100644
index 0000000..9f318ac
--- /dev/null
+++ b/src/routes/subscriptions/+page.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { subscriptions } from '$lib/stores/subscriptions';
+  import { getChannel, type VideoInfo } from '$lib/api/youtube';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+  import ChannelCard from '$lib/components/ChannelCard.svelte';
+
+  let videos = $state<VideoInfo[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+  let activeTab = $state<'feed' | 'channels'>('feed');
+
+  $effect(() => {
+    if ($subscriptions.length > 0 && activeTab === 'feed') {
+      loadFeed();
+    } else if ($subscriptions.length === 0) {
+      loading = false;
+    }
+  });
+
+  async function loadFeed() {
+    loading = true;
+    error = '';
+
+    try {
+      const results = await Promise.all(
+        $subscriptions.map(sub =>
+          getChannel(sub.channelId).catch(() => ({ videos: [] }))
+        )
+      );
+
+      const allVideos = results.flatMap(r => r.videos);
+      videos = allVideos.slice(0, 50);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Failed to load feed';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Subscriptions - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  <div class="header">
+    <h1 class="section-title">Subscriptions</h1>
+    <div class="tabs">
+      <button
+        class="tab"
+        class:active={activeTab === 'feed'}
+        onclick={() => activeTab = 'feed'}
+      >
+        Feed
+      </button>
+      <button
+        class="tab"
+        class:active={activeTab === 'channels'}
+        onclick={() => activeTab = 'channels'}
+      >
+        Channels ({$subscriptions.length})
+      </button>
+    </div>
+  </div>
+
+  {#if $subscriptions.length === 0}
+    <div class="empty">
+      <p>You haven't subscribed to any channels yet.</p>
+      <p>Find channels you like and click Subscribe to see their videos here.</p>
+    </div>
+  {:else if activeTab === 'feed'}
+    {#if loading}
+      <div class="loading">Loading your feed</div>
+    {:else if error}
+      <div class="error">{error}</div>
+    {:else if videos.length === 0}
+      <div class="empty">No recent videos from your subscriptions</div>
+    {:else}
+      <div class="video-grid">
+        {#each videos as video (video.videoId)}
+          <VideoCard
+            videoId={video.videoId}
+            title={video.title}
+            author={video.author}
+            authorId={video.authorId}
+            thumbnails={video.videoThumbnails}
+            viewCount={video.viewCount}
+            publishedText={video.publishedText}
+            lengthSeconds={video.lengthSeconds}
+          />
+        {/each}
+      </div>
+    {/if}
+  {:else}
+    <div class="channel-list">
+      {#each $subscriptions as sub (sub.channelId)}
+        <ChannelCard
+          channelId={sub.channelId}
+          channelName={sub.channelName}
+          thumbnails={[{ url: sub.thumbnail, width: 88, height: 88 }]}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .section-title {
+    margin-bottom: 0;
+  }
+
+  .tabs {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tab {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 20px;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+
+  .tab:hover {
+    background: var(--bg-hover);
+  }
+
+  .tab.active {
+    background: var(--text-primary);
+    color: var(--bg-primary);
+  }
+
+  .channel-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+</style>
diff --git a/src/routes/watch/[id]/+page.svelte b/src/routes/watch/[id]/+page.svelte
new file mode 100644
index 0000000..f96d54a
--- /dev/null
+++ b/src/routes/watch/[id]/+page.svelte
@@ -0,0 +1,381 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { getVideo, getRelatedVideos, formatViews, getBestThumbnail, type VideoDetails, type VideoInfo } from '$lib/api/youtube';
+  import { subscriptions } from '$lib/stores/subscriptions';
+  import { playlists, type PlaylistVideo } from '$lib/stores/playlists';
+  import VideoPlayer from '$lib/components/VideoPlayer.svelte';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+
+  let video = $state<VideoDetails | null>(null);
+  let relatedVideos = $state<VideoInfo[]>([]);
+  let loading = $state(true);
+  let loadingRelated = $state(false);
+  let error = $state('');
+  let showDescription = $state(false);
+  let showPlaylistMenu = $state(false);
+
+  const videoId = $derived($page.params.id);
+  const isSubscribed = $derived(
+    video ? subscriptions.isSubscribed($subscriptions, video.authorId) : false
+  );
+
+  $effect(() => {
+    const id = $page.params.id;
+    if (id) loadVideo(id);
+  });
+
+  async function loadVideo(id: string) {
+    loading = true;
+    error = '';
+    showDescription = false;
+    relatedVideos = [];
+
+    try {
+      video = await getVideo(id);
+      loadRelated(id);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Failed to load video';
+      video = null;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function loadRelated(id: string) {
+    loadingRelated = true;
+    try {
+      relatedVideos = await getRelatedVideos(id);
+    } catch (e) {
+      console.error('Failed to load related videos:', e);
+    } finally {
+      loadingRelated = false;
+    }
+  }
+
+  function handleSubscribe() {
+    if (!video) return;
+    if (isSubscribed) {
+      subscriptions.remove(video.authorId);
+    } else {
+      subscriptions.add(video.authorId, video.author, video.videoThumbnails);
+    }
+  }
+
+  function addToPlaylist(playlistId: string) {
+    if (!video) return;
+    const playlistVideo: PlaylistVideo = {
+      videoId: video.videoId,
+      title: video.title,
+      author: video.author,
+      authorId: video.authorId,
+      thumbnail: getBestThumbnail(video.videoThumbnails),
+      lengthSeconds: video.lengthSeconds
+    };
+    playlists.addVideo(playlistId, playlistVideo);
+    showPlaylistMenu = false;
+  }
+
+  async function createAndAddToPlaylist() {
+    if (!video) return;
+    const name = prompt('Playlist name:');
+    if (!name) return;
+    const id = await playlists.create(name);
+    addToPlaylist(id);
+  }
+</script>
+
+<svelte:head>
+  <title>{video?.title || 'Watch'} - ActualYT</title>
+</svelte:head>
+
+<div class="container">
+  {#if loading}
+    <div class="loading">Loading video</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else if video}
+    <div class="watch-page">
+      <div class="main-content">
+        <div class="player-section">
+          <VideoPlayer
+            formats={video.formats}
+            title={video.title}
+          />
+
+          <div class="video-info">
+            <h1 class="title">{video.title}</h1>
+
+            <div class="meta-row">
+              <div class="stats">
+                <span>{formatViews(video.viewCount)}</span>
+                <span class="separator">-</span>
+                <span>{video.publishedText}</span>
+                {#if video.likeCount}
+                  <span class="separator">-</span>
+                  <span>{formatViews(video.likeCount).replace('views', 'likes')}</span>
+                {/if}
+              </div>
+
+              <div class="actions">
+                <div class="playlist-dropdown">
+                  <button
+                    class="btn btn-secondary"
+                    onclick={() => showPlaylistMenu = !showPlaylistMenu}
+                  >
+                    + Save
+                  </button>
+                  {#if showPlaylistMenu}
+                    <div class="playlist-menu">
+                      {#each $playlists as playlist (playlist.id)}
+                        <button onclick={() => addToPlaylist(playlist.id)}>
+                          {playlist.name}
+                        </button>
+                      {/each}
+                      <button class="new-playlist" onclick={createAndAddToPlaylist}>
+                        + Create new playlist
+                      </button>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            </div>
+
+            <div class="channel-row">
+              <a href="/channel/{video.authorId}" class="channel">
+                <span class="channel-name">{video.author}</span>
+              </a>
+              <button
+                class="btn"
+                class:btn-primary={!isSubscribed}
+                class:btn-secondary={isSubscribed}
+                onclick={handleSubscribe}
+              >
+                {isSubscribed ? 'Subscribed' : 'Subscribe'}
+              </button>
+            </div>
+
+            <div class="description" class:expanded={showDescription}>
+              <p>{video.description || 'No description'}</p>
+              {#if video.description && video.description.length > 200}
+                <button class="show-more" onclick={() => showDescription = !showDescription}>
+                  {showDescription ? 'Show less' : 'Show more'}
+                </button>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <aside class="related">
+        <h2 class="related-title">Related Videos</h2>
+        {#if loadingRelated}
+          <div class="loading-small">Loading related videos...</div>
+        {:else if relatedVideos.length > 0}
+          <div class="related-list">
+            {#each relatedVideos as related (related.videoId)}
+              <VideoCard
+                videoId={related.videoId}
+                title={related.title}
+                author={related.author}
+                authorId={related.authorId}
+                thumbnails={related.videoThumbnails}
+                viewCount={related.viewCount}
+                publishedText={related.publishedText}
+                lengthSeconds={related.lengthSeconds}
+              />
+            {/each}
+          </div>
+        {:else}
+          <p class="no-related">No related videos found</p>
+        {/if}
+      </aside>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .watch-page {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 2rem;
+    align-items: start;
+  }
+
+  .main-content {
+    min-width: 0;
+  }
+
+  .player-section {
+    width: 100%;
+  }
+
+  .video-info {
+    margin-top: 1rem;
+  }
+
+  .title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.4;
+    margin-bottom: 0.75rem;
+  }
+
+  .meta-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .stats {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .separator {
+    margin: 0 0.5rem;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .playlist-dropdown {
+    position: relative;
+  }
+
+  .playlist-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 0.5rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    min-width: 200px;
+    z-index: 10;
+    overflow: hidden;
+  }
+
+  .playlist-menu button {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    cursor: pointer;
+  }
+
+  .playlist-menu button:hover {
+    background: var(--bg-hover);
+  }
+
+  .playlist-menu .new-playlist {
+    border-top: 1px solid var(--border-color);
+    color: var(--accent-color);
+  }
+
+  .channel-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 0;
+  }
+
+  .channel {
+    text-decoration: none;
+  }
+
+  .channel-name {
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .description {
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+
+  .description:not(.expanded) p {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .description p {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .show-more {
+    display: block;
+    margin-top: 0.5rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    cursor: pointer;
+  }
+
+  .show-more:hover {
+    color: var(--text-primary);
+  }
+
+  .related {
+    position: sticky;
+    top: 80px;
+  }
+
+  .related-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+
+  .related-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .loading-small {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    padding: 1rem 0;
+  }
+
+  .no-related {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 1024px) {
+    .watch-page {
+      grid-template-columns: 1fr;
+    }
+
+    .related {
+      position: static;
+      margin-top: 2rem;
+    }
+
+    .related-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
+  }
+</style>
author	Thomas Grothe <grothe.tr@gmail.com>	2026-03-07 23:32:05 -0500
committer	Thomas Grothe <grothe.tr@gmail.com>	2026-03-07 23:32:05 -0500
commit	dbd1386a43ae9e7013809be2e0bd0e1c049059fc (patch)
tree	22588cb21dfa1cc941e13031e73cb85cdfb7f402 /src