haeaeae/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): mount the shared super search bar in the processor shell

Browse Source 
Generalize SuperSearch to accept a results provider (plus placeholder,
hint and input id), and give the portal its own provider over the
sidebar's flavor-aware nav destinations. The bar replaces the ⌘K
SearchModal — SuperSearch registers its own shortcut — so the modal,
its stories, the GlobalShortcuts handler and the UIContext search
state are removed.
This commit is contained in:
Reece
2026-07-15 16:30:05 +01:00
parent c1b41e421f
commit 7dfe33de8d
13 changed files with 154 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/editor/public/locales/en-GB/translation.toml
+1 -5
View File
@@ -7896,14 +7896,10 @@ description = "Pipeline runs, deploys and agent events will appear here."
title = "Nothing here yet"
[portal.search]
ariaLabel = "Search"
goTo = "Go to"
hint = "Type to jump to any portal page"
placeholder = "Search the portal…"
[portal.search.empty]
noMatches = "No matches for \"{{query}}\""
noMatchesDescription = "Try a different keyword."
[portal.settings.groups]
admin = "Admin"
frontend/editor/public/locales/en-US/translation.toml
+1 -5
View File
@@ -7986,14 +7986,10 @@ description = "Pipeline runs, deploys and agent events will appear here."
title = "Nothing here yet"
[portal.search]
ariaLabel = "Search"
goTo = "Go to"
hint = "Type to jump to any portal page"
placeholder = "Search the portal…"
[portal.search.empty]
noMatches = "No matches for \"{{query}}\""
noMatchesDescription = "Try a different keyword."
[portal.settings.groups]
admin = "Admin"
frontend/editor/src/core/components/shared/superSearch/SuperSearch.tsx
+42 -17
View File
@@ -13,7 +13,11 @@ import { Button } from "@app/ui/Button";
import { TextInput } from "@app/components/shared/TextInput";
import LocalIcon from "@app/components/shared/LocalIcon";
import { isMacLike } from "@app/utils/hotkeys";
import { useSuperSearch, SuperSearchResult } from "@app/hooks/useSuperSearch";
import {
useSuperSearch,
SuperSearchResult,
type UseSuperSearchResult,
} from "@app/hooks/useSuperSearch";
import "@app/components/shared/superSearch/SuperSearch.css";
interface DropdownRect {
@@ -22,15 +26,35 @@ interface DropdownRect {
width: number;
}
interface SuperSearchProps {
/**
* Results provider, called as a hook — it MUST be referentially stable for
* the component's lifetime. Defaults to the editor's files/tools/settings/
* Processor provider; the portal passes its own destinations provider.
*/
useResults?: (query: string, active: boolean) => UseSuperSearchResult;
/** Override the input placeholder (defaults to the editor copy). */
placeholder?: string;
/** Override the empty-query hint line (defaults to the editor copy). */
hint?: string;
/** DOM id for the input — external focus helpers target it. */
inputId?: string;
}
/**
* Global "super search": a single entry point that searches across My Files,
* Tools, and Settings from the (now permanent) top bar. The results hang in a
* dropdown directly below the input; Cmd/Ctrl+K focuses and opens it.
* Global "super search": a single entry point that searches across the host
* app's destinations from a persistent bar. The results hang in a dropdown
* directly below the input; Cmd/Ctrl+K focuses and opens it.
*
* The dropdown is portalled to <body>: the workbench bar's inner wrapper sets
* The dropdown is portalled to <body>: the host bar's inner wrapper may set
* `overflow: hidden`, which would otherwise clip it.
*/
export default function SuperSearch() {
export default function SuperSearch({
useResults = useSuperSearch,
placeholder,
hint,
inputId = "super-search-input",
}: SuperSearchProps = {}) {
const { t } = useTranslation();
const [query, setQuery] = useState("");
const [open, setOpen] = useState(false);
@@ -41,7 +65,7 @@ export default function SuperSearch() {
const containerRef = useRef<HTMLDivElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const { groups, flatResults, loadingFiles } = useSuperSearch(query, open);
const { groups, flatResults, loadingFiles } = useResults(query, open);
const trimmed = query.trim();
const hasQuery = trimmed.length > 0;
@@ -166,10 +190,11 @@ export default function SuperSearch() {
>
{!hasQuery && (
<div className="super-search-empty">
{t(
"superSearch.hint",
"Type to search across your files, tools and settings",
)}
{hint ??
t(
"superSearch.hint",
"Type to search across your files, tools and settings",
)}
</div>
)}
@@ -229,15 +254,15 @@ export default function SuperSearch() {
return (
<div className="super-search" ref={containerRef} onKeyDown={handleKeyDown}>
<TextInput
id="super-search-input"
name="super-search-input"
id={inputId}
name={inputId}
ref={inputRef}
value={query}
onChange={setQuery}
placeholder={t(
"superSearch.placeholder",
"Search files, tools and settings…",
)}
placeholder={
placeholder ??
t("superSearch.placeholder", "Search files, tools and settings…")
}
icon={
<LocalIcon icon="search-rounded" width="1.1rem" height="1.1rem" />
}
frontend/editor/src/core/hooks/useSuperSearch.ts
+3 -2
View File
@@ -28,7 +28,8 @@ export type SuperSearchGroupId = "files" | "tools" | "settings" | "processor";
export interface SuperSearchResult {
/** Stable unique key across all groups. */
key: string;
group: SuperSearchGroupId;
/** Group id — the editor uses SuperSearchGroupId; other hosts use their own. */
group: string;
title: string;
subtitle?: string;
/** LocalIcon name (files/settings); tools provide a React node via `icon`. */
@@ -39,7 +40,7 @@ export interface SuperSearchResult {
}
export interface SuperSearchGroup {
id: SuperSearchGroupId;
id: string;
label: string;
results: SuperSearchResult[];
}
frontend/editor/src/portal/components/AppShell.tsx
+4 -2
View File
@@ -1,17 +1,19 @@
import type { ReactNode } from "react";
import { Sidebar } from "@portal/components/Sidebar";
import { PortalSearchBar } from "@portal/components/PortalSearchBar";
import "@portal/components/AppShell.css";
/**
* Two-column layout: fixed-width sidebar on the left, a scrolling main column on
* the right. The Sidebar reads its state from context, so this shell stays
* prop-free.
* the right (topped by the global search bar). The Sidebar reads its state from
* context, so this shell stays prop-free.
*/
export function AppShell({ children }: { children: ReactNode }) {
return (
<div className="portal-shell">
<Sidebar />
<div className="portal-shell__main">
<PortalSearchBar />
<main className="portal-shell__view">{children}</main>
</div>
</div>
frontend/editor/src/portal/components/PortalChrome.tsx
+5 -36
View File
@@ -1,39 +1,10 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider";
import { ErrorBoundary } from "@portal/components/ErrorBoundary";
import { useUI } from "@portal/contexts/UIContext";
import { AppShell } from "@portal/components/AppShell";
import { SearchModal } from "@portal/components/SearchModal";
import { PortalSettingsHost } from "@portal/components/PortalSettingsHost";
import { ViewRouter } from "@portal/ViewRouter";
/**
* Global keyboard shortcuts. Lives below the UIProvider so it can dispatch into
* the overlay state. Currently just ⌘K / Ctrl+K to toggle the search palette.
*/
function GlobalShortcuts() {
const { toggleSearch, closeSearch } = useUI();
useEffect(() => {
function onKey(e: KeyboardEvent) {
const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
if (isCmdK) {
e.preventDefault();
toggleSearch();
return;
}
if (e.key === "Escape") {
closeSearch();
}
}
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [toggleSearch, closeSearch]);
return null;
}
/**
* The routed view, wrapped in an error boundary so a single view crashing can't
* white-screen the portal (the shell + nav stay alive). Keyed by route so
@@ -49,23 +20,21 @@ function RoutedContent() {
}
/**
* The flavor-agnostic portal chrome: the shell (sidebar + header + routed view)
* plus the global overlays that every flavor shares. Requires only the Tier and
* UI contexts above it — both flavors provide those. Flavor-specific overlays
* (e.g. the self-hosted account-link modal) are mounted by PortalProviders, not
* here.
* The flavor-agnostic portal chrome: the shell (sidebar + search bar + routed
* view) plus the global overlays that every flavor shares. Requires only the
* Tier and UI contexts above it — both flavors provide those. Flavor-specific
* overlays (e.g. the self-hosted account-link modal) are mounted by
* PortalProviders, not here.
*/
export function PortalChrome() {
return (
<>
<GlobalShortcuts />
{/* The pipeline builder reads the tool registry to list and configure operations. */}
<ToolRegistryProvider>
<AppShell>
<RoutedContent />
</AppShell>
</ToolRegistryProvider>
<SearchModal />
<PortalSettingsHost />
</>
);
frontend/editor/src/portal/components/PortalSearchBar.css
+11
View File
@@ -0,0 +1,11 @@
/* Slim strip at the top of the main column hosting the shared search bar. */
.portal-searchbar {
display: flex;
justify-content: center;
padding: var(--space-2) var(--space-3) 0;
}
.portal-searchbar .super-search {
width: 100%;
max-width: 34rem;
}
frontend/editor/src/portal/components/PortalSearchBar.tsx
+23
View File
@@ -0,0 +1,23 @@
import { useTranslation } from "react-i18next";
import SuperSearch from "@app/components/shared/superSearch/SuperSearch";
import { usePortalSearchResults } from "@portal/hooks/usePortalSearchResults";
import "@portal/components/PortalSearchBar.css";
/**
* The portal face of the global super search — the same bar the editor's
* workbench shows, fed by the portal's destinations provider. Cmd/Ctrl+K
* focuses it (the bar registers its own shortcut).
*/
export function PortalSearchBar() {
const { t } = useTranslation();
return (
<div className="portal-searchbar">
<SuperSearch
useResults={usePortalSearchResults}
placeholder={t("portal.search.placeholder", "Search the portal…")}
hint={t("portal.search.hint", "Type to jump to any portal page")}
inputId="portal-search-input"
/>
</div>
);
}
frontend/editor/src/portal/components/SearchModal.css
-74
View File
@@ -1,74 +0,0 @@
.portal-search__input-row {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.25rem 0.25rem 0.75rem;
border-bottom: 1px solid var(--color-border-light);
color: var(--color-text-4);
}
.portal-search__input {
flex: 1 1 auto;
font: inherit;
font-size: 0.9375rem;
background: transparent;
border: none;
outline: none;
color: var(--color-text-1);
}
.portal-search__input::placeholder {
color: var(--color-text-placeholder);
}
.portal-search__esc {
font-family: var(--font-mono);
font-size: 0.6875rem;
padding: 0.0625rem 0.375rem;
border-radius: var(--radius-xs);
background: var(--color-bg-muted);
color: var(--color-text-4);
}
.portal-search__results {
padding-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-height: 24rem;
overflow-y: auto;
}
.portal-search__group-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-section-label);
padding: 0 0.5rem 0.375rem;
}
.portal-search__item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.625rem;
border-radius: var(--radius-sm);
color: var(--color-text-2);
font-size: 0.8125rem;
text-align: left;
}
.portal-search__item:hover {
background: var(--color-bg-hover);
}
.portal-search__item-hint {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--color-text-5);
}
.portal-search__item--active {
background: var(--color-bg-hover);
}
frontend/editor/src/portal/components/SearchModal.stories.tsx
-41
View File
@@ -1,41 +0,0 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { useEffect } from "react";
import { http, HttpResponse } from "msw";
import { SearchModal } from "@portal/components/SearchModal";
import { useUI } from "@portal/contexts/UIContext";
function ForceOpen() {
const { openSearch } = useUI();
useEffect(() => {
openSearch();
}, [openSearch]);
return null;
}
const meta: Meta<typeof SearchModal> = {
title: "Portal/Header/SearchModal",
component: SearchModal,
parameters: { layout: "fullscreen" },
decorators: [
(S) => (
<div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
<ForceOpen />
<S />
</div>
),
],
};
export default meta;
type Story = StoryObj<typeof SearchModal>;
export const Default: Story = {};
export const EmptyCatalogue: Story = {
parameters: {
msw: {
handlers: [
http.get("/v1/search/quick-actions", () => HttpResponse.json([])),
],
},
},
};
frontend/editor/src/portal/components/SearchModal.tsx
-156
View File
@@ -1,156 +0,0 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Button, EmptyState, Modal } from "@app/ui";
import { useTranslation } from "react-i18next";
import { rankByFuzzy } from "@app/utils/fuzzySearch";
import { useUI } from "@portal/contexts/UIContext";
import { useView, type ViewId } from "@portal/contexts/ViewContext";
import {
GROUP_PRIMARY,
GROUP_OPERATIONAL,
GROUP_PLATFORM,
type NavEntry,
} from "@portal/components/sidebarGroups";
import { SearchIcon } from "@portal/components/icons";
import "@portal/components/SearchModal.css";
/**
* The portal's ⌘K palette — the portal face of the global super search. It
* searches the portal's own destinations (the same flavor-aware nav set the
* sidebar shows, plus the editor) and navigates on select; the editor's top-bar
* search is the same idea pointed at files/tools/settings/Processor.
*/
export function SearchModal() {
const { t } = useTranslation();
const { searchOpen, closeSearch } = useUI();
const { setActiveView } = useView();
const inputRef = useRef<HTMLInputElement | null>(null);
const [query, setQuery] = useState("");
const [highlight, setHighlight] = useState(0);
useEffect(() => {
if (searchOpen) {
setQuery("");
setHighlight(0);
const timer = setTimeout(() => inputRef.current?.focus(), 0);
return () => clearTimeout(timer);
}
return undefined;
}, [searchOpen]);
// Every destination the palette can jump to: the sidebar's nav groups (a
// flavor seam — saas ships a reduced set) plus the editor app itself.
const entries = useMemo<NavEntry[]>(
() => [
...GROUP_PRIMARY,
...GROUP_OPERATIONAL,
...GROUP_PLATFORM,
{ id: "editor" as ViewId, icon: null },
],
[],
);
const results = useMemo(() => {
const q = query.trim();
if (!q) return entries;
return rankByFuzzy(entries, q, [
(e) => t(`portal.nav.${e.id}`),
(e) => e.id,
]).map(({ item }) => item);
}, [entries, query, t]);
useEffect(() => {
setHighlight((h) =>
results.length === 0 ? 0 : Math.min(h, results.length - 1),
);
}, [results.length]);
const select = (entry: NavEntry | undefined) => {
if (!entry) return;
closeSearch();
if (entry.externalUrl) {
window.open(entry.externalUrl, "_blank", "noopener,noreferrer");
return;
}
setActiveView(entry.id);
};
const onKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "ArrowDown") {
e.preventDefault();
setHighlight((h) => Math.min(h + 1, results.length - 1));
} else if (e.key === "ArrowUp") {
e.preventDefault();
setHighlight((h) => Math.max(h - 1, 0));
} else if (e.key === "Enter") {
e.preventDefault();
select(results[highlight]);
}
};
return (
<Modal
open={searchOpen}
onClose={closeSearch}
width="lg"
ariaLabel={t("portal.search.ariaLabel")}
>
<div className="portal-search">
<div className="portal-search__input-row">
<SearchIcon size={16} />
<input
ref={inputRef}
value={query}
onChange={(e) => {
setQuery(e.target.value);
setHighlight(0);
}}
onKeyDown={onKeyDown}
placeholder={t("portal.search.placeholder")}
aria-label={t("portal.search.ariaLabel")}
className="portal-search__input"
autoComplete="off"
spellCheck={false}
/>
<span className="portal-search__esc" aria-hidden>
ESC
</span>
</div>
<div className="portal-search__results">
{results.length === 0 ? (
<EmptyState
size="compact"
title={t("portal.search.empty.noMatches", {
query: query.trim(),
})}
description={t("portal.search.empty.noMatchesDescription")}
/>
) : (
<div className="portal-search__group">
<div className="portal-search__group-label">
{t("portal.search.goTo")}
</div>
{results.map((entry, i) => (
<Button
key={entry.id}
variant="tertiary"
justify="start"
fullWidth
className={`portal-search__item${
i === highlight ? " portal-search__item--active" : ""
}`}
onClick={() => select(entry)}
onMouseEnter={() => setHighlight(i)}
>
<span className="portal-search__item-label">
{t(`portal.nav.${entry.id}`)}
</span>
</Button>
))}
</div>
)}
</div>
</div>
</Modal>
);
}
frontend/editor/src/portal/contexts/UIContext.tsx
-12
View File
@@ -7,11 +7,6 @@ import {
} from "react";
interface UIContextValue {
searchOpen: boolean;
openSearch: () => void;
closeSearch: () => void;
toggleSearch: () => void;
assistantOpen: boolean;
openAssistant: () => void;
closeAssistant: () => void;
@@ -47,7 +42,6 @@ interface UIContextValue {
const UIContext = createContext<UIContextValue | null>(null);
export function UIProvider({ children }: { children: ReactNode }) {
const [searchOpen, setSearchOpen] = useState(false);
const [assistantOpen, setAssistantOpen] = useState(false);
const [settingsOpen, setSettingsOpen] = useState(false);
const [settingsInitialSection, setSettingsInitialSection] = useState<
@@ -63,11 +57,6 @@ export function UIProvider({ children }: { children: ReactNode }) {
const value = useMemo<UIContextValue>(
() => ({
searchOpen,
openSearch: () => setSearchOpen(true),
closeSearch: () => setSearchOpen(false),
toggleSearch: () => setSearchOpen((o) => !o),
assistantOpen,
openAssistant: () => setAssistantOpen(true),
closeAssistant: () => setAssistantOpen(false),
@@ -108,7 +97,6 @@ export function UIProvider({ children }: { children: ReactNode }) {
},
}),
[
searchOpen,
assistantOpen,
settingsOpen,
settingsInitialSection,
frontend/editor/src/portal/hooks/usePortalSearchResults.ts
+64
View File
@@ -0,0 +1,64 @@
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { rankByFuzzy } from "@app/utils/fuzzySearch";
import type { UseSuperSearchResult } from "@app/hooks/useSuperSearch";
import { useView, type ViewId } from "@portal/contexts/ViewContext";
import {
GROUP_PRIMARY,
GROUP_OPERATIONAL,
GROUP_PLATFORM,
type NavEntry,
} from "@portal/components/sidebarGroups";
/**
* The portal's results provider for the shared SuperSearch bar: the sidebar's
* flavor-aware destinations plus the editor app. The editor's provider is the
* files/tools/settings/Processor aggregate; this is its portal counterpart.
*/
export function usePortalSearchResults(
query: string,
_active: boolean,
): UseSuperSearchResult {
const { t } = useTranslation();
const { setActiveView } = useView();
const entries = useMemo<NavEntry[]>(
() => [
...GROUP_PRIMARY,
...GROUP_OPERATIONAL,
...GROUP_PLATFORM,
{ id: "editor" as ViewId, icon: null },
],
[],
);
const groups = useMemo(() => {
const q = query.trim();
if (!q) return [];
const results = rankByFuzzy(entries, q, [
(e) => t(`portal.nav.${e.id}`),
(e) => e.id,
]).map(({ item, score }) => ({
key: `nav:${item.id}`,
group: "nav",
title: t(`portal.nav.${item.id}`),
icon: item.icon ?? undefined,
iconName: item.icon ? undefined : "search-rounded",
score,
onSelect: () => {
if (item.externalUrl) {
window.open(item.externalUrl, "_blank", "noopener,noreferrer");
return;
}
setActiveView(item.id);
},
}));
return results.length > 0
? [{ id: "nav", label: t("portal.search.goTo", "Go to"), results }]
: [];
}, [entries, query, t, setActiveView]);
const flatResults = useMemo(() => groups.flatMap((g) => g.results), [groups]);
return { groups, flatResults, loadingFiles: false };
}