fix settings button

src/PageManager.tsx

@@ -5,6 +5,12 @@ import { ChevronLeft } from 'lucide-react'
 import NoteListPage from '@/pages/primary/NoteListPage'
 import HomePage from '@/pages/secondary/HomePage'
 import NotePage from '@/pages/secondary/NotePage'
+import SettingsPage from '@/pages/secondary/SettingsPage'
+import RelaySettingsPage from '@/pages/secondary/RelaySettingsPage'
+import WalletPage from '@/pages/secondary/WalletPage'
+import PostSettingsPage from '@/pages/secondary/PostSettingsPage'
+import GeneralSettingsPage from '@/pages/secondary/GeneralSettingsPage'
+import TranslationPage from '@/pages/secondary/TranslationPage'
 import { CurrentRelaysProvider } from '@/providers/CurrentRelaysProvider'
 import { NotificationProvider } from '@/providers/NotificationProvider'
 import { UserPreferencesProvider, useUserPreferences } from '@/providers/UserPreferencesProvider'
@@ -83,7 +89,7 @@ const PrimaryPageContext = createContext<TPrimaryPageContext | undefined>(undefi
 const SecondaryPageContext = createContext<TSecondaryPageContext | undefined>(undefined)
 
 const PrimaryNoteViewContext = createContext<{
-  setPrimaryNoteView: (view: ReactNode | null) => void
+  setPrimaryNoteView: (view: ReactNode | null, type?: 'note' | 'settings' | 'settings-sub') => void
 } | undefined>(undefined)
 
 export function usePrimaryPage() {
@@ -121,7 +127,7 @@ export function useSmartNoteNavigation() {
       // When right panel is hidden, show note in primary area
       // Extract note ID from URL (e.g., "/notes/note1..." -> "note1...")
       const noteId = url.replace('/notes/', '')
-      setPrimaryNoteView(<NotePage id={noteId} index={0} hideTitlebar={true} />)
+        setPrimaryNoteView(<NotePage id={noteId} index={0} hideTitlebar={true} />, 'note')
     } else {
       // Normal behavior - use secondary navigation
       pushSecondary(url)
@@ -152,6 +158,37 @@ export function useSmartRelayNavigation() {
   return { navigateToRelay }
 }
 
+// Custom hook for intelligent settings navigation
+export function useSmartSettingsNavigation() {
+  const { hideRecommendedRelaysPanel } = useUserPreferences()
+  const { push: pushSecondary } = useSecondaryPage()
+  const { setPrimaryNoteView } = usePrimaryNoteView()
+  
+  const navigateToSettings = (url: string) => {
+    if (hideRecommendedRelaysPanel) {
+      // When right panel is hidden, show settings page in primary area
+      if (url === '/settings') {
+        setPrimaryNoteView(<SettingsPage index={0} hideTitlebar={true} />, 'settings')
+      } else if (url === '/settings/relays') {
+        setPrimaryNoteView(<RelaySettingsPage index={0} hideTitlebar={true} />, 'settings-sub')
+      } else if (url === '/settings/wallet') {
+        setPrimaryNoteView(<WalletPage index={0} hideTitlebar={true} />, 'settings-sub')
+      } else if (url === '/settings/posts') {
+        setPrimaryNoteView(<PostSettingsPage index={0} hideTitlebar={true} />, 'settings-sub')
+      } else if (url === '/settings/general') {
+        setPrimaryNoteView(<GeneralSettingsPage index={0} hideTitlebar={true} />, 'settings-sub')
+      } else if (url === '/settings/translation') {
+        setPrimaryNoteView(<TranslationPage index={0} hideTitlebar={true} />, 'settings-sub')
+      }
+    } else {
+      // Normal behavior - use secondary navigation
+      pushSecondary(url)
+    }
+  }
+  
+  return { navigateToSettings }
+}
+
 function ConditionalHomePage() {
   const { hideRecommendedRelaysPanel } = useUserPreferences()
   
@@ -167,13 +204,15 @@ function MainContentArea({
   currentPrimaryPage, 
   secondaryStack,
   primaryNoteView,
+  primaryViewType,
   setPrimaryNoteView
 }: {
   primaryPages: { name: TPrimaryPageName; element: ReactNode; props?: any }[]
   currentPrimaryPage: TPrimaryPageName
   secondaryStack: { index: number; component: ReactNode }[]
   primaryNoteView: ReactNode | null
-  setPrimaryNoteView: (view: ReactNode | null) => void
+  primaryViewType: 'note' | 'settings' | 'settings-sub' | null
+  setPrimaryNoteView: (view: ReactNode | null, type?: 'note' | 'settings' | 'settings-sub') => void
 }) {
   const { hideRecommendedRelaysPanel } = useUserPreferences()
   
@@ -197,7 +236,10 @@ function MainContentArea({
                   onClick={() => setPrimaryNoteView(null)}
                 >
                   <ChevronLeft />
-                  <div className="truncate text-lg font-semibold">Note</div>
+                  <div className="truncate text-lg font-semibold">
+                    {primaryViewType === 'settings' ? 'Settings' : 
+                     primaryViewType === 'settings-sub' ? 'Settings' : 'Note'}
+                  </div>
                 </Button>
               </div>
             </div>
@@ -256,7 +298,13 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
     }
   ])
   const [secondaryStack, setSecondaryStack] = useState<TStackItem[]>([])
-  const [primaryNoteView, setPrimaryNoteView] = useState<ReactNode | null>(null)
+  const [primaryNoteView, setPrimaryNoteViewState] = useState<ReactNode | null>(null)
+  const [primaryViewType, setPrimaryViewType] = useState<'note' | 'settings' | 'settings-sub' | null>(null)
+  
+  const setPrimaryNoteView = (view: ReactNode | null, type?: 'note' | 'settings' | 'settings-sub') => {
+    setPrimaryNoteViewState(view)
+    setPrimaryViewType(type || null)
+  }
   const ignorePopStateRef = useRef(false)
 
   useEffect(() => {
@@ -529,11 +577,11 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                   currentPrimaryPage={currentPrimaryPage}
                   secondaryStack={secondaryStack}
                   primaryNoteView={primaryNoteView}
+                  primaryViewType={primaryViewType}
                   setPrimaryNoteView={setPrimaryNoteView}
                 />
               </div>
             </div>
-            <BottomNavigationBar />
             <TooManyRelaysAlertDialog />
             <CreateWalletGuideToast />
               </PrimaryNoteViewContext.Provider>

src/components/AboutInfoDialog/index.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
 import { CODY_PUBKEY, SILBERENGEL_PUBKEY } from '@/constants'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -96,7 +96,13 @@ export default function AboutInfoDialog({ children }: { children: React.ReactNod
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>{content}</DialogContent>
+      <DialogContent>
+        <DialogHeader className="sr-only">
+          <DialogTitle>About</DialogTitle>
+          <DialogDescription>Information about the application</DialogDescription>
+        </DialogHeader>
+        {content}
+      </DialogContent>
     </Dialog>
   )
 }

src/components/ClientSelect/index.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger } from '@/components/ui/drawer'
 import { Separator } from '@/components/ui/separator'
 import { ExtendedKind } from '@/constants'
@@ -187,6 +187,10 @@ export default function ClientSelect({
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>{trigger}</DialogTrigger>
         <DialogContent className="px-8" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader className="sr-only">
+            <DialogTitle>Client Selection</DialogTitle>
+            <DialogDescription>Select a client for this action</DialogDescription>
+          </DialogHeader>
           {content}
         </DialogContent>
       </Dialog>

src/components/FavoriteRelaysSetting/PullRelaySetsButton.tsx

@@ -71,7 +71,7 @@ export default function PullRelaySetsButton() {
       <DialogContent className="max-h-[90vh] overflow-auto">
         <DialogHeader>
           <DialogTitle>{t('Select the relay sets you want to pull')}</DialogTitle>
-          <DialogDescription className="hidden" />
+          <DialogDescription className="sr-only">Choose relay sets to import</DialogDescription>
         </DialogHeader>
         <RemoteRelaySets close={() => setOpen(false)} />
       </DialogContent>

src/components/NoteOptions/RawEventDialog.tsx

@@ -22,7 +22,7 @@ export default function RawEventDialog({
       <DialogContent className="h-[60vh]">
         <DialogHeader>
           <DialogTitle>Raw Event</DialogTitle>
-          <DialogDescription className="hidden" />
+          <DialogDescription className="sr-only">View the raw event data</DialogDescription>
         </DialogHeader>
         <ScrollArea className="h-full">
           <pre className="text-sm text-muted-foreground select-text">

src/components/NoteOptions/ReportDialog.tsx

@@ -46,9 +46,9 @@ export default function ReportDialog({
         }}
       >
         <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle className="hidden" />
-            <DrawerDescription className="hidden" />
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Report Content</DrawerTitle>
+            <DrawerDescription>Report inappropriate content</DrawerDescription>
           </DrawerHeader>
           <div className="p-4">
             <ReportContent event={event} closeDialog={closeDialog} />
@@ -68,9 +68,9 @@ export default function ReportDialog({
       }}
     >
       <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="hidden" />
-          <DialogDescription className="hidden" />
+        <DialogHeader className="sr-only">
+          <DialogTitle>Report Content</DialogTitle>
+          <DialogDescription>Report inappropriate content</DialogDescription>
         </DialogHeader>
         <ReportContent event={event} closeDialog={closeDialog} />
       </DialogContent>

src/components/ReplyNoteList/index.tsx

@@ -97,37 +97,25 @@ function ReplyNoteList({ index, event, sort = 'oldest' }: { index?: number; even
       parentEventKeys.push(eventIdKey)
     }
 
-    console.log('🔍 ReplyNoteList debug:', {
-      eventId: event.id,
-      currentEventKey,
-      repliesMapSize: repliesMap.size,
-      repliesMapKeys: Array.from(repliesMap.keys()),
-      repliesForEvent: repliesMap.get(currentEventKey)?.events?.length || 0
-    })
     
     while (parentEventKeys.length > 0) {
       const events = parentEventKeys.flatMap((id) => repliesMap.get(id)?.events || [])
-      console.log('🔍 Processing events for keys:', parentEventKeys, 'found:', events.length)
       
       events.forEach((evt) => {
         if (replyIdSet.has(evt.id)) return
         if (mutePubkeySet.has(evt.pubkey)) {
-          console.log('🔍 Filtered out muted user:', evt.pubkey)
           return
         }
         if (hideContentMentioningMutedUsers && isMentioningMutedUsers(evt, mutePubkeySet)) {
-          console.log('🔍 Filtered out content mentioning muted users')
           return
         }
 
         replyIdSet.add(evt.id)
         replyEvents.push(evt)
-        console.log('🔍 Added reply:', evt.id, 'kind:', evt.kind)
       })
       parentEventKeys = events.map((evt) => evt.id)
     }
     
-    console.log('🔍 Final replies count:', replyEvents.length)
 
 
     // Apply sorting based on the sort parameter

src/components/Sidebar/SettingsButton.tsx

@@ -1,13 +1,13 @@
 import { toSettings } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartSettingsNavigation } from '@/PageManager'
 import { Settings } from 'lucide-react'
 import SidebarItem from './SidebarItem'
 
 export default function SettingsButton() {
-  const { push } = useSecondaryPage()
+  const { navigateToSettings } = useSmartSettingsNavigation()
 
   return (
-    <SidebarItem title="Settings" onClick={() => push(toSettings())}>
+    <SidebarItem title="Settings" onClick={() => navigateToSettings(toSettings())}>
       <Settings strokeWidth={3} />
     </SidebarItem>
   )

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -15,7 +15,7 @@ import { ExternalLink } from 'lucide-react'
 import { forwardRef, HTMLProps, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+const GeneralSettingsPage = forwardRef(({ index, hideTitlebar = false }: { index?: number; hideTitlebar?: boolean }, ref) => {
   const { t, i18n } = useTranslation()
   const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
   const { themeSetting, setThemeSetting } = useTheme()
@@ -38,7 +38,7 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
   }
 
   return (
-    <SecondaryPageLayout ref={ref} index={index} title={t('General')}>
+    <SecondaryPageLayout ref={ref} index={index} title={hideTitlebar ? undefined : t('General')}>
       <div className="space-y-4 mt-3">
         <SettingItem>
           <Label htmlFor="languages" className="text-base font-normal">

src/pages/secondary/PostSettingsPage/index.tsx

@@ -3,11 +3,11 @@ import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import MediaUploadServiceSetting from './MediaUploadServiceSetting'
 
-const PostSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+const PostSettingsPage = forwardRef(({ index, hideTitlebar = false }: { index?: number; hideTitlebar?: boolean }, ref) => {
   const { t } = useTranslation()
 
   return (
-    <SecondaryPageLayout ref={ref} index={index} title={t('Post settings')}>
+    <SecondaryPageLayout ref={ref} index={index} title={hideTitlebar ? undefined : t('Post settings')}>
       <div className="px-4 pt-3 space-y-4">
         <MediaUploadServiceSetting />
       </div>

src/pages/secondary/RelaySettingsPage/index.tsx

@@ -5,7 +5,7 @@ import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { forwardRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const RelaySettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+const RelaySettingsPage = forwardRef(({ index, hideTitlebar = false }: { index?: number; hideTitlebar?: boolean }, ref) => {
   const { t } = useTranslation()
   const [tabValue, setTabValue] = useState('favorite-relays')
 
@@ -21,7 +21,7 @@ const RelaySettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
   }, [])
 
   return (
-    <SecondaryPageLayout ref={ref} index={index} title={t('Relay settings')}>
+    <SecondaryPageLayout ref={ref} index={index} title={hideTitlebar ? undefined : t('Relay settings')}>
       <Tabs value={tabValue} onValueChange={setTabValue} className="px-4 py-3 space-y-4">
         <TabsList>
           <TabsTrigger value="favorite-relays">{t('Favorite Relays')}</TabsTrigger>

src/pages/secondary/SettingsPage/index.tsx

@@ -8,7 +8,7 @@ import {
   toWallet
 } from '@/lib/link'
 import { cn } from '@/lib/utils'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartSettingsNavigation } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
 import {
   Check,
@@ -25,23 +25,23 @@ import {
 import { forwardRef, HTMLProps, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+const SettingsPage = forwardRef(({ index, hideTitlebar = false }: { index?: number; hideTitlebar?: boolean }, ref) => {
   const { t } = useTranslation()
   const { pubkey, nsec, ncryptsec } = useNostr()
-  const { push } = useSecondaryPage()
+  const { navigateToSettings } = useSmartSettingsNavigation()
   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())}>
+    <SecondaryPageLayout ref={ref} index={index} title={hideTitlebar ? undefined : t('Settings')}>
+      <SettingItem className="clickable" onClick={() => navigateToSettings(toGeneralSettings())}>
         <div className="flex items-center gap-4">
           <Settings2 />
           <div>{t('General')}</div>
         </div>
         <ChevronRight />
       </SettingItem>
-      <SettingItem className="clickable" onClick={() => push(toRelaySettings())}>
+      <SettingItem className="clickable" onClick={() => navigateToSettings(toRelaySettings())}>
         <div className="flex items-center gap-4">
           <Server />
           <div>{t('Relays')}</div>
@@ -49,7 +49,7 @@ const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
         <ChevronRight />
       </SettingItem>
       {!!pubkey && (
-        <SettingItem className="clickable" onClick={() => push(toTranslation())}>
+        <SettingItem className="clickable" onClick={() => navigateToSettings(toTranslation())}>
           <div className="flex items-center gap-4">
             <Languages />
             <div>{t('Translation')}</div>
@@ -58,7 +58,7 @@ const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
         </SettingItem>
       )}
       {!!pubkey && (
-        <SettingItem className="clickable" onClick={() => push(toWallet())}>
+        <SettingItem className="clickable" onClick={() => navigateToSettings(toWallet())}>
           <div className="flex items-center gap-4">
             <Wallet />
             <div>{t('Wallet')}</div>
@@ -67,7 +67,7 @@ const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
         </SettingItem>
       )}
       {!!pubkey && (
-        <SettingItem className="clickable" onClick={() => push(toPostSettings())}>
+        <SettingItem className="clickable" onClick={() => navigateToSettings(toPostSettings())}>
           <div className="flex items-center gap-4">
             <PencilLine />
             <div>{t('Post settings')}</div>

src/pages/secondary/TranslationPage/index.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 import JumbleTranslate from './JumbleTranslate'
 import LibreTranslate from './LibreTranslate'
 
-const TranslationPage = forwardRef(({ index }: { index?: number }, ref) => {
+const TranslationPage = forwardRef(({ index, hideTitlebar = false }: { index?: number; hideTitlebar?: boolean }, ref) => {
   const { t, i18n } = useTranslation()
   const { config, updateConfig } = useTranslationService()
   const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
@@ -26,7 +26,7 @@ const TranslationPage = forwardRef(({ index }: { index?: number }, ref) => {
   }
 
   return (
-    <SecondaryPageLayout ref={ref} index={index} title={t('Translation')}>
+    <SecondaryPageLayout ref={ref} index={index} title={hideTitlebar ? undefined : t('Translation')}>
       <div className="px-4 pt-3 space-y-4">
         <div className="space-y-2">
           <Label htmlFor="languages" className="text-base font-medium">

src/pages/secondary/WalletPage/index.tsx

@@ -21,12 +21,12 @@ import LightningAddressInput from './LightningAddressInput'
 import QuickZapSwitch from './QuickZapSwitch'
 import ZapReplyThresholdInput from './ZapReplyThresholdInput'
 
-const WalletPage = forwardRef(({ index }: { index?: number }, ref) => {
+const WalletPage = forwardRef(({ index, hideTitlebar = false }: { index?: number; hideTitlebar?: boolean }, ref) => {
   const { t } = useTranslation()
   const { isWalletConnected, walletInfo } = useZap()
 
   return (
-    <SecondaryPageLayout ref={ref} index={index} title={t('Wallet')}>
+    <SecondaryPageLayout ref={ref} index={index} title={hideTitlebar ? undefined : t('Wallet')}>
       <div className="px-4 pt-3 space-y-4">
         {isWalletConnected ? (
           <>