feat(layer): add header search with command dialog #12
Conversation
- Refactor AppHeader with modular components (Logo, Center, Search) - Add header config schema (logo light/dark, title) - Implement search with Command Dialog and fuse.js fuzzy search - Add useContentSearch composable for state management - Install shadcn-vue components: Command, Dialog, Kbd - Add color mode switching in search dialog - Add ProseKbd component for markdown
Summary of ChangesHello @amondnet, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant enhancement to the application's navigation and user experience by adding a comprehensive search feature accessible directly from the header. It involves a substantial refactoring of the existing header component into a modular design, alongside the integration of a powerful fuzzy search mechanism and a command dialog interface. The changes also include new configuration options for header elements and the addition of several UI components to support the new features. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
Deploying docs-please with
|
| Latest commit: |
a4ec1e7
|
| Status: | 🚫 Deploy failed. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a powerful search functionality with a command dialog, significantly improving the user experience for navigating documentation. The refactoring of the AppHeader into modular components is well-executed and improves maintainability. The addition of fuse.js for fuzzy searching and the thoughtful implementation of keyboard shortcuts are excellent features. I've identified a few issues, including a typo in the Nuxt configuration that would break a component, and a potential hydration mismatch issue in the search button. I've provided suggestions to address these points. Overall, this is a great contribution.
- Add isDark computed for reactive color mode icon in header - Fix ColorModeSwitch to sync with external color mode changes - Use v-model for proper two-way binding with SwitchRoot - Update app.config with docs github configuration
- Fix MDC mapping typo: 'kdb' -> 'kbd' - Add skip navigation link for accessibility (WCAG 2.4.1) - Add aria-label to logo link for screen readers - Simplify ColorModeSwitch with computed getter/setter
- Fix hydration mismatch by wrapping KbdGroup in ClientOnly (AppSearchButton.vue) - Use link.to as v-for key instead of index (AppHeader.vue) - Add isDoc property to SearchItem for robust icon selection (AppSearch.vue, useContentSearch.ts)
|
1 participant
Summary
Changes
packages/layer/app/components/app/AppHeader.vue- Refactored into modular structurepackages/layer/app/components/app/AppHeaderLogo.vue- Logo component with light/dark supportpackages/layer/app/components/app/AppHeaderCenter.vue- Center slot for brandingpackages/layer/app/components/app/AppHeaderSearch.vue- Search trigger buttonpackages/layer/app/components/app/AppSearch.vue- Main search dialog componentpackages/layer/app/components/app/AppSearchButton.vue- Keyboard button in search resultspackages/layer/app/composables/useContentSearch.ts- Search state management with fuse.jspackages/layer/app/components/ui/command/- Command palette componentspackages/layer/app/components/ui/dialog/- Dialog primitivespackages/layer/app/components/ui/kbd/- Keyboard key componentspackages/layer/app/components/content/ProseKbd.vue- Markdown prose componentpackages/layer/app/layouts/default.vue- Updated to use new header structurepackages/layer/app/layouts/docs.vue- Updated to use new header structurepackages/layer/app/app.config.ts- Added header schemapackages/layer/nuxt.config.ts- Added fuse.js dependencypackages/layer/nuxt.schema.ts- Added header configurationpackages/layer/package.json- Added dependencies (fuse.js, etc.)bun.lock- Updated lock fileTest Plan