Completes the three-panel layout

src/components/DocumentList.tsx

@@ -48,7 +48,7 @@ export function DocumentList<T extends AnyDocument>({
 
   return (
     <section className="w-full max-w-2xl mx-auto">
-      <div className="flex items-center justify-between my-4">
+      <div className="flex items-center justify-between">
         <h2 className="text-xl font-bold text-slate-100">{title}</h2>
         <div className="flex gap-2">
           {isEditing && (

src/components/RelationshipList.tsx

@@ -118,7 +118,7 @@ export function RelationshipList({
       title={displayName(relationshipType)}
       items={items}
       error={error}
-      renderRow={(document) => <DocumentRow document={document} />}
+      renderRow={(document) => <DocumentRow document={document} root={root} />}
       removeItem={handleRemove}
       newItemForm={(onSubmit) => (
         <NewRelatedDocumentForm

src/components/documents/BasicRow.tsx

@@ -1,10 +1,11 @@
-import type { AnyDocument } from "@/lib/types";
+import type { AnyDocument, DocumentId } from "@/lib/types";
-import { Link } from "@tanstack/react-router";
+import { DocumentLink } from "./DocumentLink";
 
 export type Props = {
   doc: AnyDocument;
   title: string;
   description?: string;
+  link: (id: DocumentId) => string;
 };
 
 /**
@@ -13,13 +14,12 @@ export type Props = {
 export const BasicRow = ({ doc, title, description }: Props) => {
   return (
     <div>
-      <Link
+      <DocumentLink
-        to="/document/$documentId"
+        childDocId={doc.id}
-        params={{ documentId: doc.id }}
         className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400"
       >
         <h4>{title}</h4>
-      </Link>
+      </DocumentLink>
       {description && <p>{description}</p>}
     </div>
   );

src/components/documents/DocumentLink.tsx

@@ -0,0 +1,21 @@
+import { makeDocumentPath, useDocumentPath } from "@/lib/documentPath";
+import type { DocumentId, RelationshipType } from "@/lib/types";
+import { Link } from "@tanstack/react-router";
+
+export type Props = React.PropsWithChildren<{
+  childDocId: DocumentId;
+  className?: string;
+}>;
+
+export function DocumentLink({ childDocId, className, children }: Props) {
+  const { documentId, relationshipType } = useDocumentPath();
+
+  return (
+    <Link
+      to={makeDocumentPath(documentId, relationshipType, childDocId)}
+      className={className}
+    >
+      {children}
+    </Link>
+  );
+}

src/components/documents/DocumentRow.tsx

@@ -11,10 +11,10 @@ import { TreasureToggleRow } from "./treasure/TreasureToggleRow";
  */
 export const DocumentRow = ({
   document,
-  session,
+  root,
 }: {
   document: AnyDocument;
-  session?: Session;
+  root?: AnyDocument;
 }) => {
   switch (document.type) {
     case "location":
@@ -48,12 +48,12 @@ export const DocumentRow = ({
       );
 
     case "secret":
-      return <SecretToggleRow secret={document} session={session} />;
+      return <SecretToggleRow secret={document} root={root} />;
 
     case "scene":
       return <BasicRow doc={document} title={document.data.text} />;
 
     case "treasure":
-      return <TreasureToggleRow treasure={document} session={session} />;
+      return <TreasureToggleRow treasure={document} root={root} />;
   }
 };

src/components/documents/DocumentView.tsx

@@ -6,16 +6,18 @@ import { Link } from "@tanstack/react-router";
 import _ from "lodash";
 import { Loader } from "../Loader";
 import { DocumentTitle } from "./DocumentTitle";
-import { TabbedLayout } from "../layout/TabbedLayout";
+import { Tab, TabbedLayout } from "../layout/TabbedLayout";
 import { DocumentEditForm } from "./DocumentEditForm";
 import { RelatedDocumentList } from "./RelatedDocumentList";
 
 export function DocumentView({
   documentId,
   relationshipType,
+  childDocId,
 }: {
   documentId: DocumentId;
   relationshipType: RelationshipType | null;
+  childDocId: DocumentId | null;
 }) {
   const { docResult } = useDocument(documentId);
 
@@ -55,31 +57,24 @@ export function DocumentView({
       }
       title={<DocumentTitle document={doc} />}
       tabs={[
-        <Link
+        <Tab
-          key={""}
           to="/document/$documentId"
           params={{
             documentId,
           }}
-        >
+          label="Attributes"
-          <div className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700 whitespace-nowrap">
+          active={relationshipType === null}
-            Attributes
+        />,
-          </div>
+        ...relationshipList.map((relationshipEntry) => (
-        </Link>,
+          <Tab
-        ...relationshipList.map((relationshipType) => (
-          <Link
-            key={relationshipType}
             to="/document/$documentId/$relationshipType"
             params={{
               documentId,
-              relationshipType,
+              relationshipType: relationshipEntry,
             }}
-          >
+            label={`${displayName(relationshipEntry)} (${relationshipCounts[relationshipEntry] ?? 0})`}
-            <div className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700 whitespace-nowrap">
+            active={relationshipEntry === relationshipType}
-              {displayName(relationshipType)} (
+          />
-              {relationshipCounts[relationshipType] ?? 0})
-            </div>
-          </Link>
         )),
       ]}
       content={
@@ -92,6 +87,19 @@ export function DocumentView({
           />
         )
       }
+      flyout={childDocId && <Flyout docId={childDocId} />}
     />
   );
 }
+
+function Flyout({ docId }: { docId: DocumentId }) {
+  const { docResult } = useDocument(docId);
+
+  if (docResult?.type !== "ready") {
+    return <Loader />;
+  }
+
+  const doc = docResult.value.doc;
+
+  return <DocumentEditForm document={doc} />;
+}

src/components/documents/secret/SecretToggleRow.tsx

@@ -1,7 +1,7 @@
 // SecretRow.tsx
 // Displays a single secret with discovered checkbox and text.
 import { pb } from "@/lib/pocketbase";
-import type { Secret, Session } from "@/lib/types";
+import type { AnyDocument, Secret } from "@/lib/types";
 import { useState } from "react";
 
 /**
@@ -10,10 +10,10 @@ import { useState } from "react";
  */
 export const SecretToggleRow = ({
   secret,
-  session,
+  root,
 }: {
   secret: Secret;
-  session?: Session;
+  root?: AnyDocument;
 }) => {
   const [checked, setChecked] = useState(
     !!(secret.data as any)?.secret?.discovered,
@@ -36,7 +36,7 @@ export const SecretToggleRow = ({
           },
         },
       });
-      if (session || !newChecked) {
+      if (root || !newChecked) {
         // If the session exists or the element is being unchecked, remove any
         // existing discoveredIn relationship
         const rels = await pb.collection("relationships").getList(1, 1, {
@@ -46,11 +46,11 @@ export const SecretToggleRow = ({
           await pb.collection("relationships").delete(rels.items[0].id);
         }
       }
-      if (session) {
+      if (root) {
         if (newChecked) {
           await pb.collection("relationships").create({
             primary: secret.id,
-            secondary: [session.id],
+            secondary: [root.id],
             type: "discoveredIn",
           });
         }

src/components/documents/treasure/TreasureToggleRow.tsx

@@ -1,7 +1,7 @@
 // TreasureRow.tsx
 // Displays a single treasure with discovered checkbox and text.
 import { pb } from "@/lib/pocketbase";
-import type { Session, Treasure } from "@/lib/types";
+import type { AnyDocument, Treasure } from "@/lib/types";
 import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 
@@ -11,10 +11,10 @@ import { useState } from "react";
  */
 export const TreasureToggleRow = ({
   treasure,
-  session,
+  root,
 }: {
   treasure: Treasure;
-  session?: Session;
+  root?: AnyDocument;
 }) => {
   const [checked, setChecked] = useState(
     !!(treasure.data as any)?.treasure?.discovered,
@@ -35,7 +35,7 @@ export const TreasureToggleRow = ({
           },
         },
       });
-      if (session || !newChecked) {
+      if (root || !newChecked) {
         // If the session exists or the element is being unchecked, remove any
         // existing discoveredIn relationship
         const rels = await pb.collection("relationships").getList(1, 1, {
@@ -45,11 +45,11 @@ export const TreasureToggleRow = ({
           await pb.collection("relationships").delete(rels.items[0].id);
         }
       }
-      if (session) {
+      if (root) {
         if (newChecked) {
           await pb.collection("relationships").create({
             primary: treasure.id,
-            secondary: [session.id],
+            secondary: [root.id],
             type: "discoveredIn",
           });
         }

src/components/layout/TabbedLayout.tsx

@@ -1,16 +1,67 @@
+import { Link } from "@tanstack/react-router";
+
 export type Props = {
   title: React.ReactNode;
   navigation: React.ReactNode;
   tabs: React.ReactNode[];
   content: React.ReactNode;
+  flyout?: React.ReactNode;
 };
-export function TabbedLayout({ navigation, title, tabs, content }: Props) {
+export function TabbedLayout({
+  navigation,
+  title,
+  tabs,
+  content,
+  flyout,
+}: Props) {
   return (
     <div>
+      <div className="">
         <div>{navigation}</div>
         <div>{title}</div>
-      <div>{tabs}</div>
+      </div>
-      <div>{content}</div>
+      <div className="flex flex-row justify-start m-2 max-w-5xl">
+        <div className="grow max-w-2xs p-0">{tabs}</div>
+        <div
+          className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`}
+        >
+          {content}
+        </div>
+        {flyout && (
+          <div
+            className="w-lg p-2 bg-slate-800 border border-slate-700 shadow-[0_0_15px_0_rgba(0,0,0,0.5)]"
+            style={{
+              "margin-left": "-32rem",
+            }}
+          >
+            {flyout}
+          </div>
+        )}
+      </div>
     </div>
   );
 }
+
+export type TabProps = {
+  label: string;
+  to: string;
+  params: Record<string, any>;
+  active?: boolean;
+};
+
+const activeTabClass =
+  "text-slate-100 font-bold bg-slate-800 border-t border-b border-l";
+const inactiveTabClass = "text-slate-300 bg-slate-900 border";
+
+export function Tab({ label, to, params, active }: TabProps) {
+  return (
+    <Link
+      key={label}
+      to={to}
+      params={params}
+      className={`block p-2 border-slate-700 whitespace-nowrap ${active ? activeTabClass : inactiveTabClass}`}
+    >
+      {label}
+    </Link>
+  );
+}

src/lib/documentPath.ts

@@ -0,0 +1,54 @@
+import { useParams } from "@tanstack/react-router";
+import * as z from "zod";
+import type { RelationshipType, DocumentId } from "./types";
+
+const documentParams = z
+  .templateLiteral([
+    z.string(),
+    z.optional(z.literal("/")),
+    z.optional(z.string()),
+  ])
+  .pipe(
+    z.transform((path: string) => {
+      if (path === "") {
+        return {
+          relationshipType: null,
+          childDocId: null,
+        };
+      }
+      const [relationshipType, childDocId] = path.split("/");
+      return {
+        relationshipType: (relationshipType ?? null) as RelationshipType | null,
+        childDocId: (childDocId ?? null) as DocumentId | null,
+      };
+    }),
+  );
+
+export function useDocumentPath(): {
+  documentId: DocumentId;
+  relationshipType: RelationshipType | null;
+  childDocId: DocumentId | null;
+} {
+  const params = useParams({
+    from: "/_app/_authenticated/document/$documentId/$",
+  });
+
+  const { relationshipType, childDocId } = documentParams.parse(params._splat);
+
+  return {
+    documentId: params.documentId as DocumentId,
+    relationshipType,
+    childDocId,
+  };
+}
+
+export function makeDocumentPath(
+  documentId: DocumentId,
+  relationshipType?: RelationshipType | null,
+  childDocId?: DocumentId | null,
+) {
+  return (
+    "/document/" +
+    [documentId, relationshipType, childDocId].filter((x) => x).join("/")
+  );
+}

src/routes/_app/_authenticated/document.$documentId.$.tsx

@@ -1,9 +1,8 @@
 import { DocumentView } from "@/components/documents/DocumentView";
 import { DocumentLoader } from "@/context/document/DocumentLoader";
+import { useDocumentPath } from "@/lib/documentPath";
 import type { DocumentId } from "@/lib/types";
-import { RelationshipType } from "@/lib/types";
 import { createFileRoute } from "@tanstack/react-router";
-import * as z from "zod";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId/$",
@@ -11,38 +10,15 @@ export const Route = createFileRoute(
   component: RouteComponent,
 });
 
-const documentParams = z
-  .templateLiteral([
-    z.string(),
-    z.optional(z.literal("/")),
-    z.optional(z.string()),
-  ])
-  .pipe(
-    z.transform((path: string) => {
-      if (path === "") {
-        return {
-          relationshipType: null,
-          childDoc: null,
-        };
-      }
-      const [relationshipType, childDoc] = path.split("/");
-      return {
-        relationshipType: (relationshipType ?? null) as RelationshipType | null,
-        childDoc: (childDoc ?? null) as DocumentId | null,
-      };
-    }),
-  );
-
 function RouteComponent() {
-  const { documentId, _splat } = Route.useParams();
+  const { documentId, relationshipType, childDocId } = useDocumentPath();
-
-  const { relationshipType, childDoc } = documentParams.parse(_splat);
 
   return (
     <DocumentLoader documentId={documentId as DocumentId}>
       <DocumentView
         documentId={documentId as DocumentId}
         relationshipType={relationshipType}
+        childDocId={childDocId}
       />
     </DocumentLoader>
   );