Fixes type errors in the DocumentSearchForm

Support adding existing documents to a session
Formatting
2025-10-11 18:29:05 -07:00 · 2025-10-11 18:06:22 -07:00 · 2025-10-11 15:18:15 -07:00 · 2025-10-11 15:12:22 -07:00 · 2025-10-11 15:00:48 -07:00 · 2025-10-11 13:59:55 -07:00
73 changed files with 1820 additions and 1620 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-Welcome to your new TanStack app! 
+# DM Companion App

-# Getting Started
+## Development
+
+### Getting Started

 To run this application:

@@ -9,7 +11,7 @@ npm install
 npm run start
 ```

-# Building For Production
+### Building For Production

 To build this application for production:

@@ -17,7 +19,7 @@ To build this application for production:
 npm run build
 ```

-## Testing
+### Testing

 This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:

@@ -25,17 +27,15 @@ This project uses [Vitest](https://vitest.dev/) for testing. You can run the tes
 npm run test
 ```

-## Styling
+### Styling

 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.

+### Routing

-
-
-## Routing
 This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.

-### Adding A Route
+#### Adding A Route

 To add a new route to your application just add another a new file in the `./src/routes` directory.

@@ -43,7 +43,7 @@ TanStack will automatically generate the content of the route file for you.

 Now that you have two routes you can use a `Link` component to navigate between them.

-### Adding Links
+#### Adding Links

 To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.

@@ -61,15 +61,15 @@ This will create a link that will navigate to the `/about` route.

 More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).

-### Using A Layout
+#### Using A Layout

 In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.

 Here is an example layout that includes a header:

 ```tsx
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";

 import { Link } from "@tanstack/react-router";

@@ -86,129 +86,20 @@ export const Route = createRootRoute({
      <TanStackRouterDevtools />
    </>
  ),
-})
+});
 ```

 The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.

 More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).

+### Data Fetching

-## Data Fetching
+#### Pocketbase

-There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
+TODO

-For example:
-
-```tsx
-const peopleRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/people",
-  loader: async () => {
-    const response = await fetch("https://swapi.dev/api/people");
-    return response.json() as Promise<{
-      results: {
-        name: string;
-      }[];
-    }>;
-  },
-  component: () => {
-    const data = peopleRoute.useLoaderData();
-    return (
-      <ul>
-        {data.results.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    );
-  },
-});
-```
-
-Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
-
-### React-Query
-
-React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
-
-First add your dependencies:
-
-```bash
-npm install @tanstack/react-query @tanstack/react-query-devtools
-```
-
-Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
-
-```tsx
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-// ...
-
-const queryClient = new QueryClient();
-
-// ...
-
-if (!rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement);
-
-  root.render(
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  );
-}
-```
-
-You can also add TanStack Query Devtools to the root route (optional).
-
-```tsx
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-
-const rootRoute = createRootRoute({
-  component: () => (
-    <>
-      <Outlet />
-      <ReactQueryDevtools buttonPosition="top-right" />
-      <TanStackRouterDevtools />
-    </>
-  ),
-});
-```
-
-Now you can use `useQuery` to fetch your data.
-
-```tsx
-import { useQuery } from "@tanstack/react-query";
-
-import "./App.css";
-
-function App() {
-  const { data } = useQuery({
-    queryKey: ["people"],
-    queryFn: () =>
-      fetch("https://swapi.dev/api/people")
-        .then((res) => res.json())
-        .then((data) => data.results as { name: string }[]),
-    initialData: [],
-  });
-
-  return (
-    <div>
-      <ul>
-        {data.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-export default App;
-```
-
-You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
-
-## State Management
+### State Management

 Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.

@@ -280,11 +171,3 @@ We use the `Derived` class to create a new store that is derived from another st
 Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.

 You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
-
-# Demo files
-
-Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
-
-# Learn More
-
-You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
    <title>Dungeon Master's Companion</title>
  </head>
  <body>
-    <div id="app"></div>
+    <div id="app" class="flex flex-col h-full w-full"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,20 @@
        "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
        "@headlessui/react": "^2.2.4",
        "@tailwindcss/vite": "^4.0.6",
-        "@tanstack/react-query": "^5.79.0",
        "@tanstack/react-query-devtools": "^5.79.0",
        "@tanstack/react-router": "^1.114.3",
        "@tanstack/react-router-devtools": "^1.114.3",
        "@tanstack/router-plugin": "^1.114.3",
+        "dompurify": "^3.2.6",
        "lodash": "^4.17.21",
+        "marked": "^16.1.1",
        "pocketbase": "^0.26.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
-        "tailwindcss": "^4.0.6"
+        "tailwindcss": "^4.0.6",
+        "zod": "^4.0.5"
      },
      "devDependencies": {
-        "@astrojs/ts-plugin": "^1.10.4",
        "@testing-library/dom": "^10.4.0",
        "@testing-library/react": "^16.2.0",
        "@types/lodash": "^4.17.17",
@@ -69,52 +70,6 @@
      "dev": true,
      "license": "ISC"
    },
-    "node_modules/@astrojs/compiler": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.2.tgz",
-      "integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@astrojs/ts-plugin": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@astrojs/ts-plugin/-/ts-plugin-1.10.4.tgz",
-      "integrity": "sha512-rapryQINgv5VLZF884R/wmgX3mM9eH1PC/I3kkPV9rP6lEWrRN1YClF3bGcDHFrf8EtTLc0Wqxne1Uetpevozg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@astrojs/compiler": "^2.10.3",
-        "@astrojs/yaml2ts": "^0.2.2",
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@volar/language-core": "~2.4.7",
-        "@volar/typescript": "~2.4.7",
-        "semver": "^7.3.8",
-        "vscode-languageserver-textdocument": "^1.0.11"
-      }
-    },
-    "node_modules/@astrojs/ts-plugin/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@astrojs/yaml2ts": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@astrojs/yaml2ts/-/yaml2ts-0.2.2.tgz",
-      "integrity": "sha512-GOfvSr5Nqy2z5XiwqTouBBpy5FyI6DEe+/g/Mk5am9SjILN1S5fOEvYK0GuWHg98yS/dobP4m8qyqw/URW35fQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "yaml": "^2.5.0"
-      }
-    },
    "node_modules/@atlaskit/pragmatic-drag-and-drop": {
      "version": "1.7.4",
      "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.7.4.tgz",
@@ -1722,6 +1677,7 @@
      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.79.0.tgz",
      "integrity": "sha512-s+epTqqLM0/TbJzMAK7OEhZIzh63P9sWz5HEFc5XHL4FvKQXQkcjI8F3nee+H/xVVn7mrP610nVXwOytTSYd0w==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/tannerlinsley"
@@ -1742,6 +1698,7 @@
      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.79.0.tgz",
      "integrity": "sha512-DjC4JIYZnYzxaTzbg3osOU63VNLP67dOrWet2cZvXgmgwAXNxfS52AMq86M5++ILuzW+BqTUEVMTjhrZ7/XBuA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@tanstack/query-core": "5.79.0"
      },
@@ -1925,6 +1882,15 @@
        }
      }
    },
+    "node_modules/@tanstack/router-generator/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
    "node_modules/@tanstack/router-plugin": {
      "version": "1.120.10",
      "resolved": "https://registry.npmjs.org/@tanstack/router-plugin/-/router-plugin-1.120.10.tgz",
@@ -1981,6 +1947,15 @@
        }
      }
    },
+    "node_modules/@tanstack/router-plugin/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
    "node_modules/@tanstack/router-utils": {
      "version": "1.115.0",
      "resolved": "https://registry.npmjs.org/@tanstack/router-utils/-/router-utils-1.115.0.tgz",
@@ -2162,6 +2137,13 @@
        "@types/react": "^19.0.0"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.0.tgz",
@@ -2296,35 +2278,6 @@
        "url": "https://opencollective.com/vitest"
      }
    },
-    "node_modules/@volar/language-core": {
-      "version": "2.4.16",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.16.tgz",
-      "integrity": "sha512-mcoAFkYVQV4iiLYjTlbolbsm9hhDLtz4D4wTG+rwzSCUbEnxEec+KBlneLMlfdVNjkVEh8lUUSsCGNEQR+hFdA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@volar/source-map": "2.4.16"
-      }
-    },
-    "node_modules/@volar/source-map": {
-      "version": "2.4.16",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.16.tgz",
-      "integrity": "sha512-4rBiAhOw4MfFTpkvweDnjbDkixpmWNgBws95rpu2oFdMprkTtqFEb8pUOxQ/ruru8/zXSYLwRNXNozznjW9Vtw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@volar/typescript": {
-      "version": "2.4.16",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.16.tgz",
-      "integrity": "sha512-CrRuG20euPerYc4H0kvDWSSLTBo6qgSI1/0BjXL9ogjm5j6l0gIffvNzEvfmVjr8TAuoMPD0NxuEkteIapfZQQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@volar/language-core": "2.4.16",
-        "path-browserify": "^1.0.1",
-        "vscode-uri": "^3.0.8"
-      }
-    },
    "node_modules/acorn": {
      "version": "8.14.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -2734,6 +2687,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.157",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.157.tgz",
@@ -3386,6 +3348,18 @@
        "@jridgewell/sourcemap-codec": "^1.5.0"
      }
    },
+    "node_modules/marked": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.1.1.tgz",
+      "integrity": "sha512-ij/2lXfCRT71L6u0M29tJPhP0bM5shLL3u5BePhFwPELj2blMJ6GDtD7PfJhRLhJ/c2UwrK17ySVcDzy2YHjHQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
    "node_modules/minipass": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -3481,13 +3455,6 @@
        "url": "https://github.com/inikulin/parse5?sponsor=1"
      }
    },
-    "node_modules/path-browserify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/pathe": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -4339,20 +4306,6 @@
        }
      }
    },
-    "node_modules/vscode-languageserver-textdocument": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
-      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/vscode-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
-      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/w3c-xmlserializer": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -4492,8 +4445,9 @@
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "devOptional": true,
      "license": "ISC",
+      "optional": true,
+      "peer": true,
      "bin": {
        "yaml": "bin.mjs"
      },
@@ -4502,9 +4456,9 @@
      }
    },
    "node_modules/zod": {
-      "version": "3.25.28",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.28.tgz",
-      "integrity": "sha512-/nt/67WYKnr5by3YS7LroZJbtcCBurDKKPBPWWzaxvVCGuG/NOsiKkrjoOhI8mJ+SQUXEbUzeB3S+6XDUEEj7Q==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.0.5.tgz",
+      "integrity": "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
  "scripts": {
    "dev": "mprocs \"npm run start\" \"pocketbase serve\"",
    "start": "VITE_POCKETBASE_URL=http://localhost:8090 vite --port 3000",
-    "build": "vite build && tsc",
+    "build": "tsc && vite build",
    "serve": "vite preview",
    "test": "vitest run",
    "docker:build:app": "docker build -t docker.havenisms.com/lazy-dm/app -f docker/app.dockerfile --build-arg VITE_POCKETBASE_URL=/api .",
@@ -16,19 +16,20 @@
    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
    "@headlessui/react": "^2.2.4",
    "@tailwindcss/vite": "^4.0.6",
-    "@tanstack/react-query": "^5.79.0",
    "@tanstack/react-query-devtools": "^5.79.0",
    "@tanstack/react-router": "^1.114.3",
    "@tanstack/react-router-devtools": "^1.114.3",
    "@tanstack/router-plugin": "^1.114.3",
+    "dompurify": "^3.2.6",
    "lodash": "^4.17.21",
+    "marked": "^16.1.1",
    "pocketbase": "^0.26.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.6"
+    "tailwindcss": "^4.0.6",
+    "zod": "^4.0.5"
  },
  "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.4",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.2.0",
    "@types/lodash": "^4.17.17",
--- a/pb_migrations/1754253375_updated_documents.js
+++ b/pb_migrations/1754253375_updated_documents.js
@@ -0,0 +1,54 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3332084752")
+
+  // update field
+  collection.fields.addAt(3, new Field({
+    "hidden": false,
+    "id": "select2363381545",
+    "maxSelect": 1,
+    "name": "type",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "location",
+      "monster",
+      "npc",
+      "scene",
+      "secret",
+      "session",
+      "treasure",
+      "thread",
+      "front"
+    ]
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3332084752")
+
+  // update field
+  collection.fields.addAt(3, new Field({
+    "hidden": false,
+    "id": "select2363381545",
+    "maxSelect": 1,
+    "name": "type",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "location",
+      "monster",
+      "npc",
+      "scene",
+      "secret",
+      "session",
+      "treasure"
+    ]
+  }))
+
+  return app.save(collection)
+})
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "TanStack App",
-  "name": "Create TanStack App Sample",
+  "short_name": "DM Companion",
+  "name": "Dungeon Master Companion",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/components/DocumentList.tsx
+++ b/src/components/DocumentList.tsx
@@ -9,7 +9,7 @@ import {
 import { Fragment, useCallback, useState } from "react";

 type Props<T extends AnyDocument> = {
-  title: React.ReactNode;
+  title?: React.ReactNode;
  error?: React.ReactNode;
  items: T[];
  renderRow: (item: T) => React.ReactNode;
@@ -47,9 +47,9 @@ 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">
-        <h2 className="text-xl font-bold text-slate-100">{title}</h2>
+    <section className="w-full">
+      <div className="flex items-center justify-between">
+        {title && <h2 className="text-xl font-bold text-slate-100">{title}</h2>}
        <div className="flex gap-2">
          {isEditing && (
            <button
@@ -78,7 +78,7 @@ export function DocumentList<T extends AnyDocument>({
        {items.map((item) => (
          <li
            key={item.id}
-            className="p-4 bg-slate-800 rounded text-slate-100 flex flex-row justify-between items-center"
+            className="p-2 m-0 border-b-1 last:border-0 border-slate-700 flex flex-row justify-between items-center"
          >
            {renderRow(item)}

--- a/src/components/EditToggle.tsx
+++ b/src/components/EditToggle.tsx
@@ -0,0 +1,35 @@
+import * as Icons from "./Icons";
+import { useState, Children } from "react";
+
+export function EditToggle({ children }: React.PropsWithChildren) {
+  const [isEditing, setIsEditing] = useState(false);
+  const editChildren = (
+    Children.toArray(children) as React.ReactElement[]
+  ).filter((c) => c.type === Editing);
+  const nonEditChildren = (
+    Children.toArray(children) as React.ReactElement[]
+  ).filter((c) => c.type !== Editing);
+
+  return (
+    <div className="relative">
+      <div className="absolute right-0 top-0 z-50">
+        <button
+          type="button"
+          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={isEditing ? "Exit edit mode" : "Enter edit mode"}
+          onClick={() => setIsEditing(!isEditing)}
+        >
+          <Icons.Edit />
+        </button>
+      </div>
+      {isEditing ? editChildren : nonEditChildren}
+    </div>
+  );
+}
+
+export const Editing = ({ children }: React.PropsWithChildren) => (
+  <>{children}</>
+);
+export const NotEditing = ({ children }: React.PropsWithChildren) => (
+  <>{children}</>
+);
--- a/src/components/FormattedText.tsx
+++ b/src/components/FormattedText.tsx
@@ -0,0 +1,22 @@
+import DOMPurify from "dompurify";
+import * as Marked from "marked";
+
+export type Props = {
+  value: string;
+};
+
+function formatText(text: React.ReactNode): { __html: string } {
+  if (typeof text === "string") {
+    return {
+      __html: DOMPurify.sanitize(
+        Marked.parse(text, { async: false }) as string,
+      ),
+    };
+  }
+
+  throw new Error("Attempted to safe-render a non-string.");
+}
+
+export function FormattedText({ children }: React.PropsWithChildren) {
+  return <div dangerouslySetInnerHTML={formatText(children)}></div>;
+}
--- a/src/components/RelationshipList.tsx
+++ b/src/components/RelationshipList.tsx
@@ -35,19 +35,16 @@ export function RelationshipList({
    return <Loader />;
  }

-  const doc = docResult.value.doc;
-
-  console.info("Rendering relationship list: ", relationshipType);
-
  const relationshipResult = docResult.value.relationships[relationshipType];

-  if (relationshipResult?.type !== "ready") {
-    return <Loader />;
-  }
+  const relationship =
+    relationshipResult?.type === "ready" ? relationshipResult.value : null;

-  const relationship = relationshipResult.value;
+  const itemIds =
+    relationshipResult?.type === "ready"
+      ? relationshipResult.value.secondary
+      : [];

-  const itemIds = relationship.secondary ?? [];
  const items = itemIds
    .map((id) => cache.documents[id])
    .filter((d) => d && d.type === "ready")
@@ -59,7 +56,6 @@ export function RelationshipList({
    try {
      // Check for existing relationship
      if (relationship) {
-        console.debug("Adding to existing relationship", relationship.id);
        const updatedRelationship: Relationship = await pb
          .collection("relationships")
          .update(relationship.id, {
@@ -67,11 +63,10 @@ export function RelationshipList({
          });
        dispatch({
          type: "setRelationship",
-          docId: doc.id,
+          docId: root.id,
          relationship: updatedRelationship,
        });
      } else {
-        console.debug("Creating new relationship");
        const updatedRelationship: Relationship = await pb
          .collection("relationships")
          .create({
@@ -81,7 +76,7 @@ export function RelationshipList({
          });
        dispatch({
          type: "setRelationship",
-          docId: doc.id,
+          docId: root.id,
          relationship: updatedRelationship,
        });
      }
@@ -98,7 +93,6 @@ export function RelationshipList({

    try {
      if (relationship) {
-        console.debug("Removing from existing relationship", relationship.id);
        const updatedRelationship: Relationship = await pb
          .collection("relationships")
          .update(relationship.id, {
@@ -106,7 +100,7 @@ export function RelationshipList({
          });
        dispatch({
          type: "setRelationship",
-          docId: doc.id,
+          docId: root.id,
          relationship: updatedRelationship,
        });
      }
@@ -124,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
--- a/src/components/campaign/CampaignDocuments.tsx
+++ b/src/components/campaign/CampaignDocuments.tsx
@@ -0,0 +1,69 @@
+import {
+  type AnyDocument,
+  type CampaignId,
+  type DocumentId,
+  type DocumentType,
+} from "@/lib/types";
+import { useDocumentCache } from "@/context/document/hooks";
+import { DocumentList } from "../DocumentList";
+import { getAllDocumentsOfType } from "@/context/document/state";
+import { DocumentRow } from "../documents/DocumentRow";
+import { pb } from "@/lib/pocketbase";
+import { useEffect } from "react";
+import { NewCampaignDocumentForm } from "../documents/NewCampaignDocumentForm";
+
+export type Props = {
+  campaignId: CampaignId;
+  docType: DocumentType;
+};
+
+export const CampaignDocuments = ({ campaignId, docType }: Props) => {
+  const { cache, dispatch } = useDocumentCache();
+
+  const items = getAllDocumentsOfType(docType, cache);
+
+  useEffect(() => {
+    async function fetchDocuments() {
+      const documents: AnyDocument[] = await pb
+        .collection("documents")
+        .getFullList({
+          filter: `campaign = "${campaignId}" && type = "${docType}"`,
+          sort: "created",
+        });
+
+      for (const doc of documents) {
+        dispatch({
+          type: "setDocument",
+          doc,
+        });
+      }
+    }
+
+    fetchDocuments();
+  }, [campaignId, docType]);
+
+  const handleRemove = (id: DocumentId) => {
+    pb.collection("documents").delete(id);
+    dispatch({
+      type: "removeDocument",
+      docId: id,
+    });
+  };
+
+  return (
+    <DocumentList
+      items={items}
+      renderRow={(doc) => <DocumentRow document={doc} />}
+      newItemForm={(onSubmit) => (
+        <NewCampaignDocumentForm
+          campaignId={campaignId}
+          docType={docType}
+          onCreate={async () => {
+            onSubmit();
+          }}
+        />
+      )}
+      removeItem={handleRemove}
+    />
+  );
+};
--- a/src/components/documents/BasicPreview.tsx
+++ b/src/components/documents/BasicPreview.tsx
@@ -0,0 +1,27 @@
+import { Link } from "@tanstack/react-router";
+import { FormattedText } from "../FormattedText";
+import type { DocumentId } from "@/lib/types";
+
+export type Props = {
+  id: DocumentId;
+  title?: string;
+  description?: string;
+};
+
+export const BasicPreview = ({ id, title, description }: Props) => {
+  return (
+    <div>
+      <Link
+        to="/document/$documentId/$"
+        params={{
+          documentId: id,
+        }}
+        className="!no-underline text-violet-400 hover:underline hover:text-violet-500"
+      >
+        View
+      </Link>
+      {title && <h4 className="font-bold">{title}</h4>}
+      {description && <FormattedText>{description}</FormattedText>}
+    </div>
+  );
+};
--- a/src/components/documents/BasicRow.tsx
+++ b/src/components/documents/BasicRow.tsx
@@ -1,9 +1,10 @@
 import type { AnyDocument } from "@/lib/types";
-import { Link } from "@tanstack/react-router";
+import { FormattedText } from "../FormattedText";
+import { DocumentLink } from "./DocumentLink";

 export type Props = {
  doc: AnyDocument;
-  title: string;
+  title?: string;
  description?: string;
 };

@@ -13,14 +14,13 @@ export type Props = {
 export const BasicRow = ({ doc, title, description }: Props) => {
  return (
    <div>
-      <Link
-        to="/document/$documentId"
-        params={{ documentId: doc.id }}
-        className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400"
+      <DocumentLink
+        childDocId={doc.id}
+        className="!no-underline text-slate-100 hover:underline hover:text-violet-400"
      >
-        <h4>{title}</h4>
-      </Link>
-      {description && <p>{description}</p>}
+        {title && <h4 className="font-bold">{title}</h4>}
+        {description && <FormattedText>{description}</FormattedText>}
+      </DocumentLink>
    </div>
  );
 };
--- a/src/components/documents/DocumentEditForm.tsx
+++ b/src/components/documents/DocumentEditForm.tsx
@@ -1,30 +0,0 @@
-import { type AnyDocument } from "@/lib/types";
-import { LocationEditForm } from "./location/LocationEditForm";
-import { MonsterEditForm } from "./monsters/MonsterEditForm";
-import { NpcEditForm } from "./npc/NpcEditForm";
-import { SceneEditForm } from "./scene/SceneEditForm";
-import { SecretEditForm } from "./secret/SecretEditForm";
-import { SessionEditForm } from "./session/SessionEditForm";
-import { TreasureEditForm } from "./treasure/TreasureEditForm";
-
-/**
- * Renders a form for any document type depending on the relationship.
- */
-export const DocumentEditForm = ({ document }: { document: AnyDocument }) => {
-  switch (document.type) {
-    case "location":
-      return <LocationEditForm location={document} />;
-    case "monster":
-      return <MonsterEditForm monster={document} />;
-    case "npc":
-      return <NpcEditForm npc={document} />;
-    case "scene":
-      return <SceneEditForm scene={document} />;
-    case "secret":
-      return <SecretEditForm secret={document} />;
-    case "session":
-      return <SessionEditForm session={document} />;
-    case "treasure":
-      return <TreasureEditForm treasure={document} />;
-  }
-};
--- a/src/components/documents/DocumentLink.tsx
+++ b/src/components/documents/DocumentLink.tsx
@@ -0,0 +1,53 @@
+import { makeDocumentPath } from "@/lib/documentPath";
+import type { DocumentId } 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 docPath = useDocumentPath();
+  //
+  // const params = useParams({
+  //   strict: false,
+  // });
+  //
+  // const campaignSearch = useSearch({
+  //   from: "/_app/_authenticated/campaigns/$campaignId",
+  //   shouldThrow: false,
+  // });
+  //
+  // const to = params.campaignId
+  //   ? `/campaigns/${params.campaignId}`
+  //   : docPath
+  //     ? makeDocumentPath(
+  //         docPath.documentId,
+  //         docPath?.relationshipType,
+  //         childDocId,
+  //       )
+  //     : undefined;
+  //
+  // const search = campaignSearch
+  //   ? { tab: campaignSearch.tab, docId: childDocId }
+  //   : undefined;
+  //
+  // if (to === undefined) {
+  //   throw new Error("Not in a document or campaign context");
+  // }
+  //
+  // return (
+  //   <Link to={to} search={search} className={className}>
+  //     {children}
+  //   </Link>
+  // );
+
+  const to = makeDocumentPath(childDocId);
+
+  return (
+    <Link to={to} className={className}>
+      {children}
+    </Link>
+  );
+}
--- a/src/components/documents/DocumentPreview.tsx
+++ b/src/components/documents/DocumentPreview.tsx
@@ -0,0 +1,86 @@
+// Shows a preview of a document with it's relationships.
+import { makeDocumentPath } from "@/lib/documentPath";
+import { relationshipsForDocument } from "@/lib/relationships";
+import { type AnyDocument } from "@/lib/types";
+import { Link } from "@tanstack/react-router";
+import { Editing, EditToggle, NotEditing } from "../EditToggle";
+import { BasicPreview } from "./BasicPreview";
+import { GenericEditForm } from "./GenericEditForm";
+
+export const DocumentPreview = ({ doc }: { doc: AnyDocument }) => {
+  const relationships = relationshipsForDocument(doc);
+  return (
+    <div>
+      <EditToggle>
+        <Editing>
+          <GenericEditForm doc={doc} />
+        </Editing>
+        <NotEditing>
+          <ShowDocument doc={doc} />
+        </NotEditing>
+      </EditToggle>
+      <ul>
+        {relationships.map((relType) => (
+          <li>
+            <Link to={makeDocumentPath(doc.id, relType)}>{relType}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+const ShowDocument = ({ doc }: { doc: AnyDocument }) => {
+  switch (doc.type) {
+    case "front":
+      return (
+        <BasicPreview
+          id={doc.id}
+          title={doc.data.name}
+          description={doc.data.description}
+        />
+      );
+
+    case "location":
+      return (
+        <BasicPreview
+          id={doc.id}
+          title={doc.data.name}
+          description={doc.data.description}
+        />
+      );
+
+    case "monster":
+      return <BasicPreview id={doc.id} title={doc.data.name} />;
+
+    case "npc":
+      return (
+        <BasicPreview
+          id={doc.id}
+          title={doc.data.name}
+          description={doc.data.description}
+        />
+      );
+
+    case "session":
+      return (
+        <BasicPreview
+          id={doc.id}
+          title={doc.data.name ?? doc.created}
+          description={doc.data.strongStart}
+        />
+      );
+
+    case "secret":
+      return <BasicPreview id={doc.id} title={doc.data.text} />;
+
+    case "scene":
+      return <BasicPreview id={doc.id} description={doc.data.text} />;
+
+    case "thread":
+      return <BasicPreview id={doc.id} title={doc.data.text} />;
+
+    case "treasure":
+      return <BasicPreview id={doc.id} title={doc.data.text} />;
+  }
+};
--- a/src/components/documents/DocumentPrintRow.tsx
+++ b/src/components/documents/DocumentPrintRow.tsx
@@ -1,33 +0,0 @@
-// DocumentRow.tsx
-// Generic row component for displaying any document type.
-import { type AnyDocument } from "@/lib/types";
-import { LocationPrintRow } from "./location/LocationPrintRow";
-import { MonsterPrintRow } from "./monsters/MonsterPrintRow";
-import { NpcPrintRow } from "./npc/NpcPrintRow";
-import { ScenePrintRow } from "./scene/ScenePrintRow";
-import { SecretPrintRow } from "./secret/SecretPrintRow";
-import { SessionPrintRow } from "./session/SessionPrintRow";
-import { TreasurePrintRow } from "./treasure/TreasurePrintRow";
-
-/**
- * Renders a row for any document type. Prioritizes Session, then Secret, then falls back to ID and creation time.
- * If rendering a SecretRow, uses the provided session prop if available.
- */
-export const DocumentPrintRow = ({ document }: { document: AnyDocument }) => {
-  switch (document.type) {
-    case "location":
-      return <LocationPrintRow location={document} />;
-    case "monster":
-      return <MonsterPrintRow monster={document} />;
-    case "npc":
-      return <NpcPrintRow npc={document} />;
-    case "scene":
-      return <ScenePrintRow scene={document} />;
-    case "secret":
-      return <SecretPrintRow secret={document} />;
-    case "session":
-      return <SessionPrintRow session={document} />;
-    case "treasure":
-      return <TreasurePrintRow treasure={document} />;
-  }
-};
--- a/src/components/documents/DocumentRow.tsx
+++ b/src/components/documents/DocumentRow.tsx
@@ -1,7 +1,7 @@
 // DocumentRow.tsx
 // Generic row component for displaying any document type.
 import { SecretToggleRow } from "@/components/documents/secret/SecretToggleRow";
-import { type AnyDocument, type Session } from "@/lib/types";
+import { type AnyDocument } from "@/lib/types";
 import { BasicRow } from "./BasicRow";
 import { TreasureToggleRow } from "./treasure/TreasureToggleRow";

@@ -11,12 +11,21 @@ import { TreasureToggleRow } from "./treasure/TreasureToggleRow";
 */
 export const DocumentRow = ({
  document,
-  session,
+  root,
 }: {
  document: AnyDocument;
-  session?: Session;
+  root?: AnyDocument;
 }) => {
  switch (document.type) {
+    case "front":
+      return (
+        <BasicRow
+          doc={document}
+          title={document.data.name}
+          description={document.data.description}
+        />
+      );
+
    case "location":
      return (
        <BasicRow
@@ -42,18 +51,21 @@ export const DocumentRow = ({
      return (
        <BasicRow
          doc={document}
-          title={document.created}
+          title={document.data.name || document.created}
          description={document.data.strongStart}
        />
      );

    case "secret":
-      return <SecretToggleRow secret={document} session={session} />;
+      return <SecretToggleRow secret={document} root={root} />;

    case "scene":
-      return <BasicRow doc={document} title={document.data.text} />;
+      return <BasicRow doc={document} description={document.data.text} />;
+
+    case "thread":
+      return <BasicRow doc={document} description={document.data.text} />;

    case "treasure":
-      return <TreasureToggleRow treasure={document} session={session} />;
+      return <TreasureToggleRow treasure={document} root={root} />;
  }
 };
--- a/src/components/documents/DocumentTitle.tsx
+++ b/src/components/documents/DocumentTitle.tsx
@@ -0,0 +1,28 @@
+import { type AnyDocument } from "@/lib/types";
+import { FormattedDate } from "../FormattedDate";
+
+/**
+ * Renders the document title to go at the top a document page.
+ */
+export const DocumentTitle = ({ doc }: { doc: AnyDocument }) => {
+  return (
+    <h1 className="text-2xl font-bold">
+      <TitleText doc={doc} />
+    </h1>
+  );
+};
+
+const TitleText = ({ doc }: { doc: AnyDocument }) => {
+  switch (doc.type) {
+    case "session":
+      if (doc.data.name) {
+        return doc.data.name;
+      }
+
+      return <FormattedDate date={doc.created} />;
+
+    default:
+      // TODO: Put in proper names for other document types
+      return doc.type;
+  }
+};
--- a/src/components/documents/DocumentView.tsx
+++ b/src/components/documents/DocumentView.tsx
@@ -1,16 +1,106 @@
-import { RelationshipList } from "@/components/RelationshipList";
-import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
 import { useDocument } from "@/context/document/hooks";
 import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import { RelationshipType, type DocumentId } from "@/lib/types";
 import { Link } from "@tanstack/react-router";
+import _ from "lodash";
+import { Tab, TabbedLayout } from "../layout/TabbedLayout";
 import { Loader } from "../Loader";
-import type { DocumentId } from "@/lib/types";
+import { DocumentPreview } from "./DocumentPreview";
+import { DocumentTitle } from "./DocumentTitle";
+import { GenericEditForm } from "./GenericEditForm";
+import { RelatedDocumentList } from "./RelatedDocumentList";

-export function DocumentView({ documentId }: { documentId: DocumentId }) {
+export function DocumentView({
+  documentId,
+  relationshipType,
+  childDocId,
+}: {
+  documentId: DocumentId;
+  relationshipType: RelationshipType | null;
+  childDocId: DocumentId | null;
+}) {
  const { docResult } = useDocument(documentId);

-  console.info(`Rendering document: `, docResult);
+  if (docResult?.type !== "ready") {
+    return <Loader />;
+  }
+
+  const doc = docResult.value.doc;
+  const relationshipCounts = _.mapValues(docResult.value.relationships, (v) => {
+    if (v.type === "ready") {
+      return v.value.secondary.length.toString();
+    }
+    if (v.type === "empty") {
+      return "0";
+    }
+    return "...";
+  });
+
+  const relationshipList = relationshipsForDocument(doc);
+
+  return (
+    <TabbedLayout
+      navigation={
+        <>
+          <Link
+            to="/campaigns/$campaignId"
+            params={{ campaignId: doc.campaign }}
+            search={{ tab: "sessions" }}
+            className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
+          >
+            ← Back to campaign
+          </Link>
+          {/* Print link isn't currently working */}
+          {/* <Link */}
+          {/*   to="/document/$documentId/print" */}
+          {/*   params={{ documentId: doc.id }} */}
+          {/*   className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors" */}
+          {/* > */}
+          {/*   Print */}
+          {/* </Link> */}
+        </>
+      }
+      title={<DocumentTitle doc={doc} />}
+      tabs={[
+        <Tab
+          to="/document/$documentId"
+          key="attributes"
+          params={{
+            documentId,
+          }}
+          label="Attributes"
+          active={relationshipType === null}
+        />,
+        ...relationshipList.map((relationshipEntry) => (
+          <Tab
+            to="/document/$documentId/$relationshipType"
+            key={relationshipEntry}
+            params={{
+              documentId,
+              relationshipType: relationshipEntry,
+            }}
+            label={`${displayName(relationshipEntry)} (${relationshipCounts[relationshipEntry] ?? 0})`}
+            active={relationshipEntry === relationshipType}
+          />
+        )),
+      ]}
+      content={
+        relationshipType === null ? (
+          <GenericEditForm doc={doc} />
+        ) : (
+          <RelatedDocumentList
+            documentId={doc.id}
+            relationshipType={relationshipType}
+          />
+        )
+      }
+      flyout={childDocId && <Flyout key={childDocId} docId={childDocId} />}
+    />
+  );
+}
+
+function Flyout({ docId }: { docId: DocumentId }) {
+  const { docResult } = useDocument(docId);

  if (docResult?.type !== "ready") {
    return <Loader />;
@@ -18,50 +108,5 @@ export function DocumentView({ documentId }: { documentId: DocumentId }) {

  const doc = docResult.value.doc;

-  const relationshipList = relationshipsForDocument(doc);
-
-  return (
-    <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
-      <div>
-        <Link
-          to="/document/$documentId/print"
-          params={{ documentId: doc.id }}
-          className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
-        >
-          Back to campaign
-        </Link>
-        <Link
-          to="/document/$documentId/print"
-          params={{ documentId: doc.id }}
-          className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
-        >
-          Print
-        </Link>
-      </div>
-      <DocumentEditForm document={doc} />
-      <TabGroup>
-        <TabList className="flex flex-row flex-wrap gap-1 mt-2">
-          {relationshipList.map((relationshipType) => (
-            <Tab
-              key={relationshipType}
-              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 key={relationshipType}>
-              <RelationshipList
-                key={relationshipType}
-                root={doc}
-                relationshipType={relationshipType}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </TabGroup>
-    </div>
-  );
+  return <DocumentPreview doc={doc} />;
 }
--- a/src/components/documents/GenericEditForm.tsx
+++ b/src/components/documents/GenericEditForm.tsx
@@ -0,0 +1,82 @@
+import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
+import { pb } from "@/lib/pocketbase";
+import { getDocumentType, type AnyDocument } from "@/lib/types";
+import { useDocumentCache } from "@/context/document/hooks";
+import {
+  getFieldsForType,
+  type DocumentField,
+  type FieldType,
+} from "@/lib/fields";
+import { ToggleInput } from "../form/ToggleInput";
+
+export type GenericFieldType = "multiline" | "singleline" | "checkbox";
+
+export type Props<T extends AnyDocument> = {
+  doc: T;
+};
+
+export const GenericEditForm = <T extends AnyDocument>({ doc }: Props<T>) => {
+  const docType = getDocumentType(doc) as T["type"];
+  const fields = getFieldsForType(docType);
+
+  return (
+    <div className="">
+      {
+        // The type checker seems to lose the types when using Object.entries here.
+        fields.map((documentField) => (
+          <GenericEditFormField doc={doc} field={documentField} />
+        ))
+      }
+    </div>
+  );
+};
+
+const GenericEditFormField = <T extends AnyDocument>({
+  doc,
+  field,
+}: {
+  doc: T;
+  field: DocumentField<T["type"], FieldType>;
+}) => {
+  const { dispatch } = useDocumentCache();
+
+  // The type checker really doesn't like indexing into this type implicitly, so we'll store it in a temporary to give it the right hints.
+  const data = doc.data as T["data"];
+
+  async function saveField(value: string | boolean) {
+    const updated: T = await pb.collection("documents").update(doc.id, {
+      data: field.setter(value, doc.data),
+    });
+    dispatch({ type: "setDocument", doc: updated });
+  }
+
+  switch (field.fieldType) {
+    case "longText":
+      return (
+        <AutoSaveTextarea
+          multiline={true}
+          value={field.getter(data) as string}
+          onSave={saveField}
+          id={field.name}
+        />
+      );
+    case "shortText":
+      return (
+        <AutoSaveTextarea
+          multiline={false}
+          value={field.getter(data) as string}
+          onSave={saveField}
+          id={field.name}
+        />
+      );
+    case "toggle":
+      return (
+        <ToggleInput
+          label={field.name}
+          value={!!field.getter(data)}
+          onChange={saveField}
+          placeholder={field.name}
+        />
+      );
+  }
+};
--- a/src/components/documents/GenericNewDocumentForm.tsx
+++ b/src/components/documents/GenericNewDocumentForm.tsx
@@ -0,0 +1,142 @@
+import { useDocumentCache } from "@/context/document/hooks";
+import { DocumentTypeLabel } from "@/lib/documents";
+import {
+  getFieldsForType,
+  type DocumentField,
+  type FieldType,
+  type ValueForFieldType,
+} from "@/lib/fields";
+import { pb } from "@/lib/pocketbase";
+import {
+  type CampaignId,
+  type DocumentData,
+  type DocumentsByType,
+  type DocumentType,
+} from "@/lib/types";
+import { useCallback, useState } from "react";
+import { BaseForm } from "../form/BaseForm";
+import { MultiLineInput } from "../form/MultiLineInput";
+import { SingleLineInput } from "../form/SingleLineInput";
+import { ToggleInput } from "../form/ToggleInput";
+
+export type GenericFieldType = "multiline" | "singleline" | "checkbox";
+
+export type Props<T extends DocumentType> = {
+  docType: T;
+  campaignId: CampaignId;
+  onCreate: (doc: DocumentsByType[T]) => Promise<void>;
+};
+
+export const GenericNewDocumentForm = <T extends DocumentType>({
+  docType,
+  campaignId,
+  onCreate,
+}: Props<T>) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { dispatch } = useDocumentCache();
+
+  const fields = getFieldsForType(docType);
+
+  const [docData, setDocData] = useState<DocumentData<T>>(
+    fields.reduce((d, f) => f.setDefault(d), {} as DocumentData<T>),
+  );
+
+  const updateData =
+    <F extends FieldType>(field: DocumentField<T, F>) =>
+    (value: ValueForFieldType<F>) =>
+      setDocData(field.setter(value, docData));
+
+  const saveData = useCallback(async () => {
+    setIsLoading(true);
+    console.log(`Creating ${docType}: `, docData);
+    try {
+      const newDocument: DocumentsByType[T] = await pb
+        .collection("documents")
+        .create({
+          campaign: campaignId,
+          type: docType,
+          data: docData,
+        });
+      await onCreate(newDocument);
+      dispatch({
+        type: "setDocument",
+        doc: newDocument,
+      });
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        setError(e.message);
+      } else {
+        setError("An unknown error occurred while creating the session.");
+      }
+    }
+    setIsLoading(false);
+  }, [campaignId, setIsLoading, setError, docData]);
+
+  // TODO: display name for docType
+  return (
+    <BaseForm
+      title={`Create new ${DocumentTypeLabel[docType]}`}
+      onSubmit={saveData}
+      isLoading={isLoading}
+      error={error}
+      content={
+        // The type checker seems to lose the types when using Object.entries here.
+        fields.map((field) => (
+          <GenericNewFormField
+            key={field.name}
+            field={field}
+            value={field.getter(docData)}
+            isLoading={isLoading}
+            onUpdate={updateData(field)}
+          />
+        ))
+      }
+    />
+  );
+};
+
+const GenericNewFormField = <T extends DocumentType, F extends FieldType>({
+  field,
+  value,
+  isLoading,
+  onUpdate,
+}: {
+  field: DocumentField<T, F>;
+  value: ValueForFieldType<F>;
+  isLoading: boolean;
+  onUpdate: (value: ValueForFieldType<F>) => void;
+}) => {
+  switch (field.fieldType) {
+    case "longText":
+      return (
+        <MultiLineInput
+          label={field.name}
+          value={value as string}
+          onChange={onUpdate as (v: string) => void}
+          disabled={isLoading}
+          placeholder={field.name}
+        />
+      );
+    case "shortText":
+      return (
+        <SingleLineInput
+          label={field.name}
+          value={value as string}
+          onChange={onUpdate as (v: string) => void}
+          disabled={isLoading}
+          placeholder={field.name}
+        />
+      );
+    case "toggle":
+      return (
+        <ToggleInput
+          label={field.name}
+          value={value as boolean}
+          onChange={onUpdate as (v: boolean) => void}
+          disabled={isLoading}
+          placeholder={field.name}
+        />
+      );
+  }
+};
--- a/src/components/documents/NewCampaignDocumentForm.tsx
+++ b/src/components/documents/NewCampaignDocumentForm.tsx
@@ -0,0 +1,33 @@
+import {
+  type AnyDocument,
+  type CampaignId,
+  type DocumentType,
+} from "@/lib/types";
+import { NewSessionForm } from "./session/NewSessionForm";
+import { GenericNewDocumentForm } from "./GenericNewDocumentForm";
+
+/**
+ * Renders a form for any document type depending on the relationship.
+ */
+export const NewCampaignDocumentForm = ({
+  campaignId,
+  docType,
+  onCreate,
+}: {
+  campaignId: CampaignId;
+  docType: DocumentType;
+  onCreate: (doc: AnyDocument) => Promise<void>;
+}) => {
+  switch (docType) {
+    case "session":
+      return <NewSessionForm campaignId={campaignId} onCreate={onCreate} />;
+    default:
+      return (
+        <GenericNewDocumentForm
+          docType={docType}
+          campaignId={campaignId}
+          onCreate={onCreate}
+        />
+      );
+  }
+};
--- a/src/components/documents/NewRelatedDocumentForm.tsx
+++ b/src/components/documents/NewRelatedDocumentForm.tsx
@@ -3,12 +3,11 @@ import {
  type CampaignId,
  type AnyDocument,
 } from "@/lib/types";
-import { NewLocationForm } from "./location/NewLocationForm";
-import { NewMonsterForm } from "./monsters/NewMonsterForm";
-import { NewNpcForm } from "./npc/NewNpcForm";
-import { NewSceneForm } from "./scene/NewSceneForm";
-import { NewSecretForm } from "./secret/NewSecretForm";
-import { NewTreasureForm } from "./treasure/NewTreasureForm";
+import { GenericNewDocumentForm } from "./GenericNewDocumentForm";
+import { docTypeForRelationshipType } from "@/lib/relationships";
+import { useState } from "react";
+import { DocumentSearchForm } from "../form/DocumentSearchForm";
+import { identifierForDocType } from "@/lib/documents";

 /**
 * Renders a form for any document type depending on the relationship.
@@ -22,20 +21,42 @@ export const NewRelatedDocumentForm = ({
  relationshipType: RelationshipType;
  onCreate: (doc: AnyDocument) => Promise<void>;
 }) => {
-  switch (relationshipType) {
-    case RelationshipType.Locations:
-      return <NewLocationForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.Monsters:
-      return <NewMonsterForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.Npcs:
-      return <NewNpcForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.Secrets:
-      return <NewSecretForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.Treasures:
-      return <NewTreasureForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.Scenes:
-      return <NewSceneForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.DiscoveredIn:
-      return "Form not supported here";
-  }
+  const [newOrExisting, setNewOrExisting] = useState<"new" | "existing">("new");
+
+  const docType = docTypeForRelationshipType(relationshipType);
+
+  return (
+    <div>
+      <div className="flex row gap-4">
+        <button
+          className={`${newOrExisting === "new" ? "font-bold" : "text-gray-400"}`}
+          onClick={() => setNewOrExisting("new")}
+        >
+          New
+        </button>
+        <button
+          className={`${newOrExisting === "existing" ? "font-bold" : "text-gray-400"}`}
+          onClick={() => setNewOrExisting("existing")}
+        >
+          Existing
+        </button>
+      </div>
+      {newOrExisting === "new" && (
+        <GenericNewDocumentForm
+          docType={docType}
+          campaignId={campaignId}
+          onCreate={onCreate}
+        />
+      )}
+      {newOrExisting === "existing" && (
+        // TODO: Make this into a form with a "Add" button so it's not instant
+        <DocumentSearchForm
+          campaignId={campaignId}
+          onSubmit={onCreate}
+          docType={docType}
+          searchField={identifierForDocType(docType)}
+        />
+      )}
+    </div>
+  );
 };
--- a/src/components/documents/RelatedDocumentList.tsx
+++ b/src/components/documents/RelatedDocumentList.tsx
@@ -0,0 +1,27 @@
+import { useDocument } from "@/context/document/hooks";
+import type { DocumentId, RelationshipType } from "@/lib/types";
+import { Loader } from "../Loader";
+import { RelationshipList } from "../RelationshipList";
+
+export type Props = {
+  documentId: DocumentId;
+  relationshipType: RelationshipType;
+};
+
+export function RelatedDocumentList({ documentId, relationshipType }: Props) {
+  const { docResult } = useDocument(documentId);
+
+  if (docResult?.type !== "ready") {
+    return <Loader />;
+  }
+
+  const doc = docResult.value.doc;
+
+  return (
+    <RelationshipList
+      key={relationshipType}
+      root={doc}
+      relationshipType={relationshipType}
+    />
+  );
+}
--- a/src/components/documents/location/LocationEditForm.tsx
+++ b/src/components/documents/location/LocationEditForm.tsx
@@ -1,48 +0,0 @@
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { pb } from "@/lib/pocketbase";
-import type { Location } from "@/lib/types";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders an editable location form
- */
-export const LocationEditForm = ({ location }: { location: Location }) => {
-  const { dispatch } = useDocumentCache();
-  async function saveLocationName(name: string) {
-    const updated: Location = await pb
-      .collection("documents")
-      .update(location.id, {
-        data: {
-          ...location.data,
-          name,
-        },
-      });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  async function saveLocationDescription(description: string) {
-    const updated: Location = await pb
-      .collection("documents")
-      .update(location.id, {
-        data: {
-          ...location.data,
-          description,
-        },
-      });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  return (
-    <div className="">
-      <AutoSaveTextarea
-        multiline={false}
-        value={location.data.name}
-        onSave={saveLocationName}
-      />
-      <AutoSaveTextarea
-        value={location.data.description}
-        onSave={saveLocationDescription}
-      />
-    </div>
-  );
-};
--- a/src/components/documents/location/LocationPrintRow.tsx
+++ b/src/components/documents/location/LocationPrintRow.tsx
@@ -1,13 +0,0 @@
-import type { Location } from "@/lib/types";
-
-/**
- * Renders an print-friendly location row
- */
-export const LocationPrintRow = ({ location }: { location: Location }) => {
-  return (
-    <div>
-      <h4>{location.data.name}</h4>
-      <p>{location.data.description}</p>
-    </div>
-  );
-};
--- a/src/components/documents/location/NewLocationForm.tsx
+++ b/src/components/documents/location/NewLocationForm.tsx
@@ -1,76 +0,0 @@
-import { useState } from "react";
-import type { CampaignId, Location } from "@/lib/types";
-import { pb } from "@/lib/pocketbase";
-import { BaseForm } from "@/components/form/BaseForm";
-import { MultiLineInput } from "@/components/form/MultiLineInput";
-import { SingleLineInput } from "@/components/form/SingleLineInput";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders a form to add a new location. Calls onCreate with the new location document.
- */
-export const NewLocationForm = ({
-  campaign,
-  onCreate,
-}: {
-  campaign: CampaignId;
-  onCreate: (location: Location) => Promise<void>;
-}) => {
-  const { dispatch } = useDocumentCache();
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const locationDoc: Location = await pb.collection("documents").create({
-        campaign,
-        type: "location",
-        data: {
-          name,
-          description,
-        },
-      });
-      setName("");
-      setDescription("");
-      dispatch({ type: "setDocument", doc: locationDoc });
-      await onCreate(locationDoc);
-    } catch (e: any) {
-      setError(e?.message || "Failed to add location.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <BaseForm
-      title="Create new Location"
-      onSubmit={handleSubmit}
-      isLoading={adding || !name.trim()}
-      error={error}
-      content={
-        <>
-          <SingleLineInput
-            label="Name"
-            value={name}
-            onChange={setName}
-            disabled={adding}
-            placeholder="Enter location name"
-          />
-          <MultiLineInput
-            label="Description"
-            value={description}
-            placeholder="Enter location description"
-            onChange={setDescription}
-            disabled={adding}
-          />
-        </>
-      }
-    />
-  );
-};
--- a/src/components/documents/monsters/MonsterEditForm.tsx
+++ b/src/components/documents/monsters/MonsterEditForm.tsx
@@ -1,32 +0,0 @@
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { pb } from "@/lib/pocketbase";
-import type { Monster } from "@/lib/types";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders an editable monster row
- */
-export const MonsterEditForm = ({ monster }: { monster: Monster }) => {
-  const { dispatch } = useDocumentCache();
-  async function saveMonsterName(name: string) {
-    const updated: Monster = await pb
-      .collection("documents")
-      .update(monster.id, {
-        data: {
-          ...monster.data,
-          name,
-        },
-      });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  return (
-    <div className="">
-      <AutoSaveTextarea
-        multiline={false}
-        value={monster.data.name}
-        onSave={saveMonsterName}
-      />
-    </div>
-  );
-};
--- a/src/components/documents/monsters/MonsterPrintRow.tsx
+++ b/src/components/documents/monsters/MonsterPrintRow.tsx
@@ -1,8 +0,0 @@
-import type { Monster } from "@/lib/types";
-
-/**
- * Renders an editable monster row
- */
-export const MonsterPrintRow = ({ monster }: { monster: Monster }) => {
-  return <div>{monster.data.name}</div>;
-};
--- a/src/components/documents/monsters/NewMonsterForm.tsx
+++ b/src/components/documents/monsters/NewMonsterForm.tsx
@@ -1,61 +0,0 @@
-import { useState } from "react";
-import type { CampaignId, Monster } from "@/lib/types";
-import { pb } from "@/lib/pocketbase";
-import { BaseForm } from "@/components/form/BaseForm";
-import { SingleLineInput } from "@/components/form/SingleLineInput";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders a form to add a new monster. Calls onCreate with the new monster document.
- */
-export const NewMonsterForm = ({
-  campaign,
-  onCreate,
-}: {
-  campaign: CampaignId;
-  onCreate: (monster: Monster) => Promise<void>;
-}) => {
-  const { dispatch } = useDocumentCache();
-  const [name, setName] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const monsterDoc: Monster = await pb.collection("documents").create({
-        campaign,
-        type: "monster",
-        data: {
-          name,
-        },
-      });
-      setName("");
-      dispatch({ type: "setDocument", doc: monsterDoc });
-      await onCreate(monsterDoc);
-    } catch (e: any) {
-      setError(e?.message || "Failed to add monster.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <BaseForm
-      title="Create new monster"
-      isLoading={adding || !name.trim()}
-      onSubmit={handleSubmit}
-      error={error}
-      content={
-        <SingleLineInput
-          value={name}
-          onChange={setName}
-          placeholder="Monster description"
-        />
-      }
-    />
-  );
-};
--- a/src/components/documents/npc/NewNpcForm.tsx
+++ b/src/components/documents/npc/NewNpcForm.tsx
@@ -1,76 +0,0 @@
-import { useState } from "react";
-import type { CampaignId, Npc } from "@/lib/types";
-import { pb } from "@/lib/pocketbase";
-import { BaseForm } from "@/components/form/BaseForm";
-import { SingleLineInput } from "@/components/form/SingleLineInput";
-import { MultiLineInput } from "@/components/form/MultiLineInput";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders a form to add a new npc. Calls onCreate with the new npc document.
- */
-export const NewNpcForm = ({
-  campaign,
-  onCreate,
-}: {
-  campaign: CampaignId;
-  onCreate: (npc: Npc) => Promise<void>;
-}) => {
-  const { dispatch } = useDocumentCache();
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const npcDoc: Npc = await pb.collection("documents").create({
-        campaign,
-        type: "npc",
-        data: {
-          name,
-          description,
-        },
-      });
-      setName("");
-      setDescription("");
-      dispatch({ type: "setDocument", doc: npcDoc });
-      await onCreate(npcDoc);
-    } catch (e: any) {
-      setError(e?.message || "Failed to add npc.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <BaseForm
-      title="Create new NPC"
-      onSubmit={handleSubmit}
-      isLoading={adding}
-      error={error}
-      content={
-        <>
-          <SingleLineInput
-            label="Name"
-            value={name}
-            onChange={setName}
-            disabled={adding}
-            placeholder="Enter NPC name"
-          />
-          <MultiLineInput
-            label="Description"
-            value={description}
-            placeholder="Enter NPC description"
-            onChange={setDescription}
-            disabled={adding}
-          />
-        </>
-      }
-    />
-  );
-};
--- a/src/components/documents/npc/NpcEditForm.tsx
+++ b/src/components/documents/npc/NpcEditForm.tsx
@@ -1,44 +0,0 @@
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useDocumentCache } from "@/context/document/hooks";
-import { pb } from "@/lib/pocketbase";
-import type { Npc } from "@/lib/types";
-
-/**
- * Renders an editable npc form
- */
-export const NpcEditForm = ({ npc }: { npc: Npc }) => {
-  const { dispatch } = useDocumentCache();
-  async function saveNpcName(name: string) {
-    const updated: Npc = await pb.collection("documents").update(npc.id, {
-      data: {
-        ...npc.data,
-        name,
-      },
-    });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  async function saveNpcDescription(description: string) {
-    const updated: Npc = await pb.collection("documents").update(npc.id, {
-      data: {
-        ...npc.data,
-        description,
-      },
-    });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  return (
-    <div className="">
-      <AutoSaveTextarea
-        multiline={false}
-        value={npc.data.name}
-        onSave={saveNpcName}
-      />
-      <AutoSaveTextarea
-        value={npc.data.description}
-        onSave={saveNpcDescription}
-      />
-    </div>
-  );
-};
--- a/src/components/documents/npc/NpcPrintRow.tsx
+++ b/src/components/documents/npc/NpcPrintRow.tsx
@@ -1,13 +0,0 @@
-import type { Npc } from "@/lib/types";
-
-/**
- * Renders an editable npc row
- */
-export const NpcPrintRow = ({ npc }: { npc: Npc }) => {
-  return (
-    <div className="">
-      <h4>{npc.data.name}</h4>
-      <p>{npc.data.description}</p>
-    </div>
-  );
-};
--- a/src/components/documents/scene/NewSceneForm.tsx
+++ b/src/components/documents/scene/NewSceneForm.tsx
@@ -1,67 +0,0 @@
-// SceneForm.tsx
-// Form for adding a new scene to a session.
-import { useState } from "react";
-import type { CampaignId, Scene } from "@/lib/types";
-import { pb } from "@/lib/pocketbase";
-import { BaseForm } from "@/components/form/BaseForm";
-import { MultiLineInput } from "@/components/form/MultiLineInput";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders a form to add a new scene. Calls onCreate with the new scene document.
- */
-export const NewSceneForm = ({
-  campaign,
-  onCreate,
-}: {
-  campaign: CampaignId;
-  onCreate: (scene: Scene) => Promise<void>;
-}) => {
-  const { dispatch } = useDocumentCache();
-  const [text, setText] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!text.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const sceneDoc: Scene = await pb.collection("documents").create({
-        campaign,
-        type: "scene",
-        data: {
-          text,
-        },
-      });
-      setText("");
-      dispatch({ type: "setDocument", doc: sceneDoc });
-      await onCreate(sceneDoc);
-    } catch (e: any) {
-      setError(e?.message || "Failed to add scene.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <BaseForm
-      title="Create new scene"
-      onSubmit={handleSubmit}
-      error={error}
-      buttonText={adding ? "Adding..." : "Create"}
-      content={
-        <>
-          <MultiLineInput
-            value={text}
-            onChange={(v) => setText(v)}
-            disabled={adding}
-            placeholder="Scene description..."
-            aria-label="Add new scene"
-          />
-        </>
-      }
-    />
-  );
-};
--- a/src/components/documents/scene/SceneEditForm.tsx
+++ b/src/components/documents/scene/SceneEditForm.tsx
@@ -1,27 +0,0 @@
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { pb } from "@/lib/pocketbase";
-import type { Scene } from "@/lib/types";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders an editable scene form
- */
-export const SceneEditForm = ({ scene }: { scene: Scene }) => {
-  const { dispatch } = useDocumentCache();
-
-  async function saveScene(text: string) {
-    const updated: Scene = await pb.collection("documents").update(scene.id, {
-      data: {
-        ...scene.data,
-        text,
-      },
-    });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  return (
-    <div className="">
-      <AutoSaveTextarea value={scene.data.text} onSave={saveScene} />
-    </div>
-  );
-};
--- a/src/components/documents/scene/ScenePrintRow.tsx
+++ b/src/components/documents/scene/ScenePrintRow.tsx
@@ -1,8 +0,0 @@
-import type { Scene } from "@/lib/types";
-
-/**
- * Renders an editable scene row
- */
-export const ScenePrintRow = ({ scene }: { scene: Scene }) => {
-  return <div className="">{scene.data.text}</div>;
-};
--- a/src/components/documents/secret/NewSecretForm.tsx
+++ b/src/components/documents/secret/NewSecretForm.tsx
@@ -1,64 +0,0 @@
-// SecretForm.tsx
-// Form for adding a new secret to a session.
-import { useState } from "react";
-import type { CampaignId, Secret } from "@/lib/types";
-import { pb } from "@/lib/pocketbase";
-import { BaseForm } from "@/components/form/BaseForm";
-import { SingleLineInput } from "@/components/form/SingleLineInput";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders a form to add a new secret. Calls onCreate with the new secret document.
- */
-export const NewSecretForm = ({
-  campaign,
-  onCreate,
-}: {
-  campaign: CampaignId;
-  onCreate: (secret: Secret) => Promise<void>;
-}) => {
-  const { dispatch } = useDocumentCache();
-  const [newSecret, setNewSecret] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!newSecret.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const secretDoc: Secret = await pb.collection("documents").create({
-        campaign,
-        type: "secret",
-        data: {
-          text: newSecret,
-          discovered: false,
-        },
-      });
-      setNewSecret("");
-      dispatch({ type: "setDocument", doc: secretDoc as Secret });
-      await onCreate(secretDoc);
-    } catch (e: any) {
-      setError(e?.message || "Failed to add secret.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <BaseForm
-      title="Create new secret"
-      isLoading={adding || !newSecret.trim()}
-      onSubmit={handleSubmit}
-      error={error}
-      content={
-        <SingleLineInput
-          value={newSecret}
-          onChange={setNewSecret}
-          placeholder="Secret description"
-        />
-      }
-    />
-  );
-};
--- a/src/components/documents/secret/SecretEditForm.tsx
+++ b/src/components/documents/secret/SecretEditForm.tsx
@@ -1,65 +0,0 @@
-// Displays a single secret with discovered checkbox and text.
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useDocumentCache } from "@/context/document/hooks";
-import { pb } from "@/lib/pocketbase";
-import type { Secret } from "@/lib/types";
-import { useState } from "react";
-
-/**
- * Renders an editable secret form.
- * Handles updating the discovered state and discoveredIn relationship.
- */
-export const SecretEditForm = ({ secret }: { secret: Secret }) => {
-  const { dispatch } = useDocumentCache();
-  const [checked, setChecked] = useState(
-    !!(secret.data as any)?.secret?.discovered,
-  );
-  const [loading, setLoading] = useState(false);
-
-  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const newChecked = e.target.checked;
-    setLoading(true);
-    setChecked(newChecked);
-    try {
-      const updated: Secret = await pb
-        .collection("documents")
-        .update(secret.id, {
-          data: {
-            ...secret.data,
-            discovered: newChecked,
-          },
-        });
-      dispatch({ type: "setDocument", doc: updated });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function saveText(text: string) {
-    const updated: Secret = await pb.collection("documents").update(secret.id, {
-      data: {
-        ...secret.data,
-        text,
-      },
-    });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  return (
-    <div className="flex items-center gap-3">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={handleChange}
-        className="accent-emerald-500 w-5 h-5"
-        aria-label="Discovered"
-        disabled={loading}
-      />
-      <AutoSaveTextarea
-        multiline={false}
-        value={secret.data.text}
-        onSave={saveText}
-      />
-    </div>
-  );
-};
--- a/src/components/documents/secret/SecretPrintRow.tsx
+++ b/src/components/documents/secret/SecretPrintRow.tsx
@@ -1,24 +0,0 @@
-// SecretRow.tsx
-// Displays a single secret with discovered checkbox and text.
-import type { Secret } from "@/lib/types";
-
-/**
- * Renders a secret row with a discovered checkbox and secret text.
- * Handles updating the discovered state and discoveredIn relationship.
- */
-export const SecretPrintRow = ({ secret }: { secret: Secret }) => {
-  return (
-    <li className="flex items-center gap-3">
-      <input
-        type="checkbox"
-        className="flex-none accent-emerald-500 w-5 h-5"
-        aria-label="Discovered"
-      />
-      <span>
-        {(secret.data as any)?.secret?.text || (
-          <span className="italic text-slate-400">(No secret text)</span>
-        )}
-      </span>
-    </li>
-  );
-};
--- a/src/components/documents/secret/SecretToggleRow.tsx
+++ b/src/components/documents/secret/SecretToggleRow.tsx
@@ -1,8 +1,9 @@
 // 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";
+import { DocumentLink } from "../DocumentLink";

 /**
 * Renders a secret row with a discovered checkbox and secret text.
@@ -10,10 +11,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 +37,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 +47,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",
          });
        }
@@ -70,7 +71,12 @@ export const SecretToggleRow = ({
        aria-label="Discovered"
        disabled={loading}
      />
+      <DocumentLink
+        childDocId={secret.id}
+        className="!no-underline text-slate-100 hover:underline hover:text-violet-400"
+      >
        {secret.data.text}
+      </DocumentLink>
    </div>
  );
 };
--- a/src/components/documents/session/NewSessionForm.tsx
+++ b/src/components/documents/session/NewSessionForm.tsx
@@ -0,0 +1,57 @@
+import { useDocumentCache } from "@/context/document/hooks";
+import { pb } from "@/lib/pocketbase";
+import type {
+  AnyDocument,
+  CampaignId,
+  Relationship,
+  Session,
+} from "@/lib/types";
+import { useCallback } from "react";
+import { GenericNewDocumentForm } from "../GenericNewDocumentForm";
+
+export type Props = {
+  campaignId: CampaignId;
+  onCreate: (doc: AnyDocument) => Promise<void>;
+};
+
+export const NewSessionForm = ({ campaignId, onCreate }: Props) => {
+  const { dispatch } = useDocumentCache();
+
+  const createSessionRelations = useCallback(
+    async (newSession: Session) => {
+      // Check for a previous session
+      const prevSession = await pb
+        .collection("documents")
+        .getFirstListItem(`campaign = "${campaignId}" && type = 'session'`, {
+          sort: "-created",
+        });
+
+      // If any relations, then copy things over
+      if (prevSession) {
+        const prevRelations = await pb
+          .collection<Relationship>("relationships")
+          .getFullList({
+            filter: `primary = "${prevSession.id}"`,
+          });
+
+        for (const relation of prevRelations) {
+          await pb.collection("relationships").create({
+            primary: newSession.id,
+            type: relation.type,
+            secondary: relation.secondary,
+          });
+        }
+      }
+      await onCreate(newSession);
+    },
+    [campaignId, dispatch],
+  );
+
+  return (
+    <GenericNewDocumentForm
+      docType="session"
+      campaignId={campaignId}
+      onCreate={createSessionRelations}
+    />
+  );
+};
--- a/src/components/documents/session/SessionEditForm.tsx
+++ b/src/components/documents/session/SessionEditForm.tsx
@@ -1,33 +0,0 @@
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useDocumentCache } from "@/context/document/hooks";
-import { pb } from "@/lib/pocketbase";
-import type { Session } from "@/lib/types";
-
-export const SessionEditForm = ({ session }: { session: Session }) => {
-  const { dispatch } = useDocumentCache();
-
-  async function saveStrongStart(strongStart: string) {
-    const doc: Session = await pb.collection("documents").update(session.id, {
-      data: {
-        ...session.data,
-        strongStart,
-      },
-    });
-    dispatch({
-      type: "setDocument",
-      doc,
-    });
-  }
-
-  return (
-    <form>
-      <h3 className="text-lg font-bold mb-4 text-slate-100">Strong Start</h3>
-      <AutoSaveTextarea
-        value={session.data.strongStart}
-        onSave={saveStrongStart}
-        placeholder="Enter a strong start for this session..."
-        aria-label="Strong Start"
-      />
-    </form>
-  );
-};
--- a/src/components/documents/session/SessionPrintRow.tsx
+++ b/src/components/documents/session/SessionPrintRow.tsx
@@ -1,10 +0,0 @@
-import type { Session } from "@/lib/types";
-
-export const SessionPrintRow = ({ session }: { session: Session }) => {
-  return (
-    <div>
-      <h3 className="text-lg font-bold text-slate-600">StrongStart</h3>
-      <div className="">{session.data.strongStart}</div>
-    </div>
-  );
-};
--- a/src/components/documents/session/SessionRow.tsx
+++ b/src/components/documents/session/SessionRow.tsx
@@ -1,18 +0,0 @@
-import { FormattedDate } from "@/components/FormattedDate";
-import type { Session } from "@/lib/types";
-import { Link } from "@tanstack/react-router";
-
-export const SessionRow = ({ session }: { session: Session }) => {
-  return (
-    <div>
-      <Link
-        to="/document/$documentId"
-        params={{ documentId: session.id }}
-        className="block font-semibold text-lg text-slate-300"
-      >
-        <FormattedDate date={session.created} />
-      </Link>
-      <div className="">{session.data.strongStart}</div>
-    </div>
-  );
-};
--- a/src/components/documents/treasure/NewTreasureForm.tsx
+++ b/src/components/documents/treasure/NewTreasureForm.tsx
@@ -1,67 +0,0 @@
-// TreasureForm.tsx
-// Form for adding a new treasure to a session.
-import { useState } from "react";
-import type { CampaignId, Treasure } from "@/lib/types";
-import { pb } from "@/lib/pocketbase";
-import { BaseForm } from "@/components/form/BaseForm";
-import { SingleLineInput } from "@/components/form/SingleLineInput";
-import { useDocumentCache } from "@/context/document/hooks";
-
-/**
- * Renders a form to add a new treasure. Calls onCreate with the new treasure document.
- */
-export const NewTreasureForm = ({
-  campaign,
-  onCreate,
-}: {
-  campaign: CampaignId;
-  onCreate: (treasure: Treasure) => Promise<void>;
-}) => {
-  const { dispatch } = useDocumentCache();
-  const [newTreasure, setNewTreasure] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!newTreasure.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const treasureDoc: Treasure = await pb.collection("documents").create({
-        campaign,
-        type: "treasure",
-        data: {
-          text: newTreasure,
-          discovered: false,
-        },
-      });
-      setNewTreasure("");
-      dispatch({
-        type: "setDocument",
-        doc: treasureDoc,
-      });
-      await onCreate(treasureDoc);
-    } catch (e: any) {
-      setError(e?.message || "Failed to add treasure.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <BaseForm
-      title="Create new treasure"
-      isLoading={adding || !newTreasure.trim()}
-      onSubmit={handleSubmit}
-      error={error}
-      content={
-        <SingleLineInput
-          value={newTreasure}
-          onChange={setNewTreasure}
-          placeholder="Treasure description"
-        />
-      }
-    />
-  );
-};
--- a/src/components/documents/treasure/TreasureEditForm.tsx
+++ b/src/components/documents/treasure/TreasureEditForm.tsx
@@ -1,70 +0,0 @@
-// Displays a single treasure with discovered checkbox and text.
-import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useDocumentCache } from "@/context/document/hooks";
-import { pb } from "@/lib/pocketbase";
-import type { Treasure } from "@/lib/types";
-import { useState } from "react";
-
-/**
- * Renders an editable treasure form.
- * Handles updating the discovered state and discoveredIn relationship.
- */
-export const TreasureEditForm = ({ treasure }: { treasure: Treasure }) => {
-  const { dispatch } = useDocumentCache();
-  const [checked, setChecked] = useState(
-    !!(treasure.data as any)?.treasure?.discovered,
-  );
-  const [loading, setLoading] = useState(false);
-
-  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const newChecked = e.target.checked;
-    setLoading(true);
-    setChecked(newChecked);
-    try {
-      const updated: Treasure = await pb
-        .collection("documents")
-        .update(treasure.id, {
-          data: {
-            ...treasure.data,
-            treasure: {
-              ...(treasure.data as any).treasure,
-              discovered: newChecked,
-            },
-          },
-        });
-      dispatch({ type: "setDocument", doc: updated });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function saveText(text: string) {
-    const updated: Treasure = await pb
-      .collection("documents")
-      .update(treasure.id, {
-        data: {
-          ...treasure.data,
-          text,
-        },
-      });
-    dispatch({ type: "setDocument", doc: updated });
-  }
-
-  return (
-    <div className="flex items-center gap-3">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={handleChange}
-        className="accent-emerald-500 w-5 h-5"
-        aria-label="Discovered"
-        disabled={loading}
-      />
-      <AutoSaveTextarea
-        multiline={false}
-        value={treasure.data.text}
-        onSave={saveText}
-      />
-    </div>
-  );
-};
--- a/src/components/documents/treasure/TreasurePrintRow.tsx
+++ b/src/components/documents/treasure/TreasurePrintRow.tsx
@@ -1,24 +0,0 @@
-// TreasureRow.tsx
-// Displays a single treasure with discovered checkbox and text.
-import type { Treasure } from "@/lib/types";
-
-/**
- * Renders a treasure row with a discovered checkbox and treasure text.
- * Handles updating the discovered state and discoveredIn relationship.
- */
-export const TreasurePrintRow = ({ treasure }: { treasure: Treasure }) => {
-  return (
-    <div className="flex items-center gap-3">
-      <input
-        type="checkbox"
-        className="flex-none accent-emerald-500 w-5 h-5"
-        aria-label="Discovered"
-      />
-      <span>
-        {(treasure.data as any)?.treasure?.text || (
-          <span className="italic text-slate-400">(No treasure text)</span>
-        )}
-      </span>
-    </div>
-  );
-};
--- a/src/components/documents/treasure/TreasureToggleRow.tsx
+++ b/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",
          });
        }
@@ -70,7 +70,7 @@ export const TreasureToggleRow = ({
        disabled={loading}
      />
      <Link
-        to="/document/$documentId"
+        to="/document/$documentId/$"
        params={{ documentId: treasure.id }}
        className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400"
      >
--- a/src/components/form/BaseForm.tsx
+++ b/src/components/form/BaseForm.tsx
@@ -16,7 +16,13 @@ export const BaseForm = ({
  onSubmit,
 }: Props) => {
  return (
-    <form className="flex flex-col items-left gap-2" onSubmit={onSubmit}>
+    <form
+      className="flex flex-col items-left gap-2"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit(e);
+      }}
+    >
      <h3 className="text-lg font-semibold text-slate-100">{title}</h3>
      <div className="flex flex-col gap-2 w-full items-stretch">{content}</div>
      {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
--- a/src/components/form/DocumentSearchForm.tsx
+++ b/src/components/form/DocumentSearchForm.tsx
@@ -0,0 +1,105 @@
+import { DocumentTypeLoader } from "@/context/document/DocumentTypeLoader";
+import { useDocumentCache } from "@/context/document/hooks";
+import type { AnyDocument, CampaignId, DocumentType } from "@/lib/types";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/react";
+import { useEffect, useState } from "react";
+import { BaseForm } from "./BaseForm";
+import { DocumentTypeLabel } from "@/lib/documents";
+
+export type Props = {
+  campaignId: CampaignId;
+  docType: DocumentType;
+  searchField: string;
+  onSubmit: (doc: AnyDocument) => void;
+};
+
+export const DocumentSearchForm = (props: Props) => (
+  <DocumentTypeLoader
+    documentType={props.docType}
+    campaignId={props.campaignId}
+  >
+    <DocumentSearchInput {...props} />
+  </DocumentTypeLoader>
+);
+
+/** Utility to help with typing */
+function getField(doc: AnyDocument, field: string): string | undefined {
+  return (doc.data as Record<string, string>)[field];
+}
+
+export const DocumentSearchInput = ({
+  docType,
+  searchField,
+  onSubmit,
+}: Props) => {
+  const { cache } = useDocumentCache();
+  const [allOptions, setAllOptions] = useState<AnyDocument[]>([]);
+  useEffect(() => {
+    setAllOptions(
+      Object.values(cache.documents).flatMap((docResult) => {
+        if (docResult.type !== "ready") {
+          return [];
+        }
+        if (docResult.value.doc.type !== docType) {
+          return [];
+        }
+        return [docResult.value.doc];
+      }),
+    );
+  }, [cache, setAllOptions]);
+
+  const [queryValue, setQueryValue] = useState("");
+  const [selectedDoc, setSelectedDoc] = useState<AnyDocument | null>(null);
+
+  const options = allOptions.filter((doc) =>
+    getField(doc, searchField)
+      ?.toLowerCase()
+      ?.includes(queryValue.toLowerCase()),
+  );
+
+  return (
+    <BaseForm
+      title={`Find ${DocumentTypeLabel[docType]}`}
+      buttonText="Add"
+      error={null}
+      onSubmit={() => selectedDoc && onSubmit(selectedDoc)}
+      content={
+        <Combobox<AnyDocument | null>
+          name={searchField}
+          value={selectedDoc}
+          onChange={(doc) => {
+            console.log("Selected", doc);
+            setSelectedDoc(doc);
+          }}
+        >
+          <ComboboxInput
+            displayValue={(doc: AnyDocument) =>
+              (doc && getField(doc, searchField)) ?? "(no value)"
+            }
+            onChange={(event) => setQueryValue(event.target.value)}
+            className={`w-full 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`}
+          />
+          <ComboboxOptions
+            anchor="bottom start"
+            className="border empty:invisible z-50 px-4 bg-black"
+          >
+            {options.map((doc) => (
+              <ComboboxOption
+                key={doc.id}
+                value={doc}
+                className="data-selected:font-bold data-focus:font-bold"
+              >
+                {getField(doc, searchField)}
+              </ComboboxOption>
+            ))}
+          </ComboboxOptions>
+        </Combobox>
+      }
+    />
+  );
+};
--- a/src/components/form/ToggleInput.tsx
+++ b/src/components/form/ToggleInput.tsx
@@ -0,0 +1,29 @@
+export type Props = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  className?: string;
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "className"
+>;
+
+export const ToggleInput = ({
+  value,
+  onChange,
+  className = "",
+  label,
+  ...props
+}: Props) => (
+  <div className="flex flex-row gap-4 p-2">
+    <input
+      type="checkbox"
+      checked={value}
+      onChange={(e) => onChange(e.target.checked)}
+      className={`rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${className}`}
+      aria-label={label}
+      {...props}
+    />
+    {label && <label>{label}</label>}
+  </div>
+);
--- a/src/components/layout/TabbedLayout.tsx
+++ b/src/components/layout/TabbedLayout.tsx
@@ -0,0 +1,64 @@
+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,
+  flyout,
+}: Props) {
+  return (
+    <div className="grow p-2 flex flex-col gap-2">
+      <div className="flex flex-row gap-2">{navigation}</div>
+      <div>{title}</div>
+      <div className="flex flex-col md:flex-row justify-start grow">
+        <div className="shrink-0 grow-0 md:w-40 p-0 flex flex-row flex-wrap md:flex-col md:flex-nowrap">
+          {tabs}
+        </div>
+        <div
+          className={`grow md:w-md p-2 bg-slate-800 border-t border-b border-r border-slate-700 ${flyout && "hidden"} md:block`}
+        >
+          {content}
+        </div>
+        {flyout && (
+          <div className="grow md:w-md p-2 bg-slate-800 border border-slate-700">
+            {flyout}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export type TabProps = {
+  label: string;
+  to: string;
+  params?: Record<string, any>;
+  search?: 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, search }: TabProps) {
+  return (
+    <Link
+      key={label}
+      to={to}
+      params={params}
+      search={search}
+      className={`block p-2 border-slate-700 whitespace-nowrap ${active ? activeTabClass : inactiveTabClass}`}
+    >
+      {label}
+    </Link>
+  );
+}
--- a/src/context/auth/AuthContext.tsx
+++ b/src/context/auth/AuthContext.tsx
@@ -1,5 +1,4 @@
-import { createContext, useContext, useCallback } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { createContext, useContext, useCallback, useState } from "react";
 import type { ReactNode } from "react";
 import { pb } from "@/lib/pocketbase";
 import type { AuthRecord } from "pocketbase";
@@ -26,91 +25,49 @@ export interface AuthContextValue {
 const AuthContext = createContext<AuthContextValue | undefined>(undefined);

 /**
- * Fetches the currently authenticated user from PocketBase.
- */
-async function fetchUser(): Promise<AuthRecord | null> {
-  if (pb.authStore.isValid) {
-    return pb.authStore.record;
-  }
-  return null;
-}
-
-/**
- * Provider for authentication context, using TanStack Query for state management.
+ * Provider for authentication context.
 */
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const queryClient = useQueryClient();
-  const { data: user, isLoading } = useQuery({
-    queryKey: ["auth", "user"],
-    queryFn: fetchUser,
-  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [user, setUser] = useState<AuthRecord | null>(
+    pb.authStore.isValid ? pb.authStore.record : null,
+  );
+
  const navigate = useNavigate();

-  const loginMutation = useMutation({
-    mutationFn: async ({
-      email,
-      password,
-    }: {
-      email: string;
-      password: string;
-    }) => {
+  function updateUser() {
+    if (pb.authStore.isValid) {
+      setUser(pb.authStore.record);
+    }
+    setIsLoading(false);
+  }
+
+  const login = useCallback(async (email: string, password: string) => {
+    console.log("login");
+    setIsLoading(true);
    await pb.collection("users").authWithPassword(email, password);
-      return fetchUser();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["auth", "user"] });
-    },
-  });
-
-  const signupMutation = useMutation({
-    mutationFn: async ({
-      email,
-      password,
-      passwordConfirm,
-    }: {
-      email: string;
-      password: string;
-      passwordConfirm: string;
-    }) => {
-      await pb.collection("users").create({ email, password, passwordConfirm });
-      await pb.collection("users").authWithPassword(email, password);
-      return fetchUser();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["auth", "user"] });
-    },
-  });
-
-  const logoutMutation = useMutation({
-    mutationFn: async () => {
-      pb.authStore.clear();
-      return null;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["auth", "user"] });
-    },
-  });
-
-  const login = useCallback(
-    async (email: string, password: string) => {
-      await loginMutation.mutateAsync({ email, password });
+    updateUser();
    navigate({ to: "/campaigns" });
-    },
-    [loginMutation],
-  );
+  }, []);

  const signup = useCallback(
    async (email: string, password: string, passwordConfirm: string) => {
-      await signupMutation.mutateAsync({ email, password, passwordConfirm });
+      console.log("signup");
+      setIsLoading(true);
+      await pb.collection("users").create({ email, password, passwordConfirm });
+      await pb.collection("users").authWithPassword(email, password);
+      updateUser();
      navigate({ to: "/campaigns" });
    },
-    [signupMutation],
+    [],
  );

  const logout = useCallback(async () => {
-    await logoutMutation.mutateAsync();
+    console.log("logout");
+    pb.authStore.clear();
+    setUser(null);
    navigate({ to: "/" });
-  }, [logoutMutation]);
+  }, []);

  return (
    <AuthContext.Provider
--- a/src/context/document/DocumentLoader.tsx
+++ b/src/context/document/DocumentLoader.tsx
@@ -36,8 +36,11 @@ export function DocumentLoader({
        relationships: doc.expand?.relationships_via_primary || [],
        relatedDocuments:
          doc.expand?.relationships_via_primary?.flatMap(
-            (r: RecordModel) => r.expand?.secondary,
-          ) || [],
+            (r: RecordModel): AnyDocument[] =>
+              // Note: If there are no entries in the expanded secondaries there
+              // just won't be an entry instead of an empty list.
+              r.expand?.secondary ?? [],
+          ) ?? [],
      });
    }

--- a/src/context/document/DocumentTypeLoader.tsx
+++ b/src/context/document/DocumentTypeLoader.tsx
@@ -0,0 +1,41 @@
+import { pb } from "@/lib/pocketbase";
+import {
+  type AnyDocument,
+  type CampaignId,
+  type DocumentType,
+} from "@/lib/types";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { useDocumentCache } from "./hooks";
+
+/**
+ * Provider for the record cache context. Provides a singleton RecordCache instance to children.
+ */
+export function DocumentTypeLoader({
+  campaignId,
+  documentType,
+  children,
+}: {
+  campaignId: CampaignId;
+  documentType: DocumentType;
+  children: ReactNode;
+}) {
+  const { dispatch } = useDocumentCache();
+
+  useEffect(() => {
+    async function fetchDocuments() {
+      const docs: AnyDocument[] = await pb.collection("documents").getFullList({
+        filter: `campaign = "${campaignId}" && type = "${documentType}"`,
+      });
+
+      dispatch({
+        type: "setDocuments",
+        docs: docs,
+      });
+    }
+
+    fetchDocuments();
+  }, [campaignId, documentType]);
+
+  return children;
+}
--- a/src/context/document/actions.ts
+++ b/src/context/document/actions.ts
@@ -9,6 +9,10 @@ export type DocumentAction =
      type: "setDocument";
      doc: AnyDocument;
    }
+  | {
+      type: "setDocuments";
+      docs: AnyDocument[];
+    }
  | {
      type: "setRelationship";
      docId: DocumentId;
@@ -19,4 +23,8 @@ export type DocumentAction =
      doc: AnyDocument;
      relationships: Relationship[];
      relatedDocuments: AnyDocument[];
+    }
+  | {
+      type: "removeDocument";
+      docId: DocumentId;
    };
--- a/src/context/document/reducer.ts
+++ b/src/context/document/reducer.ts
@@ -1,7 +1,15 @@
-import type { AnyDocument, DocumentId, Relationship } from "@/lib/types";
-import type { DocumentAction } from "./actions";
-import { ready, loading, unloaded, type DocumentState } from "./state";
 import { relationshipsForDocument } from "@/lib/relationships";
+import type { AnyDocument, DocumentId, Relationship } from "@/lib/types";
+import _ from "lodash";
+import type { DocumentAction } from "./actions";
+import {
+  empty,
+  loading,
+  mapResult,
+  ready,
+  unloaded,
+  type DocumentState,
+} from "./state";

 function setLoadingDocument(
  docId: DocumentId,
@@ -40,6 +48,36 @@ function setDocument(state: DocumentState, doc: AnyDocument): DocumentState {
  };
 }

+function setAllRelationshipsEmpty(
+  docId: DocumentId,
+  state: DocumentState,
+): DocumentState {
+  const prevDocResult = state.documents[docId];
+  if (prevDocResult?.type !== "ready") {
+    return state;
+  }
+
+  const prevDoc = prevDocResult.value.doc;
+  const relationships = prevDocResult.value.relationships;
+
+  return {
+    ...state,
+    documents: {
+      ...state.documents,
+      [docId]: ready({
+        ...prevDocResult.value,
+        relationships: Object.fromEntries(
+          relationshipsForDocument(prevDoc).map((relType) =>
+            relationships[relType]?.type === "ready"
+              ? [relType, relationships[relType]]
+              : [relType, empty()],
+          ),
+        ),
+      }),
+    },
+  };
+}
+
 function setRelationship(
  docId: DocumentId,
  state: DocumentState,
@@ -65,24 +103,71 @@ function setRelationship(
  };
 }

-export function reducer(
+function removeDocument(
+  docId: DocumentId,
  state: DocumentState,
+): DocumentState {
+  const remainingDocs: DocumentState["documents"] = _.omit(state.documents, [
+    docId,
+  ]);
+  return {
+    ...state,
+    documents: _.mapValues(remainingDocs, (result) => {
+      if (result.type !== "ready") {
+        return result;
+      }
+      return ready({
+        doc: result.value.doc,
+        relationships: _.mapValues(
+          result.value.relationships,
+          (relationshipResult) =>
+            mapResult(relationshipResult, (relationship) => ({
+              ...relationship,
+              secondary: relationship.secondary.filter(
+                (relatedId) => relatedId !== docId,
+              ),
+            })),
+        ),
+      });
+    }),
+  };
+}
+
+export function reducer(
+  initialState: DocumentState,
  action: DocumentAction,
 ): DocumentState {
+  console.debug("Processing action", action);
  switch (action.type) {
    case "loadingDocument":
-      return setLoadingDocument(action.docId, state);
+      return setLoadingDocument(action.docId, initialState);
    case "setDocument":
-      return setDocument(state, action.doc);
+      return setDocument(initialState, action.doc);
+    case "setDocuments":
+      return action.docs.reduce(setDocument, initialState);
    case "setRelationship":
-      return setRelationship(action.docId, state, action.relationship);
+      return setRelationship(action.docId, initialState, action.relationship);
    case "setDocumentTree":
+      const updatedDocumentState = setAllRelationshipsEmpty(
+        action.doc.id,
+        setDocument(initialState, action.doc),
+      );
+
+      const updatedRelationshipsState = action.relationships.reduce(
+        setRelationship.bind(null, action.doc.id),
+        updatedDocumentState,
+      );
+
+      const emptyRemainingRelationships = setAllRelationshipsEmpty(
+        action.doc.id,
+        updatedRelationshipsState,
+      );
+
      return action.relatedDocuments.reduce(
        setDocument,
-        action.relationships.reduce(
-          setRelationship.bind(null, action.doc.id),
-          setDocument(state, action.doc),
-        ),
+        emptyRemainingRelationships,
      );
+    case "removeDocument":
+      return removeDocument(action.docId, initialState);
  }
 }
--- a/src/context/document/state.ts
+++ b/src/context/document/state.ts
@@ -1,6 +1,7 @@
 import type {
  AnyDocument,
  DocumentId,
+  DocumentType,
  Relationship,
  RelationshipType,
 } from "@/lib/types";
@@ -9,13 +10,25 @@ export type Result<V> =
  | { type: "unloaded" }
  | { type: "error"; err: unknown }
  | { type: "loading" }
+  | { type: "empty" }
  | { type: "ready"; value: V };

 export const unloaded = (): Result<any> => ({ type: "unloaded" });
 export const error = (err: unknown): Result<any> => ({ type: "error", err });
 export const loading = (): Result<any> => ({ type: "loading" });
+export const empty = (): Result<any> => ({ type: "empty" });
 export const ready = <V>(value: V): Result<V> => ({ type: "ready", value });

+export const mapResult = <A, B>(
+  result: Result<A>,
+  f: (a: A) => B,
+): Result<B> => {
+  if (result.type === "ready") {
+    return ready(f(result.value));
+  }
+  return result;
+};
+
 export type DocumentState = {
  documents: Record<
    DocumentId,
@@ -30,3 +43,13 @@ export const initialState = (): DocumentState =>
  ({
    documents: {},
  }) as DocumentState;
+
+export const getAllDocumentsOfType = <T extends DocumentType>(
+  docType: T,
+  state: DocumentState,
+): (AnyDocument & { type: T })[] =>
+  Object.values(state.documents).flatMap((docRecord) =>
+    docRecord.type === "ready" && docRecord.value.doc.type === docType
+      ? [docRecord.value.doc as AnyDocument & { type: T }]
+      : [],
+  );
--- a/src/lib/documentPath.ts
+++ b/src/lib/documentPath.ts
@@ -0,0 +1,62 @@
+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;
+    }
+  | undefined {
+  const params = useParams({
+    from: "/_app/_authenticated/document/$documentId/$",
+    shouldThrow: false,
+  });
+
+  if (params) {
+    const { relationshipType, childDocId } = documentParams.parse(
+      params._splat,
+    );
+    return {
+      documentId: params.documentId as DocumentId,
+      relationshipType,
+      childDocId,
+    };
+  }
+
+  return undefined;
+}
+
+export function makeDocumentPath(
+  documentId: DocumentId,
+  relationshipType?: RelationshipType | null,
+  childDocId?: DocumentId | null,
+) {
+  return (
+    "/document/" +
+    [documentId, relationshipType, childDocId].filter((x) => x).join("/")
+  );
+}
--- a/src/lib/documents.ts
+++ b/src/lib/documents.ts
@@ -0,0 +1,37 @@
+import type { DocumentType } from "./types";
+
+export const DocumentTypeLabel: Record<DocumentType, string> = {
+  session: "Session",
+  secret: "Secret",
+  npc: "NPC",
+  location: "Location",
+  thread: "Thread",
+  front: "Front",
+  monster: "Monster",
+  scene: "Scene",
+  treasure: "Treasure",
+};
+
+export const DocumentTypeLabePlural: Record<DocumentType, string> = {
+  session: "Sessions",
+  secret: "Secrets",
+  npc: "NPCs",
+  location: "Locations",
+  thread: "Threads",
+  front: "Fronts",
+  monster: "Monsters",
+  scene: "Scenes",
+  treasure: "Treasures",
+};
+
+export function identifierForDocType(docType: DocumentType): string {
+  switch (docType) {
+    case "scene":
+    case "secret":
+    case "thread":
+    case "treasure":
+      return "text";
+    default:
+      return "name";
+  }
+}
--- a/src/lib/fields.ts
+++ b/src/lib/fields.ts
@@ -0,0 +1,106 @@
+import { type DocumentData, type DocumentType } from "./types";
+
+export type FieldType = "identifier" | "shortText" | "longText" | "toggle";
+
+export type ValueForFieldType<F extends FieldType> = {
+  identifier: string;
+  shortText: string;
+  longText: string;
+  toggle: boolean;
+}[F];
+
+function defaultValue<F extends FieldType>(fieldType: F): ValueForFieldType<F> {
+  switch (fieldType) {
+    case "identifier":
+    case "shortText":
+    case "longText":
+      return "" as ValueForFieldType<F>;
+    case "toggle":
+      return false as ValueForFieldType<F>;
+  }
+}
+
+export type DocumentField<D extends DocumentType, F extends FieldType> = {
+  name: string;
+  fieldType: F;
+  getter: (doc: DocumentData<D>) => ValueForFieldType<F>;
+  setter: (
+    value: ValueForFieldType<F>,
+    doc: DocumentData<D>,
+  ) => DocumentData<D>;
+  setDefault: (doc: DocumentData<D>) => DocumentData<D>;
+};
+
+const simpleField = <D extends DocumentType, F extends FieldType>(
+  name: string,
+  key: keyof DocumentData<D>,
+  fieldType: F,
+): DocumentField<D, F> => ({
+  name,
+  fieldType,
+  getter: (doc) => doc[key] as unknown as ValueForFieldType<F>,
+  setter: (value, doc) => ({ ...doc, [key]: value }),
+  setDefault: (doc) => ({ ...doc, [key]: defaultValue(fieldType) }),
+});
+
+const simpleFields = <D extends DocumentType>(
+  fields: Record<string, [keyof DocumentData<D>, FieldType]>,
+): DocumentField<D, FieldType>[] =>
+  Object.entries(fields).map(([name, [key, fieldType]]) =>
+    simpleField(name, key, fieldType),
+  );
+
+export function getFieldsForType<D extends DocumentType>(
+  docType: D,
+): DocumentField<D, FieldType>[] {
+  // Explicit casts are required because the getter function puts the type D in the parameters position and thus the specialized getter is not valid in the case of the more general document type.
+  // While the switch correctly sees that D is now "front", the _type_ could be a union and thus the getter needs to be able to accept any of them.
+  // I know this will only ever be called in the context of one value, but this is clearly abusing the type system.
+  // TODO: Fix the types
+  switch (docType) {
+    case "front":
+      return simpleFields<"front">({
+        Name: ["name", "shortText"],
+        Description: ["description", "longText"],
+        Resolved: ["resolved", "toggle"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "location":
+      return simpleFields<"location">({
+        Name: ["name", "shortText"],
+        Description: ["description", "longText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "monster":
+      return simpleFields<"monster">({
+        Name: ["name", "shortText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "npc":
+      return simpleFields<"npc">({
+        Name: ["name", "shortText"],
+        Description: ["description", "longText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "scene":
+      return simpleFields<"scene">({
+        Text: ["text", "longText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "secret":
+      return simpleFields<"secret">({
+        Discovered: ["discovered", "toggle"],
+        Text: ["text", "shortText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "session":
+      return simpleFields<"session">({
+        Name: ["name", "shortText"],
+        "Strong Start": ["strongStart", "longText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "thread":
+      return simpleFields<"thread">({
+        Resolved: ["resolved", "toggle"],
+        Text: ["text", "shortText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+    case "treasure":
+      return simpleFields<"treasure">({
+        Discovered: ["discovered", "toggle"],
+        Text: ["text", "shortText"],
+      }) as unknown as DocumentField<D, FieldType>[];
+  }
+}
--- a/src/lib/relationships.ts
+++ b/src/lib/relationships.ts
@@ -1,4 +1,9 @@
-import { getDocumentType, RelationshipType, type AnyDocument } from "./types";
+import {
+  getDocumentType,
+  RelationshipType,
+  type AnyDocument,
+  type DocumentType,
+} from "./types";

 export function displayName(relationshipType: RelationshipType) {
  return relationshipType.charAt(0).toUpperCase() + relationshipType.slice(1);
@@ -19,3 +24,17 @@ export function relationshipsForDocument(doc: AnyDocument): RelationshipType[] {
      return [];
  }
 }
+
+const DocTypeForRelationshipType: { [k in RelationshipType]: DocumentType } = {
+  [RelationshipType.DiscoveredIn]: "session",
+  [RelationshipType.Locations]: "location",
+  [RelationshipType.Monsters]: "monster",
+  [RelationshipType.Npcs]: "npc",
+  [RelationshipType.Scenes]: "scene",
+  [RelationshipType.Secrets]: "secret",
+  [RelationshipType.Treasures]: "treasure",
+} as const;
+
+export function docTypeForRelationshipType(rt: RelationshipType): DocumentType {
+  return DocTypeForRelationshipType[rt];
+}
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -65,19 +65,16 @@ export type Relationship = RecordModel & {
 ******************************************/

 export type DocumentType =
+  | "front"
  | "location"
  | "monster"
  | "npc"
  | "scene"
  | "secret"
  | "session"
+  | "thread"
  | "treasure";

-export type DocumentData<Type extends DocumentType, Data> = {
-  type: Type;
-  data: Data;
-};
-
 export type Document<Type extends DocumentType, Data> = RecordModel & {
  id: DocumentId;
  collectionName: typeof CollectionIds.Documents;
@@ -90,14 +87,33 @@ export type Document<Type extends DocumentType, Data> = RecordModel & {
 };

 export type AnyDocument =
+  | Front
  | Location
  | Monster
  | Npc
  | Scene
  | Secret
  | Session
+  | Thread
  | Treasure;

+export type DocumentsByType = {
+  front: Front;
+  location: Location;
+  monster: Monster;
+  npc: Npc;
+  scene: Scene;
+  secret: Secret;
+  session: Session;
+  thread: Thread;
+  treasure: Treasure;
+};
+
+export type DocumentData<Type extends DocumentType> =
+  DocumentsByType[Type]["data"];
+
+export type GetDocumentType<D extends AnyDocument> = D["type"];
+
 export function getDocumentType(doc: AnyDocument): DocumentType {
  return doc.type;
 }
@@ -135,6 +151,7 @@ export type Npc = Document<
 export type Session = Document<
  "session",
  {
+    name?: string;
    strongStart: string;
  }
 >;
@@ -167,3 +184,24 @@ export type Treasure = Document<
    discovered: boolean;
  }
 >;
+
+/** Thread **/
+
+export type Thread = Document<
+  "thread",
+  {
+    text: string;
+    resolved: boolean;
+  }
+>;
+
+/** Front **/
+
+export type Front = Document<
+  "front",
+  {
+    name: string;
+    description: string;
+    resolved: boolean;
+  }
+>;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,6 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
@@ -9,16 +8,13 @@ import { routeTree } from "./routeTree.gen";
 import "./styles.css";
 import reportWebVitals from "./reportWebVitals.ts";

-const queryClient = new QueryClient();
-
 // Create a new router instance
 const router = createRouter({
  routeTree,
-  context: { queryClient },
  defaultPreload: "intent",
  scrollRestoration: true,
  defaultStructuralSharing: true,
-  defaultPreloadStaleTime: 0,
+  defaultPendingMinMs: 0,
 });

 // Register the router instance for type safety
@@ -34,9 +30,7 @@ if (rootElement && !rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
-      <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
-      </QueryClientProvider>
    </StrictMode>,
  );
 }
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -17,9 +17,8 @@ import { Route as AppLoginImport } from './routes/_app/login'
 import { Route as AppAboutImport } from './routes/_app/about'
 import { Route as AppAuthenticatedImport } from './routes/_app/_authenticated'
 import { Route as AppAuthenticatedCampaignsIndexImport } from './routes/_app/_authenticated/campaigns.index'
-import { Route as AppAuthenticatedDocumentDocumentIdImport } from './routes/_app/_authenticated/document.$documentId'
 import { Route as AppAuthenticatedCampaignsCampaignIdImport } from './routes/_app/_authenticated/campaigns.$campaignId'
-import { Route as AppauthenticatedDocumentDocumentIdPrintImport } from './routes/_app_._authenticated.document_.$documentId.print'
+import { Route as AppAuthenticatedDocumentDocumentIdSplatImport } from './routes/_app/_authenticated/document.$documentId.$'

 // Create/Update Routes

@@ -58,13 +57,6 @@ const AppAuthenticatedCampaignsIndexRoute =
    getParentRoute: () => AppAuthenticatedRoute,
  } as any)

-const AppAuthenticatedDocumentDocumentIdRoute =
-  AppAuthenticatedDocumentDocumentIdImport.update({
-    id: '/document/$documentId',
-    path: '/document/$documentId',
-    getParentRoute: () => AppAuthenticatedRoute,
-  } as any)
-
 const AppAuthenticatedCampaignsCampaignIdRoute =
  AppAuthenticatedCampaignsCampaignIdImport.update({
    id: '/campaigns/$campaignId',
@@ -72,11 +64,11 @@ const AppAuthenticatedCampaignsCampaignIdRoute =
    getParentRoute: () => AppAuthenticatedRoute,
  } as any)

-const AppauthenticatedDocumentDocumentIdPrintRoute =
-  AppauthenticatedDocumentDocumentIdPrintImport.update({
-    id: '/_app_/_authenticated/document_/$documentId/print',
-    path: '/document/$documentId/print',
-    getParentRoute: () => rootRoute,
+const AppAuthenticatedDocumentDocumentIdSplatRoute =
+  AppAuthenticatedDocumentDocumentIdSplatImport.update({
+    id: '/document/$documentId/$',
+    path: '/document/$documentId/$',
+    getParentRoute: () => AppAuthenticatedRoute,
  } as any)

 // Populate the FileRoutesByPath interface
@@ -125,13 +117,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppAuthenticatedCampaignsCampaignIdImport
      parentRoute: typeof AppAuthenticatedImport
    }
-    '/_app/_authenticated/document/$documentId': {
-      id: '/_app/_authenticated/document/$documentId'
-      path: '/document/$documentId'
-      fullPath: '/document/$documentId'
-      preLoaderRoute: typeof AppAuthenticatedDocumentDocumentIdImport
-      parentRoute: typeof AppAuthenticatedImport
-    }
    '/_app/_authenticated/campaigns/': {
      id: '/_app/_authenticated/campaigns/'
      path: '/campaigns'
@@ -139,12 +124,12 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppAuthenticatedCampaignsIndexImport
      parentRoute: typeof AppAuthenticatedImport
    }
-    '/_app_/_authenticated/document_/$documentId/print': {
-      id: '/_app_/_authenticated/document_/$documentId/print'
-      path: '/document/$documentId/print'
-      fullPath: '/document/$documentId/print'
-      preLoaderRoute: typeof AppauthenticatedDocumentDocumentIdPrintImport
-      parentRoute: typeof rootRoute
+    '/_app/_authenticated/document/$documentId/$': {
+      id: '/_app/_authenticated/document/$documentId/$'
+      path: '/document/$documentId/$'
+      fullPath: '/document/$documentId/$'
+      preLoaderRoute: typeof AppAuthenticatedDocumentDocumentIdSplatImport
+      parentRoute: typeof AppAuthenticatedImport
    }
  }
 }
@@ -153,16 +138,16 @@ declare module '@tanstack/react-router' {

 interface AppAuthenticatedRouteChildren {
  AppAuthenticatedCampaignsCampaignIdRoute: typeof AppAuthenticatedCampaignsCampaignIdRoute
-  AppAuthenticatedDocumentDocumentIdRoute: typeof AppAuthenticatedDocumentDocumentIdRoute
  AppAuthenticatedCampaignsIndexRoute: typeof AppAuthenticatedCampaignsIndexRoute
+  AppAuthenticatedDocumentDocumentIdSplatRoute: typeof AppAuthenticatedDocumentDocumentIdSplatRoute
 }

 const AppAuthenticatedRouteChildren: AppAuthenticatedRouteChildren = {
  AppAuthenticatedCampaignsCampaignIdRoute:
    AppAuthenticatedCampaignsCampaignIdRoute,
-  AppAuthenticatedDocumentDocumentIdRoute:
-    AppAuthenticatedDocumentDocumentIdRoute,
  AppAuthenticatedCampaignsIndexRoute: AppAuthenticatedCampaignsIndexRoute,
+  AppAuthenticatedDocumentDocumentIdSplatRoute:
+    AppAuthenticatedDocumentDocumentIdSplatRoute,
 }

 const AppAuthenticatedRouteWithChildren =
@@ -190,9 +175,8 @@ export interface FileRoutesByFullPath {
  '/login': typeof AppLoginRoute
  '/': typeof AppIndexRoute
  '/campaigns/$campaignId': typeof AppAuthenticatedCampaignsCampaignIdRoute
-  '/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRoute
  '/campaigns': typeof AppAuthenticatedCampaignsIndexRoute
-  '/document/$documentId/print': typeof AppauthenticatedDocumentDocumentIdPrintRoute
+  '/document/$documentId/$': typeof AppAuthenticatedDocumentDocumentIdSplatRoute
 }

 export interface FileRoutesByTo {
@@ -201,9 +185,8 @@ export interface FileRoutesByTo {
  '/login': typeof AppLoginRoute
  '/': typeof AppIndexRoute
  '/campaigns/$campaignId': typeof AppAuthenticatedCampaignsCampaignIdRoute
-  '/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRoute
  '/campaigns': typeof AppAuthenticatedCampaignsIndexRoute
-  '/document/$documentId/print': typeof AppauthenticatedDocumentDocumentIdPrintRoute
+  '/document/$documentId/$': typeof AppAuthenticatedDocumentDocumentIdSplatRoute
 }

 export interface FileRoutesById {
@@ -214,9 +197,8 @@ export interface FileRoutesById {
  '/_app/login': typeof AppLoginRoute
  '/_app/': typeof AppIndexRoute
  '/_app/_authenticated/campaigns/$campaignId': typeof AppAuthenticatedCampaignsCampaignIdRoute
-  '/_app/_authenticated/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRoute
  '/_app/_authenticated/campaigns/': typeof AppAuthenticatedCampaignsIndexRoute
-  '/_app_/_authenticated/document_/$documentId/print': typeof AppauthenticatedDocumentDocumentIdPrintRoute
+  '/_app/_authenticated/document/$documentId/$': typeof AppAuthenticatedDocumentDocumentIdSplatRoute
 }

 export interface FileRouteTypes {
@@ -227,9 +209,8 @@ export interface FileRouteTypes {
    | '/login'
    | '/'
    | '/campaigns/$campaignId'
-    | '/document/$documentId'
    | '/campaigns'
-    | '/document/$documentId/print'
+    | '/document/$documentId/$'
  fileRoutesByTo: FileRoutesByTo
  to:
    | ''
@@ -237,9 +218,8 @@ export interface FileRouteTypes {
    | '/login'
    | '/'
    | '/campaigns/$campaignId'
-    | '/document/$documentId'
    | '/campaigns'
-    | '/document/$documentId/print'
+    | '/document/$documentId/$'
  id:
    | '__root__'
    | '/_app'
@@ -248,21 +228,17 @@ export interface FileRouteTypes {
    | '/_app/login'
    | '/_app/'
    | '/_app/_authenticated/campaigns/$campaignId'
-    | '/_app/_authenticated/document/$documentId'
    | '/_app/_authenticated/campaigns/'
-    | '/_app_/_authenticated/document_/$documentId/print'
+    | '/_app/_authenticated/document/$documentId/$'
  fileRoutesById: FileRoutesById
 }

 export interface RootRouteChildren {
  AppRoute: typeof AppRouteWithChildren
-  AppauthenticatedDocumentDocumentIdPrintRoute: typeof AppauthenticatedDocumentDocumentIdPrintRoute
 }

 const rootRouteChildren: RootRouteChildren = {
  AppRoute: AppRouteWithChildren,
-  AppauthenticatedDocumentDocumentIdPrintRoute:
-    AppauthenticatedDocumentDocumentIdPrintRoute,
 }

 export const routeTree = rootRoute
@@ -275,8 +251,7 @@ export const routeTree = rootRoute
    "__root__": {
      "filePath": "__root.tsx",
      "children": [
-        "/_app",
-        "/_app_/_authenticated/document_/$documentId/print"
+        "/_app"
      ]
    },
    "/_app": {
@@ -293,8 +268,8 @@ export const routeTree = rootRoute
      "parent": "/_app",
      "children": [
        "/_app/_authenticated/campaigns/$campaignId",
-        "/_app/_authenticated/document/$documentId",
-        "/_app/_authenticated/campaigns/"
+        "/_app/_authenticated/campaigns/",
+        "/_app/_authenticated/document/$documentId/$"
      ]
    },
    "/_app/about": {
@@ -313,16 +288,13 @@ export const routeTree = rootRoute
      "filePath": "_app/_authenticated/campaigns.$campaignId.tsx",
      "parent": "/_app/_authenticated"
    },
-    "/_app/_authenticated/document/$documentId": {
-      "filePath": "_app/_authenticated/document.$documentId.tsx",
-      "parent": "/_app/_authenticated"
-    },
    "/_app/_authenticated/campaigns/": {
      "filePath": "_app/_authenticated/campaigns.index.tsx",
      "parent": "/_app/_authenticated"
    },
-    "/_app_/_authenticated/document_/$documentId/print": {
-      "filePath": "_app_._authenticated.document_.$documentId.print.tsx"
+    "/_app/_authenticated/document/$documentId/$": {
+      "filePath": "_app/_authenticated/document.$documentId.$.tsx",
+      "parent": "/_app/_authenticated"
    }
  }
 }
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,6 +1,5 @@
 import { AuthProvider } from "@/context/auth/AuthContext";
 import { DocumentProvider } from "@/context/document/DocumentContext";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";

@@ -13,7 +12,6 @@ export const Route = createRootRoute({
        </DocumentProvider>
      </AuthProvider>
      <TanStackRouterDevtools />
-      <ReactQueryDevtools buttonPosition="bottom-right" />
    </>
  ),
 });
--- a/src/routes/_app/_authenticated/campaigns.$campaignId.tsx
+++ b/src/routes/_app/_authenticated/campaigns.$campaignId.tsx
@@ -1,128 +1,111 @@
-import { useCallback } from "react";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { pb } from "@/lib/pocketbase";
-import { SessionRow } from "@/components/documents/session/SessionRow";
-import { Button } from "@headlessui/react";
-import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { CampaignDocuments } from "@/components/campaign/CampaignDocuments";
+import { DocumentPreview } from "@/components/documents/DocumentPreview";
+import { Tab, TabbedLayout } from "@/components/layout/TabbedLayout";
 import { Loader } from "@/components/Loader";
-import type { Relationship } from "@/lib/types";
+import { DocumentLoader } from "@/context/document/DocumentLoader";
+import { useDocument } from "@/context/document/hooks";
+import { pb } from "@/lib/pocketbase";
+import type { Campaign, DocumentId } from "@/lib/types";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { z } from "zod";
+
+const CampaignTabs = {
+  sessions: { label: "Sessions", docType: "session" },
+  secrets: { label: "Secrets", docType: "secret" },
+  npcs: { label: "NPCs", docType: "npc" },
+  locations: { label: "Locations", docType: "location" },
+  threads: { label: "Threads", docType: "thread" },
+  fronts: { label: "Fronts", docType: "front" },
+} as const;
+
+const campaignSearchSchema = z.object({
+  tab: z
+    .enum(Object.keys(CampaignTabs) as (keyof typeof CampaignTabs)[])
+    .default("sessions"),
+  docId: z.optional(z.string().transform((s) => s as DocumentId)),
+});

 export const Route = createFileRoute(
  "/_app/_authenticated/campaigns/$campaignId",
 )({
  component: RouteComponent,
  pendingComponent: Loader,
+  validateSearch: (s) => campaignSearchSchema.parse(s),
 });

 function RouteComponent() {
-  const queryClient = useQueryClient();
  const params = Route.useParams();
+  const { tab, docId } = Route.useSearch();

-  const {
-    data: { campaign, sessions },
-  } = useSuspenseQuery({
-    queryKey: ["campaign"],
-    queryFn: async () => {
+  const [loading, setLoading] = useState(true);
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
      const campaign = await pb
        .collection("campaigns")
        .getOne(params.campaignId);
-      // Fetch all documents for this campaign
-      const sessions = await pb.collection("documents").getFullList({
-        filter: `campaign = "${params.campaignId}" && type = 'session'`,
-        sort: "-created",
-      });
-      return {
-        campaign,
-        sessions,
-      };
-    },
-  });
-
-  const createNewSession = useCallback(async () => {
-    // Check for a previous session
-    const prevSession = await pb
-      .collection("documents")
-      .getFirstListItem(`campaign = "${campaign.id}" && type = 'session'`, {
-        sort: "-created",
-      });
-
-    console.log("Previous session: ", {
-      id: prevSession.id,
-      created: prevSession.created,
-    });
-
-    const newSession = await pb.collection("documents").create({
-      campaign: campaign.id,
-      type: "session",
-      data: {
-        strongStart: "",
-      },
-    });
-
-    // If any relations, then copy things over
-    if (prevSession) {
-      const prevRelations = await pb
-        .collection<Relationship>("relationships")
-        .getFullList({
-          filter: `primary = "${prevSession.id}"`,
-        });
-
-      console.log(`Found ${prevRelations.length} previous relations`);
-
-      for (const relation of prevRelations) {
-        console.log(
-          `Adding ${relation.secondary.length} items to ${relation.type}`,
-        );
-        await pb.collection("relationships").create({
-          primary: newSession.id,
-          type: relation.type,
-          secondary: relation.secondary,
-        });
-      }
+      setCampaign(campaign as Campaign);
+      setLoading(false);
    }
+    fetchData();
+  }, [setCampaign, setLoading]);

-    queryClient.invalidateQueries({ queryKey: ["campaign"] });
-  }, [campaign]);
+  if (loading || campaign === null) {
+    return <Loader />;
+  }

  return (
-    <div className="max-w-xl mx-auto py-8">
-      <div className="mb-2">
+    <TabbedLayout
+      title={
+        <h2 className="text-2xl font-bold text-slate-100">{campaign.name}</h2>
+      }
+      navigation={
        <Link
          to="/campaigns"
          className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
        >
          ← Back to campaigns
        </Link>
-      </div>
-      <h2 className="text-2xl font-bold mb-4 text-slate-100">
-        {campaign.name}
-      </h2>
-      <div className="flex justify-between">
-        <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
-        <div>
-          <Button
-            onClick={() => createNewSession()}
-            className="inline-flex items-center justify-center rounded bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-400"
-          >
-            New Session
-          </Button>
-        </div>
-      </div>
-      {sessions && sessions.length > 0 ? (
-        <div>
-          <ul className="space-y-2">
-            {sessions.map((s: any) => (
-              <li key={s.id}>
-                <SessionRow session={s} />
-              </li>
+      }
+      tabs={Object.entries(CampaignTabs).map(([key, { label }]) => (
+        <Tab
+          key={key}
+          label={label}
+          active={tab === key}
+          to={Route.to}
+          params={{
+            campaignId: campaign.id,
+          }}
+          search={{
+            tab: key,
+          }}
+        />
      ))}
-          </ul>
-        </div>
-      ) : (
-        <div className="text-slate-400">
-          No sessions found for this campaign.
-        </div>
-      )}
-    </div>
+      content={
+        <CampaignDocuments
+          campaignId={campaign.id}
+          docType={CampaignTabs[tab].docType}
+        />
+      }
+      flyout={docId && <Flyout key={docId} docId={docId} />}
+    />
  );
 }
+function Flyout({ docId }: { docId: DocumentId }) {
+  const { docResult } = useDocument(docId);
+
+  if (docResult?.type !== "ready") {
+    return (
+      <DocumentLoader documentId={docId}>
+        <Loader />
+      </DocumentLoader>
+    );
+  }
+
+  const doc = docResult.value.doc;
+
+  return <DocumentPreview doc={doc} />;
+}
--- a/src/routes/_app/_authenticated/campaigns.index.tsx
+++ b/src/routes/_app/_authenticated/campaigns.index.tsx
@@ -43,6 +43,7 @@ function RouteComponent() {
                to="/campaigns/$campaignId"
                params={{ campaignId: c.id }}
                className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
+                search={{ tab: "sessions" }}
              >
                {c.name}
              </Link>
--- a/src/routes/_app/_authenticated/document.$documentId.$.tsx
+++ b/src/routes/_app/_authenticated/document.$documentId.$.tsx
@@ -1,20 +1,28 @@
 import { DocumentView } from "@/components/documents/DocumentView";
 import { DocumentLoader } from "@/context/document/DocumentLoader";
+import { useDocumentPath } from "@/lib/documentPath";
 import type { DocumentId } from "@/lib/types";
 import { createFileRoute } from "@tanstack/react-router";

 export const Route = createFileRoute(
-  "/_app/_authenticated/document/$documentId",
+  "/_app/_authenticated/document/$documentId/$",
 )({
  component: RouteComponent,
 });

 function RouteComponent() {
-  const { documentId } = Route.useParams();
+  const path = useDocumentPath();
+  const documentId = path?.documentId;
+  const relationshipType = path?.relationshipType ?? null;
+  const childDocId = path?.childDocId ?? null;

  return (
    <DocumentLoader documentId={documentId as DocumentId}>
-      <DocumentView documentId={documentId as DocumentId} />
+      <DocumentView
+        documentId={documentId as DocumentId}
+        relationshipType={relationshipType}
+        childDocId={childDocId}
+      />
    </DocumentLoader>
  );
 }
--- a/src/routes/_app_._authenticated.document_.$documentId.print.tsx
+++ b/src/routes/_app_._authenticated.document_.$documentId.print.tsx
@@ -1,72 +0,0 @@
-import { DocumentPrintRow } from "@/components/documents/DocumentPrintRow";
-import { SessionPrintRow } from "@/components/documents/session/SessionPrintRow";
-import { Loader } from "@/components/Loader";
-import { pb } from "@/lib/pocketbase";
-import { RelationshipType, type Relationship, type Session } from "@/lib/types";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
-import _ from "lodash";
-
-export const Route = createFileRoute(
-  "/_app_/_authenticated/document_/$documentId/print",
-)({
-  component: RouteComponent,
-  pendingComponent: Loader,
-});
-
-function RouteComponent() {
-  const params = Route.useParams();
-  const {
-    data: { session, relationships },
-  } = useSuspenseQuery({
-    queryKey: ["session", "relationships"],
-    queryFn: async () => {
-      const session = await pb
-        .collection("documents")
-        .getOne(params.documentId);
-      const relationships: Relationship[] = await pb
-        .collection("relationships")
-        .getFullList({
-          filter: `primary = "${params.documentId}"`,
-          expand: "secondary",
-        });
-      console.log("Fetched data: ", relationships);
-      return {
-        session: session as Session,
-        relationships: _.mapValues(
-          _.groupBy(relationships, (r) => r.type),
-          (rs: Relationship[]) => rs.flatMap((r) => r.expand?.secondary),
-        ),
-      };
-    },
-  });
-
-  console.log("Parsed data: ", relationships);
-
-  return (
-    <div className="fill-w py-8 columns-2 gap-8 text-sm">
-      <SessionPrintRow session={session}></SessionPrintRow>
-      {[
-        RelationshipType.Scenes,
-        RelationshipType.Secrets,
-        RelationshipType.Locations,
-        RelationshipType.Npcs,
-        RelationshipType.Monsters,
-        RelationshipType.Treasures,
-      ].map((relationshipType) => (
-        <div className="break-inside-avoid">
-          <h3 className="text-lg font-bold text-slate-600">
-            {relationshipType.charAt(0).toUpperCase() +
-              relationshipType.slice(1)}
-          </h3>
-
-          <ul className="list-disc pl-5">
-            {(relationships[relationshipType] ?? []).map((item) => (
-              <DocumentPrintRow document={item} />
-            ))}
-          </ul>
-        </div>
-      ))}
-    </div>
-  );
-}
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,5 @@
@import "tailwindcss";
-@tailwind utilities;
+@import "tailwindcss/utilities";

 html,
 body {
@@ -17,6 +17,12 @@ body {
  min-width: 320px;
 }

+/* The container for all content */
+#app {
+  height: 100%;
+  width: 100%;
+}
+
 code,
 pre {
  font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace;
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,14 +7,21 @@ import { resolve } from "node:path";

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()],
+  plugins: [
+    TanStackRouterVite({ autoCodeSplitting: true }),
+    viteReact(),
+    tailwindcss(),
+  ],
  test: {
    globals: true,
    environment: "jsdom",
  },
  resolve: {
    alias: {
-      '@': resolve(__dirname, './src'),
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    sourcemap: true,
  },
-  }
 });
Author	SHA1	Message	Date
Drew Haven	bfd20ea8fb	Fixes type errors in the DocumentSearchForm	2025-10-11 18:29:05 -07:00
Drew Haven	907df26395	Support adding existing documents to a session	2025-10-11 18:06:22 -07:00
Drew Haven	d1432d048f	Formatting	2025-10-11 15:18:15 -07:00
Drew Haven	e9d88fdce8	Fixes bug in loader when a relationship is empty	2025-10-11 15:12:22 -07:00
Drew Haven	f197a3fabe	Makes the reducer a bit more debuggable	2025-10-11 15:00:48 -07:00
Drew Haven	f8aac31306	Adds sourcemaps	2025-10-11 13:59:55 -07:00
Drew Haven	d44fe72ff1	Fixes manifest	2025-10-11 13:54:02 -07:00
Drew Haven	64aaad69d7	Support not-present relationships	2025-10-11 13:47:58 -07:00
Drew Haven	c0638e34a8	Uses generic forms everywhere, gets rid of most doc-specific stuff	2025-10-09 16:48:50 -07:00
Drew Haven	8afe0a5345	Swap tsc and vite build so I can pass params to vite build	2025-09-24 18:00:04 -07:00
Drew Haven	625bc508aa	Cleanup	2025-09-24 17:58:35 -07:00
Drew Haven	ab323798e9	Threads done with generic forms.	2025-09-24 15:52:02 -07:00
Drew Haven	6979bc4b8f	Removes some extra logging	2025-09-24 15:24:24 -07:00
Drew Haven	c9d27bce75	Creates the generic new-document form	2025-09-24 15:24:07 -07:00
Drew Haven	43afdc8684	Prototype of making the new threads via generic interfaces	2025-09-17 16:39:50 -07:00
Drew Haven	1c26daa828	Adding UI for threads	2025-08-09 15:49:36 -07:00
Drew Haven	135debdf7f	Adds new campaign form. Adds fronts and thread types	2025-08-03 14:27:06 -07:00
Drew Haven	2fbc2c853f	Makes campaigns load all types of docs and then link to the docs	2025-08-03 12:50:52 -07:00
Drew Haven	3310be9e9b	Updates tabbed layouts for phones	2025-07-26 13:33:14 -07:00
Drew Haven	c7083a9b56	Makes some document previews	2025-07-26 13:26:31 -07:00
Drew Haven	4a109d152c	Adds tabs to the campaign page, but they don't do much yet	2025-07-23 16:25:29 -07:00
Drew Haven	6d5d0e03a0	Restructures the campaign page	2025-07-23 15:46:22 -07:00
Drew Haven	4c2ebdc292	Adds markdown formatting. Layout and style improvements.	2025-07-23 15:37:44 -07:00
Drew Haven	8533f63a22	Completes the three-panel layout	2025-07-21 20:50:18 -07:00
Drew Haven	3390ecfb95	Finally gets the routing working in a somewhat reasonable way	2025-07-21 13:34:06 -07:00
Drew Haven	b30999e907	Linting	2025-07-15 11:02:47 -07:00
Drew Haven	2e9ea14507	Adds a title to the document page.	2025-07-15 11:00:37 -07:00
Drew Haven	762306023b	Removes Tanstack Query	2025-07-15 10:53:28 -07:00
Drew Haven	8f96062058	Fixes bug with updating relationships when an item is added	2025-07-15 10:09:53 -07:00
Drew Haven	258518d954	Uses the router to handle tab state	2025-07-14 17:13:05 -07:00