feat(frontend): lib make Detaildrawer available (#11827)

* feat(frontend): lib make Detaildrawer available

Co-authored-by: Copilot <copilot@github.com>

* move StylishText to lib

Co-authored-by: Copilot <copilot@github.com>

* add changelog entry

Co-authored-by: Copilot <copilot@github.com>

* fix import path

---------

Co-authored-by: Copilot <copilot@github.com>

src/frontend/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file contains historical changelog information for the InvenTree UI components library.
 
+### 0.11.3 - April 2026
+
+Exposes additional type definitions related to rendering drawers from tables:
+- `DetailDrawer`
+- `TableState`
+
+Also exposes `StylishText`, which is required downstream for rendering the DetailDrawer component, and is used in a number of places within the InvenTree UI.
+
 ### 0.11.2 - April 2026
 
 Exposes additional type definitions related to tables and filters:

src/frontend/lib/components/nav/DetailDrawer.tsx

@@ -4,10 +4,11 @@ import { useCallback, useMemo } from 'react';
 import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import type { To } from 'react-router-dom';
 
-import type { UiSizeType } from '@lib/types/Core';
+import type { UiSizeType } from '../../types/Core';
+
 import { useShallow } from 'zustand/react/shallow';
-import { useLocalState } from '../../states/LocalState';
-import { StylishText } from '../items/StylishText';
+import { useLocalLibState } from '../../states/LocalLibState';
+import { StylishText } from '../StylishText';
 import * as classes from './DetailDrawer.css';
 
 /**
@@ -38,7 +39,7 @@ function DetailDrawerComponent({
   const content = renderContent(id);
   const opened = useMemo(() => !!id && !!content, [id, content]);
 
-  const [detailDrawerStack, addDetailDrawer] = useLocalState(
+  const [detailDrawerStack, addDetailDrawer] = useLocalLibState(
     useShallow((state) => [state.detailDrawerStack, state.addDetailDrawer])
   );
 
@@ -91,7 +92,7 @@ export function DetailDrawerLink({
   to,
   text
 }: Readonly<{ to: To; text: string }>) {
-  const addDetailDrawer = useLocalState(
+  const addDetailDrawer = useLocalLibState(
     useShallow((state) => state.addDetailDrawer)
   );
 

src/frontend/lib/index.ts

@@ -132,6 +132,13 @@ export {
   type TableStateExtraProps
 } from './hooks/UseTable';
 
+export {
+  type DrawerProps,
+  DetailDrawer,
+  DetailDrawerLink
+} from './components/nav/DetailDrawer';
+export { StylishText } from './components/StylishText';
+
 // State management
 export {
   type StoredTableStateProps,

src/frontend/lib/states/LocalLibState.tsx

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const useLocalLibState = create<LocalLibStateProps>()(
+  persist(
+    (set, get) => ({
+      detailDrawerStack: 0,
+      addDetailDrawer: (value) => {
+        set({
+          detailDrawerStack:
+            value === false ? 0 : get().detailDrawerStack + value
+        });
+      }
+    }),
+    {
+      name: 'session-settings-inventreedb_lib'
+    }
+  )
+);
+export interface LocalLibStateProps {
+  detailDrawerStack: number;
+  addDetailDrawer: (value: number | false) => void;
+}

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.11.2",
+    "version": "0.11.3",
     "private": false,
     "type": "module",
     "license": "MIT",

src/frontend/src/components/barcodes/BarcodeScanDialog.tsx

@@ -1,3 +1,4 @@
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
@@ -11,7 +12,6 @@ import { type NavigateFunction, useNavigate } from 'react-router-dom';
 import { api } from '../../App';
 import { extractErrorMessage } from '../../functions/api';
 import { useUserState } from '../../states/UserState';
-import { StylishText } from '../items/StylishText';
 import { BarcodeInput } from './BarcodeInput';
 
 export type BarcodeScanResult = {

src/frontend/src/components/calendar/Calendar.tsx

@@ -7,6 +7,7 @@ import FullCalendar from '@fullcalendar/react';
 import { ActionButton } from '@lib/components/ActionButton';
 import { Boundary } from '@lib/components/Boundary';
 import { SearchInput } from '@lib/components/SearchInput';
+import { StylishText } from '@lib/components/StylishText';
 import type { TableFilter } from '@lib/types/Filters';
 import { t } from '@lingui/core/macro';
 import {
@@ -37,7 +38,6 @@ import {
 import type { CalendarState } from '../../hooks/UseCalendar';
 import { useLocalState } from '../../states/LocalState';
 import { FilterSelectDrawer } from '../../tables/FilterSelectDrawer';
-import { StylishText } from '../items/StylishText';
 
 export interface InvenTreeCalendarProps extends CalendarOptions {
   enableDownload?: boolean;

src/frontend/src/components/dashboard/DashboardMenu.tsx

@@ -17,9 +17,9 @@ import {
 } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import useInstanceName from '../../hooks/UseInstanceName';
 import { useUserState } from '../../states/UserState';
-import { StylishText } from '../items/StylishText';
 
 /**
  * A menu for editing the dashboard layout

src/frontend/src/components/dashboard/DashboardWidgetDrawer.tsx

@@ -15,8 +15,8 @@ import { useDebouncedValue } from '@mantine/hooks';
 import { IconBackspace, IconLayoutGridAdd } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { useDashboardItems } from '../../hooks/UseDashboardItems';
-import { StylishText } from '../items/StylishText';
 
 /**
  * Drawer allowing the user to add new widgets to the dashboard.

src/frontend/src/components/dashboard/widgets/ColorToggleWidget.tsx

@@ -1,8 +1,8 @@
 import { t } from '@lingui/core/macro';
 import { Group } from '@mantine/core';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ColorToggle } from '../../items/ColorToggle';
-import { StylishText } from '../../items/StylishText';
 import type { DashboardWidgetProps } from '../DashboardWidget';
 
 function ColorToggleWidget(title: string) {

src/frontend/src/components/dashboard/widgets/GetStartedWidget.tsx

@@ -2,10 +2,10 @@ import { t } from '@lingui/core/macro';
 import { Stack } from '@mantine/core';
 import { useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { DocumentationLinks } from '../../../defaults/links';
 import { GettingStartedCarousel } from '../../items/GettingStartedCarousel';
 import type { MenuLinkItem } from '../../items/MenuLinks';
-import { StylishText } from '../../items/StylishText';
 
 export default function GetStartedWidget() {
   const docLinks: MenuLinkItem[] = useMemo(() => DocumentationLinks(), []);

src/frontend/src/components/dashboard/widgets/LanguageSelectWidget.tsx

@@ -1,8 +1,8 @@
 import { t } from '@lingui/core/macro';
 import { Stack } from '@mantine/core';
 
+import { StylishText } from '@lib/components/StylishText';
 import { LanguageSelect } from '../../items/LanguageSelect';
-import { StylishText } from '../../items/StylishText';
 import type { DashboardWidgetProps } from '../DashboardWidget';
 
 function LanguageSelectWidget(title: string) {

src/frontend/src/components/dashboard/widgets/NewsWidget.tsx

@@ -14,12 +14,12 @@ import { IconMailCheck } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import { api } from '../../../App';
 import { formatDate } from '../../../defaults/formatters';
 import { useUserState } from '../../../states/UserState';
-import { StylishText } from '../../items/StylishText';
 
 /**
  * Render a link to an external news item

src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
@@ -13,7 +14,6 @@ import { useDocumentVisibility } from '@mantine/hooks';
 import { useApi } from '../../../contexts/ApiContext';
 import { InvenTreeIcon } from '../../../functions/icons';
 import { useUserState } from '../../../states/UserState';
-import { StylishText } from '../../items/StylishText';
 import type { DashboardWidgetProps } from '../DashboardWidget';
 
 /**

src/frontend/src/components/details/Details.tsx

@@ -19,6 +19,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { CopyButton } from '@lib/components/CopyButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
+import { StylishText } from '@lib/components/StylishText';
 import { YesNoButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -30,7 +31,6 @@ import { useApi } from '../../contexts/ApiContext';
 import { formatDate, formatDecimal } from '../../defaults/formatters';
 import { InvenTreeIcon } from '../../functions/icons';
 import { useGlobalSettingsState } from '../../states/SettingsStates';
-import { StylishText } from '../items/StylishText';
 import { getModelInfo } from '../render/ModelType';
 import { StatusRenderer } from '../render/StatusRenderer';
 

src/frontend/src/components/details/DetailsImage.tsx

@@ -22,6 +22,7 @@ import { modals } from '@mantine/modals';
 import { useEffect, useMemo, useState } from 'react';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { StylishText } from '@lib/components/StylishText';
 import type { UserRoles } from '@lib/enums/Roles';
 import { cancelEvent } from '@lib/functions/Events';
 import { showNotification } from '@mantine/notifications';
@@ -34,7 +35,6 @@ import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
 import { vars } from '../../theme';
 import { ApiImage } from '../images/ApiImage';
-import { StylishText } from '../items/StylishText';
 
 /**
  * Props for detail image

src/frontend/src/components/importer/ImporterDrawer.tsx

@@ -13,11 +13,11 @@ import {
 import { IconCheck, IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ModelType } from '@lib/enums/ModelType';
 import type { ApiFormFieldSet } from '@lib/index';
 import { useImportSession } from '../../hooks/UseImportSession';
 import useStatusCodes from '../../hooks/UseStatusCodes';
-import { StylishText } from '../items/StylishText';
 import ImporterDataSelector from './ImportDataSelector';
 import ImporterColumnSelector from './ImporterColumnSelector';
 import ImporterStatus from './ImporterStatus';

src/frontend/src/components/importer/ImporterStatus.tsx

@@ -3,9 +3,9 @@ import { Center, Loader, Stack } from '@mantine/core';
 import { useInterval } from '@mantine/hooks';
 import { useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ModelType } from '@lib/enums/ModelType';
 import type { ImportSessionState } from '../../hooks/UseImportSession';
-import { StylishText } from '../items/StylishText';
 import { getStatusCodeLabel } from '../render/StatusRenderer';
 
 export default function ImporterStatus({

src/frontend/src/components/items/ActionDropdown.tsx

@@ -20,11 +20,11 @@ import {
 } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import type { ModelType } from '@lib/enums/ModelType';
 import { identifierString } from '@lib/functions/Conversion';
 import { InvenTreeIcon } from '../../functions/icons';
 import { InvenTreeQRCode, QRCodeLink, QRCodeUnlink } from '../barcodes/QRCode';
-import { StylishText } from './StylishText';
 
 export type ActionDropdownItem = {
   icon?: ReactNode;

src/frontend/src/components/items/GettingStartedCarousel.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/react/macro';
 import { Carousel } from '@mantine/carousel';
 import { Anchor, Button, Paper, Text } from '@mantine/core';
 
+import { StylishText } from '@lib/components/StylishText';
 import * as classes from './GettingStartedCarousel.css';
 import type { MenuLinkItem } from './MenuLinks';
-import { StylishText } from './StylishText';
 
 function StartedCard({ title, description, link }: Readonly<MenuLinkItem>) {
   return (

src/frontend/src/components/items/InfoItem.tsx

@@ -3,7 +3,7 @@ import { Code, Flex, Group, Text } from '@mantine/core';
 import { Link, type To } from 'react-router-dom';
 
 import { YesNoButton } from '@lib/components/YesNoButton';
-import { DetailDrawerLink } from '../nav/DetailDrawer';
+import { DetailDrawerLink } from '@lib/components/nav/DetailDrawer';
 
 export function InfoItem({
   name,

src/frontend/src/components/items/MenuLinks.tsx

@@ -11,10 +11,10 @@ import {
 import { type JSX, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { InvenTreeIconType } from '@lib/types/Icons';
 import { InvenTreeIcon } from '../../functions/icons';
-import { StylishText } from './StylishText';
 
 export interface MenuLinkItem {
   id: string;

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -14,13 +14,13 @@ import type { ContextModalProps } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 
 import { CopyButton } from '@lib/components/CopyButton';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import { generateUrl } from '../../functions/urls';
 import { useServerApiState } from '../../states/ServerApiState';
-import { StylishText } from '../items/StylishText';
 
 import type { JSX } from 'react';
 import { OnlyStaff } from '../items/OnlyStaff';

src/frontend/src/components/nav/NavigationDrawer.tsx

@@ -3,6 +3,7 @@ import { Container, Drawer, Flex, Group, Space } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { AboutLinks, DocumentationLinks } from '../../defaults/links';
@@ -12,7 +13,6 @@ import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { type MenuLinkItem, MenuLinks } from '../items/MenuLinks';
-import { StylishText } from '../items/StylishText';
 
 // TODO @matmair #1: implement plugin loading and menu item generation see #5269
 const plugins: MenuLinkItem[] = [];

src/frontend/src/components/nav/NavigationTree.tsx

@@ -23,6 +23,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
@@ -34,7 +35,6 @@ import {
 import { t } from '@lingui/core/macro';
 import { useApi } from '../../contexts/ApiContext';
 import { ApiIcon } from '../items/ApiIcon';
-import { StylishText } from '../items/StylishText';
 
 /*
  * A generic navigation tree component.

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -24,6 +24,7 @@ import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Boundary } from '@lib/components/Boundary';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
@@ -33,7 +34,6 @@ import { getBaseUrl } from '@lib/functions/Navigation';
 import { navigateToLink } from '@lib/functions/Navigation';
 import { api } from '../../App';
 import { useUserState } from '../../states/UserState';
-import { StylishText } from '../items/StylishText';
 
 /**
  * Render a single notification entry in the drawer

src/frontend/src/components/nav/PageDetail.tsx

@@ -1,11 +1,11 @@
 import { Group, Paper, Space, Stack, Text } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 
+import { StylishText } from '@lib/components/StylishText';
 import { shortenString } from '@lib/functions/String';
 import { Fragment, type ReactNode, useMemo } from 'react';
 import { useUserSettingsState } from '../../states/SettingsStates';
 import { ApiImage } from '../images/ApiImage';
-import { StylishText } from '../items/StylishText';
 import { type Breadcrumb, BreadcrumbList } from './BreadcrumbList';
 import PageTitle from './PageTitle';
 

src/frontend/src/components/nav/SettingsHeader.tsx

@@ -3,8 +3,8 @@ import { Group, SegmentedControl, Stack, Text } from '@mantine/core';
 import type { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { useUserState } from '../../states/UserState';
-import { StylishText } from '../items/StylishText';
 
 interface SettingsHeaderInterface {
   label: string;

src/frontend/src/components/panels/PanelGroup.tsx

@@ -33,6 +33,7 @@ import {
 } from 'react-router-dom';
 
 import { Boundary } from '@lib/components/Boundary';
+import { StylishText } from '@lib/components/StylishText';
 import type { ModelType, PluginPanelKey } from '@lib/enums/ModelType';
 import { identifierString } from '@lib/functions/Conversion';
 import { cancelEvent } from '@lib/functions/Events';
@@ -45,7 +46,6 @@ import { generateUrl } from '../../functions/urls';
 import { usePluginPanels } from '../../hooks/UsePluginPanels';
 import { useLocalState } from '../../states/LocalState';
 import { vars } from '../../theme';
-import { StylishText } from '../items/StylishText';
 import type { PanelGroupType, PanelType } from '../panels/Panel';
 import * as classes from './PanelGroup.css';
 

src/frontend/src/components/plugins/PluginDrawer.tsx

@@ -4,10 +4,10 @@ import { IconExclamationCircle } from '@tabler/icons-react';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { useInstance } from '../../hooks/UseInstance';
 import { InfoItem } from '../items/InfoItem';
-import { StylishText } from '../items/StylishText';
 import { PluginSettingList } from '../settings/SettingList';
 import type { PluginInterface } from './PluginInterface';
 import PluginSettingsPanel from './PluginSettingsPanel';

src/frontend/src/components/settings/FactItem.tsx

@@ -1,6 +1,6 @@
 import { Paper, Stack, Text } from '@mantine/core';
 
-import { StylishText } from '../items/StylishText';
+import { StylishText } from '@lib/components/StylishText';
 
 export function FactItem({
   title,

src/frontend/src/components/wizards/WizardDrawer.tsx

@@ -1,4 +1,5 @@
 import { Boundary } from '@lib/components/Boundary';
+import { StylishText } from '@lib/components/StylishText';
 import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
@@ -17,7 +18,6 @@ import {
   IconCircleCheck
 } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { StylishText } from '../items/StylishText';
 
 /**
  * Progress stepper displayed at the top of the wizard drawer.

src/frontend/src/defaults/links.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { openContextModal } from '@mantine/modals';
 
+import { StylishText } from '@lib/components/StylishText';
 import { UserRoles } from '@lib/enums/Roles';
 import type { SettingsStateProps } from '@lib/types/Settings';
 import type { UserStateProps } from '@lib/types/User';
@@ -15,7 +16,6 @@ import {
 } from '@tabler/icons-react';
 import type { ReactNode } from 'react';
 import type { MenuLinkItem } from '../components/items/MenuLinks';
-import { StylishText } from '../components/items/StylishText';
 
 type NavTab = {
   name: string;

src/frontend/src/forms/PurchaseOrderForms.tsx

@@ -37,6 +37,7 @@ import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
 
 import { ProgressBar } from '@lib/components/ProgressBar';
+import { StylishText } from '@lib/components/StylishText';
 import { apiUrl } from '@lib/functions/Api';
 import { toNumber } from '@lib/functions/Conversion';
 import type {
@@ -48,7 +49,6 @@ import {
   type TableFieldRowProps
 } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
-import { StylishText } from '../components/items/StylishText';
 import { getStatusCodeOptions } from '../components/render/StatusRenderer';
 import { InvenTreeIcon } from '../functions/icons';
 import { useCreateApiFormModal } from '../hooks/UseForm';

src/frontend/src/forms/StockForms.tsx

@@ -31,6 +31,7 @@ import { api } from '../App';
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
 
+import { StylishText } from '@lib/components/StylishText';
 import { apiUrl } from '@lib/functions/Api';
 import { getDetailUrl } from '@lib/functions/Navigation';
 import type {
@@ -45,7 +46,6 @@ import {
   type TableFieldRowProps
 } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
-import { StylishText } from '../components/items/StylishText';
 import { StatusRenderer } from '../components/render/StatusRenderer';
 import { RenderStockLocation } from '../components/render/Stock';
 import { InvenTreeIcon } from '../functions/icons';

src/frontend/src/hooks/UseModal.tsx

@@ -2,8 +2,8 @@ import { Modal } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCallback } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import type { UseModalProps, UseModalReturn } from '@lib/types/Modals';
-import { StylishText } from '../components/items/StylishText';
 import { useUserSettingsState } from '../states/SettingsStates';
 
 export function useModal(props: UseModalProps): UseModalReturn {

src/frontend/src/pages/Auth/ChangePassword.tsx

@@ -1,3 +1,4 @@
+import { StylishText } from '@lib/components/StylishText';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import {
@@ -11,7 +12,6 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useNavigate } from 'react-router-dom';
-import { StylishText } from '../../components/items/StylishText';
 import { handleChangePassword } from '../../functions/auth';
 import { useUserState } from '../../states/UserState';
 import { Wrapper } from './Layout';

src/frontend/src/pages/Auth/Layout.tsx

@@ -1,3 +1,4 @@
+import { StylishText } from '@lib/components/StylishText';
 import { Trans } from '@lingui/react/macro';
 import {
   Button,
@@ -11,7 +12,6 @@ import {
 } from '@mantine/core';
 import { Outlet, useNavigate } from 'react-router-dom';
 import SplashScreen from '../../components/SplashScreen';
-import { StylishText } from '../../components/items/StylishText';
 import { doLogout } from '../../functions/auth';
 
 export default function LoginLayoutComponent() {

src/frontend/src/pages/Index/Scan.tsx

@@ -19,6 +19,7 @@ import {
 } from '@tabler/icons-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
@@ -29,7 +30,6 @@ import dayjs from 'dayjs';
 import { api } from '../../App';
 import { BarcodeInput } from '../../components/barcodes/BarcodeInput';
 import type { BarcodeScanItem } from '../../components/barcodes/BarcodeScanItem';
-import { StylishText } from '../../components/items/StylishText';
 import PageTitle from '../../components/nav/PageTitle';
 import { showApiErrorMessage } from '../../functions/notifications';
 import BarcodeScanTable from '../../tables/general/BarcodeScanTable';

src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx

@@ -5,13 +5,13 @@ import { IconEdit, IconKey, IconUser } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { StylishText } from '@lib/components/StylishText';
 import { YesNoUndefinedButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import { useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
 import { ActionDropdown } from '../../../../components/items/ActionDropdown';
-import { StylishText } from '../../../../components/items/StylishText';
 import { useEditApiFormModal } from '../../../../hooks/UseForm';
 import { useUserState } from '../../../../states/UserState';
 

src/frontend/src/pages/Index/Settings/AccountSettings/MFASettings.tsx

@@ -1,5 +1,6 @@
 import { create } from '@github/webauthn-json/browser-ponyfill';
 import { CopyButton } from '@lib/components/CopyButton';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import { FlowEnum } from '@lib/types/Auth';
@@ -32,7 +33,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
 import { api, queryClient } from '../../../../App';
-import { StylishText } from '../../../../components/items/StylishText';
 import { authApi, doLogout } from '../../../../functions/auth';
 import { useServerApiState } from '../../../../states/ServerApiState';
 import { useGlobalSettingsState } from '../../../../states/SettingsStates';

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -1,4 +1,5 @@
 import { DefaultFallback } from '@lib/components/Boundary';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import type { AuthConfig, AuthProvider } from '@lib/types/Auth';
@@ -31,7 +32,6 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import { StylishText } from '../../../../components/items/StylishText';
 import { ProviderLogin, authApi } from '../../../../functions/auth';
 import { useServerApiState } from '../../../../states/ServerApiState';
 import { useUserState } from '../../../../states/UserState';

src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -17,10 +17,10 @@ import {
 import { IconRestore } from '@tabler/icons-react';
 import { useState } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { useShallow } from 'zustand/react/shallow';
 import { ColorToggle } from '../../../../components/items/ColorToggle';
 import { LanguageSelect } from '../../../../components/items/LanguageSelect';
-import { StylishText } from '../../../../components/items/StylishText';
 import { SizeMarks } from '../../../../defaults/defaults';
 import { IS_DEV } from '../../../../main';
 import { useLocalState } from '../../../../states/LocalState';

src/frontend/src/pages/Index/Settings/AdminCenter/EmailManagementPanel.tsx

@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Accordion } from '@mantine/core';
 
-import { StylishText } from '../../../../components/items/StylishText';
+import { StylishText } from '@lib/components/StylishText';
 import { ConfigValueList } from '../../../../components/settings/ConfigValueList';
 import { EmailTable } from '../../../../tables/settings/EmailTable';
 

src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx

@@ -1,9 +1,9 @@
+import { StylishText } from '@lib/components/StylishText';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { Accordion, Alert, SimpleGrid, Stack, Text } from '@mantine/core';
 import { type JSX, useMemo, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import { StylishText } from '../../../../components/items/StylishText';
 import {
   type ExtendedAlertInfo,
   ServerAlert,

src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx

@@ -13,10 +13,10 @@ import { IconInfoCircle, IconRefresh } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import { api } from '../../../../App';
-import { StylishText } from '../../../../components/items/StylishText';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { MachineListTable } from '../../../../tables/machine/MachineListTable';
 import {

src/frontend/src/pages/Index/Settings/AdminCenter/ParameterPanel.tsx

@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Accordion } from '@mantine/core';
 
-import { StylishText } from '../../../../components/items/StylishText';
+import { StylishText } from '@lib/components/StylishText';
 import ParameterTemplateTable from '../../../../tables/general/ParameterTemplateTable';
 import SelectionListTable from '../../../../tables/part/SelectionListTable';
 

src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx

@@ -4,8 +4,8 @@ import { Accordion, Alert, Stack } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { lazy } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { useShallow } from 'zustand/react/shallow';
-import { StylishText } from '../../../../components/items/StylishText';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { Loadable } from '../../../../functions/loading';
 import { useServerApiState } from '../../../../states/ServerApiState';

src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx

@@ -2,9 +2,9 @@ import { t } from '@lingui/core/macro';
 import { Accordion, Alert, Divider, Stack, Text } from '@mantine/core';
 import { lazy } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { IconCircleCheck, IconExclamationCircle } from '@tabler/icons-react';
-import { StylishText } from '../../../../components/items/StylishText';
 import { errorCodeLink } from '../../../../components/nav/Alerts';
 import { FactCollection } from '../../../../components/settings/FactCollection';
 import { Loadable } from '../../../../functions/loading';

src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagementPanel.tsx

@@ -2,10 +2,10 @@ import { t } from '@lingui/core/macro';
 import { Accordion, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
-import { StylishText } from '../../../../components/items/StylishText';
 import { BooleanColumn } from '../../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
 import CustomUnitsTable from '../../../../tables/settings/CustomUnitsTable';

src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx

@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Accordion } from '@mantine/core';
 
-import { StylishText } from '../../../../components/items/StylishText';
+import { StylishText } from '@lib/components/StylishText';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { ApiTokenTable } from '../../../../tables/settings/ApiTokenTable';
 import { GroupTable } from '../../../../tables/settings/GroupTable';

src/frontend/src/pages/core/GroupDetail.tsx

@@ -1,3 +1,4 @@
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { t } from '@lingui/core/macro';
@@ -12,7 +13,6 @@ import {
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {} from '../../components/items/ActionDropdown';
 import { RoleTable, type RuleSet } from '../../components/items/RoleTable';
-import { StylishText } from '../../components/items/StylishText';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import type { PanelType } from '../../components/panels/Panel';

src/frontend/src/pages/part/PartAllocationPanel.tsx

@@ -1,8 +1,8 @@
 import { t } from '@lingui/core/macro';
 import { Accordion } from '@mantine/core';
 
+import { StylishText } from '@lib/components/StylishText';
 import { UserRoles } from '@lib/enums/Roles';
-import { StylishText } from '../../components/items/StylishText';
 import { useUserState } from '../../states/UserState';
 import PartBuildAllocationsTable from '../../tables/part/PartBuildAllocationsTable';
 import PartSalesAllocationsTable from '../../tables/part/PartSalesAllocationsTable';

src/frontend/src/pages/part/PartStockHistoryDetail.tsx

@@ -1,4 +1,5 @@
 import { RowDeleteAction, RowEditAction } from '@lib/components/RowActions';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
@@ -18,7 +19,6 @@ import {
 } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useCallback, useMemo, useState } from 'react';
-import { StylishText } from '../../components/items/StylishText';
 import { formatDate, formatPriceRange } from '../../defaults/formatters';
 import { partStocktakeFields } from '../../forms/PartForms';
 import {

src/frontend/src/pages/part/PartSupplierDetail.tsx

@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { Accordion } from '@mantine/core';
 
-import { StylishText } from '../../components/items/StylishText';
+import { StylishText } from '@lib/components/StylishText';
 import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
 import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
 

src/frontend/src/pages/part/pricing/PricingPanel.tsx

@@ -14,7 +14,7 @@ import {
 import { IconAlertCircle, IconExclamationCircle } from '@tabler/icons-react';
 import type { ReactNode } from 'react';
 
-import { StylishText } from '../../../components/items/StylishText';
+import { StylishText } from '@lib/components/StylishText';
 import type { panelOptions } from '../PartPricingPanel';
 
 function AccordionControl(props: AccordionControlProps) {

src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx

@@ -4,6 +4,7 @@ import { IconInfoCircle, IconList, IconPackages } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -25,7 +26,6 @@ import {
   HoldItemAction,
   OptionsActionDropdown
 } from '../../components/items/ActionDropdown';
-import { StylishText } from '../../components/items/StylishText';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';

src/frontend/src/pages/sales/ReturnOrderDetail.tsx

@@ -4,6 +4,7 @@ import { IconInfoCircle, IconList } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -25,7 +26,6 @@ import {
   HoldItemAction,
   OptionsActionDropdown
 } from '../../components/items/ActionDropdown';
-import { StylishText } from '../../components/items/StylishText';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';

src/frontend/src/pages/sales/SalesOrderDetail.tsx

@@ -10,6 +10,7 @@ import {
 import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -31,7 +32,6 @@ import {
   HoldItemAction,
   OptionsActionDropdown
 } from '../../components/items/ActionDropdown';
-import { StylishText } from '../../components/items/StylishText';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';

src/frontend/src/pages/stock/StockDetail.tsx

@@ -29,6 +29,7 @@ import { type ReactNode, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -54,7 +55,6 @@ import {
   EditItemAction,
   OptionsActionDropdown
 } from '../../components/items/ActionDropdown';
-import { StylishText } from '../../components/items/StylishText';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import NavigationTree from '../../components/nav/NavigationTree';
 import { PageDetail } from '../../components/nav/PageDetail';

src/frontend/src/states/LocalState.tsx

@@ -36,8 +36,6 @@ interface LocalStateProps {
   // panels
   lastUsedPanels: Record<string, string>;
   setLastUsedPanel: (panelKey: string) => (value: string) => void;
-  detailDrawerStack: number;
-  addDetailDrawer: (value: number | false) => void;
   navigationOpen: boolean;
   setNavigationOpen: (value: boolean) => void;
   allowMobile: boolean;
@@ -134,15 +132,6 @@ export const useLocalState = create<LocalStateProps>()(
           });
         }
       },
-
-      // detail drawers
-      detailDrawerStack: 0,
-      addDetailDrawer: (value) => {
-        set({
-          detailDrawerStack:
-            value === false ? 0 : get().detailDrawerStack + value
-        });
-      },
       // navigation
       navigationOpen: false,
       setNavigationOpen: (value) => {
@@ -162,7 +151,7 @@ export const useLocalState = create<LocalStateProps>()(
 /*
 pushes changes in user profile to backend
 */
-function patchUser(key: 'language' | 'theme' | 'widgets', val: any) {
+export function patchUser(key: 'language' | 'theme' | 'widgets', val: any) {
   const uid = useUserState.getState().userId();
   if (uid) {
     api.patch(apiUrl(ApiEndpoints.user_profile), { [key]: val });

src/frontend/src/tables/FilterSelectDrawer.tsx

@@ -19,6 +19,7 @@ import { DateInput, type DateValue } from '@mantine/dates';
 import dayjs from 'dayjs';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import type {
   FilterSetState,
   TableFilter,
@@ -27,7 +28,6 @@ import type {
 } from '@lib/types/Filters';
 import { IconCheck } from '@tabler/icons-react';
 import { StandaloneField } from '../components/forms/StandaloneField';
-import { StylishText } from '../components/items/StylishText';
 import {
   filterDisplayLabel,
   filterDisplayValue,

src/frontend/src/tables/InvenTreeTableHeader.tsx

@@ -26,6 +26,7 @@ import { ActionButton } from '@lib/components/ActionButton';
 import { Boundary } from '@lib/components/Boundary';
 import { ButtonMenu } from '@lib/components/ButtonMenu';
 import { SearchInput } from '@lib/components/SearchInput';
+import { StylishText } from '@lib/components/StylishText';
 import { TableColumnSelect } from '@lib/components/TableColumnSelect';
 import { resolveItem } from '@lib/functions/Conversion';
 import type { TableFilter } from '@lib/types/Filters';
@@ -33,7 +34,6 @@ import type { TableState } from '@lib/types/Tables';
 import type { InvenTreeTableProps } from '@lib/types/Tables';
 import { showNotification } from '@mantine/notifications';
 import { PrintingActions } from '../components/buttons/PrintingActions';
-import { StylishText } from '../components/items/StylishText';
 import useDataExport from '../hooks/UseDataExport';
 import { useDeleteApiFormModal } from '../hooks/UseForm';
 import { FilterPreview, FilterSelectDrawer } from './FilterSelectDrawer';

src/frontend/src/tables/build/BuildOutputTable.tsx

@@ -24,6 +24,7 @@ import { ActionButton } from '@lib/components/ActionButton';
 import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { type RowAction, RowEditAction } from '@lib/components/RowActions';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -32,7 +33,6 @@ import useTable from '@lib/hooks/UseTable';
 import type { TableFilter } from '@lib/types/Filters';
 import type { StockOperationProps } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { StylishText } from '../../components/items/StylishText';
 import { useApi } from '../../contexts/ApiContext';
 import {
   useBuildAutoAllocateFields,

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -23,7 +23,12 @@ import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AddItemButton } from '@lib/components/AddItemButton';
+import { StylishText } from '@lib/components/StylishText';
 import { YesNoButton } from '@lib/components/YesNoButton';
+import {
+  DetailDrawer,
+  DetailDrawerLink
+} from '@lib/components/nav/DetailDrawer';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
@@ -38,12 +43,7 @@ import {
   OptionsActionDropdown
 } from '../../components/items/ActionDropdown';
 import { InfoItem } from '../../components/items/InfoItem';
-import { StylishText } from '../../components/items/StylishText';
 import { UnavailableIndicator } from '../../components/items/UnavailableIndicator';
-import {
-  DetailDrawer,
-  DetailDrawerLink
-} from '../../components/nav/DetailDrawer';
 import {
   StatusRenderer,
   TableStatusRenderer

src/frontend/src/tables/machine/MachineTypeTable.tsx

@@ -18,14 +18,14 @@ import { IconExclamationCircle, IconRefresh } from '@tabler/icons-react';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { StylishText } from '@lib/components/StylishText';
+import { DetailDrawer } from '@lib/components/nav/DetailDrawer';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
 import type { TableColumn } from '@lib/types/Tables';
 import type { InvenTreeTableProps } from '@lib/types/Tables';
 import { InfoItem } from '../../components/items/InfoItem';
-import { StylishText } from '../../components/items/StylishText';
-import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
 import { MachineListTable, useMachineTypeDriver } from './MachineListTable';

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -15,11 +15,11 @@ import { useNavigate } from 'react-router-dom';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import type { RowAction } from '@lib/components/RowActions';
+import { DetailDrawer } from '@lib/components/nav/DetailDrawer';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
 import type { TableColumn } from '@lib/types/Tables';
-import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import PluginDrawer from '../../components/plugins/PluginDrawer';
 import type { PluginInterface } from '../../components/plugins/PluginInterface';
 import { useApi } from '../../contexts/ApiContext';

src/frontend/src/tables/settings/ApiTokenTable.tsx

@@ -1,6 +1,7 @@
 import { AddItemButton } from '@lib/components/AddItemButton';
 import { CopyButton } from '@lib/components/CopyButton';
 import type { RowAction } from '@lib/components/RowActions';
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
@@ -12,7 +13,6 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconCircleX } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 import { api } from '../../App';
-import { StylishText } from '../../components/items/StylishText';
 import { showApiErrorMessage } from '../../functions/notifications';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { BooleanColumn, UserColumn } from '../ColumnRenderers';

src/frontend/src/tables/settings/BarcodeScanHistoryTable.tsx

@@ -16,6 +16,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { CopyButton } from '@lib/components/CopyButton';
 import { RowDeleteAction } from '@lib/components/RowActions';
+import { StylishText } from '@lib/components/StylishText';
 import { PassFailButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
@@ -24,7 +25,6 @@ import { shortenString } from '@lib/functions/String';
 import useTable from '@lib/hooks/UseTable';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { StylishText } from '../../components/items/StylishText';
 import { RenderUser } from '../../components/render/User';
 import { useDeleteApiFormModal } from '../../hooks/UseForm';
 import { useGlobalSettingsState } from '../../states/SettingsStates';

src/frontend/src/tables/settings/ErrorTable.tsx

@@ -5,11 +5,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { CopyButton } from '@lib/components/CopyButton';
 import { type RowAction, RowDeleteAction } from '@lib/components/RowActions';
+import { DetailDrawer } from '@lib/components/nav/DetailDrawer';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
 import type { TableColumn } from '@lib/types/Tables';
-import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import { useDeleteApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { useUserState } from '../../states/UserState';

src/frontend/src/tables/settings/FailedTasksTable.tsx

@@ -5,11 +5,11 @@ import { hideNotification, showNotification } from '@mantine/notifications';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 
+import { StylishText } from '@lib/components/StylishText';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useTable from '@lib/hooks/UseTable';
 import type { TableColumn } from '@lib/types/Tables';
-import { StylishText } from '../../components/items/StylishText';
 import { useUserState } from '../../states/UserState';
 import { InvenTreeTable } from '../InvenTreeTable';
 

src/frontend/src/tables/settings/GroupTable.tsx

@@ -9,6 +9,8 @@ import {
   RowDeleteAction,
   RowEditAction
 } from '@lib/components/RowActions';
+import { StylishText } from '@lib/components/StylishText';
+import { DetailDrawer } from '@lib/components/nav/DetailDrawer';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -20,8 +22,6 @@ import { IconUsersGroup } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
 import { EditApiForm } from '../../components/forms/ApiForm';
 import { RoleTable, type RuleSet } from '../../components/items/RoleTable';
-import { StylishText } from '../../components/items/StylishText';
-import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -11,6 +11,7 @@ import {
   RowDeleteAction,
   RowEditAction
 } from '@lib/components/RowActions';
+import { DetailDrawer } from '@lib/components/nav/DetailDrawer';
 import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
@@ -30,7 +31,6 @@ import type {
 } from '../../components/editors/TemplateEditor/TemplateEditor';
 import { ApiIcon } from '../../components/items/ApiIcon';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
-import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import {
   getPluginTemplateEditor,
   getPluginTemplatePreview

src/frontend/src/tables/settings/UserTable.tsx

@@ -16,6 +16,8 @@ import {
   RowDeleteAction,
   RowEditAction
 } from '@lib/components/RowActions';
+import { StylishText } from '@lib/components/StylishText';
+import { DetailDrawer } from '@lib/components/nav/DetailDrawer';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -29,12 +31,10 @@ import { useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import { EditApiForm } from '../../components/forms/ApiForm';
-import { StylishText } from '../../components/items/StylishText';
 import {
   TransferList,
   type TransferListItem
 } from '../../components/items/TransferList';
-import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import { showApiErrorMessage } from '../../functions/notifications';
 import {
   useApiFormModal,