From 473f474e2045be3fa7e0cbeed9930d692ceef4ef Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 6 May 2023 16:59:06 +0700
Subject: [PATCH] redesign daily page

---
 src/app/daily/layout.tsx                    |  2 +-
 src/app/daily/pages/index.page.tsx          | 60 +++++++++++----------
 src/app/note/components/base.tsx            | 23 ++++----
 src/app/note/components/metadata.tsx        |  2 +-
 src/app/note/components/metadata/like.tsx   |  2 +-
 src/app/note/components/metadata/reply.tsx  |  2 +-
 src/app/note/components/metadata/repost.tsx |  2 +-
 src/app/note/components/parent.tsx          | 27 +++++-----
 src/app/note/components/preview/image.tsx   |  2 +-
 src/app/note/components/quote.tsx           | 27 ++++------
 src/app/note/components/quoteRepost.tsx     | 11 ++--
 src/app/note/components/rootNote.tsx        |  4 +-
 src/shared/appHeader.tsx                    |  2 +-
 13 files changed, 80 insertions(+), 86 deletions(-)

diff --git a/src/app/daily/layout.tsx b/src/app/daily/layout.tsx
index bb0a7235..864acfa6 100644
--- a/src/app/daily/layout.tsx
+++ b/src/app/daily/layout.tsx
@@ -20,7 +20,7 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
             <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 className="col-span-3 overflow-hidden xl:col-span-4">{children}</div>
           </div>
         </div>
       </div>
diff --git a/src/app/daily/pages/index.page.tsx b/src/app/daily/pages/index.page.tsx
index 18a38919..ee0a4e4e 100644
--- a/src/app/daily/pages/index.page.tsx
+++ b/src/app/daily/pages/index.page.tsx
@@ -45,46 +45,48 @@ export function Page() {
   }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
 
   return (
-    <div className="flex h-full flex-col justify-between gap-4">
+    <div
+      ref={parentRef}
+      className="scrollbar-hide flex h-full flex-col justify-between gap-1.5 overflow-y-auto"
+      style={{ contain: 'strict' }}
+    >
       <div className="flex h-11 w-full shrink-0 items-center justify-between border-b border-zinc-800"></div>
-      <div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+      <div className="flex-1">
         {status === 'loading' ? (
           <Skeleton count={5} containerClassName="flex-1" />
         ) : status === 'error' ? (
           <div>{error.message}</div>
         ) : (
-          <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
+          <div
+            className="relative w-full"
+            style={{
+              height: `${rowVirtualizer.getTotalSize()}px`,
+            }}
+          >
             <div
-              className="relative w-full"
+              className="absolute left-0 top-0 w-full"
               style={{
-                height: `${rowVirtualizer.getTotalSize()}px`,
+                transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
               }}
             >
-              <div
-                className="absolute left-0 top-0 w-full"
-                style={{
-                  transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
-                }}
-              >
-                {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                  const note = allRows[virtualRow.index];
-                  if (note) {
-                    if (note.kind === 1) {
-                      return (
-                        <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
-                          <NoteBase key={note.event_id} event={note} />
-                        </div>
-                      );
-                    } else {
-                      return (
-                        <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
-                          <NoteQuoteRepost key={note.event_id} event={note} />
-                        </div>
-                      );
-                    }
+              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                const note = allRows[virtualRow.index];
+                if (note) {
+                  if (note.kind === 1) {
+                    return (
+                      <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
+                        <NoteBase key={note.event_id} event={note} />
+                      </div>
+                    );
+                  } else {
+                    return (
+                      <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
+                        <NoteQuoteRepost key={note.event_id} event={note} />
+                      </div>
+                    );
                   }
-                })}
-              </div>
+                }
+              })}
             </div>
           </div>
         )}
diff --git a/src/app/note/components/base.tsx b/src/app/note/components/base.tsx
index 64d9b9bc..de607f25 100644
--- a/src/app/note/components/base.tsx
+++ b/src/app/note/components/base.tsx
@@ -19,18 +19,17 @@ export default function NoteBase({ event }: { event: any }) {
   };
 
   return (
-    <div
-      onClick={(e) => openNote(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"
-    >
-      {event.parent_id && event.parent_id !== event.event_id && (
-        <NoteParent key={event.parent_id} id={event.parent_id} />
-      )}
-      <div className="relative z-10 flex flex-col">
-        <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
-        <div className="mt-1 pl-[52px]">
-          <NoteContent content={content} />
-          <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
+    <div onClick={(e) => openNote(e)} className="h-min w-full select-text px-3 py-1.5">
+      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-5 shadow-input shadow-black/20">
+        {event.parent_id && event.parent_id !== event.event_id && (
+          <NoteParent key={event.parent_id} id={event.parent_id} />
+        )}
+        <div className="flex flex-col">
+          <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
+          <div className="mt-1 pl-[52px]">
+            <NoteContent content={content} />
+            <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/note/components/metadata.tsx b/src/app/note/components/metadata.tsx
index 0b5e20c5..1109799b 100644
--- a/src/app/note/components/metadata.tsx
+++ b/src/app/note/components/metadata.tsx
@@ -51,7 +51,7 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
   });
 
   return (
-    <div className="mt-5 flex items-center gap-16">
+    <div className="mt-5 flex items-center gap-16 border-t border-zinc-800 pt-5">
       <NoteReply id={id} replies={replies} />
       <NoteLike id={id} pubkey={eventPubkey} likes={likes} />
       <NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
diff --git a/src/app/note/components/metadata/like.tsx b/src/app/note/components/metadata/like.tsx
index c052e85e..a9ea0881 100644
--- a/src/app/note/components/metadata/like.tsx
+++ b/src/app/note/components/metadata/like.tsx
@@ -44,7 +44,7 @@ export default function NoteLike({ id, pubkey, likes }: { id: string; pubkey: st
 
   return (
     <button type="button" onClick={(e) => submitEvent(e)} className="group inline-flex w-min items-center gap-1.5">
-      <LikeIcon width={20} height={20} className="text-zinc-400 group-hover:text-rose-400" />
+      <LikeIcon width={16} height={16} className="text-zinc-400 group-hover:text-rose-400" />
       <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
     </button>
   );
diff --git a/src/app/note/components/metadata/reply.tsx b/src/app/note/components/metadata/reply.tsx
index bafc362c..0a4f6f93 100644
--- a/src/app/note/components/metadata/reply.tsx
+++ b/src/app/note/components/metadata/reply.tsx
@@ -56,7 +56,7 @@ export default function NoteReply({ id, replies }: { id: string; replies: number
   return (
     <>
       <button type="button" onClick={() => openModal()} className="group inline-flex w-min items-center gap-1.5">
-        <ReplyIcon width={20} height={20} className="text-zinc-400 group-hover:text-green-400" />
+        <ReplyIcon width={16} height={16} className="text-zinc-400 group-hover:text-green-400" />
         <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
       </button>
       <Transition appear show={isOpen} as={Fragment}>
diff --git a/src/app/note/components/metadata/repost.tsx b/src/app/note/components/metadata/repost.tsx
index 7b907d7a..9a65e180 100644
--- a/src/app/note/components/metadata/repost.tsx
+++ b/src/app/note/components/metadata/repost.tsx
@@ -44,7 +44,7 @@ export default function NoteRepost({ id, pubkey, reposts }: { id: string; pubkey
 
   return (
     <button type="button" onClick={(e) => submitEvent(e)} className="group inline-flex w-min items-center gap-1.5">
-      <RepostIcon width={20} height={20} className="text-zinc-400 group-hover:text-blue-400" />
+      <RepostIcon width={16} height={16} className="text-zinc-400 group-hover:text-blue-400" />
       <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
     </button>
   );
diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx
index b8723843..14b95540 100644
--- a/src/app/note/components/parent.tsx
+++ b/src/app/note/components/parent.tsx
@@ -38,21 +38,18 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const content = !error && data ? noteParser(data) : null;
 
   return (
-    <div className="relative 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>
-      <div className="relative z-10 flex flex-col">
-        {data ? (
-          <>
-            <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-            <div className="mt-1 pl-[52px]">
-              <NoteContent content={content} />
-              <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
-            </div>
-          </>
-        ) : (
-          <Skeleton baseColor="#27272a" containerClassName="flex-1" />
-        )}
-      </div>
+    <div className="flex flex-col pb-5">
+      {data ? (
+        <>
+          <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
+          <div className="mt-1 pl-[52px]">
+            <NoteContent content={content} />
+            <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
+          </div>
+        </>
+      ) : (
+        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+      )}
     </div>
   );
 });
diff --git a/src/app/note/components/preview/image.tsx b/src/app/note/components/preview/image.tsx
index 47204a09..7a03c5fa 100644
--- a/src/app/note/components/preview/image.tsx
+++ b/src/app/note/components/preview/image.tsx
@@ -3,7 +3,7 @@ import { Image } from '@lume/shared/image';
 export default function ImagePreview({ urls }: { urls: string[] }) {
   return (
     <div className="mt-3 grid h-full w-full grid-cols-3">
-      <div className="col-span-2">
+      <div className="col-span-3">
         <Image
           src={urls[0]}
           alt="image"
diff --git a/src/app/note/components/quote.tsx b/src/app/note/components/quote.tsx
index 2ea0d8c3..c89db377 100644
--- a/src/app/note/components/quote.tsx
+++ b/src/app/note/components/quote.tsx
@@ -47,22 +47,17 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   };
 
   return (
-    <div
-      onClick={(e) => openNote(e)}
-      className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3"
-    >
-      <div className="relative z-10 flex flex-col">
-        {data ? (
-          <>
-            <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-            <div className="mt-1 pl-[52px]">
-              <NoteContent content={content} />
-            </div>
-          </>
-        ) : (
-          <Skeleton baseColor="#27272a" containerClassName="flex-1" />
-        )}
-      </div>
+    <div onClick={(e) => openNote(e)} className="mb-2 mt-3 flex flex-col rounded-lg border border-zinc-800 p-2 py-3">
+      {data ? (
+        <>
+          <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
+          <div className="mt-1 pl-[52px]">
+            <NoteContent content={content} />
+          </div>
+        </>
+      ) : (
+        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+      )}
     </div>
   );
 });
diff --git a/src/app/note/components/quoteRepost.tsx b/src/app/note/components/quoteRepost.tsx
index 9250f059..2a03125b 100644
--- a/src/app/note/components/quoteRepost.tsx
+++ b/src/app/note/components/quoteRepost.tsx
@@ -8,12 +8,13 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event:
   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>
-        <NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
+    <div className="h-min w-full select-text px-3 py-1.5">
+      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-5 shadow-input shadow-black/20">
+        <div className="pb-5">
+          <NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
+        </div>
+        <RootNote id={rootID} fallback={event.content} />
       </div>
-      <RootNote id={rootID} fallback={event.content} />
     </div>
   );
 });
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index c02a39ae..5c39c520 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/src/app/note/components/rootNote.tsx
@@ -61,7 +61,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
     const contentFallback = noteParser(parseFallback);
 
     return (
-      <div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
+      <div onClick={(e) => openNote(e)} className="flex flex-col">
         <NoteDefaultUser pubkey={parseFallback.pubkey} time={parseFallback.created_at} />
         <div className="mt-1 pl-[52px]">
           <NoteContent content={contentFallback} />
@@ -72,7 +72,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
   }
 
   return (
-    <div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
+    <div onClick={(e) => openNote(e)} className="flex flex-col">
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
diff --git a/src/shared/appHeader.tsx b/src/shared/appHeader.tsx
index be5d5b87..9ad4187c 100644
--- a/src/shared/appHeader.tsx
+++ b/src/shared/appHeader.tsx
@@ -17,7 +17,7 @@ export default function AppHeader() {
 
   return (
     <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
-      <div className="flex w-full items-center justify-center gap-2">
+      <div data-tauri-drag-region className="flex w-full items-center justify-center gap-2">
         <div className="flex h-full items-center gap-2">
           <button
             onClick={() => goBack()}