fix: Archived collections have incorrect depth (#13199)

app/components/Sidebar/components/ArchiveLink.tsx

@@ -82,7 +82,7 @@ function ArchiveLink() {
               renderItem={(item) => (
                 <ArchivedCollectionLink
                   key={item.id}
-                  depth={1}
+                  depth={2}
                   collection={item}
                 />
               )}

app/components/Sidebar/components/ArchivedCollectionLink.tsx

@@ -4,11 +4,13 @@ import useStores from "~/hooks/useStores";
 import CollectionLink from "./CollectionLink";
 
 type Props = {
+  /** The archived collection to render. */
   collection: Collection;
+  /** Indentation depth of the row. */
   depth?: number;
 };
 
-export function ArchivedCollectionLink({ collection, depth }: Props) {
+export function ArchivedCollectionLink({ collection, depth = 0 }: Props) {
   const { documents } = useStores();
   const [expanded, setExpanded] = useState(false);
 
@@ -24,7 +26,7 @@ export function ArchivedCollectionLink({ collection, depth }: Props) {
 
   return (
     <CollectionLink
-      depth={depth ? depth : 0}
+      depth={depth}
       collection={collection}
       expanded={expanded}
       activeDocument={documents.active}

app/components/Sidebar/components/CollectionLink.tsx

@@ -132,6 +132,7 @@ const CollectionLink: React.FC<Props> = ({
       <CollectionLinkChildren
         collection={collection}
         expanded={!!expanded}
+        depth={depth}
         prefetchDocument={documents.prefetchDocument}
       />
     </CollectionRow>

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -31,6 +31,8 @@ type Props = {
   collection: Collection;
   /** Whether the children are shown in an expanded state. */
   expanded: boolean;
+  /** Indentation depth of the parent collection. */
+  depth?: number;
   /** Function to prefetch a document by ID. */
   prefetchDocument?: (documentId: string) => Promise<Document | void>;
   /** Element to display above the child documents */
@@ -40,9 +42,13 @@ type Props = {
 function CollectionLinkChildren({
   collection,
   expanded,
+  depth = 0,
   prefetchDocument,
   children,
 }: Props) {
+  // Documents sit one level below the collection, with a minimum that leaves
+  // room for their own disclosure to the left of the label.
+  const childDepth = Math.max(depth + 1, 2);
   const pageSize = DEFAULT_PAGE_SIZE;
   const { documents, ui } = useStores();
   const { t } = useTranslation();
@@ -99,7 +105,7 @@ function CollectionLinkChildren({
               activeDocument={activeDocument}
               prefetchDocument={prefetchDocument}
               isDraft={node.isDraft}
-              depth={2}
+              depth={childDepth}
               index={index}
             />
           ))}
@@ -111,7 +117,7 @@ function CollectionLinkChildren({
                 </Text>
               }
               onClick={() => history.push(collection.url)}
-              depth={2}
+              depth={childDepth}
             />
           )}
           {childDocuments && (

app/components/Sidebar/components/CollectionRow.tsx

@@ -72,7 +72,7 @@ export type CollectionRowProps = {
   canCreateChild?: boolean;
   /** Submit handler for the inline new-child title input. */
   onCreateChild?: (title: string) => Promise<void>;
-  /** Depth of the inline new-child SidebarLink. Defaults to 2. */
+  /** Depth of the inline new-child SidebarLink. Defaults to one level below the row. */
   newChildDepth?: number;
 
   /** Ref forwarded to the outer Relative; for drag hover timers. */
@@ -107,7 +107,7 @@ function CollectionRow({
   menuOpen,
   canCreateChild,
   onCreateChild,
-  newChildDepth = 2,
+  newChildDepth,
   parentRef,
   dropRef,
   isActiveDropTarget,
@@ -236,7 +236,7 @@ function CollectionRow({
       {isAddingNewChild && onCreateChild && (
         <SidebarLink
           isActive={() => true}
-          depth={newChildDepth}
+          depth={newChildDepth ?? Math.max(depth + 1, 2)}
           ellipsis={false}
           label={
             <EditableTitle