GKaszewski/movies-diary
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Gabriel Kaszewski
2026-07-10 17:38:58 +02:00
parent 89045414cf
commit 0ee2e04fe5
61 changed files with 1753 additions and 1810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
spa/src/routes/_app/diary.tsx
View File

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react"
import { useTranslation } from "react-i18next"
import { BookOpen, ChevronLeft, ChevronRight, Pencil } from "lucide-react"
import { format, startOfMonth, subMonths } from "date-fns"
import { EditReviewSheet } from "@/components/edit-review-sheet"
import { ReviewSheet } from "@/components/review-sheet"
import { EditableContextMenu } from "@/components/editable-context-menu"
import { MovieCard } from "@/components/movie-card"
import { EmptyState } from "@/components/empty-state"
@@ -13,7 +13,7 @@ import { VirtualList } from "@/components/virtual-list"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { useAuth } from "@/components/auth-provider"
import { useInfiniteDiary, useDeleteReview } from "@/hooks/use-diary"
import { useInfiniteDiary, useDeleteReview } from "@/features/diary"
import { useDocumentTitle } from "@/hooks/use-document-title"
import type { DiaryEntryDto } from "@/lib/api/common"
@@ -145,8 +145,9 @@ function DiaryPage() {
)}
{editingEntry && (
<EditReviewSheet
<ReviewSheet
key={editingEntry.review.id}
mode="edit"
open={!!editingEntry}
onOpenChange={(open) => !open && setEditingEntry(null)}
movie={editingEntry.movie}

280
spa/src/routes/_app/index.tsx
View File

@@ -1,28 +1,9 @@
import { createFileRoute } from "@tanstack/react-router"
import { useCallback, useState } from "react"
import { useTranslation } from "react-i18next"
import { Clapperboard, Film, Inbox, Plus, RefreshCw } from "lucide-react"
import { ReviewCard } from "@/components/review-card"
import { MovieCard } from "@/components/movie-card"
import { EmptyState } from "@/components/empty-state"
import { SwipeTabs } from "@/components/swipe-tabs"
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 { Textarea } from "@/components/ui/textarea"
import { StarRating } from "@/components/star-rating"
import { useAuth } from "@/components/auth-provider"
import { useQueryClient } from "@tanstack/react-query"
import { EditReviewSheet } from "@/components/edit-review-sheet"
import { ReviewDetailSheet } from "@/components/review-detail-sheet"
import { useInfiniteActivityFeed, useDeleteReview } from "@/hooks/use-diary"
import type { FeedEntryDto } from "@/lib/api/diary"
import { SearchOverlay } from "@/components/search-overlay"
import type { MovieSelection } from "@/components/search-overlay"
import { useInfiniteWatchlist, useAddToWatchlist, useRemoveFromWatchlist } from "@/hooks/use-watchlist"
import { useWatchQueue, useConfirmWatch, useDismissWatch } from "@/hooks/use-webhooks"
import { FeedTab } from "@/components/feed-tab"
import { WatchlistTab } from "@/components/watchlist-tab"
import { QueueTab } from "@/components/queue-tab"
export const Route = createFileRoute("/_app/")({
component: HomePage,
@@ -53,258 +34,3 @@ function HomePage() {
</div>
)
}
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 && (
<EditReviewSheet
key={editingEntry.review.id}
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>
)
}
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>
)
}
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>
)
}
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>
)
}

73
spa/src/routes/_app/movies.$id.tsx
View File

@@ -1,26 +1,24 @@
import { createFileRoute, Link } from "@tanstack/react-router"
import { useTranslation } from "react-i18next"
import { Bookmark, BookmarkCheck, Globe, Star, TrendingUp, User, Users } from "lucide-react"
import { Bookmark, BookmarkCheck, Star, User } from "lucide-react"
import { BackButton } from "@/components/back-button"
import { CommunityReviews } from "@/components/community-reviews"
import { ViewingHistory } from "@/components/viewing-history"
import { StarDisplay } from "@/components/star-display"
import { WatchMediumBadge } from "@/components/watch-medium-badge"
import { RatingHistogram } from "@/components/rating-histogram"
import { EmptyState } from "@/components/empty-state"
import { HorizontalStrip } from "@/components/horizontal-strip"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
import { timeAgo, shortDate } from "@/lib/date"
import { useMovie, useMovieHistory, useMovieProfile } from "@/hooks/use-movies"
import { useMovie, useMovieHistory, useMovieProfile } from "@/features/movies"
import { useDocumentTitle } from "@/hooks/use-document-title"
import {
useWatchlistStatus,
useAddToWatchlist,
useRemoveFromWatchlist,
} from "@/hooks/use-watchlist"
import type { CastMemberDto, CrewMemberDto } from "@/lib/api/movies"
} from "@/features/watchlist"
import type { CastMemberDto, CrewMemberDto } from "@/features/movies"
export const Route = createFileRoute("/_app/movies/$id")({
component: MovieDetailPage,
@@ -105,64 +103,9 @@ function MovieDetailPage() {
</section>
)}
<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>
<CommunityReviews reviews={reviews} />
{history && history.viewings.length > 0 && (
<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>
)}
{history && <ViewingHistory history={history} />}
</div>
)
}

2
spa/src/routes/_app/people.$id.tsx
View File

@@ -13,7 +13,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Skeleton } from "@/components/ui/skeleton"
import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
import { usePersonCredits } from "@/hooks/use-search"
import { usePersonCredits } from "@/features/search"
import { useDocumentTitle } from "@/hooks/use-document-title"
import { shortDate } from "@/lib/date"
import { differenceInYears, parseISO } from "date-fns"

8
spa/src/routes/_app/profile.tsx
View File

@@ -5,14 +5,14 @@ import { ChevronDown, ChevronRight, Plus, Settings, Sparkles } from "lucide-reac
import { Button } from "@/components/ui/button"
import { ProfileView, ProfileSkeleton } from "@/components/profile-view"
import { useAuth } from "@/components/auth-provider"
import { useWrapUps } from "@/hooks/use-wrapup"
import { useUserProfile } from "@/hooks/use-users"
import { useDeleteGoal } from "@/hooks/use-goals"
import { useWrapUps } from "@/features/wrapup"
import { useUserProfile } from "@/features/users"
import { useDeleteGoal } from "@/features/goals"
import { GoalCard } from "@/components/goal-card"
import { GoalSheet } from "@/components/goal-sheet"
import { toast } from "sonner"
import { useDocumentTitle } from "@/hooks/use-document-title"
import type { GoalDto } from "@/lib/api/users"
import type { GoalDto } from "@/features/users"
export const Route = createFileRoute("/_app/profile")({
component: ProfilePage,

4
spa/src/routes/_app/search.tsx
View File

@@ -9,10 +9,10 @@ import { PersonRow } from "@/components/person-row"
import { EmptyState } from "@/components/empty-state"
import { InfiniteScroll } from "@/components/infinite-scroll"
import { Skeleton } from "@/components/ui/skeleton"
import { useInfiniteSearch } from "@/hooks/use-search"
import { useInfiniteSearch } from "@/features/search"
import { useDebounce } from "@/hooks/use-debounce"
import { useDocumentTitle } from "@/hooks/use-document-title"
import { useAddToWatchlist } from "@/hooks/use-watchlist"
import { useAddToWatchlist } from "@/features/watchlist"
import { toast } from "sonner"
export const Route = createFileRoute("/_app/search")({

2
spa/src/routes/_app/settings/blocked.tsx
View File

@@ -14,7 +14,7 @@ import {
useBlockedDomains,
useAddBlockedDomain,
useRemoveBlockedDomain,
} from "@/hooks/use-social"
} from "@/features/social"
import { useDocumentTitle } from "@/hooks/use-document-title"
export const Route = createFileRoute("/_app/settings/blocked")({

2
spa/src/routes/_app/settings/edit-profile.tsx
View File

@@ -9,7 +9,7 @@ import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { Skeleton } from "@/components/ui/skeleton"
import { useProfile, useUpdateProfile, useUpdateProfileFields } from "@/hooks/use-users"
import { useProfile, useUpdateProfile, useUpdateProfileFields } from "@/features/users"
import { useDocumentTitle } from "@/hooks/use-document-title"
export const Route = createFileRoute("/_app/settings/edit-profile")({

4
spa/src/routes/_app/settings/import.tsx
View File

@@ -32,9 +32,9 @@ import {
useImportProfiles,
useSaveImportProfile,
useDeleteImportProfile,
} from "@/hooks/use-imports"
} from "@/features/imports"
import { useDocumentTitle } from "@/hooks/use-document-title"
import type { SessionCreatedResponse } from "@/lib/api/imports"
import type { SessionCreatedResponse } from "@/features/imports"
export const Route = createFileRoute("/_app/settings/import")({
component: ImportPage,

6
spa/src/routes/_app/settings/index.tsx
View File

@@ -19,9 +19,9 @@ import {
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { useAuth, useIsAdmin } from "@/components/auth-provider"
import { reindexSearch } from "@/lib/api/users"
import { useSettings, useUpdateSettings } from "@/hooks/use-goals"
import type { UpdateUserSettingsRequest } from "@/lib/api/goals"
import { reindexSearch } from "@/features/users"
import { useSettings, useUpdateSettings } from "@/features/goals"
import type { UpdateUserSettingsRequest } from "@/features/goals"
import { useDocumentTitle } from "@/hooks/use-document-title"
export const Route = createFileRoute("/_app/settings/")({

2
spa/src/routes/_app/settings/webhooks.tsx
View File

@@ -26,7 +26,7 @@ import {
useWebhookTokens,
useGenerateToken,
useDeleteToken,
} from "@/hooks/use-webhooks"
} from "@/features/webhooks"
import { API_URL } from "@/lib/api/client"
import { useDocumentTitle } from "@/hooks/use-document-title"

4
spa/src/routes/_app/settings/wrapup.tsx
View File

@@ -21,8 +21,8 @@ import {
useWrapUps,
useGenerateWrapUp,
useDeleteWrapUp,
} from "@/hooks/use-wrapup"
import { useUsers } from "@/hooks/use-users"
} from "@/features/wrapup"
import { useUsers } from "@/features/users"
import { useDocumentTitle } from "@/hooks/use-document-title"
export const Route = createFileRoute("/_app/settings/wrapup")({

190
spa/src/routes/_app/social.tsx
View File

@@ -2,15 +2,13 @@ import { createFileRoute, Link } from "@tanstack/react-router"
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { ArrowLeft, UserCheck, UserMinus, UserPlus, UserX, Users } from "lucide-react"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Skeleton } from "@/components/ui/skeleton"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { EmptyState } from "@/components/empty-state"
import { toast } from "sonner"
import { useAuth } from "@/components/auth-provider"
import { ActorList } from "@/components/actor-list"
import {
useFollow,
useFollowing,
@@ -22,9 +20,8 @@ import {
useRemoveFollower,
useUserFollowing,
useUserFollowers,
} from "@/hooks/use-social"
} from "@/features/social"
import { useDocumentTitle } from "@/hooks/use-document-title"
import type { RemoteActorDto } from "@/lib/api/social"
type SearchParams = { user?: string }
@@ -93,30 +90,25 @@ function OwnFollowingTab() {
const { data, isPending } = useFollowing()
const unfollowMutation = useUnfollow()
if (isPending) return <ListSkeleton />
if (!data?.actors.length)
return <EmptyState icon={Users} title={t("social.notFollowing")} description={t("social.notFollowingDesc")} />
return (
<div className="space-y-2">
{data.actors.map((actor) => (
<ActorCard
key={actor.url}
actor={actor}
action={
<Button
variant="outline"
size="sm"
onClick={() => unfollowMutation.mutate({ actor_url: actor.url })}
disabled={unfollowMutation.isPending}
>
<UserMinus className="mr-1 size-3.5" />
{t("common.unfollow")}
</Button>
}
/>
))}
</div>
<ActorList
data={data}
isPending={isPending}
emptyIcon={Users}
emptyTitle={t("social.notFollowing")}
emptyDescription={t("social.notFollowingDesc")}
renderAction={(actor) => (
<Button
variant="outline"
size="sm"
onClick={() => unfollowMutation.mutate({ actor_url: actor.url })}
disabled={unfollowMutation.isPending}
>
<UserMinus className="mr-1 size-3.5" />
{t("common.unfollow")}
</Button>
)}
/>
)
}
@@ -125,31 +117,25 @@ function OwnFollowersTab() {
const { data, isPending } = useFollowers()
const removeMutation = useRemoveFollower()
if (isPending) return <ListSkeleton />
if (!data?.actors.length)
return <EmptyState icon={Users} title={t("social.noFollowers")} />
return (
<div className="space-y-2">
{data.actors.map((actor) => (
<ActorCard
key={actor.url}
actor={actor}
action={
<Button
variant="ghost"
size="sm"
onClick={() => removeMutation.mutate({ actor_url: actor.url })}
disabled={removeMutation.isPending}
className="text-destructive hover:text-destructive"
>
<UserX className="mr-1 size-3.5" />
{t("common.remove")}
</Button>
}
/>
))}
</div>
<ActorList
data={data}
isPending={isPending}
emptyIcon={Users}
emptyTitle={t("social.noFollowers")}
renderAction={(actor) => (
<Button
variant="ghost"
size="sm"
onClick={() => removeMutation.mutate({ actor_url: actor.url })}
disabled={removeMutation.isPending}
className="text-destructive hover:text-destructive"
>
<UserX className="mr-1 size-3.5" />
{t("common.remove")}
</Button>
)}
/>
)
}
@@ -159,29 +145,23 @@ function PendingTab() {
const acceptMutation = useAcceptFollower()
const rejectMutation = useRejectFollower()
if (isPending) return <ListSkeleton />
if (!data?.actors.length)
return <EmptyState icon={UserCheck} title={t("social.noPending")} />
return (
<div className="space-y-2">
{data.actors.map((actor) => (
<ActorCard
key={actor.url}
actor={actor}
action={
<div className="flex gap-1">
<Button size="sm" onClick={() => acceptMutation.mutate({ actor_url: actor.url })} disabled={acceptMutation.isPending}>
{t("common.accept")}
</Button>
<Button variant="outline" size="sm" onClick={() => rejectMutation.mutate({ actor_url: actor.url })} disabled={rejectMutation.isPending}>
{t("common.reject")}
</Button>
</div>
}
/>
))}
</div>
<ActorList
data={data}
isPending={isPending}
emptyIcon={UserCheck}
emptyTitle={t("social.noPending")}
renderAction={(actor) => (
<div className="flex gap-1">
<Button size="sm" onClick={() => acceptMutation.mutate({ actor_url: actor.url })} disabled={acceptMutation.isPending}>
{t("common.accept")}
</Button>
<Button variant="outline" size="sm" onClick={() => rejectMutation.mutate({ actor_url: actor.url })} disabled={rejectMutation.isPending}>
{t("common.reject")}
</Button>
</div>
)}
/>
)
}
@@ -189,62 +169,14 @@ function UserFollowingTab({ userId }: { userId: string }) {
const { t } = useTranslation()
const { data, isPending } = useUserFollowing(userId)
if (isPending) return <ListSkeleton />
if (!data?.actors.length)
return <EmptyState icon={Users} title={t("social.notFollowing")} />
return (
<div className="space-y-2">
{data.actors.map((actor) => (
<ActorCard key={actor.url} actor={actor} />
))}
</div>
)
return <ActorList data={data} isPending={isPending} emptyIcon={Users} emptyTitle={t("social.notFollowing")} />
}
function UserFollowersTab({ userId }: { userId: string }) {
const { t } = useTranslation()
const { data, isPending } = useUserFollowers(userId)
if (isPending) return <ListSkeleton />
if (!data?.actors.length)
return <EmptyState icon={Users} title={t("social.noFollowersOther")} />
return (
<div className="space-y-2">
{data.actors.map((actor) => (
<ActorCard key={actor.url} actor={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>
)
return <ActorList data={data} isPending={isPending} emptyIcon={Users} emptyTitle={t("social.noFollowersOther")} />
}
function FollowByHandle() {
@@ -288,13 +220,3 @@ function FollowByHandle() {
</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>
)
}

4
spa/src/routes/_app/users.$id.tsx
View File

@@ -7,8 +7,8 @@ import { Button } from "@/components/ui/button"
import { ProfileView, ProfileSkeleton } from "@/components/profile-view"
import { GoalCard } from "@/components/goal-card"
import { useAuth } from "@/components/auth-provider"
import { useUserProfile } from "@/hooks/use-users"
import { useFollow, useUnfollow, useFollowing } from "@/hooks/use-social"
import { useUserProfile } from "@/features/users"
import { useFollow, useUnfollow, useFollowing } from "@/features/social"
import { useDocumentTitle } from "@/hooks/use-document-title"
export const Route = createFileRoute("/_app/users/$id")({

4
spa/src/routes/_app/wrapup.$id.tsx
View File

@@ -16,9 +16,9 @@ import { FunFacts } from "@/components/wrapup-fun-facts"
import { RankCard } from "@/components/wrapup-rank-card"
import { posterUrl } from "@/lib/api/client"
import { fmtUsd } from "@/lib/format"
import { useWrapUpReport } from "@/hooks/use-wrapup"
import { useWrapUpReport } from "@/features/wrapup"
import { useDocumentTitle } from "@/hooks/use-document-title"
import type { MovieRef } from "@/lib/api/wrapup"
import type { MovieRef } from "@/features/wrapup"
const WrapUpShareCard = lazy(() => import("@/components/wrapup-share-card").then((m) => ({ default: m.WrapUpShareCard })))