feat: Show drafts in sidebar when viewing (#2820)

shared/theme.ts

@@ -134,6 +134,7 @@ export const light: DefaultTheme = {
   placeholder: "#a2b2c3",
   sidebarBackground: colors.warmGrey,
   sidebarItemBackground: "#d7e0ea",
+  sidebarDraftBorder: darken("0.25", colors.warmGrey),
   sidebarText: "rgb(78, 92, 110)",
   backdrop: "rgba(0, 0, 0, 0.2)",
   shadow: "rgba(0, 0, 0, 0.2)",
@@ -182,6 +183,7 @@ export const dark: DefaultTheme = {
   placeholder: colors.slateDark,
   sidebarBackground: colors.veryDarkBlue,
   sidebarItemBackground: lighten(0.015, colors.almostBlack),
+  sidebarDraftBorder: darken("0.35", colors.slate),
   sidebarText: colors.slate,
   backdrop: "rgba(255, 255, 255, 0.3)",
   shadow: "rgba(0, 0, 0, 0.6)",

shared/utils/collections.ts

@@ -0,0 +1,27 @@
+import { NavigationNode } from "~/types";
+import naturalSort from "./naturalSort";
+
+type Sort = {
+  field: string;
+  direction: "asc" | "desc";
+};
+
+export const sortNavigationNodes = (
+  documents: NavigationNode[],
+  sort: Sort
+): NavigationNode[] => {
+  // "index" field is manually sorted and is represented by the documentStructure
+  // already saved in the database, no further sort is needed
+  if (sort.field === "index") {
+    return documents;
+  }
+
+  const orderedDocs = naturalSort(documents, sort.field, {
+    direction: sort.direction,
+  });
+
+  return orderedDocs.map((document) => ({
+    ...document,
+    children: sortNavigationNodes(document.children, sort),
+  }));
+};

shared/utils/naturalSort.ts

@@ -6,6 +6,7 @@ type NaturalSortOptions = {
   caseSensitive?: boolean;
   direction?: "asc" | "desc";
 };
+
 const sorter = naturalSort();
 const regex = emojiRegex();
 
@@ -13,15 +14,14 @@ const stripEmojis = (value: string) => value.replace(regex, "");
 
 const cleanValue = (value: string) => stripEmojis(deburr(value));
 
-function getSortByField<T extends Record<string, any>>(
+function getSortByField<T>(
   item: T,
-  keyOrCallback: string | (() => string)
+  keyOrCallback: string | ((item: T) => string)
 ) {
   const field =
     typeof keyOrCallback === "string"
       ? item[keyOrCallback]
-      : // @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
-        keyOrCallback(item);
+      : keyOrCallback(item);
   return cleanValue(field);
 }
 
@@ -31,10 +31,14 @@ function naturalSortBy<T>(
   sortOptions?: NaturalSortOptions
 ): T[] {
   if (!items) return [];
-  // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'NaturalSortOptions' is not assig... Remove this comment to see the full error message
-  const sort = sortOptions ? naturalSort(sortOptions) : sorter;
-  return items.sort((a: any, b: any): -1 | 0 | 1 =>
-    // @ts-expect-error ts-migrate(2322) FIXME: Type 'number' is not assignable to type '0 | 1 | -... Remove this comment to see the full error message
+  const sort = sortOptions
+    ? naturalSort({
+        caseSensitive: sortOptions.caseSensitive,
+        direction: sortOptions.direction === "desc" ? "desc" : undefined,
+      })
+    : sorter;
+
+  return items.sort((a: T, b: T) =>
     sort(getSortByField(a, key), getSortByField(b, key))
   );
 }