feat(webui): add global search access across pages #1595

Pranav-0440 · 2026-02-07T07:43:29Z

fixes : #299

Signed-off-by: Pranav Ghorpade <pranavghorpade61@gmail.com>

Copilot

Pull request overview

This PR aims to address issue #299 by making search accessible from more pages in the Web UI (so users can start a new extension search without navigating back to the home page).

Changes:

Wrap Main route content with a DefaultApp component (intended as a global layout wrapper).
Add a search UI (SearchBox) to both default and mobile header menu contents, gated by pageSettings.showSearch.
Force-enable the new showSearch flag in the default webui entrypoint page settings.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
`webui/src/main.tsx`	Wrapes page content with `DefaultApp` (currently references a non-existent export).
`webui/src/default/menu-content.tsx`	Adds `SearchBox` into menu/header content for desktop and mobile, behind `pageSettings.showSearch`.
`webui/src/default/default-app.tsx`	Augments page settings with `showSearch: true` at the entrypoint.

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

Copilot · 2026-02-07T07:46:18Z

webui/src/main.tsx

+            <DefaultApp
+                pageSettings={props.pageSettings}
+                service={props.service}
+            >
+                {renderPageContent()}
+            </DefaultApp>


./default/default-app.tsx is the webui entrypoint that creates the React root and does not export a DefaultApp component. Importing it here and rendering <DefaultApp ...> will fail to compile (and would also introduce an entrypoint/layout coupling). Consider removing this wrapper from Main, or extracting a real layout component (exported from a dedicated module) if you need to wrap all routes.

Copilot · 2026-02-07T07:46:19Z

webui/src/default/menu-content.tsx

+import { SearchBox } from '../components/search/search-box';



SearchBox is imported from ../components/search/search-box, but there is no components/search directory in the repo. This will fail the build; either add the new component/file in this PR or change the import to an existing search component (e.g. reuse ExtensionListSearchfield via a wrapper).

Suggested change

import { SearchBox } from '../components/search/search-box';

type SearchBoxProps = React.InputHTMLAttributes<HTMLInputElement>;

export const SearchBox: FunctionComponent<SearchBoxProps> = (props) => (

<input type='search' {...props} />

);

Copilot · 2026-02-07T07:46:19Z

webui/src/default/menu-content.tsx

+    const { user, loginProviders, pageSettings } = useContext(MainContext);

    return <>
+        {pageSettings.showSearch && (
+            <MobileMenuItem>
+                <SearchBox />
+            </MobileMenuItem>   
+        )}


pageSettings is typed as PageSettings via MainContext, but PageSettings currently has no showSearch property. Accessing pageSettings.showSearch will be a TypeScript error. Add showSearch?: boolean to PageSettings (and set it in the page settings factory) or remove the flag and render the search UI unconditionally.

Suggested change

const { user, loginProviders, pageSettings } = useContext(MainContext);

return <>

{pageSettings.showSearch && (

<MobileMenuItem>

<SearchBox />

</MobileMenuItem>

)}

const { user, loginProviders } = useContext(MainContext);

return <>

<MobileMenuItem>

<SearchBox />

</MobileMenuItem>

Copilot · 2026-02-07T07:46:19Z

webui/src/default/menu-content.tsx

+        {pageSettings.showSearch && (
+            <SearchBox />
+        )}


Same PageSettings.showSearch type issue as above: PageSettings does not define showSearch, so this will not type-check until the interface is updated (or the flag is removed).

Copilot · 2026-02-07T07:46:19Z

webui/src/default/menu-content.tsx

+        {pageSettings.showSearch && (
+            <MobileMenuItem>
+                <SearchBox />
+            </MobileMenuItem>   


There is trailing whitespace after </MobileMenuItem> which may fail lint/format checks. Please remove the extra spaces.

Suggested change

</MobileMenuItem>

</MobileMenuItem>

Copilot · 2026-02-07T07:46:20Z

webui/src/default/default-app.tsx

+    const pageSettings = {
+        ...createPageSettings(prefersDarkMode, service.serverUrl, getServerVersion()),
+        showSearch: true
+    };
+


showSearch: true is being added ad-hoc here rather than being part of the PageSettings contract returned by createPageSettings. If showSearch is intended to be a supported setting, add it to the PageSettings interface and populate it inside createPageSettings so all consumers can rely on the same typed shape.

Suggested change

const pageSettings = {

...createPageSettings(prefersDarkMode, service.serverUrl, getServerVersion()),

showSearch: true

};

const pageSettings = createPageSettings(prefersDarkMode, service.serverUrl, getServerVersion());

Signed-off-by: Pranav Ghorpade <pranavghorpade61@gmail.com>

netomi · 2026-02-07T09:56:57Z

thanks for your contribution, please sign the ECA as outlined here https://api.eclipse.org/git/eca/status/gh/eclipse/openvsx/1595.

Pranav-0440 · 2026-02-07T12:08:53Z

thanks for your contribution, please sign the ECA as outlined here https://api.eclipse.org/git/eca/status/gh/eclipse/openvsx/1595.

This problem occurs when signing in.

Pranav-0440 · 2026-02-07T18:22:42Z

@netomi done ECA

netomi · 2026-02-08T19:42:25Z

I checked this PR and it add a link to the extension details page to the main page:

This is not what was the intentions of the referenced ticket. The idea was to add a search bar in the header, such that you can query for extensions on any page.

Signed-off-by: Pranav-0440 <pranavghorpade61@gmail.com>

netomi · 2026-02-09T18:23:22Z

@gnugomez could you take a look?

gnugomez · 2026-02-10T15:40:31Z

webui/src/default/menu-content.tsx

+
+// -------------------- Shared Search -------------------- //
+
+const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {


issue: as other components this one needs to be exported too

Suggested change

const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {

export const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {

gnugomez · 2026-02-10T15:47:52Z

webui/src/default/menu-content.tsx

+        }
+        navigate(
+            addQuery(ExtensionListRoutes.MAIN, [
+                { key: 'query', value }


issue: queary is not an accepted search param, use search instead

Suggested change

{ key: 'query', value }

{ key: 'search', value }

gnugomez · 2026-02-10T15:51:36Z

webui/src/default/menu-content.tsx

+
+// -------------------- Shared Search -------------------- //
+
+const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {


issue: the "fullWidth" styles here are making more harm than good, I'd suggest to use default MUI styles for the Input

Suggested change

const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {

const GlobalSearch: FunctionComponent = () => {

gnugomez · 2026-02-10T15:53:33Z

webui/src/default/menu-content.tsx

+            sx={{
+                mx: 2,
+                width: fullWidth ? '100%' : 260
+            }}


following up on my last comment I would remove these styles

Suggested change

sx={{

mx: 2,

width: fullWidth ? '100%' : 260

}}

gnugomez · 2026-02-10T15:59:44Z

webui/src/default/menu-content.tsx

-            <MobileMenuItem>
-                <Link href={user.homepage}>
-                    <MobileMenuItemText>
-                        <GitHubIcon sx={itemIcon} />
-                        {user.loginName}
-                    </MobileMenuItemText>
-                </Link>
-            </MobileMenuItem>


question (blocking): why are you removing the Github menu item?

gnugomez · 2026-02-10T16:12:38Z

webui/src/default/menu-content.tsx

-        <MenuLink href='https://join.slack.com/t/openvsxworkinggroup/shared_invite/zt-2y07y1ggy-ct3IfJljjGI6xWUQ9llv6A'>
-            Slack Workspace
-        </MenuLink>


issue: removing this menu item is not part of this patch

gnugomez · 2026-02-10T16:15:55Z

webui/src/default/menu-content.tsx

+    return (
+        <>
+            <Box sx={{ px: 2, pb: 1 }}>
+                <GlobalSearch fullWidth />


nitpick: when we're in the main route we should hide the global search because there's already one present

gnugomez · 2026-02-10T16:24:33Z

webui/src/default/menu-content.tsx

+    return (
+        <>
+            <Box sx={{ px: 2, pb: 1 }}>
+                <GlobalSearch fullWidth />


issue: this searchbar doesn't scale properly on smaller viewports just before changing to mobile, because of how crowded the menu already is.

A solution would be to update header-menu.tsx:25 to use xl breakpoint instead of lg

gnugomez · 2026-02-10T16:26:02Z

webui/src/default/menu-content.tsx

+
+    return (
+        <>
+            <GlobalSearch />


issue: we need to add some margins here

Suggested change

<GlobalSearch />

<Box mx={2.5}>

<GlobalSearch />

</Box>

→

gnugomez · 2026-02-10T16:26:32Z

webui/src/default/menu-content.tsx

+    return (
+        <>
+            <Box sx={{ px: 2, pb: 1 }}>
+                <GlobalSearch fullWidth />


Suggested change

<GlobalSearch fullWidth />

<GlobalSearch />

feat(webui): add global search access across pages

c2e345a

Signed-off-by: Pranav Ghorpade <pranavghorpade61@gmail.com>

Copilot AI review requested due to automatic review settings February 7, 2026 07:43

Copilot started reviewing on behalf of Pranav-0440 February 7, 2026 07:43 View session

Copilot AI reviewed Feb 7, 2026

View reviewed changes

Pranav-0440 added 2 commits February 7, 2026 14:22

feat(webui): make search accessible from more pages

a02a32f

feat(webui): make search accessible from extension pages

4c292be

Signed-off-by: Pranav Ghorpade <pranavghorpade61@gmail.com>

Pranav-0440 added 5 commits February 7, 2026 15:39

Update extension-detail-overview.tsx

03988b7

fix(webui): add missing semicolon for eslint @/semi

def541e

Update extension-detail-overview.tsx

2f355e1

Update extension-detail-overview.tsx

1125888

Merge branch 'master' into feat/webui-global-search

90e2dfa

feat(webui): add global search bar to header

4e06ed8

Signed-off-by: Pranav-0440 <pranavghorpade61@gmail.com>

Pranav-0440 force-pushed the feat/webui-global-search branch from 9cb4300 to 4e06ed8 Compare February 9, 2026 10:38

gnugomez suggested changes Feb 10, 2026

View reviewed changes

fix(webui): align global search with header conventions

00dd416

		import { SearchBox } from '../components/search/search-box';

-import { SearchBox } from '../components/search/search-box';
+type SearchBoxProps = React.InputHTMLAttributes<HTMLInputElement>;
+export const SearchBox: FunctionComponent<SearchBoxProps> = (props) => (
+    <input type='search' {...props} />
+);


		// -------------------- Shared Search -------------------- //

		const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {

	const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {
	export const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {

	const GlobalSearch: FunctionComponent<{ fullWidth?: boolean }> = ({ fullWidth }) => {
	const GlobalSearch: FunctionComponent = () => {

feat(webui): add global search access across pages #1595

Are you sure you want to change the base?

feat(webui): add global search access across pages #1595

Uh oh!

Conversation

Pranav-0440 commented Feb 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

netomi commented Feb 7, 2026

Uh oh!

Pranav-0440 commented Feb 7, 2026

Uh oh!

Pranav-0440 commented Feb 7, 2026

Uh oh!

netomi commented Feb 8, 2026

Uh oh!

netomi commented Feb 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants