feat: improve single-column layout

src/components/NewNotesButton/index.tsx

@@ -2,6 +2,7 @@ import { Button } from '@/components/ui/button'
 import { SimpleUserAvatar } from '@/components/UserAvatar'
 import { cn } from '@/lib/utils'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { hasBackgroundAudioAtom } from '@/services/media-manager.service'
 import { useAtomValue } from 'jotai'
 import { ArrowUp } from 'lucide-react'
@@ -17,6 +18,7 @@ export default function NewNotesButton({
   onClick?: () => void
 }) {
   const { t } = useTranslation()
+  const { enableSingleColumnLayout } = useUserPreferences()
   const { isSmallScreen } = useScreenSize()
   const hasBackgroundAudio = useAtomValue(hasBackgroundAudioAtom)
   const pubkeys = useMemo(() => {
@@ -36,7 +38,7 @@ export default function NewNotesButton({
         <div
           className={cn(
             'w-full flex justify-center z-40 pointer-events-none',
-            isSmallScreen ? 'fixed' : 'absolute'
+            enableSingleColumnLayout ? 'sticky' : 'absolute'
           )}
           style={{
             bottom: isSmallScreen

src/components/NoteList/index.tsx

@@ -327,9 +327,6 @@ const NoteList = forwardRef(
 
     return (
       <div>
-        {filteredNewEvents.length > 0 && (
-          <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
-        )}
         <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
         {supportTouch ? (
           <PullToRefresh
@@ -345,6 +342,9 @@ const NoteList = forwardRef(
           list
         )}
         <div className="h-40" />
+        {filteredNewEvents.length > 0 && (
+          <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
+        )}
       </div>
     )
   }

src/components/ScrollToTopButton/index.tsx

@@ -2,9 +2,11 @@ import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { hasBackgroundAudioAtom } from '@/services/media-manager.service'
 import { useAtomValue } from 'jotai'
 import { ChevronUp } from 'lucide-react'
+import { useMemo } from 'react'
 
 export default function ScrollToTopButton({
   scrollAreaRef,
@@ -13,14 +15,37 @@ export default function ScrollToTopButton({
   scrollAreaRef?: React.RefObject<HTMLDivElement>
   className?: string
 }) {
-  const { isSmallScreen } = useScreenSize()
+  const { enableSingleColumnLayout } = useUserPreferences()
   const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
+  const { isSmallScreen } = useScreenSize()
   const hasBackgroundAudio = useAtomValue(hasBackgroundAudioAtom)
-  const visible = !deepBrowsing && lastScrollTop > 800
+  const visible = useMemo(() => !deepBrowsing && lastScrollTop > 800, [deepBrowsing, lastScrollTop])
 
   const handleScrollToTop = () => {
     if (!scrollAreaRef) {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
+      // scroll to top with custom animation
+      const startPosition = window.pageYOffset || document.documentElement.scrollTop
+      const duration = 500
+      const startTime = performance.now()
+
+      const easeInOutQuad = (t: number) => {
+        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+      }
+
+      const scroll = (currentTime: number) => {
+        const elapsed = currentTime - startTime
+        const progress = Math.min(elapsed / duration, 1)
+        const ease = easeInOutQuad(progress)
+
+        const position = startPosition * (1 - ease)
+        window.scrollTo(0, position)
+
+        if (progress < 1) {
+          requestAnimationFrame(scroll)
+        }
+      }
+
+      requestAnimationFrame(scroll)
       return
     }
     scrollAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
@@ -29,7 +54,9 @@ export default function ScrollToTopButton({
   return (
     <div
       className={cn(
-        `fixed sm:sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`,
+        'z-30 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700',
+        enableSingleColumnLayout ? 'sticky' : 'fixed',
+        visible ? '' : 'opacity-0',
         className
       )}
       style={{

src/components/Settings/index.tsx

@@ -0,0 +1,156 @@
+import AboutInfoDialog from '@/components/AboutInfoDialog'
+import Donation from '@/components/Donation'
+import {
+  toAppearanceSettings,
+  toGeneralSettings,
+  toPostSettings,
+  toRelaySettings,
+  toTranslation,
+  toWallet
+} from '@/lib/link'
+import { cn } from '@/lib/utils'
+import { useSecondaryPage } from '@/PageManager'
+import { useNostr } from '@/providers/NostrProvider'
+import {
+  Check,
+  ChevronRight,
+  Copy,
+  Info,
+  KeyRound,
+  Languages,
+  Palette,
+  PencilLine,
+  Server,
+  Settings2,
+  Wallet
+} from 'lucide-react'
+import { forwardRef, HTMLProps, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function Settings() {
+  const { t } = useTranslation()
+  const { pubkey, nsec, ncryptsec } = useNostr()
+  const { push } = useSecondaryPage()
+  const [copiedNsec, setCopiedNsec] = useState(false)
+  const [copiedNcryptsec, setCopiedNcryptsec] = useState(false)
+
+  return (
+    <div>
+      <SettingItem className="clickable" onClick={() => push(toGeneralSettings())}>
+        <div className="flex items-center gap-4">
+          <Settings2 />
+          <div>{t('General')}</div>
+        </div>
+        <ChevronRight />
+      </SettingItem>
+      <SettingItem className="clickable" onClick={() => push(toAppearanceSettings())}>
+        <div className="flex items-center gap-4">
+          <Palette />
+          <div>{t('Appearance')}</div>
+        </div>
+        <ChevronRight />
+      </SettingItem>
+      <SettingItem className="clickable" onClick={() => push(toRelaySettings())}>
+        <div className="flex items-center gap-4">
+          <Server />
+          <div>{t('Relays')}</div>
+        </div>
+        <ChevronRight />
+      </SettingItem>
+      {!!pubkey && (
+        <SettingItem className="clickable" onClick={() => push(toTranslation())}>
+          <div className="flex items-center gap-4">
+            <Languages />
+            <div>{t('Translation')}</div>
+          </div>
+          <ChevronRight />
+        </SettingItem>
+      )}
+      {!!pubkey && (
+        <SettingItem className="clickable" onClick={() => push(toWallet())}>
+          <div className="flex items-center gap-4">
+            <Wallet />
+            <div>{t('Wallet')}</div>
+          </div>
+          <ChevronRight />
+        </SettingItem>
+      )}
+      {!!pubkey && (
+        <SettingItem className="clickable" onClick={() => push(toPostSettings())}>
+          <div className="flex items-center gap-4">
+            <PencilLine />
+            <div>{t('Post settings')}</div>
+          </div>
+          <ChevronRight />
+        </SettingItem>
+      )}
+      {!!nsec && (
+        <SettingItem
+          className="clickable"
+          onClick={() => {
+            navigator.clipboard.writeText(nsec)
+            setCopiedNsec(true)
+            setTimeout(() => setCopiedNsec(false), 2000)
+          }}
+        >
+          <div className="flex items-center gap-4">
+            <KeyRound />
+            <div>{t('Copy private key')} (nsec)</div>
+          </div>
+          {copiedNsec ? <Check /> : <Copy />}
+        </SettingItem>
+      )}
+      {!!ncryptsec && (
+        <SettingItem
+          className="clickable"
+          onClick={() => {
+            navigator.clipboard.writeText(ncryptsec)
+            setCopiedNcryptsec(true)
+            setTimeout(() => setCopiedNcryptsec(false), 2000)
+          }}
+        >
+          <div className="flex items-center gap-4">
+            <KeyRound />
+            <div>{t('Copy private key')} (ncryptsec)</div>
+          </div>
+          {copiedNcryptsec ? <Check /> : <Copy />}
+        </SettingItem>
+      )}
+      <AboutInfoDialog>
+        <SettingItem className="clickable">
+          <div className="flex items-center gap-4">
+            <Info />
+            <div>{t('About')}</div>
+          </div>
+          <div className="flex gap-2 items-center">
+            <div className="text-muted-foreground">
+              v{import.meta.env.APP_VERSION} ({import.meta.env.GIT_COMMIT})
+            </div>
+            <ChevronRight />
+          </div>
+        </SettingItem>
+      </AboutInfoDialog>
+      <div className="px-4 mt-4">
+        <Donation />
+      </div>
+    </div>
+  )
+}
+
+const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          'flex justify-between select-none items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+SettingItem.displayName = 'SettingItem'

src/components/Sidebar/SettingsButton.tsx

@@ -1,13 +1,21 @@
 import { toSettings } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
+import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { Settings } from 'lucide-react'
 import SidebarItem from './SidebarItem'
 
 export default function SettingsButton({ collapse }: { collapse: boolean }) {
+  const { current, navigate } = usePrimaryPage()
   const { push } = useSecondaryPage()
+  const { enableSingleColumnLayout } = useUserPreferences()
 
   return (
-    <SidebarItem title="Settings" onClick={() => push(toSettings())} collapse={collapse}>
+    <SidebarItem
+      title="Settings"
+      onClick={() => (enableSingleColumnLayout ? navigate('settings') : push(toSettings()))}
+      collapse={collapse}
+      active={enableSingleColumnLayout ? current === 'settings' : false}
+    >
       <Settings />
     </SidebarItem>
   )