[PUI] Improve search panel (#5538)

* Cleanup links in search bar

* Add renderer for stockitem model

* Add model renderer for build order

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -2,6 +2,7 @@ import { Trans, t } from '@lingui/macro';
 import {
   ActionIcon,
   Alert,
+  Anchor,
   Center,
   Checkbox,
   Divider,
@@ -209,13 +210,13 @@ function QueryResultGroup({
         <Divider />
         <Stack>
           {query.results.results.map((result: any) => (
-            <div onClick={() => onResultClick(query.name, result.pk)}>
+            <Anchor onClick={() => onResultClick(query.name, result.pk)}>
               <RenderInstance
                 key={`${query.name}-${result.pk}`}
                 instance={result}
                 model={query.name}
               />
-            </div>
+            </Anchor>
           ))}
         </Stack>
         <Space />
@@ -340,7 +341,7 @@ export function SearchDrawer({
   return (
     <Drawer
       opened={opened}
-      size="lg"
+      size="md"
       onClose={closeDrawer}
       position="right"
       withCloseButton={false}

src/frontend/src/components/render/Build.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+import { RenderInlineModel } from './Instance';
+
+/**
+ * Inline rendering of a single BuildOrder instance
+ */
+export function RenderBuildOrder({
+  buildorder
+}: {
+  buildorder: any;
+}): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={buildorder.reference}
+      secondary={buildorder.title}
+      image={buildorder.part_detail?.thumbnail || buildorder.part_detail?.image}
+    />
+  );
+}

src/frontend/src/components/render/Instance.tsx

@@ -4,6 +4,7 @@ import { Group, Text } from '@mantine/core';
 import { ReactNode } from 'react';
 
 import { Thumbnail } from '../items/Thumbnail';
+import { RenderBuildOrder } from './Build';
 import {
   RenderAddress,
   RenderCompany,
@@ -17,7 +18,7 @@ import {
   RenderSalesOrderShipment
 } from './Order';
 import { RenderPart, RenderPartCategory } from './Part';
-import { RenderStockLocation } from './Stock';
+import { RenderStockItem, RenderStockLocation } from './Stock';
 import { RenderOwner, RenderUser } from './User';
 
 // import { ApiFormFieldType } from "../forms/fields/ApiFormField";
@@ -35,6 +36,8 @@ export function RenderInstance({
   switch (model) {
     case 'address':
       return <RenderAddress address={instance} />;
+    case 'build':
+      return <RenderBuildOrder buildorder={instance} />;
     case 'company':
       return <RenderCompany company={instance} />;
     case 'contact':
@@ -55,6 +58,8 @@ export function RenderInstance({
       return <RenderSalesOrderShipment shipment={instance} />;
     case 'stocklocation':
       return <RenderStockLocation location={instance} />;
+    case 'stockitem':
+      return <RenderStockItem item={instance} />;
     case 'supplierpart':
       return <RenderSupplierPart supplierpart={instance} />;
     case 'user':

src/frontend/src/components/render/Stock.tsx

@@ -17,3 +17,13 @@ export function RenderStockLocation({
     />
   );
 }
+
+export function RenderStockItem({ item }: { item: any }): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={item.part_detail?.full_name}
+      secondary={item.quantity}
+      image={item.part_detail?.thumbnail || item.part_detail?.image}
+    />
+  );
+}