[UI] Add notification dot to all notes panel tabs when there's a note (#11195)

Co-authored-by: Matthias Mair <code@mjmair.com>
2026-01-28 17:13:44 +00:00 · 2026-01-27 00:55:54 +00:00
parent 89ff4be082
commit ec60a37cd1
13 changed files with 51 additions and 24 deletions
--- a/src/frontend/src/components/panels/NotesPanel.tsx
+++ b/src/frontend/src/components/panels/NotesPanel.tsx
@@ -10,11 +10,13 @@ import type { PanelType } from './Panel';
 export default function NotesPanel({
  model_type,
  model_id,
-  editable
+  editable,
+  has_note
 }: {
  model_type: ModelType;
  model_id: number | undefined;
  editable?: boolean;
+  has_note?: boolean;
 }): PanelType {
  const user = useUserState.getState();

@@ -22,6 +24,7 @@ export default function NotesPanel({
    name: 'notes',
    label: t`Notes`,
    icon: <IconNotes />,
+    notification_dot: has_note ? 'info' : null,
    content:
      model_type && model_id ? (
        <NotesEditor
--- a/src/frontend/src/components/panels/Panel.tsx
+++ b/src/frontend/src/components/panels/Panel.tsx
@@ -8,6 +8,7 @@ export type PanelType = {
  label: string;
  controls?: ReactNode;
  icon?: ReactNode;
+  notification_dot?: 'info' | 'warning' | 'danger' | null;
  content?: ReactNode;
  hidden?: boolean;
  disabled?: boolean;
--- a/src/frontend/src/components/panels/PanelGroup.tsx
+++ b/src/frontend/src/components/panels/PanelGroup.tsx
@@ -3,6 +3,7 @@ import {
  Box,
  Divider,
  Group,
+  Indicator,
  Loader,
  Paper,
  Stack,
@@ -253,19 +254,31 @@ function BasePanelGroup({
                            handlePanelChange(panel.name, event)
                          }
                        >
-                          <Group justify='left' gap='xs' wrap='nowrap'>
-                            <UnstyledButton
-                              component={'a'}
-                              style={{
-                                textAlign: 'left'
-                              }}
-                              href={generateUrl(
-                                `/${getBaseUrl()}${location.pathname}/${panel.name}`
-                              )}
-                            >
-                              {expanded && panel.label}
-                            </UnstyledButton>
-                          </Group>
+                          <Indicator
+                            color={
+                              panel.notification_dot == 'info'
+                                ? 'blue'
+                                : panel.notification_dot == 'warning'
+                                  ? 'yellow'
+                                  : 'red'
+                            }
+                            position='middle-end'
+                            disabled={!panel.notification_dot}
+                          >
+                            <Group justify='left' gap='xs' wrap='nowrap'>
+                              <UnstyledButton
+                                component={'a'}
+                                style={{
+                                  textAlign: 'left'
+                                }}
+                                href={generateUrl(
+                                  `/${getBaseUrl()}${location.pathname}/${panel.name}`
+                                )}
+                              >
+                                {expanded && panel.label}
+                              </UnstyledButton>
+                            </Group>
+                          </Indicator>
                        </Tabs.Tab>
                      </Tooltip>
                    )
--- a/src/frontend/src/pages/build/BuildDetail.tsx
+++ b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -530,7 +530,8 @@ export default function BuildDetail() {
      }),
      NotesPanel({
        model_type: ModelType.build,
-        model_id: build.pk
+        model_id: build.pk,
+        has_note: !!build.notes
      })
    ];
  }, [
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -276,7 +276,8 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
      }),
      NotesPanel({
        model_type: ModelType.company,
-        model_id: company.pk
+        model_id: company.pk,
+        has_note: !!company.notes
      })
    ];
  }, [id, company, user]);
--- a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
+++ b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
@@ -198,7 +198,8 @@ export default function ManufacturerPartDetail() {
      }),
      NotesPanel({
        model_type: ModelType.manufacturerpart,
-        model_id: manufacturerPart?.pk
+        model_id: manufacturerPart?.pk,
+        has_note: !!manufacturerPart?.notes
      })
    ];
  }, [user, manufacturerPart]);
--- a/src/frontend/src/pages/company/SupplierPartDetail.tsx
+++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx
@@ -295,7 +295,8 @@ export default function SupplierPartDetail() {
      }),
      NotesPanel({
        model_type: ModelType.supplierpart,
-        model_id: supplierPart?.pk
+        model_id: supplierPart?.pk,
+        has_note: !!supplierPart?.notes
      })
    ];
  }, [supplierPart]);
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -971,7 +971,8 @@ export default function PartDetail() {
      }),
      NotesPanel({
        model_type: ModelType.part,
-        model_id: part?.pk
+        model_id: part?.pk,
+        has_note: !!part?.notes
      })
    ];
  }, [id, part, user, globalSettings, userSettings, detailsPanel]);
--- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
+++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -400,7 +400,8 @@ export default function PurchaseOrderDetail() {
      }),
      NotesPanel({
        model_type: ModelType.purchaseorder,
-        model_id: order.pk
+        model_id: order.pk,
+        has_note: !!order.notes
      })
    ];
  }, [order, id, user]);
--- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -365,7 +365,8 @@ export default function ReturnOrderDetail() {
      }),
      NotesPanel({
        model_type: ModelType.returnorder,
-        model_id: order.pk
+        model_id: order.pk,
+        has_note: !!order.notes
      })
    ];
  }, [order, id, user]);
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -438,7 +438,8 @@ export default function SalesOrderDetail() {
      }),
      NotesPanel({
        model_type: ModelType.salesorder,
-        model_id: order.pk
+        model_id: order.pk,
+        has_note: !!order.notes
      })
    ];
  }, [order, id, user, soStatus, user]);
--- a/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
@@ -275,7 +275,8 @@ export default function SalesOrderShipmentDetail() {
      }),
      NotesPanel({
        model_type: ModelType.salesordershipment,
-        model_id: shipment.pk
+        model_id: shipment.pk,
+        has_note: !!shipment.notes
      })
    ];
  }, [isPending, shipment, detailsPanel]);
--- a/src/frontend/src/pages/stock/StockDetail.tsx
+++ b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -623,7 +623,8 @@ export default function StockDetail() {
      }),
      NotesPanel({
        model_type: ModelType.stockitem,
-        model_id: stockitem.pk
+        model_id: stockitem.pk,
+        has_note: !!stockitem.notes
      })
    ];
  }, [