feat: remove default favorite relays

src/pages/primary/NoteListPage/index.tsx

@@ -1,4 +1,4 @@
-import { useSecondaryPage } from '@/PageManager'
+import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
 import PostEditor from '@/components/PostEditor'
 import RelayInfo from '@/components/RelayInfo'
 import { Button } from '@/components/ui/button'
@@ -9,7 +9,7 @@ import { useFeed } from '@/providers/FeedProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { TPageRef } from '@/types'
-import { Info, PencilLine, Search } from 'lucide-react'
+import { Compass, Info, LogIn, PencilLine, Search, Sparkles } from 'lucide-react'
 import {
   Dispatch,
   forwardRef,
@@ -28,8 +28,8 @@ const NoteListPage = forwardRef((_, ref) => {
   const { t } = useTranslation()
   const { addRelayUrls, removeRelayUrls } = useCurrentRelays()
   const layoutRef = useRef<TPageRef>(null)
-  const { pubkey, checkLogin } = useNostr()
-  const { feedInfo, relayUrls, isReady } = useFeed()
+  const { pubkey } = useNostr()
+  const { feedInfo, relayUrls, isReady, switchFeed } = useFeed()
   const [showRelayDetails, setShowRelayDetails] = useState(false)
   useImperativeHandle(ref, () => layoutRef.current)
 
@@ -48,17 +48,25 @@ const NoteListPage = forwardRef((_, ref) => {
     }
   }, [relayUrls])
 
+  if (!feedInfo) {
+    return (
+      <PrimaryPageLayout
+        pageName="home"
+        ref={layoutRef}
+        titlebar={<NoteListPageTitlebar layoutRef={layoutRef} />}
+        displayScrollToTopButton
+      >
+        <WelcomeGuide />
+      </PrimaryPageLayout>
+    )
+  }
+
   let content: React.ReactNode = null
   if (!isReady) {
     content = <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
   } else if (feedInfo.feedType === 'following' && !pubkey) {
-    content = (
-      <div className="flex justify-center w-full">
-        <Button size="lg" onClick={() => checkLogin()}>
-          {t('Please login to view following feed')}
-        </Button>
-      </div>
-    )
+    switchFeed(null)
+    return null
   } else if (feedInfo.feedType === 'following') {
     content = <FollowingFeed />
   } else {
@@ -169,3 +177,38 @@ function SearchButton() {
     </Button>
   )
 }
+
+function WelcomeGuide() {
+  const { t } = useTranslation()
+  const { navigate } = usePrimaryPage()
+  const { checkLogin } = useNostr()
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] px-4 text-center space-y-6">
+      <div className="space-y-2">
+        <div className="flex items-center w-full justify-center gap-2">
+          <Sparkles className="text-yellow-400" />
+          <h2 className="text-2xl font-bold">{t('Welcome to Jumble')}</h2>
+          <Sparkles className="text-yellow-400" />
+        </div>
+        <p className="text-muted-foreground max-w-md">
+          {t(
+            'Jumble is a client focused on browsing relays. Get started by exploring interesting relays or login to view your following feed.'
+          )}
+        </p>
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-3 w-full max-w-md">
+        <Button size="lg" className="w-full" onClick={() => navigate('explore')}>
+          <Compass className="size-5" />
+          {t('Explore Relays')}
+        </Button>
+
+        <Button size="lg" className="w-full" variant="outline" onClick={() => checkLogin()}>
+          <LogIn className="size-5" />
+          {t('Login')}
+        </Button>
+      </div>
+    </div>
+  )
+}