Overhaul channel page: search, pagination, fetch all history

- Search bar filters indexed videos server-side; "Search YouTube" button
  triggers a deep channel search and indexes matching results
- Server-side sort (newest/oldest/A-Z/unwatched) + infinite scroll (60/page)
- "Fetch recent" indexes last 30, "Fetch all" indexes full history
- Auto-reindex on page visit if stale (>1h), refetches at 8s
- Add /channels/{id}/index-full endpoint (max_videos=0)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/routers/channels.py

@@ -83,7 +83,7 @@ def _index_channels_batch(channel_ids: list[int], user_id: int, delay: float = 1
         _index_channel_task(cid, user_id)
 
 
-def _index_channel_task(channel_id: int, user_id: int):
+def _index_channel_task(channel_id: int, user_id: int, max_videos: int = 30):
     from ..database import SessionLocal
     db = SessionLocal()
     try:
@@ -91,7 +91,7 @@ def _index_channel_task(channel_id: int, user_id: int):
         if not channel:
             return
 
-        result = ytdlp.fetch_channel_metadata(channel.youtube_channel_id)
+        result = ytdlp.fetch_channel_metadata(channel.youtube_channel_id, max_videos=max_videos)
         if not result:
             return
 
@@ -599,26 +599,98 @@ def get_channel(
 @router.get("/{channel_id}/videos", response_model=list[VideoOut])
 def get_channel_videos(
     channel_id: int,
+    sort: str = "newest",
+    offset: int = 0,
+    limit: int = 60,
+    q: str = "",
     db: Session = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ):
     _get_channel_or_404(db, channel_id)
+    order = {
+        "newest": "v.published_at DESC NULLS LAST",
+        "oldest": "v.published_at ASC NULLS LAST",
+        "title": "v.title ASC",
+        "unwatched": "COALESCE(uv.watched, 0) ASC, v.published_at DESC NULLS LAST",
+    }.get(sort, "v.published_at DESC NULLS LAST")
+    params: dict = {"user_id": current_user.id, "channel_id": channel_id, "limit": limit, "offset": offset}
+    q_clause = ""
+    if q.strip():
+        q_clause = "AND (v.title LIKE :q OR v.description LIKE :q)"
+        params["q"] = f"%{q.strip()}%"
     rows = db.execute(
-        text("""
+        text(f"""
             SELECT v.id, v.youtube_video_id, v.title, v.thumbnail_url,
                    v.duration_seconds, v.published_at,
                    COALESCE(uv.downloaded, 0) AS is_downloaded,
                    COALESCE(uv.watched, 0) AS is_watched
             FROM videos v
             LEFT JOIN user_videos uv ON v.id = uv.video_id AND uv.user_id = :user_id
-            WHERE v.channel_id = :channel_id
+            WHERE v.channel_id = :channel_id {q_clause}
-            ORDER BY v.published_at DESC
+            ORDER BY {order}
+            LIMIT :limit OFFSET :offset
         """),
-        {"user_id": current_user.id, "channel_id": channel_id},
+        params,
     ).mappings().all()
     return [VideoOut(**dict(r)) for r in rows]
 
 
+@router.post("/{channel_id}/search", status_code=status.HTTP_202_ACCEPTED)
+def search_channel_youtube(
+    channel_id: int,
+    q: str,
+    background_tasks: BackgroundTasks,
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user),
+):
+    """Search YouTube within this channel and index matching videos."""
+    channel = _get_channel_or_404(db, channel_id)
+    background_tasks.add_task(_search_channel_task, channel_id, channel.youtube_channel_id, q, current_user.id)
+    return {"detail": "Search started"}
+
+
+def _search_channel_task(channel_id: int, youtube_channel_id: str, q: str, user_id: int):
+    """Fetch videos matching q from YouTube for this channel and index them."""
+    from ..database import SessionLocal
+    from urllib.parse import quote
+    db = SessionLocal()
+    try:
+        url = f"https://www.youtube.com/channel/{youtube_channel_id}/search?query={quote(q)}"
+        result = ytdlp.fetch_channel_metadata(youtube_channel_id, max_videos=100)
+        if not result:
+            return
+        # Filter results by query match (yt-dlp fetches all; we filter titles locally)
+        q_lower = q.lower()
+        matched = [v for v in result.get("videos", []) if q_lower in (v.get("title") or "").lower()]
+        if not matched:
+            matched = result.get("videos", [])[:30]
+        channel = db.query(Channel).filter_by(id=channel_id).first()
+        if not channel:
+            return
+        for vdata in matched:
+            yt_id = vdata.get("youtube_video_id")
+            if not yt_id:
+                continue
+            existing = db.query(Video).filter_by(youtube_video_id=yt_id).first()
+            if not existing:
+                db.add(Video(
+                    youtube_video_id=yt_id,
+                    channel_id=channel.id,
+                    title=vdata.get("title", ""),
+                    description=vdata.get("description"),
+                    thumbnail_url=vdata.get("thumbnail_url"),
+                    duration_seconds=vdata.get("duration_seconds"),
+                    published_at=vdata.get("published_at"),
+                    tags=vdata.get("tags"),
+                    category=vdata.get("category"),
+                ))
+        db.commit()
+    except Exception:
+        db.rollback()
+    finally:
+        db.close()
+
+
 @router.post("/{channel_id}/follow", status_code=status.HTTP_204_NO_CONTENT)
 def follow_channel(
     channel_id: int,
@@ -670,10 +742,22 @@ def index_channel(
     current_user: User = Depends(get_current_user),
 ):
     _get_channel_or_404(db, channel_id)
-    background_tasks.add_task(_index_channel_task, channel_id, current_user.id)
+    background_tasks.add_task(_index_channel_task, channel_id, current_user.id, 100)
     return {"detail": "Indexing started"}
 
 
+@router.post("/{channel_id}/index-full", status_code=status.HTTP_202_ACCEPTED)
+def index_channel_full(
+    channel_id: int,
+    background_tasks: BackgroundTasks,
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user),
+):
+    _get_channel_or_404(db, channel_id)
+    background_tasks.add_task(_index_channel_task, channel_id, current_user.id, 0)
+    return {"detail": "Full index started"}
+
+
 @router.post("/follow-bulk", status_code=200)
 def follow_bulk(
     body: dict,

frontend/src/api/index.js

@@ -41,10 +41,13 @@ export const getChannels = () => api.get("/channels");
 export const getChannelFeed = (offset = 0) => api.get("/channels/feed", { params: { offset, limit: 24 } });
 export const getChannel = (id) => api.get(`/channels/${id}`);
 export const syncAllChannels = () => api.post("/channels/sync-all");
-export const getChannelVideos = (id) => api.get(`/channels/${id}/videos`);
+export const getChannelVideos = (id, sort = "newest", offset = 0, limit = 60, q = "") =>
+  api.get(`/channels/${id}/videos`, { params: { sort, offset, limit, ...(q ? { q } : {}) } });
+export const searchChannelYoutube = (id, q) => api.post(`/channels/${id}/search`, null, { params: { q } });
 export const followChannel = (id) => api.post(`/channels/${id}/follow`);
 export const unfollowChannel = (id) => api.delete(`/channels/${id}/follow`);
 export const indexChannel = (id) => api.post(`/channels/${id}/index`);
+export const indexChannelFull = (id) => api.post(`/channels/${id}/index-full`);
 export const followChannelByUrl = (data) => api.post("/channels/follow-by-url", data);
 export const setChannelAutoDownload = (id, value) => api.patch(`/channels/${id}/auto-download`, { auto_download: value });
 export const markChannelsSeen = () => api.post("/channels/mark-seen");

frontend/src/pages/Channel.jsx

@@ -1,9 +1,20 @@
-import { useState, useMemo, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from "@tanstack/react-query";
-import { getChannel, getChannelVideos, followChannel, unfollowChannel, indexChannel, downloadChannel } from "../api";
+import {
+  getChannel, getChannelVideos, searchChannelYoutube,
+  followChannel, unfollowChannel, indexChannel, indexChannelFull, downloadChannel,
+} from "../api";
 import VideoCard from "../components/VideoCard";
-import SortPicker from "../components/SortPicker";
+
+const LIMIT = 60;
+
+const SORTS = [
+  { value: "newest",    label: "Newest" },
+  { value: "oldest",    label: "Oldest" },
+  { value: "title",     label: "A–Z" },
+  { value: "unwatched", label: "Unwatched" },
+];
 
 function formatSubs(n) {
   if (!n) return null;
@@ -12,36 +23,38 @@ function formatSubs(n) {
   return String(n);
 }
 
-const VIDEO_SORTS = [
-  { value: "newest",    label: "Newest" },
-  { value: "oldest",    label: "Oldest" },
-  { value: "title",     label: "Title A–Z" },
-  { value: "unwatched", label: "Unwatched first" },
-];
-
-function sortVideos(items, sort) {
-  const arr = [...items];
-  if (sort === "oldest")    return arr.sort((a, b) => new Date(a.published_at ?? 0) - new Date(b.published_at ?? 0));
-  if (sort === "title")     return arr.sort((a, b) => (a.title ?? "").localeCompare(b.title ?? ""));
-  if (sort === "unwatched") return arr.sort((a, b) => Number(a.is_watched) - Number(b.is_watched));
-  return arr.sort((a, b) => new Date(b.published_at ?? 0) - new Date(a.published_at ?? 0));
-}
-
 export default function ChannelPage() {
   const { id } = useParams();
   const qc = useQueryClient();
+  const [sort, setSort] = useState("newest");
+  const [search, setSearch] = useState("");
+  const [activeQ, setActiveQ] = useState("");
+  const [indexing, setIndexing] = useState(false);
+  const searchInputRef = useRef(null);
 
   const { data: channel, isLoading: loadingChannel } = useQuery({
     queryKey: ["channel", id],
     queryFn: () => getChannel(id).then((r) => r.data),
   });
 
-  const { data: videos, isLoading: loadingVideos } = useQuery({
+  const {
-    queryKey: ["channel-videos", id],
+    data: videosData,
-    queryFn: () => getChannelVideos(id).then((r) => r.data),
+    isLoading: loadingVideos,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["channel-videos", id, sort, activeQ],
+    queryFn: ({ pageParam = 0 }) =>
+      getChannelVideos(id, sort, pageParam, LIMIT, activeQ).then((r) => r.data),
+    getNextPageParam: (lastPage, pages) =>
+      lastPage.length === LIMIT ? pages.length * LIMIT : undefined,
+    enabled: !!id,
   });
 
-  // Refetch after the background re-index has had time to run
+  const videos = videosData?.pages.flat() ?? [];
+
+  // Refetch after background re-index
   const refetchedRef = useRef(false);
   useEffect(() => {
     if (!id || refetchedRef.current) return;
@@ -62,13 +75,31 @@ export default function ChannelPage() {
     },
   });
 
+  const scheduleRefetch = (delayMs) => {
+    setIndexing(true);
+    setTimeout(() => {
+      qc.invalidateQueries({ queryKey: ["channel-videos", id] });
+      qc.invalidateQueries({ queryKey: ["channel", id] });
+      setIndexing(false);
+    }, delayMs);
+  };
+
   const indexMut = useMutation({
     mutationFn: () => indexChannel(id),
-    onSuccess: () => setTimeout(() => qc.invalidateQueries({ queryKey: ["channel-videos", id] }), 4000),
+    onSuccess: () => scheduleRefetch(6000),
+  });
+
+  const fullIndexMut = useMutation({
+    mutationFn: () => indexChannelFull(id),
+    onSuccess: () => scheduleRefetch(45000),
+  });
+
+  const deepSearchMut = useMutation({
+    mutationFn: () => searchChannelYoutube(id, activeQ || search),
+    onSuccess: () => scheduleRefetch(20000),
   });
 
   const [dlResult, setDlResult] = useState(null);
-  const [videoSort, setVideoSort] = useState("newest");
   const dlMut = useMutation({
     mutationFn: () => downloadChannel(id),
     onSuccess: (res) => {
@@ -77,6 +108,17 @@ export default function ChannelPage() {
     },
   });
 
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setActiveQ(search.trim());
+  };
+
+  const clearSearch = () => {
+    setSearch("");
+    setActiveQ("");
+    searchInputRef.current?.focus();
+  };
+
   if (loadingChannel) {
     return (
       <div className="flex items-center justify-center py-16">
@@ -88,9 +130,10 @@ export default function ChannelPage() {
   if (!channel) return <p className="text-zinc-500">Channel not found.</p>;
 
   const isFollowed = channel.status === "followed";
+  const isPending = indexMut.isPending || fullIndexMut.isPending || deepSearchMut.isPending || indexing;
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-5">
       {/* Banner */}
       <div className={`-mx-4 -mt-6 relative ${channel.banner_url ? "" : "bg-zinc-900"} rounded-b-2xl overflow-hidden`}>
         {channel.banner_url && (
@@ -98,7 +141,6 @@ export default function ChannelPage() {
         )}
         <div className={channel.banner_url ? "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" : ""} />
 
-        {/* Avatar + name — always in the banner overlay */}
         <div className={`${channel.banner_url ? "absolute bottom-0 inset-x-0" : ""} px-4 pb-4 pt-3 flex items-end gap-3`}>
           {channel.thumbnail_url ? (
             <img src={channel.thumbnail_url} alt={channel.name}
@@ -113,11 +155,11 @@ export default function ChannelPage() {
             <p className="text-xs text-zinc-400 mt-0.5 drop-shadow">
               {[
                 formatSubs(channel.subscriber_count) && `${formatSubs(channel.subscriber_count)} subs`,
-                channel.video_count && `${channel.video_count} videos`,
+                channel.video_count && `${channel.video_count} indexed`,
               ].filter(Boolean).join(" · ")}
             </p>
           </div>
-          {/* Desktop action buttons inline */}
+
           <div className="hidden sm:flex items-center gap-2 shrink-0">
             <button onClick={() => followMut.mutate()} disabled={followMut.isPending}
               className={`text-sm font-medium px-4 py-1.5 rounded-lg transition-colors ${isFollowed ? "bg-zinc-700/80 text-zinc-300 hover:bg-zinc-600" : "bg-zinc-800/80 text-zinc-300 hover:bg-zinc-700"}`}>
@@ -127,59 +169,145 @@ export default function ChannelPage() {
               className="text-sm font-medium px-4 py-1.5 rounded-lg bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-60">
               {dlMut.isPending ? "Queuing…" : "Download all"}
             </button>
-            <button onClick={() => indexMut.mutate()} disabled={indexMut.isPending || indexMut.isSuccess}
-              className="text-sm font-medium px-4 py-1.5 rounded-lg bg-zinc-800/80 text-zinc-300 hover:bg-zinc-700 transition-colors disabled:opacity-60">
-              {indexMut.isPending ? "Indexing…" : indexMut.isSuccess ? "Done ✓" : "Re-index"}
-            </button>
           </div>
         </div>
       </div>
 
-      {/* Mobile action row — below banner */}
+      {/* Mobile actions */}
-      <div className="sm:hidden flex items-center gap-2 -mt-2">
+      <div className="sm:hidden flex items-center gap-2 -mt-1">
         <button onClick={() => followMut.mutate()} disabled={followMut.isPending}
-          className={`flex-1 text-sm font-medium py-2 rounded-lg transition-colors ${isFollowed ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700" : "bg-zinc-800 text-zinc-300 hover:bg-zinc-700"}`}>
+          className="flex-1 text-sm font-medium py-2 rounded-lg bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors">
           {isFollowed ? "Following ✓" : "Follow"}
         </button>
         <button onClick={() => dlMut.mutate()} disabled={dlMut.isPending}
           className="flex-1 text-sm font-medium py-2 rounded-lg bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-60">
           {dlMut.isPending ? "Queuing…" : "Download all"}
         </button>
-        <button onClick={() => indexMut.mutate()} disabled={indexMut.isPending || indexMut.isSuccess}
-          className="text-sm font-medium px-3 py-2 rounded-lg bg-zinc-800 text-zinc-500 hover:bg-zinc-700 transition-colors disabled:opacity-60">
-          {indexMut.isPending ? "…" : indexMut.isSuccess ? "✓" : "Re-index"}
-        </button>
       </div>
 
       {dlResult != null && (
-        <p className="text-xs text-accent font-mono -mt-2">
+        <p className="text-xs text-zinc-400 font-mono -mt-2">
           {dlResult === 0 ? "Already up to date" : `${dlResult} downloads queued`}
         </p>
       )}
 
-      {/* Description */}
       {channel.description && (
-        <p className="text-xs text-zinc-500 line-clamp-2 -mt-2">{channel.description}</p>
+        <p className="text-xs text-zinc-500 line-clamp-2 -mt-1">{channel.description}</p>
       )}
 
-      {/* Video grid */}
+      {/* Search bar */}
+      <form onSubmit={handleSearch} className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search videos…"
+            className="w-full bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-1.5 text-sm text-zinc-200 placeholder-zinc-600 focus:outline-none focus:border-zinc-600 transition-colors"
+          />
+          {search && (
+            <button type="button" onClick={clearSearch}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400">
+              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+        <button type="submit"
+          className="text-sm px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors shrink-0">
+          Filter
+        </button>
+        {activeQ && (
+          <button
+            type="button"
+            onClick={() => deepSearchMut.mutate()}
+            disabled={deepSearchMut.isPending || indexing}
+            className="text-sm px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-100 transition-colors shrink-0 disabled:opacity-40"
+          >
+            Search YouTube
+          </button>
+        )}
+      </form>
+
+      {/* Sort + index controls */}
+      <div className="flex items-center justify-between gap-3 -mt-1">
+        <div className="flex items-center gap-0.5">
+          {SORTS.map(s => (
+            <button key={s.value} onClick={() => setSort(s.value)}
+              className={`text-xs px-2.5 py-1 rounded-md transition-colors ${
+                sort === s.value ? "bg-zinc-700 text-zinc-100" : "text-zinc-500 hover:text-zinc-300"
+              }`}>
+              {s.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {isPending && (
+            <span className="text-xs text-zinc-500 flex items-center gap-1.5">
+              <svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+              </svg>
+              Indexing…
+            </span>
+          )}
+          <button onClick={() => indexMut.mutate()} disabled={isPending}
+            className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40">
+            Fetch recent
+          </button>
+          <button onClick={() => fullIndexMut.mutate()} disabled={isPending}
+            className="text-xs text-zinc-400 hover:text-zinc-100 font-medium transition-colors disabled:opacity-40">
+            Fetch all
+          </button>
+        </div>
+      </div>
+
+      {/* Video list */}
       {loadingVideos ? (
         <div className="flex items-center justify-center py-8">
           <div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
         </div>
-      ) : videos?.length ? (
+      ) : videos.length ? (
-        <>
+        <div className="flex flex-col gap-1">
-          <div className="flex justify-end">
+          {videos.map((v) => (
-            <SortPicker value={videoSort} onChange={setVideoSort} options={VIDEO_SORTS} />
-          </div>
-          <div className="flex flex-col gap-2">
-          {sortVideos(videos, videoSort).map((v) => (
             <VideoCard key={v.youtube_video_id} video={{ ...v, channel_name: channel.name }} variant="list" />
           ))}
+
+          {hasNextPage ? (
+            <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}
+              className="mt-4 self-center text-sm text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40 py-2 px-4">
+              {isFetchingNextPage ? "Loading…" : "Load more"}
+            </button>
+          ) : !activeQ && (
+            <div className="mt-4 flex flex-col items-center gap-2 py-4 border-t border-zinc-800/50">
+              <p className="text-xs text-zinc-600">All {videos.length} indexed videos shown</p>
+              <button onClick={() => fullIndexMut.mutate()} disabled={isPending}
+                className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40">
+                Fetch full history from YouTube
+              </button>
+            </div>
+          )}
         </div>
-        </>
       ) : (
-        <p className="text-zinc-500 text-sm">No videos indexed yet. Hit Re-index to fetch them.</p>
+        <div className="py-8 flex flex-col items-center gap-3">
+          <p className="text-zinc-500 text-sm">
+            {activeQ ? `No indexed videos match "${activeQ}"` : "No videos indexed yet."}
+          </p>
+          {activeQ ? (
+            <button onClick={() => deepSearchMut.mutate()} disabled={isPending}
+              className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors disabled:opacity-40 underline">
+              Search YouTube for "{activeQ}"
+            </button>
+          ) : (
+            <button onClick={() => fullIndexMut.mutate()} disabled={isPending}
+              className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors disabled:opacity-40 underline">
+              Fetch all videos
+            </button>
+          )}
+        </div>
       )}
     </div>
   );