style: clean up code with prettier and eslint

2026-07-12 20:31:05 +02:00
1 parent 60278b9e71
commit fb8e77bb68
@@ -1,5 +1,5 @@
 // src/app/[locale]/admin/import/effects/import-effects-client.tsx
-'use client'
+"use client";

 import {
  AlertCircle,
@@ -12,165 +12,160 @@ import {
  Sparkles,
  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'
+} 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 EffectItem {
-  id: string
-  lib: string
-  type: string
-  revision: number
-  present: boolean
-  nitroExists: boolean
+  id: string;
+  lib: string;
+  type: string;
+  revision: number;
+  present: boolean;
+  nitroExists: boolean;
 }

-type Filter = 'all' | 'fx' | 'dance'
+type Filter = "all" | "fx" | "dance";

 export function ImportEffectsClient() {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [effects, setEffects] = useState<EffectItem[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState('')
-  const [filter, setFilter] = useState<Filter>('all')
-  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 [searchTerm, setSearchTerm] = useState("");
+  const [effects, setEffects] = useState<EffectItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [filter, setFilter] = useState<Filter>("all");
+  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 fetchEffects = useCallback(async (search: string) => {
-    setLoading(true)
-    setError('')
+    setLoading(true);
+    setError("");
    try {
-      const params = new URLSearchParams()
-      if (search) params.set('search', search)
-      const res = await fetch(`/api/admin/import/effects?${params}`)
-      const data = await res.json()
+      const params = new URLSearchParams();
+      if (search) params.set("search", search);
+      const res = await fetch(`/api/admin/import/effects?${params}`);
+      const data = await res.json();
      if (!res.ok) {
-        setError(data.error || 'Failed to load')
-        return
+        setError(data.error || "Failed to load");
+        return;
      }
-      setEffects(data.effects || [])
-      setSelected(new Set())
+      setEffects(data.effects || []);
+      setSelected(new Set());
    } catch {
-      setError('Network error')
+      setError("Network error");
    } finally {
-      setLoading(false)
+      setLoading(false);
    }
-  }, [])
+  }, []);

  useEffect(() => {
-    fetchEffects('')
-  }, [fetchEffects])
+    fetchEffects("");
+  }, [fetchEffects]);

  const visible = useMemo(
-    () => effects.filter((e) => filter === 'all' || e.type === filter),
+    () => effects.filter((e) => filter === "all" || e.type === filter),
    [effects, filter],
-  )
-  const importable = useMemo(() => visible.filter((e) => !e.present || !e.nitroExists), [visible])
-  const importedCount = useMemo(
-    () => visible.filter((e) => e.present && e.nitroExists).length,
-    [visible],
-  )
+  );
+  const importable = useMemo(() => visible.filter((e) => !e.present || !e.nitroExists), [visible]);
+  const importedCount = useMemo(() => visible.filter((e) => e.present && e.nitroExists).length, [visible]);

  function toggle(lib: string) {
    setSelected((prev) => {
-      const n = new Set(prev)
-      if (n.has(lib)) n.delete(lib)
-      else n.add(lib)
-      return n
-    })
+      const n = new Set(prev);
+      if (n.has(lib)) n.delete(lib);
+      else n.add(lib);
+      return n;
+    });
  }

  function markDone(lib: string) {
-    setEffects((prev) =>
-      prev.map((e) => (e.lib === lib ? { ...e, present: true, nitroExists: true } : e)),
-    )
+    setEffects((prev) => prev.map((e) => (e.lib === lib ? { ...e, present: true, nitroExists: true } : e)));
  }

  async function importViaSse(items: EffectItem[]) {
-    setBatchProgress({ done: 0, total: items.length })
-    const res = await fetch('/api/admin/import/effects/batch', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+    setBatchProgress({ done: 0, total: items.length });
+    const res = await fetch("/api/admin/import/effects/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
+      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
+    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() ?? ''
+      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++
-          succeeded++
-          markDone(evt.classname)
-          setBatchProgress({ done, total: items.length })
-        } else if (evt.type === 'item_progress' && evt.status === 'failed') {
-          done++
-          failed++
-          setBatchProgress({ done, total: items.length })
-        } else if (evt.type === 'batch_complete') {
-          succeeded = evt.succeeded
-          failed = evt.failed
+        if (!part.startsWith("data: ")) continue;
+        const evt = JSON.parse(part.slice(6));
+        if (evt.type === "item_progress" && evt.status === "done") {
+          done++;
+          succeeded++;
+          markDone(evt.classname);
+          setBatchProgress({ done, total: items.length });
+        } else if (evt.type === "item_progress" && evt.status === "failed") {
+          done++;
+          failed++;
+          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} effect(s) imported`)
-    if (failed > 0) toast.error(`${failed} failed`)
+    setBatchProgress(null);
+    setSelected(new Set());
+    if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
+    if (failed > 0) toast.error(`${failed} failed`);
  }

  async function importOne(e: EffectItem) {
-    setBusyLib(e.lib)
+    setBusyLib(e.lib);
    try {
-      await importViaSse([e])
+      await importViaSse([e]);
    } finally {
-      setBusyLib(null)
+      setBusyLib(null);
    }
  }

  async function importSelected() {
-    const items = visible.filter((e) => selected.has(e.lib) && (!e.present || !e.nitroExists))
-    if (items.length === 0) return
-    await importViaSse(items)
+    const items = visible.filter((e) => selected.has(e.lib) && (!e.present || !e.nitroExists));
+    if (items.length === 0) return;
+    await importViaSse(items);
  }

  async function remove(e: EffectItem) {
-    setBusyLib(e.lib)
+    setBusyLib(e.lib);
    try {
      const res = await fetch(`/api/admin/import/effects?lib=${encodeURIComponent(e.lib)}`, {
-        method: 'DELETE',
-      })
-      const data = await res.json()
+        method: "DELETE",
+      });
+      const data = await res.json();
      if (res.ok) {
-        toast.success(`${e.lib} removed`)
+        toast.success(`${e.lib} removed`);
        setEffects((prev) =>
          prev.map((x) => (x.lib === e.lib ? { ...x, present: false, nitroExists: false } : x)),
-        )
+        );
      } else {
-        toast.error(data.error || 'Delete failed')
+        toast.error(data.error || "Delete failed");
      }
    } finally {
-      setBusyLib(null)
+      setBusyLib(null);
    }
  }

@@ -206,10 +201,10 @@ export function ImportEffectsClient() {
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            onKeyDown={(e) => {
-              if (e.key === 'Enter') fetchEffects(searchTerm)
-              if (e.key === 'Escape') {
-                setSearchTerm('')
-                fetchEffects('')
+              if (e.key === "Enter") fetchEffects(searchTerm);
+              if (e.key === "Escape") {
+                setSearchTerm("");
+                fetchEffects("");
              }
            }}
            className="pl-9 pr-8"
@@ -218,8 +213,8 @@ export function ImportEffectsClient() {
            <button
              type="button"
              onClick={() => {
-                setSearchTerm('')
-                fetchEffects('')
+                setSearchTerm("");
+                fetchEffects("");
              }}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
@@ -230,11 +225,11 @@ export function ImportEffectsClient() {
        <Button onClick={() => fetchEffects(searchTerm)} size="sm" disabled={loading}>
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
        </Button>
-        {(['all', 'fx', 'dance'] as Filter[]).map((f) => (
+        {(["all", "fx", "dance"] as Filter[]).map((f) => (
          <Button
            key={f}
            size="sm"
-            variant={filter === f ? 'default' : 'outline'}
+            variant={filter === f ? "default" : "outline"}
            onClick={() => setFilter(f)}
          >
            {f.toUpperCase()}
@@ -256,9 +251,7 @@ export function ImportEffectsClient() {
              )
            }
          >
-            {selected.size === importable.length
-              ? 'Deselect All'
-              : `Select All (${importable.length})`}
+            {selected.size === importable.length ? "Deselect All" : `Select All (${importable.length})`}
          </Button>
          {selected.size > 0 && (
            <Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
@@ -296,22 +289,17 @@ export function ImportEffectsClient() {

      {/* Grid */}
      {visible.length > 0 && (
-        <div
-          className={cn(
-            'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
-            loading && 'opacity-50',
-          )}
-        >
+        <div className={cn("grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3", loading && "opacity-50")}>
          {visible.map((e) => {
-            const imported = e.present && e.nitroExists
-            const isSelected = selected.has(e.lib)
+            const imported = e.present && e.nitroExists;
+            const isSelected = selected.has(e.lib);
            return (
              <div
                key={e.lib}
                className={cn(
-                  'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
-                  imported && 'ring-1 ring-[var(--admin-success)]/30',
-                  isSelected && 'ring-2 ring-primary border-primary',
+                  "rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all",
+                  imported && "ring-1 ring-[var(--admin-success)]/30",
+                  isSelected && "ring-2 ring-primary border-primary",
                )}
              >
                {!imported && (
@@ -319,10 +307,10 @@ export function ImportEffectsClient() {
                    type="button"
                    onClick={() => toggle(e.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',
+                      "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',
+                        ? "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" />}
@@ -330,13 +318,13 @@ export function ImportEffectsClient() {
                )}
                <div
                  className={cn(
-                    'flex flex-col items-center justify-center h-20 gap-1',
-                    e.type === 'dance'
-                      ? 'bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10'
-                      : 'bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10',
+                    "flex flex-col items-center justify-center h-20 gap-1",
+                    e.type === "dance"
+                      ? "bg-gradient-to-br from-[var(--admin-warning)]/25 to-[var(--admin-warning)]/10"
+                      : "bg-gradient-to-br from-[var(--admin-accent)]/25 to-[var(--admin-accent)]/10",
                  )}
                >
-                  {e.type === 'dance' ? (
+                  {e.type === "dance" ? (
                    <Music className="w-7 h-7 text-[var(--admin-warning)]/80" />
                  ) : (
                    <Sparkles className="w-7 h-7 text-[var(--admin-accent-text)]" />
@@ -385,10 +373,10 @@ export function ImportEffectsClient() {
                  </div>
                </div>
              </div>
-            )
+            );
          })}
        </div>
      )}
    </div>
-  )
+  );
 }
@@ -10,5 +10,5 @@ export default function Loading() {
        </div>
      ))}
    </div>
-  )
+  );
 }
@@ -1,12 +1,12 @@
 // src/app/[locale]/admin/import/effects/page.tsx
-import { redirect } from 'next/navigation'
-import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
-import { ImportEffectsClient } from './import-effects-client'
+import { redirect } from "next/navigation";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { ImportEffectsClient } from "./import-effects-client";

 export default async function ImportEffectsPage(_props: { params: Promise<{ locale: string }> }) {
-  const { session, permissions } = await getAdminContext()
+  const { session, permissions } = await getAdminContext();
  if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
-    redirect('/admin')
+    redirect("/admin");
  }
-  return <ImportEffectsClient />
+  return <ImportEffectsClient />;
 }