added reply message to channel

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.5",
     "@rehooks/local-storage": "^2.4.4",
     "@supabase/supabase-js": "^2.15.0",
     "@tauri-apps/api": "^1.2.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@radix-ui/react-icons': ^1.3.0
   '@radix-ui/react-popover': ^1.0.5
   '@radix-ui/react-tabs': ^1.0.3
+  '@radix-ui/react-tooltip': ^1.0.5
   '@rehooks/local-storage': ^2.4.4
   '@supabase/supabase-js': ^2.15.0
   '@tailwindcss/typography': ^0.5.9
@@ -61,6 +62,7 @@ dependencies:
   '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@radix-ui/react-popover': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
   '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
+  '@radix-ui/react-tooltip': 1.0.5_zn3vyfk3tbnwebg5ldvieekjaq
   '@rehooks/local-storage': 2.4.4_react@18.2.0
   '@supabase/supabase-js': 2.15.0
   '@tauri-apps/api': 1.2.0
@@ -928,6 +930,32 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-tooltip/1.0.5_zn3vyfk3tbnwebg5ldvieekjaq:
+    resolution:
+      { integrity: sha512-cDKVcfzyO6PpckZekODJZDe5ZxZ2fCZlzKzTmPhe4mX9qTHRfLcKgqb0OKf22xLwDequ2tVleim+ZYx3rabD5w== }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 1.0.3_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-popper': 1.1.1_zn3vyfk3tbnwebg5ldvieekjaq
+      '@radix-ui/react-portal': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.1_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      '@radix-ui/react-visually-hidden': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
     resolution:
       { integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== }
@@ -992,6 +1020,19 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-visually-hidden/1.0.2_biqbaboplfbrettd7655fr4n2y:
+    resolution:
+      { integrity: sha512-qirnJxtYn73HEk1rXL12/mXnu2rwsNHDID10th2JGtdK25T9wX+mxRmGt7iPSahw512GbZOc0syZX1nLQGoEOg== }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/rect/1.0.0:
     resolution:
       { integrity: sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg== }

src-tauri/src/main.rs

@@ -35,6 +35,7 @@ struct CreateAccountData {
 #[derive(Deserialize, Type)]
 struct GetPlebData {
   account_id: i32,
+  kind: i32,
 }
 
 #[derive(Deserialize, Type)]
@@ -141,7 +142,10 @@ async fn create_account(db: DbState<'_>, data: CreateAccountData) -> Result<acco
 #[specta::specta]
 async fn get_plebs(db: DbState<'_>, data: GetPlebData) -> Result<Vec<pleb::Data>, ()> {
   db.pleb()
-    .find_many(vec![pleb::account_id::equals(data.account_id)])
+    .find_many(vec![
+      pleb::account_id::equals(data.account_id),
+      pleb::kind::equals(data.kind),
+    ])
     .exec()
     .await
     .map_err(|_| ())

src/assets/icons/hide.tsx

@@ -0,0 +1,18 @@
+export default function HideIcon({ className }: { className: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+      />
+    </svg>
+  );
+}

src/assets/icons/mute.tsx

@@ -0,0 +1,18 @@
+export default function MuteIcon({ className }: { className: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+      />
+    </svg>
+  );
+}

src/assets/icons/reply.tsx

@@ -0,0 +1,18 @@
+export default function ReplyIcon({ className }: { className: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
+      />
+    </svg>
+  );
+}

src/components/channels/channelMessageItem.tsx

@@ -1,22 +0,0 @@
-import { MessageUser } from '@components/chats/messageUser';
-
-import { memo } from 'react';
-
-const ChannelMessageItem = ({ data }: { data: any }) => {
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
-      <div className="flex flex-col">
-        <MessageUser pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-[17px] pl-[48px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {data.content}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default memo(ChannelMessageItem);

src/components/channels/messages/index.tsx

@@ -1,9 +1,9 @@
-import ChannelMessageItem from '@components/channels/channelMessageItem';
+import ChannelMessageItem from '@components/channels/messages/item';
 
 import { useCallback, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-export const ChannelMessageList = ({ data }: { data: any }) => {
+export const ChannelMessages = ({ data }: { data: any }) => {
   const virtuosoRef = useRef(null);
 
   const itemContent: any = useCallback(

src/components/channels/messages/item.tsx

@@ -0,0 +1,37 @@
+import { ReplyButton } from '@components/channels/messages/replyButton';
+import { MessageUser } from '@components/chats/messageUser';
+
+import HideIcon from '@assets/icons/hide';
+import MuteIcon from '@assets/icons/mute';
+
+import { memo } from 'react';
+
+const ChannelMessageItem = ({ data }: { data: any }) => {
+  return (
+    <div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+      <div className="flex flex-col">
+        <MessageUser pubkey={data.pubkey} time={data.created_at} />
+        <div className="-mt-[17px] pl-[48px]">
+          <div className="flex flex-col gap-2">
+            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
+              {data.content}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">
+        <div className="inline-flex h-7 items-center justify-center gap-1 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
+          <ReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
+          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+            <HideIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+            <MuteIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChannelMessageItem);

src/components/channels/messages/replyButton.tsx

@@ -0,0 +1,38 @@
+import { channelReplyAtom } from '@stores/channel';
+
+import ReplyIcon from '@assets/icons/reply';
+
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useSetAtom } from 'jotai';
+
+export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: string; content: string }) => {
+  const setChannelReplyAtom = useSetAtom(channelReplyAtom);
+
+  const createReply = () => {
+    setChannelReplyAtom({ id: id, pubkey: pubkey, content: content });
+  };
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            onClick={() => createReply()}
+            className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
+          >
+            <ReplyIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="select-none rounded-md bg-zinc-800 px-4 py-2 text-sm leading-none text-zinc-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] 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"
+            sideOffset={4}
+          >
+            Reply
+            <Tooltip.Arrow className="fill-zinc-800" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};

src/components/chats/chatModal.tsx

@@ -11,7 +11,7 @@ export const ChatModal = () => {
 
   const fetchPlebsByAccount = useCallback(async (id) => {
     const { getPlebs } = await import('@utils/bindings');
-    return await getPlebs({ account_id: id });
+    return await getPlebs({ account_id: id, kind: 0 });
   }, []);
 
   useEffect(() => {

src/components/form/channelMessage.tsx

@@ -1,9 +1,15 @@
 import ImagePicker from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
+import { UserMini } from '@components/user/mini';
+
+import { channelReplyAtom } from '@stores/channel';
 
 import { dateToUnix } from '@utils/getDate';
 
+import { Cross1Icon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { useAtomValue } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext, useState } from 'react';
 
@@ -13,13 +19,28 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
   const [value, setValue] = useState('');
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
 
+  const channelReply = useAtomValue(channelReplyAtom);
+  const resetChannelReply = useResetAtom(channelReplyAtom);
+
   const submitEvent = useCallback(() => {
+    let tags;
+
+    if (channelReply.id !== null) {
+      tags = [
+        ['e', eventId, '', 'root'],
+        ['e', channelReply.id, '', 'reply'],
+        ['p', channelReply.pubkey, ''],
+      ];
+    } else {
+      tags = [['e', eventId, '', 'root']];
+    }
+
     const event: any = {
       content: value,
       created_at: dateToUnix(),
       kind: 42,
       pubkey: activeAccount.pubkey,
-      tags: [['e', eventId, '', 'root']],
+      tags: tags,
     };
     event.id = getEventHash(event);
     event.sig = signEvent(event, activeAccount.privkey);
@@ -28,7 +49,19 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
     pool.publish(event, relays);
     // reset state
     setValue('');
-  }, [activeAccount.privkey, activeAccount.pubkey, eventId, value, pool, relays]);
+    // reset channel reply
+    resetChannelReply();
+  }, [
+    value,
+    channelReply.id,
+    channelReply.pubkey,
+    activeAccount.pubkey,
+    activeAccount.privkey,
+    eventId,
+    resetChannelReply,
+    pool,
+    relays,
+  ]);
 
   const handleEnterPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -37,18 +70,44 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
     }
   };
 
+  const stopReply = () => {
+    resetChannelReply();
+  };
+
   return (
-    <div className="relative h-24 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
-      <div>
-        <textarea
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={handleEnterPress}
-          spellCheck={false}
-          placeholder="Message"
-          className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
-        />
-      </div>
+    <div
+      className={`relative ${
+        channelReply.id ? 'h-36' : 'h-24'
+      } w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20`}
+    >
+      {channelReply.id && (
+        <div className="absolute left-0 top-0 z-10 h-14 w-full p-[2px]">
+          <div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
+            <div className="flex w-full flex-col">
+              <UserMini pubkey={channelReply.pubkey} />
+              <div className="-mt-3.5 pl-[32px]">
+                <div className="text-xs text-zinc-200">{channelReply.content}</div>
+              </div>
+            </div>
+            <button
+              onClick={() => stopReply()}
+              className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
+            >
+              <Cross1Icon className="h-3 w-3 text-zinc-100" />
+            </button>
+          </div>
+        </div>
+      )}
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleEnterPress}
+        spellCheck={false}
+        placeholder="Message"
+        className={`relative ${
+          channelReply.id ? 'h-36 pt-16' : 'h-24 pt-3'
+        } w-full resize-none rounded-lg border border-black/5 px-3.5 pb-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500`}
+      />
       <div className="absolute bottom-2 w-full px-2">
         <div className="flex w-full items-center justify-between bg-zinc-800">
           <div className="flex items-center gap-2 divide-x divide-zinc-700">

src/components/multiAccounts/activeAccount.tsx

@@ -31,7 +31,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
       const { createPleb } = await import('@utils/bindings');
 
       for (const tag of tags) {
-        const metadata: any = await fetchMetadata(tag[1], pool, relays);
+        const metadata: any = await fetchMetadata(tag[1]);
         createPleb({
           pleb_id: tag[1] + '-lume' + user.id.toString(),
           pubkey: tag[1],
@@ -41,7 +41,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
         }).catch(console.error);
       }
     },
-    [pool, relays, user.id]
+    [user.id]
   );
 
   useEffect(() => {

src/components/user/mini.tsx

@@ -0,0 +1,26 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useMetadata } from '@utils/metadata';
+import { truncate } from '@utils/truncate';
+
+export const UserMini = ({ pubkey }: { pubkey: string }) => {
+  const profile = useMetadata(pubkey);
+
+  return (
+    <div className="group flex items-start gap-1">
+      <div className="relative h-7 w-7 shrink overflow-hidden rounded border border-white/10">
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded object-cover"
+        />
+      </div>
+      <span className="text-xs font-medium leading-none text-zinc-500">
+        Replying to {profile?.name || truncate(pubkey, 16, ' .... ')}
+      </span>
+    </div>
+  );
+};

src/pages/channels/[id].tsx

@@ -1,10 +1,13 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
-import { ChannelMessageList } from '@components/channels/channelMessageList';
+import { ChannelMessages } from '@components/channels/messages/index';
 import FormChannelMessage from '@components/form/channelMessage';
 import { RelayContext } from '@components/relaysProvider';
 
+import { channelReplyAtom } from '@stores/channel';
+
+import { useResetAtom } from 'jotai/utils';
 import { useRouter } from 'next/router';
 import {
   JSXElementConstructor,
@@ -23,8 +26,12 @@ export default function Page() {
   const id: string | string[] = router.query.id || null;
 
   const [messages, setMessages] = useState([]);
+  const resetChannelReply = useResetAtom(channelReplyAtom);
 
   useEffect(() => {
+    // reset channel reply
+    resetChannelReply();
+    // subscribe event
     const unsubscribe = pool.subscribe(
       [
         {
@@ -42,11 +49,11 @@ export default function Page() {
     return () => {
       unsubscribe;
     };
-  }, [id, pool, relays]);
+  }, [id, pool, relays, resetChannelReply]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">
-      <ChannelMessageList data={messages.sort((a, b) => a.created_at - b.created_at)} />
+      <ChannelMessages data={messages.sort((a, b) => a.created_at - b.created_at)} />
       <div className="shrink-0 p-3">
         <FormChannelMessage eventId={id} />
       </div>

src/pages/index.tsx

@@ -16,7 +16,7 @@ export default function Page() {
 
   const fetchFollowsByAccount = useCallback(async (id) => {
     const { getPlebs } = await import('@utils/bindings');
-    return await getPlebs({ account_id: id });
+    return await getPlebs({ account_id: id, kind: 0 });
   }, []);
 
   useEffect(() => {

src/pages/onboarding/create/step-2.tsx

@@ -84,7 +84,7 @@ export default function Page() {
     setLoading(true);
 
     for (const follow of follows) {
-      const metadata: any = await fetchMetadata(follow, pool, relays);
+      const metadata: any = await fetchMetadata(follow);
       createPleb({
         pleb_id: follow + '-lume' + id,
         pubkey: follow,

src/pages/onboarding/login/step-2.tsx

@@ -49,7 +49,7 @@ export default function Page() {
       const { createPleb } = await import('@utils/bindings');
       if (profile?.id !== null) {
         for (const tag of tags) {
-          const metadata: any = await fetchMetadata(tag[1], pool, relays);
+          const metadata: any = await fetchMetadata(tag[1]);
           createPleb({
             pleb_id: tag[1] + '-lume' + profile.id.toString(),
             pubkey: tag[1],
@@ -60,7 +60,7 @@ export default function Page() {
         }
       }
     },
-    [pool, profile.id, relays]
+    [profile.id]
   );
 
   useEffect(() => {

src/stores/channel.tsx

@@ -0,0 +1,4 @@
+import { atomWithReset } from 'jotai/utils';
+
+// channel reply id
+export const channelReplyAtom = atomWithReset({ id: null, pubkey: null, content: null });

src/utils/bindings.ts

@@ -68,18 +68,6 @@ export function getChats(data: GetChatData) {
   return invoke<Chat[]>('get_chats', { data });
 }
 
-export type CreateNoteData = {
-  event_id: string;
-  pubkey: string;
-  kind: number;
-  tags: string;
-  content: string;
-  parent_id: string;
-  parent_comment_id: string;
-  created_at: number;
-  account_id: number;
-};
-export type CreatePlebData = { pleb_id: string; pubkey: string; kind: number; metadata: string; account_id: number };
 export type Note = {
   id: number;
   eventId: string;
@@ -92,19 +80,31 @@ export type Note = {
   createdAt: number;
   accountId: number;
 };
-export type CreateChatData = { pubkey: string; created_at: number; account_id: number };
-export type GetNoteByIdData = { event_id: string };
+export type CreateChannelData = { event_id: string; content: string; account_id: number };
+export type CreatePlebData = { pleb_id: string; pubkey: string; kind: number; metadata: string; account_id: number };
 export type Chat = { id: number; pubkey: string; createdAt: number; accountId: number };
 export type Account = { id: number; pubkey: string; privkey: string; active: boolean; metadata: string };
-export type GetChatData = { account_id: number };
 export type GetChannelData = { limit: number; offset: number };
-export type CreateChannelData = { event_id: string; content: string; account_id: number };
-export type GetPlebPubkeyData = { pubkey: string };
-export type UpdateChannelData = { event_id: string; active: boolean };
-export type GetActiveChannelData = { active: boolean };
-export type GetPlebData = { account_id: number };
-export type CreateAccountData = { pubkey: string; privkey: string; metadata: string };
-export type Channel = { id: number; eventId: string; content: string; active: boolean; accountId: number };
 export type GetLatestNoteData = { date: number };
+export type GetPlebData = { account_id: number; kind: number };
+export type CreateAccountData = { pubkey: string; privkey: string; metadata: string };
+export type GetPlebPubkeyData = { pubkey: string };
+export type Channel = { id: number; eventId: string; content: string; active: boolean; accountId: number };
+export type GetChatData = { account_id: number };
+export type CreateNoteData = {
+  event_id: string;
+  pubkey: string;
+  kind: number;
+  tags: string;
+  content: string;
+  parent_id: string;
+  parent_comment_id: string;
+  created_at: number;
+  account_id: number;
+};
+export type UpdateChannelData = { event_id: string; active: boolean };
 export type Pleb = { id: number; plebId: string; pubkey: string; kind: number; metadata: string; accountId: number };
+export type CreateChatData = { pubkey: string; created_at: number; account_id: number };
 export type GetNoteData = { date: number; limit: number; offset: number };
+export type GetActiveChannelData = { active: boolean };
+export type GetNoteByIdData = { event_id: string };

src/utils/metadata.tsx

@@ -12,18 +12,35 @@ export const fetchMetadata = async (pubkey: string) => {
 export const useMetadata = (pubkey) => {
   const [profile, setProfile] = useState(null);
 
+  /*
+  const insertPlebToDB = useCallback(async (account, pubkey, metadata) => {
+    const { createPleb } = await import('@utils/bindings');
+    return await createPleb({
+      pleb_id: pubkey + '-lume' + account.toString(),
+      pubkey: pubkey,
+      kind: 1,
+      metadata: metadata,
+      account_id: account,
+    }).catch(console.error);
+  }, []);
+  */
+
   const getCachedMetadata = useCallback(async () => {
     const { getPlebByPubkey } = await import('@utils/bindings');
     getPlebByPubkey({ pubkey: pubkey })
       .then((res) => {
         if (res) {
           const metadata = JSON.parse(res.metadata);
+          // update state
           setProfile(metadata);
         } else {
           fetchMetadata(pubkey).then((res: any) => {
             if (res.content) {
               const metadata = JSON.parse(res.content);
+              // update state
               setProfile(metadata);
+              // save to database
+              // insertPlebToDB(activeAccount.id, pubkey, metadata);
             }
           });
         }