Consolidate part table views

src/frontend/src/pages/part/CategoryDetail.tsx

@@ -6,7 +6,8 @@ import {
   IconListCheck,
   IconListDetails,
   IconPackages,
-  IconSitemap
+  IconSitemap,
+  IconTable
 } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -15,6 +16,7 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { getDetailUrl } from '@lib/functions/Navigation';
+import { useLocalStorage } from '@mantine/hooks';
 import AdminButton from '../../components/buttons/AdminButton';
 import StarredToggleButton from '../../components/buttons/StarredToggleButton';
 import {
@@ -33,6 +35,7 @@ import NavigationTree from '../../components/nav/NavigationTree';
 import { PageDetail } from '../../components/nav/PageDetail';
 import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
+import SegmentedControlPanel from '../../components/panels/SegmentedControlPanel';
 import { partCategoryFields } from '../../forms/PartForms';
 import {
   useDeleteApiFormModal,
@@ -258,6 +261,11 @@ export default function CategoryDetail() {
     ];
   }, [id, user, category.pk, category.starred]);
 
+  const [partsView, setPartsView] = useLocalStorage<string>({
+    key: 'category-parts-view',
+    defaultValue: 'table'
+  });
+
   const panels: PanelType[] = useMemo(
     () => [
       {
@@ -272,20 +280,35 @@ export default function CategoryDetail() {
         icon: <IconSitemap />,
         content: <PartCategoryTable parentId={id} />
       },
-      {
+      SegmentedControlPanel({
         name: 'parts',
         label: t`Parts`,
         icon: <IconCategory />,
-        content: (
+        selection: partsView,
-          <PartListTable
+        onChange: setPartsView,
-            props={{
+        options: [
-              params: {
+          {
-                category: id
+            value: 'table',
-              }
+            label: t`Table View`,
-            }}
+            icon: <IconTable />,
-          />
+            content: (
-        )
+              <PartListTable
-      },
+                props={{
+                  params: {
+                    category: id
+                  }
+                }}
+              />
+            )
+          },
+          {
+            value: 'parametric',
+            label: t`Parametric View`,
+            icon: <IconListDetails />,
+            content: <ParametricPartTable categoryId={id} />
+          }
+        ]
+      }),
       {
         name: 'stockitem',
         label: t`Stock Items`,
@@ -307,19 +330,9 @@ export default function CategoryDetail() {
         icon: <IconListCheck />,
         hidden: !id || !category.pk,
         content: <PartCategoryTemplateTable categoryId={category?.pk} />
-      },
-      {
-        name: 'parameters',
-        label: t`Part Parameters`,
-        icon: <IconListDetails />,
-        content: (
-          <>
-            <ParametricPartTable categoryId={id} />
-          </>
-        )
       }
     ],
-    [category, id]
+    [category, id, partsView]
   );
 
   const breadcrumbs = useMemo(