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

package/commons/components/topnav/AppName.d.ts

@@ -1,4 +1,5 @@
-declare const _default: import("react").MemoExoticComponent<({ noName }: {
+declare const AppName: ({ noName }: {
     noName?: boolean;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AppName>;
 export default _default;

package/commons/components/topnav/AppSwitcher.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const AppSwitcher: () => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AppSwitcher>;
 export default _default;

package/commons/components/topnav/ThemeSelection.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const ThemeSelection: () => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ThemeSelection>;
 export default _default;

package/commons/components/topnav/ThemeSelection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, List, ListItemButton, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { APP_STORAGE_PREFIX } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
 import { useAppBar, useAppBreadcrumbs, useAppConfigs, useAppLanguage, useAppLayout, useAppQuickSearch, useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';

package/commons/components/topnav/UserProfile.d.ts

@@ -1,5 +1,6 @@
 import type { StyledComponent } from '@emotion/styled';
 import { type AppAvatarProps } from '@cccsaurora/howler-ui/commons/components/display/AppAvatar';
 export declare const AppUserAvatar: StyledComponent<AppAvatarProps>;
-declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const UserProfile: () => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof UserProfile>;
 export default _default;

package/commons/components/topnav/UserProfile.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, ClickAwayListener, Divider, Fade, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Popper, styled, Typography, useTheme } from '@mui/material';
 import { useAppConfigs, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AppAvatar, {} from '@cccsaurora/howler-ui/commons/components/display/AppAvatar';

package/commons/components/utils/hooks/useThemeBuilder.d.ts

@@ -1,6 +1,6 @@
 import { type Components, type PaletteOptions, type Theme } from '@mui/material';
 import type { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-export declare const createTuiTheme: (components: Components<Omit<Theme, "components">>, palette: PaletteOptions) => Theme;
+export declare const createTuiTheme: (components: Components<Omit<Theme, '@cccsaurora/howler-ui/components'>>, palette: PaletteOptions) => Theme;
 export default function useThemeBuilder(theme?: AppThemeConfigs): {
     darkTheme: Theme;
     lightTheme: Theme;

package/components/app/App.js

@@ -26,6 +26,14 @@ import UserSearchProvider from '@cccsaurora/howler-ui/components/routes/admin/us
 import QueryBuilder from '@cccsaurora/howler-ui/components/routes/advanced/QueryBuilder';
 import AnalyticDetails from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticDetails';
 import AnalyticSearch from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticSearch';
+import CaseViewer from '@cccsaurora/howler-ui/components/routes/cases/CaseViewer';
+import Cases from '@cccsaurora/howler-ui/components/routes/cases/Cases';
+import CaseDashboard from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseDashboard';
+import CaseObservables from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseObservables';
+import CaseRules from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseRules';
+import CaseSearch from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseSearch';
+import CaseTimeline from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseTimeline';
+import ItemPage from '@cccsaurora/howler-ui/components/routes/cases/detail/ItemPage';
 import DossierEditor from '@cccsaurora/howler-ui/components/routes/dossiers/DossierEditor';
 import Dossiers from '@cccsaurora/howler-ui/components/routes/dossiers/Dossiers';
 import ActionDocumentation from '@cccsaurora/howler-ui/components/routes/help/ActionDocumentation';
@@ -40,7 +48,7 @@ import RetentionDocumentation from '@cccsaurora/howler-ui/components/routes/help
 import SearchDocumentation from '@cccsaurora/howler-ui/components/routes/help/SearchDocumentation';
 import TemplateDocumentation from '@cccsaurora/howler-ui/components/routes/help/TemplateDocumentation';
 import ViewDocumentation from '@cccsaurora/howler-ui/components/routes/help/ViewDocumentation';
-import HitBrowser from '@cccsaurora/howler-ui/components/routes/hits/search/HitBrowser';
+import RecordBrowser from '@cccsaurora/howler-ui/components/routes/hits/search/RecordBrowser';
 import HitViewer from '@cccsaurora/howler-ui/components/routes/hits/view/HitViewer';
 import Home from '@cccsaurora/howler-ui/components/routes/home';
 import OverviewViewer from '@cccsaurora/howler-ui/components/routes/overviews/OverviewViewer';
@@ -74,11 +82,13 @@ import AvatarProvider from './providers/AvatarProvider';
 import CustomPluginProvider from './providers/CustomPluginProvider';
 import FavouriteProvider from './providers/FavouritesProvider';
 import FieldProvider from './providers/FieldProvider';
-import HitProvider from './providers/HitProvider';
+import GridColumnsProvider from './providers/GridColumnsProvider';
 import LocalStorageProvider from './providers/LocalStorageProvider';
 import ModalProvider from './providers/ModalProvider';
 import OverviewProvider from './providers/OverviewProvider';
 import ParameterProvider from './providers/ParameterProvider';
+import RecordProvider from './providers/RecordProvider';
+import RecordSearchProvider from './providers/RecordSearchProvider';
 import SocketProvider from './providers/SocketProvider';
 import UserListProvider from './providers/UserListProvider';
 import ViewProvider from './providers/ViewProvider';
@@ -119,7 +129,7 @@ const MyApp = () => {
     // Simulate app loading time...
     // e.g. fetching initial app data, etc.
     useEffect(() => {
-        dispatchApi(api.configs.get()).then(data => {
+        void dispatchApi(api.configs.get()).then(data => {
             apiConfig.setConfig(data);
             if (data?.configuration?.ui?.apps) {
                 setItems(data.configuration.ui.apps);
@@ -128,7 +138,7 @@ const MyApp = () => {
         if (appUser.isReady() || (!get(StorageKey.APP_TOKEN) && !get(StorageKey.REFRESH_TOKEN))) {
             return;
         }
-        getUser();
+        void getUser();
         // eslint-disable-next-line
     }, []);
     useEffect(() => {
@@ -160,7 +170,7 @@ const MyAppProvider = ({ children }) => {
     const mySitemap = useMySitemap();
     const myUser = useMyUser();
     const mySearch = useMySearch();
-    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(HitProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(RecordProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 const AppProviderWrapper = () => {
     return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsx(AppBarProvider, { children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }) }));
@@ -184,19 +194,49 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'hits',
-                element: _jsx(HitBrowser, {})
+                element: _jsx(RecordBrowser, {})
             },
             {
                 path: 'search',
-                element: _jsx(HitBrowser, {})
+                element: _jsx(RecordBrowser, {})
             },
             {
                 path: 'hits/:id',
                 element: _jsx(HitViewer, {})
             },
             {
-                path: 'bundles/:id',
-                element: _jsx(HitBrowser, {})
+                path: 'cases',
+                element: _jsx(Cases, {})
+            },
+            {
+                path: 'cases/:id',
+                element: (_jsx(ParameterProvider, { defaults: { query: '', indexes: ['hit', 'event', 'case'] }, children: _jsx(CaseViewer, {}) })),
+                children: [
+                    {
+                        index: true,
+                        element: _jsx(CaseDashboard, {})
+                    },
+                    {
+                        path: 'observables',
+                        element: _jsx(CaseObservables, {})
+                    },
+                    {
+                        path: 'timeline',
+                        element: _jsx(CaseTimeline, {})
+                    },
+                    {
+                        path: 'rules',
+                        element: _jsx(CaseRules, {})
+                    },
+                    {
+                        path: 'search',
+                        element: _jsx(CaseSearch, {})
+                    },
+                    {
+                        path: '*',
+                        element: _jsx(ItemPage, {})
+                    }
+                ]
             },
             {
                 path: 'templates',
@@ -232,15 +272,15 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'views/create',
-                element: (_jsx(ParameterProvider, { children: _jsx(ViewComposer, {}) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) }))
             },
             {
                 path: 'views/:id',
-                element: _jsx(HitBrowser, {})
+                element: _jsx(RecordBrowser, {})
             },
             {
                 path: 'views/:id/edit',
-                element: (_jsx(ParameterProvider, { children: _jsx(ViewComposer, {}) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) }))
             },
             {
                 path: 'admin/users',

package/components/app/drawers/ApiKeyDrawer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, AlertTitle, Button, Checkbox, Divider, FormControl, FormControlLabel, FormGroup, FormLabel, Stack, TextField, Typography } from '@mui/material';
 import { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

package/components/app/hooks/useMatchers.d.ts

@@ -1,6 +1,6 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
-declare const useMatchers: () => {
+declare const useMatchers: (lazy?: boolean) => {
     getMatchingDossiers: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Dossier").Dossier[]>;
     getMatchingOverview: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Overview").Overview>;
     getMatchingTemplate: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Template").Template>;

package/components/app/hooks/useMatchers.js

@@ -2,9 +2,9 @@
 import { has } from 'lodash-es';
 import { useCallback } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import { HitContext } from '../providers/HitProvider';
-const useMatchers = () => {
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+import { RecordContext } from '../providers/RecordProvider';
+const useMatchers = (lazy = false) => {
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const getMatchingTemplate = useCallback(async (hit) => {
         if (!hit) {
             return null;
@@ -12,15 +12,18 @@ const useMatchers = () => {
         if (has(hit, '__template')) {
             return hit.__template;
         }
+        if (lazy) {
+            return null;
+        }
         // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
         // should also exist
         try {
-            return (await getHit(hit.howler.id, true)).__template;
+            return (await getRecord(hit.howler.id, true)).__template;
         }
-        catch (e) {
+        catch {
             return null;
         }
-    }, [getHit]);
+    }, [getRecord, lazy]);
     const getMatchingOverview = useCallback(async (hit) => {
         if (!hit) {
             return null;
@@ -28,15 +31,18 @@ const useMatchers = () => {
         if (has(hit, '__overview')) {
             return hit.__overview;
         }
+        if (lazy) {
+            return null;
+        }
         // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
         // should also exist
         try {
-            return (await getHit(hit.howler.id, true)).__overview;
+            return (await getRecord(hit.howler.id, true)).__overview;
         }
-        catch (e) {
+        catch {
             return null;
         }
-    }, [getHit]);
+    }, [getRecord, lazy]);
     const getMatchingDossiers = useCallback(async (hit) => {
         if (!hit) {
             return null;
@@ -44,15 +50,18 @@ const useMatchers = () => {
         if (has(hit, '__dossiers')) {
             return hit.__dossiers;
         }
+        if (lazy) {
+            return null;
+        }
         // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
         // should also exist
         try {
-            return (await getHit(hit.howler.id, true)).__dossiers ?? [];
+            return (await getRecord(hit.howler.id, true)).__dossiers ?? [];
         }
-        catch (e) {
+        catch {
             return [];
         }
-    }, [getHit]);
+    }, [getRecord, lazy]);
     const getMatchingAnalytic = useCallback(async (hit) => {
         if (!hit) {
             return null;
@@ -60,14 +69,17 @@ const useMatchers = () => {
         if (has(hit, '__analytic')) {
             return hit.__analytic;
         }
+        if (lazy) {
+            return null;
+        }
         // This is a fallback in case metadata is not included.
         try {
-            return (await getHit(hit.howler.id, true)).__analytic;
+            return (await getRecord(hit.howler.id, true)).__analytic;
         }
-        catch (e) {
+        catch {
             return null;
         }
-    }, [getHit]);
+    }, [getRecord, lazy]);
     return {
         getMatchingDossiers,
         getMatchingOverview,

package/components/app/hooks/useMatchers.test.js

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { useContextSelector } from 'use-context-selector';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { HitContext } from '../providers/HitProvider';
+import { RecordContext } from '../providers/RecordProvider';
 import useMatchers from './useMatchers';
 // Mock the useContextSelector hook
 vi.mock('use-context-selector', () => ({
@@ -40,14 +40,14 @@ const mockHitWithMetadata = {
     __overview: mockOverview,
     __dossiers: mockDossiers
 };
-const mockGetHit = vi.fn();
+const mockGetRecord = vi.fn();
 describe('useMatchers', () => {
     beforeEach(() => {
         vi.clearAllMocks();
         // Mock useContextSelector to return our mock getHit function
         useContextSelector.mockImplementation((context, selector) => {
-            if (context === HitContext) {
-                return selector({ getHit: mockGetHit });
+            if (context === RecordContext) {
+                return selector({ getRecord: mockGetRecord });
             }
             return null;
         });
@@ -69,25 +69,25 @@ describe('useMatchers', () => {
             const { result } = renderHook(() => useMatchers());
             const template = await result.current.getMatchingTemplate(mockHitWithMetadata);
             expect(template).toBe(mockTemplate);
-            expect(mockGetHit).not.toHaveBeenCalled();
+            expect(mockGetRecord).not.toHaveBeenCalled();
         });
         it('should fetch hit with metadata when template is not present', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
             const hitWithFetchedMetadata = { ...mockHit, __template: mockTemplate };
-            mockGetHit.mockResolvedValue(hitWithFetchedMetadata);
+            mockGetRecord.mockResolvedValue(hitWithFetchedMetadata);
             const { result } = renderHook(() => useMatchers());
             const template = await result.current.getMatchingTemplate(mockHit);
             expect(template).toBe(mockTemplate);
-            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+            expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
         it('should handle getHit rejection gracefully', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
-            mockGetHit.mockRejectedValue(new Error('Failed to fetch hit'));
+            mockGetRecord.mockRejectedValue(new Error('Failed to fetch hit'));
             const { result } = renderHook(() => useMatchers());
             await expect(result.current.getMatchingTemplate(mockHit)).resolves.toBeNull();
-            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+            expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
     });
     describe('getMatchingOverview', () => {
@@ -107,25 +107,25 @@ describe('useMatchers', () => {
             const { result } = renderHook(() => useMatchers());
             const overview = await result.current.getMatchingOverview(mockHitWithMetadata);
             expect(overview).toBe(mockOverview);
-            expect(mockGetHit).not.toHaveBeenCalled();
+            expect(mockGetRecord).not.toHaveBeenCalled();
         });
         it('should fetch hit with metadata when overview is not present', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
             const hitWithFetchedMetadata = { ...mockHit, __overview: mockOverview };
-            mockGetHit.mockResolvedValue(hitWithFetchedMetadata);
+            mockGetRecord.mockResolvedValue(hitWithFetchedMetadata);
             const { result } = renderHook(() => useMatchers());
             const overview = await result.current.getMatchingOverview(mockHit);
             expect(overview).toBe(mockOverview);
-            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+            expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
         it('should handle getHit rejection gracefully', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
-            mockGetHit.mockRejectedValue(new Error('Failed to fetch hit'));
+            mockGetRecord.mockRejectedValue(new Error('Failed to fetch hit'));
             const { result } = renderHook(() => useMatchers());
             await expect(result.current.getMatchingOverview(mockHit)).resolves.toBeNull();
-            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+            expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
     });
     describe('getMatchingDossiers', () => {
@@ -145,25 +145,25 @@ describe('useMatchers', () => {
             const { result } = renderHook(() => useMatchers());
             const dossiers = await result.current.getMatchingDossiers(mockHitWithMetadata);
             expect(dossiers).toBe(mockDossiers);
-            expect(mockGetHit).not.toHaveBeenCalled();
+            expect(mockGetRecord).not.toHaveBeenCalled();
         });
         it('should fetch hit with metadata when dossiers are not present', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
             const hitWithFetchedMetadata = { ...mockHit, __dossiers: mockDossiers };
-            mockGetHit.mockResolvedValue(hitWithFetchedMetadata);
+            mockGetRecord.mockResolvedValue(hitWithFetchedMetadata);
             const { result } = renderHook(() => useMatchers());
             const dossiers = await result.current.getMatchingDossiers(mockHit);
             expect(dossiers).toBe(mockDossiers);
-            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+            expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
         it('should handle getHit rejection gracefully', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
-            mockGetHit.mockRejectedValue(new Error('Failed to fetch hit'));
+            mockGetRecord.mockRejectedValue(new Error('Failed to fetch hit'));
             const { result } = renderHook(() => useMatchers());
             await expect(result.current.getMatchingDossiers(mockHit)).resolves.toEqual([]);
-            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+            expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
     });
     describe('integration tests', () => {
@@ -177,7 +177,7 @@ describe('useMatchers', () => {
                 ...mockHit,
                 __template: mockTemplate
             };
-            mockGetHit.mockResolvedValue({
+            mockGetRecord.mockResolvedValue({
                 ...mockHit,
                 __overview: mockOverview,
                 __dossiers: mockDossiers
@@ -200,7 +200,7 @@ describe('useMatchers', () => {
         it('should handle empty or undefined metadata gracefully', async () => {
             const { has } = await import('lodash-es');
             has.mockReturnValue(false);
-            mockGetHit.mockResolvedValue({
+            mockGetRecord.mockResolvedValue({
                 ...mockHit,
                 __template: undefined,
                 __overview: null,
@@ -213,7 +213,7 @@ describe('useMatchers', () => {
             expect(template).toBeUndefined();
             expect(overview).toBeNull();
             expect(dossiers).toEqual([]);
-            expect(mockGetHit).toHaveBeenCalledTimes(3);
+            expect(mockGetRecord).toHaveBeenCalledTimes(3);
         });
         it('should maintain referential equality of returned functions', () => {
             const { result, rerender } = renderHook(() => useMatchers());

package/components/app/hooks/useTitle.js

@@ -5,23 +5,23 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { AnalyticContext } from '../providers/AnalyticProvider';
-import { HitContext } from '../providers/HitProvider';
+import { RecordContext } from '../providers/RecordProvider';
 const useTitle = () => {
     const { t } = useTranslation();
     const location = useLocation();
     const params = useParams();
     const searchParams = useSearchParams()[0];
     const sitemap = useMySitemap();
-    const { getAnalyticFromId } = useContext(AnalyticContext);
-    const hits = useContextSelector(HitContext, ctx => ctx.hits);
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const { getAnalyticFromId } = useContext(AnalyticContext) ?? {};
+    const hits = useContextSelector(RecordContext, ctx => ctx.records);
+    const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const setTitle = useCallback((title) => {
         document.querySelector('title').innerHTML = title;
     }, []);
     const runChecks = useCallback(async () => {
         const searchType = location.pathname.replace(/^\/(\w+)(\/.+)?$/, '$1').replace(/s$/, '');
         if (searchType === 'analytic') {
-            if (params.id) {
+            if (params.id && getAnalyticFromId) {
                 const analytic = await getAnalyticFromId(params.id);
                 if (analytic) {
                     setTitle(`${t('route.analytics.view')} - ${analytic.name}`);
@@ -66,7 +66,7 @@ const useTitle = () => {
         }
     }, [location.pathname, params.id, searchParams, getAnalyticFromId, setTitle, t, hits, getHit, sitemap.routes]);
     useEffect(() => {
-        runChecks();
+        void runChecks();
     }, [runChecks]);
 };
 export default useTitle;

package/components/app/providers/AnalyticProvider.js

@@ -28,7 +28,7 @@ const AnalyticProvider = ({ children }) => {
     }, [ready, fetching]);
     useEffect(() => {
         if (!ready && appUser.isReady()) {
-            fetchAnalytics();
+            void fetchAnalytics();
         }
     }, [ready, appUser, fetchAnalytics]);
     const getAnalyticFromId = useCallback(async (id) => {

package/components/app/providers/AvatarProvider.js

@@ -21,7 +21,7 @@ const AvatarProvider = ({ children }) => {
             promises[id] = dispatchApi(api.user.avatar.get(id), { logError: false, showError: false, throwError: false });
             return promises[id];
         }
-        catch (e) {
+        catch {
             promises[id] = api.user.get(id).then(user => user.name);
             return promises[id];
         }

package/components/app/providers/FavouritesProvider.js

@@ -113,14 +113,14 @@ const FavouriteProvider = ({ children }) => {
         const newElements = leftNav.elements
             .filter(el => !['views', 'analytics'].includes(el.element?.id))
             .filter(el => !!el);
-        (async () => {
+        void (async () => {
             const analyticElement = processAnalyticElement();
             if (analyticElement) {
-                newElements.splice(1, 0, analyticElement);
+                newElements.splice(2, 0, analyticElement);
             }
             const viewElement = await processViewElement();
             if (viewElement) {
-                newElements.splice(1, 0, viewElement);
+                newElements.splice(2, 0, viewElement);
             }
             leftNav.setElements(newElements);
         })();

package/components/app/providers/GridColumnsProvider.d.ts

@@ -0,0 +1,52 @@
+import { type PropsWithChildren, type SetStateAction } from 'react';
+/**
+ * Shape of the context value exposed by {@link GridColumnsProvider}.
+ *
+ * Column state is sourced from active views when present, otherwise from local storage.
+ * Mutations follow the same rule: they write back to local storage only when there are no
+ * active views (or when `syncLocal` is explicitly set to `true`).
+ */
+export type GridColumnsContextType = {
+    /** Ordered list of field keys to display as grid columns. */
+    columns: string[];
+    /**
+     * Replace or update the active column list.
+     * @param syncLocal - When `true`, also persists the change to local storage even if views are active.
+     */
+    setColumns: (columns: SetStateAction<string[]>, syncLocal?: boolean) => void;
+    /** Per-column widths (pixels, e.g. `120`), keyed by field name. */
+    columnWidths: Record<string, number>;
+    /**
+     * Set the width of a single column.
+     * @param syncLocal - When `true`, also persists the change to local storage even if views are active.
+     */
+    setColumnWidth: (column: string, width: number, syncLocal?: boolean) => void;
+    /**
+     * Maps each column field to the list of view titles that declared it.
+     * Empty array for columns that came from local storage rather than a view.
+     */
+    columnSources: Record<string, string[]>;
+    /** Persist the current in-memory column configuration (columns + widths) to local storage. */
+    syncToStorage: () => void;
+    /** `false` while an async view fetch is in flight; `true` once the column state is settled. */
+    isReady: boolean;
+};
+export declare const GridColumnsContext: import("react").Context<GridColumnsContextType>;
+/**
+ * Manages which grid columns are active and how wide they are.
+ *
+ * **Priority order:**
+ * 1. Active views (fetched asynchronously) — columns and widths are derived from view settings.
+ * 2. Local storage — used as fallback when no views are active.
+ *
+ * Local storage is only written when there are no active views, keeping view-driven state
+ * isolated from the user's personal preferences.
+ *
+ * @param viewSource - Determines where view IDs are read from:
+ *   - `"params"` (default) — reads from `ParameterContext` (query-string driven).
+ *   - `"path"` — reads from the current route's `:id` param.
+ */
+declare const GridColumnsProvider: ({ children, viewSource }: PropsWithChildren<{
+    viewSource?: 'params' | 'path';
+}>) => import("react/jsx-runtime").JSX.Element;
+export default GridColumnsProvider;