Search

// From packages/spotlight/src/components/spotlight.tsx:53
<MantineSpotlight.Root
  shortcut={hotkeys.openSpotlight} // Ctrl+K or Cmd+K
  yOffset={8}
  onSpotlightClose={() => {
    setMode(defaultMode);
    setChildrenOptions(null);
  }}
>

// From packages/spotlight/src/components/spotlight.tsx:65
onQueryChange={(query) => {
  // Detect mode character
  const modeToActivate = searchModes.find(
    mode => mode.character === query
  );
  
  if (modeToActivate) {
    setMode(modeToActivate.modeKey);
    setQuery(""); // Clear the mode character
  } else {
    setQuery(query);
  }
}}

// From packages/integrations/src/base/searchable-integration.ts
export interface SearchableIntegration {
  searchAsync(query: string, options?: SearchOptions): Promise<SearchResult[]>;
}

interface SearchResult {
  id: string;
  title: string;
  description?: string;
  imageUrl?: string;
  type: "movie" | "tv" | "music" | "other";
  actions: SearchAction[];
}

interface SearchAction {
  label: string;
  icon: TablerIcon;
  action: () => Promise<void>;
}

// From packages/spotlight/src/components/actions/groups/action-group.tsx
<SpotlightActionGroups
  query={query}
  groups={groups}
  setMode={setMode}
  setChildrenOptions={setChildrenOptions}
/>

Query: "pls"
Result: [P]ex Media [L]i[S]erver

// From packages/spotlight/src/components/actions/children-actions.tsx
<SpotlightChildrenActions
  childrenOptions={childrenOptions}
  query={query}
  setChildrenOptions={setChildrenOptions}
/>

// From packages/spotlight/src/components/spotlight.tsx:76
<MantineSpotlight.Search
  placeholder={`${t("search.placeholder")}...`}
  leftSection={
    <Group>
      <IconSearch stroke={1.5} />
      {mode !== "home" ? <Kbd>{mode.character}</Kbd> : null}
    </Group>
  }
  rightSection={
    mode === "home" ? (
      <ActionIcon onClick={() => setMode("help")}>
        <IconQuestionMark />
      </ActionIcon>
    ) : (
      <ActionIcon onClick={() => setMode("home")}>
        <IconX />
      </ActionIcon>
    )
  }
/>

// From packages/spotlight/src/components/no-results.tsx
export const NoResults = () => (
  <Stack align="center" p="xl">
    <IconSearch size={48} stroke={1} opacity={0.3} />
    <Text size="sm" c="dimmed">
      No results found
    </Text>
    <Text size="xs" c="dimmed">
      Try a different search term or press ? for help
    </Text>
  </Stack>
);

// From packages/definitions/src/hotkeys.ts
const hotkeys = {
  openSpotlight: ["mod+K"], // Ctrl/Cmd + K
  // Can be customized in settings
};