added note metadta component

src/pages/newsfeed/following.tsx

@@ -3,7 +3,7 @@ import WithSidebarLayout from '@layouts/withSidebar';
 
 import { DatabaseContext } from '@components/contexts/database';
 import { Note } from '@components/note';
-import NoteForm from '@components/note/form';
+import FormBasic from '@components/note/form/basic';
 import { Placeholder } from '@components/note/placeholder';
 
 import { atomHasNewerNote } from '@stores/note';
@@ -102,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 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-fuchsia-900/50 active:translate-y-1"
           >
             <span className="text-white drop-shadow">Load newest</span>
           </button>
@@ -112,7 +112,7 @@ export default function Page() {
         data={data}
         itemContent={ItemContent}
         components={{
-          Header: () => <NoteForm />,
+          Header: () => <FormBasic />,
           EmptyPlaceholder: () => <Placeholder />,
           ScrollSeekPlaceholder: () => <Placeholder />,
         }}

src/pages/newsfeed/thread/index.tsx

@@ -0,0 +1,61 @@
+import BaseLayout from '@layouts/base';
+import WithSidebarLayout from '@layouts/withSidebar';
+
+import { DatabaseContext } from '@components/contexts/database';
+import { Content } from '@components/note/content';
+import FormBasic from '@components/note/form/basic';
+
+import { useRouter } from 'next/router';
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+export default function Page() {
+  const { db }: any = useContext(DatabaseContext);
+
+  const [root, setRoot] = useState(null);
+
+  const router = useRouter();
+  const { id }: any = router.query;
+
+  const fetchRoot = useCallback(async () => {
+    const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
+    setRoot(result[0]);
+  }, [db, id]);
+
+  useEffect(() => {
+    fetchRoot().catch(console.error);
+  }, [fetchRoot]);
+
+  return (
+    <div className="scrollbar-hide flex h-full flex-col overflow-y-auto py-5">
+      <div className="flex h-min min-h-min w-full select-text flex-col px-3">{root && <Content data={root} />}</div>
+      <div>
+        <FormBasic />
+      </div>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
+    </BaseLayout>
+  );
+};