rearanged the menus

src/components/BottomNavigationBar/DiscussionsButton.tsx

@@ -0,0 +1,16 @@
+import { MessageCircle } from 'lucide-react'
+import BottomNavigationBarItem from './BottomNavigationBarItem'
+
+export default function DiscussionsButton() {
+  // TODO: Implement discussions navigation when the component is built
+  const handleClick = () => {
+    // Placeholder for future discussions functionality
+    console.log('Discussions button clicked - component to be implemented')
+  }
+
+  return (
+    <BottomNavigationBarItem onClick={handleClick}>
+      <MessageCircle />
+    </BottomNavigationBarItem>
+  )
+}

src/components/BottomNavigationBar/index.tsx

@@ -1,8 +1,7 @@
 import { cn } from '@/lib/utils'
-import AccountButton from './AccountButton'
-import ExploreButton from './ExploreButton'
 import HomeButton from './HomeButton'
 import NotificationsButton from './NotificationsButton'
+import DiscussionsButton from './DiscussionsButton'
 
 export default function BottomNavigationBar() {
   return (
@@ -15,10 +14,9 @@ export default function BottomNavigationBar() {
         paddingBottom: 'env(safe-area-inset-bottom)'
       }}
     >
-      <HomeButton />
-      <ExploreButton />
       <NotificationsButton />
-      <AccountButton />
+      <HomeButton />
+      <DiscussionsButton />
     </div>
   )
 }

src/components/Titlebar/AccountButton.tsx

@@ -0,0 +1,43 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { generateImageByPubkey } from '@/lib/pubkey'
+import { cn } from '@/lib/utils'
+import { usePrimaryPage } from '@/PageManager'
+import { useNostr } from '@/providers/NostrProvider'
+import { UserRound } from 'lucide-react'
+import { useMemo } from 'react'
+
+export default function AccountButton() {
+  const { navigate, current, display } = usePrimaryPage()
+  const { pubkey, profile } = useNostr()
+  const defaultAvatar = useMemo(
+    () => (profile?.pubkey ? generateImageByPubkey(profile.pubkey) : ''),
+    [profile]
+  )
+  const active = useMemo(() => current === 'me' && display, [display, current])
+
+  return (
+    <Button
+      variant="ghost"
+      size="titlebar-icon"
+      onClick={() => navigate('me')}
+      className={active ? 'bg-accent/50' : ''}
+    >
+      {pubkey ? (
+        profile ? (
+          <Avatar className={cn('w-6 h-6', active ? 'ring-primary ring-1' : '')}>
+            <AvatarImage src={profile.avatar} className="object-cover object-center" />
+            <AvatarFallback>
+              <img src={defaultAvatar} />
+            </AvatarFallback>
+          </Avatar>
+        ) : (
+          <Skeleton className={cn('w-6 h-6 rounded-full', active ? 'ring-primary ring-1' : '')} />
+        )
+      ) : (
+        <UserRound />
+      )}
+    </Button>
+  )
+}

src/components/Titlebar/ExploreButton.tsx

@@ -0,0 +1,18 @@
+import { usePrimaryPage } from '@/PageManager'
+import { Button } from '@/components/ui/button'
+import { Compass } from 'lucide-react'
+
+export default function ExploreButton() {
+  const { navigate, current, display } = usePrimaryPage()
+
+  return (
+    <Button
+      variant="ghost"
+      size="titlebar-icon"
+      onClick={() => navigate('explore')}
+      className={current === 'explore' && display ? 'bg-accent/50' : ''}
+    >
+      <Compass />
+    </Button>
+  )
+}

src/pages/primary/NoteListPage/index.tsx

@@ -22,6 +22,8 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
+import ExploreButton from '@/components/Titlebar/ExploreButton'
+import AccountButton from '@/components/Titlebar/AccountButton'
 import FollowingFeed from './FollowingFeed'
 import RelaysFeed from './RelaysFeed'
 
@@ -120,7 +122,10 @@ function NoteListPageTitlebar({
 
   return (
     <div className="flex gap-1 items-center h-full justify-between">
-      <FeedButton className="flex-1 max-w-fit w-0" />
+      <div className="flex gap-1 items-center">
+        <ExploreButton />
+        <FeedButton className="flex-1 max-w-fit w-0" />
+      </div>
       <div className="shrink-0 flex gap-1 items-center">
         {setShowRelayDetails && (
           <Button
@@ -145,6 +150,7 @@ function NoteListPageTitlebar({
             <PostButton />
           </>
         )}
+        <AccountButton />
       </div>
     </div>
   )