@reflagged/shell 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reflagged/shell",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Shared app shell for Reflagged services — OIDC auth, SSO, app switcher",
   "type": "module",
   "sideEffects": false,
@@ -25,7 +25,8 @@
     "./api/oidc-callback": "./src/lib/api/oidc-callback.ts",
     "./api/oidc-signout": "./src/lib/api/oidc-signout.ts",
     "./api/shell-info": "./src/lib/api/shell-info.ts",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./components/ServiceIcon": "./src/components/ServiceIcon.tsx"
   },
   "scripts": {
     "typecheck": "tsc --noEmit"
@@ -38,7 +39,8 @@
     "next": "^15.4.0",
     "payload": "^3.79.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "lucide-react": ">=0.400.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -47,6 +49,12 @@
     "payload": "^3.79.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "lucide-react": "^0.500.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": false
+    }
   }
 }

package/src/components/BrandSwitcher.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { loadAppConfig } from '../config'
+import { ServiceIcon } from './ServiceIcon'
 
 type Booking = {
   id: string
@@ -11,6 +12,12 @@ type Booking = {
   status: string
   url: string | null
   iconUrl: string | null
+  /**
+   * Lucide name of the service icon, from rflgd-base. Optional: an older
+   * platform does not send it, and then the initial stands in — the way it
+   * always did.
+   */
+  icon?: string | null
 }
 
 type Org = {
@@ -391,7 +398,7 @@ export function BrandSwitcher() {
                       fontWeight: 600,
                     }}
                   >
-                    {b.label.slice(0, 1).toUpperCase()}
+                    <ServiceIcon name={b.icon} label={b.label} />
                   </div>
                   <div style={{ flex: 1, minWidth: 0 }}>
                     <div style={{ fontWeight: 500, fontSize: 13.5 }}>{b.label}</div>

package/src/components/ServiceIcon.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import {
+  AudioLines,
+  Bot,
+  Box,
+  Brain,
+  Contact,
+  Factory,
+  ListMusic,
+  MailPlus,
+  MessageSquareText,
+  PenTool,
+  ShieldCheck,
+  Users,
+  type LucideIcon,
+} from 'lucide-react'
+
+/**
+ * The icon a service shows in the app switcher.
+ *
+ * Which icon a service gets is rflgd-base's decision — it sends the lucide
+ * name in `/api/shell/me` (`serviceIconName()`), so switcher, launchpad and
+ * catalog show the same mark. This file only holds the components to render
+ * those names with.
+ *
+ * Listed one by one rather than looked up in lucide's `icons` object, and that
+ * is the whole reason this file exists: an index lookup defeats tree shaking,
+ * and all ~1500 icons would land in the bundle of every app using this
+ * package. Ten repositories depend on it.
+ *
+ * The cost is a list that can fall behind the platform's. It degrades to
+ * exactly today's behaviour — a service whose name is not here shows its
+ * initial, as every service did before. Nothing breaks, it just looks
+ * unfinished, and adding the icon here is a one-line fix.
+ */
+const ICONS: Record<string, LucideIcon> = {
+  AudioLines,
+  Bot,
+  Box,
+  Brain,
+  Contact,
+  Factory,
+  ListMusic,
+  MailPlus,
+  MessageSquareText,
+  PenTool,
+  ShieldCheck,
+  Users,
+}
+
+export function ServiceIcon({
+  name,
+  label,
+  size = 18,
+}: {
+  /** Lucide name from the platform, e.g. 'Brain'. */
+  name?: string | null
+  /** Fallback when the name is missing or not bundled here. */
+  label: string
+  size?: number
+}) {
+  const Icon = name ? ICONS[name] : undefined
+  if (!Icon) return <>{label.slice(0, 1).toUpperCase()}</>
+  return <Icon size={size} strokeWidth={1.75} aria-hidden />
+}