From 293e1f9f628d6638b787d64c7ba2520b1a39f7c8 Mon Sep 17 00:00:00 2001
From: Drew Haven <periodic@blazestar.net>
Date: Fri, 13 Jun 2025 11:54:23 -0700
Subject: [PATCH] Cleans up the mobile styling.  Adds tabs

---
 src/components/AutoSaveTextarea.tsx           |  2 +-
 src/components/DocumentList.tsx               |  4 +-
 src/components/RelationshipList.tsx           |  5 +-
 src/lib/relationships.ts                      |  5 ++
 src/routes/_app.tsx                           |  2 +-
 .../_authenticated/document.$documentId.tsx   | 49 +++++++++++++------
 6 files changed, 44 insertions(+), 23 deletions(-)
 create mode 100644 src/lib/relationships.ts

diff --git a/src/components/AutoSaveTextarea.tsx b/src/components/AutoSaveTextarea.tsx
index 0996c80..e1c7c1c 100644
--- a/src/components/AutoSaveTextarea.tsx
+++ b/src/components/AutoSaveTextarea.tsx
@@ -63,7 +63,7 @@ export function AutoSaveTextarea({
         <textarea
           value={value}
           onChange={handleChange}
-          className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
+          className={`w-full min-h-[6em] field-sizing-content p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
           {...props}
         />
       ) : (
diff --git a/src/components/DocumentList.tsx b/src/components/DocumentList.tsx
index 2f0c2f0..2127cca 100644
--- a/src/components/DocumentList.tsx
+++ b/src/components/DocumentList.tsx
@@ -40,11 +40,11 @@ export function DocumentList<T extends Document>({
 
   return (
     <section className="w-full max-w-2xl mx-auto">
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between my-4">
         <h2 className="text-xl font-bold text-slate-100">{title}</h2>
         <button
           type="button"
-          className="inline-flex items-center justify-center rounded-full bg-violet-600 hover:bg-violet-700 text-white w-9 h-9 focus:outline-none focus:ring-2 focus:ring-violet-400"
+          className="inline-flex items-center justify-center rounded-full bg-violet-600 hover:bg-violet-700 text-white w-8 h-8 focus:outline-none focus:ring-2 focus:ring-violet-400"
           aria-label="Add new item"
           onClick={() => setOpen(true)}
         >
diff --git a/src/components/RelationshipList.tsx b/src/components/RelationshipList.tsx
index d168953..4f4de5f 100644
--- a/src/components/RelationshipList.tsx
+++ b/src/components/RelationshipList.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { Loader } from "./Loader";
 import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 import { DocumentRow } from "./documents/DocumentRow";
+import { displayName } from "@/lib/relationships";
 
 interface RelationshipListProps {
   root: Document;
@@ -61,9 +62,7 @@ export function RelationshipList({
 
   return (
     <DocumentList
-      title={
-        relationshipType.charAt(0).toUpperCase() + relationshipType.slice(1)
-      }
+      title={displayName(relationshipType)}
       items={items}
       error={error}
       renderRow={(document) => <DocumentRow document={document} />}
diff --git a/src/lib/relationships.ts b/src/lib/relationships.ts
new file mode 100644
index 0000000..af376b6
--- /dev/null
+++ b/src/lib/relationships.ts
@@ -0,0 +1,5 @@
+import type { RelationshipType } from "./types";
+
+export function displayName(relationshipType: RelationshipType) {
+  return relationshipType.charAt(0).toUpperCase() + relationshipType.slice(1);
+}
diff --git a/src/routes/_app.tsx b/src/routes/_app.tsx
index abdc260..0d1405d 100644
--- a/src/routes/_app.tsx
+++ b/src/routes/_app.tsx
@@ -11,7 +11,7 @@ export const Route = createFileRoute("/_app")({
 function AppHeader() {
   const { user, logout, isLoading } = useAuth();
   return (
-    <header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
+    <header className="flex flex-wrap items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
       <h1 className="text-2xl font-bold text-slate-100 m-0">
         DM's Table Companion
       </h1>
diff --git a/src/routes/_app/_authenticated/document.$documentId.tsx b/src/routes/_app/_authenticated/document.$documentId.tsx
index a4e6c3b..d010cd0 100644
--- a/src/routes/_app/_authenticated/document.$documentId.tsx
+++ b/src/routes/_app/_authenticated/document.$documentId.tsx
@@ -9,6 +9,8 @@ import {
 } from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
 import { EditSessionForm } from "@/components/documents/session/EditSessionForm";
+import { displayName } from "@/lib/relationships";
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/react";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
@@ -47,8 +49,17 @@ function RouteComponent() {
 
   console.log("Parsed data: ", relationships);
 
+  const relationshipList = [
+    RelationshipType.Scenes,
+    RelationshipType.Secrets,
+    RelationshipType.Locations,
+    RelationshipType.Npcs,
+    RelationshipType.Monsters,
+    RelationshipType.Treasures,
+  ];
+
   return (
-    <div className="max-w-xl mx-auto py-8">
+    <div className="max-w-xl mx-auto py-2 px-4">
       <Link
         to="/document/$documentId/print"
         params={{ documentId: session.id }}
@@ -60,21 +71,27 @@ function RouteComponent() {
         session={session as Session}
         onSubmit={handleSaveSession}
       />
-      {[
-        RelationshipType.Scenes,
-        RelationshipType.Secrets,
-        RelationshipType.Locations,
-        RelationshipType.Npcs,
-        RelationshipType.Monsters,
-        RelationshipType.Treasures,
-      ].map((relationshipType) => (
-        <RelationshipList
-          key={relationshipType}
-          root={session}
-          relationshipType={relationshipType}
-          items={relationships[relationshipType] ?? []}
-        />
-      ))}
+      <TabGroup>
+        <TabList className="flex flex-row flex-wrap gap-1 mt-2">
+          {relationshipList.map((relationshipType) => (
+            <Tab 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">
+              {displayName(relationshipType)}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {relationshipList.map((relationshipType) => (
+            <TabPanel>
+              <RelationshipList
+                key={relationshipType}
+                root={session}
+                relationshipType={relationshipType}
+                items={relationships[relationshipType] ?? []}
+              />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </TabGroup>
     </div>
   );
 }