Skip to content

Persist search sheet state across close/reopen #5534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FadhlanR wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Persist search sheet state across close/reopen #5534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4677447
Persist search sheet state across close/reopen
FadhlanR Jul 17, 2026
ee03547
Fix backtracking assertions in persisted search sheet
FadhlanR Jul 19, 2026
faf77a3
Seed search sheet results on reopen and persist scroll position
FadhlanR Jul 20, 2026
04c73c6
Update search-sheet blur tests to expect persistence
FadhlanR Jul 20, 2026
37a7867
Report loading across the deferred search start
FadhlanR Jul 20, 2026
adea530
Rework search-sheet persistence to a service-owned resource
FadhlanR Jul 21, 2026
e42d46b
Decouple search panel from sheet service; fix scroll restore
FadhlanR Jul 21, 2026
a423790
Hide search results until the reopen scroll restore sticks
FadhlanR Jul 22, 2026
bf847b7
Reopen filter-only searches to their results view
FadhlanR Jul 23, 2026
c4792c8
Merge origin/main; migrate search-sheet-state to SessionService
FadhlanR Jul 23, 2026
bf76d9c
Fix import order after SessionService rename
FadhlanR Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion packages/host/app/components/operator-mode/submode-layout.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import type AiAssistantPanelService from '../../services/ai-assistant-panel-serv
import type MatrixService from '../../services/matrix-service';
import type OperatorModeStateService from '../../services/operator-mode-state-service';
import type RecentCardsService from '../../services/recent-cards-service';
import type SearchSheetStateService from '../../services/search-sheet-state';
import type StoreService from '../../services/store';
import type { SearchSheetMode } from '../search-sheet';
import type { Submode } from '../submode-switcher';
Expand Down Expand Up @@ -137,6 +138,8 @@ export default class SubmodeLayout extends Component<Signature> {
@service declare private store: StoreService;
@service declare private aiAssistantPanelService: AiAssistantPanelService;
@service declare private recentCardsService: RecentCardsService;
@service('search-sheet-state')
declare private searchSheetState: SearchSheetStateService;

private searchElement: HTMLElement | null = null;
private suppressSearchClose = false;
Expand Down Expand Up @@ -346,7 +349,15 @@ export default class SubmodeLayout extends Component<Signature> {

@action private openSearchSheetToPrompt() {
if (this.searchSheetMode === SearchSheetModes.Closed) {
this.searchSheetMode = SearchSheetModes.SearchPrompt;
// Reopen straight to the results view when a search is persisted, so the
// restored results are shown immediately rather than the compact prompt.
// Gate on the service's own `hasActiveSearch` (term OR type OR realm) —
// the same predicate that produces `mainQuery` — so a filter-only search
// (e.g. code mode's "Find instances", which sets a type with no term)
// reopens to its live results rather than the recents-only compact prompt.
this.searchSheetMode = this.searchSheetState.hasActiveSearch
? SearchSheetModes.SearchResults
: SearchSheetModes.SearchPrompt;
Comment on lines +352 to +360

@habdelra habdelra Jul 22, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Claude Code 🤖] Reopen gate misses filter-only searches — confirms the Codex bot's flag on this line, verified against the code path.

The claim. Reopening a filter-only persisted search (a type or realm selected, empty term) sends the sheet to the compact prompt instead of the results view, so the restored results stay hidden until the user changes the search.

The mechanism. This gate keys on this.searchSheetState.searchKey.trim(), but the service treats a search as active when there's a term or a type or a realm — see hasActiveSearch in services/search-sheet-state.ts, which is exactly what drives whether mainQuery (and so the resource) produces results. Concrete path: code mode's "Find instances" calls openSearch('', ref) (detail-panel.gts → searchForInstances) → doExternallyTriggeredSearch('', ref) in search-sheet/index.gts sets searchKey = '' and selectedTypes = [ref]. A plain click-outside close keeps that state; reopening via the search button lands here → ''.trim() is falsy → SearchSheetModes.SearchPrompt. Prompt ⇒ isCompact is true, and in sheet-results.gts the main-query sections render only in the non-compact {{else}} branch — the {{#if @isCompact}} branch shows recents only. The type-filtered rows are live in the resource but never shown.

The fix. Gate on the service's own notion of an active search — it already covers term / URL / type / realm in one place, so the check can't drift the way a term-only re-derivation here already has. Make hasActiveSearch public (drop private on the getter) and:

Suggested change
// Reopen straight to the results view when a search is persisted, so the
// restored results are shown immediately rather than the compact prompt.
this.searchSheetMode = this.searchSheetState.searchKey.trim()
? SearchSheetModes.SearchResults
: SearchSheetModes.SearchPrompt;
// Reopen straight to the results view when a search is persisted, so the
// restored results are shown immediately rather than the compact prompt.
this.searchSheetMode = this.searchSheetState.hasActiveSearch
? SearchSheetModes.SearchResults
: SearchSheetModes.SearchPrompt;

hasActiveSearch is also true for a URL key (it's non-empty), so the URL-paste reopen — which likewise only renders its section in the results view — keeps working; the existing acceptance test for that stays green.

Scope. Regression in this PR's new reopen behavior; should-fix here (small, and the single-source gate stops the term-vs-active-search drift from recurring). Not a crasher — blocking is your call.

Generated by Claude Code

}

this.searchElement?.focus();
Expand Down
192 changes: 132 additions & 60 deletions packages/host/app/components/search-sheet/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { array } from '@ember/helper';
import { on } from '@ember/modifier';
import { action } from '@ember/object';
import type Owner from '@ember/owner';
import { debounce } from '@ember/runloop';
import { cancel, debounce } from '@ember/runloop';
import { service } from '@ember/service';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
import { modifier } from 'ember-modifier';
Expand All @@ -20,13 +20,11 @@ import {
import { eq } from '@cardstack/boxel-ui/helpers';
import { IconSearch } from '@cardstack/boxel-ui/icons';

import {
type Filter,
type ResolvedCodeRef,
baseRef,
} from '@cardstack/runtime-common';
import type { ResolvedCodeRef } from '@cardstack/runtime-common';

import type RealmServerService from '@cardstack/host/services/realm-server';
import type SearchSheetStateService from '@cardstack/host/services/search-sheet-state';
import { SEARCH_SHEET_BASE_FILTER } from '@cardstack/host/services/search-sheet-state';
import {
isURLSearchKey,
resolveSearchKeyAsURL,
Expand All @@ -35,6 +33,7 @@ import {
import SearchPanel from '../search/panel';

import type StoreService from '../../services/store';
import type { SortOption } from '../search/constants';

export const SearchSheetModes = {
Closed: 'closed',
Expand Down Expand Up @@ -79,19 +78,32 @@ const repositionDropdownsOnTransitionEnd = modifier((element: Element) => {
element.removeEventListener('transitionend', handler as EventListener);
});

// The sheet searches everything the index knows — cards (including specs,
// which the default `not: specRef` query path excludes), field instances, and
// files. BaseDef is the common ancestor stamped on both instance and file type
// chains, so this one ref spans all kinds; `scope: 'all'` rides the wire
// alongside (see `searchScopeForOptions`).
const BASE_FILTER: Filter = { type: baseRef };

export default class SearchSheet extends Component<Signature> {
@tracked private searchKey = '';
@tracked private initialSelectedTypes: ResolvedCodeRef[] | undefined;

@service declare private realmServer: RealmServerService;
@service declare private store: StoreService;
@service('search-sheet-state')
declare private searchSheetState: SearchSheetStateService;

// The sheet's search state is held in the session-scoped service so it
// survives the close/reopen that unmounts this component's subtree.
private get searchKey() {
return this.searchSheetState.searchKey;
}
private set searchKey(value: string) {
this.searchSheetState.searchKey = value;
}

private get initialSelectedTypes(): ResolvedCodeRef[] | undefined {
return this.searchSheetState.selectedTypes;
}

private get initialSelectedRealms(): URL[] {
return this.searchSheetState.selectedRealms;
}

private get initialActiveSort(): SortOption | undefined {
return this.searchSheetState.activeSort;
}

constructor(owner: Owner, args: any) {
super(owner, args);
Expand Down Expand Up @@ -141,33 +153,54 @@ export default class SearchSheet extends Component<Signature> {

@action
private onBlur() {
// A plain close/blur keeps the search so reopening restores it; only an
// explicit Cancel (or Escape) resets.
this.args.onBlur();
if (this.args.mode === SearchSheetModes.Closed) {
this.resetState();
}
}

@action private handleCardSelect(selection: string | { realmURL: string }) {
if (typeof selection !== 'string') {
return;
}
this.resetState();
// Selecting a result keeps the search, so reopening returns to it.
this.args.onCardSelect(selection);
}

@action
private doExternallyTriggeredSearch(term: string, typeRef?: ResolvedCodeRef) {
// A triggered search starts clean: leftover state from a previously
// persisted search (realm scope, sort, scroll offset, a pending debounce)
// must not silently narrow, position, or overwrite it. Reset everything,
// then apply the trigger's own term and type. Bumping the epoch remounts a
// `SearchPanel` that's already mounted (the sheet was open), so its
// init-once filter display re-reads the freshly-reset state instead of
// showing stale chips over the correctly-rescoped search.
this.resetState();
this.searchKey = term;
this.initialSelectedTypes = typeRef ? [typeRef] : undefined;
this.searchSheetState.selectedTypes = typeRef ? [typeRef] : undefined;
this.searchSheetState.searchTriggerEpoch++;
}

// The pending 300ms debounce handle, kept so Cancel/Escape can cancel it —
// otherwise a keystroke within 300ms of a reset re-persists the cancelled
// term and reopens the sheet.
private pendingSearchKeyDebounce: ReturnType<typeof debounce> | undefined;

private resetState() {
this.searchKey = '';
this.initialSelectedTypes = undefined;
if (this.pendingSearchKeyDebounce) {
cancel(this.pendingSearchKeyDebounce);
this.pendingSearchKeyDebounce = undefined;
}
this.searchSheetState.resetState();
}

@action private debouncedSetSearchKey(searchKey: string) {
debounce(this, this.setSearchKey, searchKey, 300);
this.pendingSearchKeyDebounce = debounce(
this,
this.setSearchKey,
searchKey,
300,
);
}

@action
Expand All @@ -176,14 +209,34 @@ export default class SearchSheet extends Component<Signature> {
this.args.onSearch?.(searchKey);
}

@action private handleRealmChange(_selectedRealms: URL[]) {
@action private handleRealmChange(selectedRealms: URL[]) {
this.searchSheetState.selectedRealms = selectedRealms;
this.args.onFilterChange?.();
}

@action private handleTypeChange(_selectedTypes: ResolvedCodeRef[]) {
@action private handleTypeChange(selectedTypes: ResolvedCodeRef[]) {
this.searchSheetState.selectedTypes = selectedTypes;
this.args.onFilterChange?.();
}

@action private handleSortChange(option: SortOption) {
// Unlike realm/type changes, no `onFilterChange` here: the sort control only
// exists in the results view, so there's never a prompt→results expansion to
// trigger — just record the choice for persistence.
this.searchSheetState.activeSort = option;
}

// The panel is a controlled consumer here: it renders the session-scoped
// service's view id / scroll offset and reports changes back through these,
// so both survive the sheet's close/reopen.
@action private handleViewIdChange(id: string) {
this.searchSheetState.activeViewId = id;
}

@action private handleScrollTopChange(scrollTop: number) {
this.searchSheetState.resultsScrollTop = scrollTop;
}

@action private onSearchInputKeyDown(e: Event) {
let kbEvent = e as KeyboardEvent;
if (kbEvent.key === 'Escape') {
Expand Down Expand Up @@ -264,40 +317,59 @@ export default class SearchSheet extends Component<Signature> {
data-test-open-search-field
/>
{{else}}
<SearchPanel
@searchKey={{this.searchKey}}
@baseFilter={{BASE_FILTER}}
@initialSelectedTypes={{this.initialSelectedTypes}}
@onRealmChange={{this.handleRealmChange}}
@onTypeChange={{this.handleTypeChange}}
as |Bar Content|
>
<Bar
class='search-sheet__search-input-group'
@placeholder={{this.placeholderText}}
@state={{this.inputValidationState}}
@bottomTreatment={{this.inputBottomTreatment}}
@onFocus={{@onFocus}}
@onInput={{this.debouncedSetSearchKey}}
@onKeyDown={{this.onSearchInputKeyDown}}
@onInputInsertion={{@onInputInsertion}}
@autocomplete='off'
/>
<Content
class='search-sheet__content'
@isCompact={{this.isCompact}}
@handleSelect={{this.handleCardSelect}}
@adorn={{true}}
/>
<div class='footer'>
<div class='buttons'>
<Button
{{on 'click' this.onCancel}}
data-test-search-sheet-cancel-button
>Cancel</Button>
{{! Keyed on the trigger epoch so an externally-triggered search (which
bumps it) remounts the panel — the only way its init-once filter
display picks up the freshly-reset state while the sheet is already
open. A normal reopen doesn't bump the epoch, so it reuses the
panel. }}
{{#each
(array this.searchSheetState.searchTriggerEpoch) key='@identity'
as |_epoch|
}}
<SearchPanel
@searchKey={{this.searchKey}}
@baseFilter={{SEARCH_SHEET_BASE_FILTER}}
@initialSelectedTypes={{this.initialSelectedTypes}}
@initialSelectedRealms={{this.initialSelectedRealms}}
@initialActiveSort={{this.initialActiveSort}}
@onRealmChange={{this.handleRealmChange}}
@onTypeChange={{this.handleTypeChange}}
@onSortChange={{this.handleSortChange}}
as |Bar Content|
>
<Bar
class='search-sheet__search-input-group'
@placeholder={{this.placeholderText}}
@state={{this.inputValidationState}}
@bottomTreatment={{this.inputBottomTreatment}}
@onFocus={{@onFocus}}
@onInput={{this.debouncedSetSearchKey}}
@onKeyDown={{this.onSearchInputKeyDown}}
@onInputInsertion={{@onInputInsertion}}
@autocomplete='off'
/>
<Content
class='search-sheet__content'
@isCompact={{this.isCompact}}
@handleSelect={{this.handleCardSelect}}
@adorn={{true}}
@mainSearchResource={{this.searchSheetState.mainSearch}}
@viewId={{this.searchSheetState.activeViewId}}
@onViewIdChange={{this.handleViewIdChange}}
@pagination={{this.searchSheetState.pagination}}
@scrollTop={{this.searchSheetState.resultsScrollTop}}
@onScrollTopChange={{this.handleScrollTopChange}}
/>
<div class='footer'>
<div class='buttons'>
<Button
{{on 'click' this.onCancel}}
data-test-search-sheet-cancel-button
>Cancel</Button>
</div>
</div>
</div>
</SearchPanel>
</SearchPanel>
{{/each}}
{{/if}}
</div>
<style scoped>
Expand Down
Loading
Loading