diff --git a/apps/web/src/components/ObjectTree.tsx b/apps/web/src/components/ObjectTree.tsx
index dcac417..daa8e6f 100644
--- a/apps/web/src/components/ObjectTree.tsx
+++ b/apps/web/src/components/ObjectTree.tsx
@@ -5,11 +5,11 @@ import { iconsForObject } from './objectIcons';
interface Props {
nodes: ObjectTreeNode[];
- selectedGuid: string | null;
- onSelect: (guid: string) => void;
+ selectedPath: string | null;
+ onSelect: (path: string) => void;
}
-export default function ObjectTree({ nodes, selectedGuid, onSelect }: Props) {
+export default function ObjectTree({ nodes, selectedPath, onSelect }: Props) {
return (
{nodes.map((node, index) => (
@@ -18,7 +18,7 @@ export default function ObjectTree({ nodes, selectedGuid, onSelect }: Props) {
node={node}
depth={0}
path={`${index}`}
- selectedGuid={selectedGuid}
+ selectedPath={selectedPath}
onSelect={onSelect}
/>
))}
@@ -30,17 +30,20 @@ function TreeNode({
node,
depth,
path,
- selectedGuid,
+ selectedPath,
onSelect,
}: {
node: ObjectTreeNode;
depth: number;
- /** Index path from the root, used as a stable unique key. */
+ /** Index path from the root, used as a stable unique key and selection id. */
path: string;
- selectedGuid: string | null;
- onSelect: (guid: string) => void;
+ selectedPath: string | null;
+ onSelect: (path: string) => void;
}) {
- const selected = node.object.GUID === selectedGuid;
+ // Selection is keyed by the node's unique index path, not its GUID: cards in
+ // a deck frequently share a GUID (the deck's), so GUID-based selection would
+ // highlight and render the wrong card.
+ const selected = path === selectedPath;
const hasChildren = node.children.length > 0;
const [expanded, setExpanded] = useState(false);
return (
@@ -69,7 +72,7 @@ function TreeNode({
)}