feat: add SPA, serve at /app/, update Dockerfile and README

- React + TanStack Router + shadcn/ui SPA under spa/ - serve spa/dist at /app/ with index.html fallback for client routing - Dockerfile: node build stage for SPA, copy dist into runtime image - README: document SPA, CORS_ORIGINS env var, architecture entry - vite base set to /app/, manifest.json paths fixed
2026-06-04 04:20:15 +02:00
parent 15dc0e526b
commit b9c0b10740
153 changed files with 24329 additions and 1 deletions
--- a/spa/src/routes/_app/settings/webhooks.tsx
+++ b/spa/src/routes/_app/settings/webhooks.tsx
@@ -0,0 +1,145 @@
+import { createFileRoute, Link } from "@tanstack/react-router"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { ArrowLeft, Key, Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
+import { Skeleton } from "@/components/ui/skeleton"
+import { EmptyState } from "@/components/empty-state"
+import {
+  useWebhookTokens,
+  useGenerateToken,
+  useDeleteToken,
+} from "@/hooks/use-webhooks"
+
+export const Route = createFileRoute("/_app/settings/webhooks")({
+  component: WebhooksPage,
+})
+
+function WebhooksPage() {
+  const { t } = useTranslation()
+  const { data: tokens, isPending } = useWebhookTokens()
+  const generate = useGenerateToken()
+  const remove = useDeleteToken()
+
+  const [open, setOpen] = useState(false)
+  const [provider, setProvider] = useState("jellyfin")
+  const [label, setLabel] = useState("")
+
+  const handleGenerate = () => {
+    generate.mutate(
+      { provider, label: label || undefined },
+      {
+        onSuccess: (data) => {
+          navigator.clipboard.writeText(data.webhook_url)
+          toast.success(t("webhooks.copied"))
+          setOpen(false)
+          setLabel("")
+        },
+      },
+    )
+  }
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Link to="/settings" className="text-muted-foreground">
+            <ArrowLeft className="size-5" />
+          </Link>
+          <h1 className="text-lg font-bold">{t("webhooks.title")}</h1>
+        </div>
+        <button onClick={() => setOpen(true)} className="text-primary">
+          <Plus className="size-5" />
+        </button>
+      </div>
+
+      {isPending ? (
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <Skeleton key={i} className="h-14 rounded-xl" />
+          ))}
+        </div>
+      ) : !tokens?.length ? (
+        <EmptyState icon={Key} title={t("webhooks.noTokens")} description={t("webhooks.noTokensDesc")} />
+      ) : (
+        <div className="space-y-2">
+          {tokens.map((t) => (
+            <div
+              key={t.id}
+              className="flex items-center justify-between rounded-xl bg-card p-3"
+            >
+              <div>
+                <p className="text-sm font-medium">
+                  {t.provider}
+                  {t.label && ` — ${t.label}`}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {new Date(t.created_at).toLocaleDateString()}
+                </p>
+              </div>
+              <button
+                onClick={() => remove.mutate(t.id)}
+                className="text-destructive"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>{t("webhooks.generateToken")}</DrawerTitle>
+          </DrawerHeader>
+          <div className="space-y-3 p-4">
+            <div className="space-y-1.5">
+              <Label>{t("webhooks.provider")}</Label>
+              <Select value={provider} onValueChange={setProvider}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="jellyfin">{t("webhooks.jellyfin")}</SelectItem>
+                  <SelectItem value="plex">{t("webhooks.plex")}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label>{t("webhooks.labelOptional")}</Label>
+              <Input
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder={t("webhooks.labelPlaceholder")}
+              />
+            </div>
+            <Button
+              onClick={handleGenerate}
+              disabled={generate.isPending}
+              className="w-full"
+            >
+              {generate.isPending ? t("common.generating") : t("common.generate")}
+            </Button>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  )
+}