Make search filters type-safe and config-driven

[Copilot]

Refactoring: Type-Safe and Maintainable Search Filters

Changes Implemented

1. Type Safety (models/index.ts)

Created strongly-typed filter system:

export type DocSearchFilterKey = 
  | 'types' | 'fields' | 'queries' 
  | 'mutations' | 'subscriptions' | 'directives';

export interface DocSearchFilter {
  key: DocSearchFilterKey;
  translationKey: string;
}

export const DOC_SEARCH_FILTERS: readonly DocSearchFilter[] = [
  { key: 'types', translationKey: 'DOCS_TYPES_TEXT' },
  { key: 'fields', translationKey: 'DOCS_FIELDS_TEXT' },
  // ... etc
] as const;

2. Translations Moved (default.json)

Moved all filter translation keys from en-US.json to default.json:

• DOCS_TYPES_TEXT, DOCS_FIELDS_TEXT, DOCS_QUERIES_TEXT
• DOCS_MUTATIONS_TEXT, DOCS_SUBSCRIPTIONS_TEXT, DOCS_FILTER_BY_TEXT

3. Config-Driven Template (doc-viewer.component.html)

Before (48 lines of duplicated code):

<button (click)="toggleSearchFilter('types')">
  {{ 'DOCS_TYPES_TEXT' | translate }}
</button>
<button (click)="toggleSearchFilter('fields')">
  {{ 'DOCS_FIELDS_TEXT' | translate }}
</button>
<!-- ... 4 more buttons ... -->

After (17 lines, single loop):

@for (filter of availableSearchFilters; track filter.key) {
  <button (click)="toggleSearchFilter(filter.key)">
    {{ filter.translationKey | translate }}
  </button>
}

4. Type-Safe Components

• doc-viewer.component.ts: Uses Set<DocSearchFilterKey> instead of Set<string>
• doc-viewer-search-results.component.ts: Uses typed filter parameter
• All method signatures use DocSearchFilterKey type

5. Updated Tests

• Added DocSearchFilterKey import to test files
• Updated test expectations to use typed Sets
• All tests remain passing with improved type safety

6. Style Adjustments (_doc-viewer.scss)

• Adjusted filter button padding from 5px 10px to 2px 5px for more compact appearance
• Changed button border from 1px solid to 0px for cleaner look
• Removed border-color transitions in hover and active states
• Removed font-weight: bold from active state for consistency
• Updated filter container margin from margin-top: 15px to margin: 10px 0

Benefits

✅ Type Safety: Compiler catches typos and invalid filter keys at build time

✅ Maintainability: Adding new filters only requires updating the DOC_SEARCH_FILTERS array

✅ DRY Principle: Reduced template code duplication from 48 lines to 17 lines (64% reduction)

✅ Single Source of Truth: Filter configuration centralized in one location

✅ Better i18n Structure: Translation keys properly organized in default.json

✅ Cleaner UI: More compact button styling with simplified visual states

✅ No Behavior Changes: Purely refactoring - no runtime behavior changes

Files Changed

• packages/altair-app/src/app/modules/altair/components/doc-viewer/models/index.ts - Added types and config
• packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts - Type-safe implementation
• packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.html - Config-driven template
• packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.ts - Typed filters
• packages/altair-app/src/scss/components/_doc-viewer.scss - Style adjustments
• packages/altair-app/src/assets/i18n/default.json - Added translations
• packages/altair-app/src/assets/i18n/en-US.json - Removed duplicate translations
• Test files updated with typed imports

Original prompt

in the docs viewer component, when searching, allow the ability to filter the search results to just types, fields, queries, mutations, subscriptions, or a combination of these

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[github-actions]

Visit the preview URL for this PR (updated for commit 87b10b7):

https://altair-gql--pr2993-copilot-add-search-f-ji7b6gt8.web.app

_{(expires Thu, 12 Feb 2026 22:32:57 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 02d6323d75a99e532a38922862e269d63351a6cf}

[imolorhe]

Suggested change

	margin-top: 15px;
	margin: 10px 0;

[Copilot]

Applied in commit 87b10b7. Changed container margin to margin: 10px 0 for better vertical spacing.

[imolorhe]

Suggested change

	padding: 5px 10px;
	padding: 2px 5px;

[Copilot]

Applied in commit 87b10b7. Reduced button padding to 2px 5px for a more compact appearance.

[imolorhe]

Suggested change

font-weight: bold;

[Copilot]

Applied in commit 87b10b7. Removed font-weight: bold from active state for consistency.

[imolorhe]

Suggested change

border-color: var(--secondary-color);

[Copilot]

Applied in commit 87b10b7. Removed border-color from active state for cleaner visual hierarchy.

[imolorhe]

Suggested change

border-color: var(--secondary-color);

[Copilot]

Applied in commit 87b10b7. Removed border-color from hover state to simplify the transition.

[imolorhe]

Suggested change

	border: 1px solid var(--theme-border-color);
	border: 0px;

[Copilot]

Applied in commit 87b10b7. Removed button border for a cleaner look.