Completes the three-panel layout

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
-          key={""}
+        <Tab
           to="/document/$documentId"
           params={{
             documentId,
           }}
-        >
-          <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">
-            Attributes
-          </div>
-        </Link>,
-        ...relationshipList.map((relationshipType) => (
-          <Link
-            key={relationshipType}
+          label="Attributes"
+          active={relationshipType === null}
+        />,
+        ...relationshipList.map((relationshipEntry) => (
+          <Tab
             to="/document/$documentId/$relationshipType"
             params={{
               documentId,
-              relationshipType,
+              relationshipType: relationshipEntry,
             }}
-          >
-            <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">
-              {displayName(relationshipType)} (
-              {relationshipCounts[relationshipType] ?? 0})
-            </div>
-          </Link>
+            label={`${displayName(relationshipEntry)} (${relationshipCounts[relationshipEntry] ?? 0})`}
+            active={relationshipEntry === relationshipType}
+          />
         )),
       ]}
       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} />;
+}