polish

src/shared/composer/index.ts

@@ -3,4 +3,6 @@ export * from './modal';
 export * from './composer';
 export * from './mention/item';
 export * from './mention/popup';
+export * from './mention/suggestion';
+export * from './mention/inlineList';
 export * from './mediaUploader';

src/shared/composer/mention/inlineList.tsx

@@ -0,0 +1,83 @@
+import { type SuggestionProps } from '@tiptap/suggestion';
+import {
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { MentionItem } from '@shared/composer';
+
+export const MentionInlineList = forwardRef(
+  (props: SuggestionProps, ref: ForwardedRef<unknown>) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const selectItem = (index) => {
+      const item = props.items[index];
+
+      if (item) {
+        props.command({ id: item });
+      }
+    };
+
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+
+    const enterHandler = () => {
+      selectItem(selectedIndex);
+    };
+
+    useEffect(() => setSelectedIndex(0), [props.items]);
+
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === 'ArrowUp') {
+          upHandler();
+          return true;
+        }
+
+        if (event.key === 'ArrowDown') {
+          downHandler();
+          return true;
+        }
+
+        if (event.key === 'Enter') {
+          enterHandler();
+          return true;
+        }
+
+        return false;
+      },
+    }));
+
+    return (
+      <div className="flex w-[250px] flex-col rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        {props.items.length ? (
+          props.items.map((item: string, index: number) => (
+            <button
+              className={twMerge(
+                'h-11 w-full rounded-lg px-2 text-start text-sm font-medium hover:bg-white/10',
+                `${index === selectedIndex ? 'is-selected' : ''}`
+              )}
+              key={index}
+              onClick={() => selectItem(index)}
+            >
+              <MentionItem embed={item} />
+            </button>
+          ))
+        ) : (
+          <div>No result</div>
+        )}
+      </div>
+    );
+  }
+);
+
+MentionInlineList.displayName = 'MentionList';

src/shared/composer/mention/item.tsx

@@ -3,12 +3,12 @@ import { Image } from '@shared/image';
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
-export function MentionItem({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
+export function MentionItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
+  const { status, user } = useProfile(pubkey, embed);
 
   if (status === 'loading') {
     return (
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2.5 px-2">
         <div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
           <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />

src/shared/composer/mention/suggestion.tsx

@@ -0,0 +1,68 @@
+import { ReactRenderer } from '@tiptap/react';
+import tippy from 'tippy.js';
+
+import { MentionInlineList } from '@shared/composer';
+
+export const Suggestion = {
+  items: async ({ query }) => {
+    const users = [];
+    return users
+      .filter((item) => item.ident.toLowerCase().startsWith(query.toLowerCase()))
+      .slice(0, 5);
+  },
+
+  render: () => {
+    let component;
+    let popup;
+
+    return {
+      onStart: (props) => {
+        component = new ReactRenderer(MentionInlineList, {
+          props,
+          editor: props.editor,
+        });
+
+        if (!props.clientRect) {
+          return;
+        }
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        });
+      },
+
+      onUpdate(props) {
+        component.updateProps(props);
+
+        if (!props.clientRect) {
+          return;
+        }
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+      },
+
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide();
+
+          return true;
+        }
+
+        return component.ref?.onKeyDown(props);
+      },
+
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      },
+    };
+  },
+};

src/shared/composer/user.tsx

@@ -14,7 +14,7 @@ export function ComposerUser({ pubkey }: { pubkey: string }) {
         className="h-10 w-10 shrink-0 rounded-lg"
       />
       <h5 className="text-base font-semibold leading-none text-white">
-        {user?.name || user?.display_name || displayNpub(pubkey, 16)}
+        {user?.name || user?.display_name || user?.displayName || displayNpub(pubkey, 16)}
       </h5>
     </div>
   );