Skip to content

Conversation

@garthdw
Copy link
Contributor

@garthdw garthdw commented Jan 29, 2026

Avoid taking up space for searchbox on search page.

Mainly moved the query string watching from search.vue to AppHeader.vue

Closes #291

Screen.Recording.2026-01-29.at.17.43.18.mov

@vercel
Copy link

vercel bot commented Jan 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs.npmx.dev Ready Ready Preview, Comment Jan 30, 2026 0:59am
npmx.dev Ready Ready Preview, Comment Jan 30, 2026 0:59am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
npmx-lunaria Ignored Ignored Jan 30, 2026 0:59am

Request Review

@danielroe
Copy link
Collaborator

might need to update the current search behaviour tests 🙏

Comment on lines 13 to 14
// manually focus search
await searchInput.focus()
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think we want it to autofocus when the search page is opened.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have gone with autofocus on the search input.

I did start down a hacky approach to only focus when AppHeader is mounted and route is search. I can switch to that approach if we want it to only happen on the search page instead of any "first load" page.

Copy link
Collaborator

@danielroe danielroe left a comment

Choose a reason for hiding this comment

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

❤️

@danielroe danielroe added this pull request to the merge queue Jan 29, 2026
@danielroe danielroe removed this pull request from the merge queue due to a manual request Jan 29, 2026
@danielroe
Copy link
Collaborator

we should think about mobile view too....

currently there's no search input on mobile

might want to have a small input that goes full width when focused?

Avoid taking up space for searchbox on search page.

Mainly moved the query string watching from search.vue to AppHeader.vuue

# Conflicts:
#	app/components/AppHeader.vue
#	app/pages/search.vue

# Conflicts:
#	app/components/AppHeader.vue
#	app/pages/search.vue
Selected item was jumping when scrolling up because of focus.

Hook to the up/down arrows on a document level instead of section level.
Improve search on mobile.

Smaller search box that expands full width on click.
@garthdw
Copy link
Contributor Author

garthdw commented Jan 29, 2026

This is where I got to for mobile

Screen.Recording.2026-01-29.at.21.55.29.mov

@danielroe
Copy link
Collaborator

looks perfect to me!

@danielroe danielroe enabled auto-merge January 29, 2026 23:45
@danielroe danielroe added this pull request to the merge queue Jan 29, 2026
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 29, 2026
@danielroe danielroe added this pull request to the merge queue Jan 29, 2026
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 29, 2026
@danielroe danielroe added this pull request to the merge queue Jan 30, 2026
Merged via the queue into npmx-dev:main with commit ee73a0e Jan 30, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Stable search bar on top navbar

2 participants