From 41b12746a7f89cab58d8b5561a51f20403b980da Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 24 Sep 2023 09:13:42 +0700
Subject: [PATCH] wip

---
 src-tauri/Cargo.toml                  |  3 +--
 src-tauri/tauri.conf.json             |  3 +--
 src-tauri/tauri.macos.conf.json       |  1 +
 src/shared/notes/actions.tsx          |  4 ++--
 src/shared/notes/actions/more.tsx     |  4 ++--
 src/shared/notes/actions/reaction.tsx |  4 ++--
 src/shared/notes/actions/reply.tsx    |  4 ++--
 src/shared/notes/actions/repost.tsx   |  6 +++---
 src/shared/notes/actions/zap.tsx      |  4 ++--
 src/shared/notes/child.tsx            | 12 +++++------
 src/shared/notes/kinds/repost.tsx     | 10 ++++-----
 src/shared/notes/preview/video.tsx    |  2 +-
 src/shared/notes/wrapper.tsx          |  6 +++---
 src/shared/user.tsx                   | 30 +++++++++++++--------------
 src/shared/widgets/wrapper.tsx        |  8 +++----
 15 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 41e22308..5fb1f6d0 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -16,11 +16,10 @@ tauri-build = { version = "1.4", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4", features = [
+tauri = { version = "1.4", features = [ "macos-private-api",
   "window-close",
   "window-print",
   "window-create",
-  "macos-private-api",
   "fs-read-dir",
   "fs-read-file",
   "window-start-dragging",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 32ab8d23..b4299e4b 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -136,7 +136,6 @@
           "enableTauriAPI": true
         }
       ]
-    },
-    "macOSPrivateApi": true
+    }
   }
 }
diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json
index 443a00c7..1386b524 100644
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@@ -1,6 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "tauri": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "width": 400,
diff --git a/src/shared/notes/actions.tsx b/src/shared/notes/actions.tsx
index 1fcb29f5..080ab714 100644
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@@ -45,7 +45,7 @@ export function NoteActions({
                     to={`/notes/text/${id}`}
                     className="group inline-flex h-7 w-7 items-center justify-center"
                   >
-                    <FocusIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
+                    <FocusIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
                   </Link>
                 </Tooltip.Trigger>
                 <Tooltip.Portal>
@@ -68,7 +68,7 @@ export function NoteActions({
                     }
                     className="group inline-flex h-7 w-7 items-center justify-center"
                   >
-                    <ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
+                    <ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
                   </button>
                 </Tooltip.Trigger>
                 <Tooltip.Portal>
diff --git a/src/shared/notes/actions/more.tsx b/src/shared/notes/actions/more.tsx
index 2f2f05e3..d636c49e 100644
--- a/src/shared/notes/actions/more.tsx
+++ b/src/shared/notes/actions/more.tsx
@@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
           <DropdownMenu.Trigger asChild>
             <button
               type="button"
-              className="group ml-auto inline-flex h-7 w-7 items-center justify-center"
+              className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-white/80"
             >
-              <HorizontalDotsIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
+              <HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
             </button>
           </DropdownMenu.Trigger>
         </Tooltip.Trigger>
diff --git a/src/shared/notes/actions/reaction.tsx b/src/shared/notes/actions/reaction.tsx
index 17ba08e7..9548e5af 100644
--- a/src/shared/notes/actions/reaction.tsx
+++ b/src/shared/notes/actions/reaction.tsx
@@ -62,12 +62,12 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
       <Popover.Trigger asChild>
         <button
           type="button"
-          className="group inline-flex h-7 w-7 items-center justify-center"
+          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
         >
           {reaction ? (
             <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
           ) : (
-            <ReactionIcon className="h-5 w-5 text-white group-hover:text-red-400" />
+            <ReactionIcon className="h-5 w-5 text-white/80 group-hover:text-red-400" />
           )}
         </button>
       </Popover.Trigger>
diff --git a/src/shared/notes/actions/reply.tsx b/src/shared/notes/actions/reply.tsx
index d5bf9c33..fb2df6dd 100644
--- a/src/shared/notes/actions/reply.tsx
+++ b/src/shared/notes/actions/reply.tsx
@@ -21,9 +21,9 @@ export function NoteReply({
         <button
           type="button"
           onClick={() => setReply(id, pubkey, root)}
-          className="group inline-flex h-7 w-7 items-center justify-center"
+          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
         >
-          <ReplyIcon className="h-5 w-5 text-white group-hover:text-green-500" />
+          <ReplyIcon className="h-5 w-5 text-white/80 group-hover:text-green-500" />
         </button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
diff --git a/src/shared/notes/actions/repost.tsx b/src/shared/notes/actions/repost.tsx
index 7946588b..2fd29237 100644
--- a/src/shared/notes/actions/repost.tsx
+++ b/src/shared/notes/actions/repost.tsx
@@ -44,12 +44,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
           <AlertDialog.Trigger asChild>
             <button
               type="button"
-              className="group inline-flex h-7 w-7 items-center justify-center"
+              className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
             >
               <RepostIcon
                 className={twMerge(
-                  'h-5 w-5 group-hover:text-blue-400',
-                  isRepost ? 'text-blue-400' : 'text-white'
+                  'h-5 w-5 group-hover:text-blue-500',
+                  isRepost ? 'text-blue-500' : 'text-white/80'
                 )}
               />
             </button>
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index dff857f4..ebaabe9e 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -94,9 +94,9 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="group inline-flex h-7 w-7 items-center justify-center"
+          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
         >
-          <ZapIcon className="h-5 w-5 text-white group-hover:text-orange-400" />
+          <ZapIcon className="h-5 w-5 text-white/80 group-hover:text-orange-400" />
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
diff --git a/src/shared/notes/child.tsx b/src/shared/notes/child.tsx
index 64094616..2a6725be 100644
--- a/src/shared/notes/child.tsx
+++ b/src/shared/notes/child.tsx
@@ -56,8 +56,8 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
               Lume <span className="text-green-500">(System)</span>
             </h5>
           </div>
-          <div className="-mt-6 flex items-start gap-3">
-            <div className="w-11 shrink-0" />
+          <div className="-mt-5 flex items-start gap-3">
+            <div className="w-10 shrink-0" />
             <div>
               <div className="relative z-20 mt-1 flex-1 select-text">
                 <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
@@ -78,11 +78,11 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
 
   return (
     <>
-      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
-      <div className="mb-5 flex flex-col">
+      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+      <div className="mb-6 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-6 flex items-start gap-3">
-          <div className="w-11 shrink-0" />
+        <div className="-mt-5 flex items-start gap-3">
+          <div className="w-10 shrink-0" />
           <div className="relative z-20 flex-1">
             {renderKind(data)}
             <NoteActions id={data.id} pubkey={data.pubkey} root={root} />
diff --git a/src/shared/notes/kinds/repost.tsx b/src/shared/notes/kinds/repost.tsx
index 20edbcc5..f882aa86 100644
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@@ -64,15 +64,15 @@ export function Repost({
       <div className="h-min w-full px-3 pb-3">
         <div
           className={twMerge(
-            'relative flex flex-col gap-10 overflow-hidden rounded-xl px-3 py-3',
+            'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
             !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
           )}
         >
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
-            <div className="-mt-6 flex items-start gap-3">
-              <div className="w-11 shrink-0" />
+            <div className="-mt-5 flex items-start gap-3">
+              <div className="w-10 shrink-0" />
               <div className="relative z-20 flex-1">
                 {renderKind(embedEvent)}
                 <NoteActions id={embedEvent.id} pubkey={embedEvent.pubkey} />
@@ -141,7 +141,7 @@ export function Repost({
     <div className="h-min w-full px-3 pb-3">
       <div
         className={twMerge(
-          'relative flex flex-col gap-10 overflow-hidden rounded-xl px-3 py-3',
+          'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
           !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
         )}
       >
@@ -149,7 +149,7 @@ export function Repost({
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />
           <div className="-mt-2 flex items-start gap-3">
-            <div className="w-11 shrink-0" />
+            <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {renderKind(data)}
               <NoteActions id={data.id} pubkey={data.pubkey} />
diff --git a/src/shared/notes/preview/video.tsx b/src/shared/notes/preview/video.tsx
index c161fd74..183fa407 100644
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -16,7 +16,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
             <img
               src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
               alt={url}
-              className="h-auto w-full bg-white object-cover"
+              className="aspect-video h-full w-full bg-white object-cover"
             />
           }
         />
diff --git a/src/shared/notes/wrapper.tsx b/src/shared/notes/wrapper.tsx
index 7df469ec..3d6ff4ce 100644
--- a/src/shared/notes/wrapper.tsx
+++ b/src/shared/notes/wrapper.tsx
@@ -23,7 +23,7 @@ export function NoteWrapper({
     <div className="h-min w-full px-3 pb-3">
       <div
         className={twMerge(
-          'relative overflow-hidden rounded-xl px-3 py-3',
+          'relative overflow-hidden rounded-xl px-3 py-4',
           !lighter ? 'bg-white/10 backdrop-blur-xl' : 'bg-transparent'
         )}
       >
@@ -31,8 +31,8 @@ export function NoteWrapper({
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="-mt-6 flex items-start gap-3">
-            <div className="w-11 shrink-0" />
+          <div className="-mt-5 flex items-start gap-3">
+            <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {children}
               <NoteActions id={event.id} pubkey={event.pubkey} />
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index 5ed5c8b3..9bf7a764 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import { Link } from 'react-router-dom';
 import remarkGfm from 'remark-gfm';
 
-import { WorldIcon } from '@shared/icons';
+import { RepostIcon, WorldIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 import { NIP05 } from '@shared/nip05';
 
@@ -46,7 +46,7 @@ export const User = memo(function User({
 
     return (
       <div className="relative flex items-start gap-3">
-        <div className="relative z-10 h-11 w-11 shrink-0 animate-pulse overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
+        <div className="relative z-10 h-10 w-10 shrink-0 animate-pulse overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
         <div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
       </div>
     );
@@ -145,24 +145,24 @@ export const User = memo(function User({
 
   if (variant === 'repost') {
     return (
-      <>
-        <div className="flex gap-3">
+      <div className="flex gap-3">
+        <div className="inline-flex h-10 w-10 items-center justify-center">
+          <RepostIcon className="h-6 w-6 text-blue-500" />
+        </div>
+        <div className="inline-flex items-center gap-2">
           <Image
             src={user?.picture || user?.image}
             alt={pubkey}
-            className="relative z-20 inline-block h-11 w-11 rounded-lg"
+            className="relative z-20 inline-block h-6 w-6 rounded"
           />
           <div className="inline-flex items-baseline gap-1">
-            <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+            <h5 className="max-w-[10rem] truncate font-medium leading-none text-white/80">
               {user?.display_name || user?.name || displayNpub(pubkey, 16)}
             </h5>
-            <span className="font-semibold text-fuchsia-500">reposted</span>
-            <span className="leading-none text-white/50">·</span>
-            <span className="leading-none text-white/50">{createdAt}</span>
+            <span className="text-blue-500">reposted</span>
           </div>
         </div>
-        <div className="absolute left-[28px] top-16 h-6 w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
-      </>
+      </div>
     );
   }
 
@@ -172,7 +172,7 @@ export const User = memo(function User({
         <Image
           src={user?.picture || user?.image}
           alt={pubkey}
-          className="relative z-20 inline-block h-11 w-11 rounded-lg"
+          className="relative z-20 inline-block h-10 w-10 rounded-lg"
         />
         <div className="flex flex-1 flex-col gap-2">
           <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
@@ -194,12 +194,12 @@ export const User = memo(function User({
         <Popover.Trigger asChild>
           <button
             type="button"
-            className="relative z-40 h-11 w-11 shrink-0 overflow-hidden"
+            className="relative z-40 h-10 w-10 shrink-0 overflow-hidden"
           >
             <Image
               src={user?.picture || user?.image}
               alt={pubkey}
-              className="h-11 w-11 rounded-lg object-cover"
+              className="h-10 w-10 rounded-lg object-cover"
             />
           </button>
         </Popover.Trigger>
@@ -220,7 +220,7 @@ export const User = memo(function User({
             <Image
               src={user?.picture || user?.image}
               alt={pubkey}
-              className="h-11 w-11 shrink-0 rounded-lg object-cover"
+              className="h-10 w-10 shrink-0 rounded-lg object-cover"
             />
             <div className="flex flex-1 flex-col gap-2">
               <div className="inline-flex flex-col gap-1">
diff --git a/src/shared/widgets/wrapper.tsx b/src/shared/widgets/wrapper.tsx
index 72e8587f..0a3ce978 100644
--- a/src/shared/widgets/wrapper.tsx
+++ b/src/shared/widgets/wrapper.tsx
@@ -9,19 +9,19 @@ export function WidgetWrapper({
   children: ReactNode;
   className?: string;
 }) {
-  const [width, setWidth] = useState(400);
+  const [width, setWidth] = useState(420);
 
   return (
     <Resizable
       size={{ width: width, height: '100vh' }}
       onResizeStart={(e) => e.preventDefault()}
-      onResizeStop={(e, direction, ref, d) => {
+      onResizeStop={(_e, _direction, _ref, d) => {
         setWidth((prevWidth) => prevWidth + d.width);
       }}
-      minWidth={400}
+      minWidth={420}
       minHeight={'100vh'}
       className={twMerge(
-        'relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl',
+        'relative shrink-0 grow-0 bg-white/10 backdrop-blur-xl',
         className
       )}
       enable={{ right: true }}