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

Co-authored-by: Matthias Mair <code@mjmair.com>

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

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;

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'>
+                          <Indicator
-                            <UnstyledButton
+                            color={
-                              component={'a'}
+                              panel.notification_dot == 'info'
-                              style={{
+                                ? 'blue'
-                                textAlign: 'left'
+                                : panel.notification_dot == 'warning'
-                              }}
+                                  ? 'yellow'
-                              href={generateUrl(
+                                  : 'red'
-                                `/${getBaseUrl()}${location.pathname}/${panel.name}`
+                            }
-                              )}
+                            position='middle-end'
-                            >
+                            disabled={!panel.notification_dot}
-                              {expanded && panel.label}
+                          >
-                            </UnstyledButton>
+                            <Group justify='left' gap='xs' wrap='nowrap'>
-                          </Group>
+                              <UnstyledButton
+                                component={'a'}
+                                style={{
+                                  textAlign: 'left'
+                                }}
+                                href={generateUrl(
+                                  `/${getBaseUrl()}${location.pathname}/${panel.name}`
+                                )}
+                              >
+                                {expanded && panel.label}
+                              </UnstyledButton>
+                            </Group>
+                          </Indicator>
                         </Tabs.Tab>
                       </Tooltip>
                     )

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
       })
     ];
   }, [

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]);

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]);

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]);

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]);

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]);

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]);

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]);

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]);

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
       })
     ];
   }, [