feat: small screen (#8)

2024-12-02 23:43:08 +08:00 · 2024-12-02 23:43:08 +08:00 · 8e0b91888f
commit 8e0b91888f
parent 11d035f719
27 changed files with 372 additions and 127 deletions
--- 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
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@ -9,11 +9,13 @@ 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>
+        <ScreenSizeProvider>
          <RelaySettingsProvider>
            <NostrProvider>
              <FollowListProvider>
@ -26,6 +28,7 @@ export default function App(): JSX.Element {
              </FollowListProvider>
            </NostrProvider>
          </RelaySettingsProvider>
+        </ScreenSizeProvider>
      </ThemeProvider>
    </div>
  )
--- 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>
--- 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"
--- 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}
--- 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} />
 }
--- 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>
  )
 }
--- 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} />
        ))}
--- 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) => (
--- a/src/renderer/src/components/RelaySettingsPopover/index.tsx
+++ b/src/renderer/src/components/RelaySettingsPopover/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>
--- 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 />
--- 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>
--- 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 && (
--- 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
      )}
    >
--- 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"
--- 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}
--- 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>
  )
--- 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">
--- 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}`
--- 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} />
        ))}
--- 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>
  )
 }
--- 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">
+      <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')}>
+      <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>
  )
 }
--- 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} />
        ))}
--- 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="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>
      </SecondaryPageLayout>
    )
  }
@ -57,6 +59,7 @@ export default function ProfilePage({ id }: { id?: string }) {
  const { banner, username, nip05, about, avatar, pubkey } = profile
  return (
    <SecondaryPageLayout titlebarContent={username}>
+      <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}
@ -94,7 +97,8 @@ export default function ProfilePage({ id }: { id?: string }) {
            <div className="text-muted-foreground">{t('Following')}</div>
          </SecondaryPageLink>
        </div>
-      <Separator className="my-4" />
+      </div>
+      <Separator className="mt-4 sm:my-4" />
      <NoteList
        key={pubkey}
        filter={{ authors: [pubkey] }}
--- a/src/renderer/src/pages/secondary/RelaySettingsPage/index.tsx
+++ 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>
+  )
+}
--- a/src/renderer/src/providers/ScreenSizeProvider.tsx
+++ 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>
+  )
+}
--- 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 }) => ({