Makes campaigns load all types of docs and then link to the docs

src/components/documents/BasicPreview.tsx

@@ -1,13 +1,25 @@
+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 = ({ title, description }: Props) => {
+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>

src/components/documents/DocumentLink.tsx

@@ -1,6 +1,6 @@
 import { makeDocumentPath, useDocumentPath } from "@/lib/documentPath";
-import type { DocumentId, RelationshipType } from "@/lib/types";
-import { Link } from "@tanstack/react-router";
+import type { DocumentId } from "@/lib/types";
+import { Link, useParams, useSearch } from "@tanstack/react-router";
 
 export type Props = React.PropsWithChildren<{
   childDocId: DocumentId;
@@ -8,13 +8,37 @@ export type Props = React.PropsWithChildren<{
 }>;
 
 export function DocumentLink({ childDocId, className, children }: Props) {
-  const { documentId, relationshipType } = useDocumentPath();
+  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={makeDocumentPath(documentId, relationshipType, childDocId)}
-      className={className}
-    >
+    <Link to={to} search={search} className={className}>
       {children}
     </Link>
   );

src/components/documents/DocumentPreview.tsx

@@ -35,17 +35,19 @@ const ShowDocument = ({ doc }: { doc: AnyDocument }) => {
     case "location":
       return (
         <BasicPreview
+          id={doc.id}
           title={doc.data.name}
           description={doc.data.description}
         />
       );
 
     case "monster":
-      return <BasicPreview title={doc.data.name} />;
+      return <BasicPreview id={doc.id} title={doc.data.name} />;
 
     case "npc":
       return (
         <BasicPreview
+          id={doc.id}
           title={doc.data.name}
           description={doc.data.description}
         />
@@ -53,16 +55,20 @@ const ShowDocument = ({ doc }: { doc: AnyDocument }) => {
 
     case "session":
       return (
-        <BasicPreview title={doc.created} description={doc.data.strongStart} />
+        <BasicPreview
+          id={doc.id}
+          title={doc.created}
+          description={doc.data.strongStart}
+        />
       );
 
     case "secret":
-      return <BasicPreview title={doc.data.text} />;
+      return <BasicPreview id={doc.id} title={doc.data.text} />;
 
     case "scene":
-      return <BasicPreview description={doc.data.text} />;
+      return <BasicPreview id={doc.id} description={doc.data.text} />;
 
     case "treasure":
-      return <BasicPreview title={doc.data.text} />;
+      return <BasicPreview id={doc.id} title={doc.data.text} />;
   }
 };

src/components/documents/DocumentView.tsx

@@ -41,8 +41,9 @@ export function DocumentView({
       navigation={
         <>
           <Link
-            to={CampaignRoute.to}
+            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