feat: layout switcher

src/components/Sidebar/LayoutSwitcher.tsx

@@ -0,0 +1,53 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
+import { Columns2, PanelLeft } from 'lucide-react'
+
+export default function LayoutSwitcher({ collapse }: { collapse: boolean }) {
+  const { enableSingleColumnLayout, updateEnableSingleColumnLayout } = useUserPreferences()
+
+  if (collapse) {
+    return (
+      <Button
+        variant="ghost"
+        className="size-12 hover:border"
+        onClick={() => updateEnableSingleColumnLayout(!enableSingleColumnLayout)}
+      >
+        {enableSingleColumnLayout ? (
+          <PanelLeft className="!size-5" />
+        ) : (
+          <Columns2 className="!size-5" />
+        )}
+      </Button>
+    )
+  }
+
+  return (
+    <div className="rounded-lg bg-muted p-1 shadow-inner">
+      <div className="relative flex items-center justify-around">
+        <div
+          className="py-1 w-full z-10 cursor-pointer flex flex-col items-center"
+          onClick={() => updateEnableSingleColumnLayout(false)}
+        >
+          <Columns2 className={cn('size-5', enableSingleColumnLayout && 'text-muted-foreground')} />
+        </div>
+        <div
+          className="py-1 w-full z-10 cursor-pointer flex flex-col items-center"
+          onClick={() => updateEnableSingleColumnLayout(true)}
+        >
+          <PanelLeft
+            className={cn('size-5', !enableSingleColumnLayout && 'text-muted-foreground')}
+          />
+        </div>
+        <div
+          className={cn(
+            'rounded-md absolute top-0 left-0 inset-0 w-1/2 h-full transition-transform shadow-sm',
+            !enableSingleColumnLayout
+              ? 'translate-x-0 bg-surface-background'
+              : 'translate-x-full bg-background'
+          )}
+        />
+      </div>
+    </div>
+  )
+}

src/components/Sidebar/index.tsx

@@ -10,6 +10,7 @@ import AccountButton from './AccountButton'
 import BookmarkButton from './BookmarkButton'
 import RelaysButton from './ExploreButton'
 import HomeButton from './HomeButton'
+import LayoutSwitcher from './LayoutSwitcher'
 import NotificationsButton from './NotificationButton'
 import PostButton from './PostButton'
 import ProfileButton from './ProfileButton'
@@ -50,7 +51,10 @@ export default function PrimaryPageSidebar() {
         <SettingsButton collapse={sidebarCollapse} />
         <PostButton collapse={sidebarCollapse} />
       </div>
-      <AccountButton collapse={sidebarCollapse} />
+      <div className="space-y-4">
+        <LayoutSwitcher collapse={sidebarCollapse} />
+        <AccountButton collapse={sidebarCollapse} />
+      </div>
       <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',