From 09380e4fef77445dfa35a2aba7900e37a13a8e6e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 8 May 2023 12:18:48 +0700
Subject: [PATCH] add nip-94 to newsfeed

---
 src/app/inital-data/pages/index.page.tsx         | 14 +++++++++++++-
 src/app/note/components/base.tsx                 |  6 ++++--
 src/app/note/components/file.tsx                 | 16 ----------------
 .../note/components/{content.tsx => kind1.tsx}   |  8 ++++----
 src/app/note/components/kind1063.tsx             | 15 +++++++++++++++
 src/app/note/components/mentions/note.tsx        |  8 ++++----
 src/app/note/components/parent.tsx               |  8 ++++----
 src/app/note/components/preview/image.tsx        |  7 +------
 src/app/note/components/replies/item.tsx         |  4 ++--
 src/app/note/components/replies/list.tsx         |  2 +-
 src/app/note/components/rootNote.tsx             | 10 +++++-----
 src/app/note/components/skeleton.tsx             |  2 +-
 src/app/note/pages/index.page.tsx                |  4 ++--
 src/shared/image.tsx                             |  4 +++-
 src/utils/storage.tsx                            |  2 +-
 15 files changed, 60 insertions(+), 50 deletions(-)
 delete mode 100644 src/app/note/components/file.tsx
 rename src/app/note/components/{content.tsx => kind1.tsx} (91%)
 create mode 100644 src/app/note/components/kind1063.tsx

diff --git a/src/app/inital-data/pages/index.page.tsx b/src/app/inital-data/pages/index.page.tsx
index 98f71802..0a4ba408 100644
--- a/src/app/inital-data/pages/index.page.tsx
+++ b/src/app/inital-data/pages/index.page.tsx
@@ -59,7 +59,7 @@ export function Page() {
 
       // kind 1 (notes) query
       query.push({
-        kinds: [1, 6],
+        kinds: [1, 6, 1063],
         authors: follows,
         since: sinceNotes,
         until: dateToUnix(now.current),
@@ -140,6 +140,18 @@ export function Page() {
                 addToBlacklist(account.id, event.tags[0][1], 44, 1);
               }
               break;
+            case 1063:
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                ''
+              );
+              break;
             // long post
             case 30023:
               // insert event to local database
diff --git a/src/app/note/components/base.tsx b/src/app/note/components/base.tsx
index 0fb6ae6c..7a61f63d 100644
--- a/src/app/note/components/base.tsx
+++ b/src/app/note/components/base.tsx
@@ -1,4 +1,5 @@
-import { NoteContent } from '@lume/app/note/components/content';
+import { Kind1 } from '@lume/app/note/components/kind1';
+import { Kind1063 } from '@lume/app/note/components/kind1063';
 import NoteMetadata from '@lume/app/note/components/metadata';
 import { NoteParent } from '@lume/app/note/components/parent';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
@@ -25,7 +26,8 @@ export const NoteBase = ({ event }: { event: any }) => {
         <div className="flex flex-col">
           <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
           <div className="mt-3 pl-[46px]">
-            <NoteContent content={content} />
+            {event.kind === 1 && <Kind1 content={content} />}
+            {event.kind === 1063 && <Kind1063 metadata={event.tags} />}
             <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
           </div>
         </div>
diff --git a/src/app/note/components/file.tsx b/src/app/note/components/file.tsx
deleted file mode 100644
index 14bf7afe..00000000
--- a/src/app/note/components/file.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Image } from '@lume/shared/image';
-
-export default function NoteFile({ url }: { url: string }) {
-  return (
-    <div className="mt-3 grid h-full w-full grid-cols-3">
-      <div className="col-span-3">
-        <Image
-          src={url}
-          alt="image"
-          className="h-auto w-full rounded-lg object-cover"
-          style={{ contentVisibility: 'auto' }}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/note/components/content.tsx b/src/app/note/components/kind1.tsx
similarity index 91%
rename from src/app/note/components/content.tsx
rename to src/app/note/components/kind1.tsx
index 61714f88..d6e7659d 100644
--- a/src/app/note/components/content.tsx
+++ b/src/app/note/components/kind1.tsx
@@ -6,7 +6,7 @@ import VideoPreview from '@lume/app/note/components/preview/video';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-export const NoteContent = ({ content }: { content: any }) => {
+export const Kind1 = ({ content }: { content: any }) => {
   return (
     <>
       <ReactMarkdown
@@ -21,10 +21,10 @@ export const NoteContent = ({ content }: { content: any }) => {
       </ReactMarkdown>
       {Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
       {Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
-      {!Array.isArray(content.notes) && !content.notes.length ? (
-        <></>
-      ) : (
+      {Array.isArray(content.notes) && content.notes.length ? (
         content.notes.map((note: string) => <MentionNote key={note} id={note} />)
+      ) : (
+        <></>
       )}
     </>
   );
diff --git a/src/app/note/components/kind1063.tsx b/src/app/note/components/kind1063.tsx
new file mode 100644
index 00000000..93e16cd2
--- /dev/null
+++ b/src/app/note/components/kind1063.tsx
@@ -0,0 +1,15 @@
+import { Image } from '@lume/shared/image';
+
+function isImage(url: string) {
+  return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
+}
+
+export const Kind1063 = ({ metadata }: { metadata: string[] }) => {
+  const url = metadata[0][1];
+
+  return (
+    <div className="mt-3">
+      {isImage(url) && <Image src={url} alt="image" className="h-auto w-full rounded-lg object-cover" />}
+    </div>
+  );
+};
diff --git a/src/app/note/components/mentions/note.tsx b/src/app/note/components/mentions/note.tsx
index 570bf5f4..df548c7c 100644
--- a/src/app/note/components/mentions/note.tsx
+++ b/src/app/note/components/mentions/note.tsx
@@ -1,5 +1,5 @@
-import { NoteContent } from '@lume/app/note/components/content';
-import NoteFile from '@lume/app/note/components/file';
+import { Kind1 } from '@lume/app/note/components/kind1';
+import { Kind1063 } from '@lume/app/note/components/kind1063';
 import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { NoteWrapper } from '@lume/app/note/components/wrapper';
@@ -45,8 +45,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
           <div className="mt-1 pl-[46px]">
-            {kind1 && <NoteContent content={kind1} />}
-            {kind1063 && <NoteFile url={kind1063[0][1]} />}
+            {kind1 && <Kind1 content={kind1} />}
+            {kind1063 && <Kind1063 metadata={kind1063} />}
           </div>
         </>
       ) : (
diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx
index f930ec74..91219c0e 100644
--- a/src/app/note/components/parent.tsx
+++ b/src/app/note/components/parent.tsx
@@ -1,5 +1,5 @@
-import { NoteContent } from '@lume/app/note/components/content';
-import NoteFile from '@lume/app/note/components/file';
+import { Kind1 } from '@lume/app/note/components/kind1';
+import { Kind1063 } from '@lume/app/note/components/kind1063';
 import NoteMetadata from '@lume/app/note/components/metadata';
 import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
@@ -46,8 +46,8 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
           <div className="mt-3 pl-[46px]">
-            {kind1 && <NoteContent content={kind1} />}
-            {kind1063 && <NoteFile url={kind1063[0][1]} />}
+            {kind1 && <Kind1 content={kind1} />}
+            {kind1063 && <Kind1063 metadata={kind1063} />}
             <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
           </div>
         </>
diff --git a/src/app/note/components/preview/image.tsx b/src/app/note/components/preview/image.tsx
index 7a03c5fa..34c78081 100644
--- a/src/app/note/components/preview/image.tsx
+++ b/src/app/note/components/preview/image.tsx
@@ -4,12 +4,7 @@ export default function ImagePreview({ urls }: { urls: string[] }) {
   return (
     <div className="mt-3 grid h-full w-full grid-cols-3">
       <div className="col-span-3">
-        <Image
-          src={urls[0]}
-          alt="image"
-          className="h-auto w-full rounded-lg object-cover"
-          style={{ contentVisibility: 'auto' }}
-        />
+        <Image src={urls[0]} alt="image" className="h-auto w-full rounded-lg object-cover" />
       </div>
     </div>
   );
diff --git a/src/app/note/components/replies/item.tsx b/src/app/note/components/replies/item.tsx
index 0a557643..83bb549f 100644
--- a/src/app/note/components/replies/item.tsx
+++ b/src/app/note/components/replies/item.tsx
@@ -1,4 +1,4 @@
-import { NoteContent } from '@lume/app/note/components/content';
+import { Kind1 } from '@lume/app/note/components/kind1';
 import NoteReplyUser from '@lume/app/note/components/user/reply';
 import { noteParser } from '@lume/utils/parser';
 
@@ -10,7 +10,7 @@ export default function Reply({ data }: { data: any }) {
       <div className="flex flex-col">
         <NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-[18px] pl-[46px]">
-          <NoteContent content={content} />
+          <Kind1 content={content} />
         </div>
       </div>
     </div>
diff --git a/src/app/note/components/replies/list.tsx b/src/app/note/components/replies/list.tsx
index 6bd25681..e00f54ff 100644
--- a/src/app/note/components/replies/list.tsx
+++ b/src/app/note/components/replies/list.tsx
@@ -17,7 +17,7 @@ export default function RepliesList({ id }: { id: string }) {
         {
           '#e': [key],
           since: 0,
-          kinds: [1],
+          kinds: [1, 1063],
           limit: 20,
         },
       ],
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index 7894a183..28835963 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/src/app/note/components/rootNote.tsx
@@ -1,5 +1,5 @@
-import { NoteContent } from '@lume/app/note/components/content';
-import NoteFile from '@lume/app/note/components/file';
+import { Kind1 } from '@lume/app/note/components/kind1';
+import { Kind1063 } from '@lume/app/note/components/kind1063';
 import NoteMetadata from '@lume/app/note/components/metadata';
 import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
@@ -66,7 +66,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
       <div onClick={(e) => openNote(e)} className="flex flex-col px-3">
         <NoteDefaultUser pubkey={parseFallback.pubkey} time={parseFallback.created_at} />
         <div className="mt-3 pl-[46px]">
-          <NoteContent content={contentFallback} />
+          <Kind1 content={contentFallback} />
           <NoteMetadata id={parseFallback.id} eventPubkey={parseFallback.pubkey} />
         </div>
       </div>
@@ -79,8 +79,8 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
           <div className="mt-3 pl-[46px]">
-            {kind1 && <NoteContent content={kind1} />}
-            {kind1063 && <NoteFile url={kind1063[0][1]} />}
+            {kind1 && <Kind1 content={kind1} />}
+            {kind1063 && <Kind1063 metadata={kind1063} />}
             <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
           </div>
         </>
diff --git a/src/app/note/components/skeleton.tsx b/src/app/note/components/skeleton.tsx
index 16ab45d4..9540364a 100644
--- a/src/app/note/components/skeleton.tsx
+++ b/src/app/note/components/skeleton.tsx
@@ -1,6 +1,6 @@
 export const NoteSkeleton = () => {
   return (
-    <div className="flex h-min flex-col">
+    <div className="flex h-min flex-col pb-3">
       <div className="flex items-center gap-2.5">
         <div className="relative h-9 w-9 shrink overflow-hidden rounded-md bg-zinc-700" />
         <div className="flex flex-col gap-0.5">
diff --git a/src/app/note/pages/index.page.tsx b/src/app/note/pages/index.page.tsx
index c75cf465..7e89034e 100644
--- a/src/app/note/pages/index.page.tsx
+++ b/src/app/note/pages/index.page.tsx
@@ -1,4 +1,4 @@
-import { NoteContent } from '@lume/app/note/components/content';
+import { Kind1 } from '@lume/app/note/components/kind1';
 import NoteMetadata from '@lume/app/note/components/metadata';
 import RepliesList from '@lume/app/note/components/replies/list';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
@@ -69,7 +69,7 @@ export function Page() {
               <div className="px-3 pt-3">
                 <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
                 <div className="mt-3">
-                  <NoteContent content={content} />
+                  <Kind1 content={content} />
                   <NoteMetadata id={noteID} eventPubkey={data.pubkey} />
                 </div>
               </div>
diff --git a/src/shared/image.tsx b/src/shared/image.tsx
index f50e8e41..8da699f5 100644
--- a/src/shared/image.tsx
+++ b/src/shared/image.tsx
@@ -5,5 +5,7 @@ export const Image = (props) => {
     event.currentTarget.src = DEFAULT_AVATAR;
   };
 
-  return <img {...props} loading="lazy" decoding="async" onError={addImageFallback} />;
+  return (
+    <img {...props} loading="lazy" decoding="async" onError={addImageFallback} style={{ contentVisibility: 'auto' }} />
+  );
 };
diff --git a/src/utils/storage.tsx b/src/utils/storage.tsx
index ad1ec394..0520c244 100644
--- a/src/utils/storage.tsx
+++ b/src/utils/storage.tsx
@@ -93,7 +93,7 @@ export async function getNotes(time: number, limit: number, offset: number) {
 
   const notes: any = { data: null, nextCursor: 0 };
   const query: any = await db.select(
-    `SELECT * FROM notes WHERE created_at <= "${time}" AND kind IN (1, 6) GROUP BY parent_id ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}";`
+    `SELECT * FROM notes WHERE created_at <= "${time}" AND kind IN (1, 6, 1063) GROUP BY parent_id ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}";`
   );
 
   notes['data'] = query;