Ability to choose publish location for a document (#4582)

* feat: initial base structure

* feat: utils for constructing and flattening collection tree

* feat: basic demo to display tree-like structure with virtualization

* feat: make it searchable

* feat: row component

* fix: handle row selection

* fix: scroll jitter

* fix: popover max-height to eliminate extra scroll

* fix: position scrollbar correctly

* fix: do not sort to maintain correct tree-like view

* feat: footer

* fix: scroll to selected item

* fix: deselect item

* fix: display selected location in footer

* fix: deselect item if any upon search trigger

* fix: create draft without collection

* fix: pass down collectionId to all the nodes

* feat: publish document under selected location

* fix: move the doc post publish in case it is supposed to be a nested doc

* fix: wrap text for selected location

* fix: footer background in dark mode and unused css

* fix: popover height in small devices

* fix: no need to spread

* refactor: remove outline

* refactor: border-radius is common

* refactor: remove active and focus

* fix: do not shrink spacer

* fix: scroll list padding with correctly adjusted scrolling

* refactor: use constants

* fix: use padding in favor of spacer

* refactor: border attrs not needed

* refactor: control title padding and icon size centrally

* fix: rename param

* fix: import path

* fix: refactor styles, avoid magic numbers

* fix: type err

* feat: make rows collapsible

* fix: fully expanded without disclosure upon search

* fix: use modal in place of popover

* fix: collapse descendants

* fix: rename PublishPopover to PublishModal

* fix: adjust collapse icon as part of tree view

* fix: enable keyboard navigation

* not sure why collapse and expand shortcuts are not working

* fix: row expansion and search box focus and blur

* fix: remove css hover, handle it via active prop

* fix: discard tree like view for search results

* fix: minor tweaks

* refactor: no need to pass onPublish

* refactor: remove unnecessary attrs from search component

* fix: publish button text

* fix: reset intial scroll offset to 0 on search

* fix: remove search highlights

* fix: clean up search component

* refactor: search and row collapse

* refactor: PublishLocation

* fix: show emoji or star icon if present

* fix: shift focus only from top item

* fix: leading emoji

* fix: baseline text

* fix: make path tertiary

* fix: do not show path for collections

* fix: path text color upon selection

* fix: deleted collection case

* fix: no results found

* fix: space around slash

* Refinement, some small refactors

* fix: Publish shortcut, use Button action

* Allow new document creation from command menu without active collection

* fix: duplicate

* fix: Unneccessary truncation

* fix: Scroll on expand/collapse
Remove wraparound

* fix: tsc

* fix: Horizontal overflow on PublishLocation
Remove pointless moveTo method

* fix: Missing translation

* Remove method indirection
Show expanded collection icon in tree when expanded

* Shrink font size a point

* Remove feature flag

* fix: Path color contrast in light mode
Remove unused expanded/show attributes

* shrink -> collapse, fix expanded disclosure without items after searching

* Mobile styles

* fix: scroll just into view

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/stores/CollectionsStore.ts

@@ -1,7 +1,8 @@
 import invariant from "invariant";
-import { concat, find, last } from "lodash";
+import { concat, find, last, isEmpty } from "lodash";
 import { computed, action } from "mobx";
 import { CollectionPermission, FileOperationFormat } from "@shared/types";
+import parseTitle from "@shared/utils/parseTitle";
 import Collection from "~/models/Collection";
 import { NavigationNode } from "~/types";
 import { client } from "~/utils/ApiClient";
@@ -99,6 +100,76 @@ export default class CollectionsStore extends BaseStore<Collection> {
     });
   }
 
+  @computed
+  get tree() {
+    const subtree = (node: any) => {
+      const isDocument = node.data.type === DocumentPathItemType.Document;
+      if (isDocument) {
+        const { strippedTitle, emoji } = parseTitle(node.data.title);
+        node.data.title = strippedTitle;
+        if (emoji) {
+          node.data.emoji = emoji;
+        }
+      }
+      const root: any = {
+        data: {
+          id: node.data.id,
+          title: node.data.name || node.data.title,
+          type: node.data.type,
+          collectionId:
+            node.data.type === DocumentPathItemType.Collection
+              ? node.data.id
+              : node.data.collectionId,
+          emoji: node.data.emoji,
+        },
+        children: [],
+        parent: node.parent,
+        depth: node.depth,
+      };
+      !isEmpty(node.children) &&
+        node.children.forEach((child: any) => {
+          root.children.push(
+            subtree({
+              data: {
+                ...child,
+                type: DocumentPathItemType.Document,
+                collectionId: root.data.collectionId,
+              },
+              parent: root,
+              children: child.children || [],
+              depth: root.depth + 1,
+            }).root
+          );
+        });
+      return { root };
+    };
+
+    const root: any = {
+      data: null,
+      parent: null,
+      children: [],
+      depth: -1,
+    };
+
+    if (this.isLoaded) {
+      this.data.forEach((collection) => {
+        root.children.push(
+          subtree({
+            data: {
+              ...collection,
+              type: DocumentPathItemType.Collection,
+            },
+            children: collection.documents || [],
+            parent: root,
+            depth: root.depth + 1,
+          }).root
+        );
+      });
+    }
+
+    return { root };
+  }
+
   @action
   import = async (attachmentId: string, format?: string) => {
     await client.post("/collections.import", {