@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/routes/hits/search/{HitBrowser.js → RecordBrowser.js}

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, Close, ManageSearch } from '@mui/icons-material';
 import { Box, Card, Checkbox, Collapse, Drawer, Fab, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import HitSearchProvider, { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import GridColumnsProvider from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 import ParameterProvider, { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import RecordSearchProvider, { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
@@ -18,7 +19,7 @@ import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import InformationPane from './InformationPane';
 import SearchPane from './SearchPane';
-import HitGrid from './grid/HitGrid';
+import RecordGrid from './grid/RecordGrid';
 // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
 const Wrapper = memo(({ show, showDrawer, children, onClose }) => {
     return (_jsx(ErrorBoundary, { children: showDrawer ? (_jsx(Drawer, { onClose: onClose, open: show, anchor: "right", PaperProps: { sx: { backgroundImage: 'none', overflow: 'hidden', width: '75vw' } }, children: children })) : (_jsx(FlexPort, { disableOverflow: true, children: children })) }));
@@ -32,14 +33,14 @@ const HitBrowser = () => {
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
     const selectedViews = useContextSelector(ParameterContext, ctx => ctx.views);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
     const forceDrawer = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false)[0];
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
     const location = useLocation();
     const routeParams = useParams();
     const [show, setShow] = useState(!!selected);
@@ -55,7 +56,7 @@ const HitBrowser = () => {
         return false;
     }, [selected, selectedHits]);
     useEffect(() => {
-        fetchViews(selectedViews);
+        void fetchViews(selectedViews);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.pathname, location.search]);
     const onClose = useCallback(() => {
@@ -77,7 +78,7 @@ const HitBrowser = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [addHitToSelection, location.pathname, removeHitFromSelection, response, routeParams.id, selected, setSelected]);
-    return (_jsxs(Stack, { direction: "row", flex: 1, sx: { overflow: 'hidden' }, children: [_jsxs(Box, { position: "relative", flex: 1.15, height: "100%", display: "flex", sx: [{ overflow: 'auto' }, displayType === 'list' && !isNull(searchPaneWidth) && { maxWidth: searchPaneWidth }], children: [_jsx(ErrorBoundary, { children: displayType === 'list' ? _jsx(SearchPane, {}) : _jsx(HitGrid, {}) }), _jsx(Collapse, { in: showSelectBar, unmountOnExit: true, sx: {
+    return (_jsxs(Stack, { direction: "row", flex: 1, sx: { overflow: 'hidden' }, children: [_jsxs(Box, { position: "relative", flex: 1.15, height: "100%", display: "flex", sx: [{ overflow: 'auto' }, displayType === 'list' && !isNull(searchPaneWidth) && { maxWidth: searchPaneWidth }], children: [_jsx(ErrorBoundary, { children: displayType === 'list' ? _jsx(SearchPane, {}) : _jsx(RecordGrid, {}) }), _jsx(Collapse, { in: showSelectBar, unmountOnExit: true, sx: {
                             position: 'absolute',
                             bottom: 0,
                             left: 0,
@@ -128,6 +129,6 @@ const HitBrowser = () => {
                 }, children: _jsx(ChevronLeft, { sx: { transition: 'rotate 250ms', rotate: show ? '180deg' : '0deg' } }) }))] }));
 };
 const HitBrowserProvider = () => {
-    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(HitBrowser, {}) }) }));
+    return (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { children: _jsx(HitBrowser, {}) }) }) }));
 };
 export default HitBrowserProvider;

package/components/routes/hits/search/{HitQuery.d.ts → RecordQuery.d.ts}

@@ -1,9 +1,9 @@
-export type HitQueryProps = {
+export type RecordQueryProps = {
     triggerSearch: (query: string) => void;
     onChange?: (query: string, isDirty: boolean) => void;
     searching?: boolean;
     disabled?: boolean;
     compact?: boolean;
 };
-declare const _default: import("react").NamedExoticComponent<HitQueryProps>;
+declare const _default: import("react").NamedExoticComponent<RecordQueryProps>;
 export default _default;

package/components/routes/hits/search/{HitQuery.js → RecordQuery.js}

@@ -5,7 +5,7 @@ import { Badge, Box, Card, Skeleton, Tooltip, alpha, useTheme } from '@mui/mater
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryEditor';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -13,8 +13,8 @@ import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeMultilineLucene } from '@cccsaurora/howler-ui/utils/stringUtils';
 const DEFAULT_MULTILINE_HEIGHT = 250;
-const PROMPT_CONTEXT = 'isHitQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
-const HitQuery = ({ searching = false, disabled = false, compact = false, triggerSearch, onChange }) => {
+const PROMPT_CONTEXT = 'isRecordQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
+const RecordQuery = ({ searching = false, disabled = false, compact = false, triggerSearch, onChange }) => {
     const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();
@@ -22,7 +22,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
     const savedQuery = useContextSelector(ParameterContext, ctx => ctx.query || DEFAULT_QUERY);
     const prevQuery = useRef(null);
     const [query, setQuery] = useState(new URLSearchParams(window.location.search).get('query') || DEFAULT_QUERY);
-    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const fzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.fzfSearch ?? false);
     const [loaded, setLoaded] = useState(false);
     const [multiline, setMultiline] = useState(false);
     const [y, setY] = useState(0);
@@ -90,7 +90,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
         window.addEventListener('mouseup', onMouseUp);
     }, [onMouseMove, onMouseUp]);
     const onMount = useCallback((ed) => {
-        ed.createContextKey('isHitQuery', true);
+        ed.createContextKey('isRecordQuery', true);
         setLoaded(true);
     }, []);
     const options = useMemo(() => ({
@@ -148,4 +148,4 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
                     zIndex: 1000
                 }, onMouseDown: onMouseDown }))] }));
 };
-export default memo(HitQuery);
+export default memo(RecordQuery);

package/components/routes/hits/search/SearchPane.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, ErrorOutline, SavedSearch, Terminal } from '@mui/icons-material';
-import { Box, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { ErrorOutline } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
@@ -15,26 +15,25 @@ import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout
 import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
+import useRecordSelection from '@cccsaurora/howler-ui/components/hooks/useRecordSelection';
+import React, { memo, useCallback, useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import BundleParentMenu from './BundleParentMenu';
-import { BundleScroller } from './BundleScroller';
-import HitContextMenu from './HitContextMenu';
-import HitQuery from './HitQuery';
-import LayoutSettings from './LayoutSettings';
+import { isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import QuerySettings from './QuerySettings';
-const Item = memo(({ hit, onClick }) => {
+import RecordQuery from './RecordQuery';
+import SearchActionMenu from './shared/SearchActionMenu';
+const Item = memo(({ record, onClick }) => {
     const theme = useTheme();
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const { t } = useTranslation();
+    const selectedRecords = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const checkMiddleClick = useCallback((e, id) => {
         if (e.button === 1) {
@@ -46,14 +45,14 @@ const Item = memo(({ hit, onClick }) => {
     const [hitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, HitLayout.NORMAL);
     const layout = useMemo(() => (isMobile ? HitLayout.COMFY : hitLayout), [hitLayout]);
     // Search result list item renderer.
-    return (_jsx(Box, { id: hit.howler.id, onAuxClick: e => checkMiddleClick(e, hit.howler.id), onClick: ev => onClick(ev, hit), sx: [
+    return (_jsxs(Box, { id: record.howler.id, onAuxClick: e => checkMiddleClick(e, record.howler.id), onClick: ev => onClick(ev, record), sx: [
             {
                 mb: 2,
                 cursor: 'pointer',
                 '& span,p,h6': {
                     cursor: 'text'
                 },
-                '& .MuiPaper-root': {
+                '& > .MuiPaper-root': {
                     border: '4px solid transparent',
                     boxShadow: `0px 0px 0px 0px transparent`,
                     transition: theme.transitions.create(['border-color', 'box-shadow'])
@@ -66,34 +65,26 @@ const Item = memo(({ hit, onClick }) => {
                     paddingBottom: 'inherit' // prevents slight height variation on selected card.
                 }
             },
-            selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
-                '& .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
+            selectedRecords.some(_record => _record.howler.id === record.howler.id) && {
+                '& > .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
             },
-            selected === hit.howler.id && {
-                '& .MuiPaper-root': {
+            selected === record.howler.id && {
+                '& > .MuiPaper-root': {
                     borderColor: 'primary.main',
                     boxShadow: `0px 0px 5px 2px ${theme.palette.primary.main}`
                 }
             }
-        ], children: _jsx(HitCard, { id: hit.howler.id, layout: layout }) }));
+        ], children: [isHit(record) && _jsx(HitCard, { id: record.howler.id, layout: layout }), isEvent(record) && _jsx(EventCard, { id: record.howler.id, event: record }), !isHit(record) && !isEvent(record) && (_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsx(Alert, { variant: "outlined", severity: "error", children: _jsx(AlertTitle, { children: t('hit.search.record.invalid') }) }) }))] }));
 });
 const SearchPane = () => {
     const { t } = useTranslation();
-    const location = useLocation();
-    const navigate = useNavigate();
-    const routeParams = useParams();
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
-    const triggerSearch = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const { onClick } = useHitSelection();
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
-    const bundleHit = useContextSelector(HitContext, ctx => location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null);
+    const triggerSearch = useContextSelector(RecordSearchContext, ctx => ctx.search);
+    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
+    const { onClick } = useRecordSelection();
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
     const getSelectedId = useCallback((event) => {
@@ -104,26 +95,13 @@ const SearchPane = () => {
         }
         return selectedElement.id;
     }, []);
-    useEffect(() => {
-        if (location.pathname.startsWith('/bundles')) {
-            getHit(routeParams.id);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname, routeParams.id]);
-    return (_jsx(FlexPort, { id: "hitscrollbar", children: _jsx(PageCenter, { textAlign: "left", mt: 0, mb: 6, ml: 0, mr: 0, maxWidth: "1500px", children: _jsxs(VSBox, { top: 0, children: [_jsxs(Stack, { ml: -1, mr: -1, sx: { '& .overflowingContentWidgets > *': { zIndex: '2000 !important' } }, spacing: 1, children: [bundleHit && (_jsx(BundleScroller, { children: _jsx(HitContextMenu, { getSelectedId: () => bundleHit.howler.id, children: _jsx(Stack, { spacing: 1, sx: { mx: -1 }, children: _jsx(HowlerCard, { sx: [
-                                                { p: 1, border: '4px solid transparent', cursor: 'pointer' },
-                                                location.pathname.startsWith('/bundles') &&
-                                                    selected === routeParams.id && { borderColor: 'primary.main' }
-                                            ], onClick: () => {
-                                                clearSelectedHits(bundleHit.howler.id);
-                                                setSelected(bundleHit.howler.id);
-                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
+    return (_jsx(FlexPort, { id: "hitscrollbar", children: _jsx(PageCenter, { textAlign: "left", mt: 0, mb: 6, ml: 0, mr: 0, maxWidth: "1500px", children: _jsxs(VSBox, { top: 0, children: [_jsx(Stack, { ml: -1, mr: -1, sx: { '& .overflowingContentWidgets > *': { zIndex: '2000 !important' } }, spacing: 1, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), _jsx(SearchActionMenu, { query: query })] }) }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(RecordQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
                                                     position: 'absolute',
                                                     left: 0,
                                                     right: 0,
                                                     bottom: 0,
                                                     borderBottomLeftRadius: theme.shape.borderRadius,
                                                     borderBottomRightRadius: theme.shape.borderRadius
-                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(HitContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(hit => _jsx(Item, { hit: hit, onClick: onClick }, hit.howler.id))) }) })] }) }) }));
+                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
 };
 export default memo(SearchPane);

package/components/routes/hits/search/ViewLink.js

@@ -1,9 +1,9 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll } from '@mui/icons-material';
+import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll, Warning } from '@mui/icons-material';
 import { Autocomplete, Chip, CircularProgress, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { memo, useEffect, useMemo, useState } from 'react';
@@ -20,12 +20,13 @@ const ViewLink = ({ id, viewId }) => {
     const currentViews = useContextSelector(ParameterContext, ctx => ctx.views);
     const removeView = useContextSelector(ParameterContext, ctx => ctx.removeView);
     const setParamView = useContextSelector(ParameterContext, ctx => ctx.setView);
-    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
+    const search = useContextSelector(RecordSearchContext, ctx => ctx.search);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
     const [loading, setLoading] = useState(true);
     const [view, setView] = useState(null);
     useEffect(() => {
         setLoading(true);
-        getCurrentViews({ views: [viewId], ignoreParams: true })
+        void getCurrentViews({ views: [viewId], ignoreParams: true })
             .then(result => setView(result[0]))
             .finally(() => setLoading(false));
     }, [getCurrentViews, viewId]);
@@ -47,7 +48,7 @@ const ViewLink = ({ id, viewId }) => {
     }, [query, sort, span, view]);
     const options = useMemo(() => Object.values(views).filter(_view => !!_view && !currentViews?.includes(_view.view_id)), [currentViews, views]);
     if (loading) {
-        return _jsx(Chip, { size: "small", icon: _jsx(CircularProgress, { size: 12 }) });
+        return _jsx(Chip, { icon: _jsx(CircularProgress, { size: 12 }) });
     }
     if (viewId === '') {
         return (_jsx(ChipPopper, { icon: _jsx(SelectAll, {}), label: t('hit.search.view.select'), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small', color: 'warning' } }, children: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(Autocomplete, { fullWidth: true, size: "small", options: options, getOptionLabel: _view => t(_view.title), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
@@ -60,6 +61,6 @@ const ViewLink = ({ id, viewId }) => {
                 readonly: _jsx(Lock, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
                 global: _jsx(Language, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
                 personal: _jsx(Person, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) })
-            }[view.type] }), label: _jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
+            }[view.type] }), label: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), view.settings?.display === 'grid' && displayType !== 'grid' && (_jsx(Tooltip, { title: t('view.display.grid.inactive_warning'), children: _jsx(Warning, { fontSize: "small", color: "warning" }) }))] }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
 };
 export default memo(ViewLink);

package/components/routes/hits/search/ViewLink.test.js

@@ -2,13 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
-import {} from 'react';
 import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { vi } from 'vitest';
 setupReactRouterMock();
 // Import component after mocks
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
@@ -26,7 +25,7 @@ let mockParameterContext = {
     removeView: vi.fn(),
     setView: vi.fn()
 };
-let mockHitSearchContext = {
+let mockRecordSearchContext = {
     search: vi.fn()
 };
 let mockViewContext = {
@@ -38,7 +37,7 @@ let mockViewContext = {
 };
 // Test wrapper
 const Wrapper = ({ children }) => {
-    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(HitSearchContext.Provider, { value: mockHitSearchContext, children: _jsx(ViewContext.Provider, { value: mockViewContext, children: children }) }) }) }));
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(RecordSearchContext.Provider, { value: mockRecordSearchContext, children: _jsx(ViewContext.Provider, { value: mockViewContext, children: children }) }) }) }));
 };
 describe('ViewLink', () => {
     let user;
@@ -52,7 +51,7 @@ describe('ViewLink', () => {
         mockParameterContext.views = ['test-view-id'];
         mockParameterContext.removeView = vi.fn();
         mockParameterContext.setView = vi.fn();
-        mockHitSearchContext.search = vi.fn();
+        mockRecordSearchContext.search = vi.fn();
         mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
         mockViewContext.views = {
             'test-view-id': createMockView(),
@@ -230,7 +229,7 @@ describe('ViewLink', () => {
             await user.click(screen.getByText('Test View').parentElement);
             const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockHitSearchContext.search).toHaveBeenCalledWith('howler.id:*');
+            expect(mockRecordSearchContext.search).toHaveBeenCalledWith('howler.id:*');
         });
         it('should display open button', async () => {
             render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
@@ -306,7 +305,7 @@ describe('ViewLink', () => {
             await user.click(screen.getByText('Test View').parentElement);
             const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockHitSearchContext.search).toHaveBeenCalledWith(undefined);
+            expect(mockRecordSearchContext.search).toHaveBeenCalledWith(undefined);
         });
         it('should handle custom span correctly', async () => {
             mockParameterContext.span = 'date.range.custom';
@@ -398,14 +397,14 @@ describe('ViewLink', () => {
                 expect(mockParameterContext.removeView).toHaveBeenCalledWith('test-view-id');
             }
         });
-        it('should use search from HitSearchContext', async () => {
+        it('should use search from RecordSearchContext', async () => {
             mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
             render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
             await screen.findByText('Test View');
             await user.click(screen.getByText('Test View').parentElement);
             const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockHitSearchContext.search).toHaveBeenCalledWith('howler.id:*');
+            expect(mockRecordSearchContext.search).toHaveBeenCalledWith('howler.id:*');
         });
         it('should filter available views using currentViews from ParameterContext', async () => {
             mockParameterContext.views = ['test-view-id'];

package/components/routes/hits/search/grid/RecordGrid.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const RecordGrid: FC;
+export default RecordGrid;

package/components/routes/hits/search/grid/RecordGrid.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info } from '@mui/icons-material';
+import { LinearProgress, Paper, Stack, TableBody, Typography, useTheme } from '@mui/material';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
+import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
+import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/AddColumnModal';
+import RecordTable from '@cccsaurora/howler-ui/components/elements/hit/grid/RecordTable';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
+import useRecordSelection from '@cccsaurora/howler-ui/components/hooks/useRecordSelection';
+import { uniq } from 'lodash-es';
+import { useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import QuerySettings from '../QuerySettings';
+import RecordQuery from '../RecordQuery';
+import SearchActionMenu from '../shared/SearchActionMenu';
+const RecordGrid = () => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { onClick } = useRecordSelection();
+    const search = useContextSelector(RecordSearchContext, ctx => ctx.search);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const { columns, setColumns, isReady } = useContext(GridColumnsContext);
+    const showSelectBar = useMemo(() => {
+        if (selectedHits.length > 1) {
+            return true;
+        }
+        if (selectedHits.length === 1 && selected && selectedHits[0]?.howler.id !== selected) {
+            return true;
+        }
+        return false;
+    }, [selected, selectedHits]);
+    const onScroll = useCallback((event) => {
+        const target = event.target;
+        if (target.scrollHeight - target.scrollTop === target.clientHeight) {
+            search(query, true);
+        }
+    }, [query, search]);
+    const getSelectedId = useCallback((event) => {
+        const target = event.target;
+        const selectedElement = target.closest('[id]');
+        if (!selectedElement) {
+            return;
+        }
+        return selectedElement.id;
+    }, []);
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(SearchActionMenu, { query: query })] }), _jsx(Stack, { direction: "row", spacing: 1, children: _jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(RecordQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                borderBottomLeftRadius: theme.shape.borderRadius,
+                                borderBottomRightRadius: theme.shape.borderRadius
+                            } }))] }) }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) })] }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsx(RecordTable, { query: query, items: response?.items, refreshItems: search, ContextMenu: RecordContextMenu, contextMenuProps: { Component: TableBody, getSelectedId: getSelectedId }, onItemClick: onClick }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
+};
+export default RecordGrid;

package/components/routes/hits/search/shared/CustomSort.js

@@ -16,7 +16,7 @@ const CustomSort = () => {
     const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
     const sortFields = useMemo(() => sortEntries.map(entry => entry.split(' ').slice(0, 2)), [sortEntries]);
     useEffect(() => {
-        getHitFields();
+        void getHitFields();
     }, [getHitFields]);
     useEffect(() => {
         if (!sort) {

package/components/routes/hits/search/shared/CustomSpan.test.js

@@ -15,7 +15,6 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import dayjs from 'dayjs';
 import minMax from 'dayjs/plugin/minMax';
-import {} from 'react';
 dayjs.extend(minMax);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 // Import after mocks
@@ -27,9 +26,9 @@ const defaultCtx = {
     endDate: undefined,
     setCustomSpan: mockSetCustomSpan
 };
-const makeWrapper = (ctx) => function ({ children }) {
-    return (_jsx(ParameterContext.Provider, { value: { ...defaultCtx, ...ctx }, children: children }));
-};
+const makeWrapper = (ctx) => 
+// eslint-disable-next-line react/function-component-definition
+({ children }) => (_jsx(ParameterContext.Provider, { value: { ...defaultCtx, ...ctx }, children: children }));
 describe('CustomSpan', () => {
     beforeEach(() => {
         vi.clearAllMocks();

package/components/routes/hits/search/shared/HitFilter.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("react").NamedExoticComponent<{
-    size?: "small" | "medium";
+    size?: 'small' | 'medium';
     id: number;
     value: string;
 }>;

package/components/routes/hits/search/shared/HitSort.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("react").NamedExoticComponent<{
-    size?: "small" | "medium";
+    size?: 'small' | 'medium';
 }>;
 export default _default;

package/components/routes/hits/search/shared/HitSort.js

@@ -19,6 +19,7 @@ const ACCEPTED_SORTS = [
     'event.provider',
     'organization.name',
     'howler.score',
+    'howler.triaged',
     CUSTOM
 ];
 const HitSort = ({ size = 'small' }) => {
@@ -56,7 +57,7 @@ const HitSort = ({ size = 'small' }) => {
         if (location.search.includes('sort')) {
             return;
         }
-        (async () => {
+        void (async () => {
             const selectedViewSort = (await getCurrentViews({ lazy: true })).find(view => view?.sort)?.sort;
             if (selectedViewSort && !location.search.includes('sort')) {
                 setSavedSort(selectedViewSort);

package/components/routes/hits/search/shared/IndexPicker.d.ts

@@ -0,0 +1,8 @@
+import type { SearchIndex } from '@cccsaurora/howler-ui/api/v2/search';
+declare const _default: import("react").NamedExoticComponent<{
+    additionalOptions?: {
+        label: string;
+        value: SearchIndex;
+    }[];
+}>;
+export default _default;

package/components/routes/hits/search/shared/IndexPicker.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Autocomplete, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FILTER_OPTIONS = [
+    { label: 'hit.search.index.hit', value: 'hit' },
+    { label: 'hit.search.index.event', value: 'event' }
+];
+const IndexPicker = ({ additionalOptions = [] }) => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
+    const allOptions = [...FILTER_OPTIONS, ...additionalOptions];
+    const selectedOptions = allOptions.filter(opt => indexes.includes(opt.value));
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: selectedOptions.map(opt => t(opt.label)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: allOptions, value: selectedOptions, onChange: (_ev, values) => values.length > 0 && setIndexes(values.map(val => val.value)), isOptionEqualToValue: (opt, val) => opt.value === val.value, getOptionLabel: opt => t(opt.label), renderInput: params => _jsx(TextField, { ...params }) }) }));
+};
+export default memo(IndexPicker);

package/components/routes/hits/search/shared/LayoutSettings.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDropDown, InfoOutlined, Settings, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import LayoutToggle from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+const LayoutSettings = () => {
+    const { t } = useTranslation();
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
+    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+    const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
+    return (_jsx(ChipPopper, { icon: _jsx(Tooltip, { title: t('search.layout.settings'), children: _jsx(Settings, {}) }), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium', 'aria-label': t('search.layout.settings') } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "display_type", children: t('page.settings.local.hits.display_type') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.display_type.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "layout", children: t('page.settings.local.hits.layout') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.layout.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), "aria-labelledby": "layout", children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "field_count", children: t('page.settings.local.hits.field_count') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.field_count.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignSelf: "stretch", children: [_jsx(Checkbox, { checked: templateFieldCount !== null, onChange: (_, checked) => setTemplateFieldCount(checked ? 3 : null), size: "small" }), _jsx(TextField, { type: "number", size: "small", disabled: templateFieldCount === null, value: templateFieldCount ?? 3, fullWidth: true, onChange: e => {
+                                const val = parseInt(e.target.value);
+                                if (!isNaN(val)) {
+                                    setTemplateFieldCount(Math.min(15, Math.max(0, val)));
+                                }
+                            }, inputProps: { min: 0, max: 15, 'aria-labelledby': 'field_count' } })] })] }) }));
+};
+export default LayoutSettings;