customize icons

src/components/RelaySetCard/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils'
 import { TRelaySet } from '@/types'
-import { ChevronDown, FolderClosed } from 'lucide-react'
+import { ChevronDown, FolderClosed, Music, Radio, Trees, DoorOpen } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
@@ -17,6 +17,21 @@ export default function RelaySetCard({
   const { t } = useTranslation()
   const [expand, setExpand] = useState(false)
 
+  const getRelaySetIcon = (name: string) => {
+    const nameLower = name.toLowerCase()
+
+
+    if (nameLower.includes('basspistol')) return Radio
+      if (nameLower.includes('music')) return Music
+        if (nameLower.includes('backstage')) return DoorOpen
+          if (nameLower.includes('hood')) return Trees
+
+
+            return FolderClosed
+  }
+
+  const IconComponent = getRelaySetIcon(relaySet.name)
+
   return (
     <div
       className={cn(
@@ -30,7 +45,8 @@ export default function RelaySetCard({
         <div className="flex items-center justify-between gap-2">
           <div className="flex min-w-0 flex-1 items-center gap-3">
             <div className="flex size-6 shrink-0 items-center justify-center">
-            <FolderClosed className="size-5" />
+      {/* Use the dynamic icon component instead of hardcoded FolderClosed */}
+              <IconComponent className="size-5" />
             </div>
             <div className="select-none truncate font-medium">{relaySet.name}</div>
           </div>

src/pages/primary/NoteListPage/FeedButton.tsx

@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
 import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
 import { useFeed } from '@/providers/FeedProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
-import { ChevronDown, Server, Star, UsersRound } from 'lucide-react'
+import { ChevronDown, Server, Star, UsersRound, Music, Radio, Trees, DoorOpen } from 'lucide-react'
 import { forwardRef, HTMLAttributes, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -94,9 +94,21 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
           if (feedInfo?.feedType === 'relay' && feedInfo.id) {
             return <RelayIcon url={feedInfo.id} />
           }
+          if (feedInfo?.feedType === 'relays') {
+            const relaySetName = feedInfo.name ?? activeRelaySet?.name ?? activeRelaySet?.id ?? ''
+    const nameLower = relaySetName.toLowerCase()
 
+    // Custom icons for your relay sets
+    if (nameLower.includes('basspistol')) return <Radio />
+      if (nameLower.includes('music')) return <Music />
+        if (nameLower.includes('backstage')) return <DoorOpen />
+          if (nameLower.includes('hood')) return <Trees />
+
+            // Default relay set icon
             return <Server />
-    }, [feedInfo])
+          }
+          return <Server />
+    }, [feedInfo, activeRelaySet])
 
     const clickable =
       !IS_COMMUNITY_MODE || COMMUNITY_RELAY_SETS.length + COMMUNITY_RELAYS.length > 1