fix: polish settings and command menu

apps/nextjs/src/components/layout/header/lazy-spotlight.tsx

@@ -1,38 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import dynamic from "next/dynamic";
-import { Center, Loader, Paper } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 
 import { hotkeys } from "@homarr/definitions";
+import { Spotlight } from "@homarr/spotlight/component";
 import { hasPendingSpotlightOpen, openSpotlight, spotlightOpenEvent } from "@homarr/spotlight/open";
 
-const loadSpotlight = () => import("@homarr/spotlight/component");
-const SpotlightLoading = () => (
-  <Center
-    data-homarr-dev-benchmark-spotlight-feedback
-    pos="fixed"
-    inset={0}
-    role="status"
-    aria-label="Loading search"
-    style={{ zIndex: 1000, background: "rgb(0 0 0 / 20%)", backdropFilter: "blur(2px)" }}
-  >
-    <Paper withBorder radius="md" p="xl" shadow="xl">
-      <Loader />
-    </Paper>
-  </Center>
-);
-const Spotlight = dynamic(() => loadSpotlight().then(({ Spotlight: Component }) => Component), {
-  ssr: false,
-  loading: SpotlightLoading,
-});
-
-export const preloadSpotlight = () => void loadSpotlight().catch(() => undefined);
-
 export const LazySpotlight = () => {
   const [isMounted, setIsMounted] = useState(false);
-  const [isPreloaded, setIsPreloaded] = useState(false);
 
   useHotkeys(
     isMounted
@@ -49,41 +25,27 @@ export const LazySpotlight = () => {
   );
 
   useEffect(() => {
-    let isActive = true;
     const mount = () => setIsMounted(true);
     window.addEventListener(spotlightOpenEvent, mount);
     if (hasPendingSpotlightOpen()) mount();
 
-    const preload = () => {
-      void loadSpotlight().then(
-        () => {
-          if (isActive) setIsPreloaded(true);
-        },
-        () => undefined,
-      );
-    };
     let idleId: number | undefined;
     const delayId = window.setTimeout(() => {
-      idleId = window.requestIdleCallback?.(preload, { timeout: 1_000 });
-      if (idleId === undefined) preload();
+      idleId = window.requestIdleCallback?.(mount, { timeout: 1_000 });
+      if (idleId === undefined) mount();
     }, 1_000);
     return () => {
-      isActive = false;
       window.removeEventListener(spotlightOpenEvent, mount);
       window.clearTimeout(delayId);
       if (idleId !== undefined) window.cancelIdleCallback?.(idleId);
     };
   }, []);
 
-  return isMounted || isPreloaded ? (
+  return isMounted ? (
     <>
-      {isPreloaded && <span hidden data-homarr-dev-benchmark-spotlight-preloaded />}
-      {isMounted && (
-        <>
-          <span hidden data-homarr-dev-benchmark-spotlight-mounted />
-          <Spotlight />
-        </>
-      )}
+      <span hidden data-homarr-dev-benchmark-spotlight-preloaded />
+      <span hidden data-homarr-dev-benchmark-spotlight-mounted />
+      <Spotlight />
     </>
   ) : null;
 };

apps/nextjs/src/components/layout/header/search.tsx

@@ -8,7 +8,6 @@ import { useI18n } from "@homarr/translation/client";
 
 import { HeaderButton } from "./button";
 import classes from "./search.module.css";
-import { preloadSpotlight } from "./lazy-spotlight";
 
 export const DesktopSearchInput = () => {
   const t = useI18n();
@@ -22,9 +21,6 @@ export const DesktopSearchInput = () => {
       size="sm"
       leftSection={<IconSearch size={20} stroke={1.5} />}
       onClick={openSpotlight}
-      onFocus={preloadSpotlight}
-      onPointerDown={preloadSpotlight}
-      onPointerEnter={preloadSpotlight}
       radius="xl"
     >
       {`${t("search.placeholder")}...`}
@@ -37,9 +33,6 @@ export const MobileSearchButton = () => {
     <HeaderButton
       data-homarr-dev-benchmark-interaction="search"
       onClick={openSpotlight}
-      onFocus={preloadSpotlight}
-      onPointerDown={preloadSpotlight}
-      onPointerEnter={preloadSpotlight}
       className={classes.mobileSearch}
     >
       <IconSearch size={20} stroke={1.5} />

apps/nextjs/src/components/manage/unsaved-changes-bar.tsx

@@ -13,8 +13,8 @@ export const UnsavedChangesBar = ({ children }: UnsavedChangesBarProps) => {
   const t = useI18n();
 
   return (
-    <div style={{ position: "sticky", bottom: 20 }}>
-      <Card withBorder>
+    <div style={{ position: "sticky", bottom: 20, zIndex: "var(--mantine-z-index-app)" }}>
+      <Card withBorder bg="var(--mantine-color-body)">
         <Group justify="space-between" wrap="wrap">
           <Text fw={500}>{t("common.unsavedChanges")}</Text>
           <Group>{children}</Group>