-
+ onValueChange={(firstArtifactKey) =>
setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate))
}
/>
-
+ onValueChange={(secondArtifactKey) =>
setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate))
}
/>
@@ -3496,7 +3237,7 @@ function TeamEditor({
size="icon-sm"
/>
}
- title={`ลบ ${team.title || `Team ${teamIndex + 1}`}?`}
+ type="Team"
description="ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide"
confirmLabel="ยืนยันลบ Team"
onConfirm={() =>
@@ -3572,7 +3313,8 @@ function TeamEditor({
-
+ onValueChange={(characterKey) =>
updateTeamMember(
teamIndex,
memberIndex,
@@ -3601,7 +3343,8 @@ function TeamEditor({
/>
-
+ onValueChange={(weaponKey) =>
updateTeamMember(
teamIndex,
memberIndex,
@@ -3624,7 +3367,8 @@ function TeamEditor({
)
}
/>
-
+ placeholder="ค้นหาชุด Artifact…"
+ onValuesChange={(artifactKeys) =>
updateTeamMember(
teamIndex,
memberIndex,
@@ -3654,82 +3399,40 @@ function TeamEditor({
- {
- if (value !== null)
- updateTeamMember(
- teamIndex,
- memberIndex,
- {
- constellation: value,
- },
- );
+ onValueChange={(value) =>
+ updateTeamMember(
+ teamIndex,
+ memberIndex,
+ { constellation: value },
+ )
+ }
+ aria-label={`Constellation ของตัวละครตำแหน่ง ${memberIndex + 1}`}
+ triggerProps={{
+ size: "sm",
+ className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden",
}}
- >
-
-
- {teamConstellationLabel(member.constellation)}
-
-
-
-
- {["0", "1", "2", "3", "4", "5", "6", "0-6"].map(
- (constellation) => (
-
- {teamConstellationLabel(constellation)}
-
- ),
- )}
-
-
-
- {
- if (value !== null)
- updateTeamMember(
- teamIndex,
- memberIndex,
- {
- refinement: value,
- },
- );
+ onValueChange={(value) =>
+ updateTeamMember(
+ teamIndex,
+ memberIndex,
+ { refinement: value },
+ )
+ }
+ aria-label={`Refinement ของอาวุธตำแหน่ง ${memberIndex + 1}`}
+ triggerProps={{
+ size: "sm",
+ className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden",
}}
- >
-
-
- {teamRefinementLabel(member.refinement)}
-
-
-
-
- {["1", "2", "3", "4", "5", "1-5"].map(
- (refinement) => (
-
- {teamRefinementLabel(refinement)}
-
- ),
- )}
-
-
-
+ />
-
{
+ onValueChange={(nextKey) => {
if (
nextKey &&
!value.some(
diff --git a/components/admin/image-generator-fields.tsx b/components/admin/image-generator-fields.tsx
deleted file mode 100644
index 74ad906..0000000
--- a/components/admin/image-generator-fields.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import Image from "next/image";
-
-import {
- ComboboxContent,
- ComboboxEmpty,
- ComboboxInput,
- ComboboxItem,
- ComboboxList,
- FuzzyCombobox,
-} from "@/components/ui/combobox";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
-import { cn } from "@/lib/utils";
-
-export interface ImageCatalogItem {
- key: string;
- name: string;
- aliases: string[];
- imageUrl: string;
- rarity: number | null;
-}
-
-export interface ImageCatalogCharacter extends ImageCatalogItem {
- element: string | null;
- weaponType: string | null;
- splashImageUrl: string | null;
-}
-
-export interface ImageCatalogWeapon extends ImageCatalogItem {
- weaponType: string | null;
-}
-
-export type ImageCatalogArtifact = ImageCatalogItem;
-
-export function ImageCatalogPicker- ({
- items,
- value,
- onChange,
- placeholder,
- invalid = false,
-}: {
- items: Item[];
- value: string;
- onChange: (value: string) => void;
- placeholder: string;
- invalid?: boolean;
-}) {
- const selected = items.find((item) => item.key === value) ?? null;
-
- return (
-
onChange(item?.key ?? "")}
- itemToStringLabel={(item) => item.name}
- itemToStringValue={(item) => item.key}
- searchNames={(item) => [item.name, ...item.aliases]}
- autoHighlight
- >
-
- ไม่พบรายการ
-
- {(item) => (
-
-
-
- {item.name}
-
- )}
-
-
-
- );
-}
diff --git a/components/admin/overview-image-generator.tsx b/components/admin/overview-image-generator.tsx
index 89cdd60..c698ef1 100644
--- a/components/admin/overview-image-generator.tsx
+++ b/components/admin/overview-image-generator.tsx
@@ -41,6 +41,7 @@ import {
} from "react";
import { toast } from "sonner";
+import { CharacterSelect } from "@/components/admin/ui/catalog-select";
import { Button } from "@/components/ui/button";
import {
Card,
@@ -52,7 +53,6 @@ import {
} from "@/components/ui/card";
import {
Combobox,
- FuzzyCombobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
@@ -96,7 +96,6 @@ import { Slider } from "@/components/ui/slider";
import { Spinner } from "@/components/ui/spinner";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { elementIconFilter } from "@/lib/catalog/element";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
import {
accentGradient,
detectThemeColorsFromPixels,
@@ -1089,10 +1088,12 @@ export function OverviewImageGenerator({
ตัวละคร
- {
+ value={character?.key ?? ""}
+ placeholder="ค้นหาตัวละคร…"
+ onValueChange={(key) => {
+ const value = characters.find((item) => item.key === key) ?? null;
if (value?.element !== character?.element) {
const [start, end] = elementGradientColors(value?.element);
setElementColorStart(start);
@@ -1103,37 +1104,8 @@ export function OverviewImageGenerator({
setNameCardSize(null);
setNameCardCropOpen(false);
}}
- itemToStringLabel={(item) => item.name}
- itemToStringValue={(item) => item.key}
- searchNames={(item) => [item.name, ...(item.aliases ?? [])]}
- autoHighlight
- >
-
- ไม่พบตัวละคร
-
- {(item) => (
-
-
-
- {item.name}
-
- )}
-
-
-
+ emptyLabel="ไม่พบตัวละคร"
+ />
ชื่อ ธาตุ และประเภทอาวุธจะมาจาก Catalog
diff --git a/components/admin/stygian-editor.tsx b/components/admin/stygian-editor.tsx
index b3107f2..b25a9dc 100644
--- a/components/admin/stygian-editor.tsx
+++ b/components/admin/stygian-editor.tsx
@@ -3,47 +3,53 @@
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
-import { CheckIcon, PlusIcon, RefreshCwIcon, Trash2Icon } from "lucide-react";
+import { useEffect, useState, useTransition, type ReactNode } from "react";
+import { GripVerticalIcon, PlusIcon, RefreshCwIcon, Trash2Icon } from "lucide-react";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
import { toast } from "sonner";
import {
- activateStygianScheduleAction,
saveStygianRecommendationsAction,
syncStygianArchiveAction,
} from "@/app/admin/stygian/actions";
import { AutosaveStatus } from "@/components/admin/autosave-status";
+import {
+ ArtifactSelect,
+ CatalogDropdown,
+ CharacterSelect,
+ WeaponSelect,
+} from "@/components/admin/ui/catalog-select";
+import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
+import {
+ AdminDropdown,
+ ConstellationSelect,
+ ElementSelect,
+ RefinementSelect,
+} from "@/components/admin/ui/option-select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
- ComboboxContent,
- ComboboxEmpty,
- ComboboxInput,
- ComboboxItem,
- ComboboxList,
- ComboboxTrigger,
- FuzzyCombobox,
-} from "@/components/ui/combobox";
import { Field, FieldGroup, FieldLabel, FieldSet, FieldLegend } from "@/components/ui/field";
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Spinner } from "@/components/ui/spinner";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { elementIconFilter } from "@/lib/catalog/element";
+import { supportsWeaponType } from "@/lib/catalog/lunaris";
import { stygianElements, type StygianRecommendationItemInput } from "@/lib/stygian/schema";
import { cn } from "@/lib/utils";
-type CatalogItem = { key: string; name: string; aliases: string[]; imageUrl: string; rarity: number | null };
-type Character = CatalogItem & { constellations: Array<{ level: number; name: string; iconUrl: string | null }> };
-type ScheduleSummary = { scheduleId: number; challengeName: string; version: number; isActive: boolean };
+type CatalogItem = { key: string; name: string; aliases: string[]; imageUrl: string; rarity: number | null; weaponType?: string | null };
+type Character = CatalogItem & { element: string | null; elementIconUrl: string | null };
+type ScheduleSummary = { scheduleId: number; challengeName: string };
type Boss = { level: number; position: number; name: string; imageUrl: string };
type StoredItem = {
kind: string;
catalogKey: string | null;
weaponKey: string | null;
artifactKey: string | null;
- characterKey: string | null;
+ refinement: number | null;
constellationLevel: number | null;
element: string | null;
};
@@ -52,100 +58,24 @@ type Recommendation = { id: string; level: number; bossPosition: number; kind: s
function toInput(item: StoredItem): StygianRecommendationItemInput | null {
if ((item.kind === "character" || item.kind === "weapon" || item.kind === "artifact") && item.catalogKey) {
return item.kind === "character"
- ? { kind: "character", catalogKey: item.catalogKey, weaponKey: item.weaponKey, artifactKey: item.artifactKey, constellationLevel: item.constellationLevel }
+ ? { kind: "character", catalogKey: item.catalogKey, weaponKey: item.weaponKey, artifactKey: item.artifactKey, constellationLevel: item.constellationLevel, refinement: item.refinement }
: { kind: item.kind, catalogKey: item.catalogKey };
}
if (item.kind === "element" && item.element && stygianElements.includes(item.element as typeof stygianElements[number])) {
return { kind: "element", element: item.element as typeof stygianElements[number] };
}
- if (item.kind === "constellation" && item.characterKey && item.constellationLevel) {
- return { kind: "constellation", characterKey: item.characterKey, constellationLevel: item.constellationLevel };
- }
return null;
}
-function label(item: StygianRecommendationItemInput, characters: Character[], weapons: CatalogItem[], artifacts: CatalogItem[]) {
- if (item.kind === "element") return item.element;
- if (item.kind === "constellation") return `${characters.find((entry) => entry.key === item.characterKey)?.name ?? item.characterKey} C${item.constellationLevel}`;
- const values = item.kind === "character" ? characters : item.kind === "weapon" ? weapons : artifacts;
- return values.find((entry) => entry.key === item.catalogKey)?.name ?? item.catalogKey;
-}
-
-function CatalogPicker({ items, value, onChange, placeholder }: { items: CatalogItem[]; value: string; onChange: (value: string) => void; placeholder: string }) {
- const selected = items.find((item) => item.key === value) ?? null;
- return (
- onChange(next?.key ?? "")}
- itemToStringLabel={(item) => item.name}
- itemToStringValue={(item) => item.key}
- searchNames={(item) => [item.name, ...item.aliases]}
- autoHighlight
- >
-
- No matches
- {(item) => {item.name}
-
-
- );
-}
-
-function CatalogSlotPicker({ items, value, onChange, label, placeholder, className }: { items: CatalogItem[]; value: string; onChange: (value: string) => void; label: string; placeholder: string; className?: string }) {
- const selected = items.find((item) => item.key === value) ?? null;
- return (
- onChange(next?.key ?? "")} itemToStringLabel={(item) => item.name} itemToStringValue={(item) => item.key} searchNames={(item) => [item.name, ...item.aliases]} autoHighlight>
- svg]:hidden", selected && rarityGradientClass(selected.rarity), className)}>
- {selected ?
- No matches {(item) =>
{item.name}
- );
-}
-
function ItemPicker({ characters, weapons, artifacts, onAdd }: { characters: Character[]; weapons: CatalogItem[]; artifacts: CatalogItem[]; onAdd: (item: StygianRecommendationItemInput) => void }) {
const [kind, setKind] = useState("character");
- const [key, setKey] = useState("");
- const [weaponKey, setWeaponKey] = useState("");
- const [artifactKey, setArtifactKey] = useState("");
- const [element, setElement] = useState("Cryo");
- const [constellationLevel, setConstellationLevel] = useState(0);
- const catalog = kind === "character" || kind === "constellation" ? characters : kind === "weapon" ? weapons : artifacts;
- const selected = catalog.find((item) => item.key === key) ?? null;
- const selectedWeapon = weapons.find((item) => item.key === weaponKey) ?? null;
- const selectedArtifact = artifacts.find((item) => item.key === artifactKey) ?? null;
- const value: StygianRecommendationItemInput | null = kind === "element"
- ? { kind, element }
- : kind === "constellation"
- ? key ? { kind, characterKey: key, constellationLevel } : null
- : key ? kind === "character"
- ? { kind, catalogKey: key, weaponKey: weaponKey || null, artifactKey: artifactKey || null, constellationLevel: constellationLevel || null }
- : { kind, catalogKey: key }
- : null;
+ const catalog = kind === "character" ? characters : kind === "weapon" ? weapons : artifacts;
return (
-
-
-
- {selected ? {kind === "element" ? element : "Choose an item"} }
-
- {kind === "character" ?
-
{selectedArtifact ?
-
{selectedWeapon ?
-
: null}
-
-
-
- Type { if (next) { setKind(next as typeof kind); setKey(""); setConstellationLevel(next === "constellation" ? 1 : 0); } }}>Character Element Weapon Artifact Constellation Recommendation {kind === "element" ? { if (next) setElement(next as typeof element); }}>{stygianElements.map((entry) => {entry} )} :
- {kind === "character" ? Weapon (optional) Artifact (optional)
: null}
-
- {kind === "character" || kind === "constellation" ?
{kind === "character" ? "Constellation" : "Level"} { if (next) setConstellationLevel(Number(next)); }}>{(kind === "character" ? [0, 1, 2, 3, 4, 5, 6] : [1, 2, 3, 4, 5, 6]).map((entry) => C{entry} )} : null}
-
{ if (value) { onAdd(value); setKey(""); } }}>
-
-
+ Type setKind(next as typeof kind)} triggerProps={{ className: "w-full" }} options={[{ value: "character", label: "Character" }, { value: "element", label: "Element" }, { value: "weapon", label: "Weapon" }, { value: "artifact", label: "Artifact" }]} /> Element character.element && character.elementIconUrl ? [[character.element, character.elementIconUrl]] : []))} placeholder="Choose element…" onValueChange={(next) => onAdd({ kind: "element", element: next as typeof stygianElements[number] })} triggerProps={{ className: "w-full" }} /> Recommendation { if (!catalogKey) return; if (kind === "character") onAdd({ kind, catalogKey, weaponKey: null, artifactKey: null, constellationLevel: null, refinement: null }); else if (kind === "weapon") onAdd({ kind, catalogKey }); else onAdd({ kind: "artifact", catalogKey }); }} placeholder={`Search ${kind}…`} emptyLabel="No matches" rarityBackground />
);
}
@@ -154,8 +84,8 @@ function AddRecommendationSlot({ characters, weapons, artifacts, onAdd }: { char
return (
Add recommendation
-
- Add recommendation Choose a character or flexible recommendation. Weapon and artifact are optional.
+ Add recommendation Selecting an item adds it immediately. { onAdd(item); setOpen(false); }} />
@@ -163,49 +93,74 @@ function AddRecommendationSlot({ characters, weapons, artifacts, onAdd }: { char
}
function AddCharacterSlot({ characters, onAdd }: { characters: Character[]; onAdd: (item: StygianRecommendationItemInput) => void }) {
- return { if (catalogKey) onAdd({ kind: "character", catalogKey, weaponKey: null, artifactKey: null, constellationLevel: null }); }} />;
+ return { if (catalogKey) onAdd({ kind: "character", catalogKey, weaponKey: null, artifactKey: null, constellationLevel: null, refinement: null }); }} />;
}
-function VisualRecommendation({ item, onChange, onRemove, characters, weapons, artifacts, teamLayout = false }: { item: StygianRecommendationItemInput; onChange: (item: StygianRecommendationItemInput) => void; onRemove: () => void; characters: Character[]; weapons: CatalogItem[]; artifacts: CatalogItem[]; teamLayout?: boolean }) {
+function VisualRecommendation({ item, onChange, onRemove, characters, weapons, artifacts, teamLayout = false, position, dragHandle }: { item: StygianRecommendationItemInput; onChange: (item: StygianRecommendationItemInput) => void; onRemove: () => void; characters: Character[]; weapons: CatalogItem[]; artifacts: CatalogItem[]; teamLayout?: boolean; position?: number; dragHandle?: ReactNode }) {
const character = item.kind === "character" ? characters.find((entry) => entry.key === item.catalogKey) : null;
const weapon = item.kind === "character" ? weapons.find((entry) => entry.key === item.weaponKey) : null;
const artifact = item.kind === "character" ? artifacts.find((entry) => entry.key === item.artifactKey) : null;
- const standalone = item.kind === "weapon"
- ? weapons.find((entry) => entry.key === item.catalogKey)
- : item.kind === "artifact"
- ? artifacts.find((entry) => entry.key === item.catalogKey)
- : item.kind === "constellation"
- ? characters.find((entry) => entry.key === item.characterKey)
- : null;
+ const compatibleWeapons = weapons.filter((entry) => supportsWeaponType(character?.weaponType, entry.weaponType));
+ const elementSource = item.kind === "element" ? characters.find((entry) => entry.element === item.element && entry.elementIconUrl) : null;
+ const elementIconUrls = Object.fromEntries(characters.flatMap((entry) => entry.element && entry.elementIconUrl ? [[entry.element, entry.elementIconUrl]] : []));
const updateCharacter = (patch: Partial>) => {
if (item.kind === "character") onChange({ ...item, ...patch });
};
return (
{character ? <>
+ {teamLayout ?
#{(position ?? 0) + 1} {dragHandle}
: null}
-
img]:p-0", teamLayout && "col-span-2 row-span-2")} onChange={(catalogKey) => { if (catalogKey) updateCharacter({ catalogKey, weaponKey: null, artifactKey: null, constellationLevel: null }); }} />
+ img]:p-0", teamLayout && "col-span-2 row-span-2")} onValueChange={(catalogKey) => { if (catalogKey) updateCharacter({ catalogKey, weaponKey: null, artifactKey: null, constellationLevel: null, refinement: null }); }} />
{teamLayout ?
- updateCharacter({ weaponKey: weaponKey || null })} />
- updateCharacter({ artifactKey: artifactKey || null })} />
-
: updateCharacter({ artifactKey: artifactKey || null })} /> updateCharacter({ weaponKey: weaponKey || null })} />
}
+ updateCharacter({ weaponKey: weaponKey || null, refinement: weaponKey ? item.kind === "character" ? item.refinement ?? 1 : 1 : null })} />
+ updateCharacter({ artifactKey: artifactKey || null })} />
+ :
updateCharacter({ artifactKey: artifactKey || null })} /> updateCharacter({ weaponKey: weaponKey || null })} /> }
- {character.name}
- {teamLayout && item.kind === "character" ? { if (next) updateCharacter({ constellationLevel: next === "none" ? null : Number(next) }); }}>— {[0, 1, 2, 3, 4, 5, 6].map((entry) => C{entry} )} : item.kind === "character" && item.constellationLevel !== null ? C{item.constellationLevel} : null}
-
- :
- {standalone ?
: null}
-
{label(item, characters, weapons, artifacts)}
+ {teamLayout && item.kind === "character" ?
+ updateCharacter({ constellationLevel: next === "none" ? null : Number(next) })} triggerProps={{ size: "sm", className: "h-7 min-w-0 justify-center px-1 text-xs" }} />
+ updateCharacter({ refinement: next === "none" ? null : Number(next) })} triggerProps={{ size: "sm", className: "h-7 min-w-0 justify-center px-1 text-xs" }} />
+
:
{character.name} {item.kind === "character" && item.constellationLevel !== null ? C{item.constellationLevel} : null}
}
+ :
+ {item.kind === "weapon" ? <>
+
{ if (catalogKey) onChange({ ...item, catalogKey }); }} />
+ {weapons.find((entry) => entry.key === item.catalogKey)?.name ?? item.catalogKey}
+ : null}
+ {item.kind === "artifact" ? <>
+ { if (catalogKey) onChange({ ...item, catalogKey }); }} />
+ {artifacts.find((entry) => entry.key === item.catalogKey)?.name ?? item.catalogKey}
+ : null}
+ {item.kind === "element" ? <>
+ {elementSource?.elementIconUrl ?
: null}
+ onChange({ ...item, element: element as typeof stygianElements[number] })} triggerProps={{ size: "sm", className: "h-7 w-full justify-center px-1 text-xs" }} />
+ : null}
}
{children(
;
+}
+
function VisualRecommendationGrid({ items, limit, onChange, characters, weapons, artifacts, teamLayout = false, characterOnly = false }: { items: StygianRecommendationItemInput[]; limit?: number; onChange: (items: StygianRecommendationItemInput[]) => void; characters: Character[]; weapons: CatalogItem[]; artifacts: CatalogItem[]; teamLayout?: boolean; characterOnly?: boolean }) {
const emptyCount = limit ? Math.max(0, limit - items.length) : 1;
- return {items.map((item, index) =>
onChange(items.map((entry, candidate) => candidate === index ? next : entry))} onRemove={() => onChange(items.filter((_, candidate) => candidate !== index))} />)}{Array.from({ length: emptyCount }, (_, index) => teamLayout || characterOnly ? onChange([...items, item])} /> : onChange([...items, item])} />)} {items.map((item, index) => {
+ const card = (dragHandle?: ReactNode) =>
onChange(items.map((entry, candidate) => candidate === index ? next : entry))} onRemove={() => onChange(items.filter((_, candidate) => candidate !== index))} />;
+ return teamLayout ? {card} : card();
+ })}{Array.from({ length: emptyCount }, (_, index) => teamLayout || characterOnly ? onChange([...items, item])} /> : onChange([...items, item])} />)} {cards} Level {level} recommendations
-
REC TEAM
+ Recommended team
{teams.map((team, teamIndex) =>
setTeams(teams.map((entry, index) => index === teamIndex ? items : entry).filter((entry) => entry.length))} />
- setTeams(teams.filter((_, index) => index !== teamIndex))}>
+ setTeams([...teams, []])}>
REC UNIT Recommended unit setFailedFingerprint(null)} />
-
Schedules Sync imports every valid schedule from 5269001. Publishing remains manual.
- {schedules.map((entry) => Schedules Sync imports every valid schedule from 5269001.
+ {schedules.map((entry) => startTransition(async () => { const result = await syncStygianArchiveAction(); if (result.status === "error") toast.error(result.message); else { toast.success(`Imported through ${result.imported.at(-1) ?? "none"}; stopped at ${result.stoppedAt}`); router.refresh(); } })}>{pending ?
- startTransition(async () => { const result = await activateStygianScheduleAction(schedule.scheduleId, version); if (result.status === "error") toast.error(result.message); else { setVersion(result.version); toast.success("Schedule activated"); router.refresh(); } })}>
setLevel(Number(next) as 105 | 110)}>
Level 105 Level 110
setBossPosition(Number(next))}>
-
- {bosses.filter((boss) => boss.level === entry).map((boss) => {boss.name}
+ {bosses.filter((boss) => boss.level === entry).map((boss) => {boss.name}
{bosses.filter((boss) => boss.level === entry).map((boss) =>
{ const parsed = draftSchema.safeParse(value); return parsed.success ? parsed.data : null; };
const numericValue = (value: string) => Number.isFinite(Number(value)) ? Number(value) : 0;
-export function TeamImageGenerator({ characters, weapons, artifacts }: { characters: ImageCatalogCharacter[]; weapons: ImageCatalogWeapon[]; artifacts: ImageCatalogArtifact[] }) {
+export function TeamImageGenerator({ characters, weapons, artifacts }: { characters: AdminCatalogCharacter[]; weapons: AdminCatalogWeapon[]; artifacts: AdminCatalogArtifact[] }) {
const [draft, setDraft, resetDraft] = useImageGeneratorDraft("buzz-sheet:admin-image:team", INITIAL_TEAM_DRAFT, parseTeamDraft);
const selectedKeys = draft.members.map((member) => member.characterKey).filter(Boolean);
const valid = Boolean(draft.title.trim() && draft.combo.trim() && numericValue(draft.rotationSeconds) > 0 && draft.members.length && draft.members.every((member) => member.characterKey && member.weaponKey && member.artifactKey && member.secondArtifactKey !== member.artifactKey && numericValue(member.damage) >= 0) && new Set(selectedKeys).size === draft.members.length && draft.members.some((member) => numericValue(member.damage) > 0));
@@ -55,13 +54,13 @@ export function TeamImageGenerator({ characters, weapons, artifacts }: { charact
const character = characters.find((item) => item.key === member.characterKey);
const compatibleWeapons = weapons.filter((weapon) => supportsWeaponType(character?.weaponType, weapon.weaponType));
return ตัวละคร #{index + 1} setDraft((current) => ({ ...current, members: current.members.filter((_, memberIndex) => memberIndex !== index) }))}>
- ตัวละคร updateMember(index, { ...emptyMember(), characterKey })} /> ตัวละคร updateMember(index, { ...emptyMember(), characterKey })} />
-
อาวุธ updateMember(index, { weaponKey, refinement: "1" })} />
-
Refinement { if (value) updateMember(index, { refinement: value as TeamMemberDraft["refinement"] }); }}>{teamRefinementLabel(member.refinement)} {["1", "2", "3", "4", "5", "1-5"].map((value) => {teamRefinementLabel(value)} )}
-
Artifact updateMember(index, { artifactKey })} />
-
Artifact ชุดที่ 2 (ถ้ามี) item.key !== member.artifactKey)} value={member.secondArtifactKey} placeholder="ค้นหา Artifact…" onChange={(secondArtifactKey) => updateMember(index, { secondArtifactKey })} />
-
Constellation { if (value) updateMember(index, { constellation: value as TeamMemberDraft["constellation"] }); }}>{teamConstellationLabel(member.constellation)} {["0", "1", "2", "3", "4", "5", "6", "0-6"].map((value) => {teamConstellationLabel(value)} )}
+
อาวุธ updateMember(index, { weaponKey, refinement: "1" })} />
+
Refinement updateMember(index, { refinement: value as TeamMemberDraft["refinement"] })} triggerProps={{ className: "w-full" }} />
+
Artifact updateMember(index, { artifactKey })} />
+
Artifact ชุดที่ 2 (ถ้ามี) item.key !== member.artifactKey)} value={member.secondArtifactKey} placeholder="ค้นหา Artifact…" onValueChange={(secondArtifactKey) => updateMember(index, { secondArtifactKey })} />
+
Constellation updateMember(index, { constellation: value as TeamMemberDraft["constellation"] })} triggerProps={{ className: "w-full" }} /> Damage - = {
+ items: Item[];
+ placeholder: string;
+ emptyLabel?: string;
+ invalid?: boolean;
+ rarityBackground?: boolean;
+ searchNames?: (item: Item) => string[];
+};
+
+type CatalogDropdownProps
- = CommonSelectProps
- & {
+ value: string;
+ onValueChange: (value: string) => void;
+ showSelectedImage?: boolean;
+};
+
+export function CatalogDropdown
- ({
+ items,
+ value,
+ onValueChange,
+ placeholder,
+ emptyLabel = "ไม่พบรายการ",
+ invalid = false,
+ rarityBackground = false,
+ showSelectedImage = false,
+ searchNames = (item) => [item.name, ...(item.aliases ?? [])],
+}: CatalogDropdownProps
- ) {
+ const selected = items.find((item) => item.key === value) ?? null;
+
+ return (
+
+ {showSelectedImage && selected ? (
+
+
+ ) : null}
+
+ onValueChange(next?.key ?? "")}
+ itemToStringLabel={(item) => item.name}
+ itemToStringValue={(item) => item.key}
+ searchNames={searchNames}
+ autoHighlight
+ >
+
+ {emptyLabel}
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+
+
+
+
- = CommonSelectProps
- & {
+ value: string;
+ onValueChange: (value: string) => void;
+ label: string;
+ className?: string;
+};
+
+function CatalogSlotSelect
- ({
+ items,
+ value,
+ onValueChange,
+ label,
+ placeholder,
+ emptyLabel = "ไม่พบรายการ",
+ invalid = false,
+ rarityBackground = true,
+ searchNames = (item) => [item.name, ...(item.aliases ?? [])],
+ className,
+}: CatalogSlotSelectProps
- ) {
+ const selected = items.find((item) => item.key === value) ?? null;
+
+ return (
+
onValueChange(next?.key ?? "")}
+ itemToStringLabel={(item) => item.name}
+ itemToStringValue={(item) => item.key}
+ searchNames={searchNames}
+ autoHighlight
+ >
+ svg]:hidden",
+ rarityBackground && selected && rarityGradientClass(selected.rarity),
+ className,
+ )}
+ >
+ {selected ? (
+
+
+ {emptyLabel}
+
+ {(item) => (
+
+ {item.name}
+
+ )}
+
+
+
+ );
+}
+
+type DomainSelectProps- = CommonSelectProps
- & {
+ value: string;
+ onValueChange: (value: string) => void;
+ presentation?: "dropdown" | "slot";
+ label?: string;
+ className?: string;
+ showSelectedImage?: boolean;
+};
+
+function DomainCatalogSelect
- ({
+ presentation = "dropdown",
+ label,
+ className,
+ showSelectedImage,
+ rarityBackground = true,
+ ...props
+}: DomainSelectProps
- ) {
+ if (presentation === "slot") {
+ return (
+
- (props: DomainSelectProps
- ) {
+ return
- (props: DomainSelectProps
- ) {
+ return
- = DomainSelectProps
- & {
+ multiple?: false;
+};
+
+type MultipleArtifactSelectProps
- = Omit<
+ CommonSelectProps
- ,
+ "rarityBackground"
+> & {
+ multiple: true;
+ values: string[];
+ onValuesChange: (values: string[]) => void;
+ label: string;
+ max?: number;
+ className?: string;
+};
+
+export function ArtifactSelect
- (
+ props: SingleArtifactSelectProps
- | MultipleArtifactSelectProps
- ,
+) {
+ if (!props.multiple) return
onValuesChange(next.slice(0, max).map((item) => item.key))}
+ itemToStringLabel={(item) => item.name}
+ itemToStringValue={(item) => item.key}
+ isItemEqualToValue={(item, value) => item.key === value.key}
+ searchNames={searchNames}
+ autoHighlight
+ >
+ item.name).join(", ")}` : label}
+ aria-invalid={invalid}
+ className={cn(
+ "relative aspect-square w-full overflow-hidden rounded-md border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&>svg]:hidden",
+ className,
+ )}
+ >
+ {selected.length ? (
+
+
+ {emptyLabel}
+
+ {(item) => (
+ = max && !selected.some((candidate) => candidate.key === item.key)}
+ >
+ {item.name}
+
+ )}
+
+
+
+ );
+}
+
+function CatalogOptionImage({
+ item,
+ rarityBackground,
+}: {
+ item: AdminCatalogItem;
+ rarityBackground: boolean;
+}) {
+ return (
+
+
+ );
+}
diff --git a/components/admin/ui/delete-confirmation-dialog.tsx b/components/admin/ui/delete-confirmation-dialog.tsx
new file mode 100644
index 0000000..e9a2e44
--- /dev/null
+++ b/components/admin/ui/delete-confirmation-dialog.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { toast } from "sonner";
+
+import { SimpleTooltip } from "@/components/tooltip";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+type DeleteConfirmationDialogProps = {
+ type?: string;
+ title?: ReactNode;
+ description: ReactNode;
+ onConfirm: () => void | Promise;
+ confirmLabel?: ReactNode;
+ trigger?: ComponentProps["render"];
+ children?: ReactNode;
+ open?: ComponentProps["open"];
+ onOpenChange?: ComponentProps["onOpenChange"];
+ showSuccessToast?: boolean;
+ triggerTooltip?: ReactNode;
+};
+
+export function DeleteConfirmationDialog({
+ type,
+ title,
+ description,
+ onConfirm,
+ confirmLabel = "ยืนยันลบ",
+ trigger,
+ children,
+ open,
+ onOpenChange,
+ showSuccessToast = true,
+ triggerTooltip,
+}: DeleteConfirmationDialogProps) {
+ const handleConfirm = async () => {
+ await onConfirm();
+ if (showSuccessToast) toast.success("ลบสำเร็จ!");
+ };
+
+ return (
+
+ {trigger ? (
+ triggerTooltip ? (
+
+ {children}
+
+ ) : (
+ {children}
+ )
+ ) : null}
+
+
+ {type ? `Are you sure to delete ${type}?` : title}
+ {description}
+
+
+ ยกเลิก
+
+ {confirmLabel}
+
+
+
+
+ );
+}
diff --git a/components/admin/ui/option-select.tsx b/components/admin/ui/option-select.tsx
new file mode 100644
index 0000000..d0e79b3
--- /dev/null
+++ b/components/admin/ui/option-select.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import Image from "next/image";
+import type { ComponentProps, ReactNode } from "react";
+
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { elementIconFilter } from "@/lib/catalog/element";
+
+export type AdminSelectOption = {
+ value: string;
+ label: ReactNode;
+};
+
+type AdminDropdownProps = {
+ options: readonly AdminSelectOption[];
+ value?: string;
+ onValueChange: (value: string) => void;
+ placeholder?: string;
+ disabled?: boolean;
+ "aria-label"?: string;
+ triggerProps?: Omit, "children">;
+};
+
+export function AdminDropdown({
+ options,
+ value,
+ onValueChange,
+ placeholder,
+ disabled,
+ "aria-label": ariaLabel,
+ triggerProps,
+}: AdminDropdownProps) {
+ return (
+ {
+ if (next !== null) onValueChange(next);
+ }}
+ >
+
+
+
+
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+ );
+}
+
+type ConstellationSelectProps = Omit & {
+ includeNone?: boolean;
+ includeRange?: boolean;
+ minimum?: 0 | 1;
+};
+
+export function ConstellationSelect({
+ includeNone = false,
+ includeRange = false,
+ minimum = 0,
+ ...props
+}: ConstellationSelectProps) {
+ const options: AdminSelectOption[] = [
+ ...(includeNone ? [{ value: "none", label: "None" }] : []),
+ ...Array.from({ length: 7 - minimum }, (_, index) => {
+ const level = index + minimum;
+ return { value: String(level), label: `C${level}` };
+ }),
+ ...(includeRange ? [{ value: "0-6", label: "C0-6" }] : []),
+ ];
+ return & {
+ includeNone?: boolean;
+ includeRange?: boolean;
+};
+
+export function RefinementSelect({
+ includeNone = false,
+ includeRange = false,
+ ...props
+}: RefinementSelectProps) {
+ const options: AdminSelectOption[] = [
+ ...(includeNone ? [{ value: "none", label: "None" }] : []),
+ ...Array.from({ length: 5 }, (_, index) => ({
+ value: String(index + 1),
+ label: `R${index + 1}`,
+ })),
+ ...(includeRange ? [{ value: "1-5", label: "R1-5" }] : []),
+ ];
+ return & {
+ elements: readonly string[];
+ iconUrls?: Record;
+};
+
+export function ElementSelect({ elements, iconUrls = {}, ...props }: ElementSelectProps) {
+ return (
+ ({
+ value: element,
+ label: (
+ <>
+ {iconUrls[element] ? (
+
ตัวละคร
- setDraft((current) => ({
+ onValueChange={(characterKey) => setDraft((current) => ({
...current,
characterKey,
rows: current.rows.map((row) => ({ ...row, weaponKey: "" })),
@@ -240,12 +241,12 @@ export function WeaponImageGenerator({
อาวุธ
- updateRow(row.id, { weaponKey })}
+ onValueChange={(weaponKey) => updateRow(row.id, { weaponKey })}
/>
diff --git a/components/public/stygian-guide.tsx b/components/public/stygian-guide.tsx
index 46c9a82..eb2c596 100644
--- a/components/public/stygian-guide.tsx
+++ b/components/public/stygian-guide.tsx
@@ -6,23 +6,20 @@ import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { LunarisText } from "@/components/public/lunaris-text";
import { parseLunarisText } from "@/lib/catalog/lunaris";
+import { elementIconFilter } from "@/lib/catalog/element";
import { rarityGradientClass } from "@/lib/catalog/rarity";
import type { getActiveCatalog } from "@/lib/guides/queries";
-import type { getActiveStygianSchedule } from "@/lib/stygian/repository";
+import type { getStygianSchedule } from "@/lib/stygian/repository";
+import { cn } from "@/lib/utils";
-type Schedule = NonNullable
>>;
+type Schedule = NonNullable>>;
type Catalog = NonNullable>>;
type Item = Schedule["recommendations"][number]["items"][number];
function recommendation(item: Item, catalog: Catalog) {
if (item.kind === "element" && item.element) {
const source = catalog.characters.find((character) => character.element === item.element && character.elementIconUrl);
- return { name: item.element, imageUrl: source?.elementIconUrl ?? null, badge: "Element" };
- }
- if (item.kind === "constellation" && item.characterKey && item.constellationLevel) {
- const character = catalog.characters.find((candidate) => candidate.key === item.characterKey);
- const constellation = character?.constellations.find((candidate) => candidate.level === item.constellationLevel);
- return { name: `${character?.name ?? item.characterKey} C${item.constellationLevel}`, imageUrl: constellation?.iconUrl ?? character?.imageUrl ?? null, badge: "Constellation" };
+ return { name: item.element, imageUrl: source?.elementIconUrl ?? null, badge: "Element", rarity: null };
}
if (item.kind === "character") {
const character = catalog.characters.find((candidate) => candidate.key === item.catalogKey);
@@ -35,6 +32,7 @@ function recommendation(item: Item, catalog: Catalog) {
rarity: character?.rarity ?? null,
weapon,
artifact,
+ refinement: item.refinement,
};
}
const collection = item.kind === "weapon" ? catalog.weapons : catalog.artifacts;
@@ -45,29 +43,26 @@ function recommendation(item: Item, catalog: Catalog) {
function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item; catalog: Catalog; teamLayout?: boolean }) {
const value = recommendation(item, catalog);
if (item.kind === "character") {
+ const hasEquipment = Boolean(value.weapon || value.artifact);
return (
-
-
+
+
{value.imageUrl ?
-
-
- {value.weapon ?
-
- {value.artifact ?
-
+ {hasEquipment ?
+ {value.weapon ?
: null}
+ {value.artifact ?
: null}
+
: null}
-
{value.name} {value.badge}
+ {teamLayout ?
{value.badge === "Character" ? "C—" : value.badge} {value.weapon && value.refinement ? `R${value.refinement}` : "R—"}
:
{value.name} {value.badge}
}
);
}
return (
-
- {value.imageUrl ?
: null}
+
+ {value.imageUrl ?
{value.name}
{value.badge}
@@ -109,7 +104,7 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
))}
- REC TEAM
+ Recommended team
{teams.length ? teams.map((team) => (
{team.items.slice(0, 4).map((item) =>
)}
@@ -118,7 +113,7 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
)) :
No team recommendations yet.
}
- REC UNIT
+ Recommended unit
{units.length ? {units.map((item) =>
: No unit recommendations yet.
}
-
+
{[0, 1, 2].map((position) => {
const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
- return {boss?.name ?? `Boss ${position + 1}`} {boss?.name ?? `Boss ${position + 1}`}
{[0, 1, 2].map((position) => ) {
if (item.kind === "element") return `${item.kind}:${item.element}`;
- if (item.kind === "constellation") return `${item.kind}:${item.characterKey}:${item.constellationLevel}`;
return `${item.kind}:${item.catalogKey}`;
}