fix: Error opening folded document breadcrumb (from ts migration)

app/components/DocumentBreadcrumb.tsx

@@ -10,10 +10,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Document from "~/models/Document";
-import Breadcrumb, { Crumb } from "~/components/Breadcrumb";
+import Breadcrumb from "~/components/Breadcrumb";
 import CollectionIcon from "~/components/CollectionIcon";
 import useStores from "~/hooks/useStores";
-import { NavigationNode } from "~/types";
+import { MenuInternalLink, NavigationNode } from "~/types";
 import { collectionUrl } from "~/utils/routeHelpers";
 
 type Props = {
@@ -22,11 +22,12 @@ type Props = {
   onlyText?: boolean;
 };
 
-function useCategory(document: Document) {
+function useCategory(document: Document): MenuInternalLink | null {
   const { t } = useTranslation();
 
   if (document.isDeleted) {
     return {
+      type: "route",
       icon: <TrashIcon color="currentColor" />,
       title: t("Trash"),
       to: "/trash",
@@ -35,6 +36,7 @@ function useCategory(document: Document) {
 
   if (document.isArchived) {
     return {
+      type: "route",
       icon: <ArchiveIcon color="currentColor" />,
       title: t("Archive"),
       to: "/archive",
@@ -43,6 +45,7 @@ function useCategory(document: Document) {
 
   if (document.isDraft) {
     return {
+      type: "route",
       icon: <EditIcon color="currentColor" />,
       title: t("Drafts"),
       to: "/drafts",
@@ -51,6 +54,7 @@ function useCategory(document: Document) {
 
   if (document.isTemplate) {
     return {
+      type: "route",
       icon: <ShapesIcon color="currentColor" />,
       title: t("Templates"),
       to: "/templates",
@@ -66,16 +70,18 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
   const category = useCategory(document);
   const collection = collections.get(document.collectionId);
 
-  let collectionNode: Crumb;
+  let collectionNode: MenuInternalLink;
 
   if (collection) {
     collectionNode = {
+      type: "route",
       title: collection.name,
       icon: <CollectionIcon collection={collection} expanded />,
       to: collectionUrl(collection.url),
     };
   } else {
     collectionNode = {
+      type: "route",
       title: t("Deleted Collection"),
       icon: undefined,
       to: collectionUrl("deleted-collection"),
@@ -88,7 +94,7 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
   );
 
   const items = React.useMemo(() => {
-    const output: Crumb[] = [];
+    const output = [];
 
     if (category) {
       output.push(category);
@@ -96,10 +102,11 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
 
     output.push(collectionNode);
 
-    path.forEach((p: NavigationNode) => {
+    path.forEach((node: NavigationNode) => {
       output.push({
-        title: p.title,
-        to: p.url,
+        type: "route",
+        title: node.title,
+        to: node.url,
       });
     });
     return output;
@@ -113,10 +120,10 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
     return (
       <>
         {collection?.name}
-        {path.map((n: any) => (
-          <React.Fragment key={n.id}>
+        {path.map((node: NavigationNode) => (
+          <React.Fragment key={node.id}>
             <SmallSlash />
-            {n.title}
+            {node.title}
           </React.Fragment>
         ))}
       </>