feat: improve single-column layout

2025-10-19 18:41:22 +08:00
parent 1674671d7f
commit 936b15e5c2
13 changed files with 316 additions and 231 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,10 +24,10 @@ import { PageManager } from './PageManager'

 export default function App(): JSX.Element {
  return (
-    <UserPreferencesProvider>
-      <ThemeProvider>
-        <ContentPolicyProvider>
-          <ScreenSizeProvider>
+    <ScreenSizeProvider>
+      <UserPreferencesProvider>
+        <ThemeProvider>
+          <ContentPolicyProvider>
            <DeletedEventProvider>
              <NostrProvider>
                <ZapProvider>
@@ -58,9 +58,9 @@ export default function App(): JSX.Element {
                </ZapProvider>
              </NostrProvider>
            </DeletedEventProvider>
-          </ScreenSizeProvider>
-        </ContentPolicyProvider>
-      </ThemeProvider>
-    </UserPreferencesProvider>
+          </ContentPolicyProvider>
+        </ThemeProvider>
+      </UserPreferencesProvider>
+    </ScreenSizeProvider>
  )
 }
--- a/src/PageManager.tsx
+++ b/src/PageManager.tsx
@@ -27,6 +27,7 @@ import NotificationListPage from './pages/primary/NotificationListPage'
 import ProfilePage from './pages/primary/ProfilePage'
 import RelayPage from './pages/primary/RelayPage'
 import SearchPage from './pages/primary/SearchPage'
+import SettingsPage from './pages/primary/SettingsPage'
 import { NotificationProvider } from './providers/NotificationProvider'
 import { useScreenSize } from './providers/ScreenSizeProvider'
 import { useTheme } from './providers/ThemeProvider'
@@ -63,7 +64,8 @@ const PRIMARY_PAGE_REF_MAP = {
  profile: createRef<TPageRef>(),
  relay: createRef<TPageRef>(),
  search: createRef<TPageRef>(),
-  bookmark: createRef<TPageRef>()
+  bookmark: createRef<TPageRef>(),
+  settings: createRef<TPageRef>()
 }

 const PRIMARY_PAGE_MAP = {
@@ -74,7 +76,8 @@ const PRIMARY_PAGE_MAP = {
  profile: <ProfilePage ref={PRIMARY_PAGE_REF_MAP.profile} />,
  relay: <RelayPage ref={PRIMARY_PAGE_REF_MAP.relay} />,
  search: <SearchPage ref={PRIMARY_PAGE_REF_MAP.search} />,
-  bookmark: <BookmarkPage ref={PRIMARY_PAGE_REF_MAP.bookmark} />
+  bookmark: <BookmarkPage ref={PRIMARY_PAGE_REF_MAP.bookmark} />,
+  settings: <SettingsPage ref={PRIMARY_PAGE_REF_MAP.settings} />
 }

 const PrimaryPageContext = createContext<TPrimaryPageContext | undefined>(undefined)
@@ -248,7 +251,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
    if (needScrollToTop) {
      PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop('smooth')
    }
-    if (isSmallScreen || enableSingleColumnLayout) {
+    if (enableSingleColumnLayout) {
      clearSecondaryPages()
    }
  }
@@ -358,48 +361,39 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
        >
          <CurrentRelaysProvider>
            <NotificationProvider>
-              <div className="flex flex-col items-center bg-surface-background">
-                <div
-                  className="flex h-[var(--vh)] w-full bg-surface-background"
-                  style={{
-                    maxWidth: '1920px'
-                  }}
-                >
-                  <div className="grid grid-cols-10 w-full">
-                    <div className="col-span-3 flex justify-end">
-                      <Sidebar />
-                    </div>
-                    <div className="col-span-4 bg-background overflow-hidden border-x">
-                      {!!secondaryStack.length &&
-                        secondaryStack.map((item, index) => (
-                          <div
-                            key={item.index}
-                            className="flex flex-col h-full w-full"
-                            style={{
-                              display: index === secondaryStack.length - 1 ? 'block' : 'none'
-                            }}
-                          >
-                            {item.component}
-                          </div>
-                        ))}
-                      {primaryPages.map(({ name, element, props }) => (
-                        <div
-                          key={name}
-                          className="flex flex-col h-full w-full"
-                          style={{
-                            display:
-                              secondaryStack.length === 0 && currentPrimaryPage === name
-                                ? 'block'
-                                : 'none'
-                          }}
-                        >
-                          {props ? cloneElement(element as React.ReactElement, props) : element}
-                        </div>
-                      ))}
-                    </div>
-                    <div className="col-span-3" />
-                  </div>
+              <div className="flex justify-around w-full">
+                <div className="sticky top-0 w-full flex justify-end self-start h-[var(--vh)]">
+                  <Sidebar />
                </div>
+                <div className="w-[40vw] min-w-96 max-w-2xl bg-background border-x shrink-0">
+                  {!!secondaryStack.length &&
+                    secondaryStack.map((item, index) => (
+                      <div
+                        key={item.index}
+                        className="flex flex-col w-full"
+                        style={{
+                          display: index === secondaryStack.length - 1 ? 'block' : 'none'
+                        }}
+                      >
+                        {item.component}
+                      </div>
+                    ))}
+                  {primaryPages.map(({ name, element, props }) => (
+                    <div
+                      key={name}
+                      className="flex flex-col w-full"
+                      style={{
+                        display:
+                          secondaryStack.length === 0 && currentPrimaryPage === name
+                            ? 'block'
+                            : 'none'
+                      }}
+                    >
+                      {props ? cloneElement(element as React.ReactElement, props) : element}
+                    </div>
+                  ))}
+                </div>
+                <div className="w-full" />
              </div>
              <TooManyRelaysAlertDialog />
              <CreateWalletGuideToast />
--- a/src/components/NewNotesButton/index.tsx
+++ b/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
--- a/src/components/NoteList/index.tsx
+++ b/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>
    )
  }
--- a/src/components/ScrollToTopButton/index.tsx
+++ b/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={{
--- a/src/components/Settings/index.tsx
+++ b/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'
--- a/src/components/Sidebar/SettingsButton.tsx
+++ b/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>
  )
--- a/src/layouts/PrimaryPageLayout/index.tsx
+++ b/src/layouts/PrimaryPageLayout/index.tsx
@@ -3,7 +3,7 @@ import { Titlebar } from '@/components/Titlebar'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { TPrimaryPageName, usePrimaryPage } from '@/PageManager'
 import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
-import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

 const PrimaryPageLayout = forwardRef(
@@ -26,7 +26,7 @@ const PrimaryPageLayout = forwardRef(
    const scrollAreaRef = useRef<HTMLDivElement>(null)
    const smallScreenScrollAreaRef = useRef<HTMLDivElement>(null)
    const smallScreenLastScrollTopRef = useRef(0)
-    const { isSmallScreen } = useScreenSize()
+    const { enableSingleColumnLayout } = useUserPreferences()
    const { current, display } = usePrimaryPage()

    useImperativeHandle(
@@ -45,7 +45,7 @@ const PrimaryPageLayout = forwardRef(
    )

    useEffect(() => {
-      if (!isSmallScreen) return
+      if (!enableSingleColumnLayout) return

      const isVisible = () => {
        return smallScreenScrollAreaRef.current?.checkVisibility
@@ -65,9 +65,9 @@ const PrimaryPageLayout = forwardRef(
      return () => {
        window.removeEventListener('scroll', handleScroll)
      }
-    }, [current, isSmallScreen, display])
+    }, [current, enableSingleColumnLayout, display])

-    if (isSmallScreen) {
+    if (enableSingleColumnLayout) {
      return (
        <DeepBrowsingProvider active={current === pageName && display}>
          <div
--- a/src/layouts/SecondaryPageLayout/index.tsx
+++ b/src/layouts/SecondaryPageLayout/index.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useSecondaryPage } from '@/PageManager'
 import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
-import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { ChevronLeft } from 'lucide-react'
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -33,7 +33,7 @@ const SecondaryPageLayout = forwardRef(
    ref
  ) => {
    const scrollAreaRef = useRef<HTMLDivElement>(null)
-    const { isSmallScreen } = useScreenSize()
+    const { enableSingleColumnLayout } = useUserPreferences()
    const { currentIndex } = useSecondaryPage()

    useImperativeHandle(
@@ -52,13 +52,13 @@ const SecondaryPageLayout = forwardRef(
    )

    useEffect(() => {
-      if (isSmallScreen) {
+      if (enableSingleColumnLayout) {
        setTimeout(() => window.scrollTo({ top: 0 }), 10)
        return
      }
    }, [])

-    if (isSmallScreen) {
+    if (enableSingleColumnLayout) {
      return (
        <DeepBrowsingProvider active={currentIndex === index}>
          <div
--- a/src/pages/primary/SettingsPage/index.tsx
+++ b/src/pages/primary/SettingsPage/index.tsx
@@ -0,0 +1,35 @@
+import Settings from '@/components/Settings'
+import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { TPageRef } from '@/types'
+import { SettingsIcon } from 'lucide-react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const SettingsPage = forwardRef((_, ref) => {
+  const layoutRef = useRef<TPageRef>(null)
+  useImperativeHandle(ref, () => layoutRef.current)
+
+  return (
+    <PrimaryPageLayout
+      pageName="settings"
+      ref={layoutRef}
+      titlebar={<SettingsPageTitlebar />}
+      displayScrollToTopButton
+    >
+      <Settings />
+    </PrimaryPageLayout>
+  )
+})
+SettingsPage.displayName = 'SettingsPage'
+export default SettingsPage
+
+function SettingsPageTitlebar() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex gap-2 items-center h-full pl-3">
+      <SettingsIcon />
+      <div className="text-lg font-semibold">{t('Settings')}</div>
+    </div>
+  )
+}
--- a/src/pages/secondary/AppearanceSettingsPage/index.tsx
+++ b/src/pages/secondary/AppearanceSettingsPage/index.tsx
@@ -2,6 +2,7 @@ import { Label } from '@/components/ui/label'
 import { PRIMARY_COLORS, TPrimaryColor } from '@/constants'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { cn } from '@/lib/utils'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { useTheme } from '@/providers/ThemeProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { Columns2, LayoutList, List, Monitor, Moon, PanelLeft, Sun } from 'lucide-react'
@@ -27,6 +28,7 @@ const NOTIFICATION_STYLES = [

 const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
  const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
  const { themeSetting, setThemeSetting, primaryColor, setPrimaryColor } = useTheme()
  const {
    enableSingleColumnLayout,
@@ -52,20 +54,22 @@ const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) =
            ))}
          </div>
        </div>
-        <div className="flex flex-col gap-2 px-4">
-          <Label className="text-base">{t('Layout')}</Label>
-          <div className="grid grid-cols-2 gap-4 w-full">
-            {LAYOUTS.map(({ key, label, icon }) => (
-              <OptionButton
-                key={key.toString()}
-                isSelected={enableSingleColumnLayout === key}
-                icon={icon}
-                label={t(label)}
-                onClick={() => updateEnableSingleColumnLayout(key)}
-              />
-            ))}
+        {!isSmallScreen && (
+          <div className="flex flex-col gap-2 px-4">
+            <Label className="text-base">{t('Layout')}</Label>
+            <div className="grid grid-cols-2 gap-4 w-full">
+              {LAYOUTS.map(({ key, label, icon }) => (
+                <OptionButton
+                  key={key.toString()}
+                  isSelected={enableSingleColumnLayout === key}
+                  icon={icon}
+                  label={t(label)}
+                  onClick={() => updateEnableSingleColumnLayout(key)}
+                />
+              ))}
+            </div>
          </div>
-        </div>
+        )}
        <div className="flex flex-col gap-2 px-4">
          <Label className="text-base">{t('Notification list style')}</Label>
          <div className="grid grid-cols-2 gap-4 w-full">
--- a/src/pages/secondary/SettingsPage/index.tsx
+++ b/src/pages/secondary/SettingsPage/index.tsx
@@ -1,159 +1,16 @@
-import AboutInfoDialog from '@/components/AboutInfoDialog'
-import Donation from '@/components/Donation'
+import Settings from '@/components/Settings'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-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 { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'

 const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
  const { t } = useTranslation()
-  const { pubkey, nsec, ncryptsec } = useNostr()
-  const { push } = useSecondaryPage()
-  const [copiedNsec, setCopiedNsec] = useState(false)
-  const [copiedNcryptsec, setCopiedNcryptsec] = useState(false)

  return (
    <SecondaryPageLayout ref={ref} index={index} title={t('Settings')}>
-      <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>
+      <Settings />
    </SecondaryPageLayout>
  )
 })
 SettingsPage.displayName = 'SettingsPage'
 export default SettingsPage
-
-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'
--- a/src/providers/UserPreferencesProvider.tsx
+++ b/src/providers/UserPreferencesProvider.tsx
@@ -1,6 +1,7 @@
 import storage from '@/services/local-storage.service'
 import { TNotificationStyle } from '@/types'
 import { createContext, useContext, useState } from 'react'
+import { useScreenSize } from './ScreenSizeProvider'

 type TUserPreferencesContext = {
  notificationListStyle: TNotificationStyle
@@ -27,6 +28,7 @@ export const useUserPreferences = () => {
 }

 export function UserPreferencesProvider({ children }: { children: React.ReactNode }) {
+  const { isSmallScreen } = useScreenSize()
  const [notificationListStyle, setNotificationListStyle] = useState(
    storage.getNotificationListStyle()
  )
@@ -60,7 +62,7 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
        updateMuteMedia: setMuteMedia,
        sidebarCollapse,
        updateSidebarCollapse,
-        enableSingleColumnLayout,
+        enableSingleColumnLayout: isSmallScreen ? true : enableSingleColumnLayout,
        updateEnableSingleColumnLayout
      }}
    >