rebase

frontend/src/components/worlds/WorldCard.tsx

@@ -0,0 +1,110 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { cn } from "@/lib/cn";
+import type { WorldListItem, WorldStatus } from "@/types";
+import { Button } from "@/components/ui/Button";
+
+export interface WorldCardProps {
+  world: WorldListItem;
+  onDelete?: (world: WorldListItem) => void;
+  className?: string;
+}
+
+const STATUS_BADGE: Record<WorldStatus, string> = {
+  draft: "bg-warn/15 text-warn",
+  building: "bg-accent/15 text-accent",
+  ready: "bg-ok/15 text-ok",
+  failed: "bg-err/15 text-err",
+  archived: "bg-fg-dim/15 text-fg-muted",
+};
+
+const STATUS_LABEL_KEY: Record<WorldStatus, string> = {
+  draft: "worlds.status_draft",
+  building: "worlds.status_building",
+  ready: "worlds.status_ready",
+  failed: "worlds.status_failed",
+  archived: "worlds.status_archived",
+};
+
+export function WorldCard({ world, onDelete, className }: WorldCardProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const isReady = world.status === "ready";
+
+  return (
+    <article
+      className={cn(
+        "card flex flex-col gap-2 hover:border-accent/40 transition-colors",
+        className,
+      )}
+    >
+      <header className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <h3 className="text-base font-semibold text-fg truncate">{world.name}</h3>
+          <p className="text-xs text-fg-muted uppercase tracking-wide">{world.language}</p>
+        </div>
+        <span className={cn("badge shrink-0", STATUS_BADGE[world.status])}>
+          {t(STATUS_LABEL_KEY[world.status])}
+        </span>
+      </header>
+
+      <p className="text-sm text-fg-muted line-clamp-2 min-h-[2.5rem]">
+        {world.description || "—"}
+      </p>
+
+      <dl className="grid grid-cols-2 gap-2 text-xs">
+        <div>
+          <dt className="text-fg-dim">{t("worlds.player")}</dt>
+          <dd className="text-fg truncate">{world.preview_player_name || "—"}</dd>
+        </div>
+        <div>
+          <dt className="text-fg-dim">{t("worlds.current_time")}</dt>
+          <dd className="text-fg truncate">{world.current_time || "—"}</dd>
+        </div>
+        <div className="col-span-2">
+          <dt className="text-fg-dim">{t("worlds.last_played")}</dt>
+          <dd className="text-fg">{world.last_played_at ? formatDate(world.last_played_at) : t("worlds.never_played")}</dd>
+        </div>
+      </dl>
+
+      <footer className="mt-2 flex gap-2">
+        <Button
+          size="sm"
+          variant={isReady ? "primary" : "secondary"}
+          onClick={() => navigate(`/worlds/${world.id}/play`)}
+          disabled={!isReady}
+          fullWidth
+        >
+          {t("worlds.play")}
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => navigate(`/worlds/${world.id}/edit`)}
+        >
+          {t("worlds.edit")}
+        </Button>
+        {onDelete && (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => onDelete(world)}
+            aria-label={t("common.delete")}
+          >
+            🗑
+          </Button>
+        )}
+      </footer>
+    </article>
+  );
+}
+
+function formatDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString();
+  } catch {
+    return iso;
+  }
+}