feat: SPA bug fixes, interactivity, federation badges, admin reindex

- fix wrapup status "completed" → "Ready" - fix unfollow sending {handle} instead of {actor_url} - fix missing post import in users.ts - fix feed/activity cache not invalidated on review delete/log - add person_id to cast/crew types, link to /people pages - add movie_id to wrapup MovieRef, link highlights to /movies pages - add wrapup actor profile images + clickable person links - add federated review globe badge in feed and movie detail - add fediverse handle (@user@instance) in follower/following cards - add admin reindex search button in settings - add wrapup user picker for admins - add username/display_name to user summary type - use tmdbProfileUrl for person search results
2026-06-04 14:43:41 +02:00
parent bd7dc648c4
commit 01c1082290
18 changed files with 159 additions and 30 deletions
--- a/spa/src/routes/_app/index.tsx
+++ b/spa/src/routes/_app/index.tsx
@@ -100,6 +100,7 @@ function FeedTab() {
                review={entry.review}
                userName={entry.user_display_name}
                userId={entry.user_id}
+                isFederated={entry.is_federated}
              />
            )
            return entry.user_id === auth?.user_id ? (
--- a/spa/src/routes/_app/movies.$id.tsx
+++ b/spa/src/routes/_app/movies.$id.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
-import { ArrowLeft, Bookmark, BookmarkCheck, Star, TrendingUp, User, Users } from "lucide-react"
+import { ArrowLeft, Bookmark, BookmarkCheck, Globe, Star, TrendingUp, User, Users } from "lucide-react"
 import { StarDisplay } from "@/components/star-display"
 import { RatingHistogram } from "@/components/rating-histogram"
 import { EmptyState } from "@/components/empty-state"
@@ -112,7 +112,10 @@ function MovieDetailPage() {
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
-                      <CardTitle className="text-sm">{r.user_display}</CardTitle>
+                      <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]">{r.watched_at.slice(0, 10)}</CardDescription>
                    </div>
                    <StarDisplay rating={r.rating} size="xs" />
@@ -233,7 +236,7 @@ function PersonStrip({ items, type }: { items: (CastMemberDto | CrewMemberDto)[]
          : (person as CrewMemberDto).job

        return (
-          <div key={`${person.tmdb_person_id}-${i}`} className="w-[72px] flex-shrink-0">
+          <Link key={`${person.tmdb_person_id}-${i}`} to="/people/$id" params={{ id: person.person_id }} className="w-[72px] flex-shrink-0">
            <div className="aspect-[2/3] overflow-hidden rounded-lg bg-muted">
              {person.profile_path ? (
                <img src={tmdbProfileUrl(person.profile_path)} alt="" className="size-full object-cover" loading="lazy" />
@@ -245,7 +248,7 @@ function PersonStrip({ items, type }: { items: (CastMemberDto | CrewMemberDto)[]
            </div>
            <p className="mt-1 truncate text-[11px] font-semibold leading-tight">{person.name}</p>
            <p className="truncate text-[10px] italic text-muted-foreground">{subtitle}</p>
-          </div>
+          </Link>
        )
      })}
    </div>
--- a/spa/src/routes/_app/profile.tsx
+++ b/spa/src/routes/_app/profile.tsx
@@ -52,7 +52,7 @@ function ProfilePage() {
 function WrapUpLink() {
  const { t } = useTranslation()
  const { data } = useWrapUps()
-  const latest = data?.items?.find((w) => w.status === "completed")
+  const latest = data?.items?.find((w) => w.status === "Ready")

  if (!latest) return null

--- a/spa/src/routes/_app/settings/index.tsx
+++ b/spa/src/routes/_app/settings/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
+import { useMutation } from "@tanstack/react-query"
 import {
  ArrowLeft,
  ChevronRight,
@@ -7,11 +8,14 @@ import {
  Globe,
  Key,
  LogOut,
+  RefreshCw,
  ShieldBan,
  Sparkles,
  User,
 } from "lucide-react"
+import { Button } from "@/components/ui/button"
 import { useAuth, useIsAdmin } from "@/components/auth-provider"
+import { reindexSearch } from "@/lib/api/users"

 export const Route = createFileRoute("/_app/settings/")({
  component: SettingsPage,
@@ -100,6 +104,8 @@ function SettingsPage() {
      <SettingsGroup label={t("settings.integrations")} items={integrations} />
      <SettingsGroup label={t("settings.socialGroup")} items={social} />

+      {isAdmin && <AdminActions />}
+
      <button
        onClick={handleLogout}
        className="w-full rounded-xl bg-card p-3 text-sm font-medium text-red-400"
@@ -113,6 +119,37 @@ function SettingsPage() {
  )
 }

+function AdminActions() {
+  const { t } = useTranslation()
+  const reindex = useMutation({
+    mutationFn: reindexSearch,
+  })
+
+  return (
+    <div>
+      <p className="mb-1.5 px-1 text-xs font-medium text-muted-foreground">
+        {t("settings.admin")}
+      </p>
+      <div className="divide-y divide-border rounded-xl bg-card">
+        <div className="flex items-center gap-3 p-3">
+          <span className="text-muted-foreground">
+            <RefreshCw className={`size-4 ${reindex.isPending ? "animate-spin" : ""}`} />
+          </span>
+          <div className="flex-1">
+            <p className="text-sm font-medium">{t("settings.rebuildSearch")}</p>
+            <p className="text-xs text-muted-foreground">
+              {reindex.isSuccess ? t("settings.rebuildSearchDone") : t("settings.rebuildSearchDesc")}
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => reindex.mutate()} disabled={reindex.isPending}>
+            {reindex.isPending ? t("common.generating") : t("common.run")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function SettingsGroup({
  label,
  items,
--- a/spa/src/routes/_app/settings/wrapup.tsx
+++ b/spa/src/routes/_app/settings/wrapup.tsx
@@ -15,12 +15,14 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Skeleton } from "@/components/ui/skeleton"
 import { EmptyState } from "@/components/empty-state"
-import { useIsAdmin } from "@/components/auth-provider"
+import { useAuth, useIsAdmin } from "@/components/auth-provider"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import {
  useWrapUps,
  useGenerateWrapUp,
  useDeleteWrapUp,
 } from "@/hooks/use-wrapup"
+import { useUsers } from "@/hooks/use-users"

 export const Route = createFileRoute("/_app/settings/wrapup")({
  component: WrapupPage,
@@ -28,18 +30,22 @@ export const Route = createFileRoute("/_app/settings/wrapup")({

 function WrapupPage() {
  const { t } = useTranslation()
+  const { auth } = useAuth()
  const isAdmin = useIsAdmin()
  const { data, isPending } = useWrapUps()
  const generate = useGenerateWrapUp()
  const remove = useDeleteWrapUp()

+  const { data: usersData } = useUsers()
  const [open, setOpen] = useState(false)
  const [startDate, setStartDate] = useState("")
  const [endDate, setEndDate] = useState("")
+  const [targetUserId, setTargetUserId] = useState<string>("self")

  const handleGenerate = () => {
+    const user_id = targetUserId === "global" ? undefined : targetUserId === "self" ? auth?.user_id : targetUserId
    generate.mutate(
-      { start_date: startDate, end_date: endDate },
+      { start_date: startDate, end_date: endDate, user_id },
      {
        onSuccess: () => {
          setOpen(false)
@@ -81,7 +87,7 @@ function WrapupPage() {
          {items.map((w) => (
            <Card key={w.id} size="sm">
              <CardContent className="flex items-center justify-between">
-                {w.status === "completed" ? (
+                {w.status === "Ready" ? (
                  <Link to="/wrapup/$id" params={{ id: w.id }} className="flex flex-1 items-center justify-between">
                    <div>
                      <p className="text-sm font-medium">{w.start_date} — {w.end_date}</p>
@@ -133,6 +139,25 @@ function WrapupPage() {
                onChange={(e) => setEndDate(e.target.value)}
              />
            </div>
+            {isAdmin && usersData?.users && (
+              <div className="space-y-1.5">
+                <Label>{t("wrapup.generateFor")}</Label>
+                <Select value={targetUserId} onValueChange={setTargetUserId}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="self">{t("wrapup.forSelf")}</SelectItem>
+                    <SelectItem value="global">{t("wrapup.forGlobal")}</SelectItem>
+                    {usersData.users.map((u) => (
+                      <SelectItem key={u.id} value={u.id}>
+                        {u.display_name ?? u.username ?? u.email}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
            <Button
              onClick={handleGenerate}
              disabled={generate.isPending || !startDate || !endDate}
--- a/spa/src/routes/_app/social.tsx
+++ b/spa/src/routes/_app/social.tsx
@@ -105,7 +105,7 @@ function OwnFollowingTab() {
            <Button
              variant="outline"
              size="sm"
-              onClick={() => unfollowMutation.mutate({ handle: actor.handle })}
+              onClick={() => unfollowMutation.mutate({ actor_url: actor.url })}
              disabled={unfollowMutation.isPending}
            >
              <UserMinus className="mr-1 size-3.5" />
@@ -217,6 +217,15 @@ function UserFollowersTab({ userId }: { userId: string }) {
  )
 }

+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() ?? "?"

@@ -228,7 +237,7 @@ function ActorCard({ actor, action }: { actor: RemoteActorDto; action?: React.Re
        </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">{actor.handle}</p>
+          <p className="truncate text-xs text-muted-foreground">{actorHandle(actor)}</p>
        </div>
        {action}
      </CardContent>
--- a/spa/src/routes/_app/users.$id.tsx
+++ b/spa/src/routes/_app/users.$id.tsx
@@ -41,7 +41,7 @@ function UserProfilePage() {
              <Button
                size="sm"
                variant="outline"
-                onClick={() => unfollowMutation.mutate({ handle: data.username })}
+                onClick={() => unfollowMutation.mutate({ actor_url: followingData?.actors.find((a) => a.handle === data.username)?.url ?? "" })}
                disabled={unfollowMutation.isPending}
              >
                <UserCheck className="mr-1 size-3.5" />
--- a/spa/src/routes/_app/wrapup.$id.tsx
+++ b/spa/src/routes/_app/wrapup.$id.tsx
@@ -5,7 +5,8 @@ import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { RatingHistogram } from "@/components/rating-histogram"
-import { posterUrl } from "@/lib/api/client"
+import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { useWrapUpReport } from "@/hooks/use-wrapup"
 import type { MovieRef, PersonStat } from "@/lib/api/wrapup"

@@ -82,6 +83,7 @@ function WrapUpReportPage() {
          title={t("wrapup.topActors")}
          subtitle={t("wrapup.uniqueActors", { count: report.actor_diversity })}
          items={report.top_actors.slice(0, 5)}
+          profilePaths={report.top_cast_profile_paths}
        />
      )}

@@ -175,7 +177,7 @@ function WrapUpReportPage() {
  )
 }

-function RankCard({ title, subtitle, items }: { title: string; subtitle: string; items: PersonStat[] }) {
+function RankCard({ title, subtitle, items, profilePaths }: { title: string; subtitle: string; items: PersonStat[]; profilePaths?: string[] }) {
  const { t } = useTranslation()
  return (
    <Card>
@@ -187,15 +189,38 @@ function RankCard({ title, subtitle, items }: { title: string; subtitle: string;
      </CardHeader>
      <CardContent>
        <ol className="space-y-2">
-          {items.map((item, i) => (
-            <li key={item.name} className="flex items-center gap-3">
-              <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs font-bold">{i + 1}</span>
-              <div className="flex-1">
-                <p className="text-sm font-medium">{item.name}</p>
-                <p className="text-xs text-muted-foreground">{t("common.filmsAvg", { count: item.count, avg: item.avg_rating.toFixed(1) })}★</p>
-              </div>
-            </li>
-          ))}
+          {items.map((item, i) => {
+            const profilePath = profilePaths?.[i]
+            return (
+              <li key={item.name}>
+                {item.person_id ? (
+                  <Link to="/people/$id" params={{ id: item.person_id }} className="flex items-center gap-3">
+                    <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs font-bold">{i + 1}</span>
+                    <Avatar className="size-8">
+                      {profilePath && <AvatarImage src={tmdbProfileUrl(profilePath)} />}
+                      <AvatarFallback className="text-xs">{item.name[0]}</AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1">
+                      <p className="text-sm font-medium">{item.name}</p>
+                      <p className="text-xs text-muted-foreground">{t("common.filmsAvg", { count: item.count, avg: item.avg_rating.toFixed(1) })}★</p>
+                    </div>
+                  </Link>
+                ) : (
+                  <div className="flex items-center gap-3">
+                    <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs font-bold">{i + 1}</span>
+                    <Avatar className="size-8">
+                      {profilePath && <AvatarImage src={tmdbProfileUrl(profilePath)} />}
+                      <AvatarFallback className="text-xs">{item.name[0]}</AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1">
+                      <p className="text-sm font-medium">{item.name}</p>
+                      <p className="text-xs text-muted-foreground">{t("common.filmsAvg", { count: item.count, avg: item.avg_rating.toFixed(1) })}★</p>
+                    </div>
+                  </div>
+                )}
+              </li>
+            )
+          })}
        </ol>
      </CardContent>
    </Card>
@@ -204,7 +229,7 @@ function RankCard({ title, subtitle, items }: { title: string; subtitle: string;

 function MovieHighlight({ label, movie, showRuntime }: { label: string; movie?: MovieRef; showRuntime?: boolean }) {
  if (!movie) return null
-  return (
+  const content = (
    <div className="overflow-hidden rounded-xl bg-muted">
      {movie.poster_path && (
        <div className="aspect-[2/3] w-full">
@@ -220,6 +245,10 @@ function MovieHighlight({ label, movie, showRuntime }: { label: string; movie?:
      </div>
    </div>
  )
+  if (movie.movie_id) {
+    return <Link to="/movies/$id" params={{ id: movie.movie_id }}>{content}</Link>
+  }
+  return content
 }

 function ReportSkeleton() {