[UI] Spotlight tweaks (#11305)

* Add spotlight action to navigate to data import screen

* Hide barcode action if disabled

* Sort actions

* Make spotlight scrollable

* Docs for spotlight

src/frontend/src/components/nav/Layout.tsx

@@ -133,6 +133,7 @@ export default function LayoutComponent() {
             actions={actions}
             store={firstStore}
             highlightQuery
+            scrollable
             searchProps={{
               leftSection: <IconSearch size='1.2rem' />,
               placeholder: t`Search...`

src/frontend/src/defaults/actions.tsx

@@ -81,23 +81,24 @@ export function getActions(navigate: NavigateFunction) {
         onClick: () => setNavigationOpen(true),
         leftSection: <IconPointer size='1.2rem' />
       },
-      {
-        id: 'scan',
-        label: t`Scan`,
-        description: t`Scan a barcode or QR code`,
-        onClick: () => openQrModal(navigate),
-        leftSection: <IconBarcode size='1.2rem' />
-      },
       {
         id: 'user-settings',
         label: t`User Settings`,
-
         description: t`Go to your user settings`,
         onClick: () => navigate('/settings/user'),
         leftSection: <IconUserCog size='1.2rem' />
       }
     ];
 
+    user?.isStaff() &&
+      _actions.push({
+        id: 'data-import',
+        label: t`Import Data`,
+        description: t`Import data from a file`,
+        onClick: () => navigate('/settings/admin/import'),
+        leftSection: <IconPlug size='1.2rem' />
+      });
+
     // Page Actions
     user?.hasViewRole(UserRoles.purchase_order) &&
       _actions.push({
@@ -130,6 +131,15 @@ export function getActions(navigate: NavigateFunction) {
         leftSection: <IconLink size='1.2rem' />
       });
 
+    globalSettings.isSet('BARCODE_ENABLE') &&
+      _actions.push({
+        id: 'scan',
+        label: t`Scan`,
+        description: t`Scan a barcode or QR code`,
+        onClick: () => openQrModal(navigate),
+        leftSection: <IconBarcode size='1.2rem' />
+      });
+
     user?.hasViewRole(UserRoles.build) &&
       _actions.push({
         id: 'builds',
@@ -169,5 +179,5 @@ export function getActions(navigate: NavigateFunction) {
     return _actions;
   }, [navigate, setNavigationOpen, globalSettings, user]);
 
-  return actions;
+  return actions.sort((a, b) => (a.label ?? '').localeCompare(b.label ?? ''));
 }