feat(stygian) : center level controls, preserve boss selection, and copy teams

2026-10-07 20:09:45 +07:00
parent a28e2ed199
commit 8c8815cda5
3 changed files with 108 additions and 38 deletions
@@ -4,6 +4,7 @@ import Image from "@/components/ui/resilient-image";
 import Link from "next/link";
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
+  CopyIcon,
  GripVerticalIcon,
  PlusIcon,
  Trash2Icon,
@@ -742,10 +743,12 @@ function VisualRecommendationGrid({
 function SortableTeam({
  id,
  position,
+  onCopy,
  children,
 }: {
  id: string;
  position: number;
+  onCopy: () => void;
  children: ReactNode;
 }) {
  const {
@@ -765,17 +768,29 @@ function SortableTeam({
      <div className="flex h-full flex-col gap-2 rounded-lg border bg-muted/20 p-2">
        <div className="flex items-center justify-between gap-2">
          <span className="text-sm font-medium">Team {position + 1}</span>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-xs"
-            className="touch-none"
-            aria-label={`Drag to reorder team ${position + 1}`}
-            {...attributes}
-            {...listeners}
-          >
-            <GripVerticalIcon />
-          </Button>
+          <div className="flex items-center gap-1">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              aria-label={`Copy team ${position + 1}`}
+              title="Copy team"
+              onClick={onCopy}
+            >
+              <CopyIcon />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              className="touch-none"
+              aria-label={`Drag to reorder team ${position + 1}`}
+              {...attributes}
+              {...listeners}
+            >
+              <GripVerticalIcon />
+            </Button>
+          </div>
        </div>
        {children}
      </div>
@@ -934,6 +949,17 @@ function BossRecommendationEditor({
                  key={team.id}
                  id={team.id}
                  position={teamIndex}
+                  onCopy={() =>
+                    setTeams((current) => {
+                      const sourceIndex = current.findIndex((entry) => entry.id === team.id);
+                      if (sourceIndex === -1) return current;
+                      const source = current[sourceIndex];
+                      return current.toSpliced(sourceIndex + 1, 0, {
+                        id: crypto.randomUUID(),
+                        items: source.items.map((item) => ({ ...item })),
+                      });
+                    })
+                  }
                >
                  <VisualRecommendationGrid
                    items={team.items}
@@ -1060,17 +1086,19 @@ export function StygianEditor({
      <Tabs
        value={String(level)}
        onValueChange={(next) => setLevel(Number(next) as 105 | 110)}
+        className="grid grid-cols-1"
      >
-        <TabsList>
+        <TabsList className="relative z-10 col-start-1 row-start-2 justify-self-center" aria-label="Stygian difficulty">
          {stygianLevels.map((entry) => (
            <TabsTrigger key={entry} value={String(entry)}>Level {entry}</TabsTrigger>
          ))}
        </TabsList>
        {stygianLevels.map((entry) => (
-          <TabsContent key={entry} value={String(entry)}>
+          <TabsContent key={entry} value={String(entry)} className="col-start-1 row-span-3 row-start-1 grid grid-rows-subgrid">
            <Tabs
              value={String(bossPosition)}
              onValueChange={(next) => setBossPosition(Number(next))}
+              className="row-span-3 grid grid-rows-subgrid"
            >
              <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto group-data-horizontal/tabs:min-h-96" aria-label={`Level ${entry} bosses`}>
                {stygianBossPositions.map((position) => {
@@ -1104,7 +1132,7 @@ export function StygianEditor({
                  <TabsContent
                    key={boss.position}
                    value={String(boss.position)}
-                    className="pt-4"
+                    className="row-start-3 pt-4"
                  >
                    <BossRecommendationEditor
                      scheduleId={schedule.scheduleId}
@@ -4,7 +4,8 @@ import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { buttonVariants } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StygianBossTabs, StygianNavigation } from "@/components/stygian/stygian-navigation";
 import {
  StygianBossCard,
  StygianBossTab,
@@ -121,31 +122,35 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;

 export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
  return (
-    <Tabs defaultValue="105">
-      <p className="text-sm font-medium">เลือกระดับบอส</p>
-      <TabsList aria-label="ระดับความยาก Stygian">
-        {stygianLevels.map((level) => (
-          <TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
-        ))}
-      </TabsList>
+    <StygianNavigation>
+      <div className="relative z-10 col-start-1 row-start-2 flex flex-col items-center gap-2">
+        <p className="text-sm font-medium">เลือกระดับบอส</p>
+        <TabsList aria-label="ระดับความยาก Stygian">
+          {stygianLevels.map((level) => (
+            <TabsTrigger key={level} value={String(level)} className="max-sm:min-h-11">เลเวล {level}</TabsTrigger>
+          ))}
+        </TabsList>
+      </div>
      {stygianLevels.map((level) => (
-        <TabsContent key={level} value={String(level)}>
-          <Tabs defaultValue="0">
-            <p className="text-sm font-medium">เลือกบอส</p>
-            <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
-              {stygianBossPositions.map((position) => {
-                const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
-                const label = boss?.name ?? `Boss ${position + 1}`;
-                const positionLabel = stygianBossPositionLabels[position];
-                return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-1 py-2 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset sm:px-2 sm:py-3">
-                  <StygianBossTab boss={boss} position={position} priority={level === 105} />
-                </TabsTrigger>;
-              })}
-            </TabsList>
-            {stygianBossPositions.map((position) => <TabsContent key={position} value={String(position)} className="pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
-          </Tabs>
+        <TabsContent key={level} value={String(level)} className="col-start-1 row-span-3 row-start-1 grid grid-rows-subgrid">
+          <StygianBossTabs>
+            <div className="flex flex-col gap-2">
+              <p className="text-sm font-medium">เลือกบอส</p>
+              <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto" aria-label={`Level ${level} bosses`}>
+                {stygianBossPositions.map((position) => {
+                  const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
+                  const label = boss?.name ?? `Boss ${position + 1}`;
+                  const positionLabel = stygianBossPositionLabels[position];
+                  return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-1 py-2 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset sm:px-2 sm:py-3">
+                    <StygianBossTab boss={boss} position={position} priority={level === 105} />
+                  </TabsTrigger>;
+                })}
+              </TabsList>
+            </div>
+            {stygianBossPositions.map((position) => <TabsContent key={position} value={String(position)} className="row-start-3 pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
+          </StygianBossTabs>
        </TabsContent>
      ))}
-    </Tabs>
+    </StygianNavigation>
  );
 }
@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+import { Tabs } from "@/components/ui/tabs";
+
+const BossSelectionContext = createContext<{
+  position: string;
+  onPositionChange: (position: string) => void;
+} | null>(null);
+
+export function StygianNavigation({ children }: { children: ReactNode }) {
+  const [position, onPositionChange] = useState("0");
+
+  return (
+    <BossSelectionContext value={{ position, onPositionChange }}>
+      <Tabs defaultValue="105" className="grid grid-cols-1">
+        {children}
+      </Tabs>
+    </BossSelectionContext>
+  );
+}
+
+export function StygianBossTabs({ children }: { children: ReactNode }) {
+  const selection = useContext(BossSelectionContext);
+  if (!selection) throw new Error("StygianBossTabs requires StygianNavigation.");
+
+  return (
+    <Tabs
+      value={selection.position}
+      onValueChange={selection.onPositionChange}
+      className="row-span-3 grid grid-rows-subgrid"
+    >
+      {children}
+    </Tabs>
+  );
+}