From 8e0b91888fd5bb3d54a941adbcc9a7c0fd2fd5d2 Mon Sep 17 00:00:00 2001
From: Cody Tseng <codytseng98@gmail.com>
Date: Mon, 2 Dec 2024 23:43:08 +0800
Subject: [PATCH] feat: small screen (#8)

---
 src/renderer/index.html                       |  1 +
 src/renderer/src/App.tsx                      | 27 +++---
 src/renderer/src/PageManager.tsx              | 33 ++++++-
 .../src/components/Embedded/EmbeddedNote.tsx  | 10 ++-
 .../Embedded/EmbeddedWebsocketUrl.tsx         |  7 +-
 .../components/NoteCard/RepostNoteCard.tsx    | 21 +----
 .../components/NoteCard/ShortTextNoteCard.tsx | 44 +++++++---
 .../src/components/NoteList/index.tsx         |  2 +-
 .../src/components/RelaySettings/index.tsx    |  4 +-
 .../index.tsx                                 | 18 +++-
 .../components/ScrollToTopButton/index.tsx    | 12 ++-
 .../src/components/SearchDialog/index.tsx     |  7 +-
 src/renderer/src/components/Sidebar/index.tsx |  4 +-
 .../src/components/Titlebar/index.tsx         | 15 +++-
 src/renderer/src/components/ui/command.tsx    | 13 ++-
 src/renderer/src/components/ui/input.tsx      |  2 +-
 .../src/layouts/PrimaryPageLayout/index.tsx   | 34 +++++--
 .../src/layouts/SecondaryPageLayout/index.tsx | 18 +++-
 src/renderer/src/lib/link.ts                  | 13 ++-
 .../secondary/FollowingListPage/index.tsx     |  2 +-
 .../pages/secondary/NoteListPage/index.tsx    | 29 ++++--
 .../src/pages/secondary/NotePage/index.tsx    | 16 ++--
 .../pages/secondary/ProfileListPage/index.tsx |  2 +-
 .../src/pages/secondary/ProfilePage/index.tsx | 88 ++++++++++---------
 .../secondary/RelaySettingsPage/index.tsx     | 15 ++++
 .../src/providers/ScreenSizeProvider.tsx      | 56 ++++++++++++
 src/renderer/src/routes.tsx                   |  4 +-
 27 files changed, 371 insertions(+), 126 deletions(-)
 rename src/renderer/src/components/{RelaySettingsPopover => RelaySettingsButton}/index.tsx (64%)
 create mode 100644 src/renderer/src/pages/secondary/RelaySettingsPage/index.tsx
 create mode 100644 src/renderer/src/providers/ScreenSizeProvider.tsx
diff --git a/src/renderer/index.html b/src/renderer/index.html
index a16dfda..0bf9f0a 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jumble</title>
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <!-- <meta
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index e0da7cf..888e9bb 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -9,23 +9,26 @@ import { FollowListProvider } from './providers/FollowListProvider'
 import { NostrProvider } from './providers/NostrProvider'
 import { NoteStatsProvider } from './providers/NoteStatsProvider'
 import { RelaySettingsProvider } from './providers/RelaySettingsProvider'
+import { ScreenSizeProvider } from './providers/ScreenSizeProvider'
 
 export default function App(): JSX.Element {
   return (
     <div className="h-screen">
       <ThemeProvider>
-        <RelaySettingsProvider>
-          <NostrProvider>
-            <FollowListProvider>
-              <NoteStatsProvider>
-                <PageManager>
-                  <NoteListPage />
-                </PageManager>
-                <Toaster />
-              </NoteStatsProvider>
-            </FollowListProvider>
-          </NostrProvider>
-        </RelaySettingsProvider>
+        <ScreenSizeProvider>
+          <RelaySettingsProvider>
+            <NostrProvider>
+              <FollowListProvider>
+                <NoteStatsProvider>
+                  <PageManager>
+                    <NoteListPage />
+                  </PageManager>
+                  <Toaster />
+                </NoteStatsProvider>
+              </FollowListProvider>
+            </NostrProvider>
+          </RelaySettingsProvider>
+        </ScreenSizeProvider>
       </ThemeProvider>
     </div>
   )
diff --git a/src/renderer/src/PageManager.tsx b/src/renderer/src/PageManager.tsx
index bb0e389..47dc5ae 100644
--- a/src/renderer/src/PageManager.tsx
+++ b/src/renderer/src/PageManager.tsx
@@ -9,6 +9,7 @@ import HomePage from '@renderer/pages/secondary/HomePage'
 import NotFoundPage from '@renderer/pages/secondary/NotFoundPage'
 import { cloneElement, createContext, useContext, useEffect, useState } from 'react'
 import { routes } from './routes'
+import { useScreenSize } from './providers/ScreenSizeProvider'
 
 type TPrimaryPageContext = {
   refresh: () => void
@@ -54,6 +55,7 @@ export function PageManager({
 }) {
   const [primaryPageKey, setPrimaryPageKey] = useState<number>(0)
   const [secondaryStack, setSecondaryStack] = useState<TStackItem[]>([])
+  const { isSmallScreen } = useScreenSize()
 
   useEffect(() => {
     if (window.location.pathname !== '/') {
@@ -83,6 +85,7 @@ export function PageManager({
     }
 
     window.addEventListener('popstate', onPopState)
+
     return () => {
       window.removeEventListener('popstate', onPopState)
     }
@@ -106,6 +109,34 @@ export function PageManager({
     window.history.back()
   }
 
+  if (isSmallScreen) {
+    return (
+      <PrimaryPageContext.Provider value={{ refresh: refreshPrimary }}>
+        <SecondaryPageContext.Provider value={{ push: pushSecondary, pop: popSecondary }}>
+          <div className="h-full">
+            {!!secondaryStack.length &&
+              secondaryStack.map((item, index) => (
+                <div
+                  key={item.index}
+                  className="absolute top-0 left-0 w-full h-full bg-background"
+                  style={{ zIndex: index + 1 }}
+                >
+                  {item.component}
+                </div>
+              ))}
+            <div
+              key={primaryPageKey}
+              className="absolute top-0 left-0 w-full h-full bg-background"
+              style={{ zIndex: 0 }}
+            >
+              {children}
+            </div>
+          </div>
+        </SecondaryPageContext.Provider>
+      </PrimaryPageContext.Provider>
+    )
+  }
+
   return (
     <PrimaryPageContext.Provider value={{ refresh: refreshPrimary }}>
       <SecondaryPageContext.Provider value={{ push: pushSecondary, pop: popSecondary }}>
@@ -124,7 +155,7 @@ export function PageManager({
                   <div
                     key={item.index}
                     className="absolute top-0 left-0 w-full h-full bg-background"
-                    style={{ zIndex: index }}
+                    style={{ zIndex: index + 1 }}
                   >
                     {item.component}
                   </div>
diff --git a/src/renderer/src/components/Embedded/EmbeddedNote.tsx b/src/renderer/src/components/Embedded/EmbeddedNote.tsx
index 3bae6f4..b55786c 100644
--- a/src/renderer/src/components/Embedded/EmbeddedNote.tsx
+++ b/src/renderer/src/components/Embedded/EmbeddedNote.tsx
@@ -1,5 +1,5 @@
 import { useFetchEvent } from '@renderer/hooks'
-import { toNoStrudelArticle, toNoStrudelNote } from '@renderer/lib/link'
+import { toNoStrudelArticle, toNoStrudelNote, toNoStrudelStream } from '@renderer/lib/link'
 import { kinds } from 'nostr-tools'
 import ShortTextNoteCard from '../NoteCard/ShortTextNoteCard'
 
@@ -7,11 +7,15 @@ export function EmbeddedNote({ noteId }: { noteId: string }) {
   const { event } = useFetchEvent(noteId)
 
   return event && event.kind === kinds.ShortTextNote ? (
-    <ShortTextNoteCard size="small" className="mt-2 w-full" event={event} hideStats />
+    <ShortTextNoteCard className="mt-2 w-full" event={event} embedded />
   ) : (
     <a
       href={
-        event?.kind === kinds.LongFormArticle ? toNoStrudelArticle(noteId) : toNoStrudelNote(noteId)
+        event?.kind === kinds.LongFormArticle
+          ? toNoStrudelArticle(noteId)
+          : event?.kind === kinds.LiveEvent
+            ? toNoStrudelStream(noteId)
+            : toNoStrudelNote(noteId)
       }
       target="_blank"
       className="text-highlight hover:underline"
diff --git a/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx b/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx
index a769779..835b1e2 100644
--- a/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx
+++ b/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx
@@ -1,14 +1,15 @@
-import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
+import { useSecondaryPage } from '@renderer/PageManager'
+import { toNoteList } from '@renderer/lib/link'
 import { TEmbeddedRenderer } from './types'
 
 export function EmbeddedWebsocketUrl({ url }: { url: string }) {
-  const { setTemporaryRelayUrls } = useRelaySettings()
+  const { push } = useSecondaryPage()
   return (
     <span
       className="cursor-pointer px-1 rounded-md text-highlight border border-highlight/60 hover:border-highlight hover:bg-muted/60"
       onClick={(e) => {
         e.stopPropagation()
-        setTemporaryRelayUrls([url])
+        push(toNoteList({ relay: url }))
       }}
     >
       {url}
diff --git a/src/renderer/src/components/NoteCard/RepostNoteCard.tsx b/src/renderer/src/components/NoteCard/RepostNoteCard.tsx
index d78ffa4..e7b1a26 100644
--- a/src/renderer/src/components/NoteCard/RepostNoteCard.tsx
+++ b/src/renderer/src/components/NoteCard/RepostNoteCard.tsx
@@ -1,13 +1,9 @@
 import client from '@renderer/services/client.service'
-import { Repeat2 } from 'lucide-react'
 import { Event, kinds, verifyEvent } from 'nostr-tools'
-import Username from '../Username'
-import ShortTextNoteCard from './ShortTextNoteCard'
-import { useTranslation } from 'react-i18next'
 import { useMemo } from 'react'
+import ShortTextNoteCard from './ShortTextNoteCard'
 
 export default function RepostNoteCard({ event, className }: { event: Event; className?: string }) {
-  const { t } = useTranslation()
   const targetEvent = useMemo(() => {
     const targetEvent = event.content ? (JSON.parse(event.content) as Event) : null
     try {
@@ -23,18 +19,5 @@ export default function RepostNoteCard({ event, className }: { event: Event; cla
   }, [event])
   if (!targetEvent) return null
 
-  return (
-    <div className={className}>
-      <div className="flex gap-1 mb-1 pl-4 text-sm items-center text-muted-foreground">
-        <Repeat2 size={16} className="shrink-0" />
-        <Username
-          userId={event.pubkey}
-          className="font-semibold truncate"
-          skeletonClassName="h-3"
-        />
-        <div>{t('reposted')}</div>
-      </div>
-      <ShortTextNoteCard event={targetEvent} />
-    </div>
-  )
+  return <ShortTextNoteCard className={className} reposter={event.pubkey} event={targetEvent} />
 }
diff --git a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
index afea5d2..277eaef 100644
--- a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
+++ b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
@@ -1,21 +1,24 @@
-import { Card } from '@renderer/components/ui/card'
 import { useFetchEvent } from '@renderer/hooks'
 import { getParentEventId, getRootEventId } from '@renderer/lib/event'
 import { toNote } from '@renderer/lib/link'
+import { cn } from '@renderer/lib/utils'
 import { useSecondaryPage } from '@renderer/PageManager'
+import { Repeat2 } from 'lucide-react'
 import { Event } from 'nostr-tools'
+import { useTranslation } from 'react-i18next'
 import Note from '../Note'
+import Username from '../Username'
 
 export default function ShortTextNoteCard({
   event,
   className,
-  size = 'normal',
-  hideStats = false
+  reposter,
+  embedded
 }: {
   event: Event
   className?: string
-  size?: 'normal' | 'small'
-  hideStats?: boolean
+  reposter?: string
+  embedded?: boolean
 }) {
   const { push } = useSecondaryPage()
   const { event: rootEvent } = useFetchEvent(getRootEventId(event))
@@ -29,16 +32,37 @@ export default function ShortTextNoteCard({
         push(toNote(event.id))
       }}
     >
-      <Card
-        className={`hover:bg-muted/50 text-left cursor-pointer ${size === 'normal' ? 'p-4' : 'p-3'}`}
+      <RepostDescription reposter={reposter} className="max-sm:hidden pl-4" />
+      <div
+        className={`hover:bg-muted/50 text-left cursor-pointer ${embedded ? 'p-3 border rounded-lg' : 'p-4 sm:border sm:rounded-lg max-sm:border-b'}`}
       >
+        <RepostDescription reposter={reposter} className="sm:hidden" />
         <Note
-          size={size}
+          size={embedded ? 'small' : 'normal'}
           event={event}
           parentEvent={parentEvent ?? rootEvent}
-          hideStats={hideStats}
+          hideStats={embedded}
         />
-      </Card>
+      </div>
+    </div>
+  )
+}
+
+function RepostDescription({
+  reposter,
+  className
+}: {
+  reposter?: string | null
+  className?: string
+}) {
+  const { t } = useTranslation()
+  if (!reposter) return null
+
+  return (
+    <div className={cn('flex gap-1 text-sm items-center text-muted-foreground mb-1', className)}>
+      <Repeat2 size={16} className="shrink-0" />
+      <Username userId={reposter} className="font-semibold truncate" skeletonClassName="h-3" />
+      <div>{t('reposted')}</div>
     </div>
   )
 }
diff --git a/src/renderer/src/components/NoteList/index.tsx b/src/renderer/src/components/NoteList/index.tsx
index 611efe7..2fefa39 100644
--- a/src/renderer/src/components/NoteList/index.tsx
+++ b/src/renderer/src/components/NoteList/index.tsx
@@ -127,7 +127,7 @@ export default function NoteList({
           </Button>
         </div>
       )}
-      <div className={cn('flex flex-col gap-4', className)}>
+      <div className={cn('flex flex-col sm:gap-4', className)}>
         {events.map((event, i) => (
           <NoteCard key={`${i}-${event.id}`} className="w-full" event={event} />
         ))}
diff --git a/src/renderer/src/components/RelaySettings/index.tsx b/src/renderer/src/components/RelaySettings/index.tsx
index cc2cee1..72973ee 100644
--- a/src/renderer/src/components/RelaySettings/index.tsx
+++ b/src/renderer/src/components/RelaySettings/index.tsx
@@ -8,7 +8,7 @@ import RelayGroup from './RelayGroup'
 import TemporaryRelayGroup from './TemporaryRelayGroup'
 import { useTranslation } from 'react-i18next'
 
-export default function RelaySettings() {
+export default function RelaySettings({ hideTitle = false }: { hideTitle?: boolean }) {
   const { t } = useTranslation()
   const { relayGroups, addRelayGroup } = useRelaySettings()
   const [newGroupName, setNewGroupName] = useState('')
@@ -47,7 +47,7 @@ export default function RelaySettings() {
   return (
     <RelaySettingsComponentProvider>
       <div ref={dummyRef} tabIndex={-1} style={{ position: 'absolute', opacity: 0 }}></div>
-      <div className="text-lg font-semibold mb-4">{t('Relay Settings')}</div>
+      {!hideTitle && <div className="text-lg font-semibold mb-4">{t('Relay Settings')}</div>}
       <div className="space-y-2">
         <TemporaryRelayGroup />
         {relayGroups.map((group, index) => (
diff --git a/src/renderer/src/components/RelaySettingsPopover/index.tsx b/src/renderer/src/components/RelaySettingsButton/index.tsx
similarity index 64%
rename from src/renderer/src/components/RelaySettingsPopover/index.tsx
rename to src/renderer/src/components/RelaySettingsButton/index.tsx
index add4a4d..14bd77b 100644
--- a/src/renderer/src/components/RelaySettingsPopover/index.tsx
+++ b/src/renderer/src/components/RelaySettingsButton/index.tsx
@@ -2,15 +2,31 @@ import RelaySettings from '@renderer/components/RelaySettings'
 import { Button } from '@renderer/components/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover'
 import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import { toRelaySettings } from '@renderer/lib/link'
+import { SecondaryPageLink } from '@renderer/PageManager'
+import { useScreenSize } from '@renderer/providers/ScreenSizeProvider'
 import { Server } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
-export default function RelaySettingsPopover({
+export default function RelaySettingsButton({
   variant = 'titlebar'
 }: {
   variant?: 'titlebar' | 'sidebar'
 }) {
   const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
+
+  if (isSmallScreen) {
+    return (
+      <SecondaryPageLink to={toRelaySettings()}>
+        <Button variant={variant} size={variant} title={t('Relay settings')}>
+          <Server />
+          {variant === 'sidebar' && <div>{t('SidebarRelays')}</div>}
+        </Button>
+      </SecondaryPageLink>
+    )
+  }
+
   return (
     <Popover>
       <PopoverTrigger asChild>
diff --git a/src/renderer/src/components/ScrollToTopButton/index.tsx b/src/renderer/src/components/ScrollToTopButton/index.tsx
index 2196914..fa333a3 100644
--- a/src/renderer/src/components/ScrollToTopButton/index.tsx
+++ b/src/renderer/src/components/ScrollToTopButton/index.tsx
@@ -1,11 +1,14 @@
 import { Button } from '@renderer/components/ui/button'
+import { cn } from '@renderer/lib/utils'
 import { ChevronUp } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 export default function ScrollToTopButton({
-  scrollAreaRef
+  scrollAreaRef,
+  className
 }: {
   scrollAreaRef: React.RefObject<HTMLDivElement>
+  className?: string
 }) {
   const [showScrollToTop, setShowScrollToTop] = useState(false)
 
@@ -15,7 +18,7 @@ export default function ScrollToTopButton({
 
   const handleScroll = () => {
     if (scrollAreaRef.current) {
-      setShowScrollToTop(scrollAreaRef.current.scrollTop > 1000)
+      setShowScrollToTop(scrollAreaRef.current.scrollTop > 600)
     }
   }
 
@@ -30,7 +33,10 @@ export default function ScrollToTopButton({
   return (
     <Button
       variant="secondary-2"
-      className={`absolute bottom-8 right-2 rounded-full w-10 h-10 p-0 hover:text-background transition-transform ${showScrollToTop ? '' : 'translate-y-20'}`}
+      className={cn(
+        `absolute bottom-8 right-2 rounded-full w-10 h-10 p-0 hover:text-background transition-transform ${showScrollToTop ? '' : 'translate-y-20'}`,
+        className
+      )}
       onClick={handleScrollToTop}
     >
       <ChevronUp />
diff --git a/src/renderer/src/components/SearchDialog/index.tsx b/src/renderer/src/components/SearchDialog/index.tsx
index 717e8e8..a5c7997 100644
--- a/src/renderer/src/components/SearchDialog/index.tsx
+++ b/src/renderer/src/components/SearchDialog/index.tsx
@@ -7,6 +7,7 @@ import {
   CommandList
 } from '@renderer/components/ui/command'
 import { useSearchProfiles } from '@renderer/hooks'
+import { isMacOS } from '@renderer/lib/env'
 import { toNote, toNoteList, toProfile, toProfileList } from '@renderer/lib/link'
 import { generateImageByPubkey } from '@renderer/lib/pubkey'
 import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
@@ -80,7 +81,11 @@ export function SearchDialog({ open, setOpen }: { open: boolean; setOpen: Dispat
   }, [input])
 
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
+    <CommandDialog
+      open={open}
+      onOpenChange={setOpen}
+      classNames={{ content: isMacOS() ? 'max-sm:top-9' : 'max-sm:top-0' }}
+    >
       <CommandInput value={input} onValueChange={setInput} />
       <CommandList>{list}</CommandList>
     </CommandDialog>
diff --git a/src/renderer/src/components/Sidebar/index.tsx b/src/renderer/src/components/Sidebar/index.tsx
index 35b01d2..8a318c8 100644
--- a/src/renderer/src/components/Sidebar/index.tsx
+++ b/src/renderer/src/components/Sidebar/index.tsx
@@ -8,7 +8,7 @@ import AboutInfoDialog from '../AboutInfoDialog'
 import AccountButton from '../AccountButton'
 import PostButton from '../PostButton'
 import RefreshButton from '../RefreshButton'
-import RelaySettingsPopover from '../RelaySettingsPopover'
+import RelaySettingsButton from '../RelaySettingsButton'
 import SearchButton from '../SearchButton'
 
 export default function PrimaryPageSidebar() {
@@ -20,7 +20,7 @@ export default function PrimaryPageSidebar() {
           <SecondaryPageLink to={toHome()}>Jumble</SecondaryPageLink>
         </div>
         <PostButton variant="sidebar" />
-        <RelaySettingsPopover variant="sidebar" />
+        <RelaySettingsButton variant="sidebar" />
         <SearchButton variant="sidebar" />
         <RefreshButton variant="sidebar" />
         {!IS_ELECTRON && (
diff --git a/src/renderer/src/components/Titlebar/index.tsx b/src/renderer/src/components/Titlebar/index.tsx
index aedff5d..b3beef3 100644
--- a/src/renderer/src/components/Titlebar/index.tsx
+++ b/src/renderer/src/components/Titlebar/index.tsx
@@ -1,4 +1,6 @@
+import { isMacOS } from '@renderer/lib/env'
 import { cn } from '@renderer/lib/utils'
+import { useScreenSize } from '@renderer/providers/ScreenSizeProvider'
 
 export function Titlebar({
   children,
@@ -7,10 +9,21 @@ export function Titlebar({
   children?: React.ReactNode
   className?: string
 }) {
+  const { isSmallScreen } = useScreenSize()
+
+  if (isMacOS() && isSmallScreen) {
+    return (
+      <div className="absolute top-0 w-full z-50 bg-background/80 backdrop-blur-md font-semibold">
+        <div className="draggable h-9 w-full" />
+        <div className={cn('h-11 flex gap-1 items-center', className)}>{children}</div>
+      </div>
+    )
+  }
+
   return (
     <div
       className={cn(
-        'draggable absolute top-0 w-full h-9 z-50 bg-background/80 backdrop-blur-md flex items-center font-semibold space-x-1 px-2',
+        'draggable absolute top-0 w-full h-9 z-50 bg-background/80 backdrop-blur-md flex items-center font-semibold gap-1 px-2',
         className
       )}
     >
diff --git a/src/renderer/src/components/ui/command.tsx b/src/renderer/src/components/ui/command.tsx
index 4bcf1bb..a338194 100644
--- a/src/renderer/src/components/ui/command.tsx
+++ b/src/renderer/src/components/ui/command.tsx
@@ -28,14 +28,23 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-const CommandDialog = ({ children, ...props }: DialogProps) => {
+const CommandDialog = ({
+  children,
+  classNames,
+  ...props
+}: DialogProps & { classNames?: { content?: string } }) => {
   return (
     <Dialog {...props}>
       <DialogHeader className="hidden">
         <DialogTitle />
         <DialogDescription />
       </DialogHeader>
-      <DialogContent className="overflow-hidden p-0 shadow-lg top-4 translate-y-0 data-[state=closed]:slide-out-to-top-0 data-[state=open]:slide-in-from-top-0">
+      <DialogContent
+        className={cn(
+          'overflow-hidden p-0 shadow-lg top-4 translate-y-0 data-[state=closed]:slide-out-to-top-0 data-[state=open]:slide-in-from-top-0',
+          classNames?.content
+        )}
+      >
         <Command
           shouldFilter={false}
           className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
diff --git a/src/renderer/src/components/ui/input.tsx b/src/renderer/src/components/ui/input.tsx
index 06a2656..c0bd8c5 100644
--- a/src/renderer/src/components/ui/input.tsx
+++ b/src/renderer/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-8 w-full rounded-lg p-2 border border-muted ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-lg p-2 bg-background border border-muted ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/src/renderer/src/layouts/PrimaryPageLayout/index.tsx b/src/renderer/src/layouts/PrimaryPageLayout/index.tsx
index 18fd153..932d13d 100644
--- a/src/renderer/src/layouts/PrimaryPageLayout/index.tsx
+++ b/src/renderer/src/layouts/PrimaryPageLayout/index.tsx
@@ -1,12 +1,14 @@
 import AccountButton from '@renderer/components/AccountButton'
 import PostButton from '@renderer/components/PostButton'
 import RefreshButton from '@renderer/components/RefreshButton'
-import RelaySettingsPopover from '@renderer/components/RelaySettingsPopover'
+import RelaySettingsButton from '@renderer/components/RelaySettingsButton'
 import ScrollToTopButton from '@renderer/components/ScrollToTopButton'
 import SearchButton from '@renderer/components/SearchButton'
 import { Titlebar } from '@renderer/components/Titlebar'
 import { ScrollArea } from '@renderer/components/ui/scroll-area'
 import { isMacOS } from '@renderer/lib/env'
+import { cn } from '@renderer/lib/utils'
+import { useScreenSize } from '@renderer/providers/ScreenSizeProvider'
 import { forwardRef, useImperativeHandle, useRef } from 'react'
 
 const PrimaryPageLayout = forwardRef(({ children }: { children?: React.ReactNode }, ref) => {
@@ -23,9 +25,15 @@ const PrimaryPageLayout = forwardRef(({ children }: { children?: React.ReactNode
   )
 
   return (
-    <ScrollArea ref={scrollAreaRef} className="h-full w-full" scrollBarClassName="pt-9 xl:pt-0">
+    <ScrollArea
+      ref={scrollAreaRef}
+      className="h-full w-full"
+      scrollBarClassName="pt-9 max-sm:pt-0 xl:pt-0"
+    >
       <PrimaryPageTitlebar />
-      <div className="px-4 pb-4 pt-11 xl:pt-4">{children}</div>
+      <div className={cn('sm:px-4 pb-4 pt-11 xl:pt-4', isMacOS() ? 'max-sm:pt-20' : 'max-sm:pt-9')}>
+        {children}
+      </div>
       <ScrollToTopButton scrollAreaRef={scrollAreaRef} />
     </ScrollArea>
   )
@@ -37,7 +45,23 @@ export type TPrimaryPageLayoutRef = {
   scrollToTop: () => void
 }
 
-export function PrimaryPageTitlebar() {
+function PrimaryPageTitlebar() {
+  const { isSmallScreen } = useScreenSize()
+
+  if (isSmallScreen) {
+    return (
+      <Titlebar className="justify-between px-4">
+        <div className="text-2xl font-extrabold font-mono">Jumble</div>
+        <div className="flex gap-2 items-center">
+          <SearchButton />
+          <PostButton />
+          <RelaySettingsButton />
+          <AccountButton />
+        </div>
+      </Titlebar>
+    )
+  }
+
   return (
     <Titlebar className={`justify-between xl:hidden ${isMacOS() ? 'pl-20' : ''}`}>
       <div className="flex gap-2 items-center">
@@ -47,7 +71,7 @@ export function PrimaryPageTitlebar() {
       </div>
       <div className="flex gap-2 items-center">
         <RefreshButton />
-        <RelaySettingsPopover />
+        <RelaySettingsButton />
       </div>
     </Titlebar>
   )
diff --git a/src/renderer/src/layouts/SecondaryPageLayout/index.tsx b/src/renderer/src/layouts/SecondaryPageLayout/index.tsx
index cf4fdcb..3880583 100644
--- a/src/renderer/src/layouts/SecondaryPageLayout/index.tsx
+++ b/src/renderer/src/layouts/SecondaryPageLayout/index.tsx
@@ -3,6 +3,9 @@ import ScrollToTopButton from '@renderer/components/ScrollToTopButton'
 import ThemeToggle from '@renderer/components/ThemeToggle'
 import { Titlebar } from '@renderer/components/Titlebar'
 import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import { isMacOS } from '@renderer/lib/env'
+import { cn } from '@renderer/lib/utils'
+import { useScreenSize } from '@renderer/providers/ScreenSizeProvider'
 import { useRef } from 'react'
 
 export default function SecondaryPageLayout({
@@ -18,7 +21,9 @@ export default function SecondaryPageLayout({
   return (
     <ScrollArea ref={scrollAreaRef} className="h-full" scrollBarClassName="pt-9">
       <SecondaryPageTitlebar content={titlebarContent} hideBackButton={hideBackButton} />
-      <div className="px-4 pb-4 pt-11 w-full h-full">{children}</div>
+      <div className={cn('sm:px-4 pb-4 pt-11 w-full h-full', isMacOS() ? 'max-sm:pt-20' : '')}>
+        {children}
+      </div>
       <ScrollToTopButton scrollAreaRef={scrollAreaRef} />
     </ScrollArea>
   )
@@ -31,6 +36,17 @@ export function SecondaryPageTitlebar({
   content?: React.ReactNode
   hideBackButton?: boolean
 }): JSX.Element {
+  const { isSmallScreen } = useScreenSize()
+
+  if (isSmallScreen) {
+    return (
+      <Titlebar className="pl-2">
+        <BackButton hide={hideBackButton} />
+        <div className="truncate text-lg">{content}</div>
+      </Titlebar>
+    )
+  }
+
   return (
     <Titlebar className="justify-between">
       <div className="flex items-center gap-1 flex-1 w-0">
diff --git a/src/renderer/src/lib/link.ts b/src/renderer/src/lib/link.ts
index 84b8a91..78359e1 100644
--- a/src/renderer/src/lib/link.ts
+++ b/src/renderer/src/lib/link.ts
@@ -1,10 +1,19 @@
 export const toHome = () => '/'
 export const toNote = (eventId: string) => `/note/${eventId}`
-export const toNoteList = ({ hashtag, search }: { hashtag?: string; search?: string }) => {
+export const toNoteList = ({
+  hashtag,
+  search,
+  relay
+}: {
+  hashtag?: string
+  search?: string
+  relay?: string
+}) => {
   const path = '/note'
   const query = new URLSearchParams()
   if (hashtag) query.set('t', hashtag.toLowerCase())
   if (search) query.set('s', search)
+  if (relay) query.set('relay', relay)
   return `${path}?${query.toString()}`
 }
 export const toProfile = (pubkey: string) => `/user/${pubkey}`
@@ -15,7 +24,9 @@ export const toProfileList = ({ search }: { search?: string }) => {
   return `${path}?${query.toString()}`
 }
 export const toFollowingList = (pubkey: string) => `/user/${pubkey}/following`
+export const toRelaySettings = () => '/relay-settings'
 
 export const toNoStrudelProfile = (id: string) => `https://nostrudel.ninja/#/u/${id}`
 export const toNoStrudelNote = (id: string) => `https://nostrudel.ninja/#/n/${id}`
 export const toNoStrudelArticle = (id: string) => `https://nostrudel.ninja/#/articles/${id}`
+export const toNoStrudelStream = (id: string) => `https://nostrudel.ninja/#/streams/${id}`
diff --git a/src/renderer/src/pages/secondary/FollowingListPage/index.tsx b/src/renderer/src/pages/secondary/FollowingListPage/index.tsx
index 30773d0..3961acb 100644
--- a/src/renderer/src/pages/secondary/FollowingListPage/index.tsx
+++ b/src/renderer/src/pages/secondary/FollowingListPage/index.tsx
@@ -51,7 +51,7 @@ export default function FollowingListPage({ id }: { id?: string }) {
           : t('following')
       }
     >
-      <div className="space-y-2">
+      <div className="space-y-2 max-sm:px-4">
         {visibleFollowings.map((pubkey, index) => (
           <UserItem key={`${index}-${pubkey}`} pubkey={pubkey} />
         ))}
diff --git a/src/renderer/src/pages/secondary/NoteListPage/index.tsx b/src/renderer/src/pages/secondary/NoteListPage/index.tsx
index 6c73f08..39cedbe 100644
--- a/src/renderer/src/pages/secondary/NoteListPage/index.tsx
+++ b/src/renderer/src/pages/secondary/NoteListPage/index.tsx
@@ -1,6 +1,7 @@
 import NoteList from '@renderer/components/NoteList'
 import { useSearchParams } from '@renderer/hooks'
 import SecondaryPageLayout from '@renderer/layouts/SecondaryPageLayout'
+import { isWebsocketUrl } from '@renderer/lib/url'
 import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
 import { Filter } from 'nostr-tools'
 import { useMemo } from 'react'
@@ -10,19 +11,31 @@ export default function NoteListPage() {
   const { t } = useTranslation()
   const { relayUrls, searchableRelayUrls } = useRelaySettings()
   const { searchParams } = useSearchParams()
-  const [title, filter] = useMemo<[string, Filter] | [undefined, undefined]>(() => {
+  const {
+    title = '',
+    filter,
+    specificRelayUrl
+  } = useMemo<{
+    title?: string
+    filter?: Filter
+    specificRelayUrl?: string
+  }>(() => {
     const hashtag = searchParams.get('t')
     if (hashtag) {
-      return [`# ${hashtag}`, { '#t': [hashtag] }]
+      return { title: `# ${hashtag}`, filter: { '#t': [hashtag] } }
     }
     const search = searchParams.get('s')
     if (search) {
-      return [`${t('search')}: ${search}`, { search }]
+      return { title: `${t('search')}: ${search}`, filter: { search } }
     }
-    return [undefined, undefined]
+    const relayUrl = searchParams.get('relay')
+    if (relayUrl && isWebsocketUrl(relayUrl)) {
+      return { title: relayUrl, specificRelayUrl: relayUrl }
+    }
+    return {}
   }, [searchParams])
 
-  if (!filter || (filter.search && searchableRelayUrls.length === 0)) {
+  if (filter?.search && searchableRelayUrls.length === 0) {
     return (
       <SecondaryPageLayout titlebarContent={title}>
         <div className="text-center text-sm text-muted-foreground">
@@ -34,7 +47,11 @@ export default function NoteListPage() {
 
   return (
     <SecondaryPageLayout titlebarContent={title}>
-      <NoteList key={title} filter={filter} relayUrls={relayUrls} />
+      <NoteList
+        key={title}
+        filter={filter}
+        relayUrls={specificRelayUrl ? [specificRelayUrl] : relayUrls}
+      />
     </SecondaryPageLayout>
   )
 }
diff --git a/src/renderer/src/pages/secondary/NotePage/index.tsx b/src/renderer/src/pages/secondary/NotePage/index.tsx
index 9e25be8..8d89e46 100644
--- a/src/renderer/src/pages/secondary/NotePage/index.tsx
+++ b/src/renderer/src/pages/secondary/NotePage/index.tsx
@@ -22,8 +22,10 @@ export default function NotePage({ id }: { id?: string }) {
 
   if (!event && isFetching) {
     return (
-      <SecondaryPageLayout titlebarContent="note">
-        <Skeleton className="w-10 h-10 rounded-full" />
+      <SecondaryPageLayout titlebarContent={t('note')}>
+        <div className="max-sm:px-4">
+          <Skeleton className="w-10 h-10 rounded-full" />
+        </div>
       </SecondaryPageLayout>
     )
   }
@@ -31,11 +33,13 @@ export default function NotePage({ id }: { id?: string }) {
 
   return (
     <SecondaryPageLayout titlebarContent={t('note')}>
-      <ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
-      <ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />
-      <Note key={`note-${event.id}`} event={event} fetchNoteStats />
+      <div className="max-sm:px-4">
+        <ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
+        <ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />
+        <Note key={`note-${event.id}`} event={event} fetchNoteStats />
+      </div>
       <Separator className="my-4" />
-      <ReplyNoteList key={`reply-note-list-${event.id}`} event={event} />
+      <ReplyNoteList key={`reply-note-list-${event.id}`} event={event} className="max-sm:px-2" />
     </SecondaryPageLayout>
   )
 }
diff --git a/src/renderer/src/pages/secondary/ProfileListPage/index.tsx b/src/renderer/src/pages/secondary/ProfileListPage/index.tsx
index b116fd6..007c7fd 100644
--- a/src/renderer/src/pages/secondary/ProfileListPage/index.tsx
+++ b/src/renderer/src/pages/secondary/ProfileListPage/index.tsx
@@ -78,7 +78,7 @@ export default function ProfileListPage() {
 
   return (
     <SecondaryPageLayout titlebarContent={title}>
-      <div className="space-y-2">
+      <div className="space-y-2 max-sm:px-4">
         {Array.from(pubkeySet).map((pubkey, index) => (
           <UserItem key={`${index}-${pubkey}`} pubkey={pubkey} />
         ))}
diff --git a/src/renderer/src/pages/secondary/ProfilePage/index.tsx b/src/renderer/src/pages/secondary/ProfilePage/index.tsx
index a68d146..79cfb76 100644
--- a/src/renderer/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/renderer/src/pages/secondary/ProfilePage/index.tsx
@@ -14,12 +14,12 @@ import { generateImageByPubkey } from '@renderer/lib/pubkey'
 import { SecondaryPageLink } from '@renderer/PageManager'
 import { useFollowList } from '@renderer/providers/FollowListProvider'
 import { useNostr } from '@renderer/providers/NostrProvider'
+import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
 import PubkeyCopy from './PubkeyCopy'
 import QrCodePopover from './QrCodePopover'
-import { useTranslation } from 'react-i18next'
-import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
 
 export default function ProfilePage({ id }: { id?: string }) {
   const { t } = useTranslation()
@@ -43,12 +43,14 @@ export default function ProfilePage({ id }: { id?: string }) {
   if (!profile && isFetching) {
     return (
       <SecondaryPageLayout>
-        <div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
-          <Skeleton className="w-full h-full object-cover rounded-lg" />
-          <Skeleton className="w-24 h-24 absolute bottom-0 left-4 translate-y-1/2 border-4 border-background rounded-full" />
+        <div className="max-sm:px-4">
+          <div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
+            <Skeleton className="w-full h-full object-cover rounded-lg" />
+            <Skeleton className="w-24 h-24 absolute bottom-0 left-4 translate-y-1/2 border-4 border-background rounded-full" />
+          </div>
+          <Skeleton className="h-5 w-28 mt-14 mb-1" />
+          <Skeleton className="h-5 w-56 mt-2 my-1 rounded-full" />
         </div>
-        <Skeleton className="h-5 w-28 mt-14 mb-1" />
-        <Skeleton className="h-5 w-56 mt-2 my-1 rounded-full" />
       </SecondaryPageLayout>
     )
   }
@@ -57,44 +59,46 @@ export default function ProfilePage({ id }: { id?: string }) {
   const { banner, username, nip05, about, avatar, pubkey } = profile
   return (
     <SecondaryPageLayout titlebarContent={username}>
-      <div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
-        <ProfileBanner
-          banner={banner}
-          pubkey={pubkey}
-          className="w-full h-full object-cover rounded-lg"
-        />
-        <Avatar className="w-24 h-24 absolute bottom-0 left-4 translate-y-1/2 border-4 border-background">
-          <AvatarImage src={avatar} className="object-cover object-center" />
-          <AvatarFallback>
-            <img src={defaultImage} />
-          </AvatarFallback>
-        </Avatar>
-      </div>
-      <div className="flex justify-end h-8 gap-2 items-center">
-        {isFollowingYou && (
-          <div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2">
-            {t('Follows you')}
+      <div className="max-sm:px-4">
+        <div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
+          <ProfileBanner
+            banner={banner}
+            pubkey={pubkey}
+            className="w-full h-full object-cover rounded-lg"
+          />
+          <Avatar className="w-24 h-24 absolute bottom-0 left-4 translate-y-1/2 border-4 border-background">
+            <AvatarImage src={avatar} className="object-cover object-center" />
+            <AvatarFallback>
+              <img src={defaultImage} />
+            </AvatarFallback>
+          </Avatar>
+        </div>
+        <div className="flex justify-end h-8 gap-2 items-center">
+          {isFollowingYou && (
+            <div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2">
+              {t('Follows you')}
+            </div>
+          )}
+          <FollowButton pubkey={pubkey} />
+        </div>
+        <div className="pt-2">
+          <div className="text-xl font-semibold">{username}</div>
+          {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} />}
+          <div className="flex gap-1 mt-1">
+            <PubkeyCopy pubkey={pubkey} />
+            <QrCodePopover pubkey={pubkey} />
           </div>
-        )}
-        <FollowButton pubkey={pubkey} />
-      </div>
-      <div className="pt-2">
-        <div className="text-xl font-semibold">{username}</div>
-        {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} />}
-        <div className="flex gap-1 mt-1">
-          <PubkeyCopy pubkey={pubkey} />
-          <QrCodePopover pubkey={pubkey} />
+          <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
+          <SecondaryPageLink
+            to={toFollowingList(pubkey)}
+            className="mt-2 flex gap-1 hover:underline text-sm w-fit"
+          >
+            {isSelf ? selfFollowings.length : followings.length}
+            <div className="text-muted-foreground">{t('Following')}</div>
+          </SecondaryPageLink>
         </div>
-        <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
-        <SecondaryPageLink
-          to={toFollowingList(pubkey)}
-          className="mt-2 flex gap-1 hover:underline text-sm w-fit"
-        >
-          {isSelf ? selfFollowings.length : followings.length}
-          <div className="text-muted-foreground">{t('Following')}</div>
-        </SecondaryPageLink>
       </div>
-      <Separator className="my-4" />
+      <Separator className="mt-4 sm:my-4" />
       <NoteList
         key={pubkey}
         filter={{ authors: [pubkey] }}
diff --git a/src/renderer/src/pages/secondary/RelaySettingsPage/index.tsx b/src/renderer/src/pages/secondary/RelaySettingsPage/index.tsx
new file mode 100644
index 0000000..705d3f1
--- /dev/null
+++ b/src/renderer/src/pages/secondary/RelaySettingsPage/index.tsx
@@ -0,0 +1,15 @@
+import RelaySettings from '@renderer/components/RelaySettings'
+import SecondaryPageLayout from '@renderer/layouts/SecondaryPageLayout'
+import { useTranslation } from 'react-i18next'
+
+export default function RelaySettingsPage() {
+  const { t } = useTranslation()
+
+  return (
+    <SecondaryPageLayout titlebarContent={t('Relay settings')}>
+      <div className="max-sm:px-4">
+        <RelaySettings hideTitle />
+      </div>
+    </SecondaryPageLayout>
+  )
+}
diff --git a/src/renderer/src/providers/ScreenSizeProvider.tsx b/src/renderer/src/providers/ScreenSizeProvider.tsx
new file mode 100644
index 0000000..167e3e7
--- /dev/null
+++ b/src/renderer/src/providers/ScreenSizeProvider.tsx
@@ -0,0 +1,56 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type TScreenSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+type TScreenSizeContext = {
+  screenSize: TScreenSize
+  isSmallScreen: boolean
+}
+
+const ScreenSizeContext = createContext<TScreenSizeContext | undefined>(undefined)
+
+export const useScreenSize = () => {
+  const context = useContext(ScreenSizeContext)
+  if (!context) {
+    throw new Error('useScreenSize must be used within a ScreenSizeProvider')
+  }
+  return context
+}
+
+export function ScreenSizeProvider({ children }: { children: React.ReactNode }) {
+  const [screenSize, setScreenSize] = useState<TScreenSize>('xl')
+  const isSmallScreen = screenSize === 'sm'
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setScreenSize('sm')
+      } else if (window.innerWidth < 768) {
+        setScreenSize('md')
+      } else if (window.innerWidth < 1024) {
+        setScreenSize('lg')
+      } else if (window.innerWidth < 1280) {
+        setScreenSize('xl')
+      } else {
+        setScreenSize('2xl')
+      }
+    }
+
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return (
+    <ScreenSizeContext.Provider
+      value={{
+        screenSize,
+        isSmallScreen
+      }}
+    >
+      {children}
+    </ScreenSizeContext.Provider>
+  )
+}
diff --git a/src/renderer/src/routes.tsx b/src/renderer/src/routes.tsx
index 9581735..b9c41b5 100644
--- a/src/renderer/src/routes.tsx
+++ b/src/renderer/src/routes.tsx
@@ -6,6 +6,7 @@ import NoteListPage from './pages/secondary/NoteListPage'
 import NotePage from './pages/secondary/NotePage'
 import ProfileListPage from './pages/secondary/ProfileListPage'
 import ProfilePage from './pages/secondary/ProfilePage'
+import RelaySettingsPage from './pages/secondary/RelaySettingsPage'
 
 const ROUTES = [
   { path: '/', element: <HomePage /> },
@@ -13,7 +14,8 @@ const ROUTES = [
   { path: '/note/:id', element: <NotePage /> },
   { path: '/user', element: <ProfileListPage /> },
   { path: '/user/:id', element: <ProfilePage /> },
-  { path: '/user/:id/following', element: <FollowingListPage /> }
+  { path: '/user/:id/following', element: <FollowingListPage /> },
+  { path: '/relay-settings', element: <RelaySettingsPage /> }
 ]
 
 export const routes = ROUTES.map(({ path, element }) => ({
