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(
@@ -25,15 +40,16 @@ export default function RelaySetCard({
           ? 'border-primary bg-primary/5 shadow-sm'
           : 'clickable border-border hover:border-primary/50 hover:bg-accent/50'
       )}
-      onClick={() => onSelectChange(!select)}
+       onClick={() => onSelectChange(!select)}
-    >
+      >
-      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 flex-1 items-center gap-3">
+          <div className="flex min-w-0 flex-1 items-center gap-3">
-          <div className="flex size-6 shrink-0 items-center justify-center">
+            <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>
-          <div className="select-none truncate font-medium">{relaySet.name}</div>
-        </div>
         <div className="flex shrink-0 items-center gap-1">
           <RelayUrlsExpandToggle expand={expand} onExpandChange={setExpand}>
             {t('n relays', { n: relaySet.relayUrls.length })}

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'
 
@@ -90,13 +90,25 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
 
     const icon = useMemo(() => {
       if (feedInfo?.feedType === 'following') return <UsersRound />
-      if (feedInfo?.feedType === 'pinned') return <Star />
+        if (feedInfo?.feedType === 'pinned') return <Star />
-      if (feedInfo?.feedType === 'relay' && feedInfo.id) {
+          if (feedInfo?.feedType === 'relay' && feedInfo.id) {
-        return <RelayIcon url={feedInfo.id} />
+            return <RelayIcon url={feedInfo.id} />
-      }
+          }
+          if (feedInfo?.feedType === 'relays') {
+            const relaySetName = feedInfo.name ?? activeRelaySet?.name ?? activeRelaySet?.id ?? ''
+    const nameLower = relaySetName.toLowerCase()
 
-      return <Server />
+    // Custom icons for your relay sets
-    }, [feedInfo])
+    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 />
+          }
+          return <Server />
+    }, [feedInfo, activeRelaySet])
 
     const clickable =
       !IS_COMMUNITY_MODE || COMMUNITY_RELAY_SETS.length + COMMUNITY_RELAYS.length > 1