feat: add improved search (#1051)

* feat: add improved search * wip: add support for sorting, rename use-options to use-query-options, add use-options for local usage, add pages search group * feat: add help links from manage layout to help search mode * feat: add additional search engines * feat: add group search details * refactor: improve users search group type * feat: add apps search group, add disabled search interaction * feat: add integrations and boards for search * wip: hook issue with react * fix: hook issue regarding actions and interactions * chore: address pull request feedback * fix: format issues * feat: add additional global actions to search * chore: remove unused code * fix: search engine short key * fix: typecheck issues * fix: deepsource issues * fix: eslint issue * fix: lint issues * fix: unordered dependencies * chore: address pull request feedback
2024-09-20 16:51:42 +02:00
parent 0c44af2f67
commit ce1ef3cbe7
64 changed files with 1985 additions and 628 deletions
--- a/packages/spotlight/src/modes/index.tsx
+++ b/packages/spotlight/src/modes/index.tsx
@@ -0,0 +1,74 @@
+import { Group, Kbd, Text } from "@mantine/core";
+import { IconBook2, IconBrandDiscord, IconBrandGithub } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { createGroup } from "../lib/group";
+import { interaction } from "../lib/interaction";
+import type { SearchMode } from "../lib/mode";
+import { appIntegrationBoardMode } from "./app-integration-board";
+import { commandMode } from "./command";
+import { externalMode } from "./external";
+import { pageMode } from "./page";
+import { userGroupMode } from "./user-group";
+
+const searchModesWithoutHelp = [userGroupMode, appIntegrationBoardMode, externalMode, commandMode, pageMode] as const;
+
+const helpMode = {
+  modeKey: "help",
+  character: "?",
+  groups: [
+    createGroup({
+      keyPath: "character",
+      title: (t) => t("search.mode.help.group.mode.title"),
+      options: searchModesWithoutHelp.map(({ character, modeKey }) => ({ character, modeKey })),
+      component: ({ modeKey, character }) => {
+        const t = useScopedI18n(`search.mode.${modeKey}`);
+
+        return (
+          <Group px="md" py="xs" w="100%" wrap="nowrap" align="center" justify="space-between">
+            <Text>{t("help")}</Text>
+            <Kbd size="sm">{character}</Kbd>
+          </Group>
+        );
+      },
+      filter: () => true,
+      useInteraction: interaction.mode(({ modeKey }) => ({ mode: modeKey })),
+    }),
+    createGroup({
+      keyPath: "href",
+      title: (t) => t("search.mode.help.group.help.title"),
+      useOptions() {
+        const t = useScopedI18n("search.mode.help.group.help.option");
+
+        return [
+          {
+            label: t("documentation.label"),
+            icon: IconBook2,
+            href: "https://homarr.dev/docs/getting-started/",
+          },
+          {
+            label: t("submitIssue.label"),
+            icon: IconBrandGithub,
+            href: "https://github.com/ajnart/homarr/issues/new/choose",
+          },
+          {
+            label: t("discord.label"),
+            icon: IconBrandDiscord,
+            href: "https://discord.com/invite/aCsmEV5RgA",
+          },
+        ];
+      },
+      component: (props) => (
+        <Group px="md" py="xs" w="100%" wrap="nowrap" align="center">
+          <props.icon />
+          <Text>{props.label}</Text>
+        </Group>
+      ),
+      filter: () => true,
+      useInteraction: interaction.link(({ href }) => ({ href })),
+    }),
+  ],
+} satisfies SearchMode;
+
+export const searchModes = [...searchModesWithoutHelp, helpMode] as const;