From 39b7b34bb742463b90d6f6183ca7c4b1aa1d1f7b Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 3 Sep 2023 08:43:08 +0700
Subject: [PATCH] new mention popup in composer

---
 src-tauri/Cargo.toml                        |  2 +-
 src-tauri/tauri.conf.json                   |  2 +
 src/shared/composer/composer.tsx            | 20 +----
 src/shared/composer/{index.tsx => index.ts} |  3 +-
 src/shared/composer/mention/item.tsx        | 32 +++++---
 src/shared/composer/mention/list.tsx        | 84 ---------------------
 src/shared/composer/mention/popup.tsx       | 39 +++++++++-
 src/shared/composer/mention/suggestion.tsx  | 68 -----------------
 src/shared/notes/actions.tsx                |  2 +-
 src/shared/user.tsx                         |  2 +-
 10 files changed, 67 insertions(+), 187 deletions(-)
 rename src/shared/composer/{index.tsx => index.ts} (60%)
 delete mode 100644 src/shared/composer/mention/list.tsx
 delete mode 100644 src/shared/composer/mention/suggestion.tsx

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index e1c3fb9d..a42051bd 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -16,7 +16,7 @@ tauri-build = { version = "1.4.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4.0", features = [
+tauri = { version = "1.4.0", features = [ "fs-read-dir", "fs-read-file",
   "window-start-dragging",
   "path-all",
   "http-all",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 9b4eb01f..6fd9b783 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -32,6 +32,8 @@
         "all": false,
         "removeFile": true,
         "writeFile": true,
+        "readDir": true,
+        "readFile": true,
         "scope": [
           "$APPDATA/*",
           "$DATA/*",
diff --git a/src/shared/composer/composer.tsx b/src/shared/composer/composer.tsx
index 8e57356d..ff12d3ab 100644
--- a/src/shared/composer/composer.tsx
+++ b/src/shared/composer/composer.tsx
@@ -1,16 +1,14 @@
 import { message } from '@tauri-apps/api/dialog';
 import Image from '@tiptap/extension-image';
-import Mention from '@tiptap/extension-mention';
 import Placeholder from '@tiptap/extension-placeholder';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { convert } from 'html-to-text';
-import { nip19 } from 'nostr-tools';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { Suggestion } from '@shared/composer';
-import { CancelIcon, LoaderIcon, MediaIcon, MentionIcon } from '@shared/icons';
+import { MentionPopup } from '@shared/composer';
+import { CancelIcon, LoaderIcon, MediaIcon } from '@shared/icons';
 import { MentionNote } from '@shared/notes';
 
 import { useComposer } from '@stores/composer';
@@ -33,12 +31,6 @@ export function Composer() {
         },
       }),
       Placeholder.configure({ placeholder: 'Type something...' }),
-      Mention.configure({
-        suggestion: Suggestion,
-        renderLabel({ node }) {
-          return `nostr:${nip19.npubEncode(node.attrs.id.pubkey)} `;
-        },
-      }),
       Image.configure({
         HTMLAttributes: {
           class:
@@ -164,13 +156,7 @@ export function Composer() {
             <MediaIcon className="h-5 w-5 text-white/80" />
             Add media
           </button>
-          <button
-            type="button"
-            onClick={() => uploadImage()}
-            className="inline-flex h-10 w-10 items-center justify-center rounded-lg hover:bg-white/10 hover:backdrop-blur-xl"
-          >
-            <MentionIcon className="h-5 w-5 text-white/80" />
-          </button>
+          <MentionPopup editor={editor} />
         </div>
         <button
           onClick={() => submit()}
diff --git a/src/shared/composer/index.tsx b/src/shared/composer/index.ts
similarity index 60%
rename from src/shared/composer/index.tsx
rename to src/shared/composer/index.ts
index 6fea9ecb..7b4a80bc 100644
--- a/src/shared/composer/index.tsx
+++ b/src/shared/composer/index.ts
@@ -1,6 +1,5 @@
 export * from './user';
 export * from './modal';
 export * from './composer';
-export * from './mention/list';
 export * from './mention/item';
-export * from './mention/suggestion';
+export * from './mention/popup';
diff --git a/src/shared/composer/mention/item.tsx b/src/shared/composer/mention/item.tsx
index 1bd9dbce..2964d937 100644
--- a/src/shared/composer/mention/item.tsx
+++ b/src/shared/composer/mention/item.tsx
@@ -1,22 +1,36 @@
 import { Image } from '@shared/image';
 
+import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
-import { Profile } from '@utils/types';
 
-export function MentionItem({ profile }: { profile: Profile }) {
+export function MentionItem({ pubkey }: { pubkey: string }) {
+  const { status, user } = useProfile(pubkey);
+
+  if (status === 'loading') {
+    return (
+      <div className="flex items-center gap-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" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-white/10">
       <Image
-        src={profile.picture || profile.image}
-        alt={profile.pubkey}
+        src={user.picture || user.image}
+        alt={pubkey}
         className="shirnk-0 h-8 w-8 rounded-md object-cover"
       />
-      <div className="flex flex-col gap-px">
-        <h5 className="max-w-[15rem] text-sm font-medium leading-none text-white">
-          {profile.ident}
+      <div className="flex flex-col items-start gap-px">
+        <h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-white">
+          {user.display_name || user.displayName || user.name}
         </h5>
         <span className="text-sm leading-none text-white/50">
-          {displayNpub(profile.pubkey, 16)}
+          {displayNpub(pubkey, 16)}
         </span>
       </div>
     </div>
diff --git a/src/shared/composer/mention/list.tsx b/src/shared/composer/mention/list.tsx
deleted file mode 100644
index a34a2b3a..00000000
--- a/src/shared/composer/mention/list.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { NDKUserProfile } from '@nostr-dev-kit/ndk';
-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 MentionList = 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: NDKUserProfile, 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 profile={item} />
-            </button>
-          ))
-        ) : (
-          <div>No result</div>
-        )}
-      </div>
-    );
-  }
-);
-
-MentionList.displayName = 'MentionList';
diff --git a/src/shared/composer/mention/popup.tsx b/src/shared/composer/mention/popup.tsx
index 04cccffb..a9004cbb 100644
--- a/src/shared/composer/mention/popup.tsx
+++ b/src/shared/composer/mention/popup.tsx
@@ -1,7 +1,38 @@
-export function MentionPopup() {
+import * as Popover from '@radix-ui/react-popover';
+import { Editor } from '@tiptap/react';
+import { nip19 } from 'nostr-tools';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { MentionItem } from '@shared/composer';
+import { MentionIcon } from '@shared/icons';
+
+export function MentionPopup({ editor }: { editor: Editor }) {
+  const { db } = useStorage();
+
+  const insertMention = (pubkey: string) => {
+    editor.commands.insertContent(`nostr:${nip19.npubEncode(pubkey)}`);
+  };
+
   return (
-    <div>
-      <p>TODO</p>
-    </div>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-10 w-10 items-center justify-center rounded-lg hover:bg-white/10 hover:backdrop-blur-xl"
+        >
+          <MentionIcon className="h-5 w-5 text-white/80" />
+        </button>
+      </Popover.Trigger>
+      <Popover.Content className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg bg-white/10 backdrop-blur-xl focus:outline-none">
+        <div className="flex flex-col gap-1 py-1">
+          {db.account.follows.map((item) => (
+            <button key={item} type="button" onClick={() => insertMention(item)}>
+              <MentionItem pubkey={item} />
+            </button>
+          ))}
+        </div>
+      </Popover.Content>
+    </Popover.Root>
   );
 }
diff --git a/src/shared/composer/mention/suggestion.tsx b/src/shared/composer/mention/suggestion.tsx
deleted file mode 100644
index 9eb62391..00000000
--- a/src/shared/composer/mention/suggestion.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ReactRenderer } from '@tiptap/react';
-import tippy from 'tippy.js';
-
-import { MentionList } 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(MentionList, {
-          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();
-      },
-    };
-  },
-};
diff --git a/src/shared/notes/actions.tsx b/src/shared/notes/actions.tsx
index c9bdb62f..7e58fdcf 100644
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@@ -50,7 +50,7 @@ export function NoteActions({
                 </Tooltip.Trigger>
                 <Tooltip.Portal>
                   <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-                    Open thread
+                    Focus
                     <Tooltip.Arrow className="fill-black" />
                   </Tooltip.Content>
                 </Tooltip.Portal>
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index a8a3be2d..11587379 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -88,7 +88,7 @@ export function User({
       </div>
       <Popover.Portal>
         <Popover.Content
-          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none"
+          className="w-[300px] overflow-hidden rounded-lg bg-white/10 backdrop-blur-3xl focus:outline-none"
           sideOffset={5}
         >
           <div className="flex gap-2.5 border-b border-white/5 px-3 py-3">