Notification view and remaining views updated

src/PageManager.tsx

@@ -131,6 +131,27 @@ export function useSmartNoteNavigation() {
   return { navigateToNote }
 }
 
+// Custom hook for intelligent relay navigation
+export function useSmartRelayNavigation() {
+  const { hideRecommendedRelaysPanel } = useUserPreferences()
+  const { push: pushSecondary } = useSecondaryPage()
+  const { navigate: navigatePrimary } = usePrimaryPage()
+  
+  const navigateToRelay = (url: string) => {
+    if (hideRecommendedRelaysPanel) {
+      // When right panel is hidden, navigate to relay page in primary area
+      // Extract relay URL from the path (e.g., "/relays/wss%3A%2F%2F..." -> "wss://...")
+      const relayUrl = url.startsWith('/relays/') ? decodeURIComponent(url.replace('/relays/', '')) : url
+      navigatePrimary('relay', { url: relayUrl })
+    } else {
+      // Normal behavior - use secondary navigation
+      pushSecondary(url)
+    }
+  }
+  
+  return { navigateToRelay }
+}
+
 function ConditionalHomePage() {
   const { hideRecommendedRelaysPanel } = useUserPreferences()
   

src/components/Explore/index.tsx

@@ -1,7 +1,7 @@
 import { Skeleton } from '@/components/ui/skeleton'
 import { useFetchRelayInfo } from '@/hooks'
 import { toRelay } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartRelayNavigation } from '@/PageManager'
 import relayInfoService from '@/services/relay-info.service'
 import { TAwesomeRelayCollection } from '@/types'
 import { useEffect, useState } from 'react'
@@ -60,7 +60,7 @@ function RelayCollection({ collection }: { collection: TAwesomeRelayCollection }
 }
 
 function RelayItem({ url }: { url: string }) {
-  const { push } = useSecondaryPage()
+  const { navigateToRelay } = useSmartRelayNavigation()
   const { relayInfo, isFetching } = useFetchRelayInfo(url)
 
   if (isFetching) {
@@ -78,7 +78,7 @@ function RelayItem({ url }: { url: string }) {
       relayInfo={relayInfo}
       onClick={(e) => {
         e.stopPropagation()
-        push(toRelay(relayInfo.url))
+        navigateToRelay(toRelay(relayInfo.url))
       }}
     />
   )

src/components/FollowingFavoriteRelayList/index.tsx

@@ -1,6 +1,6 @@
 import { useFetchRelayInfo } from '@/hooks'
 import { toRelay } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartRelayNavigation } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
 import client from '@/services/client.service'
 import { useEffect, useRef, useState } from 'react'
@@ -73,7 +73,7 @@ export default function FollowingFavoriteRelayList() {
 }
 
 function RelayItem({ url, users }: { url: string; users: string[] }) {
-  const { push } = useSecondaryPage()
+  const { navigateToRelay } = useSmartRelayNavigation()
   const { relayInfo } = useFetchRelayInfo(url)
 
   return (
@@ -84,7 +84,7 @@ function RelayItem({ url, users }: { url: string; users: string[] }) {
       className="clickable p-4 border-b"
       onClick={(e) => {
         e.stopPropagation()
-        push(toRelay(url))
+        navigateToRelay(toRelay(url))
       }}
     />
   )

src/components/Note/Zap.tsx

@@ -7,12 +7,13 @@ import { Zap as ZapIcon } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation, useSecondaryPage } from '@/PageManager'
 import Username from '../Username'
 import UserAvatar from '../UserAvatar'
 
 export default function Zap({ event, className }: { event: Event; className?: string }) {
   const { t } = useTranslation()
+  const { navigateToNote } = useSmartNoteNavigation()
   const { push } = useSecondaryPage()
   const zapInfo = useMemo(() => getZapInfoFromEvent(event), [event])
   const { event: targetEvent } = useFetchEvent(zapInfo?.eventId)
@@ -52,9 +53,9 @@ export default function Zap({ event, className }: { event: Event; className?: st
           if (isEventZap) {
             // Event zap - navigate to the zapped event
             if (targetEvent) {
-              push(toNote(targetEvent.id))
+              navigateToNote(toNote(targetEvent.id))
             } else if (zapInfo.eventId) {
-              push(toNote(zapInfo.eventId))
+              navigateToNote(toNote(zapInfo.eventId))
             }
           } else if (isProfileZap && actualRecipientPubkey) {
             // Profile zap - navigate to the zapped profile

src/components/Note/index.tsx

@@ -1,4 +1,4 @@
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation } from '@/PageManager'
 import { ExtendedKind, SUPPORTED_KINDS } from '@/constants'
 import { getParentBech32Id, isNsfwEvent } from '@/lib/event'
 import { toNote } from '@/lib/link'
@@ -51,7 +51,7 @@ export default function Note({
   hideParentNotePreview?: boolean
   showFull?: boolean
 }) {
-  const { push } = useSecondaryPage()
+  const { navigateToNote } = useSmartNoteNavigation()
   const { isSmallScreen } = useScreenSize()
   const parentEventId = useMemo(
     () => (hideParentNotePreview ? undefined : getParentBech32Id(event)),
@@ -169,7 +169,7 @@ export default function Note({
               className="p-1 hover:bg-muted rounded transition-colors"
               onClick={(e) => {
                 e.stopPropagation()
-                push(toNote(event))
+                navigateToNote(toNote(event))
               }}
               title="View in Discussions"
             >
@@ -188,7 +188,7 @@ export default function Note({
           className="mt-2"
           onClick={(e) => {
             e.stopPropagation()
-            push(toNote(parentEventId))
+            navigateToNote(toNote(parentEventId))
           }}
         />
       )}

src/components/NotificationList/NotificationItem/MentionNotification.tsx

@@ -2,7 +2,7 @@ import ParentNotePreview from '@/components/ParentNotePreview'
 import { NOTIFICATION_LIST_STYLE } from '@/constants'
 import { getEmbeddedPubkeys, getParentBech32Id } from '@/lib/event'
 import { toNote } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { AtSign, MessageCircle, Quote } from 'lucide-react'
@@ -19,7 +19,7 @@ export function MentionNotification({
   isNew?: boolean
 }) {
   const { t } = useTranslation()
-  const { push } = useSecondaryPage()
+  const { navigateToNote } = useSmartNoteNavigation()
   const { pubkey } = useNostr()
   const { notificationListStyle } = useUserPreferences()
   const isMention = useMemo(() => {

src/components/NotificationList/NotificationItem/Notification.tsx

@@ -7,7 +7,7 @@ import Username from '@/components/Username'
 import { NOTIFICATION_LIST_STYLE } from '@/constants'
 import { toNote, toProfile } from '@/lib/link'
 import { cn } from '@/lib/utils'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation, useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
 import { useNotification } from '@/providers/NotificationProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
@@ -37,6 +37,7 @@ export default function Notification({
   showStats?: boolean
 }) {
   const { t } = useTranslation()
+  const { navigateToNote } = useSmartNoteNavigation()
   const { push } = useSecondaryPage()
   const { pubkey } = useNostr()
   const { isNotificationRead, markNotificationAsRead } = useNotification()
@@ -49,7 +50,7 @@ export default function Notification({
   const handleClick = () => {
     markNotificationAsRead(notificationId)
     if (targetEvent) {
-      push(toNote(targetEvent.id))
+      navigateToNote(toNote(targetEvent.id))
     } else if (pubkey) {
       push(toProfile(pubkey))
     }

src/components/RelayInfo/RelayReviewCard.tsx

@@ -1,4 +1,4 @@
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation } from '@/PageManager'
 import { getStarsFromRelayReviewEvent } from '@/lib/event-metadata'
 import { toNote } from '@/lib/link'
 import { cn } from '@/lib/utils'
@@ -20,13 +20,13 @@ export default function RelayReviewCard({
   event: NostrEvent
   className?: string
 }) {
-  const { push } = useSecondaryPage()
+  const { navigateToNote } = useSmartNoteNavigation()
   const stars = useMemo(() => getStarsFromRelayReviewEvent(event), [event])
 
   return (
     <div
       className={cn('clickable border rounded-lg bg-muted/20 p-3 h-full', className)}
-      onClick={() => push(toNote(event))}
+      onClick={() => navigateToNote(toNote(event))}
     >
       <div className="flex justify-between items-start gap-2">
         <div className="flex items-center space-x-2 flex-1">

src/components/ReplyNote/index.tsx

@@ -1,4 +1,4 @@
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation } from '@/PageManager'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { isMentioningMutedUsers } from '@/lib/event'
@@ -34,7 +34,7 @@ export default function ReplyNote({
 }) {
   const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
-  const { push } = useSecondaryPage()
+  const { navigateToNote } = useSmartNoteNavigation()
   const { mutePubkeySet } = useMuteList()
   const { hideContentMentioningMutedUsers } = useContentPolicy()
   const [showMuted, setShowMuted] = useState(false)
@@ -55,7 +55,7 @@ export default function ReplyNote({
   return (
     <div
       className={`pb-3 border-b transition-colors duration-500 clickable ${highlight ? 'bg-primary/50' : ''}`}
-      onClick={() => push(toNote(event))}
+      onClick={() => navigateToNote(toNote(event))}
     >
       <Collapsible>
         <div className="flex space-x-2 items-start px-4 pt-3">

src/components/SearchBar/index.tsx

@@ -4,7 +4,7 @@ import { toNote } from '@/lib/link'
 import { randomString } from '@/lib/random'
 import { normalizeUrl } from '@/lib/url'
 import { cn } from '@/lib/utils'
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartNoteNavigation } from '@/PageManager'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import modalManager from '@/services/modal-manager.service'
 import { TSearchParams } from '@/types'
@@ -32,7 +32,7 @@ const SearchBar = forwardRef<
   }
 >(({ input, setInput, onSearch }, ref) => {
   const { t } = useTranslation()
-  const { push } = useSecondaryPage()
+  const { navigateToNote } = useSmartNoteNavigation()
   const { isSmallScreen } = useScreenSize()
   const [debouncedInput, setDebouncedInput] = useState(input)
   const { profiles, isFetching: isFetchingProfiles } = useSearchProfiles(debouncedInput, 5)
@@ -88,7 +88,7 @@ const SearchBar = forwardRef<
     blur()
 
     if (params.type === 'note') {
-      push(toNote(params.search))
+      navigateToNote(toNote(params.search))
     } else {
       onSearch(params)
     }

src/pages/secondary/HomePage/index.tsx

@@ -1,4 +1,4 @@
-import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
+import { usePrimaryPage, useSmartRelayNavigation } from '@/PageManager'
 import RelaySimpleInfo from '@/components/RelaySimpleInfo'
 import { Button } from '@/components/ui/button'
 import { RECOMMENDED_RELAYS } from '@/constants'
@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next'
 const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
   const { navigate } = usePrimaryPage()
-  const { push } = useSecondaryPage()
+  const { navigateToRelay } = useSmartRelayNavigation()
   const { updateHideRecommendedRelaysPanel } = useUserPreferences()
   const [recommendedRelayInfos, setRecommendedRelayInfos] = useState<TRelayInfo[]>([])
 
@@ -73,7 +73,7 @@ const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
               relayInfo={relayInfo}
               onClick={(e) => {
                 e.stopPropagation()
-                push(toRelay(relayInfo.url))
+                navigateToRelay(toRelay(relayInfo.url))
               }}
             />
           ))}