feat: goals — "watch N movies in YEAR" with progress bar

Domain: Goal entity, UserSettings (federation toggle), RemoteGoalEntry.
Ports: GoalRepository, UserSettingsRepository, RemoteGoalRepository.
Adapters: sqlite + postgres repos, migrations, AP content query extensions.
Application: CRUD use cases (create/update/delete/get/list), settings use cases.
API: 7 endpoints (/goals CRUD, /users/{id}/goals, /settings) with utoipa docs.
Federation: GoalObject (Note + goal discriminator), outbound broadcast with
per-user toggle, inbound GoalObjectHandler in CompositeObjectHandler.
SPA: API client + hooks, GoalCard (shadcn Card+Progress+DropdownMenu),
GoalSheet (Drawer), profile integration (editable own, read-only others),
federation toggle in settings (Switch).
Classic HTML: glassmorphic goal card on profile, Frutiger Aero styling.
Progress computed from existing reviews — backwards compatible.
This commit is contained in:
2026-06-08 22:37:52 +02:00
parent 213f9a2433
commit fff5f4af2f
67 changed files with 2747 additions and 28 deletions

View File

@@ -1,12 +1,17 @@
import { createFileRoute, Link } from "@tanstack/react-router"
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { ChevronDown, ChevronRight, Settings, Sparkles } from "lucide-react"
import { ChevronDown, ChevronRight, Plus, Settings, Sparkles } from "lucide-react"
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 { GoalCard } from "@/components/goal-card"
import { GoalSheet } from "@/components/goal-sheet"
import { toast } from "sonner"
import type { GoalDto } from "@/lib/api/users"
export const Route = createFileRoute("/_app/profile")({
component: ProfilePage,
@@ -36,6 +41,7 @@ function ProfilePage() {
data={data}
actions={
<>
<GoalSection goals={data.goals ?? []} />
<Link to="/social" className="block">
<Button variant="outline" size="sm" className="w-full justify-between">
<span>{t("profile.followingFollowers")}</span>
@@ -50,6 +56,58 @@ function ProfilePage() {
)
}
function GoalSection({ goals }: { goals: GoalDto[] }) {
const { t } = useTranslation()
const [sheetOpen, setSheetOpen] = useState(false)
const [editGoal, setEditGoal] = useState<GoalDto | null>(null)
const deleteMutation = useDeleteGoal()
function handleEdit(goal: GoalDto) {
setEditGoal(goal)
setSheetOpen(true)
}
function handleDelete(year: number) {
deleteMutation.mutate(year, {
onSuccess: () => toast.success(t("goals.deleted")),
})
}
function handleSheetClose(open: boolean) {
setSheetOpen(open)
if (!open) setEditGoal(null)
}
return (
<div className="space-y-2">
{goals.map((g) => (
<GoalCard
key={g.year}
goal={g}
editable
onEdit={() => handleEdit(g)}
onDelete={() => handleDelete(g.year)}
/>
))}
<Button
variant="outline"
size="sm"
className="w-full"
onClick={() => setSheetOpen(true)}
>
<Plus className="mr-1.5 size-3.5" />
{t("goals.setGoal")}
</Button>
<GoalSheet
open={sheetOpen}
onOpenChange={handleSheetClose}
editYear={editGoal?.year}
editTarget={editGoal?.target_count}
/>
</div>
)
}
function wrapupYear(startDate: string): string {
return startDate.slice(0, 4)
}

View File

@@ -10,11 +10,14 @@ import {
RefreshCw,
ShieldBan,
Sparkles,
Target,
User,
} from "lucide-react"
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"
export const Route = createFileRoute("/_app/settings/")({
component: SettingsPage,
@@ -94,6 +97,8 @@ function SettingsPage() {
<SettingsGroup label={t("settings.integrations")} items={integrations} />
<SettingsGroup label={t("settings.socialGroup")} items={social} />
<PrivacySection />
{isAdmin && <AdminActions />}
<button
@@ -109,6 +114,40 @@ function SettingsPage() {
)
}
function PrivacySection() {
const { t } = useTranslation()
const { data: settings } = useSettings()
const updateMutation = useUpdateSettings()
return (
<div>
<p className="mb-1.5 px-1 text-xs font-medium text-muted-foreground">
{t("settings.privacy")}
</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">
<Target className="size-4" />
</span>
<div className="flex-1">
<p className="text-sm font-medium">{t("settings.federateGoals")}</p>
<p className="text-xs text-muted-foreground">
{t("settings.federateGoalsDesc")}
</p>
</div>
<Switch
checked={settings?.federate_goals ?? false}
onCheckedChange={(checked) =>
updateMutation.mutate({ federate_goals: checked })
}
disabled={updateMutation.isPending}
/>
</div>
</div>
</div>
)
}
function AdminActions() {
const { t } = useTranslation()
const reindex = useMutation({

View File

@@ -4,6 +4,7 @@ import { UserCheck, UserPlus } from "lucide-react"
import { BackButton } from "@/components/back-button"
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"
@@ -34,6 +35,15 @@ function UserProfilePage() {
<ProfileView
data={data}
userId={id}
actions={
data.goals?.length ? (
<div className="space-y-2">
{data.goals.map((g) => (
<GoalCard key={g.year} goal={g} />
))}
</div>
) : undefined
}
headerRight={
!isSelf ? (
isFollowing ? (