Skip to content

Add search suggestions UI - #5798

Open
MiningTcup wants to merge 4 commits into
iv-org:masterfrom
MiningTcup:master
Open

Add search suggestions UI#5798
MiningTcup wants to merge 4 commits into
iv-org:masterfrom
MiningTcup:master

Conversation

@MiningTcup

@MiningTcup MiningTcup commented Jul 8, 2026

Copy link
Copy Markdown

This PR adds search suggestions to the UI. It fetches /api/v1/search/suggestions and displays them as a dropdown with keyboard navigation. Tested on Firefox- and Chromium-based browsers.

image Screenshot from 2026-07-07 19-03-45

Copilot AI left a comment

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.

Pull request overview

Adds a client-side search suggestions dropdown to the UI by introducing new markup/styles for a suggestions panel and a JS module that debounces calls to /api/v1/search/suggestions and supports keyboard navigation.

Changes:

  • Load a new suggestions.js script from the main layout.
  • Extend the search box component with a container and a suggestions host element.
  • Add JS behavior (fetch + debounce + arrow/enter navigation) and CSS for dropdown positioning/theme styling.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

File Description
src/invidious/views/template.ecr Loads the new suggestions JS on pages using the main template.
src/invidious/views/components/search_box.ecr Adds #search-container and #suggestions elements to host the dropdown.
assets/js/suggestions.js Implements debounced suggestions fetching and keyboard navigation.
assets/css/default.css Styles the dropdown and applies active-row theming.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread assets/js/suggestions.js
Comment thread assets/js/suggestions.js Outdated
Comment thread assets/js/suggestions.js Outdated
Comment thread assets/js/suggestions.js Outdated
Comment thread assets/css/default.css Outdated
Comment thread assets/css/default.css Outdated
Comment thread assets/css/default.css Outdated
Comment thread assets/css/default.css Outdated
@TheFrenchGhosty

Copy link
Copy Markdown
Member

@MiningTcup Hello, did you use AI to make this PR? If so, please disclose it as per the AI_POLICY.md

(A PR template is coming soon to make it more obvious that disclosure is mandatory #5803 )

Copilot AI left a comment

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.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 9 comments.

Comment thread assets/js/suggestions.js
Comment thread assets/js/suggestions.js
Comment thread src/invidious/views/components/search_box.ecr Outdated
Comment thread src/invidious/views/components/search_box.ecr
Comment thread assets/css/default.css
Comment thread assets/css/default.css
Comment thread assets/css/default.css
Comment thread assets/css/default.css
Comment thread assets/js/suggestions.js Outdated
@MiningTcup

MiningTcup commented Jul 11, 2026

Copy link
Copy Markdown
Author

I did not use AI whatsoever, aside from these Copilot suggestions which I've fact-checked and sometimes altered. I know those comments in the suggestions.js look a bit weird, but I wrote them myself.

Also sorry about the Git noise, I am a bit of an idiot and have not contributed much before.

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.

3 participants