[Aksel.nav.no] Ported over global search to app-router #3663
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…aesthetics and readability
…rity and maintainability
…erformance and data retrieval
… unnecessary logging
|
There was a problem hiding this comment.
Pull Request Overview
This PR ports the global search functionality to the new app‑router environment by moving data fetching and search logic to the server side with caching, and updates the design with a new Kbd component and illustrations.
- Re-implements global search components including provider, dialog, and actions with server-side caching.
- Ported and integrated the Kbd component with updated design details.
- Updated Sanity queries and header integration to support the new global search.
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| GlobalSearch.tsx | Adds the new GlobalSearch UI with provider, dialog, and related components. |
| GlobalSearch.fetch.ts | Implements server-side search data fetching with caching for 60 minutes and data sanitization. |
| GlobalSearch.button.tsx | Provides the global search button component with responsiveness. |
| GlobalSearch.results.tsx | Implements search results display, empty states, and preloading of the search index. |
| GlobalSearch.provider.tsx | Sets up context and state management for the search functionality, including keyboard handlers. |
| GlobalSearch.dialog.tsx | Implements the modal dialog for the search UI. |
| GlobalSearch.actions.ts | Implements search logic using Fuse for search matching and formatting results. |
| GlobalSearch.form.tsx | Implements the search input and clear/close interactions. |
| GlobalSearch.config.ts | Provides configuration for document types and search result types. |
| GlobalSearch.hit.tsx | Renders the search hit collections and individual links with thumbnails. |
| Kbd.tsx | Adds the Kbd component for keyboard shortcut display. |
| queries.ts | Updates Sanity queries to include all relevant article types for the search. |
| Umami.tsx / Header.tsx / layout.tsx | Minor integrations to ensure global search is correctly embedded in the header and overall layout. |
aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts
Outdated
Show resolved
Hide resolved
aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
KenAJoh
added a commit
that referenced
this pull request
Mar 18, 2025
* root layout * ✨ Added draftmode * ✨ Setup boilerplate * ✨ Setup grouping-dir * ✨ Implemented header * 💄 Made header sticky * 🔒 Content security policy updated * 🚚 Moved favicon to appdir * 🔥 restore old frontpage * 🚚 Moved sidebar to appdir * ✨ Implemented sidebar loading * ✨ Doc lyout * 🐛 Add id for skiplink * ✨ Added new footer * 💄 Move skiplink further away * 💄 Add more padding bottom sidebar * ✨ Refactor header and sidebar components for improved layout and structure * 📝 Uncomment some code * 🔥 Removed user server directive from component and layouts * 🐛 Center footer * 🐛 Re-added support for chromatic connect * 🔥 removed browser-token * Update aksel.nav.no/website/app/_ui/footer/Footer.tsx Co-authored-by: Copilot <[email protected]> * [Aksel.nav.no] Ported over global search to app-router (#3663) * 🚚 Moved search-code closer to app router * ✨ Added button and modal * ⚡ Initial loading for recent articles * ⚡ Query data from the server * ✨ Generates parsed search-results * ⚡ Added debounce * ✨ Render hits * ♻️ Limit articles for each field to 20 * 🐛 Revert form-layout to initial view * 🐛 Build searchindex before website * ✨ Pre-select text when re-opening search * ✨ Enhance global search UI with improved layout and styling * ✨ Refactor global search components to improve search functionality and UI * ✨ Improve global search functionality and UI responsiveness * ✨ Update global search UI and functionality with improved input handling and styling * ✨ Refactor global search dialog and add Kbd component for keyboard shortcuts * ⚡ removed reduntant suspense * ✨ Refactor global search components for improved styling and functionality * ✨ Refactor global search results rendering for improved performance and readability * ✨ Update global search dialog and form for improved styling and accessibility * ✨ Refactor global search components for improved layout and styling * ✨ Refactor GlobalSearchHitCollection for improved styling and accessibility * 🎨 Update global search configuration and styles for improved clarity and aesthetics * 🎨 Update layout and styles for global search components for improved aesthetics and readability * ✨ Refactor global search utilities and update styles for improved clarity and maintainability * 🔧 Refactor global search queries and implement caching for improved performance and data retrieval * ⚡ Preload cache for search * 🔧 Refactor fetchArticles function to improve caching logic and remove unnecessary logging * 🔥 Removed user server directive from component * 🔥 Removed comments * ⚡ Explicitly declare server-only component * Update aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts Co-authored-by: Copilot <[email protected]> * Update aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts Co-authored-by: Copilot <[email protected]> * 📝 Rename sanitiezedata --------- Co-authored-by: Copilot <[email protected]> * [Aksel.nav.no] Move Aksel-brand theme into app-router for use (#3668) * 💄 Added global aksel-theme tokens * ✨ Implement new Aksel-brand for theming * [Aksel.nav.no] Updated MobileMenu for new ds-pages (#3670) * 💄 Added global aksel-theme tokens * ✨ Implement new Aksel-brand for theming * ✨ Initial setup mobile-menu * ✨ V1 mobile-menu component * 💄 Update mobile navigation and global search responsiveness; adjust overlay color opacity * 💄 Refine modal backdrop animation timing and opacity for smoother transitions * 💄 Adjust pressed-sidebar state --------- Co-authored-by: Copilot <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Ported over our global header-search to app-router, and did some rewrites to use app-router efficiently
The design changes might have to be updated, but this update only works on the new pages, so can do that after merge.
Also used some of the new illustrations to create in
itial/empty states
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")