chore: Tidy mention menu, remove unneccessary component

outline · Dec 19, 2024 · b9f0f67 · b9f0f67
1 parent 02aa4c2
commit b9f0f67
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 21 deletions.
diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
@@ -109,6 +109,8 @@ const Title = styled.div`
   ${ellipsis()}
   flex-grow: 1;
   display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 
 type MenuAnchorProps = {

diff --git a/app/editor/components/MentionMenu.tsx b/app/editor/components/MentionMenu.tsx
@@ -13,10 +13,10 @@ import Flex from "~/components/Flex";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
-import MentionMenuItem from "./MentionMenuItem";
 import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
+import SuggestionsMenuItem from "./SuggestionsMenuItem";
 
 interface MentionItem extends MenuItem {
   name: string;
@@ -122,11 +122,10 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       search={search}
       onSelect={handleSelect}
       renderMenuItem={(item, _index, options) => (
-        <MentionMenuItem
+        <SuggestionsMenuItem
           onClick={options.onClick}
           selected={options.selected}
           title={item.title}
-          label={item.attrs.label}
           icon={
             <Flex
               align="center"

diff --git a/app/editor/components/MentionMenuItem.tsx b/app/editor/components/MentionMenuItem.tsx
diff --git a/app/editor/components/SuggestionsMenuItem.tsx b/app/editor/components/SuggestionsMenuItem.tsx
@@ -15,6 +15,8 @@ export type Props = {
   icon?: React.ReactElement;
   /** The title of the item */
   title: React.ReactNode;
+  /** An optional subtitle for the item */
+  subtitle?: React.ReactNode;
   /** A string representing the keyboard shortcut for the item */
   shortcut?: string;
 };
@@ -24,6 +26,7 @@ function SuggestionsMenuItem({
   disabled,
   onClick,
   title,
+  subtitle,
   shortcut,
   icon,
 }: Props) {
@@ -53,11 +56,17 @@ function SuggestionsMenuItem({
       icon={icon}
     >
       {title}
+      {subtitle && <Subtitle $active={selected}>{subtitle}</Subtitle>}
       {shortcut && <Shortcut $active={selected}>{shortcut}</Shortcut>}
     </MenuItem>
   );
 }
 
+const Subtitle = styled.span<{ $active?: boolean }>`
+  color: ${(props) =>
+    props.$active ? props.theme.white50 : props.theme.textTertiary};
+`;
+
 const Shortcut = styled.span<{ $active?: boolean }>`
   color: ${(props) =>
     props.$active ? props.theme.white50 : props.theme.textTertiary};

diff --git a/shared/editor/types/index.ts b/shared/editor/types/index.ts
@@ -19,6 +19,7 @@ export type MenuItem = {
   icon?: React.ReactElement;
   name?: string;
   title?: string;
+  subtitle?: string;
   shortcut?: string;
   keywords?: string;
   tooltip?: string;