@vertesia/ui 1.5.0-dev.20260714.072725Z → 1.5.0-dev.20260722.120446Z

package/src/features/views/ViewExperience.tsx

@@ -0,0 +1,408 @@
+import type {
+    ExecuteViewRequest,
+    ViewDisplayConfiguration,
+    ViewExecutionResult,
+    ViewHit,
+    ViewNavigationItem,
+    ViewResultMedia,
+} from '@vertesia/common';
+import { ImageRenditionFormat } from '@vertesia/common';
+import { Button, ErrorBox, MessageBox, SelectBox, Spinner } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { FullHeightLayout } from '@vertesia/ui/layout';
+import { useUserSession } from '@vertesia/ui/session';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { GenericPageNavHeader } from '../layout/GenericPageNavHeader.js';
+import type { ViewExecutor, ViewExperienceRenderers, ViewMediaResolver } from './types.js';
+import { DefaultViewNavigation } from './ViewNavigation.js';
+import { DefaultViewResults } from './ViewResults.js';
+import { DefaultViewSearch } from './ViewSearch.js';
+import { canonicalizeViewState, parseViewState, replaceViewStateInUrl, resolveViewSort } from './viewState.js';
+
+const FALLBACK_DISPLAY: ViewDisplayConfiguration = {
+    id: 'default',
+    label: 'Results',
+    type: 'list',
+    title: { field: 'name' },
+    subtitle: [
+        { field: 'type.name', format: 'content_type' },
+        { field: 'location', format: 'location' },
+    ],
+    description: { field: 'description' },
+};
+
+export interface ViewExperienceProps {
+    viewId: string;
+    /** Override execution for embedded apps or tests. Defaults to client.views.execute. */
+    execute?: ViewExecutor;
+    renderers?: ViewExperienceRenderers;
+    onOpenHit?: (hit: ViewHit) => void;
+    /** Override media resolution for embedded apps or custom storage backends. */
+    resolveMedia?: ViewMediaResolver;
+    syncUrl?: boolean;
+    showHeader?: boolean;
+    className?: string;
+}
+
+function initialRequest(syncUrl: boolean): ExecuteViewRequest {
+    if (!syncUrl || typeof window === 'undefined') return {};
+    return parseViewState(window.location.search);
+}
+
+function cleanRecord(values: Record<string, string[]>): Record<string, string[]> | undefined {
+    const filtered = Object.fromEntries(Object.entries(values).filter(([, entries]) => entries.length > 0));
+    return Object.keys(filtered).length > 0 ? filtered : undefined;
+}
+
+function ViewExperienceWithSession(props: Omit<ViewExperienceProps, 'execute'>) {
+    const { client } = useUserSession();
+    const execute = useCallback(
+        (request: ExecuteViewRequest) => client.views.execute(props.viewId, request),
+        [client, props.viewId],
+    );
+    const resolveMedia = useCallback<ViewMediaResolver>(
+        async (hit: ViewHit, media: ViewResultMedia) => {
+            if (media.source !== 'content_thumbnail') return undefined;
+
+            const content = hit.document.content;
+            try {
+                const rendition = await client.objects.getRenditionSafe(hit.id, content?.type, {
+                    format: ImageRenditionFormat.jpeg,
+                    max_hw: 512,
+                    generate_if_missing: false,
+                    sign_url: true,
+                });
+                if (rendition?.status === 'found' && rendition.renditions?.length) {
+                    return rendition.renditions[0];
+                }
+            } catch {
+                // A missing optional rendition falls through to the original image.
+            }
+
+            if (content?.source && content.type?.startsWith('image/')) {
+                const download = await client.files.getDownloadUrl(content.source);
+                return download.url;
+            }
+            return undefined;
+        },
+        [client],
+    );
+    return <ViewExperienceRuntime {...props} execute={execute} resolveMedia={props.resolveMedia ?? resolveMedia} />;
+}
+
+/**
+ * Reusable renderer for stored and app-contributed View Experiences.
+ * Pass `execute` to use it outside Vertesia's session provider.
+ */
+export function ViewExperience({ execute, ...props }: ViewExperienceProps) {
+    return execute ? (
+        <ViewExperienceRuntime key={props.viewId} {...props} execute={execute} />
+    ) : (
+        <ViewExperienceWithSession key={props.viewId} {...props} />
+    );
+}
+
+interface ViewExperienceRuntimeProps extends Omit<ViewExperienceProps, 'execute'> {
+    execute: ViewExecutor;
+}
+
+function ViewExperienceRuntime({
+    execute,
+    renderers,
+    onOpenHit,
+    resolveMedia,
+    syncUrl = true,
+    showHeader = true,
+    className,
+}: ViewExperienceRuntimeProps) {
+    const { t } = useUITranslation();
+    const executeRef = useRef(execute);
+    executeRef.current = execute;
+    const generationRef = useRef(0);
+    const [request, setRequest] = useState<ExecuteViewRequest>(() => initialRequest(syncUrl));
+    const [draftQuery, setDraftQuery] = useState(request.query ?? '');
+    const [draftKeyTerms, setDraftKeyTerms] = useState<Record<string, string[]>>(request.key_terms ?? {});
+    const [result, setResult] = useState<ViewExecutionResult>();
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error>();
+
+    const runRequest = useCallback(
+        (next: ExecuteViewRequest, updateUrl: boolean) => {
+            const generation = ++generationRef.current;
+            setRequest(next);
+            if (updateUrl && syncUrl) replaceViewStateInUrl(next);
+            setIsLoading(true);
+            setError(undefined);
+            return executeRef
+                .current(next)
+                .then((response) => {
+                    if (generation === generationRef.current) {
+                        const canonicalRequest = canonicalizeViewState(next, response);
+                        setRequest(canonicalRequest);
+                        if (syncUrl) replaceViewStateInUrl(canonicalRequest);
+                        setResult(response);
+                    }
+                })
+                .catch((cause: unknown) => {
+                    if (generation === generationRef.current) {
+                        setError(cause instanceof Error ? cause : new Error(String(cause)));
+                    }
+                })
+                .finally(() => {
+                    if (generation === generationRef.current) setIsLoading(false);
+                });
+        },
+        [syncUrl],
+    );
+
+    const loadUrlState = useCallback(() => {
+        const next = initialRequest(syncUrl);
+        setDraftQuery(next.query ?? '');
+        setDraftKeyTerms(next.key_terms ?? {});
+        return runRequest(next, false);
+    }, [runRequest, syncUrl]);
+
+    useEffect(() => {
+        void loadUrlState();
+        return () => {
+            generationRef.current += 1;
+        };
+    }, [loadUrlState]);
+
+    useEffect(() => {
+        if (!syncUrl || typeof window === 'undefined') return;
+        const onPopState = () => void loadUrlState();
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, [loadUrlState, syncUrl]);
+
+    const definition = result?.definition;
+    const navigation = useMemo(
+        () => [...(definition?.navigation ?? [])].sort((left, right) => (left.order ?? 0) - (right.order ?? 0)),
+        [definition?.navigation],
+    );
+    const resultsConfiguration = definition?.results;
+    const effectiveDisplayId = result?.display ?? request.display ?? resultsConfiguration?.default_display;
+    const display =
+        resultsConfiguration?.displays.find((candidate) => candidate.id === effectiveDisplayId) ?? FALLBACK_DISPLAY;
+    const effectiveSortId = result
+        ? resolveViewSort(request, result, resultsConfiguration?.default_sort)
+        : request.sort;
+
+    const applyRequest = (next: ExecuteViewRequest) => {
+        void runRequest(next, true);
+    };
+
+    const updateNavigation = (item: ViewNavigationItem, values: string[]) => {
+        const nextNavigation = cleanRecord({ ...(request.navigation ?? {}), [item.id]: values });
+        applyRequest({ ...request, navigation: nextNavigation, offset: undefined });
+    };
+
+    const submitSearch = () => {
+        applyRequest({
+            ...request,
+            query: draftQuery.trim() || undefined,
+            key_terms: cleanRecord(draftKeyTerms),
+            offset: undefined,
+        });
+    };
+
+    if (!result && isLoading) {
+        return (
+            <div className="flex h-full min-h-48 items-center justify-center">
+                <Spinner size="xl" />
+            </div>
+        );
+    }
+
+    if (!result || !definition) {
+        return (
+            <div className="flex h-full min-h-48 items-center justify-center p-4">
+                <ErrorBox
+                    title={t('store.searchFailed')}
+                    action={() => void loadUrlState()}
+                    actionLabel={t('agent.retry')}
+                >
+                    {t('store.searchFailed')}
+                </ErrorBox>
+            </div>
+        );
+    }
+
+    const SearchRenderer = definition.search?.renderer
+        ? (renderers?.search?.[definition.search.renderer] ?? DefaultViewSearch)
+        : DefaultViewSearch;
+    const ResultsRenderer = display.renderer
+        ? (renderers?.results?.[display.renderer] ?? DefaultViewResults)
+        : DefaultViewResults;
+    const hasSidebarNavigation = navigation.length > 0 && definition.layout?.navigation_position !== 'top';
+    const isWorklist = definition.layout?.mode === 'worklist';
+    const offset = request.offset ?? 0;
+    const pageStep = request.limit ?? display.page_size ?? 20;
+    const hasPrevious = offset > 0;
+    const hasNext = offset + result.hits.length < result.total;
+
+    const navigationWidgets = navigation.map((item) => {
+        const navigationResult = result.navigation[item.id] ?? { id: item.id, selected: [], nodes: [] };
+        const NavigationRenderer = item.renderer
+            ? (renderers?.navigation?.[item.renderer] ?? DefaultViewNavigation)
+            : DefaultViewNavigation;
+        return (
+            <NavigationRenderer
+                key={item.id}
+                configuration={item}
+                result={navigationResult}
+                isLoading={isLoading}
+                onChange={(values) => updateNavigation(item, values)}
+            />
+        );
+    });
+
+    return (
+        <FullHeightLayout className={className}>
+            {showHeader && <GenericPageNavHeader title={definition.name} description={definition.description} />}
+            <FullHeightLayout.Fixed heightClass="h-auto" className="space-y-3 border-b p-3">
+                {definition.search && (
+                    <SearchRenderer
+                        configuration={definition.search}
+                        query={draftQuery}
+                        keyTerms={draftKeyTerms}
+                        isLoading={isLoading}
+                        onQueryChange={setDraftQuery}
+                        onKeyTermsChange={(id, values) => setDraftKeyTerms((current) => ({ ...current, [id]: values }))}
+                        onSubmit={submitSearch}
+                    />
+                )}
+                {navigation.length > 0 && definition.layout?.navigation_position === 'top' && (
+                    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">{navigationWidgets}</div>
+                )}
+            </FullHeightLayout.Fixed>
+            <FullHeightLayout.Body className="p-0">
+                <div
+                    className={
+                        hasSidebarNavigation
+                            ? isWorklist
+                                ? 'grid min-h-full lg:grid-cols-[minmax(0,1fr)_18rem]'
+                                : 'grid min-h-full lg:grid-cols-[18rem_minmax(0,1fr)]'
+                            : 'min-h-full'
+                    }
+                >
+                    {hasSidebarNavigation && (
+                        <aside
+                            className={
+                                isWorklist
+                                    ? 'space-y-5 border-b p-4 lg:order-2 lg:border-s lg:border-b-0'
+                                    : 'space-y-5 border-b p-4 lg:border-e lg:border-b-0'
+                            }
+                        >
+                            {navigationWidgets}
+                        </aside>
+                    )}
+                    <main className={`min-w-0 space-y-4 p-4 ${isWorklist ? 'lg:order-1' : ''}`}>
+                        {error && (
+                            <ErrorBox
+                                title={t('store.searchFailed')}
+                                action={() => void runRequest(request, false)}
+                                actionLabel={t('agent.retry')}
+                            >
+                                {t('store.searchFailed')}
+                            </ErrorBox>
+                        )}
+                        {result.search.warnings.length > 0 && (
+                            <MessageBox status="warning" title={t('view.warning')}>
+                                <ul className="list-disc space-y-1 ps-4">
+                                    {result.search.warnings.map((warning) => (
+                                        <li key={`${warning.code}-${warning.path ?? ''}`}>{warning.message}</li>
+                                    ))}
+                                </ul>
+                            </MessageBox>
+                        )}
+                        <div className="flex flex-wrap items-center justify-between gap-3">
+                            <div className="flex items-center gap-2 text-sm text-muted">
+                                <span>{t('view.resultsCount', { count: result.total })}</span>
+                                {isLoading && <Spinner size="sm" />}
+                            </div>
+                            <div className="flex flex-wrap items-center gap-3">
+                                {resultsConfiguration?.allow_display_switch &&
+                                    resultsConfiguration.displays.length > 1 && (
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-sm text-muted">{t('view.display')}</span>
+                                            <SelectBox
+                                                options={resultsConfiguration.displays}
+                                                value={display}
+                                                onChange={(option) =>
+                                                    applyRequest({ ...request, display: option.id, offset: undefined })
+                                                }
+                                                optionLabel={(option) => option.label}
+                                                by="id"
+                                                disabled={isLoading}
+                                                aria-label={t('view.display')}
+                                                className="min-w-36"
+                                            />
+                                        </div>
+                                    )}
+                                {resultsConfiguration?.sort_options && resultsConfiguration.sort_options.length > 0 && (
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-sm text-muted">{t('view.sort')}</span>
+                                        <SelectBox
+                                            options={resultsConfiguration.sort_options}
+                                            value={resultsConfiguration.sort_options.find(
+                                                (option) => option.id === effectiveSortId,
+                                            )}
+                                            onChange={(option) =>
+                                                applyRequest({ ...request, sort: option.id, offset: undefined })
+                                            }
+                                            optionLabel={(option) => option.label}
+                                            by="id"
+                                            disabled={isLoading}
+                                            aria-label={t('view.sort')}
+                                            className="min-w-44"
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <ResultsRenderer
+                            configuration={display}
+                            definition={definition}
+                            request={request}
+                            result={result}
+                            isLoading={isLoading}
+                            onSortChange={(sort) => applyRequest({ ...request, sort, offset: undefined })}
+                            onOpenHit={onOpenHit}
+                            resolveMedia={resolveMedia}
+                        />
+                        {(hasPrevious || hasNext) && (
+                            <nav className="flex items-center justify-center gap-2" aria-label={t('view.pagination')}>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    disabled={!hasPrevious || isLoading}
+                                    onClick={() =>
+                                        applyRequest({
+                                            ...request,
+                                            offset: Math.max(0, offset - pageStep) || undefined,
+                                        })
+                                    }
+                                >
+                                    <ChevronLeft className="size-4 cn-rtl-flip" />
+                                    {t('grounded.previousPage')}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    disabled={!hasNext || isLoading}
+                                    onClick={() => applyRequest({ ...request, offset: offset + pageStep })}
+                                >
+                                    {t('grounded.nextPage')}
+                                    <ChevronRight className="size-4 cn-rtl-flip" />
+                                </Button>
+                            </nav>
+                        )}
+                    </main>
+                </div>
+            </FullHeightLayout.Body>
+        </FullHeightLayout>
+    );
+}

package/src/features/views/ViewNavigation.test.tsx

@@ -0,0 +1,86 @@
+import { cleanup, fireEvent, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import { DefaultViewNavigation } from './ViewNavigation.js';
+
+describe('DefaultViewNavigation', () => {
+    afterEach(cleanup);
+
+    it('keeps selected collection labels visible above the available nodes', () => {
+        const onChange = vi.fn();
+        renderWithProviders(
+            <DefaultViewNavigation
+                configuration={{ id: 'collections', label: 'Collections', source: 'collection' }}
+                result={{
+                    id: 'collections',
+                    selected: ['selected-id'],
+                    nodes: [
+                        { id: 'selected-id', label: 'Priority orders', count: 12, selected: true },
+                        { id: 'child-id', label: 'Escalated', count: 3 },
+                    ],
+                }}
+                isLoading={false}
+                onChange={onChange}
+            />,
+        );
+
+        expect(screen.getAllByText('Priority orders')).toHaveLength(2);
+        expect(screen.queryByText('selected-id')).toBeNull();
+        fireEvent.click(screen.getByRole('checkbox', { name: /Priority orders/ }));
+        expect(onChange).toHaveBeenCalledWith([]);
+    });
+
+    it('lets users remove a selected location after drill-down hides the parent node', () => {
+        const onChange = vi.fn();
+        renderWithProviders(
+            <DefaultViewNavigation
+                configuration={{ id: 'location', label: 'Location', source: 'location', multi_select: true }}
+                result={{
+                    id: 'location',
+                    selected: ['/Customers/Acme'],
+                    nodes: [{ id: '/Customers/Acme/Orders', label: 'Orders', count: 8 }],
+                }}
+                isLoading={false}
+                onChange={onChange}
+            />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Remove /Customers/Acme' }));
+        expect(onChange).toHaveBeenCalledWith([]);
+    });
+
+    it('renders property hierarchy buckets as drill-down choices with clickable breadcrumbs', () => {
+        const onChange = vi.fn();
+        renderWithProviders(
+            <DefaultViewNavigation
+                configuration={{
+                    id: 'geography',
+                    label: 'Geography',
+                    source: 'hierarchy',
+                    levels: [
+                        { id: 'state', label: 'State', field: 'properties.state' },
+                        { id: 'city', label: 'City', field: 'properties.city' },
+                    ],
+                }}
+                result={{
+                    id: 'geography',
+                    selected: ['h1:florida'],
+                    breadcrumbs: [{ id: 'h1:florida', label: 'FL', count: 0, selected: true }],
+                    nodes: [
+                        { id: 'h1:miami', label: 'Miami', count: 8 },
+                        { id: 'h1:orlando', label: 'Orlando', count: 4 },
+                    ],
+                }}
+                isLoading={false}
+                onChange={onChange}
+            />,
+        );
+
+        expect(screen.queryByText('h1:florida')).toBeNull();
+        expect(screen.getByRole('navigation', { name: 'Geography path' })).not.toBeNull();
+        fireEvent.click(screen.getByRole('button', { name: /Miami/ }));
+        expect(onChange).toHaveBeenLastCalledWith(['h1:miami']);
+        fireEvent.click(screen.getByRole('button', { name: 'FL' }));
+        expect(onChange).toHaveBeenLastCalledWith(['h1:florida']);
+    });
+});

package/src/features/views/ViewNavigation.tsx

@@ -0,0 +1,187 @@
+import type { ViewNavigationNode } from '@vertesia/common';
+import { Button, Checkbox, SelectBox } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { ChevronRight, X } from 'lucide-react';
+import { useId } from 'react';
+import type { ViewNavigationRendererProps } from './types.js';
+
+function nextSelection(current: string[], id: string, selected: boolean, multiSelect: boolean | undefined): string[] {
+    if (!selected) return current.filter((value) => value !== id);
+    if (multiSelect === false) return [id];
+    return current.includes(id) ? current : [...current, id];
+}
+
+function NodeLabel({ node }: { node: ViewNavigationNode }) {
+    return (
+        <span className="flex min-w-0 flex-1 items-center justify-between gap-2">
+            <span className="truncate">{node.label}</span>
+            <span className="text-xs tabular-nums text-muted">{node.count}</span>
+        </span>
+    );
+}
+
+export function DefaultViewNavigation({ configuration, result, isLoading, onChange }: ViewNavigationRendererProps) {
+    const { t } = useUITranslation();
+    const idPrefix = useId();
+    const presentation =
+        configuration.presentation ??
+        (configuration.source === 'location' || configuration.source === 'hierarchy' ? 'tree' : 'list');
+    const multiSelect = configuration.source === 'hierarchy' ? false : configuration.multi_select;
+    const breadcrumbs = result.breadcrumbs ?? [];
+
+    const toggle = (id: string, selected: boolean) => {
+        onChange(nextSelection(result.selected, id, selected, multiSelect));
+    };
+
+    return (
+        <section className="space-y-2" aria-labelledby={`${idPrefix}-label`}>
+            <div className="flex items-center justify-between gap-2">
+                <h2 id={`${idPrefix}-label`} className="text-sm font-semibold">
+                    {configuration.label}
+                </h2>
+                {result.selected.length > 0 && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        disabled={isLoading}
+                        onClick={() => onChange([])}
+                        aria-label={`${t('filter.clearAll')}: ${configuration.label}`}
+                    >
+                        <X className="size-3.5" />
+                        {t('filter.clearAll')}
+                    </Button>
+                )}
+            </div>
+
+            {configuration.source === 'hierarchy' && breadcrumbs.length > 0 && (
+                <nav aria-label={`${configuration.label} path`}>
+                    <ol className="flex flex-wrap items-center gap-1 text-sm">
+                        {breadcrumbs.map((node, index) => (
+                            <li key={node.id} className="flex items-center gap-1">
+                                {index > 0 && <ChevronRight aria-hidden="true" className="size-3.5 text-muted" />}
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    disabled={isLoading}
+                                    onClick={() => onChange([node.id])}
+                                    aria-current={index === breadcrumbs.length - 1 ? 'page' : undefined}
+                                >
+                                    {node.label}
+                                </Button>
+                            </li>
+                        ))}
+                    </ol>
+                </nav>
+            )}
+
+            {result.selected.length > 0 &&
+                (configuration.source === 'location' || configuration.source === 'collection') && (
+                    <div className="flex flex-wrap gap-1">
+                        {result.selected.map((value) => {
+                            const node = result.nodes.find((candidate) => candidate.id === value);
+                            const label = node?.label ?? value;
+                            return (
+                                <Button
+                                    key={value}
+                                    type="button"
+                                    variant="secondary"
+                                    size="sm"
+                                    disabled={isLoading}
+                                    onClick={() => toggle(value, false)}
+                                    aria-label={t('view.removeSelection', { value: label })}
+                                >
+                                    {label}
+                                    <X aria-hidden="true" className="size-3.5" />
+                                </Button>
+                            );
+                        })}
+                    </div>
+                )}
+
+            {presentation === 'select' && multiSelect === false ? (
+                <SelectBox<ViewNavigationNode>
+                    options={result.nodes}
+                    value={result.nodes.find((node) => result.selected.includes(node.id))}
+                    onChange={(node) => onChange([node.id])}
+                    optionLabel={(node) => `${node.label} (${node.count})`}
+                    by="id"
+                    disabled={isLoading}
+                    placeholder={configuration.label}
+                    aria-label={configuration.label}
+                />
+            ) : presentation === 'select' ? (
+                <SelectBox<ViewNavigationNode>
+                    multiple
+                    options={result.nodes}
+                    value={result.nodes.filter((node) => result.selected.includes(node.id))}
+                    onChange={(nodes) => onChange(nodes.map((node) => node.id))}
+                    optionLabel={(node) => `${node.label} (${node.count})`}
+                    by="id"
+                    disabled={isLoading}
+                    placeholder={configuration.label}
+                    aria-label={configuration.label}
+                />
+            ) : presentation === 'chips' ? (
+                <div className="flex flex-wrap gap-2">
+                    {result.nodes.map((node) => (
+                        <Button
+                            type="button"
+                            variant={result.selected.includes(node.id) ? 'secondary' : 'outline'}
+                            size="sm"
+                            key={node.id}
+                            disabled={isLoading}
+                            onClick={() => toggle(node.id, !result.selected.includes(node.id))}
+                        >
+                            {node.label}
+                            <span className="text-xs tabular-nums text-muted">{node.count}</span>
+                        </Button>
+                    ))}
+                </div>
+            ) : configuration.source === 'hierarchy' ? (
+                <div className="space-y-1">
+                    {result.nodes.map((node) => (
+                        <Button
+                            type="button"
+                            variant={result.selected.includes(node.id) ? 'secondary' : 'ghost'}
+                            className="w-full justify-start"
+                            key={node.id}
+                            disabled={isLoading}
+                            onClick={() => onChange([node.id])}
+                        >
+                            <NodeLabel node={node} />
+                            {node.expandable && (
+                                <ChevronRight aria-hidden="true" className="size-4 shrink-0 text-muted" />
+                            )}
+                        </Button>
+                    ))}
+                </div>
+            ) : (
+                <div className="space-y-1">
+                    {result.nodes.map((node, index) => {
+                        const nodeId = `${idPrefix}-${index}`;
+                        return (
+                            <div
+                                key={node.id}
+                                className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted"
+                            >
+                                <Checkbox
+                                    id={nodeId}
+                                    checked={result.selected.includes(node.id)}
+                                    disabled={isLoading}
+                                    onCheckedChange={(checked) => toggle(node.id, checked === true)}
+                                />
+                                <label htmlFor={nodeId} className="flex min-w-0 flex-1 cursor-pointer text-sm">
+                                    <NodeLabel node={node} />
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            {result.nodes.length === 0 && <p className="text-sm text-muted">{t('filter.noAvailableFilters')}</p>}
+        </section>
+    );
+}