Simplify display of "locked" part status (#8297)

* Simplify display of "locked" part status

- REmove big badge
- Show subtle icon

* Update playwright test

src/frontend/src/pages/part/PartDetail.tsx

@@ -21,9 +21,8 @@ import {
   IconLayersLinked,
   IconList,
   IconListTree,
-  IconNotes,
+  IconLock,
   IconPackages,
-  IconPaperclip,
   IconReportAnalytics,
   IconShoppingCart,
   IconStack2,
@@ -899,12 +898,6 @@ export default function PartDetail() {
         visible={part.building > 0}
         key="in_production"
       />,
-      <DetailsBadge
-        label={t`Locked`}
-        color="black"
-        visible={part.locked == true}
-        key="locked"
-      />,
       <DetailsBadge
         label={t`Inactive`}
         color="red"
@@ -1090,6 +1083,11 @@ export default function PartDetail() {
           />
           <PageDetail
             title={t`Part` + ': ' + part.full_name}
+            icon={
+              part?.locked ? (
+                <IconLock aria-label="part-lock-icon" />
+              ) : undefined
+            }
             subtitle={part.description}
             imageUrl={part.image}
             badges={badges}

src/frontend/tests/pages/pui_part.spec.ts

@@ -15,7 +15,7 @@ test('Pages - Part - Locking', async ({ page }) => {
   // Navigate to a known assembly which *is* locked
   await page.goto(`${baseUrl}/part/100/bom`);
   await page.getByRole('tab', { name: 'Bill of Materials' }).click();
-  await page.getByText('Locked', { exact: true }).waitFor();
+  await page.getByLabel('part-lock-icon').waitFor();
   await page.getByText('Part is Locked', { exact: true }).waitFor();
 
   // Check the "parameters" tab also