[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

docs/docs/concepts/user_interface.md

@@ -266,6 +266,20 @@ To remove a particular category of search results from the global search menu, c
 
 ## Spotlight
 
+The user interface features a "spotlight" search functionality, which provides a quick and efficient way to access common actions or navigate to specific pages within the InvenTree system. The spotlight search is designed to enhance user productivity by allowing users to quickly find and execute actions without needing to navigate through menus or remember specific page locations.
+
+{{ image("concepts/ui_spotlight.png", "Spotlight Search") }}
+
+### Open Spotlight
+
+To open the "spotlight" search, click on the "spotlight" icon located in the main menu at the top of the interface. This will open the spotlight search menu, allowing you to enter search queries and view available actions.
+
+Alternatively, the spotlight search can be opened using the keyboard shortcut `Ctrl + K` (or `Cmd + K` on macOS), providing a quick and convenient way to access the spotlight functionality without needing to click on the menu icon.
+
+### Disable Spotlight
+
+Users may opt to disable the spotlight search functionality if they do not find it useful or prefer not to use it. To disable the spotlight search, navigate to your [user settings](../settings/user.md) and locate the option to disable the spotlight feature. Once disabled, the spotlight search will no longer be accessible from the main menu or via keyboard shortcuts.
+
 ## Barcode Scanning
 
 ## Notifications
@@ -273,3 +287,7 @@ To remove a particular category of search results from the global search menu, c
 ## Customization
 
 ## User Permissions
+
+Many aspects of the user interface are controlled by user permissions, which determine what actions and features are available to each user based on their assigned roles and permissions within the system. This allows for a highly customizable user experience, where different users can have access to different features and functionality based on their specific needs and responsibilities within the organization.
+
+If a user does not have permission to access a particular feature or section of the system, that feature will be hidden from their view in the user interface. This helps to ensure that users only see the features and information that are relevant to their role, reducing clutter and improving usability.

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 ?? ''));
 }