feat: Categories Editor — browse, search, and view preset category sets (closes #143)

.github/workflows/ci.yml

@@ -508,7 +508,14 @@ jobs:
         # GHSA-p63j-vcc4-9vmv: @vitest/browser Browser Mode file-access
         # bypass. Fixed in 4.1.10 (we have 4.1.10) but bun's advisory DB
         # has not been updated to recognise the fix version yet.
-        run: bun audit --audit-level=high --ignore=GHSA-gv7w-rqvm-qjhr --ignore=GHSA-vmh5-mc38-953g --ignore=GHSA-vxpw-j846-p89q --ignore=GHSA-hm92-r4w5-c3mj --ignore=GHSA-3jxr-9vmj-r5cp --ignore=GHSA-52cp-r559-cp3m --ignore=GHSA-395f-4hp3-45gv --ignore=GHSA-gcfj-64vw-6mp9 --ignore=GHSA-p63j-vcc4-9vmv
+        #
+        # GHSA-mh99-v99m-4gvg: brace-expansion DoS via unbounded expansion
+        # length causing OOM (transitive dev dep via eslint/glob).
+        # Cannot override to v5 — breaks minimatch's default import.
+        #
+        # GHSA-r28c-9q8g-f849: PostCSS source map path traversal
+        # (transitive dev dep via storybook). Resolved via override.
+        run: bun audit --audit-level=high --ignore=GHSA-gv7w-rqvm-qjhr --ignore=GHSA-vmh5-mc38-953g --ignore=GHSA-vxpw-j846-p89q --ignore=GHSA-hm92-r4w5-c3mj --ignore=GHSA-3jxr-9vmj-r5cp --ignore=GHSA-52cp-r559-cp3m --ignore=GHSA-395f-4hp3-45gv --ignore=GHSA-gcfj-64vw-6mp9 --ignore=GHSA-p63j-vcc4-9vmv --ignore=GHSA-mh99-v99m-4gvg
 
   # -----------------------------------------------------------------------
   # Preview deploy on pull_request

package.json

@@ -65,6 +65,7 @@
     "form-data": "^4.0.6",
     "joi": "^17.13.4",
     "js-yaml": "^3.15.0",
+    "postcss": "^8.5.23",
     "sharp": "^0.35.3",
     "shell-quote": "^1.10.0",
     "ws": "^8.21.0"

screenshots/screenshot/mobile-observation-detail.png.argos.json

@@ -0,0 +1,28 @@
+{
+  "url": "http://localhost:5173/data/observations/nonexistent-id",
+  "colorScheme": "light",
+  "mediaType": "screen",
+  "test": {
+    "id": "99fb1864c5a05941a39e-a72832ff12247d95f3c8",
+    "title": "mobile-observation-detail light",
+    "titlePath": [
+      "mobile-audit.screenshots.ts",
+      "Mobile audit screenshots",
+      "mobile-observation-detail light"
+    ],
+    "retry": 0,
+    "retries": 0,
+    "repeat": 0,
+    "location": {
+      "file": "tests/e2e/mobile-audit.screenshots.ts",
+      "line": 146,
+      "column": 3
+    },
+    "annotations": []
+  },
+  "browser": { "name": "chromium", "version": "148.0.7778.96" },
+  "automationLibrary": { "version": "1.60.0", "name": "@playwright/test" },
+  "sdk": { "name": "@argos-ci/playwright", "version": "7.0.5" },
+  "viewport": { "width": 375, "height": 812 },
+  "transient": {}
+}

screenshots/screenshot/mobile-settings-dark.png.argos.json

@@ -0,0 +1,28 @@
+{
+  "url": "http://localhost:5173/settings",
+  "colorScheme": "light",
+  "mediaType": "screen",
+  "test": {
+    "id": "99fb1864c5a05941a39e-dbf366030444c71ed5e8",
+    "title": "mobile-settings dark",
+    "titlePath": [
+      "mobile-audit.screenshots.ts",
+      "Mobile audit screenshots",
+      "mobile-settings dark"
+    ],
+    "retry": 0,
+    "retries": 0,
+    "repeat": 0,
+    "location": {
+      "file": "tests/e2e/mobile-audit.screenshots.ts",
+      "line": 338,
+      "column": 3
+    },
+    "annotations": []
+  },
+  "browser": { "name": "chromium", "version": "148.0.7778.96" },
+  "automationLibrary": { "version": "1.60.0", "name": "@playwright/test" },
+  "sdk": { "name": "@argos-ci/playwright", "version": "7.0.5" },
+  "viewport": { "width": 375, "height": 812 },
+  "transient": {}
+}

src/app/router.tsx

@@ -8,6 +8,7 @@ import {
 import { AuthenticatedLayout } from '@/components/layout/authenticated-layout';
 import { AlertDetailScreen } from '@/screens/AlertDetailScreen';
 import { AlertsScreen } from '@/screens/AlertsScreen';
+import { CategoriesEditorScreen } from '@/screens/CategoriesEditor';
 import { CreateAlertScreen } from '@/screens/CreateAlertScreen';
 import { DataScreen } from '@/screens/DataScreen';
 import { HomeScreen } from '@/screens/Home/HomeScreen';
@@ -93,6 +94,18 @@ const settingsRoute = createRoute({
   component: SettingsScreen,
 });
 
+const categoriesRoute = createRoute({
+  getParentRoute: () => _authenticatedRoute,
+  path: '/categories',
+  component: CategoriesEditorScreen,
+});
+
+const categoryDetailRoute = createRoute({
+  getParentRoute: () => _authenticatedRoute,
+  path: '/categories/$categoryId',
+  component: CategoriesEditorScreen,
+});
+
 const inviteRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/invite',
@@ -112,6 +125,8 @@ const routeTree = rootRoute.addChildren([
     createAlertRoute,
     alertDetailRoute,
     settingsRoute,
+    categoriesRoute,
+    categoryDetailRoute,
   ]),
 ]);
 
@@ -136,6 +151,8 @@ export {
   createAlertRoute,
   alertDetailRoute,
   settingsRoute,
+  categoriesRoute,
+  categoryDetailRoute,
 };
 
 // Export route tree for testing

src/components/layout/authenticated-layout.tsx

@@ -26,6 +26,7 @@ const messages = defineMessages({
   data: { id: 'data.title', defaultMessage: 'Data' },
   alerts: { id: 'alerts.title', defaultMessage: 'Alerts' },
   map: { id: 'map.title', defaultMessage: 'Map' },
+  categories: { id: 'categories.title', defaultMessage: 'Categories' },
   settings: { id: 'settings.title', defaultMessage: 'Settings' },
   appTitle: { id: 'app.title', defaultMessage: 'CoMapeo Cloud' },
 });
@@ -112,6 +113,21 @@ function SettingsIcon(): ReactNode {
   );
 }
 
+function CategoriesIcon(): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M2 4a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm10 0a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2h-4a2 2 0 01-2-2V4zM2 12a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4zm10 0a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2h-4a2 2 0 01-2-2v-4z" />
+    </svg>
+  );
+}
+
 /** Normalize a URL for comparison by stripping trailing slashes. */
 function normalizeUrl(url: string): string {
   return url.trim().replace(/\/+$/, '');
@@ -250,6 +266,11 @@ function AuthenticatedLayoutInner() {
       label: intl.formatMessage(messages.map),
       icon: <MapIcon />,
     },
+    {
+      path: '/categories',
+      label: intl.formatMessage(messages.categories),
+      icon: <CategoriesIcon />,
+    },
     {
       path: '/settings',
       label: intl.formatMessage(messages.settings),

src/components/shared/ObservationCategoryIcon.tsx

@@ -15,35 +15,47 @@ interface ObservationCategoryIconProps {
     ObservationCategory,
     'id' | 'name' | 'color' | 'iconDocId' | 'iconUrl'
   >;
+  size?: number; // circle diameter in pixels (default 32)
+  iconSize?: number; // image diameter in pixels (default size * 0.7)
   className?: string;
 }
 
 export function ObservationCategoryIcon({
   category,
-  className = 'h-8 w-8',
+  size = 32,
+  iconSize = size * 0.7,
+  className,
 }: ObservationCategoryIconProps) {
   const intl = useIntl();
 
   const fallbackLetter = category.name.trim().slice(0, 1).toUpperCase() || '?';
 
+  const circleStyle = {
+    width: size,
+    height: size,
+    border: category.color
+      ? `2px solid ${category.color}`
+      : '2px solid var(--color-primary, #1F6FFF)',
+  };
+
   // When an icon image is available, render it on a white circle with a
   // colored border so the icon remains legible regardless of the category
-  // color. The letter fallback is hidden behind the image via z-index.
+  // color. The letter is hidden (opacity-0) — it only shows in the no-icon
+  // fallback branch below.
   if (category.iconUrl) {
     return (
-      <div
-        className={`relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-white ${className}`}
+      <span
+        className={`relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-white ${className ?? ''}`}
         data-testid="category-icon"
-        style={{
-          border: category.color
-            ? `2px solid ${category.color}`
-            : '2px solid var(--color-primary, #1F6FFF)',
-        }}
+        style={circleStyle}
       >
         <span
           data-testid="category-icon-fallback"
-          className="text-[0.65rem] font-semibold leading-none"
-          style={{ color: category.color ?? undefined }}
+          className="m-auto text-[0.65rem] font-semibold leading-none opacity-0"
+          style={{
+            color: category.color ?? undefined,
+            fontSize: size * 0.4,
+          }}
           aria-hidden="true"
         >
           {fallbackLetter}
@@ -53,32 +65,37 @@ export function ObservationCategoryIcon({
           alt={intl.formatMessage(messages.iconAlt, {
             category: category.name,
           })}
-          className="absolute inset-0 z-10 h-full w-full object-contain p-1"
+          className="m-auto absolute inset-0 z-10 object-contain p-1"
+          style={{ width: iconSize, height: iconSize }}
           cache
         />
-      </div>
+      </span>
     );
   }
 
   // No icon image: colored circle with white background + colored border +
   // colored letter — matches the "white bg, color as border" spec from PR 65
   // design review.
   return (
-    <div
-      className={`relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-white ${className}`}
+    <span
+      className={`relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-white ${className ?? ''}`}
       data-testid="category-icon-fallback-only"
       style={{
-        border: category.color
-          ? `2px solid ${category.color}`
-          : '2px solid var(--color-primary, #1F6FFF)',
+        ...circleStyle,
         color: category.color ?? undefined,
       }}
       aria-label={category.name}
       role="img"
     >
-      <span className="text-[0.65rem] font-semibold leading-none">
+      <span
+        className="font-semibold leading-none"
+        style={{
+          fontSize: size * 0.4,
+          color: category.color ?? undefined,
+        }}
+      >
         {fallbackLetter}
       </span>
-    </div>
+    </span>
   );
 }

src/components/shared/ObservationsMap/ObservationsMap.tsx

@@ -167,7 +167,7 @@ export function ObservationsMap({
                 <div className="rounded-full border-2 border-white bg-surface-card shadow-md">
                   <ObservationCategoryIcon
                     category={categoryByObservationId.get(o.localId)!}
-                    className="h-7 w-7"
+                    size={28}
                   />
                 </div>
               ) : (

src/components/shared/auth-img.tsx

@@ -1,10 +1,13 @@
+import type { CSSProperties } from 'react';
+
 import { Skeleton } from '@/components/ui/skeleton';
 import { useAuthenticatedImageUrl } from '@/hooks/useAuthenticatedImageUrl';
 
 interface AuthImgProps {
   src: string;
   alt: string;
   className?: string;
+  style?: CSSProperties;
   /**
    * When true, the image blob is cached in IndexedDB for instant display on
    * subsequent loads. Use only for small, stable assets (e.g. category icons).
@@ -21,22 +24,24 @@ interface AuthImgProps {
  * - Error: Invisible placeholder div (preserves layout)
  * - Success: <img> with blob URL
  */
-export function AuthImg({ src, alt, className, cache }: AuthImgProps) {
+export function AuthImg({ src, alt, className, style, cache }: AuthImgProps) {
   const { blobUrl, isLoading, error } = useAuthenticatedImageUrl(src, {
     cache,
   });
 
   if (isLoading) {
     return (
-      <div data-testid="auth-img-skeleton" className={className}>
+      <div data-testid="auth-img-skeleton" className={className} style={style}>
         <Skeleton width="100%" height="100%" />
       </div>
     );
   }
 
   if (error || !blobUrl) {
-    return <div className={className} data-testid="auth-img-error" />;
+    return (
+      <div className={className} style={style} data-testid="auth-img-error" />
+    );
   }
 
-  return <img src={blobUrl} alt={alt} className={className} />;
+  return <img src={blobUrl} alt={alt} className={className} style={style} />;
 }