@cccsaurora/howler-ui 2.17.0-dev.617 → 2.18.0-dev.626

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

@@ -12,11 +12,13 @@ import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
+import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
+import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
 import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitLinks from '@cccsaurora/howler-ui/components/elements/hit/HitLinks';
@@ -25,7 +27,6 @@ import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOvervi
 import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
 import HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
 import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
-import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -38,13 +39,13 @@ import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
 import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
 import LeadRenderer from '../view/LeadRenderer';
-const InformationPane = ({ onClose, selected: _selected }) => {
+const InformationPane = ({ onClose }) => {
     const { t, i18n } = useTranslation();
     const theme = useTheme();
     const location = useLocation();
     const { emit, isOpen } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
-    const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const pluginStore = usePluginStore();
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const [userIds, setUserIds] = useState(new Set());
@@ -93,6 +94,11 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     useEffect(() => {
         getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
     }, [getMatchingOverview, hit]);
+    useEffect(() => {
+        if (tab === 'hit_aggregate' && !hit?.howler.is_bundle) {
+            setTab('overview');
+        }
+    }, [hit?.howler.is_bundle, tab]);
     useEffect(() => {
         if (selected && isOpen()) {
             emit({
@@ -116,13 +122,28 @@ const InformationPane = ({ onClose, selected: _selected }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasOverview]);
+    /**
+     * What to show as the header? If loading a skeleton, then it depends on bundle or not. Bundles don't
+     * show anything while normal hits do
+     */
+    const header = useMemo(() => {
+        if (loading && !hit?.howler?.is_bundle) {
+            return _jsx(Skeleton, { variant: "rounded", height: 152 });
+        }
+        else if (!!hit && !hit.howler.is_bundle) {
+            return _jsx(HitBanner, { layout: HitLayout.DENSE, hit: hit });
+        }
+        else {
+            return null;
+        }
+    }, [hit, loading]);
     const tabContent = useMemo(() => {
         if (!tab) {
             return;
         }
         return {
             overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(ObjectDetails, { obj: hit }),
+            details: () => _jsx(HitDetails, { hit: hit }),
             hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: !loading && hit, hideSearch: true, filter: filter }),
             hit_data: () => (_jsx(JSONViewer, { data: !loading && hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
@@ -140,7 +161,8 @@ const InformationPane = ({ onClose, selected: _selected }) => {
         }[tab]?.();
     }, [dossiers, filter, hit, loading, tab, users]);
     const hasError = useMemo(() => !validateRegex(filter), [filter]);
-    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), !!hit && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: loading || !hit ? (_jsx(Skeleton, { variant: "rounded", height: 152 })) : (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: hit })) }), !!hit &&
+    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
+                        !hit.howler.is_bundle &&
                         (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers }), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
                                     display: 'flex',
                                     flexDirection: 'row',
@@ -170,7 +192,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
                                                         right: theme.spacing(-0.5)
                                                     },
                                                     '& > svg': { zIndex: 2 }
-                                                }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                                }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                                     // eslint-disable-next-line react/no-array-index-key
                                     , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
                                     // eslint-disable-next-line react/no-array-index-key

package/components/routes/hits/search/LayoutSettings.d.ts

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDropDown, List, Settings, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { FormLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+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(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+    return (_jsx(ChipPopper, { icon: _jsx(Settings, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium' } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [_jsx(FormLabel, { children: t('page.settings.local.hits.display_type') }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [_jsx(FormLabel, { children: t('page.settings.local.hits.layout') }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), 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') })] }) })] })] })] }) }));
+};
+export default LayoutSettings;

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

@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import HitFilter from './shared/HitFilter';
 import HitSort from './shared/HitSort';
-import IndexPicker from './shared/IndexPicker';
 import SearchSpan from './shared/SearchSpan';
 import ViewLink from './ViewLink';
 const QuerySettings = ({ boxSx }) => {
@@ -26,6 +25,6 @@ const QuerySettings = ({ boxSx }) => {
         await fetchViews();
         addView('');
     };
-    return (_jsx(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Grid, { container: true, spacing: 1, sx: theme => ({ ml: `${theme.spacing(-1)} !important`, mt: `${theme.spacing(-1)} !important` }), children: [_jsx(Grid, { item: true, children: _jsx(IndexPicker, {}) }), _jsx(Grid, { item: true, children: _jsx(HitSort, {}) }), _jsx(Grid, { item: true, children: _jsx(SearchSpan, {}) }), currentViews?.map((view, id) => (_jsx(Grid, { item: true, children: _jsx(ViewLink, { id: id, viewId: view }) }, view))), filters?.map((filter, id) => (_jsx(Grid, { item: true, children: _jsx(HitFilter, { id: id, value: filter }) }, filter)))] }), _jsx(ChipPopper, { icon: _jsx(Add, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, closeOnClick: true, slotProps: { chip: { size: 'small', color: 'primary' }, paper: { sx: { p: 1 } } }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Button, { id: "add-filter", "aria-label": t('hit.search.filter.add'), variant: "outlined", onClick: () => addFilter('howler.assessment:*'), disabled: filters?.some(filter => filter.endsWith('*')), sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.filter.add') })] }), _jsxs(Button, { id: "add-view", "aria-label": t('hit.search.view.add'), variant: "outlined", onClick: onAddView, disabled: !allowAddViews, sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.view.add') })] })] }) })] }) }));
+    return (_jsx(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Grid, { container: true, spacing: 1, sx: theme => ({ ml: `${theme.spacing(-1)} !important`, mt: `${theme.spacing(-1)} !important` }), children: [_jsx(Grid, { item: true, children: _jsx(HitSort, {}) }), _jsx(Grid, { item: true, children: _jsx(SearchSpan, {}) }), currentViews?.map((view, id) => (_jsx(Grid, { item: true, children: _jsx(ViewLink, { id: id, viewId: view }) }, view))), filters?.map((filter, id) => (_jsx(Grid, { item: true, children: _jsx(HitFilter, { id: id, value: filter }) }, filter)))] }), _jsx(ChipPopper, { icon: _jsx(Add, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, closeOnClick: true, slotProps: { chip: { size: 'small', color: 'primary' }, paper: { sx: { p: 1 } } }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Button, { id: "add-filter", "aria-label": t('hit.search.filter.add'), variant: "outlined", onClick: () => addFilter('howler.assessment:*'), disabled: filters?.some(filter => filter.endsWith('*')), sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.filter.add') })] }), _jsxs(Button, { id: "add-view", "aria-label": t('hit.search.view.add'), variant: "outlined", onClick: onAddView, disabled: !allowAddViews, sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.view.add') })] })] }) })] }) }));
 };
 export default memo(QuerySettings);

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

@@ -16,9 +16,6 @@ vi.mock('./shared/HitSort', () => ({
 vi.mock('./shared/SearchSpan', () => ({
     default: () => _jsx("div", { id: "search-span", children: "SearchSpan" })
 }));
-vi.mock('./shared/IndexPicker', () => ({
-    default: () => _jsx("div", { id: "index-picker", children: "IndexPicker" })
-}));
 vi.mock('./ViewLink', () => ({
     default: ({ id, viewId }) => (_jsxs("div", { id: `view-link-${id}`, "data-view-id": viewId, children: ["ViewLink ", id, ": ", viewId] }))
 }));
@@ -36,7 +33,6 @@ const mockFetchViews = vi.fn();
 let mockParameterContext = {
     filters: [],
     views: [],
-    indexes: [],
     addFilter: mockAddFilter,
     addView: mockAddView
 };
@@ -274,16 +270,16 @@ describe('QuerySettings', () => {
             mockParameterContext.views = ['view-1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
             const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
-            // IndexPicker + HitSort + SearchSpan + 1 view + 2 filters = 5 items
-            expect(gridItems.length).toBe(6);
+            // HitSort + SearchSpan + 1 view + 2 filters = 5 items
+            expect(gridItems.length).toBe(5);
         });
         it('should render correct number of items with multiple views', () => {
             mockParameterContext.filters = ['filter1'];
             mockParameterContext.views = ['view-1', 'view-2', 'view-3'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
             const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
-            // IndexPicker + HitSort + SearchSpan + 3 views + 1 filter = 6 items
-            expect(gridItems.length).toBe(7);
+            // HitSort + SearchSpan + 3 views + 1 filter = 6 items
+            expect(gridItems.length).toBe(6);
         });
     });
     describe('Edge Cases', () => {
@@ -512,12 +508,11 @@ describe('QuerySettings', () => {
             mockParameterContext.views = ['view-1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
             const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
-            // Order: IndexPicker, HitSort, SearchSpan, ViewLink(s), HitFilter(s)
-            expect(gridItems[0]).toContainElement(screen.getByTestId('index-picker'));
-            expect(gridItems[1]).toContainElement(screen.getByTestId('hit-sort'));
-            expect(gridItems[2]).toContainElement(screen.getByTestId('search-span'));
-            expect(gridItems[3]).toContainElement(screen.getByTestId('view-link-0'));
-            expect(gridItems[4]).toContainElement(screen.getByTestId('hit-filter-0'));
+            // Order: HitSort, SearchSpan, ViewLink(s), HitFilter(s)
+            expect(gridItems[0]).toContainElement(screen.getByTestId('hit-sort'));
+            expect(gridItems[1]).toContainElement(screen.getByTestId('search-span'));
+            expect(gridItems[2]).toContainElement(screen.getByTestId('view-link-0'));
+            expect(gridItems[3]).toContainElement(screen.getByTestId('hit-filter-0'));
         });
         it('should pass correct props to ViewLink components', () => {
             mockParameterContext.views = ['view-1', 'view-2'];

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ErrorOutline, List, SavedSearch, TableChart, Terminal } from '@mui/icons-material';
-import { Box, IconButton, LinearProgress, Stack, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Close, ErrorOutline, SavedSearch, Terminal } from '@mui/icons-material';
+import { Box, IconButton, 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';
@@ -14,22 +14,26 @@ import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layou
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 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 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 useMyLocalStorage, { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import React, { memo, useCallback, useMemo } from 'react';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+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 QuerySettings from './QuerySettings';
 const Item = memo(({ hit, onClick }) => {
     const theme = useTheme();
-    const { get } = useMyLocalStorage();
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const checkMiddleClick = useCallback((e, id) => {
@@ -39,7 +43,8 @@ const Item = memo(({ hit, onClick }) => {
             e.preventDefault();
         }
     }, []);
-    const layout = useMemo(() => (isMobile ? HitLayout.COMFY : (get(StorageKey.HIT_LAYOUT) ?? HitLayout.NORMAL)), [get]);
+    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: [
             {
@@ -48,7 +53,7 @@ const Item = memo(({ hit, onClick }) => {
                 '& 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'])
@@ -62,10 +67,10 @@ const Item = memo(({ hit, onClick }) => {
                 }
             },
             selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
-                '& > .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
+                '& .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
             },
             selected === hit.howler.id && {
-                '& > .MuiPaper-root': {
+                '& .MuiPaper-root': {
                     borderColor: 'primary.main',
                     boxShadow: `0px 0px 5px 2px ${theme.palette.primary.main}`
                 }
@@ -74,15 +79,21 @@ const Item = memo(({ hit, onClick }) => {
 });
 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 displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     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 searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
     const getSelectedId = useCallback((event) => {
@@ -93,7 +104,20 @@ const SearchPane = () => {
         }
         return selectedElement.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: [_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(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, {}) }) }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }) }), _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 => ({
+    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 => ({
                                                     position: 'absolute',
                                                     left: 0,
                                                     right: 0,

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

@@ -47,7 +47,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, { icon: _jsx(CircularProgress, { size: 12 }) });
+        return _jsx(Chip, { size: "small", 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 },

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

@@ -13,6 +13,6 @@ const EnhancedCell = ({ hit, value: rawValue, sx = {}, className, field }) => {
     return (_jsx(TableCell, { sx: { borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }, children: _jsx(Stack, { direction: "row", className: className, spacing: 0.5, sx: [
                 { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
                 ...(Array.isArray(sx) ? sx : [sx])
-            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, field: field, obj: hit, children: value }, value + index))) }) }));
+            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, field: field, hit: hit, children: value }, value + index))) }) }));
 };
 export default memo(EnhancedCell);

package/components/routes/hits/view/HitViewer.js

@@ -7,11 +7,13 @@ import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers'
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
+import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
 import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitLinks from '@cccsaurora/howler-ui/components/elements/hit/HitLinks';
@@ -19,7 +21,6 @@ import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
 import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
 import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
-import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -93,7 +94,7 @@ const HitViewer = () => {
         }
         return {
             overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(ObjectDetails, { obj: hit }),
+            details: () => _jsx(HitDetails, { hit: hit }),
             hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: hit }),
             hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
@@ -131,7 +132,7 @@ const HitViewer = () => {
                                 position: 'absolute',
                                 top: theme.spacing(2),
                                 right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key
                             , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key

package/components/routes/home/AnalyticCard.d.ts

@@ -1,7 +1,6 @@
-import type { FC } from 'react';
 export interface AnalyticSettings {
     analyticId: string;
     type: 'assessment' | 'created' | 'escalation';
 }
-declare const AnalyticCard: FC<AnalyticSettings>;
-export default AnalyticCard;
+declare const _default: import("react").NamedExoticComponent<AnalyticSettings>;
+export default _default;

package/components/routes/home/AnalyticCard.js

@@ -3,7 +3,7 @@ import { CenterFocusWeak, OpenInNew } from '@mui/icons-material';
 import { Box, Card, CardContent, IconButton, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import Assessment from '../analytics/widgets/Assessment';
@@ -27,4 +27,4 @@ const AnalyticCard = ({ analyticId, type }) => {
                     escalation: () => (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Escalation, { analytic: analytic, maxWidth: "80%" }) }))
                 }[type]()] }) }));
 };
-export default AnalyticCard;
+export default memo(AnalyticCard);

package/components/routes/home/ViewCard.js

@@ -150,6 +150,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${h.howler.id}`), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/ViewRefresh.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Imperative handle exposed to the parent via ref.
+ * The parent calls `handleRefreshComplete` once each ViewCard finishes its data fetch,
+ * allowing ViewRefresh to track how many cards are still in flight.
+ */
+export interface ViewRefreshHandle {
+    handleRefreshComplete: () => void;
+}
+interface ViewRefreshProps {
+    /** Auto-refresh interval in seconds (e.g. 15, 30, 60, 300). */
+    refreshRate: number;
+    /** Number of ViewCards currently on the dashboard. Used to track pending fetches. */
+    viewCardCount: number;
+    /** Called when a refresh cycle begins. Should update `refreshTick` in the parent to signal ViewCards. */
+    onRefresh: () => void;
+}
+/**
+ * Self-contained refresh control that owns the countdown timer and refreshing state.
+ * Isolating this state here prevents the progress ticker (which fires every `refreshRate * 10`ms)
+ * from causing unnecessary re-renders in the parent Home component.
+ */
+declare const ViewRefresh: import("react").ForwardRefExoticComponent<ViewRefreshProps & import("react").RefAttributes<ViewRefreshHandle>>;
+export default ViewRefresh;

package/components/routes/home/ViewRefresh.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Refresh } from '@mui/icons-material';
+import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+/**
+ * Self-contained refresh control that owns the countdown timer and refreshing state.
+ * Isolating this state here prevents the progress ticker (which fires every `refreshRate * 10`ms)
+ * from causing unnecessary re-renders in the parent Home component.
+ */
+const ViewRefresh = forwardRef(({ refreshRate, viewCardCount, onRefresh }, ref) => {
+    const { t } = useTranslation();
+    const [progress, setProgress] = useState(0);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const pendingRefreshes = useRef(0);
+    const timerRef = useRef(null);
+    /**
+     * Called by the parent (via ref) each time a ViewCard finishes fetching.
+     * Clears the refreshing state once all cards have reported back.
+     */
+    const handleRefreshComplete = useCallback(() => {
+        pendingRefreshes.current -= 1;
+        if (pendingRefreshes.current <= 0) {
+            setIsRefreshing(false);
+            setProgress(0);
+        }
+    }, []);
+    // Expose handleRefreshComplete to the parent without leaking the rest of the component's state.
+    useImperativeHandle(ref, () => ({ handleRefreshComplete }), [handleRefreshComplete]);
+    const triggerRefresh = useCallback(() => {
+        setIsRefreshing(true);
+        pendingRefreshes.current = viewCardCount;
+        if (viewCardCount === 0) {
+            setIsRefreshing(false);
+            setProgress(0);
+            return;
+        }
+        onRefresh();
+    }, [viewCardCount, onRefresh]);
+    useEffect(() => {
+        if (isRefreshing)
+            return;
+        if (progress >= 100) {
+            triggerRefresh();
+            return;
+        }
+        timerRef.current = setTimeout(() => {
+            setProgress(prev => prev + 1);
+        }, refreshRate * 10);
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, [progress, isRefreshing, refreshRate, triggerRefresh]);
+    return (_jsxs(Box, { sx: { position: 'relative', display: 'inline-flex' }, children: [isRefreshing ? (_jsx(CircularProgress, { variant: "indeterminate" })) : (_jsx(CircularProgress, { variant: "determinate", value: progress })), _jsx(Box, { sx: {
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: 'absolute',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }, children: _jsx(Tooltip, { title: t('refresh'), children: _jsx(IconButton, { onClick: triggerRefresh, disabled: isRefreshing, color: "primary", children: _jsx(Refresh, {}) }) }) })] }));
+});
+ViewRefresh.displayName = 'ViewRefresh';
+export default ViewRefresh;