fix: new icons for pubsub in console (#4252)

![Screenshot 2025-01-30 at 5 46
08 PM](https://github.com/user-attachments/assets/d80c6d70-60d8-403f-99eb-c0cd5f5424e8)
![Screenshot 2025-01-30 at 5 46
33 PM](https://github.com/user-attachments/assets/10e95b02-8faa-47f0-a1ff-63c374e4bc63)

frontend/console/src/features/graph/DeclNode.tsx

@@ -1,14 +1,6 @@
 import { Handle, type NodeProps, Position } from '@xyflow/react'
-import {
-  BubbleChatIcon,
-  CodeCircleIcon,
-  DatabaseIcon,
-  FunctionIcon,
-  LeftToRightListNumberIcon,
-  MessageIncoming02Icon,
-  Settings02Icon,
-  SquareLock02Icon,
-} from 'hugeicons-react'
+import { Verb } from '../../protos/xyz/block/ftl/schema/v1/schema_pb'
+import { declIcon } from '../modules/module.utils'
 
 interface Props extends NodeProps {
   data: {
@@ -22,23 +14,10 @@ interface Props extends NodeProps {
   }
 }
 
-const getNodeIcon = (nodeType = 'verb') => {
-  const icons = {
-    verb: FunctionIcon,
-    topic: BubbleChatIcon,
-    database: DatabaseIcon,
-    config: Settings02Icon,
-    secret: SquareLock02Icon,
-    enum: LeftToRightListNumberIcon,
-    subscription: MessageIncoming02Icon,
-    default: CodeCircleIcon,
-  }
-  return icons[nodeType as keyof typeof icons] || icons.default
-}
-
 export const DeclNode = ({ data }: Props) => {
   const handleColor = data.selected ? 'rgb(251 113 133)' : data.style?.backgroundColor || 'rgb(79 70 229)'
-  const Icon = getNodeIcon(data.nodeType)
+  const defaultVerb = new Verb({ name: data.title })
+  const Icon = declIcon(data.nodeType || 'verb', defaultVerb)
 
   return (
     <div className={`rounded-md overflow-hidden ${data.selected ? 'ring-2 ring-pink-400 dark:ring-pink-600' : ''}`}>

frontend/console/src/features/modules/decls/verb/VerbPage.tsx

@@ -1,4 +1,4 @@
-import { FunctionIcon } from 'hugeicons-react'
+import { Clock01Icon, Download04Icon, FunctionIcon, InternetIcon } from 'hugeicons-react'
 import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import type { Module, Verb } from '../../../../protos/xyz/block/ftl/console/v1/console_pb'
@@ -8,6 +8,7 @@ import { NotificationType, NotificationsContext } from '../../../../shared/provi
 import { SidePanelProvider } from '../../../../shared/providers/side-panel-provider'
 import { TraceRequestList } from '../../../traces/TraceRequestList'
 import { useModules } from '../../hooks/use-modules'
+import { verbTypeFromMetadata } from '../../module.utils'
 import { VerbRequestForm } from './VerbRequestForm'
 import { verbPanels } from './VerbRightPanel'
 
@@ -45,10 +46,28 @@ export const VerbPage = ({ moduleName, declName }: { moduleName: string; declNam
     )
   }
 
+  type VerbType = 'cronjob' | 'ingress' | 'subscriber' | 'default'
+
+  const verbTypeConfig = {
+    cronjob: { Icon: Clock01Icon },
+    ingress: { Icon: InternetIcon },
+    subscriber: { Icon: Download04Icon },
+    default: { Icon: FunctionIcon },
+  } as const
+
   const header = (
     <div className='flex items-center gap-2 px-2 py-2'>
-      <FunctionIcon className='h-5 w-5 text-indigo-500' />
-      <div className='flex flex-col min-w-0'>Verb</div>
+      {(() => {
+        const verbType = verb.verb ? verbTypeFromMetadata(verb.verb) : undefined
+        const { Icon } = verbTypeConfig[(verbType ?? 'default') as VerbType]
+
+        return (
+          <>
+            <Icon className='size-5 text-indigo-500' />
+            <div className='flex flex-col min-w-0'>{verb.verb?.name}</div>
+          </>
+        )
+      })()}
     </div>
   )
 

frontend/console/src/features/modules/module.utils.ts

@@ -1,16 +1,15 @@
 import {
   AnonymousIcon,
-  BubbleChatIcon,
   Clock01Icon,
   CodeIcon,
   CodeSquareIcon,
   DatabaseIcon,
+  Download04Icon,
   FunctionIcon,
+  GasPipeIcon,
   type HugeiconsProps,
   InternetIcon,
   LeftToRightListNumberIcon,
-  MessageIncoming02Icon,
-  MessageProgrammingIcon,
   Settings02Icon,
   SquareLock02Icon,
 } from 'hugeicons-react'
@@ -142,10 +141,10 @@ const declIcons: Record<string, React.FC<Omit<HugeiconsProps, 'ref'> & React.Ref
   data: CodeSquareIcon,
   database: DatabaseIcon,
   enum: LeftToRightListNumberIcon,
-  topic: BubbleChatIcon,
+  topic: GasPipeIcon,
   typealias: AnonymousIcon,
   secret: SquareLock02Icon,
-  subscription: MessageIncoming02Icon,
+  subscription: Download04Icon,
   verb: FunctionIcon,
 }
 
@@ -169,7 +168,7 @@ export const declIcon = (declCase: string, decl: DeclSumType) => {
 const verbIcons: Record<string, React.FC<Omit<HugeiconsProps, 'ref'> & React.RefAttributes<SVGSVGElement>>> = {
   cronjob: Clock01Icon,
   ingress: InternetIcon,
-  subscriber: MessageProgrammingIcon,
+  subscriber: Download04Icon,
 }
 
 const verbIcon = (declCase: string, decl: DeclSumType) => {

frontend/console/src/features/timeline/TimelineIcon.tsx

@@ -2,12 +2,12 @@ import {
   Call02Icon,
   CallIncoming04Icon,
   CustomerServiceIcon,
+  Download04Icon,
   Menu01Icon,
   PackageReceiveIcon,
   Rocket01Icon,
-  Satellite03Icon,
-  SatelliteIcon,
   TimeQuarterPassIcon,
+  Upload04Icon,
 } from 'hugeicons-react'
 import type { Event } from '../../protos/xyz/block/ftl/timeline/v1/event_pb'
 import { LogLevelBadgeSmall } from '../logs/LogLevelBadgeSmall'
@@ -35,9 +35,9 @@ export const TimelineIcon = ({ event }: { event: Event }) => {
       case 'asyncExecute':
         return <CustomerServiceIcon className={`${style} ${textColor}`} />
       case 'pubsubPublish':
-        return <SatelliteIcon className={`${style} ${textColor}`} />
+        return <Upload04Icon className={`${style} ${textColor}`} />
       case 'pubsubConsume':
-        return <Satellite03Icon className={`${style} ${textColor}`} />
+        return <Download04Icon className={`${style} ${textColor}`} />
       default:
         return <Menu01Icon className={`${style}`} />
     }

frontend/console/src/features/timeline/filters/TimelineFilterPanel.tsx

@@ -1,4 +1,4 @@
-import { Call02Icon, CustomerServiceIcon, PackageReceiveIcon, Rocket01Icon, Satellite03Icon, SatelliteIcon, TimeQuarterPassIcon } from 'hugeicons-react'
+import { Call02Icon, CustomerServiceIcon, Download04Icon, PackageReceiveIcon, Rocket01Icon, TimeQuarterPassIcon, Upload04Icon } from 'hugeicons-react'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 import { EventType, LogLevel } from '../../../protos/xyz/block/ftl/timeline/v1/event_pb'
@@ -33,8 +33,8 @@ const EVENT_TYPES: Record<string, EventFilter> = {
   },
   ingress: { label: 'Ingress', type: EventType.INGRESS, icon: <PackageReceiveIcon className='w-4 h-4 text-sky-400 ml-1' /> },
   cronScheduled: { label: 'Cron Scheduled', type: EventType.CRON_SCHEDULED, icon: <TimeQuarterPassIcon className='w-4 h-4 text-blue-500 ml-1' /> },
-  pubsubPublish: { label: 'PubSub Publish', type: EventType.PUBSUB_PUBLISH, icon: <SatelliteIcon className='w-4 h-4 text-violet-500 ml-1' /> },
-  pubsubConsume: { label: 'PubSub Consume', type: EventType.PUBSUB_CONSUME, icon: <Satellite03Icon className='w-4 h-4 text-violet-500 ml-1' /> },
+  pubsubPublish: { label: 'PubSub Publish', type: EventType.PUBSUB_PUBLISH, icon: <Upload04Icon className='w-4 h-4 text-violet-500 ml-1' /> },
+  pubsubConsume: { label: 'PubSub Consume', type: EventType.PUBSUB_CONSUME, icon: <Download04Icon className='w-4 h-4 text-violet-500 ml-1' /> },
 }
 
 const LOG_LEVELS: Record<number, string> = {