Adds markdown formatting. Layout and style improvements.

src/components/documents/BasicRow.tsx

@@ -1,11 +1,11 @@
-import type { AnyDocument, DocumentId } from "@/lib/types";
+import type { AnyDocument } from "@/lib/types";
+import { FormattedText } from "../FormattedText";
 import { DocumentLink } from "./DocumentLink";
 
 export type Props = {
   doc: AnyDocument;
-  title: string;
+  title?: string;
   description?: string;
-  link: (id: DocumentId) => string;
 };
 
 /**
@@ -16,11 +16,11 @@ export const BasicRow = ({ doc, title, description }: Props) => {
     <div>
       <DocumentLink
         childDocId={doc.id}
-        className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400"
+        className="!no-underline text-slate-100 hover:underline hover:text-violet-400"
       >
-        <h4>{title}</h4>
+        {title && <h4 className="font-bold">{title}</h4>}
+        {description && <FormattedText>{description}</FormattedText>}
       </DocumentLink>
-      {description && <p>{description}</p>}
     </div>
   );
 };

src/components/documents/DocumentRow.tsx

@@ -51,7 +51,7 @@ export const DocumentRow = ({
       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 "treasure":
       return <TreasureToggleRow treasure={document} root={root} />;

src/components/documents/DocumentView.tsx

@@ -42,14 +42,14 @@ export function DocumentView({
           <Link
             to={CampaignRoute.to}
             params={{ campaignId: doc.campaign }}
-            className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
+            className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
           >
-            Back to campaign
+            ← 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"
+            className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
           >
             Print
           </Link>
@@ -87,7 +87,7 @@ export function DocumentView({
           />
         )
       }
-      flyout={childDocId && <Flyout docId={childDocId} />}
+      flyout={childDocId && <Flyout key={childDocId} docId={childDocId} />}
     />
   );
 }

src/components/documents/secret/SecretToggleRow.tsx

@@ -3,6 +3,7 @@
 import { pb } from "@/lib/pocketbase";
 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.
@@ -70,7 +71,12 @@ export const SecretToggleRow = ({
         aria-label="Discovered"
         disabled={loading}
       />
-      {secret.data.text}
+      <DocumentLink
+        childDocId={secret.id}
+        className="!no-underline text-slate-100 hover:underline hover:text-violet-400"
+      >
+        {secret.data.text}
+      </DocumentLink>
     </div>
   );
 };