feat: Unified icon picker (#7038)

app/components/Sidebar/components/DocumentLink.tsx

@@ -14,6 +14,7 @@ import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
@@ -282,6 +283,8 @@ function InnerDocumentLink(
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
+  const icon = document?.icon || node.icon;
+  const color = document?.color || node.color;
 
   const isExpanded = expanded && !isDragging;
   const hasChildren = nodeChildren.length > 0;
@@ -324,7 +327,7 @@ function InnerDocumentLink(
                     starred: inStarredSection,
                   },
                 }}
-                emoji={document?.emoji || node.emoji}
+                icon={icon && <Icon value={icon} color={color} />}
                 label={
                   <EditableTitle
                     title={title}

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { descendants } from "~/utils/tree";
@@ -111,7 +112,7 @@ function DocumentLink(
         }}
         expanded={hasChildDocuments && depth !== 0 ? expanded : undefined}
         onDisclosureClick={handleDisclosureClick}
-        emoji={node.emoji}
+        icon={node.icon && <Icon value={node.icon} color={node.color} />}
         label={title}
         depth={depth}
         exact={false}

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -2,7 +2,8 @@ import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import { NotificationEventType } from "@shared/types";
+import { IconType, NotificationEventType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import UserMembership from "~/models/UserMembership";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
@@ -78,10 +79,11 @@ function SharedWithMeLink({ userMembership }: Props) {
       return null;
     }
 
-    const { emoji } = document;
-    const label = emoji
-      ? document.title.replace(emoji, "")
-      : document.titleWithDefault;
+    const { icon: docIcon } = document;
+    const label =
+      determineIconType(docIcon) === IconType.Emoji
+        ? document.title.replace(docIcon!, "")
+        : document.titleWithDefault;
     const collection = document.collectionId
       ? collections.get(document.collectionId)
       : undefined;

app/components/Sidebar/components/SidebarLink.tsx

@@ -5,7 +5,6 @@ import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
 import NudeButton from "~/components/NudeButton";
 import { UnreadBadge } from "~/components/UnreadBadge";
 import useUnmount from "~/hooks/useUnmount";
@@ -27,7 +26,6 @@ type Props = Omit<NavLinkProps, "to"> & {
   onClickIntent?: () => void;
   onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;
   icon?: React.ReactNode;
-  emoji?: string | null;
   label?: React.ReactNode;
   menu?: React.ReactNode;
   unreadBadge?: boolean;
@@ -52,7 +50,6 @@ function SidebarLink(
     onClick,
     onClickIntent,
     to,
-    emoji,
     label,
     active,
     isActiveDrop,
@@ -142,7 +139,6 @@ function SidebarLink(
             />
           )}
           {icon && <IconWrapper>{icon}</IconWrapper>}
-          {emoji && <EmojiIcon emoji={emoji} />}
           <Label>{label}</Label>
           {unreadBadge && <UnreadBadge />}
         </Content>

app/components/Sidebar/components/useSidebarLabelAndIcon.tsx

@@ -1,7 +1,7 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
 import useStores from "~/hooks/useStores";
 
 interface SidebarItem {
@@ -21,7 +21,11 @@ export function useSidebarLabelAndIcon(
     if (document) {
       return {
         label: document.titleWithDefault,
-        icon: document.emoji ? <EmojiIcon emoji={document.emoji} /> : icon,
+        icon: document.icon ? (
+          <Icon value={document.icon} color={document.color ?? undefined} />
+        ) : (
+          icon
+        ),
       };
     }
   }