Reapply "Add missing admin action files and navigation links"

This reverts commit 4d515bc400.
2026-07-11 20:52:56 +02:00
1 parent 96ed768f14
commit 5b4228261a
@@ -0,0 +1,356 @@
+'use client'
+
+import {
+  AlertCircle,
+  Check,
+  Download,
+  Loader2,
+  Package,
+  PawPrint,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+
+interface PetItem {
+  lib: string
+  nitroExists: boolean
+}
+
+/** Real pet preview cropped from its .nitro; falls back to the paw glyph. */
+function PetIcon({ lib }: { lib: string }) {
+  const [failed, setFailed] = useState(false)
+  if (failed) return <PawPrint className="w-8 h-8 text-muted-foreground/60" />
+  return (
+    // biome-ignore lint/performance/noImgElement: tiny dynamic sprite, not a Next asset
+    <img
+      src={`/api/admin/import/pets/icon?lib=${encodeURIComponent(lib)}&v=6`}
+      alt={lib}
+      className="image-pixelated"
+      style={{ maxHeight: 56, maxWidth: 56 }}
+      onError={() => setFailed(true)}
+    />
+  )
+}
+
+export function ImportPetsClient() {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [pets, setPets] = useState<PetItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null)
+  const [busyLib, setBusyLib] = useState<string | null>(null)
+
+  const fetchPets = useCallback(async (search: string) => {
+    setLoading(true)
+    setError('')
+    try {
+      const params = new URLSearchParams()
+      if (search) params.set('search', search)
+      const res = await fetch(`/api/admin/import/pets?${params}`)
+      const data = await res.json()
+      if (!res.ok) {
+        setError(data.error || 'Failed to load')
+        return
+      }
+      setPets(data.pets || [])
+      setSelected(new Set())
+    } catch {
+      setError('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchPets('')
+  }, [fetchPets])
+
+  const importable = useMemo(() => pets.filter((p) => !p.nitroExists), [pets])
+  const importedCount = useMemo(() => pets.filter((p) => p.nitroExists).length, [pets])
+
+  function toggle(lib: string) {
+    setSelected((prev) => {
+      const n = new Set(prev)
+      if (n.has(lib)) n.delete(lib)
+      else n.add(lib)
+      return n
+    })
+  }
+
+  function markDone(lib: string) {
+    setPets((prev) => prev.map((p) => (p.lib === lib ? { ...p, nitroExists: true } : p)))
+  }
+
+  async function importViaSse(items: PetItem[]) {
+    setBatchProgress({ done: 0, total: items.length })
+    const res = await fetch('/api/admin/import/pets/batch', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ items, concurrency: 3 }),
+    })
+    if (!res.body) {
+      toast.error('No response stream')
+      setBatchProgress(null)
+      return
+    }
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+    let buf = ''
+    let done = 0
+    let succeeded = 0
+    let failed = 0
+    while (true) {
+      const { value, done: streamDone } = await reader.read()
+      if (streamDone) break
+      buf += decoder.decode(value, { stream: true })
+      const parts = buf.split('\n\n')
+      buf = parts.pop() ?? ''
+      for (const part of parts) {
+        if (!part.startsWith('data: ')) continue
+        const evt = JSON.parse(part.slice(6))
+        if (evt.type === 'item_progress' && evt.status === 'done') {
+          done++
+          markDone(evt.classname)
+          setBatchProgress({ done, total: items.length })
+        } else if (evt.type === 'item_progress' && evt.status === 'failed') {
+          done++
+          setBatchProgress({ done, total: items.length })
+        } else if (evt.type === 'batch_complete') {
+          succeeded = evt.succeeded
+          failed = evt.failed
+        }
+      }
+    }
+    setBatchProgress(null)
+    setSelected(new Set())
+    if (succeeded > 0) toast.success(`${succeeded} pet(s) imported`)
+    if (failed > 0) toast.error(`${failed} failed`)
+  }
+
+  async function importOne(p: PetItem) {
+    setBusyLib(p.lib)
+    try {
+      await importViaSse([p])
+    } finally {
+      setBusyLib(null)
+    }
+  }
+
+  async function importSelected() {
+    const items = pets.filter((p) => selected.has(p.lib) && !p.nitroExists)
+    if (items.length === 0) return
+    await importViaSse(items)
+  }
+
+  async function remove(p: PetItem) {
+    setBusyLib(p.lib)
+    try {
+      const res = await fetch(`/api/admin/import/pets?lib=${encodeURIComponent(p.lib)}`, {
+        method: 'DELETE',
+      })
+      const data = await res.json()
+      if (res.ok) {
+        toast.success(`${p.lib} removed`)
+        setPets((prev) => prev.map((x) => (x.lib === p.lib ? { ...x, nitroExists: false } : x)))
+      } else {
+        toast.error(data.error || 'Delete failed')
+      }
+    } finally {
+      setBusyLib(null)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {pets.length > 0 && (
+        <div className="flex items-center gap-3 flex-wrap">
+          <div className="flex items-center gap-1.5 text-sm">
+            <Package className="h-4 w-4 text-muted-foreground" />
+            <span className="font-medium">{pets.length}</span>
+            <span className="text-muted-foreground">pets</span>
+          </div>
+          <div className="flex items-center gap-1.5 text-sm">
+            <Check className="h-4 w-4 text-emerald-500" />
+            <span className="font-medium text-emerald-600">{importedCount}</span>
+            <span className="text-muted-foreground">imported</span>
+          </div>
+          <div className="flex items-center gap-1.5 text-sm">
+            <Download className="h-4 w-4 text-muted-foreground" />
+            <span className="font-medium">{importable.length}</span>
+            <span className="text-muted-foreground">missing</span>
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2 flex-wrap">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search pets..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') fetchPets(searchTerm)
+              if (e.key === 'Escape') {
+                setSearchTerm('')
+                fetchPets('')
+              }
+            }}
+            className="pl-9 pr-8"
+          />
+          {searchTerm && (
+            <button
+              type="button"
+              onClick={() => {
+                setSearchTerm('')
+                fetchPets('')
+              }}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+        <Button onClick={() => fetchPets(searchTerm)} size="sm" disabled={loading}>
+          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
+        </Button>
+      </div>
+
+      {importable.length > 0 && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-xs h-8"
+            disabled={!!batchProgress}
+            onClick={() =>
+              setSelected((prev) =>
+                prev.size === importable.length ? new Set() : new Set(importable.map((p) => p.lib)),
+              )
+            }
+          >
+            {selected.size === importable.length
+              ? 'Deselect All'
+              : `Select All (${importable.length})`}
+          </Button>
+          {selected.size > 0 && (
+            <Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
+              {batchProgress ? (
+                <Loader2 className="w-4 h-4 animate-spin mr-1" />
+              ) : (
+                <Download className="w-4 h-4 mr-1" />
+              )}
+              Import {selected.size} selected
+            </Button>
+          )}
+          {batchProgress && (
+            <span className="text-xs text-muted-foreground">
+              {batchProgress.done}/{batchProgress.total}
+            </span>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
+          <AlertCircle className="w-4 h-4 shrink-0" />
+          {error}
+        </div>
+      )}
+
+      {!loading && pets.length === 0 && !error && (
+        <div className="text-center py-12 text-muted-foreground">
+          <PawPrint className="w-12 h-12 mx-auto mb-3 opacity-50" />
+          <p className="text-sm">No pets found</p>
+        </div>
+      )}
+
+      {pets.length > 0 && (
+        <div
+          className={cn(
+            'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
+            loading && 'opacity-50',
+          )}
+        >
+          {pets.map((p) => {
+            const isSelected = selected.has(p.lib)
+            return (
+              <div
+                key={p.lib}
+                className={cn(
+                  'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
+                  p.nitroExists && 'shadow-[0_0_6px_rgba(34,197,94,0.15)]',
+                  isSelected && 'ring-2 ring-primary border-primary',
+                )}
+              >
+                {!p.nitroExists && (
+                  <button
+                    type="button"
+                    onClick={() => toggle(p.lib)}
+                    className={cn(
+                      'absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors',
+                      isSelected
+                        ? 'bg-primary border-primary text-primary-foreground'
+                        : 'bg-background/80 border-muted-foreground/30 hover:border-muted-foreground',
+                    )}
+                  >
+                    {isSelected && <Check className="w-3 h-3" />}
+                  </button>
+                )}
+                <div className="flex items-center justify-center h-20 bg-accent/20">
+                  <PetIcon lib={p.lib} />
+                </div>
+                <div className="px-2.5 py-2 border-t space-y-1">
+                  <div className="text-xs font-bold truncate">{p.lib}</div>
+                  <div className="pt-1">
+                    {p.nitroExists ? (
+                      <div className="flex items-center gap-1">
+                        <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
+                          <Check className="w-2.5 h-2.5" />
+                          Imported
+                        </Badge>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-5 w-5 p-0 shrink-0"
+                          title="Remove pet"
+                          disabled={busyLib === p.lib || !!batchProgress}
+                          onClick={() => remove(p)}
+                        >
+                          <Trash2 className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    ) : (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="w-full text-xs h-7"
+                        disabled={busyLib === p.lib || !!batchProgress}
+                        onClick={() => importOne(p)}
+                      >
+                        {busyLib === p.lib ? (
+                          <Loader2 className="w-3 h-3 animate-spin mr-1" />
+                        ) : (
+                          <Download className="w-3 h-3 mr-1" />
+                        )}
+                        Import
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+      {Array.from({ length: 18 }).map((_, i) => (
+        <div key={`pet-skeleton-${i}`} className="rounded-lg border bg-card p-3 animate-pulse">
+          <div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
+          <div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
+          <div className="h-7 bg-muted rounded" />
+        </div>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,11 @@
+import { redirect } from 'next/navigation'
+import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
+import { ImportPetsClient } from './import-pets-client'
+
+export default async function ImportPetsPage(_props: { params: Promise<{ locale: string }> }) {
+  const { session, permissions } = await getAdminContext()
+  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
+    redirect('/admin')
+  }
+  return <ImportPetsClient />
+}