refactor(spa): collapse api/hooks telescope, merge review sheets, extract tab+list modules

- merge lib/api/* + hooks/use-* → features/* domain modules
- log-sheet + edit-review-sheet → review-sheet with mode discriminant
- index.tsx → feed-tab, watchlist-tab, queue-tab
- social actor-list pattern → ActorList component
- movie detail inline sections → community-reviews, viewing-history

spa/src/components/actor-list.tsx

@@ -0,0 +1,66 @@
+import type { LucideIcon } from "lucide-react"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Card, CardContent } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { EmptyState } from "@/components/empty-state"
+import type { ActorListResponse, RemoteActorDto } from "@/features/social"
+
+type ActorListProps = {
+  data: ActorListResponse | undefined
+  isPending: boolean
+  emptyIcon: LucideIcon
+  emptyTitle: string
+  emptyDescription?: string
+  renderAction?: (actor: RemoteActorDto) => React.ReactNode
+}
+
+export function ActorList({ data, isPending, emptyIcon, emptyTitle, emptyDescription, renderAction }: ActorListProps) {
+  if (isPending) return <ListSkeleton />
+  if (!data?.actors.length) return <EmptyState icon={emptyIcon} title={emptyTitle} description={emptyDescription} />
+
+  return (
+    <div className="space-y-2">
+      {data.actors.map((actor) => (
+        <ActorCard key={actor.url} actor={actor} action={renderAction?.(actor)} />
+      ))}
+    </div>
+  )
+}
+
+function actorHandle(actor: RemoteActorDto): string {
+  try {
+    const host = new URL(actor.url).host
+    return `@${actor.handle}@${host}`
+  } catch {
+    return `@${actor.handle}`
+  }
+}
+
+function ActorCard({ actor, action }: { actor: RemoteActorDto; action?: React.ReactNode }) {
+  const initial = (actor.display_name || actor.handle)[0]?.toUpperCase() ?? "?"
+
+  return (
+    <Card size="sm">
+      <CardContent className="flex items-center gap-3">
+        <Avatar>
+          <AvatarFallback>{initial}</AvatarFallback>
+        </Avatar>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-semibold">{actor.display_name || actor.handle}</p>
+          <p className="truncate text-xs text-muted-foreground">{actorHandle(actor)}</p>
+        </div>
+        {action}
+      </CardContent>
+    </Card>
+  )
+}
+
+function ListSkeleton() {
+  return (
+    <div className="space-y-2">
+      {[1, 2, 3].map((i) => (
+        <Skeleton key={i} className="h-16 w-full rounded-xl" />
+      ))}
+    </div>
+  )
+}

spa/src/components/community-reviews.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from "react-i18next"
+import { Globe, Users } from "lucide-react"
+import { StarDisplay } from "@/components/star-display"
+import { WatchMediumBadge } from "@/components/watch-medium-badge"
+import { EmptyState } from "@/components/empty-state"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { timeAgo } from "@/lib/date"
+import type { SocialReviewDto } from "@/features/movies"
+
+export function CommunityReviews({ reviews }: { reviews: { items: SocialReviewDto[] } }) {
+  const { t } = useTranslation()
+
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("movie.community")}</h3>
+      {!reviews.items.length ? (
+        <EmptyState icon={Users} title={t("movie.noReviews")} description={t("movie.beFirst")} />
+      ) : (
+        <div className="space-y-2">
+          {reviews.items.map((r, i) => (
+            <Card key={i} size="sm">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle className="flex items-center gap-1.5 text-sm">
+                      {r.user_display}
+                      {r.is_federated && <Globe className="size-3 text-muted-foreground/60" />}
+                    </CardTitle>
+                    <CardDescription className="text-[10px]">{timeAgo(r.watched_at)}</CardDescription>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <StarDisplay rating={r.rating} size="xs" />
+                    {r.watch_medium && <WatchMediumBadge medium={r.watch_medium} />}
+                  </div>
+                </div>
+              </CardHeader>
+              {r.comment && (
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">{r.comment}</p>
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

spa/src/components/edit-review-sheet.tsx

@@ -1,112 +0,0 @@
-import { useState } from "react"
-import { useTranslation } from "react-i18next"
-import { VisuallyHidden } from "radix-ui"
-import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer"
-import { Button } from "@/components/ui/button"
-import { ReviewFormFields } from "@/components/review-form-fields"
-import { useEditReview } from "@/hooks/use-diary"
-import { toast } from "sonner"
-import { posterUrl } from "@/lib/api/client"
-import { hapticMedium } from "@/lib/haptics"
-import type { EditReviewRequest } from "@/lib/api/diary"
-import type { MovieDto, ReviewDto } from "@/lib/api/common"
-
-type EditReviewSheetProps = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  movie: MovieDto
-  review: ReviewDto
-}
-
-function parseLocalDate(s: string): Date {
-  const [datePart, timePart] = s.split("T")
-  if (!datePart) return new Date()
-  const [y, m, d] = datePart.split("-").map(Number)
-  if (timePart) {
-    const [h, min, sec] = timePart.split(":").map(Number)
-    return new Date(y!, m! - 1, d!, h, min, sec)
-  }
-  return new Date(y!, m! - 1, d!)
-}
-
-function formatLocalDateTime(d: Date): string {
-  const pad = (n: number) => n.toString().padStart(2, "0")
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
-}
-
-export function EditReviewSheet({ open, onOpenChange, movie, review }: EditReviewSheetProps) {
-  const { t } = useTranslation()
-  const [rating, setRating] = useState(review.rating)
-  const [comment, setComment] = useState(review.comment ?? "")
-  const [watchedAt, setWatchedAt] = useState<Date>(() => parseLocalDate(review.watched_at))
-  const [dateChanged, setDateChanged] = useState(false)
-  const [watchMedium, setWatchMedium] = useState<string | undefined>(review.watch_medium)
-  const editMutation = useEditReview()
-
-  function handleDateChange(d: Date) {
-    setWatchedAt(d)
-    setDateChanged(true)
-  }
-
-  function handleSubmit() {
-    if (!rating) return
-
-    const data: Partial<EditReviewRequest> = {}
-    if (rating !== review.rating) data.rating = rating
-    const newComment = comment || null
-    if (newComment !== (review.comment ?? null)) data.comment = newComment
-    if (dateChanged) data.watched_at = formatLocalDateTime(watchedAt)
-    if (watchMedium !== review.watch_medium) data.watch_medium = watchMedium ?? null
-
-    if (Object.keys(data).length === 0) {
-      toast.info(t("editReview.noChanges"))
-      onOpenChange(false)
-      return
-    }
-
-    editMutation.mutate(
-      { id: review.id, data },
-      {
-        onSuccess: () => {
-          hapticMedium()
-          toast.success(t("editReview.saved", { title: movie.title }))
-          onOpenChange(false)
-        },
-      },
-    )
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <DrawerContent className="mx-auto max-w-lg">
-        <VisuallyHidden.Root><DrawerTitle>{t("editReview.title")}</DrawerTitle></VisuallyHidden.Root>
-        <div className="p-5 pb-8">
-          <div className="mb-5 flex gap-3">
-            <div className="h-24 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-muted">
-              {movie.poster_path && <img src={posterUrl(movie.poster_path)} alt="" className="size-full object-cover" />}
-            </div>
-            <div>
-              <p className="text-lg font-bold">{movie.title}</p>
-              <p className="text-sm text-muted-foreground">{movie.release_year}{movie.director && ` · ${movie.director}`}</p>
-            </div>
-          </div>
-
-          <ReviewFormFields
-            rating={rating}
-            onRatingChange={setRating}
-            comment={comment}
-            onCommentChange={setComment}
-            watchedAt={watchedAt}
-            onWatchedAtChange={handleDateChange}
-            watchMedium={watchMedium}
-            onWatchMediumChange={setWatchMedium}
-          />
-
-          <Button onClick={handleSubmit} disabled={!rating || editMutation.isPending} className="w-full" size="lg">
-            {editMutation.isPending ? t("editReview.saving") : t("editReview.save")}
-          </Button>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}

spa/src/components/feed-tab.tsx

@@ -0,0 +1,146 @@
+import { useCallback, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Film, RefreshCw } from "lucide-react"
+import { ReviewCard } from "@/components/review-card"
+import { EmptyState } from "@/components/empty-state"
+import { SwipeToDelete } from "@/components/swipe-to-delete"
+import { VirtualList } from "@/components/virtual-list"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useAuth } from "@/components/auth-provider"
+import { useQueryClient } from "@tanstack/react-query"
+import { ReviewSheet } from "@/components/review-sheet"
+import { ReviewDetailSheet } from "@/components/review-detail-sheet"
+import { useInfiniteActivityFeed, useDeleteReview } from "@/features/diary"
+import type { FeedEntryDto } from "@/features/diary"
+
+export function FeedSkeleton() {
+  return (
+    <div className="space-y-2">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex gap-3 rounded-xl bg-card p-3">
+          <Skeleton className="h-[84px] w-14 rounded-lg" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-3 w-20" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-24" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function FeedTab() {
+  const { t } = useTranslation()
+  const { auth } = useAuth()
+  const qc = useQueryClient()
+  const [refreshing, setRefreshing] = useState(false)
+  const [sortBy, setSortBy] = useState("date")
+  const feedSortOptions = [
+    { value: "date", label: t("feed.sortLatest") },
+    { value: "date_asc", label: t("feed.sortOldest") },
+    { value: "rating", label: t("feed.sortTopRated") },
+    { value: "rating_asc", label: t("feed.sortLowestRated") },
+  ] as const
+  const { data, isPending, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteActivityFeed({ sort_by: sortBy })
+  const deleteReview = useDeleteReview()
+  const [editingEntry, setEditingEntry] = useState<FeedEntryDto | null>(null)
+  const [detailEntry, setDetailEntry] = useState<FeedEntryDto | null>(null)
+  const items = data?.pages.flatMap((p) => p.items) ?? []
+  const loadMore = useCallback(() => fetchNextPage(), [fetchNextPage])
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-end gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={async () => {
+            setRefreshing(true)
+            await qc.refetchQueries({ queryKey: ["activity-feed"] })
+            setRefreshing(false)
+          }}
+        >
+          <RefreshCw className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+        </Button>
+        <Select value={sortBy} onValueChange={setSortBy}>
+          <SelectTrigger className="w-36">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {feedSortOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {isPending && <FeedSkeleton />}
+
+      {!isPending && !items.length && (
+        <EmptyState icon={Film} title={t("feed.noActivity")} description={t("feed.noActivityDesc")} />
+      )}
+
+      {items.length > 0 && (
+        <VirtualList
+          items={items}
+          estimateSize={120}
+          hasMore={!!hasNextPage}
+          isFetching={isFetchingNextPage}
+          onLoadMore={loadMore}
+          renderItem={(entry) => {
+            const isOwn = entry.user_id === auth?.user_id
+            const card = (
+              <ReviewCard
+                movie={entry.movie}
+                review={entry.review}
+                userName={entry.user_display_name}
+                userId={entry.user_id}
+                isFederated={entry.is_federated}
+                actorUrl={entry.actor_url}
+                onEdit={isOwn ? () => setEditingEntry(entry) : undefined}
+                onShowDetail={entry.review.comment ? () => setDetailEntry(entry) : undefined}
+              />
+            )
+            return isOwn ? (
+              <SwipeToDelete
+                onDelete={() => deleteReview.mutate(entry.review.id)}
+                confirmTitle={t("feed.deleteReview")}
+                confirmDescription={entry.movie.title}
+              >
+                {card}
+              </SwipeToDelete>
+            ) : (
+              card
+            )
+          }}
+        />
+      )}
+
+      {editingEntry && (
+        <ReviewSheet
+          key={editingEntry.review.id}
+          mode="edit"
+          open={!!editingEntry}
+          onOpenChange={(open) => !open && setEditingEntry(null)}
+          movie={editingEntry.movie}
+          review={editingEntry.review}
+        />
+      )}
+
+      {detailEntry && (
+        <ReviewDetailSheet
+          open={!!detailEntry}
+          onOpenChange={(open) => !open && setDetailEntry(null)}
+          movie={detailEntry.movie}
+          review={detailEntry.review}
+          userName={detailEntry.user_display_name}
+        />
+      )}
+    </div>
+  )
+}

spa/src/components/goal-card.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
-import type { GoalDto } from "@/lib/api/users"
+import type { GoalDto } from "@/features/users"
 
 type GoalCardProps = {
   goal: GoalDto

spa/src/components/goal-sheet.tsx

@@ -5,7 +5,7 @@ import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { useCreateGoal, useUpdateGoal } from "@/hooks/use-goals"
+import { useCreateGoal, useUpdateGoal } from "@/features/goals"
 import { toast } from "sonner"
 
 type GoalSheetProps = {

spa/src/components/log-sheet.tsx

@@ -1,106 +0,0 @@
-import { useState } from "react"
-import { useTranslation } from "react-i18next"
-import { VisuallyHidden } from "radix-ui"
-import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer"
-import { Button } from "@/components/ui/button"
-import { ReviewFormFields } from "@/components/review-form-fields"
-import { SearchOverlay } from "@/components/search-overlay"
-import type { MovieSelection } from "@/components/search-overlay"
-import { useLogReview } from "@/hooks/use-diary"
-import { toast } from "sonner"
-import { posterUrl } from "@/lib/api/client"
-import { hapticMedium } from "@/lib/haptics"
-
-type LogSheetProps = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-export function LogSheet({ open, onOpenChange }: LogSheetProps) {
-  const { t } = useTranslation()
-  const [movie, setMovie] = useState<MovieSelection | null>(null)
-  const [rating, setRating] = useState(0)
-  const [comment, setComment] = useState("")
-  const [watchedAt, setWatchedAt] = useState<Date>(new Date())
-  const [watchMedium, setWatchMedium] = useState<string | undefined>()
-  const logMutation = useLogReview()
-
-  function reset() {
-    setMovie(null)
-    setRating(0)
-    setComment("")
-    setWatchedAt(new Date())
-    setWatchMedium(undefined)
-  }
-
-  function handleClose() {
-    onOpenChange(false)
-    reset()
-  }
-
-  function handleSubmit() {
-    if (!movie || !rating) return
-    logMutation.mutate(
-      {
-        external_metadata_id: movie.external_metadata_id,
-        manual_title: movie.title,
-        manual_release_year: movie.release_year,
-        manual_director: movie.director,
-        rating,
-        comment: comment || undefined,
-        watched_at: watchedAt.toISOString().replace("Z", "").split(".")[0]!,
-        watch_medium: watchMedium,
-      },
-      {
-        onSuccess: () => {
-          hapticMedium()
-          toast.success(t("logReview.logged", { title: movie.title }))
-          handleClose()
-        },
-      },
-    )
-  }
-
-  if (open && !movie) {
-    return <SearchOverlay open onClose={handleClose} onSelect={(m) => setMovie(m)} />
-  }
-
-  return (
-    <Drawer open={open && !!movie} onOpenChange={(o) => !o && handleClose()}>
-      <DrawerContent className="mx-auto max-w-lg">
-        <VisuallyHidden.Root><DrawerTitle>{t("logReview.title")}</DrawerTitle></VisuallyHidden.Root>
-        <div className="p-5 pb-8">
-          {movie && (
-            <>
-              <div className="mb-5 flex gap-3">
-                <div className="h-24 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-muted">
-                  {movie.poster_path && <img src={posterUrl(movie.poster_path)} alt="" className="size-full object-cover" />}
-                </div>
-                <div>
-                  <p className="text-lg font-bold">{movie.title}</p>
-                  <p className="text-sm text-muted-foreground">{movie.release_year}{movie.director && ` · ${movie.director}`}</p>
-                  {movie.genres.length > 0 && <p className="mt-1 text-xs text-muted-foreground">{movie.genres.join(", ")}</p>}
-                </div>
-              </div>
-
-              <ReviewFormFields
-                rating={rating}
-                onRatingChange={setRating}
-                comment={comment}
-                onCommentChange={setComment}
-                watchedAt={watchedAt}
-                onWatchedAtChange={setWatchedAt}
-                watchMedium={watchMedium}
-                onWatchMediumChange={setWatchMedium}
-              />
-
-              <Button onClick={handleSubmit} disabled={!rating || logMutation.isPending} className="w-full" size="lg">
-                {logMutation.isPending ? t("logReview.logging") : t("logReview.logReview")}
-              </Button>
-            </>
-          )}
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}

spa/src/components/profile-view.tsx

@@ -12,9 +12,9 @@ import { MovieCard } from "@/components/movie-card"
 import { EmptyState } from "@/components/empty-state"
 import { SwipeTabs } from "@/components/swipe-tabs"
 import { VirtualList } from "@/components/virtual-list"
-import { useInfiniteDiary } from "@/hooks/use-diary"
+import { useInfiniteDiary } from "@/features/diary"
 import { TimeAgo } from "@/components/time-ago"
-import type { UserProfileResponse } from "@/lib/api/users"
+import type { UserProfileResponse } from "@/features/users"
 
 type ProfileViewProps = {
   data: UserProfileResponse

spa/src/components/queue-tab.tsx

@@ -0,0 +1,73 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Inbox } from "lucide-react"
+import { EmptyState } from "@/components/empty-state"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { StarRating } from "@/components/star-rating"
+import { useWatchQueue, useConfirmWatch, useDismissWatch } from "@/features/webhooks"
+import { FeedSkeleton } from "@/components/feed-tab"
+
+export function QueueTab() {
+  const { t } = useTranslation()
+  const { data, isPending } = useWatchQueue()
+  const confirmMutation = useConfirmWatch()
+  const dismissMutation = useDismissWatch()
+  const [ratings, setRatings] = useState<Record<string, number>>({})
+  const [comments, setComments] = useState<Record<string, string>>({})
+
+  if (isPending) return <FeedSkeleton />
+  if (!data?.length)
+    return <EmptyState icon={Inbox} title={t("feed.queueEmpty")} description={t("feed.queueEmptyDesc")} />
+
+  return (
+    <div className="space-y-3">
+      {data.map((entry) => (
+        <div key={entry.id} className="rounded-xl bg-card p-3">
+          <p className="font-semibold">{entry.title}</p>
+          <p className="text-xs text-muted-foreground">
+            {entry.year && `${entry.year} · `}{entry.source} · {entry.watched_at}
+          </p>
+          <div className="mt-2">
+            <StarRating
+              value={ratings[entry.id] ?? 0}
+              onChange={(v) => setRatings((p) => ({ ...p, [entry.id]: v }))}
+              size="sm"
+            />
+          </div>
+          <Textarea
+            className="mt-2"
+            placeholder={t("logReview.commentPlaceholder")}
+            value={comments[entry.id] ?? ""}
+            onChange={(e) => setComments((p) => ({ ...p, [entry.id]: e.target.value }))}
+            rows={2}
+          />
+          <div className="mt-2 flex gap-2">
+            <Button
+              size="sm"
+              disabled={!ratings[entry.id]}
+              onClick={() =>
+                confirmMutation.mutate({
+                  confirmations: [{
+                    watch_event_id: entry.id,
+                    rating: ratings[entry.id]!,
+                    comment: comments[entry.id] || undefined,
+                  }],
+                })
+              }
+            >
+              {t("common.confirm")}
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => dismissMutation.mutate({ event_ids: [entry.id] })}
+            >
+              {t("common.dismiss")}
+            </Button>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

spa/src/components/review-sheet.tsx

@@ -0,0 +1,241 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { VisuallyHidden } from "radix-ui"
+import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer"
+import { Button } from "@/components/ui/button"
+import { ReviewFormFields } from "@/components/review-form-fields"
+import { SearchOverlay } from "@/components/search-overlay"
+import type { MovieSelection } from "@/components/search-overlay"
+import { useLogReview, useEditReview } from "@/features/diary"
+import { toast } from "sonner"
+import { posterUrl } from "@/lib/api/client"
+import { hapticMedium } from "@/lib/haptics"
+import { parseLocalDate, formatLocalDateTime } from "@/lib/date"
+import type { EditReviewRequest } from "@/features/diary"
+import type { MovieDto, ReviewDto } from "@/lib/api/common"
+
+type LogMode = {
+  mode: "log"
+}
+
+type EditMode = {
+  mode: "edit"
+  movie: MovieDto
+  review: ReviewDto
+}
+
+type ReviewSheetProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+} & (LogMode | EditMode)
+
+export function ReviewSheet(props: ReviewSheetProps) {
+  if (props.mode === "log") {
+    return <LogMode open={props.open} onOpenChange={props.onOpenChange} />
+  }
+  return (
+    <EditMode
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      movie={props.movie}
+      review={props.review}
+    />
+  )
+}
+
+function LogMode({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const { t } = useTranslation()
+  const [movie, setMovie] = useState<MovieSelection | null>(null)
+  const [rating, setRating] = useState(0)
+  const [comment, setComment] = useState("")
+  const [watchedAt, setWatchedAt] = useState<Date>(new Date())
+  const [watchMedium, setWatchMedium] = useState<string | undefined>()
+  const logMutation = useLogReview()
+
+  function reset() {
+    setMovie(null)
+    setRating(0)
+    setComment("")
+    setWatchedAt(new Date())
+    setWatchMedium(undefined)
+  }
+
+  function handleClose() {
+    onOpenChange(false)
+    reset()
+  }
+
+  function handleSubmit() {
+    if (!movie || !rating) return
+    logMutation.mutate(
+      {
+        external_metadata_id: movie.external_metadata_id,
+        manual_title: movie.title,
+        manual_release_year: movie.release_year,
+        manual_director: movie.director,
+        rating,
+        comment: comment || undefined,
+        watched_at: watchedAt.toISOString().replace("Z", "").split(".")[0]!,
+        watch_medium: watchMedium,
+      },
+      {
+        onSuccess: () => {
+          hapticMedium()
+          toast.success(t("logReview.logged", { title: movie.title }))
+          handleClose()
+        },
+      },
+    )
+  }
+
+  if (open && !movie) {
+    return <SearchOverlay open onClose={handleClose} onSelect={(m) => setMovie(m)} />
+  }
+
+  return (
+    <Drawer open={open && !!movie} onOpenChange={(o) => !o && handleClose()}>
+      <DrawerContent className="mx-auto max-w-lg">
+        <VisuallyHidden.Root><DrawerTitle>{t("logReview.title")}</DrawerTitle></VisuallyHidden.Root>
+        <div className="p-5 pb-8">
+          {movie && (
+            <>
+              <MovieHeader
+                title={movie.title}
+                releaseYear={movie.release_year}
+                director={movie.director}
+                posterPath={movie.poster_path}
+                genres={movie.genres}
+              />
+
+              <ReviewFormFields
+                rating={rating}
+                onRatingChange={setRating}
+                comment={comment}
+                onCommentChange={setComment}
+                watchedAt={watchedAt}
+                onWatchedAtChange={setWatchedAt}
+                watchMedium={watchMedium}
+                onWatchMediumChange={setWatchMedium}
+              />
+
+              <Button onClick={handleSubmit} disabled={!rating || logMutation.isPending} className="w-full" size="lg">
+                {logMutation.isPending ? t("logReview.logging") : t("logReview.logReview")}
+              </Button>
+            </>
+          )}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function EditMode({
+  open,
+  onOpenChange,
+  movie,
+  review,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  movie: MovieDto
+  review: ReviewDto
+}) {
+  const { t } = useTranslation()
+  const [rating, setRating] = useState(review.rating)
+  const [comment, setComment] = useState(review.comment ?? "")
+  const [watchedAt, setWatchedAt] = useState<Date>(() => parseLocalDate(review.watched_at))
+  const [dateChanged, setDateChanged] = useState(false)
+  const [watchMedium, setWatchMedium] = useState<string | undefined>(review.watch_medium)
+  const editMutation = useEditReview()
+
+  function handleDateChange(d: Date) {
+    setWatchedAt(d)
+    setDateChanged(true)
+  }
+
+  function handleSubmit() {
+    if (!rating) return
+
+    const data: Partial<EditReviewRequest> = {}
+    if (rating !== review.rating) data.rating = rating
+    const newComment = comment || null
+    if (newComment !== (review.comment ?? null)) data.comment = newComment
+    if (dateChanged) data.watched_at = formatLocalDateTime(watchedAt)
+    if (watchMedium !== review.watch_medium) data.watch_medium = watchMedium ?? null
+
+    if (Object.keys(data).length === 0) {
+      toast.info(t("editReview.noChanges"))
+      onOpenChange(false)
+      return
+    }
+
+    editMutation.mutate(
+      { id: review.id, data },
+      {
+        onSuccess: () => {
+          hapticMedium()
+          toast.success(t("editReview.saved", { title: movie.title }))
+          onOpenChange(false)
+        },
+      },
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent className="mx-auto max-w-lg">
+        <VisuallyHidden.Root><DrawerTitle>{t("editReview.title")}</DrawerTitle></VisuallyHidden.Root>
+        <div className="p-5 pb-8">
+          <MovieHeader
+            title={movie.title}
+            releaseYear={movie.release_year}
+            director={movie.director}
+            posterPath={movie.poster_path}
+          />
+
+          <ReviewFormFields
+            rating={rating}
+            onRatingChange={setRating}
+            comment={comment}
+            onCommentChange={setComment}
+            watchedAt={watchedAt}
+            onWatchedAtChange={handleDateChange}
+            watchMedium={watchMedium}
+            onWatchMediumChange={setWatchMedium}
+          />
+
+          <Button onClick={handleSubmit} disabled={!rating || editMutation.isPending} className="w-full" size="lg">
+            {editMutation.isPending ? t("editReview.saving") : t("editReview.save")}
+          </Button>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function MovieHeader({
+  title,
+  releaseYear,
+  director,
+  posterPath,
+  genres,
+}: {
+  title: string
+  releaseYear?: number
+  director?: string | null
+  posterPath?: string | null
+  genres?: string[]
+}) {
+  return (
+    <div className="mb-5 flex gap-3">
+      <div className="h-24 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-muted">
+        {posterPath && <img src={posterUrl(posterPath)} alt="" className="size-full object-cover" />}
+      </div>
+      <div>
+        <p className="text-lg font-bold">{title}</p>
+        <p className="text-sm text-muted-foreground">{releaseYear}{director && ` · ${director}`}</p>
+        {genres && genres.length > 0 && <p className="mt-1 text-xs text-muted-foreground">{genres.join(", ")}</p>}
+      </div>
+    </div>
+  )
+}

spa/src/components/search-overlay.tsx

@@ -7,7 +7,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Skeleton } from "@/components/ui/skeleton"
-import { useSearch } from "@/hooks/use-search"
+import { useSearch } from "@/features/search"
 import { useDebounce } from "@/hooks/use-debounce"
 import { posterUrl } from "@/lib/api/client"
 

spa/src/components/viewing-history.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next"
+import { TrendingUp } from "lucide-react"
+import { StarDisplay } from "@/components/star-display"
+import { shortDate } from "@/lib/date"
+import type { ReviewHistoryResponse } from "@/features/movies"
+
+export function ViewingHistory({ history }: { history: ReviewHistoryResponse }) {
+  const { t } = useTranslation()
+
+  if (history.viewings.length === 0) return null
+
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("movie.yourHistory")}</h3>
+      <div className="space-y-2">
+        {history.trend && (
+          <div className="flex items-center gap-2 rounded-xl bg-card p-3 text-xs text-muted-foreground">
+            <TrendingUp className="size-3.5" />
+            {t("movie.trend", { trend: history.trend })}
+          </div>
+        )}
+        {history.viewings.map((v) => (
+          <div key={v.id} className="flex items-center justify-between rounded-xl bg-card p-3">
+            <div>
+              <p className="text-sm font-medium">{shortDate(v.watched_at)}</p>
+              {v.comment && (
+                <p className="mt-0.5 text-xs text-muted-foreground line-clamp-1">{v.comment}</p>
+              )}
+            </div>
+            <StarDisplay rating={v.rating} size="xs" />
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}

spa/src/components/watchlist-tab.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Clapperboard, Plus } from "lucide-react"
+import { MovieCard } from "@/components/movie-card"
+import { EmptyState } from "@/components/empty-state"
+import { SwipeToDelete } from "@/components/swipe-to-delete"
+import { VirtualList } from "@/components/virtual-list"
+import { Button } from "@/components/ui/button"
+import { SearchOverlay } from "@/components/search-overlay"
+import type { MovieSelection } from "@/components/search-overlay"
+import { useInfiniteWatchlist, useAddToWatchlist, useRemoveFromWatchlist } from "@/features/watchlist"
+import { FeedSkeleton } from "@/components/feed-tab"
+
+export function WatchlistTab() {
+  const { t } = useTranslation()
+  const { data, isPending, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useInfiniteWatchlist()
+  const items = data?.pages.flatMap((p) => p.items) ?? []
+  const addMutation = useAddToWatchlist()
+  const removeMutation = useRemoveFromWatchlist()
+  const loadMore = useCallback(() => fetchNextPage(), [fetchNextPage])
+  const [searchOpen, setSearchOpen] = useState(false)
+
+  function handleAdd(movie: MovieSelection) {
+    setSearchOpen(false)
+    addMutation.mutate(
+      movie.id
+        ? { movie_id: movie.id }
+        : {
+            external_metadata_id: movie.external_metadata_id,
+            manual_title: movie.title,
+            manual_release_year: movie.release_year,
+          },
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <Button variant="outline" size="sm" className="w-full" onClick={() => setSearchOpen(true)}>
+        <Plus className="mr-1 size-4" />
+        {t("feed.addToWatchlist")}
+      </Button>
+
+      {searchOpen && (
+        <SearchOverlay open onClose={() => setSearchOpen(false)} onSelect={handleAdd} />
+      )}
+
+      {isPending && <FeedSkeleton />}
+
+      {!isPending && !items.length && (
+        <EmptyState icon={Clapperboard} title={t("feed.watchlistEmpty")} description={t("feed.watchlistEmptyDesc")} />
+      )}
+
+      {items.length > 0 && (
+        <VirtualList
+          items={items}
+          estimateSize={110}
+          hasMore={!!hasNextPage}
+          isFetching={isFetchingNextPage}
+          onLoadMore={loadMore}
+          renderItem={(entry) => (
+            <SwipeToDelete
+              onDelete={() => removeMutation.mutate(entry.movie.id)}
+              confirmTitle={t("feed.removeFromWatchlist")}
+              confirmDescription={entry.movie.title}
+            >
+              <MovieCard movie={entry.movie} variant="full" />
+            </SwipeToDelete>
+          )}
+        />
+      )}
+    </div>
+  )
+}

spa/src/components/wrapup-fun-facts.tsx

@@ -3,7 +3,7 @@ import { Lightbulb } from "lucide-react"
 import { fmtUsd } from "@/lib/format"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { RevealCard } from "@/components/reveal-card"
-import type { WrapUpReport } from "@/lib/api/wrapup"
+import type { WrapUpReport } from "@/features/wrapup"
 
 export function FunFacts({ report, watchHours }: { report: WrapUpReport; watchHours: number }) {
   const { t } = useTranslation()

spa/src/components/wrapup-hero.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
 import { Card, CardContent } from "@/components/ui/card"
 import { RevealCard } from "@/components/reveal-card"
 import { useCountUp } from "@/hooks/use-animate"
-import type { WrapUpReport } from "@/lib/api/wrapup"
+import type { WrapUpReport } from "@/features/wrapup"
 
 export function HeroCard({ report, watchHours }: { report: WrapUpReport; watchHours: number }) {
   const { t } = useTranslation()

spa/src/components/wrapup-rank-card.tsx

@@ -4,7 +4,7 @@ import { Users } from "lucide-react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { tmdbProfileUrl } from "@/lib/api/client"
-import type { PersonStat } from "@/lib/api/wrapup"
+import type { PersonStat } from "@/features/wrapup"
 
 export function RankCard({ title, subtitle, items, profilePaths }: { title: string; subtitle: string; items: PersonStat[]; profilePaths?: string[] }) {
   const { t } = useTranslation()

spa/src/components/wrapup-share-card.tsx

@@ -4,7 +4,7 @@ import { Download, Share2, X } from "lucide-react"
 import html2canvas from "html2canvas-pro"
 import { Button } from "@/components/ui/button"
 import { posterUrl } from "@/lib/api/client"
-import type { WrapUpReport } from "@/lib/api/wrapup"
+import type { WrapUpReport } from "@/features/wrapup"
 const logoSrc = `${import.meta.env.BASE_URL}logo.webp`
 const bgSrc = `${import.meta.env.BASE_URL}shareable_bg.jpg`