spotlight draws the dock's tiles, and lists the settings that actually exist

Two things made it read as a generic list rather than as this app's own, and neither was the item source —
that was already the dock, and plugins were already in it.

TILES. SpotlightItem dropped `tile`, so every row got a `${color}22` tinted square: a third visual language
belonging to neither of the dock's two. Which put a coloured pane behind Calendar, Contacts and every
plugin's logo — the exact thing the dock's own comment calls out as reading like a mistake. Rows now use the
dock's rule: a filled square of the item's colour with a white glyph, or no background at all when the
artwork brings its own frame. A settings row with no colour keeps a muted glyph instead of getting a swatch
invented for it.

SETTINGS. The hand-listed sections had drifted within two days of being written, and the file's own comment
predicted it ("worth revisiting if it drifts"). Nine rows against a settings area that has twenty-one:
Languages and Voice missing entirely, every AI and System section missing, `/settings/users` pointing at a
route that does not exist — it is `/settings/user-management/users` — and four different rows sharing the
User glyph, which is most of what made the panel look generic.

Now twenty rows, copied from the five screens that declare them, with each group naming its source file so
checking is one grep. The comment records that the drift HAPPENED rather than predicting it, and says
deriving them from the screens is the fix if it happens a third time.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Layout/Spotlight/Spotlight.tsx

@@ -84,16 +84,37 @@ const Row = ({
         active ? 'bg-accent' : 'hover:bg-accent/50'
       }`}
     >
+      {/*
+        The dock's tile, at row size. Same two cases and the same rule for choosing between them, because
+        these are the SAME things and a second visual language for them is what made this list read as
+        somebody else's menu:
+
+          badge  a filled square of the item's colour with a white glyph — a white glyph on nothing is
+                 invisible, which is why the fill is not decoration
+          bare   no background, artwork fills the box — a logo framed in an arbitrary swatch reads as a
+                 mistake, and every plugin shipping its own art is this case
+
+        The tinted `${color}22` square this used for everything was a third style belonging to neither, and
+        it put a coloured pane behind Calendar, Contacts and every plugin logo.
+      */}
       <span
         className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md"
-        style={item.color ? { backgroundColor: `${item.color}22`, color: item.color } : undefined}
+        style={{
+          background: item.tile === 'bare' ? 'transparent' : (item.color ?? 'transparent'),
+          // No colour at all is a settings row: keep the muted glyph rather than inventing a swatch.
+          color: item.color ? '#fff' : undefined,
+        }}
       >
         {item.image ? (
-          <img src={item.image} alt="" className="h-5 w-5 object-contain" />
+          <img
+            src={item.image}
+            alt=""
+            className={item.tile === 'bare' ? 'h-full w-full object-contain' : 'h-5 w-5 object-contain'}
+          />
         ) : Icon ? (
-          <Icon className="h-4 w-4" />
+          <Icon className={`h-4 w-4 ${item.color ? '' : 'text-muted-foreground'}`} />
         ) : (
-          <Search className="h-4 w-4" />
+          <Search className="h-4 w-4 text-muted-foreground" />
         )}
       </span>
       <span className="min-w-0 flex-1">