fix the mess I started

src/shared/appHeader.tsx

@@ -45,9 +45,8 @@ export default function AppHeader({ collector }: { collector: boolean }) {
         </button>
       </div>
       <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
-        <div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px">
-          {collector && <EventCollector />}
-        </div>
+        <div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
+        {collector && <EventCollector />}
       </div>
     </div>
   );

src/shared/eventCollector.tsx

@@ -1,24 +1,26 @@
-import { AccountContext } from '@lume/shared/accountProvider';
 import { NetworkStatusIndicator } from '@lume/shared/networkStatusIndicator';
-import { RelayContext } from '@lume/shared/relaysProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
 import { hasNewerNoteAtom } from '@lume/stores/note';
 import { dateToUnix } from '@lume/utils/getDate';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 import { createChat, createNote, updateAccount } from '@lume/utils/storage';
 import { getParentID, nip02ToArray } from '@lume/utils/transform';
 
 import { useSetAtom } from 'jotai';
-import { useCallback, useContext, useEffect, useRef } from 'react';
+import { RelayPool } from 'nostr-relaypool';
+import { useRef } from 'react';
+import useSWRSubscription from 'swr/subscription';
 
 export default function EventCollector() {
-  const pool: any = useContext(RelayContext);
-  const activeAccount: any = useContext(AccountContext);
-
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
   const now = useRef(new Date());
 
-  const subscribe = useCallback(async () => {
-    const follows = activeAccount.follows ? JSON.parse(activeAccount.follows) : [];
+  const { account, isLoading, isError } = useActiveAccount();
+
+  useSWRSubscription(!isLoading && !isError ? account : null, () => {
+    const follows = nip02ToArray(JSON.parse(account.follows));
+
+    const pool = new RelayPool(READONLY_RELAYS);
     const unsubscribe = pool.subscribe(
       [
         {
@@ -28,16 +30,16 @@ export default function EventCollector() {
         },
         {
           kinds: [0, 3],
-          authors: [activeAccount.pubkey],
+          authors: [account.pubkey],
         },
         {
           kinds: [4],
-          '#p': [activeAccount.pubkey],
+          '#p': [account.pubkey],
           since: dateToUnix(now.current),
         },
       ],
       READONLY_RELAYS,
-      (event: { kind: number; tags: string[]; id: string; pubkey: string; content: string; created_at: number }) => {
+      (event: any) => {
         switch (event.kind) {
           // metadata
           case 0:
@@ -48,7 +50,7 @@ export default function EventCollector() {
             const parentID = getParentID(event.tags, event.id);
             createNote(
               event.id,
-              activeAccount.id,
+              account.id,
               event.pubkey,
               event.kind,
               event.tags,
@@ -61,21 +63,20 @@ export default function EventCollector() {
             break;
           // contacts
           case 3:
-            const arr = nip02ToArray(event.tags);
             // update account's folllows with NIP-02 tag list
-            updateAccount('follows', arr, event.pubkey);
+            updateAccount('follows', event.tags, event.pubkey);
             break;
           // chat
           case 4:
-            if (event.pubkey !== activeAccount.pubkey) {
-              createChat(activeAccount.id, event.pubkey, event.created_at);
+            if (event.pubkey !== account.pubkey) {
+              createChat(account.id, event.pubkey, event.created_at);
             }
             break;
           // repost
           case 6:
             createNote(
               event.id,
-              activeAccount.id,
+              account.id,
               event.pubkey,
               event.kind,
               event.tags,
@@ -93,19 +94,7 @@ export default function EventCollector() {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.id, activeAccount.pubkey, activeAccount.follows, pool, setHasNewerNote]);
-
-  useEffect(() => {
-    let ignore = false;
-
-    if (!ignore) {
-      subscribe();
-    }
-
-    return () => {
-      ignore = true;
-    };
-  }, [subscribe]);
+  });
 
   return <NetworkStatusIndicator />;
 }

src/shared/form/base.tsx

@@ -1,71 +0,0 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { ImagePicker } from '@lume/shared/form/imagePicker';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { WRITEONLY_RELAYS } from '@lume/stores/constants';
-import { noteContentAtom } from '@lume/stores/note';
-import { dateToUnix } from '@lume/utils/getDate';
-
-import { useAtom } from 'jotai';
-import { useResetAtom } from 'jotai/utils';
-import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext } from 'react';
-
-export default function FormBase() {
-  const pool: any = useContext(RelayContext);
-  const activeAccount: any = useContext(AccountContext);
-
-  const [value, setValue] = useAtom(noteContentAtom);
-  const resetValue = useResetAtom(noteContentAtom);
-
-  const submitEvent = () => {
-    const event: any = {
-      content: value,
-      created_at: dateToUnix(),
-      kind: 1,
-      pubkey: activeAccount.pubkey,
-      tags: [],
-    };
-    event.id = getEventHash(event);
-    event.sig = signEvent(event, activeAccount.privkey);
-
-    // publish note
-    pool.publish(event, WRITEONLY_RELAYS);
-    // reset form
-    resetValue();
-    // send notification
-    // sendNotification('Note has been published successfully');
-  };
-
-  return (
-    <div className="p-3">
-      <div className="relative h-32 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)}
-            spellCheck={false}
-            placeholder="What's up?"
-            className="relative h-32 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="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">
-              <ImagePicker type="note" />
-              <div className="flex items-center gap-2 pl-2"></div>
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => submitEvent()}
-                disabled={value.length === 0 ? true : false}
-                className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-              >
-                Send
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/layouts/channel.tsx

@@ -1,31 +0,0 @@
-import AppHeader from '@lume/shared/appHeader';
-import MultiAccounts from '@lume/shared/multiAccounts';
-import Navigation from '@lume/shared/navigation';
-
-export default function ChannelLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
-      <div className="flex h-screen w-full flex-col">
-        <div
-          data-tauri-drag-region
-          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
-        >
-          <AppHeader collector={true} />
-        </div>
-        <div className="relative flex min-h-0 w-full flex-1">
-          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
-            <MultiAccounts />
-          </div>
-          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
-            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
-              <Navigation />
-            </div>
-            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4 xl:mr-1.5">
-              <div className="h-full w-full rounded-lg">{children}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/layouts/newsfeed.tsx

@@ -1,29 +0,0 @@
-import AppHeader from '@lume/shared/appHeader';
-import MultiAccounts from '@lume/shared/multiAccounts';
-import Navigation from '@lume/shared/navigation';
-
-export default function NewsfeedLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
-      <div className="flex h-screen w-full flex-col">
-        <div
-          data-tauri-drag-region
-          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
-        >
-          <AppHeader collector={true} />
-        </div>
-        <div className="relative flex min-h-0 w-full flex-1">
-          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
-            <MultiAccounts />
-          </div>
-          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
-            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
-              <Navigation />
-            </div>
-            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/layouts/onboarding.tsx

@@ -1,17 +0,0 @@
-import AppHeader from '@lume/shared/appHeader';
-
-export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
-      <div className="flex h-screen w-full flex-col">
-        <div
-          data-tauri-drag-region
-          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
-        >
-          <AppHeader collector={false} />
-        </div>
-        <div className="relative flex min-h-0 w-full flex-1">{children}</div>
-      </div>
-    </div>
-  );
-}

src/shared/navigation.tsx

@@ -24,7 +24,7 @@ export default function Navigation() {
             </Disclosure.Button>
             <Disclosure.Panel className="flex flex-col text-zinc-400">
               <ActiveLink
-                href="/newsfeed/following"
+                href="/app/newsfeed/following"
                 className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
                 activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
               >
@@ -32,7 +32,7 @@ export default function Navigation() {
                 <span>Following</span>
               </ActiveLink>
               <ActiveLink
-                href="/newsfeed/circle"
+                href="/app/newsfeed/circle"
                 className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
                 activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
               >

src/shared/note/base.tsx

@@ -1,59 +0,0 @@
-import { NoteMetadata } from '@lume/shared/note/metadata';
-import { NoteParent } from '@lume/shared/note/parent';
-import { UserExtend } from '@lume/shared/user/extend';
-import { contentParser } from '@lume/utils/parser';
-
-import { memo } from 'react';
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
-  const content = contentParser(event.content, event.tags);
-
-  const parentNote = () => {
-    if (event.parent_id) {
-      if (event.parent_id !== event.event_id && !event.content.includes('#[0]')) {
-        return <NoteParent key={event.parent_id} id={event.parent_id} />;
-      }
-    }
-    return <></>;
-  };
-
-  const openUserPage = (e) => {
-    e.stopPropagation();
-    navigate(`/user?pubkey=${event.pubkey}`);
-  };
-
-  const openThread = (e) => {
-    const selection = window.getSelection();
-    if (selection.toString().length === 0) {
-      navigate(`/newsfeed/note?id=${event.parent_id}`);
-    } else {
-      e.stopPropagation();
-    }
-  };
-
-  return (
-    <div
-      onClick={(e) => openThread(e)}
-      className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
-    >
-      {parentNote()}
-      <div className="relative z-10 flex flex-col">
-        <div onClick={(e) => openUserPage(e)}>
-          <UserExtend pubkey={event.pubkey} time={event.created_at} />
-        </div>
-        <div className="mt-1 pl-[52px]">
-          <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
-        </div>
-        <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
-          <NoteMetadata
-            eventID={event.event_id}
-            eventPubkey={event.pubkey}
-            eventContent={event.content}
-            eventTime={event.created_at}
-          />
-        </div>
-      </div>
-    </div>
-  );
-});

src/shared/note/comment.tsx

@@ -1,82 +0,0 @@
-import { NoteMetadata } from '@lume/shared/note/metadata';
-import { ImagePreview } from '@lume/shared/note/preview/image';
-import { VideoPreview } from '@lume/shared/note/preview/video';
-import { NoteQuote } from '@lume/shared/note/quote';
-import { UserExtend } from '@lume/shared/user/extend';
-import { UserMention } from '@lume/shared/user/mention';
-
-import destr from 'destr';
-import { memo, useMemo } from 'react';
-import reactStringReplace from 'react-string-replace';
-
-export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
-  const content = useMemo(() => {
-    let parsedContent = event.content;
-    // get data tags
-    const tags = destr(event.tags);
-    // handle urls
-    parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
-        // image url
-        return <ImagePreview key={match + i} url={match} size="large" />;
-      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
-        // youtube
-        return <VideoPreview key={match + i} url={match} />;
-      } else if (match.match(/\.(mp4|webm)$/i)) {
-        // video
-        return <VideoPreview key={match + i} url={match} />;
-      } else {
-        return (
-          <a key={match + i} href={match} target="_blank" rel="noreferrer">
-            {match}
-          </a>
-        );
-      }
-    });
-    // handle #-hashtags
-    parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
-      <span key={match + i} className="cursor-pointer text-fuchsia-500">
-        #{match}
-      </span>
-    ));
-    // handle mentions
-    if (tags.length > 0) {
-      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
-        if (tags[match][0] === 'p') {
-          // @-mentions
-          return <UserMention key={match + i} pubkey={tags[match][1]} />;
-        } else if (tags[match][0] === 'e') {
-          // note-quotes
-          return <NoteQuote key={match + i} id={tags[match][1]} />;
-        } else {
-          return;
-        }
-      });
-    }
-
-    return parsedContent;
-  }, [event.content, event.tags]);
-
-  return (
-    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
-      <div className="relative z-10 flex flex-col">
-        <UserExtend pubkey={event.pubkey} time={event.created_at} />
-        <div className="-mt-5 pl-[52px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] 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">
-              {content}
-            </div>
-          </div>
-        </div>
-        <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
-          <NoteMetadata
-            eventID={event.event_id}
-            eventPubkey={event.pubkey}
-            eventContent={event.content}
-            eventTime={event.created_at}
-          />
-        </div>
-      </div>
-    </div>
-  );
-});

src/shared/note/extend.tsx

@@ -1,82 +0,0 @@
-import { NoteMetadata } from '@lume/shared/note/metadata';
-import { ImagePreview } from '@lume/shared/note/preview/image';
-import { VideoPreview } from '@lume/shared/note/preview/video';
-import { NoteQuote } from '@lume/shared/note/quote';
-import { UserLarge } from '@lume/shared/user/large';
-import { UserMention } from '@lume/shared/user/mention';
-
-import destr from 'destr';
-import { memo, useMemo } from 'react';
-import reactStringReplace from 'react-string-replace';
-
-export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
-  const content = useMemo(() => {
-    let parsedContent = event.content;
-    // get data tags
-    const tags = destr(event.tags);
-    // handle urls
-    parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
-        // image url
-        return <ImagePreview key={match + i} url={match} size="large" />;
-      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
-        // youtube
-        return <VideoPreview key={match + i} url={match} />;
-      } else if (match.match(/\.(mp4|webm)$/i)) {
-        // video
-        return <VideoPreview key={match + i} url={match} />;
-      } else {
-        return (
-          <a key={match + i} href={match} target="_blank" rel="noreferrer">
-            {match}
-          </a>
-        );
-      }
-    });
-    // handle #-hashtags
-    parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
-      <span key={match + i} className="cursor-pointer text-fuchsia-500">
-        #{match}
-      </span>
-    ));
-    // handle mentions
-    if (tags.length > 0) {
-      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
-        if (tags[match][0] === 'p') {
-          // @-mentions
-          return <UserMention key={match + i} pubkey={tags[match][1]} />;
-        } else if (tags[match][0] === 'e') {
-          // note-quotes
-          return <NoteQuote key={match + i} id={tags[match][1]} />;
-        } else {
-          return;
-        }
-      });
-    }
-
-    return parsedContent;
-  }, [event.content, event.tags]);
-
-  return (
-    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col">
-      <div className="relative z-10 flex flex-col">
-        <UserLarge pubkey={event.pubkey} time={event.created_at} />
-        <div className="mt-2">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] 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">
-              {content}
-            </div>
-          </div>
-        </div>
-        <div className="mt-5 flex items-center border-b border-t border-zinc-800 py-2">
-          <NoteMetadata
-            eventID={event.event_id}
-            eventPubkey={event.pubkey}
-            eventContent={event.content}
-            eventTime={event.created_at}
-          />
-        </div>
-      </div>
-    </div>
-  );
-});

src/shared/note/meta/comment.tsx

@@ -1,158 +0,0 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { UserExtend } from '@lume/shared/user/extend';
-import { WRITEONLY_RELAYS } from '@lume/stores/constants';
-import { dateToUnix } from '@lume/utils/getDate';
-
-import { Dialog, Transition } from '@headlessui/react';
-import { ChatLines, OpenNewWindow } from 'iconoir-react';
-import { getEventHash, signEvent } from 'nostr-tools';
-import { Fragment, useContext, useState } from 'react';
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-export const NoteComment = ({
-  count,
-  eventID,
-  eventPubkey,
-  eventContent,
-  eventTime,
-}: {
-  count: number;
-  eventID: string;
-  eventPubkey: string;
-  eventTime: number;
-  eventContent: any;
-}) => {
-  const pool: any = useContext(RelayContext);
-  const activeAccount: any = useContext(AccountContext);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [value, setValue] = useState('');
-
-  const profile = activeAccount ? JSON.parse(activeAccount.metadata) : null;
-
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const openThread = () => {
-    navigate(`/newsfeed/note?id=${eventID}`);
-  };
-
-  const submitEvent = () => {
-    const event: any = {
-      content: value,
-      created_at: dateToUnix(),
-      kind: 1,
-      pubkey: activeAccount.pubkey,
-      tags: [['e', eventID]],
-    };
-    event.id = getEventHash(event);
-    event.sig = signEvent(event, activeAccount.privkey);
-
-    pool.publish(event, WRITEONLY_RELAYS);
-    setIsOpen(false);
-  };
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => openModal()}
-        className="group flex w-16 items-center gap-1 text-sm text-zinc-500"
-      >
-        <div className="rounded-md p-1 group-hover:bg-zinc-800">
-          <ChatLines width={20} height={20} className="text-zinc-500" />
-        </div>
-        <span>{count}</span>
-      </button>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
-                {/* root note */}
-                <div className="relative z-10 flex flex-col pb-6">
-                  <div className="relative z-10">
-                    <UserExtend pubkey={eventPubkey} time={eventTime} />
-                  </div>
-                  <div className="-mt-5 pl-[52px]">
-                    <div className="prose prose-zinc max-w-none break-words leading-tight dark:prose-invert prose-headings:mb-2 prose-headings:mt-3 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
-                      {eventContent}
-                    </div>
-                  </div>
-                  {/* divider */}
-                  <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
-                </div>
-                {/* comment form */}
-                <div className="flex gap-2">
-                  <div>
-                    <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md border border-white/10">
-                      <img src={profile?.picture} alt="user's avatar" className="h-11 w-11 rounded-md object-cover" />
-                    </div>
-                  </div>
-                  <div className="relative h-36 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-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-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
-                    <div>
-                      <textarea
-                        name="content"
-                        onChange={(e) => setValue(e.target.value)}
-                        placeholder="Send your comment"
-                        className="relative h-36 w-full resize-none rounded-md 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"
-                        spellCheck={false}
-                      />
-                    </div>
-                    <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">
-                          <button
-                            onClick={() => openThread()}
-                            className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
-                          >
-                            <OpenNewWindow width={16} height={16} className="text-zinc-400" />
-                          </button>
-                          <div className="flex items-center gap-2 pl-2"></div>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <button
-                            onClick={() => submitEvent()}
-                            disabled={value.length === 0 ? true : false}
-                            className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-md shadow-fuchsia-900/50 hover:bg-fuchsia-600"
-                          >
-                            <span className="text-white drop-shadow">Send</span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
-  );
-};

src/shared/note/meta/reaction.tsx

@@ -1,69 +0,0 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { WRITEONLY_RELAYS } from '@lume/stores/constants';
-import { dateToUnix } from '@lume/utils/getDate';
-
-import { Heart } from 'iconoir-react';
-import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext, useEffect, useState } from 'react';
-
-export const NoteReaction = ({
-  count,
-  liked,
-  eventID,
-  eventPubkey,
-}: {
-  count: number;
-  liked: boolean;
-  eventID: string;
-  eventPubkey: string;
-}) => {
-  const pool: any = useContext(RelayContext);
-  const activeAccount: any = useContext(AccountContext);
-
-  const [isReact, setIsReact] = useState(false);
-  const [like, setLike] = useState(0);
-
-  const handleLike = (e: any) => {
-    e.stopPropagation();
-
-    if (liked === false || isReact === false) {
-      const event: any = {
-        content: '+',
-        kind: 7,
-        tags: [
-          ['e', eventID],
-          ['p', eventPubkey],
-        ],
-        created_at: dateToUnix(),
-        pubkey: activeAccount.pubkey,
-      };
-      event.id = getEventHash(event);
-      event.sig = signEvent(event, activeAccount.privkey);
-      // publish event to all relays
-      pool.publish(event, WRITEONLY_RELAYS);
-      // update state to change icon to filled heart
-      setIsReact(true);
-      // update counter
-      setLike((like) => (like += 1));
-    }
-  };
-
-  useEffect(() => {
-    setIsReact(liked);
-    setLike(count);
-  }, [count, liked]);
-
-  return (
-    <button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
-      <div className="rounded-md p-1 group-hover:bg-zinc-800">
-        {isReact ? (
-          <Heart width={20} height={20} className="fill-red-500 text-transparent" />
-        ) : (
-          <Heart width={20} height={20} className="text-zinc-500" />
-        )}
-      </div>
-      <span>{like}</span>
-    </button>
-  );
-};

src/shared/note/metadata.tsx

@@ -1,5 +0,0 @@
-import { memo } from 'react';
-
-export const NoteMetadata = memo(function NoteMetadata() {
-  return <div className="relative z-10 -ml-1 flex items-center gap-8"></div>;
-});

src/shared/note/parent.tsx

@@ -1,92 +0,0 @@
-import { NoteMetadata } from '@lume/shared/note/metadata';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { UserExtend } from '@lume/shared/user/extend';
-import { READONLY_RELAYS } from '@lume/stores/constants';
-import { contentParser } from '@lume/utils/parser';
-
-import { memo, useContext } from 'react';
-import useSWRSubscription from 'swr/subscription';
-
-export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-
-  const { data, error } = useSWRSubscription(
-    id
-      ? [
-          {
-            ids: [id],
-            kinds: [1],
-          },
-        ]
-      : null,
-    (key, { next }) => {
-      const unsubscribe = pool.subscribe(
-        key,
-        READONLY_RELAYS,
-        (event: any) => {
-          next(null, event);
-        },
-        undefined,
-        undefined,
-        {
-          unsubscribeOnEose: true,
-        }
-      );
-
-      return () => {
-        unsubscribe();
-      };
-    }
-  );
-
-  return (
-    <div className="relative pb-5">
-      {error && <div>failed to load</div>}
-      {!data ? (
-        <div className="animated-pulse">
-          <div className="flex items-start gap-2">
-            <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
-            <div className="flex w-full flex-1 items-start justify-between">
-              <div className="flex w-full items-center justify-between">
-                <div className="flex items-center gap-2 text-sm">
-                  <div className="h-4 w-16 rounded bg-zinc-700" />
-                  <span className="text-zinc-500">·</span>
-                  <div className="h-4 w-12 rounded bg-zinc-700" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="-mt-5 pl-[52px]">
-            <div className="flex flex-col gap-6">
-              <div className="h-16 w-full rounded bg-zinc-700" />
-              <div className="flex items-center gap-8">
-                <div className="h-4 w-12 rounded bg-zinc-700" />
-                <div className="h-4 w-12 rounded bg-zinc-700" />
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <>
-          <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
-          <div className="relative z-10 flex flex-col">
-            <UserExtend pubkey={data.pubkey} time={data.created_at} />
-            <div className="mt-1 pl-[52px]">
-              <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
-                {contentParser(data.content, data.tags)}
-              </div>
-            </div>
-            <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
-              <NoteMetadata
-                eventID={data.event_id}
-                eventPubkey={data.pubkey}
-                eventContent={data.content}
-                eventTime={data.created_at}
-              />
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-});

src/shared/note/placeholder.tsx

@@ -1,27 +0,0 @@
-export const Placeholder = () => {
-  return (
-    <div className="relative z-10 flex h-min animate-pulse select-text flex-col px-3 py-5">
-      <div className="flex items-start gap-2">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
-        <div className="flex w-full flex-1 items-start justify-between">
-          <div className="flex w-full items-center justify-between">
-            <div className="flex items-center gap-2 text-sm">
-              <div className="h-4 w-16 rounded bg-zinc-700" />
-              <span className="text-zinc-500">·</span>
-              <div className="h-4 w-12 rounded bg-zinc-700" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="-mt-5 pl-[52px]">
-        <div className="flex flex-col gap-6">
-          <div className="h-16 w-full rounded bg-zinc-700" />
-          <div className="flex items-center gap-8">
-            <div className="h-4 w-12 rounded bg-zinc-700" />
-            <div className="h-4 w-12 rounded bg-zinc-700" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/shared/note/preview/image.tsx

@@ -1,14 +0,0 @@
-export const ImagePreview = ({ url, size }: { url: string; size: string }) => {
-  return (
-    <div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
-      <img
-        src={url}
-        alt={url}
-        className="h-auto w-full rounded-lg object-cover"
-        loading="lazy"
-        decoding="async"
-        style={{ contentVisibility: 'auto' }}
-      />
-    </div>
-  );
-};

src/shared/note/preview/video.tsx

@@ -1,11 +0,0 @@
-import { MediaOutlet, MediaPlayer } from '@vidstack/react';
-
-export const VideoPreview = ({ url }: { url: string }) => {
-  return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
-      <MediaPlayer src={url} poster="" controls>
-        <MediaOutlet />
-      </MediaPlayer>
-    </div>
-  );
-};

src/shared/note/preview/youtube.tsx

@@ -1,16 +0,0 @@
-import YouTube from 'react-youtube';
-
-function getVideoId(url: string) {
-  const regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
-  return regex.exec(url)[3];
-}
-
-export const YoutubePreview = ({ url }: { url: string }) => {
-  const id = getVideoId(url);
-
-  return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
-      <YouTube videoId={id} className="aspect-video xl:w-2/3" opts={{ width: '100%', height: '100%' }} />
-    </div>
-  );
-};

src/shared/note/quote.tsx

@@ -1,58 +0,0 @@
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { UserExtend } from '@lume/shared/user/extend';
-import { READONLY_RELAYS } from '@lume/stores/constants';
-import { contentParser } from '@lume/utils/parser';
-
-import { memo, useContext } from 'react';
-import useSWRSubscription from 'swr/subscription';
-
-export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-
-  const { data, error } = useSWRSubscription(
-    id
-      ? [
-          {
-            ids: [id],
-            kinds: [1],
-          },
-        ]
-      : null,
-    (key, { next }) => {
-      const unsubscribe = pool.subscribe(
-        key,
-        READONLY_RELAYS,
-        (event: any) => {
-          next(null, event);
-        },
-        undefined,
-        undefined,
-        {
-          unsubscribeOnEose: true,
-        }
-      );
-
-      return () => {
-        unsubscribe();
-      };
-    }
-  );
-
-  return (
-    <div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
-      {error && <div>failed to load</div>}
-      {!data ? (
-        <div className="h-6 w-full animate-pulse select-text flex-col rounded bg-zinc-800"></div>
-      ) : (
-        <div className="relative z-10 flex flex-col">
-          <UserExtend pubkey={data.pubkey} time={data.created_at} />
-          <div className="mt-1 pl-[52px]">
-            <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
-              {contentParser(data.content, data.tags)}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});

src/shared/note/quoteRepost.tsx

@@ -1,19 +0,0 @@
-import { RootNote } from '@lume/shared/note/rootNote';
-import { UserQuoteRepost } from '@lume/shared/user/quoteRepost';
-import { getQuoteID } from '@lume/utils/transform';
-
-import { memo } from 'react';
-
-export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event: any }) {
-  const rootID = getQuoteID(event.tags);
-
-  return (
-    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
-      <div className="relative z-10 flex flex-col pb-5">
-        <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
-        <UserQuoteRepost pubkey={event.pubkey} time={event.created_at} />
-      </div>
-      <RootNote id={rootID} />
-    </div>
-  );
-});

src/shared/note/rootNote.tsx

@@ -1,77 +0,0 @@
-import { NoteMetadata } from '@lume/shared/note/metadata';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { UserExtend } from '@lume/shared/user/extend';
-import { READONLY_RELAYS } from '@lume/stores/constants';
-import { contentParser } from '@lume/utils/parser';
-
-import { memo, useContext } from 'react';
-import useSWRSubscription from 'swr/subscription';
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-export const RootNote = memo(function RootNote({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-
-  const openThread = (e) => {
-    const selection = window.getSelection();
-    if (selection.toString().length === 0) {
-      navigate(`/newsfeed/note?id=${id}`);
-    } else {
-      e.stopPropagation();
-    }
-  };
-
-  const { data, error } = useSWRSubscription(
-    id
-      ? [
-          {
-            ids: [id],
-            kinds: [1],
-          },
-        ]
-      : null,
-    (key, { next }) => {
-      const unsubscribe = pool.subscribe(
-        key,
-        READONLY_RELAYS,
-        (event: any) => {
-          next(null, event);
-        },
-        undefined,
-        undefined,
-        {
-          unsubscribeOnEose: true,
-        }
-      );
-
-      return () => {
-        unsubscribe();
-      };
-    }
-  );
-
-  return (
-    <>
-      {error && <div>failed to load</div>}
-      {!data ? (
-        <div className="h-6 w-full animate-pulse select-text flex-col rounded bg-zinc-800"></div>
-      ) : (
-        <div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
-          <UserExtend pubkey={data.pubkey} time={data.created_at} />
-          <div className="mt-1 pl-[52px]">
-            <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
-              {contentParser(data.content, data.tags)}
-            </div>
-          </div>
-          <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
-            <NoteMetadata
-              eventID={data.id}
-              eventPubkey={data.pubkey}
-              eventContent={data.content}
-              eventTime={data.created_at}
-            />
-          </div>
-        </div>
-      )}
-    </>
-  );
-});

src/shared/user/extend.tsx

@@ -1,39 +0,0 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
-import { useProfile } from '@lume/utils/hooks/useProfile';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-
-dayjs.extend(relativeTime);
-
-export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const profile = useProfile(pubkey);
-
-  return (
-    <div className="group flex h-11 items-center gap-2">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
-        <img
-          src={profile?.picture || DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-11 w-11 rounded-md object-cover"
-          loading="lazy"
-          fetchpriority="high"
-        />
-      </div>
-      <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex flex-col gap-1">
-          <div className="flex items-baseline gap-2">
-            <h5 className="text-sm font-semibold leading-none group-hover:underline">
-              {profile?.display_name || profile?.name || shortenKey(pubkey)}
-            </h5>
-            <span className="text-sm leading-none text-zinc-700"></span>
-          </div>
-          <span className="text-sm leading-none text-zinc-500">
-            {profile?.nip05 || shortenKey(pubkey)} • {dayjs().to(dayjs.unix(time))}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};

src/shared/user/mention.tsx

@@ -1,9 +0,0 @@
-import { useProfile } from '@lume/utils/hooks/useProfile';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-export const UserMention = ({ pubkey }: { pubkey: string }) => {
-  const profile = useProfile(pubkey);
-  return (
-    <span className="cursor-pointer text-fuchsia-500">@{profile?.name || profile?.username || shortenKey(pubkey)}</span>
-  );
-};

src/shared/user/quoteRepost.tsx

@@ -1,36 +0,0 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
-import { useProfile } from '@lume/utils/hooks/useProfile';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-
-dayjs.extend(relativeTime);
-
-export const UserQuoteRepost = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const profile = useProfile(pubkey);
-
-  return (
-    <div className="group flex items-center gap-2">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
-        <img
-          src={profile?.picture || DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-11 w-11 rounded-md object-cover"
-          loading="lazy"
-          fetchpriority="high"
-        />
-      </div>
-      <div className="flex items-baseline gap-2 text-sm">
-        <h5 className="font-semibold leading-tight group-hover:underline">
-          {profile?.display_name || profile?.name || shortenKey(pubkey)}{' '}
-          <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
-            reposted
-          </span>
-        </h5>
-        <span className="leading-tight text-zinc-500">·</span>
-        <span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
-      </div>
-    </div>
-  );
-};