This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -5,210 +5,239 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { createCatalogItem } from "@/actions/catalog-items";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useServerAction } from "@/hooks/use-server-action";
|
||||
import { getHabboCdnIconUrl, getLocalIconUrl } from "@/lib/furni/classname";
|
||||
|
||||
interface FurniResult {
|
||||
id: number;
|
||||
itemName: string;
|
||||
publicName: string;
|
||||
type: string;
|
||||
spriteId: number;
|
||||
id: number;
|
||||
itemName: string;
|
||||
publicName: string;
|
||||
type: string;
|
||||
spriteId: number;
|
||||
}
|
||||
|
||||
interface QuickAddFurniProps {
|
||||
pageId: number;
|
||||
furniRevisionMap: Record<number, { classname: string; revision: number }>;
|
||||
pageId: number;
|
||||
furniRevisionMap: Record<number, { classname: string; revision: number }>;
|
||||
}
|
||||
|
||||
export function QuickAddFurni({ pageId, furniRevisionMap }: QuickAddFurniProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [debounced, setDebounced] = useState("");
|
||||
const [results, setResults] = useState<FurniResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { run, isPending } = useServerAction();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
export function QuickAddFurni({
|
||||
pageId,
|
||||
furniRevisionMap,
|
||||
}: QuickAddFurniProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [debounced, setDebounced] = useState("");
|
||||
const [results, setResults] = useState<FurniResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { run, isPending } = useServerAction();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Keyboard shortcut: Ctrl+K / Cmd+K
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
|
||||
const tag = (e.target as HTMLElement)?.tagName;
|
||||
if (tag === "INPUT" || tag === "TEXTAREA") return;
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, []);
|
||||
// Keyboard shortcut: Ctrl+K / Cmd+K
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
|
||||
const tag = (e.target as HTMLElement)?.tagName;
|
||||
if (tag === "INPUT" || tag === "TEXTAREA") return;
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, []);
|
||||
|
||||
// Debounce search
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebounced(query.trim()), 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [query]);
|
||||
// Debounce search
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebounced(query.trim()), 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [query]);
|
||||
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (open) setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}, [open]);
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (open) setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}, [open]);
|
||||
|
||||
// Fetch results
|
||||
useEffect(() => {
|
||||
if (!open || debounced.length < 2) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const ac = new AbortController();
|
||||
fetch(`/api/admin/furni/search?q=${encodeURIComponent(debounced)}&limit=30`, {
|
||||
signal: ac.signal,
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data) => setResults(data.results ?? []))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
return () => ac.abort();
|
||||
}, [debounced, open]);
|
||||
// Fetch results
|
||||
useEffect(() => {
|
||||
if (!open || debounced.length < 2) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const ac = new AbortController();
|
||||
fetch(
|
||||
`/api/admin/furni/search?q=${encodeURIComponent(debounced)}&limit=30`,
|
||||
{
|
||||
signal: ac.signal,
|
||||
},
|
||||
)
|
||||
.then((r) => r.json())
|
||||
.then((data) => setResults(data.results ?? []))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
return () => ac.abort();
|
||||
}, [debounced, open]);
|
||||
|
||||
const handleAdd = useCallback(
|
||||
(base: FurniResult) => {
|
||||
run(
|
||||
() =>
|
||||
createCatalogItem({
|
||||
pageId,
|
||||
itemIds: String(base.id),
|
||||
catalogName: base.publicName || base.itemName,
|
||||
costCredits: 0,
|
||||
costPoints: 0,
|
||||
pointsType: 0,
|
||||
amount: 1,
|
||||
limitedSells: 0,
|
||||
limitedStack: 0,
|
||||
orderNumber: 1,
|
||||
offerId: -1,
|
||||
songId: 0,
|
||||
haveOffer: "1",
|
||||
clubOnly: "0",
|
||||
extradata: "",
|
||||
}),
|
||||
{
|
||||
successMessage: `Added "${base.publicName || base.itemName}" to page.`,
|
||||
errorMessage: "Failed to add item.",
|
||||
onSuccess: () => {
|
||||
toast.success(`Added #${base.id}`);
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
[pageId, run],
|
||||
);
|
||||
const handleAdd = useCallback(
|
||||
(base: FurniResult) => {
|
||||
run(
|
||||
() =>
|
||||
createCatalogItem({
|
||||
pageId,
|
||||
itemIds: String(base.id),
|
||||
catalogName: base.publicName || base.itemName,
|
||||
costCredits: 0,
|
||||
costPoints: 0,
|
||||
pointsType: 0,
|
||||
amount: 1,
|
||||
limitedSells: 0,
|
||||
limitedStack: 0,
|
||||
orderNumber: 1,
|
||||
offerId: -1,
|
||||
songId: 0,
|
||||
haveOffer: "1",
|
||||
clubOnly: "0",
|
||||
extradata: "",
|
||||
}),
|
||||
{
|
||||
successMessage: `Added "${base.publicName || base.itemName}" to page.`,
|
||||
errorMessage: "Failed to add item.",
|
||||
onSuccess: () => {
|
||||
toast.success(`Added #${base.id}`);
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
[pageId, run],
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Zap className="mr-2 h-4 w-4" />
|
||||
Quick Add
|
||||
<kbd className="ml-2 hidden rounded border bg-muted px-1 text-[10px] sm:inline">Ctrl+K</kbd>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Quick Add Furni</DialogTitle>
|
||||
</DialogHeader>
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Zap className="mr-2 h-4 w-4" />
|
||||
Quick Add
|
||||
<kbd className="ml-2 hidden rounded border bg-muted px-1 text-[10px] sm:inline">
|
||||
Ctrl+K
|
||||
</kbd>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Quick Add Furni</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder="Search by item name or public name..."
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
{loading && (
|
||||
<Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder="Search by item name or public name..."
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
{loading && (
|
||||
<Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="max-h-[420px] overflow-y-auto rounded-md border">
|
||||
{debounced.length < 2 ? (
|
||||
<p className="py-8 text-center text-sm text-muted-foreground">
|
||||
Type at least 2 characters to search
|
||||
</p>
|
||||
) : results.length === 0 && !loading ? (
|
||||
<p className="py-8 text-center text-sm text-muted-foreground">
|
||||
No furni found for "{debounced}"
|
||||
</p>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{results.map((r) => {
|
||||
const furni = furniRevisionMap[r.id];
|
||||
return (
|
||||
<button
|
||||
key={r.id}
|
||||
type="button"
|
||||
onClick={() => handleAdd(r)}
|
||||
disabled={isPending}
|
||||
className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
<FurniThumb classname={furni?.classname ?? r.itemName} revision={furni?.revision ?? 0} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{r.publicName || <span className="italic text-muted-foreground">{r.itemName}</span>}
|
||||
</p>
|
||||
<p className="truncate font-mono text-[11px] text-muted-foreground">
|
||||
#{r.id} · {r.itemName} · {r.type}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">Add →</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
<div className="max-h-[420px] overflow-y-auto rounded-md border">
|
||||
{debounced.length < 2 ? (
|
||||
<p className="py-8 text-center text-sm text-muted-foreground">
|
||||
Type at least 2 characters to search
|
||||
</p>
|
||||
) : results.length === 0 && !loading ? (
|
||||
<p className="py-8 text-center text-sm text-muted-foreground">
|
||||
No furni found for "{debounced}"
|
||||
</p>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{results.map((r) => {
|
||||
const furni = furniRevisionMap[r.id];
|
||||
return (
|
||||
<button
|
||||
key={r.id}
|
||||
type="button"
|
||||
onClick={() => handleAdd(r)}
|
||||
disabled={isPending}
|
||||
className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
<FurniThumb
|
||||
classname={furni?.classname ?? r.itemName}
|
||||
revision={furni?.revision ?? 0}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{r.publicName || (
|
||||
<span className="italic text-muted-foreground">
|
||||
{r.itemName}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="truncate font-mono text-[11px] text-muted-foreground">
|
||||
#{r.id} · {r.itemName} · {r.type}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
Add →
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function FurniThumb({ classname, revision }: { classname: string; revision: number }) {
|
||||
if (!classname) {
|
||||
return (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded bg-muted">
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const primary = getLocalIconUrl(classname);
|
||||
function FurniThumb({
|
||||
classname,
|
||||
revision,
|
||||
}: {
|
||||
classname: string;
|
||||
revision: number;
|
||||
}) {
|
||||
if (!classname) {
|
||||
return (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded bg-muted">
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const primary = getLocalIconUrl(classname);
|
||||
|
||||
function handleError(e: React.SyntheticEvent<HTMLImageElement>) {
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (!img.dataset.fallback && revision > 0) {
|
||||
img.dataset.fallback = "cdn";
|
||||
img.src = getHabboCdnIconUrl(classname, revision);
|
||||
} else {
|
||||
img.style.opacity = "0";
|
||||
}
|
||||
}
|
||||
function handleError(e: React.SyntheticEvent<HTMLImageElement>) {
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (!img.dataset.fallback && revision > 0) {
|
||||
img.dataset.fallback = "cdn";
|
||||
img.src = getHabboCdnIconUrl(classname, revision);
|
||||
} else {
|
||||
img.style.opacity = "0";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded bg-muted/50">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={primary}
|
||||
alt={classname}
|
||||
className="max-h-full max-w-full object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
onError={handleError}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded bg-muted/50">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={primary}
|
||||
alt={classname}
|
||||
className="max-h-full max-w-full object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
onError={handleError}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user