From 325d3ca5c30110d0b01542463944fbb4ce4b8118 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 19 Oct 2025 21:42:01 +0800
Subject: [PATCH] feat: improve single-column layout

---
 src/PageManager.tsx              | 10 +++----
 src/components/Sidebar/index.tsx | 50 +++++++++++++++-----------------
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/PageManager.tsx b/src/PageManager.tsx
index 4078f6ed..25c31ead 100644
--- a/src/PageManager.tsx
+++ b/src/PageManager.tsx
@@ -361,16 +361,15 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
         >
           <CurrentRelaysProvider>
             <NotificationProvider>
-              <div className="flex justify-around w-full">
-                <div className="sticky top-0 w-full flex justify-end self-start h-[var(--vh)]">
+              <div className="flex xl:justify-around w-full">
+                <div className="sticky top-0 xl:w-full flex justify-end self-start h-[var(--vh)]">
                   <Sidebar />
                 </div>
-                <div className="w-[45vw] min-w-96 max-w-4xl bg-background border-x shrink-0">
+                <div className="flex-1 w-0 bg-background border-x xl:w-[900px] xl: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'
                         }}
@@ -381,7 +380,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                   {primaryPages.map(({ name, element, props }) => (
                     <div
                       key={name}
-                      className="flex flex-col w-full"
                       style={{
                         display:
                           secondaryStack.length === 0 && currentPrimaryPage === name
@@ -393,7 +391,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                     </div>
                   ))}
                 </div>
-                <div className="w-full" />
+                <div className="hidden xl:w-full xl:block" />
               </div>
               <TooManyRelaysAlertDialog />
               <CreateWalletGuideToast />
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index b3f6fa9f..68a70ced 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -19,7 +19,7 @@ import SettingsButton from './SettingsButton'
 export default function PrimaryPageSidebar() {
   const { isSmallScreen } = useScreenSize()
   const { themeSetting } = useTheme()
-  const { sidebarCollapse, updateSidebarCollapse, enableSingleColumnLayout } = useUserPreferences()
+  const { sidebarCollapse, updateSidebarCollapse } = useUserPreferences()
   const { pubkey } = useNostr()
 
   if (isSmallScreen) return null
@@ -28,11 +28,11 @@ export default function PrimaryPageSidebar() {
     <div
       className={cn(
         'relative flex flex-col pb-2 pt-3 justify-between h-full shrink-0',
-        sidebarCollapse && !enableSingleColumnLayout ? 'px-2 w-16' : 'px-4 w-52'
+        sidebarCollapse ? 'px-2 w-16' : 'px-4 w-52'
       )}
     >
       <div className="space-y-2">
-        {sidebarCollapse && !enableSingleColumnLayout ? (
+        {sidebarCollapse ? (
           <div className="px-3 py-1 mb-6 w-full">
             <Icon />
           </div>
@@ -41,30 +41,28 @@ export default function PrimaryPageSidebar() {
             <Logo />
           </div>
         )}
-        <HomeButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-        <RelaysButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-        <NotificationsButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-        <SearchButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-        <ProfileButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-        {pubkey && <BookmarkButton collapse={sidebarCollapse && !enableSingleColumnLayout} />}
-        <SettingsButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-        <PostButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
+        <HomeButton collapse={sidebarCollapse} />
+        <RelaysButton collapse={sidebarCollapse} />
+        <NotificationsButton collapse={sidebarCollapse} />
+        <SearchButton collapse={sidebarCollapse} />
+        <ProfileButton collapse={sidebarCollapse} />
+        {pubkey && <BookmarkButton collapse={sidebarCollapse} />}
+        <SettingsButton collapse={sidebarCollapse} />
+        <PostButton collapse={sidebarCollapse} />
       </div>
-      <AccountButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
-      {!enableSingleColumnLayout && (
-        <button
-          className={cn(
-            'absolute flex flex-col justify-center items-center right-0 w-5 h-6 p-0 rounded-l-md hover:shadow-md text-muted-foreground hover:text-foreground hover:bg-background transition-colors [&_svg]:size-4',
-            themeSetting === 'pure-black' ? 'top-3' : 'top-5'
-          )}
-          onClick={(e) => {
-            e.stopPropagation()
-            updateSidebarCollapse(!sidebarCollapse)
-          }}
-        >
-          {sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
-        </button>
-      )}
+      <AccountButton collapse={sidebarCollapse} />
+      <button
+        className={cn(
+          'absolute flex flex-col justify-center items-center right-0 w-5 h-6 p-0 rounded-l-md hover:shadow-md text-muted-foreground hover:text-foreground hover:bg-background transition-colors [&_svg]:size-4',
+          themeSetting === 'pure-black' ? 'top-3' : 'top-5'
+        )}
+        onClick={(e) => {
+          e.stopPropagation()
+          updateSidebarCollapse(!sidebarCollapse)
+        }}
+      >
+        {sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
+      </button>
     </div>
   )
 }