added root note component

src/components/contexts/relay.tsx

@@ -4,7 +4,6 @@ import { createContext, useMemo } from 'react';
 export const RelayContext = createContext({});
 
 export default function RelayProvider({ relays, children }: { relays: any; children: React.ReactNode }) {
-  const value = useMemo(() => new RelayPool(relays, { useEventCache: true }), [relays]);
-
+  const value = useMemo(() => new RelayPool(relays, { useEventCache: true, logSubscriptions: false }), [relays]);
   return <RelayContext.Provider value={value}>{children}</RelayContext.Provider>;
 }

src/components/note/connector.tsx

@@ -5,7 +5,6 @@ import { atomHasNewerNote } from '@stores/note';
 
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 
-import { SliderIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { memo, useCallback, useContext, useEffect, useRef } from 'react';
@@ -26,14 +25,14 @@ export const NoteConnector = memo(function NoteConnector() {
       await db.execute(
         `INSERT OR IGNORE INTO
           cache_notes
-            (id, pubkey, created_at, kind, tags, content) VALUES
+            (id, pubkey, created_at, kind, content, tags) VALUES
             (
               "${event.id}",
               "${event.pubkey}",
               "${event.created_at}",
               "${event.kind}",
-              '${JSON.stringify(event.tags)}',
-              '${JSON.stringify(event.content)}'
+              "${event.content}",
+              '${JSON.stringify(event.tags)}'
             );`
       );
     },

src/components/note/content/index.tsx

@@ -15,7 +15,7 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
 export const Content = memo(function Content({ data }: { data: any }) {
   const [preview, setPreview] = useState({});
 
-  const content = useRef(JSON.parse(data.content));
+  const content = useRef(data.content);
   const urls = useMemo(
     () =>
       content.current.match(
@@ -61,7 +61,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
   }, [preview]);
 
   return (
-    <div className="flex flex-col">
+    <div className="relative z-10 flex flex-col">
       <UserExtend pubkey={data.pubkey} time={data.created_at} />
       <div className="-mt-4 pl-[60px]">
         <div className="flex flex-col gap-6">
@@ -70,7 +70,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
               <MarkdownPreview
                 source={content.current}
                 className={
-                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-normal prose-ul:mt-2 prose-li:my-1'
+                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-normal prose-a:font-medium prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
                 }
                 linkTarget="_blank"
                 disallowedElements={[

src/components/note/index.tsx

@@ -0,0 +1,28 @@
+import { Content } from '@components/note/content';
+import { RootNote } from '@components/note/root';
+
+import { memo, useEffect, useState } from 'react';
+
+export const Note = memo(function Note({ event }: { event: any }) {
+  const [root, setRoot] = useState(null);
+  const tags = JSON.parse(event.tags);
+
+  useEffect(() => {
+    if (tags.length > 0) {
+      if (tags[0][0] === 'e') {
+        setRoot(tags[0][1]);
+      }
+    }
+  }, [tags]);
+
+  return (
+    <div className="relative z-10 flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-5 px-3">
+      {root && (
+        <>
+          <RootNote id={root} />
+        </>
+      )}
+      <Content data={event} />
+    </div>
+  );
+});

src/components/note/placeholder.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 export const Placeholder = memo(function Placeholder() {
   return (
-    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-3">
+    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
       <div className="flex items-start gap-4">
         <div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
         <div className="flex w-full flex-1 items-start justify-between">

src/components/note/root.tsx

@@ -0,0 +1,42 @@
+import { RelayContext } from '@components/contexts/relay';
+import { Content } from '@components/note/content';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+
+export const RootNote = memo(function RootNote({ id }: { id: string }) {
+  const relayPool: any = useContext(RelayContext);
+
+  const [relays]: any = useLocalStorage('relays');
+  const [event, setEvent] = useState(null);
+
+  const fetchEvent = useCallback(() => {
+    relayPool.subscribe(
+      [
+        {
+          ids: [id],
+          kinds: [1],
+        },
+      ],
+      relays,
+      (event: any) => {
+        setEvent(event);
+      }
+    );
+  }, [id, relayPool, relays]);
+
+  useEffect(() => {
+    fetchEvent();
+  }, [fetchEvent]);
+
+  if (event) {
+    return (
+      <div className="relative pb-5">
+        <div className="absolute top-0 left-[21px] h-full w-px bg-zinc-800"></div>
+        <Content data={event} />
+      </div>
+    );
+  } else {
+    return <>Loading...</>;
+  }
+});

src/components/note/single.tsx

@@ -1,11 +0,0 @@
-import { Content } from '@components/note/content';
-
-import { memo } from 'react';
-
-export const Single = memo(function Single({ event }: { event: any }) {
-  return (
-    <div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-3">
-      <Content data={event} />
-    </div>
-  );
-});

src/pages/newsfeed/following.tsx

@@ -2,16 +2,16 @@ import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
 import { DatabaseContext } from '@components/contexts/database';
+import { Note } from '@components/note';
 import NoteForm from '@components/note/form';
 import { Placeholder } from '@components/note/placeholder';
-import { Single } from '@components/note/single';
 
 import { atomHasNewerNote } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
 
 import { useAtom } from 'jotai';
-import { useCallback, useState } from 'react';
+import { Key, useCallback, useState } from 'react';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -56,15 +56,15 @@ export default function Page() {
   }, [db, setHasNewerNote]);
 
   const ItemContent = useCallback(
-    (index: string | number) => {
+    (index: Key) => {
       const event = data[index];
-      return <Single event={event} />;
+      return <Note event={event} />;
     },
     [data]
   );
 
   const computeItemKey = useCallback(
-    (index: string | number) => {
+    (index: Key) => {
       return data[index].id;
     },
     [data]
@@ -87,6 +87,7 @@ export default function Page() {
     if (reload === false) {
       getData().catch(console.error);
     } else {
+      // auto reload after 8s
       const timer = setTimeout(() => {
         getData().catch(console.error);
       }, 8000);
@@ -101,7 +102,7 @@ export default function Page() {
         <div className="absolute top-8 left-1/2 z-50 -translate-x-1/2 transform">
           <button
             onClick={() => loadNewest()}
-            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg active:translate-y-1"
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg shadow-lg active:translate-y-1"
           >
             <span className="text-white drop-shadow">Load newest</span>
           </button>