feat: command prompt (#177)

feat: command palette

Author: jrasm91

apps/api.immich.app/routes/(docs)/+layout.ts

@@ -1,12 +1,5 @@
-import { goto } from '$app/navigation';
-import { loadOpenApi } from '$lib/api/services/open-api';
 import type { LayoutLoad } from './$types';
 
-export const load = (async ({ fetch }) => {
-  try {
-    await loadOpenApi(fetch);
-  } catch (error) {
-    console.log('Failed to load open-api specification', error);
-    await goto('/');
-  }
+export const load = (async ({ parent }) => {
+  await parent();
 }) satisfies LayoutLoad;

apps/api.immich.app/routes/(docs)/permissions/+page.svelte

@@ -14,7 +14,6 @@
 >
   <Text>
     Most of the <Link href={ApiPage.Endpoints}>endpoints</Link> require a specific permission to access. You can find the
-    required permission for each endpoint on the <Link href={ApiPage.Endpoints}>endpoints</Link> overview page, as well as
-    each endpoint's detail page.
+    required permission for each endpoint in each endpoint's detail page, towards the top.
   </Text>
 </ApiPageContent>

apps/api.immich.app/routes/+layout.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
+  import { getOpenApi } from '$lib/api/services/open-api';
   import '$lib/app.css';
-  import { initializeTheme } from '@immich/ui';
+  import CommandPalette from '$lib/components/CommandPalette.svelte';
+  import { commandPaletteManager } from '$lib/services/command-palette-manager.svelte';
+  import { ApiPage } from '$lib/utils/api';
+  import { initializeTheme, onThemeChange, Theme, theme } from '@immich/ui';
+  import { mdiApi, mdiScriptText, mdiSend, mdiTag, mdiTagMultiple } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
 
   interface Props {
@@ -30,6 +35,130 @@
     }
     window.scrollTo({ top: 0, behavior: 'auto' });
   });
+
+  const handleToggleTheme = () => {
+    theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+    onThemeChange();
+  };
+
+  const asText = (...items: unknown[]) => {
+    return items
+      .filter((item) => item !== undefined && item !== null)
+      .map((items) => String(items))
+      .join('|')
+      .toLowerCase();
+  };
+
+  const { tags, models } = getOpenApi();
+
+  commandPaletteManager.reset();
+
+  for (const tag of tags) {
+    commandPaletteManager.addCommands({
+      icon: mdiTagMultiple,
+      iconClass: 'text-pink-700 dark:text-pink-200',
+      type: 'Tag',
+      title: tag.name,
+      href: tag.href,
+      text: asText(tag.name),
+    });
+
+    for (const endpoint of tag.endpoints) {
+      commandPaletteManager.addCommands({
+        icon: mdiApi,
+        type: 'Endpoint',
+        iconClass: 'text-indigo-700 dark:text-indigo-200',
+        title: endpoint.operationId,
+        description: endpoint.description,
+        href: endpoint.href,
+        text: asText(endpoint.operationId, endpoint.name, endpoint.description),
+      });
+    }
+  }
+
+  for (const model of models) {
+    commandPaletteManager.addCommands({
+      icon: mdiTag,
+      iconClass: 'text-violet-700 dark:text-violet-200',
+      type: 'Model',
+      title: model.name,
+      description: model.description,
+      href: model.href,
+      text: asText(model.name, model.title, model.description),
+    });
+  }
+
+  commandPaletteManager.addCommands(
+    [
+      {
+        title: 'Introduction',
+        description: 'Overview of Immich API',
+        href: ApiPage.Introduction,
+        text: asText('introduction'),
+      },
+      {
+        title: 'Getting Started',
+        description: 'Learn how to get started with Immich API',
+        href: ApiPage.GettingStarted,
+        text: asText('getting', 'started'),
+      },
+      {
+        title: 'Authentication',
+        description: 'Learn how authentication works in the Immich API',
+        href: ApiPage.Authentication,
+        text: asText('authentication', 'authorization'),
+      },
+      {
+        title: 'Permissions',
+        description: 'Learn how permissions work with the Immich API',
+        href: ApiPage.Permissions,
+        text: asText('permissions'),
+      },
+      {
+        title: 'SDK',
+        description: 'Learn about the @immich/sdk generated client',
+        href: ApiPage.Sdk,
+        text: asText('@immich/sdk'),
+      },
+      {
+        title: 'Endpoints',
+        description: 'A list of all the endpoints in the Immich API',
+        href: ApiPage.Endpoints,
+        text: asText('overview', 'endpoints'),
+      },
+      {
+        title: 'Models',
+        description: 'A list of all the models in the Immich API',
+        href: ApiPage.Models,
+        text: asText('overview', 'models'),
+      },
+    ].map((item) => ({
+      icon: mdiScriptText,
+      iconClass: 'text-teal-800 dark:text-teal-200',
+      type: 'Page',
+      ...item,
+    })),
+  );
+
+  commandPaletteManager.addCommands(
+    [
+      {
+        title: 'Toggle theme',
+        description: 'Toggle between light and dark theme',
+        onclick: () => handleToggleTheme(),
+        text: asText('theme', 'toggle', 'dark', 'light'),
+      },
+    ].map((item) => ({
+      icon: mdiSend,
+      iconClass: 'text-purple-800 dark:text-purple-200',
+      type: 'Action',
+      ...item,
+    })),
+  );
+
+  commandPaletteManager.enable();
 </script>
 
+<CommandPalette />
+
 {@render children?.()}

apps/api.immich.app/routes/+layout.ts

@@ -1 +1,14 @@
+import { goto } from '$app/navigation';
+import { loadOpenApi } from '$lib/api/services/open-api';
+import type { LayoutLoad } from './$types';
+
 export const ssr = false;
+
+export const load = (async ({ fetch }) => {
+  try {
+    await loadOpenApi(fetch);
+  } catch (error) {
+    console.log('Failed to load open-api specification', error);
+    await goto('/');
+  }
+}) satisfies LayoutLoad;