feat: add context specific search and actions (#1570)

packages/spotlight/src/modes/home/context-specific-group.tsx

@@ -0,0 +1,34 @@
+import { Group, Text } from "@mantine/core";
+
+import { createGroup } from "../../lib/group";
+import type { ContextSpecificItem } from "./context";
+import { useSpotlightContextResults } from "./context";
+
+export const contextSpecificSearchGroups = createGroup<ContextSpecificItem>({
+  title: (t) => t("search.mode.home.group.local.title"),
+  keyPath: "id",
+  Component(option) {
+    const icon =
+      typeof option.icon !== "string" ? (
+        <option.icon size={24} />
+      ) : (
+        <img width={24} height={24} src={option.icon} alt={option.name} />
+      );
+
+    return (
+      <Group w="100%" wrap="nowrap" align="center" px="md" py="xs">
+        {icon}
+        <Text>{option.name}</Text>
+      </Group>
+    );
+  },
+  useInteraction(option) {
+    return option.interaction();
+  },
+  filter(query, option) {
+    return option.name.toLowerCase().includes(query.toLowerCase());
+  },
+  useOptions() {
+    return useSpotlightContextResults();
+  },
+});

packages/spotlight/src/modes/home/context.tsx

@@ -0,0 +1,122 @@
+import type { DependencyList, PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+import type { TablerIcon } from "@homarr/ui";
+
+import type { inferSearchInteractionDefinition, SearchInteraction } from "../../lib/interaction";
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type ContextSpecificItem = {
+  id: string;
+  name: string;
+  icon: TablerIcon | string;
+  interaction: () => inferSearchInteractionDefinition<SearchInteraction>;
+  disabled?: boolean;
+};
+
+interface SpotlightContextProps {
+  items: ContextSpecificItem[];
+  registerItems: (key: string, results: ContextSpecificItem[]) => void;
+  unregisterItems: (key: string) => void;
+}
+
+const createSpotlightContext = (displayName: string) => {
+  const SpotlightContext = createContext<SpotlightContextProps | null>(null);
+  SpotlightContext.displayName = displayName;
+
+  const Provider = ({ children }: PropsWithChildren) => {
+    const [itemsMap, setItemsMap] = useState<Map<string, { items: ContextSpecificItem[]; count: number }>>(new Map());
+
+    const registerItems = useCallback((key: string, newItems: ContextSpecificItem[]) => {
+      setItemsMap((prevItems) => {
+        const newItemsMap = new Map(prevItems);
+        newItemsMap.set(key, { items: newItems, count: (newItemsMap.get(key)?.count ?? 0) + 1 });
+        return newItemsMap;
+      });
+    }, []);
+
+    const unregisterItems = useCallback((key: string) => {
+      setItemsMap((prevItems) => {
+        const registrationCount = prevItems.get(key)?.count ?? 0;
+
+        if (registrationCount <= 1) {
+          const newItemsMap = new Map(prevItems);
+          newItemsMap.delete(key);
+          return newItemsMap;
+        }
+
+        const newItemsMap = new Map(prevItems);
+        newItemsMap.set(key, { items: newItemsMap.get(key)?.items ?? [], count: registrationCount - 1 });
+
+        return prevItems;
+      });
+    }, []);
+
+    const items = useMemo(() => Array.from(itemsMap.values()).flatMap(({ items }) => items), [itemsMap]);
+
+    return (
+      <SpotlightContext.Provider value={{ items, registerItems, unregisterItems }}>
+        {children}
+      </SpotlightContext.Provider>
+    );
+  };
+
+  const useSpotlightContextItems = () => {
+    const context = useContext(SpotlightContext);
+
+    if (!context) {
+      throw new Error(`useSpotlightContextItems must be used within SpotlightContext[displayName=${displayName}]`);
+    }
+
+    return context.items;
+  };
+
+  const useRegisterSpotlightContextItems = (
+    key: string,
+    items: ContextSpecificItem[],
+    dependencyArray: DependencyList,
+  ) => {
+    const context = useContext(SpotlightContext);
+
+    if (!context) {
+      throw new Error(
+        `useRegisterSpotlightContextItems must be used within SpotlightContext[displayName=${displayName}]`,
+      );
+    }
+
+    useEffect(() => {
+      context.registerItems(
+        key,
+        items.filter((item) => !item.disabled),
+      );
+
+      return () => {
+        context.unregisterItems(key);
+      };
+      // We ignore the results
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...dependencyArray, key]);
+  };
+
+  return [SpotlightContext, Provider, useSpotlightContextItems, useRegisterSpotlightContextItems] as const;
+};
+
+const [_ResultContext, ResultProvider, useSpotlightContextResults, useRegisterSpotlightContextResults] =
+  createSpotlightContext("SpotlightContextSpecificResults");
+const [_ActionContext, ActionProvider, useSpotlightContextActions, useRegisterSpotlightContextActions] =
+  createSpotlightContext("SpotlightContextSpecificActions");
+
+export {
+  useRegisterSpotlightContextActions,
+  useRegisterSpotlightContextResults,
+  useSpotlightContextActions,
+  useSpotlightContextResults,
+};
+
+export const SpotlightProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <ResultProvider>
+      <ActionProvider>{children}</ActionProvider>
+    </ResultProvider>
+  );
+};

packages/spotlight/src/modes/home/index.tsx

@@ -0,0 +1,8 @@
+import type { SearchMode } from "../../lib/mode";
+import { contextSpecificSearchGroups } from "./context-specific-group";
+
+export const homeMode = {
+  character: undefined,
+  modeKey: "home",
+  groups: [contextSpecificSearchGroups],
+} satisfies SearchMode;