Implement Phases 1-5: skeleton, OAuth, categories, video sync/feed, playback

- FastAPI + PostgreSQL + Alembic + React/Vite skeleton, Docker Compose, healthcheck
- Google OAuth (single allowed account), encrypted refresh token storage
- Subscriptions sync with pagination, uploads playlist batch fetch
- Categories CRUD, many-to-many channel assignment, category filtering
- Video sync (playlistItems + videos.list batching), cached feed with cursor
  pagination, background scheduler (APScheduler)
- Video detail page with YouTube embed player
- SPA fallback routing, optimistic UI updates, client-side query caching

40 backend tests covering OAuth allow-list, sync idempotency, cascade deletes,
cursor pagination, and category filtering.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/pages/Channels.tsx

@@ -0,0 +1,106 @@
+import { useMemo, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import { getSyncStatus, listCategories, listChannels, logout, syncSubscriptions } from '../api/client'
+import ChannelCard from '../components/ChannelCard'
+import CategoryNav, { type CategoryFilter } from '../components/CategoryNav'
+
+function Channels() {
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<CategoryFilter>('all')
+  const queryClient = useQueryClient()
+
+  const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
+
+  const channelsQuery = useQuery({
+    queryKey: ['channels', filter],
+    queryFn: () =>
+      listChannels({
+        categoryId: typeof filter === 'number' ? filter : undefined,
+        uncategorized: filter === 'uncategorized',
+      }),
+  })
+
+  const filteredChannels = useMemo(() => {
+    const data = channelsQuery.data ?? []
+    if (!search.trim()) return data
+    const needle = search.trim().toLowerCase()
+    return data.filter((c) => c.title.toLowerCase().includes(needle))
+  }, [channelsQuery.data, search])
+
+  const syncStatusQuery = useQuery({
+    queryKey: ['sync-status'],
+    queryFn: getSyncStatus,
+    refetchInterval: (query) => (query.state.data?.subscriptions.running ? 1500 : false),
+  })
+
+  const syncMutation = useMutation({
+    mutationFn: syncSubscriptions,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['channels'] })
+      queryClient.invalidateQueries({ queryKey: ['sync-status'] })
+    },
+  })
+
+  const logoutMutation = useMutation({
+    mutationFn: logout,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth-status'] })
+    },
+  })
+
+  const running = syncStatusQuery.data?.subscriptions.running
+  const categories = categoriesQuery.data ?? []
+
+  return (
+    <div className="channels-screen">
+      <header>
+        <h1>Каналы</h1>
+        <div className="actions">
+          <Link to="/">Лента</Link>
+          <Link to="/categories">Категории</Link>
+          <button onClick={() => syncMutation.mutate()} disabled={running}>
+            {running ? 'Синхронизация...' : 'Обновить сейчас'}
+          </button>
+          <button onClick={() => logoutMutation.mutate()}>Выйти</button>
+        </div>
+      </header>
+
+      {syncMutation.isError && <p className="error">{(syncMutation.error as Error).message}</p>}
+      {syncStatusQuery.data?.subscriptions.status === 'failed' && (
+        <p className="error">Последняя синхронизация завершилась ошибкой: {syncStatusQuery.data.subscriptions.error}</p>
+      )}
+
+      <div className="layout">
+        <CategoryNav categories={categories} value={filter} onChange={setFilter} />
+
+        <div className="content">
+          <input
+            type="text"
+            placeholder="Поиск по названию канала"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+
+          {channelsQuery.isLoading && <p>Загрузка...</p>}
+          {channelsQuery.isError && <p className="error">Не удалось загрузить каналы</p>}
+
+          <ul className="channel-list">
+            {filteredChannels.map((channel) => (
+              <ChannelCard key={channel.id} channel={channel} categories={categories} />
+            ))}
+          </ul>
+
+          {channelsQuery.data && channelsQuery.data.length === 0 && (
+            <p>Каналы не найдены{filter === 'all' ? '. Нажми "Обновить сейчас".' : ' в этой категории.'}</p>
+          )}
+          {channelsQuery.data && channelsQuery.data.length > 0 && filteredChannels.length === 0 && (
+            <p>Ничего не найдено по запросу "{search}".</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Channels