Document emoji picker (#4338)

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

app/components/Sidebar/components/DocumentLink.tsx

@@ -324,6 +324,7 @@ function InnerDocumentLink(
                     starred: inStarredSection,
                   },
                 }}
+                emoji={document?.emoji || node.emoji}
                 label={
                   <EditableTitle
                     title={title}

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -8,7 +8,6 @@ import Document from "~/models/Document";
 import useStores from "~/hooks/useStores";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { descendants } from "~/utils/tree";
-import Disclosure from "./Disclosure";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
@@ -110,14 +109,10 @@ function DocumentLink(
             title: node.title,
           },
         }}
-        label={
-          <>
-            {hasChildDocuments && depth !== 0 && (
-              <Disclosure expanded={expanded} onClick={handleDisclosureClick} />
-            )}
-            {title}
-          </>
-        }
+        expanded={hasChildDocuments && depth !== 0 ? expanded : undefined}
+        onDisclosureClick={handleDisclosureClick}
+        emoji={node.emoji}
+        label={title}
         depth={depth}
         exact={false}
         scrollIntoViewIfNeeded={!document?.isStarred}

app/components/Sidebar/components/SidebarLink.tsx

@@ -5,6 +5,7 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import EventBoundary from "~/components/EventBoundary";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
 import NudeButton from "~/components/NudeButton";
 import useUnmount from "~/hooks/useUnmount";
 import { undraggableOnDesktop } from "~/styles";
@@ -25,6 +26,7 @@ type Props = Omit<NavLinkProps, "to"> & {
   onClickIntent?: () => void;
   onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;
   icon?: React.ReactNode;
+  emoji?: string | null;
   label?: React.ReactNode;
   menu?: React.ReactNode;
   showActions?: boolean;
@@ -48,6 +50,7 @@ function SidebarLink(
     onClick,
     onClickIntent,
     to,
+    emoji,
     label,
     active,
     isActiveDrop,
@@ -136,6 +139,7 @@ function SidebarLink(
             />
           )}
           {icon && <IconWrapper>{icon}</IconWrapper>}
+          {emoji && <EmojiIcon emoji={emoji} />}
           <Label>{label}</Label>
         </Content>
       </Link>
@@ -152,6 +156,7 @@ const Content = styled.span`
 
   ${Disclosure} {
     margin-top: 2px;
+    margin-left: 2px;
   }
 `;
 

app/components/Sidebar/components/StarredLink.tsx

@@ -8,7 +8,6 @@ import { useDrag, useDrop } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import parseTitle from "@shared/utils/parseTitle";
 import Star from "~/models/Star";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
@@ -42,14 +41,10 @@ function useLabelAndIcon({ documentId, collectionId }: Star) {
   if (documentId) {
     const document = documents.get(documentId);
     if (document) {
-      const { emoji } = parseTitle(document?.title);
-
       return {
-        label: emoji
-          ? document.title.replace(emoji, "")
-          : document.titleWithDefault,
-        icon: emoji ? (
-          <EmojiIcon emoji={emoji} />
+        label: document.titleWithDefault,
+        icon: document.emoji ? (
+          <EmojiIcon emoji={document.emoji} />
         ) : (
           <StarredIcon color={theme.yellow} />
         ),
@@ -148,6 +143,10 @@ function StarredLink({ star }: Props) {
       return null;
     }
 
+    const { emoji } = document;
+    const label = emoji
+      ? document.title.replace(emoji, "")
+      : document.titleWithDefault;
     const collection = document.collectionId
       ? collections.get(document.collectionId)
       : undefined;