feat: 💨

src/components/PostEditor/PostContent.tsx

@@ -82,7 +82,6 @@ export default function PostContent({
             relays: []
           }
         )
-        setSpecifiedRelayUrls(cachedSettings.specifiedRelayUrls)
         setAddClientTag(cachedSettings.addClientTag ?? false)
       }
       return
@@ -93,7 +92,6 @@ export default function PostContent({
         isNsfw,
         isPoll,
         pollCreateData,
-        specifiedRelayUrls,
         addClientTag
       }
     )

src/components/RelayBadges/index.tsx

@@ -8,12 +8,6 @@ export default function RelayBadges({ relayInfo }: { relayInfo: TRelayInfo }) {
 
   const badges = useMemo(() => {
     const b: string[] = []
-    if (relayInfo.limitation?.auth_required) {
-      b.push('Auth')
-    }
-    if (relayInfo.supported_nips?.includes(50)) {
-      b.push('Search')
-    }
     if (relayInfo.limitation?.payment_required) {
       b.push('Payment')
     }
@@ -26,12 +20,6 @@ export default function RelayBadges({ relayInfo }: { relayInfo: TRelayInfo }) {
 
   return (
     <div className="flex gap-2">
-      {badges.includes('Auth') && (
-        <Badge className="bg-green-400 hover:bg-green-400/80">{t('relayInfoBadgeAuth')}</Badge>
-      )}
-      {badges.includes('Search') && (
-        <Badge className="bg-pink-400 hover:bg-pink-400/80">{t('relayInfoBadgeSearch')}</Badge>
-      )}
       {badges.includes('Payment') && (
         <Badge className="bg-orange-400 hover:bg-orange-400/80">{t('relayInfoBadgePayment')}</Badge>
       )}

src/components/RelayInfo/index.tsx

@@ -3,12 +3,14 @@ import { Button } from '@/components/ui/button'
 import { useFetchRelayInfo } from '@/hooks'
 import { normalizeHttpUrl } from '@/lib/url'
 import { cn } from '@/lib/utils'
-import { GitBranch, Mail, SquareCode } from 'lucide-react'
+import { Check, Copy, GitBranch, Link, Mail, SquareCode } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import PostEditor from '../PostEditor'
 import RelayBadges from '../RelayBadges'
 import RelayIcon from '../RelayIcon'
+import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 
@@ -24,11 +26,14 @@ export default function RelayInfo({ url, className }: { url: string; className?:
   return (
     <div className={cn('px-4 space-y-4 mb-2', className)}>
       <div className="space-y-2">
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2 justify-between">
-          <RelayIcon url={url} className="w-8 h-8" />
+          <div className="flex gap-2 items-center">
-          <div className="text-2xl font-semibold truncate select-text">
+            <RelayIcon url={url} className="w-8 h-8" />
-            {relayInfo.name || relayInfo.shortUrl}
+            <div className="text-2xl font-semibold truncate select-text">
+              {relayInfo.name || relayInfo.shortUrl}
+            </div>
           </div>
+          <RelayControls url={relayInfo.url} />
         </div>
         <RelayBadges relayInfo={relayInfo} />
         {!!relayInfo.tags?.length && (
@@ -107,3 +112,33 @@ function formatSoftware(software: string) {
   const parts = software.split('/')
   return parts[parts.length - 1]
 }
+
+function RelayControls({ url }: { url: string }) {
+  const [copiedUrl, setCopiedUrl] = useState(false)
+  const [copiedShareableUrl, setCopiedShareableUrl] = useState(false)
+
+  const handleCopyUrl = () => {
+    navigator.clipboard.writeText(url)
+    setCopiedUrl(true)
+    setTimeout(() => setCopiedUrl(false), 2000)
+  }
+
+  const handleCopyShareableUrl = () => {
+    navigator.clipboard.writeText(`https://jumble.social/?r=${url}`)
+    setCopiedShareableUrl(true)
+    toast.success('Shareable URL copied to clipboard')
+    setTimeout(() => setCopiedShareableUrl(false), 2000)
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <Button variant="ghost" size="titlebar-icon" onClick={handleCopyShareableUrl}>
+        {copiedShareableUrl ? <Check /> : <Link />}
+      </Button>
+      <Button variant="ghost" size="titlebar-icon" onClick={handleCopyUrl}>
+        {copiedUrl ? <Check /> : <Copy />}
+      </Button>
+      <SaveRelayDropdownMenu urls={[url]} atTitlebar />
+    </div>
+  )
+}

src/components/RelayPageControls/index.tsx

@@ -1,35 +0,0 @@
-import { Button } from '@/components/ui/button'
-import { Check, Copy, Link } from 'lucide-react'
-import { useState } from 'react'
-import { toast } from 'sonner'
-import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
-
-export default function RelayPageControls({ url }: { url: string }) {
-  const [copiedUrl, setCopiedUrl] = useState(false)
-  const [copiedShareableUrl, setCopiedShareableUrl] = useState(false)
-
-  const handleCopyUrl = () => {
-    navigator.clipboard.writeText(url)
-    setCopiedUrl(true)
-    setTimeout(() => setCopiedUrl(false), 2000)
-  }
-
-  const handleCopyShareableUrl = () => {
-    navigator.clipboard.writeText(`https://jumble.social/?r=${url}`)
-    setCopiedShareableUrl(true)
-    toast.success('Shareable URL copied to clipboard')
-    setTimeout(() => setCopiedShareableUrl(false), 2000)
-  }
-
-  return (
-    <>
-      <Button variant="ghost" size="titlebar-icon" onClick={handleCopyShareableUrl}>
-        {copiedShareableUrl ? <Check /> : <Link />}
-      </Button>
-      <Button variant="ghost" size="titlebar-icon" onClick={handleCopyUrl}>
-        {copiedUrl ? <Check /> : <Copy />}
-      </Button>
-      <SaveRelayDropdownMenu urls={[url]} atTitlebar />
-    </>
-  )
-}

src/components/SearchBar/index.tsx

@@ -1,7 +1,4 @@
-import Nip05 from '@/components/Nip05'
 import SearchInput from '@/components/SearchInput'
-import UserAvatar from '@/components/UserAvatar'
-import Username from '@/components/Username'
 import { useSearchProfiles } from '@/hooks'
 import { toNote } from '@/lib/link'
 import { randomString } from '@/lib/random'
@@ -23,7 +20,7 @@ import {
   useState
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { UserItemSkeleton } from '../UserItem'
+import UserItem, { UserItemSkeleton } from '../UserItem'
 
 const SearchBar = forwardRef<
   TSearchBarRef,
@@ -154,7 +151,11 @@ const SearchBar = forwardRef<
             }
           />
         ))}
-        {isFetchingProfiles && profiles.length < 5 && <UserItemSkeleton hideFollowButton />}
+        {isFetchingProfiles && profiles.length < 5 && (
+          <div className="px-2">
+            <UserItemSkeleton hideFollowButton />
+          </div>
+        )}
         {profiles.length >= 5 && (
           <Item onClick={() => updateSearch({ type: 'profiles', search })}>
             <div className="font-semibold">{t('Show more...')}</div>
@@ -259,18 +260,8 @@ function ProfileIdItem({ id, onClick }: { id: string; onClick?: () => void }) {
 
 function ProfileItem({ profile, onClick }: { profile: TProfile; onClick?: () => void }) {
   return (
-    <div className="p-2 hover:bg-accent rounded-md cursor-pointer" onClick={onClick}>
+    <div className="px-2 hover:bg-accent rounded-md cursor-pointer" onClick={onClick}>
-      <div className="flex gap-2 items-center pointer-events-none h-11">
+      <UserItem pubkey={profile.pubkey} hideFollowButton className="pointer-events-none" />
-        <UserAvatar userId={profile.pubkey} className="shrink-0" />
-        <div className="w-full overflow-hidden">
-          <Username
-            userId={profile.pubkey}
-            className="font-semibold truncate max-w-full w-fit"
-            skeletonClassName="h-4"
-          />
-          <Nip05 pubkey={profile.pubkey} />
-        </div>
-      </div>
     </div>
   )
 }

src/components/UserItem/index.tsx

@@ -3,10 +3,19 @@ import Nip05 from '@/components/Nip05'
 import UserAvatar from '@/components/UserAvatar'
 import Username from '@/components/Username'
 import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
 
-export default function UserItem({ pubkey }: { pubkey: string }) {
+export default function UserItem({
+  pubkey,
+  hideFollowButton,
+  className
+}: {
+  pubkey: string
+  hideFollowButton?: boolean
+  className?: string
+}) {
   return (
-    <div className="flex gap-2 items-center h-14">
+    <div className={cn('flex gap-2 items-center h-14', className)}>
       <UserAvatar userId={pubkey} className="shrink-0" />
       <div className="w-full overflow-hidden">
         <Username
@@ -16,7 +25,7 @@ export default function UserItem({ pubkey }: { pubkey: string }) {
         />
         <Nip05 pubkey={pubkey} />
       </div>
-      <FollowButton pubkey={pubkey} />
+      {!hideFollowButton && <FollowButton pubkey={pubkey} />}
     </div>
   )
 }

src/pages/primary/RelayPage/index.tsx

@@ -1,5 +1,4 @@
 import Relay from '@/components/Relay'
-import RelayPageControls from '@/components/RelayPageControls'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
 import { useCurrentRelays } from '@/providers/CurrentRelaysProvider'
@@ -32,14 +31,9 @@ export default RelayPage
 
 function RelayPageTitlebar({ url }: { url?: string }) {
   return (
-    <div className="flex gap-2 items-center justify-between h-full">
+    <div className="flex items-center gap-2 px-3 h-full">
-      <div className="flex items-center gap-2 pl-3 flex-1 w-0">
+      <Server />
-        <Server />
+      <div className="text-lg font-semibold truncate">{simplifyUrl(url ?? '')}</div>
-        <div className="text-lg font-semibold truncate">{simplifyUrl(url ?? '')}</div>
-      </div>
-      <div className="flex items-center flex-shrink-0">
-        <RelayPageControls url={url ?? ''} />
-      </div>
     </div>
   )
 }

src/pages/secondary/RelayPage/index.tsx

@@ -1,5 +1,4 @@
 import Relay from '@/components/Relay'
-import RelayPageControls from '@/components/RelayPageControls'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
 import { forwardRef, useMemo } from 'react'
@@ -14,13 +13,7 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
   }
 
   return (
-    <SecondaryPageLayout
+    <SecondaryPageLayout ref={ref} index={index} title={title} displayScrollToTopButton>
-      ref={ref}
-      index={index}
-      title={title}
-      controls={<RelayPageControls url={normalizedUrl} />}
-      displayScrollToTopButton
-    >
       <Relay url={normalizedUrl} />
     </SecondaryPageLayout>
   )

src/services/post-editor-cache.service.ts

@@ -6,7 +6,6 @@ type TPostSettings = {
   isNsfw?: boolean
   isPoll?: boolean
   pollCreateData?: TPollCreateData
-  specifiedRelayUrls?: string[]
   addClientTag?: boolean
 }