+
+ {intl.formatMessage(messages.selectCategory)}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+}
+
+export { CategoryDetail };
+export type { CategoryDetailProps };
diff --git a/src/screens/CategoriesEditor/CategoryGrid.tsx b/src/screens/CategoriesEditor/CategoryGrid.tsx
new file mode 100644
index 00000000..b2442127
--- /dev/null
+++ b/src/screens/CategoriesEditor/CategoryGrid.tsx
@@ -0,0 +1,43 @@
+import type { Category } from '@/hooks/useCategories';
+import { CategoryCard } from '@/screens/CategoriesEditor/CategoryCard';
+
+interface CategoryGridProps {
+ categories: Category[]; // FLAT list, no groups
+ selectedCategoryId?: string | null;
+ onCategorySelect?: (docId: string) => void;
+ projectRemoteId?: string | null;
+ serverBaseUrl?: string | null;
+}
+
+function CategoryGrid({
+ categories,
+ selectedCategoryId,
+ onCategorySelect,
+ projectRemoteId,
+ serverBaseUrl,
+}: CategoryGridProps) {
+ if (categories.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+
+ {category.label}
+ + + {intl.formatMessage(messages.fields, { count: fields.length })} + +
+ {categories.map((category) => (
+
+ );
+}
+
+export { CategoryGrid };
+export type { CategoryGridProps };
diff --git a/src/screens/CategoriesEditor/CategoryIcon.tsx b/src/screens/CategoriesEditor/CategoryIcon.tsx
new file mode 100644
index 00000000..d51464a2
--- /dev/null
+++ b/src/screens/CategoriesEditor/CategoryIcon.tsx
@@ -0,0 +1,47 @@
+import { ObservationCategoryIcon } from '@/components/shared/ObservationCategoryIcon';
+import { buildIconUrl } from '@/lib/category-utils';
+import { useAuthStore } from '@/stores/auth-store';
+
+interface CategoryIconProps {
+ projectRemoteId: string | null;
+ iconRef?: { docId: string };
+ label: string;
+ color?: string;
+ size?: number; // circle diameter (default 50)
+ iconSize?: number; // image diameter (default size * 0.7)
+ serverBaseUrl?: string | null;
+}
+
+function CategoryIcon({
+ projectRemoteId,
+ iconRef,
+ label,
+ color,
+ size = 50,
+ iconSize = size * 0.7,
+ serverBaseUrl,
+}: CategoryIconProps) {
+ const baseUrl = useAuthStore((s) => s.baseUrl);
+
+ const iconUrl = buildIconUrl({
+ projectRemoteId: projectRemoteId ?? undefined,
+ serverUrl: serverBaseUrl ?? baseUrl ?? undefined,
+ iconDocId: iconRef?.docId,
+ });
+
+ return (
+
+ {field.options.map((opt) => (
+ {opt.label}
+ ))}
+
+ )}
+ {showTypeBadge && -
+ {fields.map((field) => (
+
+
+ {intl.formatMessage(messages.title)}
+
+
+
+
+
+
+
+ {dialogState.status === 'success' &&
+ intl.formatMessage(messages.successAnnouncement)}
+ {dialogState.status === 'error' &&
+ intl.formatMessage(messages.errorAnnouncement)}
+
+
+ {dialogState.status === 'idle' && (
+
+
+
+ )}
+
+ {dialogState.status === 'confirming-replace' && (
+
+
+ )}
+
+ {dialogState.status === 'success' && (
+ + {intl.formatMessage(messages.replaceDescription, { + setId: dialogState.setId, + })} +
+
+
+
+
+ + {intl.formatMessage(messages.imported, { + name: dialogState.name, + })} +
+ )} + + {dialogState.status === 'error' && ( +
+
+ )}
+ + {dialogState.message} +
+ +
+
+ );
+ }
+
+ // Projects still loading
+ if (projectsQuery.isPending) {
+ return (
+ + {intl.formatMessage(messages.selectProject)} +
+
+
+ );
+ }
+
+ // Projects failed to load
+ if (projectsQuery.isError) {
+ return (
+
+
+ );
+ }
+
+ // Selected project not found in the loaded list
+ if (!selectedProject) {
+ return (
+ + {intl.formatMessage(messages.error)} +
+ +
+
+ {intl.formatMessage(messages.empty)}
+
+
+ );
+ }
+
+ // Project selected but no remoteId — presets not available via API.
+ // Local-only projects don't have a server projectPublicId.
+ if (!selectedProject.remoteId) {
+ return (
+
+
+ {intl.formatMessage(messages.empty)}
+
+
+ );
+ }
+
+ // Presets query not enabled (no server or missing credentials) —
+ // isPending would stay true forever. Show an actionable message.
+ if (!presetsQuery.isEnabled) {
+ return (
+
+
+ );
+ }
+
+ // Loading skeleton
+ if (presetsQuery.isPending) {
+ return (
+ + {intl.formatMessage(messages.noServer)} +
+
+
+ );
+ }
+
+ // Error state
+ if (presetsQuery.isError) {
+ return (
+
+
+ );
+ }
+
+ const hasPresets = nonDeletedPresets.length > 0;
+ const hasResults = categories.length > 0;
+
+ return (
+ + {intl.formatMessage(messages.error)} +
+ +
+ setIsImportOpen(false)}
+ /> */}
+
+ );
+}
diff --git a/src/screens/DataScreen.tsx b/src/screens/DataScreen.tsx
index 095d6c8d..34c09bcd 100644
--- a/src/screens/DataScreen.tsx
+++ b/src/screens/DataScreen.tsx
@@ -248,7 +248,7 @@ export function DataScreen() {
{categoryByObservationId.get(obs.localId) ? (
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full rounded-button border border-border bg-surface px-3 py-2 text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary"
+ />
+
+ {hasMultipleClusters && (
+ + {intl.formatMessage(messages.title)} +
+ {/* */} +
+ {!showAllSets && (
+
+ )}
+
+ {!hasPresets && (
+ + {intl.formatMessage(messages.hiddenBanner, { + count: hiddenCount, + })} +
+ )} +
+
+
+
+
+
+ {intl.formatMessage(messages.empty)}
+
+
+ )}
+
+ {hasPresets && !hasResults && (
+
+
+ {intl.formatMessage(messages.noResults)}
+
+ {fieldsQuery.isError && (
+
+ )}
+
+ )}
+
+ {hasPresets && hasResults && (
+
+ {/* Grid — hidden on mobile when a category is selected (detail
+ takes over the viewport, matching mobile navigation pattern). */}
+
+ )}
+
+ {/*
+
+ navigate({
+ to: '/categories/$categoryId',
+ params: { categoryId: docId },
+ })
+ }
+ projectRemoteId={selectedProject?.remoteId ?? null}
+ serverBaseUrl={serverConfig?.baseUrl ?? null}
+ />
+
+ {/* Detail — shown on mobile only when a category is selected;
+ always visible on desktop alongside the grid. */}
+
+
+ {fields.map((f) => (
+
+ {f.label}
+
+ ))}
+
+ ),
+}));
+
+const onBack = vi.fn();
+
+const sampleCategory: Category = {
+ docId: 'cat-1',
+ label: 'Deforestation',
+ fieldRefs: [{ docId: 'field-1' }, { docId: 'field-2' }, { docId: 'field-3' }],
+ color: '#22c55e',
+};
+
+const sampleFields: NormalizedField[] = [
+ {
+ docId: 'field-1',
+ tagKey: 'severity',
+ type: 'text',
+ label: 'Severity',
+ },
+ {
+ docId: 'field-2',
+ tagKey: 'area',
+ type: 'number',
+ label: 'Area (ha)',
+ },
+ {
+ docId: 'field-3',
+ tagKey: 'notes',
+ type: 'textarea',
+ label: 'Notes',
+ },
+];
+
+describe('CategoryDetail', () => {
+ it('shows placeholder when category is null', () => {
+ render(