From 1e3c74a28fd651ef68c3c3cf8e3c4d33ca6a1771 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Mon, 16 Dec 2024 23:04:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AboutInfoDialog/index.tsx       |  4 +++-
 .../src/components/AccountButton/ProfileButton.tsx |  2 +-
 .../src/components/NoteCard/ShortTextNoteCard.tsx  |  1 +
 .../src/components/NoteStats/NoteOptions/index.tsx | 14 +++-----------
 src/renderer/src/components/Sidebar/index.tsx      | 13 +++++--------
 src/renderer/src/components/ui/dialog.tsx          |  7 +------
 .../src/layouts/PrimaryPageLayout/index.tsx        |  6 +++---
 .../src/layouts/SecondaryPageLayout/index.tsx      |  6 +++++-
 .../src/pages/primary/NoteListPage/index.tsx       | 10 +++++++++-
 9 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/renderer/src/components/AboutInfoDialog/index.tsx b/src/renderer/src/components/AboutInfoDialog/index.tsx
index eca4c95..7bab714 100644
--- a/src/renderer/src/components/AboutInfoDialog/index.tsx
+++ b/src/renderer/src/components/AboutInfoDialog/index.tsx
@@ -15,7 +15,9 @@ export default function AboutInfoDialog({ children }: { children: React.ReactNod
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Jumble</DialogTitle>
-          <DialogDescription>yet another nostr client</DialogDescription>
+          <DialogDescription>
+            A beautiful nostr client focused on browsing relay feeds
+          </DialogDescription>
         </DialogHeader>
         <div>
           Made by{' '}
diff --git a/src/renderer/src/components/AccountButton/ProfileButton.tsx b/src/renderer/src/components/AccountButton/ProfileButton.tsx
index 21737e8..d23b203 100644
--- a/src/renderer/src/components/AccountButton/ProfileButton.tsx
+++ b/src/renderer/src/components/AccountButton/ProfileButton.tsx
@@ -32,7 +32,7 @@ export default function ProfileButton({
   if (variant === 'titlebar') {
     triggerComponent = (
       <button>
-        <Avatar className="ml-2 w-7 h-7 hover:opacity-90">
+        <Avatar className="w-7 h-7 hover:opacity-90">
           <AvatarImage src={avatar} />
           <AvatarFallback>
             <img src={defaultAvatar} />
diff --git a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
index ffa8149..776d613 100644
--- a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
+++ b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
@@ -35,6 +35,7 @@ export default function ShortTextNoteCard({
       <RepostDescription reposter={reposter} className="max-sm:hidden pl-4" />
       <div
         className={`hover:bg-muted/50 text-left cursor-pointer ${embedded ? 'p-2 sm:p-3 border rounded-lg' : 'px-4 py-3 sm:py-4 sm:border sm:rounded-lg max-sm:border-b'}`}
+        onClick={(e) => e.stopPropagation()}
       >
         <RepostDescription reposter={reposter} className="sm:hidden" />
         <Note
diff --git a/src/renderer/src/components/NoteStats/NoteOptions/index.tsx b/src/renderer/src/components/NoteStats/NoteOptions/index.tsx
index 7b40080..8ac72c5 100644
--- a/src/renderer/src/components/NoteStats/NoteOptions/index.tsx
+++ b/src/renderer/src/components/NoteStats/NoteOptions/index.tsx
@@ -8,8 +8,8 @@ import { getSharableEventId } from '@renderer/lib/event'
 import { Code, Copy, Ellipsis } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useState } from 'react'
-import RawEventDialog from './RawEventDialog'
 import { useTranslation } from 'react-i18next'
+import RawEventDialog from './RawEventDialog'
 
 export default function NoteOptions({ event }: { event: Event }) {
   const { t } = useTranslation()
@@ -26,20 +26,12 @@ export default function NoteOptions({ event }: { event: Event }) {
         </DropdownMenuTrigger>
         <DropdownMenuContent collisionPadding={8}>
           <DropdownMenuItem
-            onClick={(e) => {
-              e.stopPropagation()
-              navigator.clipboard.writeText('nostr:' + getSharableEventId(event))
-            }}
+            onClick={() => navigator.clipboard.writeText('nostr:' + getSharableEventId(event))}
           >
             <Copy />
             {t('copy embedded code')}
           </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={(e) => {
-              e.stopPropagation()
-              setIsRawEventDialogOpen(true)
-            }}
-          >
+          <DropdownMenuItem onClick={() => setIsRawEventDialogOpen(true)}>
             <Code />
             {t('raw event')}
           </DropdownMenuItem>
diff --git a/src/renderer/src/components/Sidebar/index.tsx b/src/renderer/src/components/Sidebar/index.tsx
index c1c4c75..69e0559 100644
--- a/src/renderer/src/components/Sidebar/index.tsx
+++ b/src/renderer/src/components/Sidebar/index.tsx
@@ -1,8 +1,6 @@
 import Logo from '@renderer/assets/Logo'
 import { Button } from '@renderer/components/ui/button'
 import { IS_ELECTRON } from '@renderer/lib/env'
-import { toHome } from '@renderer/lib/link'
-import { SecondaryPageLink } from '@renderer/PageManager'
 import { Info } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import AboutInfoDialog from '../AboutInfoDialog'
@@ -16,18 +14,17 @@ import SearchButton from '../SearchButton'
 export default function PrimaryPageSidebar() {
   const { t } = useTranslation()
   return (
-    <div className="draggable w-52 h-full shrink-0 hidden xl:flex flex-col pb-8 pt-10 pl-4 justify-between">
+    <div className="w-52 h-full shrink-0 hidden xl:flex flex-col pb-8 pt-10 pl-4 justify-between relative">
+      <div className="draggable absolute top-0 left-0 h-11 w-full" />
       <div className="space-y-2">
-        <div className="ml-4 mb-8 w-40">
-          <SecondaryPageLink to={toHome()}>
-            <Logo />
-          </SecondaryPageLink>
+        <div className="draggable ml-4 mb-8 w-40">
+          <Logo />
         </div>
         <PostButton variant="sidebar" />
         <RelaySettingsButton variant="sidebar" />
         <NotificationButton variant="sidebar" />
         <SearchButton variant="sidebar" />
-        <RefreshButton variant="sidebar" />
+        {IS_ELECTRON && <RefreshButton variant="sidebar" />}
         {!IS_ELECTRON && (
           <AboutInfoDialog>
             <Button variant="sidebar" size="sidebar">
diff --git a/src/renderer/src/components/ui/dialog.tsx b/src/renderer/src/components/ui/dialog.tsx
index 22442f2..99ae387 100644
--- a/src/renderer/src/components/ui/dialog.tsx
+++ b/src/renderer/src/components/ui/dialog.tsx
@@ -22,7 +22,6 @@ const DialogOverlay = React.forwardRef<
       'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
-    onClick={(e) => e.stopPropagation()}
     {...props}
   />
 ))
@@ -40,15 +39,11 @@ const DialogContent = React.forwardRef<
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 sm:border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
-      onClick={(e) => e.stopPropagation()}
       {...props}
     >
       {children}
       {!withoutClose && (
-        <DialogPrimitive.Close
-          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-          onClick={(e) => e.stopPropagation()}
-        >
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
diff --git a/src/renderer/src/layouts/PrimaryPageLayout/index.tsx b/src/renderer/src/layouts/PrimaryPageLayout/index.tsx
index b7eba7a..ff4e99e 100644
--- a/src/renderer/src/layouts/PrimaryPageLayout/index.tsx
+++ b/src/renderer/src/layouts/PrimaryPageLayout/index.tsx
@@ -9,7 +9,7 @@ import SearchButton from '@renderer/components/SearchButton'
 import ThemeToggle from '@renderer/components/ThemeToggle'
 import { Titlebar } from '@renderer/components/Titlebar'
 import { ScrollArea } from '@renderer/components/ui/scroll-area'
-import { isMacOS } from '@renderer/lib/env'
+import { IS_ELECTRON, isMacOS } from '@renderer/lib/env'
 import { cn } from '@renderer/lib/utils'
 import { useScreenSize } from '@renderer/providers/ScreenSizeProvider'
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
@@ -60,7 +60,7 @@ const PrimaryPageLayout = forwardRef(({ children }: { children?: React.ReactNode
     <ScrollArea
       ref={scrollAreaRef}
       className="h-full w-full"
-      scrollBarClassName="pt-9 max-sm:pt-0 xl:pt-0"
+      scrollBarClassName={`pt-9 xl:pt-0 ${isMacOS() ? 'max-sm:pt-20' : 'max-sm:pt-11'}`}
     >
       <PrimaryPageTitlebar visible={visible} />
       <div className={cn('sm:px-4 pb-4 pt-11 xl:pt-4', isMacOS() ? 'max-sm:pt-20' : '')}>
@@ -111,7 +111,7 @@ function PrimaryPageTitlebar({ visible = true }: { visible?: boolean }) {
         <SearchButton />
       </div>
       <div className="flex gap-2 items-center">
-        <RefreshButton />
+        {IS_ELECTRON && <RefreshButton />}
         <RelaySettingsButton />
         <NotificationButton />
       </div>
diff --git a/src/renderer/src/layouts/SecondaryPageLayout/index.tsx b/src/renderer/src/layouts/SecondaryPageLayout/index.tsx
index c60f343..6048277 100644
--- a/src/renderer/src/layouts/SecondaryPageLayout/index.tsx
+++ b/src/renderer/src/layouts/SecondaryPageLayout/index.tsx
@@ -51,7 +51,11 @@ export default function SecondaryPageLayout({
   }, [lastScrollTop])
 
   return (
-    <ScrollArea ref={scrollAreaRef} className="h-full" scrollBarClassName="pt-9">
+    <ScrollArea
+      ref={scrollAreaRef}
+      className="h-full"
+      scrollBarClassName={`sm:pt-9 ${isMacOS() ? 'pt-20' : 'pt-11'}`}
+    >
       <SecondaryPageTitlebar
         content={titlebarContent}
         hideBackButton={hideBackButton}
diff --git a/src/renderer/src/pages/primary/NoteListPage/index.tsx b/src/renderer/src/pages/primary/NoteListPage/index.tsx
index 40ef6af..639cfcf 100644
--- a/src/renderer/src/pages/primary/NoteListPage/index.tsx
+++ b/src/renderer/src/pages/primary/NoteListPage/index.tsx
@@ -5,10 +5,18 @@ import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui
 import { ScrollArea } from '@renderer/components/ui/scroll-area'
 import PrimaryPageLayout from '@renderer/layouts/PrimaryPageLayout'
 import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
+import { useEffect, useRef } from 'react'
 
 export default function NoteListPage() {
+  const layoutRef = useRef<{ scrollToTop: () => void }>(null)
   const { relayUrls } = useRelaySettings()
 
+  useEffect(() => {
+    if (layoutRef.current) {
+      layoutRef.current.scrollToTop()
+    }
+  }, [JSON.stringify(relayUrls)])
+
   if (!relayUrls.length) {
     return (
       <PrimaryPageLayout>
@@ -33,7 +41,7 @@ export default function NoteListPage() {
   }
 
   return (
-    <PrimaryPageLayout>
+    <PrimaryPageLayout ref={layoutRef}>
       <NoteList relayUrls={relayUrls} />
     </PrimaryPageLayout>
   )