feat(web): replace flat lists with tree sidebar and object inspector

Add a containment-tree sidebar with class tags and display labels, plus an inspector pane backed by a viewer registry with a default viewer. Custom per-class viewers can be registered later.
2026-08-08 12:19:43 +08:00
parent d8a698986a
commit a8e84c8b9d
3 changed files with 171 additions and 40 deletions
@@ -0,0 +1,68 @@
+import type { ObjectTreeNode } from '@tts/extract';
+
+interface Props {
+  nodes: ObjectTreeNode[];
+  selectedGuid: string | null;
+  onSelect: (guid: string) => void;
+}
+
+export default function ObjectTree({ nodes, selectedGuid, onSelect }: Props) {
+  return (
+    <ul className="space-y-0.5">
+      {nodes.map((node) => (
+        <TreeNode
+          key={node.object.GUID}
+          node={node}
+          depth={0}
+          selectedGuid={selectedGuid}
+          onSelect={onSelect}
+        />
+      ))}
+    </ul>
+  );
+}
+
+function TreeNode({
+  node,
+  depth,
+  selectedGuid,
+  onSelect,
+}: {
+  node: ObjectTreeNode;
+  depth: number;
+  selectedGuid: string | null;
+  onSelect: (guid: string) => void;
+}) {
+  const selected = node.object.GUID === selectedGuid;
+  return (
+    <li>
+      <button
+        onClick={() => onSelect(node.object.GUID)}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        className={`block w-full truncate rounded px-2 py-1 text-left text-sm ${
+          selected
+            ? 'bg-zinc-700 text-zinc-100'
+            : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+        }`}
+      >
+        <span className="mr-1.5 rounded bg-zinc-800 px-1 py-0.5 text-xs uppercase text-zinc-500">
+          {node.object.Name}
+        </span>
+        <span className="truncate">{node.label}</span>
+      </button>
+      {node.children.length > 0 && (
+        <ul>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.object.GUID}
+              node={child}
+              depth={depth + 1}
+              selectedGuid={selectedGuid}
+              onSelect={onSelect}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { TTSObject } from '@tts/shared';
+
+/**
+ * A viewer renders a single selected object. Custom viewers can be registered
+ * per object class (`Name`) and will take precedence over the default viewer.
+ */
+export interface ObjectViewer {
+  /** The object class this viewer handles, e.g. `Card`, `Bag`. */
+  name: string;
+  component: (props: { object: TTSObject }) => ReactNode;
+}
+
+const registry = new Map<string, ObjectViewer['component']>();
+
+/** Register a viewer for a specific object class. */
+export function registerViewer(name: string, component: ObjectViewer['component']) {
+  registry.set(name, component);
+}
+
+/** Resolve the viewer for an object, falling back to the default viewer. */
+export function resolveViewer(object: TTSObject): ObjectViewer['component'] {
+  return registry.get(object.Name) ?? DefaultViewer;
+}
+
+/** The default viewer: a plain inspection of the object's fields. */
+export function DefaultViewer({ object }: { object: TTSObject }) {
+  return (
+    <dl className="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2">
+      {Object.entries(object).map(([key, value]) => (
+        <div key={key} className="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
+          <dt className="font-mono text-xs uppercase text-zinc-500">{key}</dt>
+          <dd className="mt-1 break-words text-zinc-200">
+            {typeof value === 'string' || typeof value === 'number' ? (
+              value
+            ) : (
+              <pre className="whitespace-pre-wrap font-mono text-xs">
+                {JSON.stringify(value, null, 2)}
+              </pre>
+            )}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}