index.tsx raw

   1  import Icon from '@/assets/Icon'
   2  import Logo from '@/assets/Logo'
   3  import { cn } from '@/lib/utils'
   4  import { usePrimaryPage } from '@/PageManager'
   5  import { useNostr } from '@/providers/NostrProvider'
   6  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   7  import { useTheme } from '@/providers/ThemeProvider'
   8  import { useUserPreferences } from '@/providers/UserPreferencesProvider'
   9  import { ChevronsLeft, ChevronsRight } from 'lucide-react'
  10  import AccountButton from './AccountButton'
  11  import BookmarkButton from './BookmarkButton'
  12  import ChatButton from './ChatButton'
  13  import HelpButton from './HelpButton'
  14  import HomeButton from './HomeButton'
  15  import KeyboardModeButton from './KeyboardModeButton'
  16  import LayoutSwitcher from './LayoutSwitcher'
  17  import NotificationsButton from './NotificationButton'
  18  import PostButton from './PostButton'
  19  import ProfileButton from './ProfileButton'
  20  import RelayAdminButton from './RelayAdminButton'
  21  import SearchButton from './SearchButton'
  22  import SettingsButton from './SettingsButton'
  23  
  24  export default function PrimaryPageSidebar() {
  25    const { isSmallScreen, isNarrowDesktop } = useScreenSize()
  26    const { themeSetting } = useTheme()
  27    const { sidebarCollapse, updateSidebarCollapse, enableSingleColumnLayout } = useUserPreferences()
  28    const { pubkey } = useNostr()
  29    const { navigate } = usePrimaryPage()
  30  
  31    if (isSmallScreen) return null
  32  
  33    // Force collapsed mode in narrow desktop (768-1024px)
  34    const isCollapsed = isNarrowDesktop || sidebarCollapse
  35  
  36    return (
  37      <div
  38        className={cn(
  39          'relative z-40 flex flex-col pb-2 pt-3 justify-between h-full shrink-0 bg-chrome-background',
  40          isCollapsed ? 'px-2 w-16' : 'px-4 w-52'
  41        )}
  42      >
  43        <div className="space-y-2">
  44          {isCollapsed ? (
  45            <button
  46              className="px-3 py-1 mb-4 w-full cursor-pointer hover:opacity-80 transition-opacity"
  47              onClick={() => navigate('home')}
  48              aria-label="Go to home"
  49            >
  50              <Icon />
  51            </button>
  52          ) : (
  53            <button
  54              className="px-4 mb-4 w-full cursor-pointer hover:opacity-80 transition-opacity"
  55              onClick={() => navigate('home')}
  56              aria-label="Go to home"
  57            >
  58              <Logo />
  59            </button>
  60          )}
  61          <HomeButton collapse={isCollapsed} navIndex={0} />
  62          <NotificationsButton collapse={isCollapsed} navIndex={1} />
  63          <SearchButton collapse={isCollapsed} navIndex={2} />
  64          {pubkey && <ChatButton collapse={isCollapsed} navIndex={3} />}
  65          <ProfileButton collapse={isCollapsed} navIndex={pubkey ? 4 : 3} />
  66          {pubkey && <BookmarkButton collapse={isCollapsed} navIndex={5} />}
  67          <RelayAdminButton collapse={isCollapsed} navIndex={pubkey ? 6 : 4} />
  68          <SettingsButton collapse={isCollapsed} navIndex={pubkey ? 7 : 5} />
  69          <PostButton collapse={isCollapsed} navIndex={pubkey ? 8 : 5} />
  70        </div>
  71        <div className="space-y-4">
  72          <HelpButton collapse={isCollapsed} navIndex={pubkey ? 9 : 6} />
  73          <KeyboardModeButton collapse={isCollapsed} />
  74          <LayoutSwitcher collapse={isCollapsed} />
  75          <AccountButton collapse={isCollapsed} />
  76        </div>
  77        {!isNarrowDesktop && (
  78          <button
  79            className={cn(
  80              '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',
  81              themeSetting === 'dark' || enableSingleColumnLayout ? 'top-3' : 'top-5'
  82            )}
  83            onClick={(e) => {
  84              e.stopPropagation()
  85              updateSidebarCollapse(!sidebarCollapse)
  86            }}
  87          >
  88            {sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
  89          </button>
  90        )}
  91      </div>
  92    )
  93  }
  94