diff --git a/webui/CHANGELOG.md b/webui/CHANGELOG.md
index c9b4b4779..52d6460f2 100644
--- a/webui/CHANGELOG.md
+++ b/webui/CHANGELOG.md
@@ -6,11 +6,20 @@ This change log covers only the frontend library (webui) of Open VSX.
### Added
+- Add a home page with hero search, popular searches, a category browser, curated extension rows and get-involved cards
+- Add a dedicated search page under `/search` with query, category, sort field and sort order synced to the URL
+- Add global keyboard shortcuts
+- Add keyboard navigation of search results: `↑`/`↓`
+- Add a structured footer
+- Add scroll-to-top on forward navigation
- Support searching users and managing their roles in the admin dashboard ([#1847](https://github.com/eclipse-openvsx/openvsx/pull/1847))
- Added an extension details page to admin dashboard and user settings ([#1939](https://github.com/eclipse-openvsx/openvsx/pull/1939))
### Changed
+- Redesign the web UI: new navbar with integrated search field, new theme, extension cards, category pills and page layout
+- Improve accessibility: visible focus outlines on interactive controls
+- Morph the hero search into the navbar search field using the View Transitions API
- Token display in generate-token dialog now uses a masked input with show/hide toggle and copy button ([#1966](https://github.com/eclipse-openvsx/openvsx/pull/1966)
- Migrate admin dashboard to use `@tanstack/react-query` ([#1917](https://github.com/eclipse-openvsx/openvsx/pull/1917)
- Replace formatting from `stylistic` with `prettier` ([#1916](https://github.com/eclipse-openvsx/openvsx/pull/1916))
diff --git a/webui/index.html b/webui/index.html
index 0a097be03..821ee92b4 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -3,9 +3,6 @@
-
-
-
diff --git a/webui/package.json b/webui/package.json
index c32d2edf0..eb43f9128 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -41,6 +41,9 @@
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
+ "@fontsource-variable/geist": "^5.2.9",
+ "@fontsource-variable/geist-mono": "^5.2.8",
+ "@fontsource/roboto": "^5.2.10",
"@mdit/plugin-alert": "^0.22.3",
"@mui/base": "^5.0.0-beta.9",
"@mui/icons-material": "^5.15.14",
diff --git a/webui/src/components/banner.tsx b/webui/src/components/banner.tsx
index 9b199555d..f821f6a60 100644
--- a/webui/src/components/banner.tsx
+++ b/webui/src/components/banner.tsx
@@ -9,53 +9,75 @@
********************************************************************************/
import { FunctionComponent, PropsWithChildren } from 'react';
-import { Paper, Grid, Button, Collapse } from '@mui/material';
+import { Box, Button, Collapse, IconButton } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import CloseIcon from '@mui/icons-material/Close';
+
+const VARIANTS = {
+ info: { Icon: InfoOutlinedIcon, bg: 'accentSoft', accent: 'secondary.light' },
+ warning: { Icon: WarningAmberRoundedIcon, bg: 'warningSoft', accent: 'warningAccent' }
+} as const;
export const Banner: FunctionComponent> = props => {
- const cardColor = props.theme === 'dark' ? '#fff' : '#000';
- const cardBackground = `${props.color}.${props.theme}`;
+ const { color = 'info', open, showDismissButton, dismissButtonLabel, dismissButtonOnClick, children } = props;
+ const { Icon, bg, accent } = VARIANTS[color];
return (
-
-
+
-
-
- {props.children}
-
- {props.showDismissButton && (
-
+
+
+ {children}
+
+
+ {showDismissButton &&
+ (dismissButtonLabel ? (
+
+ borderRadius: `${theme.shape.borderRadius}px`,
+ '&:hover': { backgroundColor: 'color-mix(in srgb, currentColor 8%, transparent)' }
+ })}>
+ {dismissButtonLabel}
+
+ ) : (
+
+
+
+ ))}
+
);
};
@@ -66,5 +88,4 @@ interface BannerProps {
dismissButtonLabel?: string;
dismissButtonOnClick?: () => void;
color?: 'info' | 'warning';
- theme?: 'light' | 'dark';
}
diff --git a/webui/src/components/categories.ts b/webui/src/components/categories.ts
new file mode 100644
index 000000000..8beda38e8
--- /dev/null
+++ b/webui/src/components/categories.ts
@@ -0,0 +1,65 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent } from 'react';
+import { SvgIconProps } from '@mui/material';
+import DataObjectIcon from '@mui/icons-material/DataObject';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import SpellcheckIcon from '@mui/icons-material/Spellcheck';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import PaletteIcon from '@mui/icons-material/Palette';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import KeyboardIcon from '@mui/icons-material/Keyboard';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import TranslateIcon from '@mui/icons-material/Translate';
+import InsightsIcon from '@mui/icons-material/Insights';
+import ModelTrainingIcon from '@mui/icons-material/ModelTraining';
+import MenuBookIcon from '@mui/icons-material/MenuBook';
+import GridViewIcon from '@mui/icons-material/GridView';
+import { CATEGORIES, ExtensionCategory } from '../extension-registry-types';
+
+export const DefaultCategoryIcon: FunctionComponent = GridViewIcon;
+
+// The category list itself lives in extension-registry-types; this record is
+// compile-checked to stay exhaustive when categories are added or removed.
+export const CATEGORY_ICONS: Record> = {
+ AI: AutoAwesomeIcon,
+ 'Programming Languages': DataObjectIcon,
+ Snippets: ContentCopyIcon,
+ Linters: SpellcheckIcon,
+ Themes: PaletteIcon,
+ Debuggers: BugReportIcon,
+ Formatters: FormatAlignLeftIcon,
+ Keymaps: KeyboardIcon,
+ 'SCM Providers': AccountTreeIcon,
+ Other: GridViewIcon,
+ 'Extension Packs': ExtensionIcon,
+ 'Language Packs': TranslateIcon,
+ 'Data Science': InsightsIcon,
+ 'Machine Learning': ModelTrainingIcon,
+ Visualization: BarChartIcon,
+ Notebooks: MenuBookIcon
+};
+
+const SORTED_CATEGORIES: ExtensionCategory[] = [...CATEGORIES].sort((a, b) => {
+ if (a === 'Other') return 1;
+ if (b === 'Other') return -1;
+ return a.localeCompare(b);
+});
+
+export function useCategories(): ExtensionCategory[] {
+ return SORTED_CATEGORIES;
+}
diff --git a/webui/src/components/category-card.tsx b/webui/src/components/category-card.tsx
new file mode 100644
index 000000000..05265ebf6
--- /dev/null
+++ b/webui/src/components/category-card.tsx
@@ -0,0 +1,63 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent } from 'react';
+import { Box, ButtonBase, SvgIconProps, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { cardHoverLift, cardSurface, focusOutline } from './page-primitives';
+
+const Root = styled(ButtonBase)(({ theme }) => ({
+ ...cardSurface(theme),
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ textAlign: 'left',
+ overflow: 'hidden',
+ flexGrow: 1,
+ maxWidth: '16rem',
+ gap: '0.625rem',
+ padding: '0.625rem 0.875rem 0.625rem 0.75rem',
+ color: theme.palette.text.primary,
+ transition: 'border-color 0.15s, box-shadow 0.15s, transform 0.15s',
+ ...cardHoverLift(theme),
+ ...focusOutline(theme),
+ '& .MuiTouchRipple-root': { color: theme.palette.secondary.main }
+}));
+
+export interface CategoryCardProps {
+ label: string;
+ icon: FunctionComponent;
+ onClick: () => void;
+}
+
+export const CategoryCard: FunctionComponent = ({ label, icon: Icon, onClick }) => (
+
+
+
+
+
+ {label}
+
+
+);
diff --git a/webui/src/components/category-list-item.tsx b/webui/src/components/category-list-item.tsx
new file mode 100644
index 000000000..b5cb70832
--- /dev/null
+++ b/webui/src/components/category-list-item.tsx
@@ -0,0 +1,64 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent } from 'react';
+import { ButtonBase, SvgIconProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { focusOutline } from './page-primitives';
+
+const Root = styled(ButtonBase, {
+ shouldForwardProp: prop => prop !== 'isSelected'
+})<{ isSelected: boolean }>(({ theme, isSelected }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ gap: '0.5rem',
+ width: '100%',
+ textAlign: 'left',
+ padding: '0.4375rem 0.625rem',
+ borderRadius: theme.shape.borderRadius,
+ overflow: 'hidden',
+ fontSize: '0.8125rem',
+ fontWeight: isSelected ? 600 : 400,
+ color: isSelected ? theme.palette.secondary.light : theme.palette.text.secondary,
+ backgroundColor: isSelected ? theme.palette.accentSoft : 'transparent',
+ marginBottom: '1px',
+ fontFamily: 'inherit',
+ transition: 'background 0.14s, color 0.14s',
+ '&:hover': isSelected
+ ? {}
+ : {
+ backgroundColor: theme.palette.surface3,
+ color: theme.palette.text.primary
+ },
+ ...focusOutline(theme)
+}));
+
+export interface CategoryListItemProps {
+ label: string;
+ icon: FunctionComponent;
+ isSelected: boolean;
+ onClick: () => void;
+}
+
+export const CategoryListItem: FunctionComponent = ({
+ label,
+ icon: Icon,
+ isSelected,
+ onClick
+}) => (
+
+
+ {label}
+
+);
diff --git a/webui/src/components/category-pill.tsx b/webui/src/components/category-pill.tsx
new file mode 100644
index 000000000..bf260e67f
--- /dev/null
+++ b/webui/src/components/category-pill.tsx
@@ -0,0 +1,64 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent, useEffect, useRef } from 'react';
+import { ButtonBase, SvgIconProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { accentHover, focusOutline } from './page-primitives';
+
+const Root = styled(ButtonBase, {
+ shouldForwardProp: prop => prop !== 'isSelected'
+})<{ isSelected?: boolean }>(({ theme, isSelected }) => ({
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: '0.4375rem',
+ flexShrink: 0,
+ overflow: 'hidden',
+ backgroundColor: isSelected ? theme.palette.accentSoft : theme.palette.surface2,
+ border: `1px solid ${isSelected ? theme.palette.secondary.main : theme.palette.divider}`,
+ color: isSelected ? theme.palette.secondary.light : theme.palette.text.secondary,
+ fontSize: '0.8125rem',
+ fontWeight: isSelected ? 600 : 500,
+ padding: '0.4375rem 0.8125rem',
+ borderRadius: '999px',
+ whiteSpace: 'nowrap',
+ fontFamily: 'inherit',
+ transition: 'border-color 0.14s, color 0.14s',
+ ...(isSelected ? {} : accentHover(theme)),
+ ...focusOutline(theme)
+}));
+
+export interface CategoryPillProps {
+ label: string;
+ icon: FunctionComponent;
+ isSelected?: boolean;
+ onClick: () => void;
+}
+
+export const CategoryPill: FunctionComponent = ({ label, icon: Icon, isSelected, onClick }) => {
+ const ref = useRef(null);
+
+ // Keep the selected pill visible when the row overflows (deep links, home tiles).
+ useEffect(() => {
+ if (isSelected) {
+ ref.current?.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
+ }
+ }, [isSelected]);
+
+ return (
+
+
+ {label}
+
+ );
+};
diff --git a/webui/src/components/extension-card.tsx b/webui/src/components/extension-card.tsx
new file mode 100644
index 000000000..476f72960
--- /dev/null
+++ b/webui/src/components/extension-card.tsx
@@ -0,0 +1,232 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { forwardRef, FunctionComponent, memo } from 'react';
+import { Link as RouteLink } from 'react-router-dom';
+import { Paper, Typography, Box, Fade, Skeleton } from '@mui/material';
+import { CSSObject, styled, Theme } from '@mui/material/styles';
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
+import { ExtensionDetailRoutes } from '../pages/extension-detail/extension-detail-routes';
+import { SearchEntry } from '../extension-registry-types';
+import { ExtensionIcon } from './extension/extension-icon';
+import { ExtensionRatingStars } from '../pages/extension-detail/extension-rating-stars';
+import { createRoute, formatCompactNumber } from '../utils';
+import { MONO_FONT } from '../default/theme';
+import { GridItemProps } from '../hooks/use-grid-cursor';
+import { cardHoverLift, cardSurface, focusRing } from './page-primitives';
+
+// Shared surface + footprint so the card and its skeleton occupy identical space.
+const cardLayout = (theme: Theme): CSSObject => ({
+ ...cardSurface(theme),
+ padding: '1.375rem 1rem',
+ [theme.breakpoints.down('sm')]: { padding: '0.875rem 0.625rem' },
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ height: '100%',
+ minHeight: '12.875rem'
+});
+
+const CardRoot = styled(Paper)(({ theme }) => ({
+ ...cardLayout(theme),
+ textAlign: 'center',
+ cursor: 'pointer',
+ transition: 'border-color 0.15s, box-shadow 0.15s, transform 0.15s',
+ ...cardHoverLift(theme),
+ // Keyboard focus ring mirrors the search field's :focus-within style.
+ // Ring when the card link is keyboard-focused, or when it is the grid
+ // cursor and the cursor is visible (see useGridCursor).
+ 'a:focus-visible &, [data-cursor-visible] a[data-active] &': focusRing(theme)
+}));
+
+const SkeletonRoot = styled(Paper)(({ theme }) => cardLayout(theme));
+
+// Only the unknown parts are skeletons; the stars' empty state looks the same loaded or not.
+const SkeletonContent: FunctionComponent = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+/** Loading placeholder matching {@link ExtensionCard}'s footprint. */
+export const ExtensionCardSkeleton: FunctionComponent = () => (
+
+
+
+);
+
+// The grid cursor props are optional: cards also render outside a cursor grid
+// (curated sections, namespace detail).
+export interface ExtensionCardProps extends Partial> {
+ /**
+ * The extension, or `undefined` for a loading skeleton. Keep a stable key
+ * across the swap so the fade plays once instead of restarting.
+ */
+ extension?: SearchEntry;
+ /** Delay before the card fades in, so grids can stagger their cards. */
+ fadeDelayMs?: number;
+ /** When false, the card shows immediately without its entrance fade (e.g. restored from cache on back-nav). */
+ appear?: boolean;
+}
+
+export const ExtensionCard = memo(
+ forwardRef(function ExtensionCard(
+ { extension, fadeDelayMs = 0, appear = true, ...linkProps },
+ ref
+ ) {
+ const title = extension?.displayName ?? extension?.name;
+ const downloadCount = extension ? formatCompactNumber(extension.downloadCount ?? 0) : undefined;
+
+ // One Fade over both states so it runs once and carries through the skeleton → card swap.
+ return (
+
+
+ {extension ? (
+
+
+
+
+
+
+ {title}
+
+
+
+ {extension.namespace}
+
+
+ {extension.version}
+
+
+
+
+
+
+ {downloadCount !== '0' && (
+
+
+ {downloadCount}
+
+ )}
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+ );
+ })
+);
diff --git a/webui/src/components/extension-list.tsx b/webui/src/components/extension-list.tsx
new file mode 100644
index 000000000..0e63a2d54
--- /dev/null
+++ b/webui/src/components/extension-list.tsx
@@ -0,0 +1,101 @@
+/********************************************************************************
+ * Copyright (c) 2019 TypeFox and others
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent, useContext, useEffect, useMemo, useRef } from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import { Box } from '@mui/material';
+import { ExtensionCard } from './extension-card';
+import { ExtensionFilter } from '../extension-registry-service';
+import { useExtensionResultsCursor } from '../hooks/use-extension-results-cursor';
+import { useInfiniteSearch } from '../hooks/use-infinite-search';
+import { MainContext } from '../context';
+
+export const ExtensionList: FunctionComponent = ({ filter, onUpdate }) => {
+ const { handleError } = useContext(MainContext);
+ const { data, error, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteSearch(filter);
+
+ const extensions = useMemo(() => data?.pages.flatMap(page => page.extensions) ?? [], [data]);
+ const totalSize = data?.pages[0]?.totalSize ?? 0;
+ const grid = useExtensionResultsCursor(extensions.length);
+
+ // Report the result count to the parent (shown in the search header).
+ useEffect(() => {
+ onUpdate(totalSize);
+ }, [totalSize, onUpdate]);
+
+ // Surface fetch failures through the app's error handler.
+ useEffect(() => {
+ if (error) {
+ handleError(error);
+ }
+ }, [error, handleError]);
+
+ // Fresh filter: put the cursor back on the first card so Enter opens it.
+ useEffect(() => {
+ grid.reset();
+ }, [filter.query, filter.category, filter.sortBy, filter.sortOrder, grid.reset]);
+
+ const pageSize = filter.size;
+ const loading = isLoading || isFetchingNextPage;
+
+ // Cards already in the query cache when this list mounts (e.g. returning via
+ // browser back) render in place without replaying the entrance fade, so the
+ // page looks as if it was never unmounted. Cards that load afterwards still fade.
+ const restoredCount = useRef(loading ? 0 : extensions.length).current;
+
+ // Index-keyed slots (the list only appends): loading slots render as
+ // skeletons that become cards in place, so the fade isn't restarted.
+ const slotCount = extensions.length + (loading ? pageSize : 0);
+ const cards = Array.from({ length: slotCount }, (_, idx) => {
+ const extension = extensions[idx];
+ return (
+ = restoredCount}
+ fadeDelayMs={Math.min(idx % pageSize, 5) * 200}
+ {...(extension ? grid.itemProps(idx) : {})}
+ />
+ );
+ });
+
+ return (
+ {
+ if (hasNextPage && !isFetchingNextPage) {
+ void fetchNextPage();
+ }
+ }}
+ hasMore={hasNextPage && !isFetchingNextPage}
+ threshold={200}>
+
+ {cards}
+
+
+ );
+};
+
+export interface ExtensionListProps {
+ filter: ExtensionFilter;
+ onUpdate: (resultNumber: number) => void;
+}
diff --git a/webui/src/components/extension-searchfield.tsx b/webui/src/components/extension-searchfield.tsx
new file mode 100644
index 000000000..eaa5a0de0
--- /dev/null
+++ b/webui/src/components/extension-searchfield.tsx
@@ -0,0 +1,171 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { ChangeEvent, ForwardedRef, forwardRef, KeyboardEvent, useCallback, useId, useRef } from 'react';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Close';
+import { IconButton, InputBase, InputBaseComponentProps, Box } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { MONO_FONT } from '../default/theme';
+import { focusRing } from './page-primitives';
+
+interface ExtensionSearchfieldProps {
+ onSearchChanged: (s: string) => void;
+ onSearchSubmit?: (s: string) => void;
+ searchQuery?: string;
+ placeholder: string;
+ hideIconButton?: boolean;
+ error?: boolean;
+ autoFocus?: boolean;
+ viewTransitionName?: string;
+ inputProps?: InputBaseComponentProps;
+}
+
+const SearchWrap = styled(Box, {
+ shouldForwardProp: prop => prop !== 'hasError'
+})<{ hasError?: boolean }>(({ theme, hasError }) => ({
+ flex: 2,
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.625rem',
+ border: hasError ? '2px solid' : '1px solid',
+ borderColor: hasError ? theme.palette.error.main : theme.palette.divider,
+ borderRadius: '11px',
+ height: '2.8125rem',
+ padding: '0 0.8125rem',
+ backgroundColor: alpha(theme.palette.surface2, 0.7),
+ backdropFilter: 'blur(2px)',
+ transition: 'border-color 0.18s, box-shadow 0.18s',
+ '&:focus-within': focusRing(theme)
+}));
+
+const MonoSlash = styled('span')(({ theme }) => ({
+ fontFamily: MONO_FONT,
+ color: theme.palette.secondary.light,
+ fontSize: '1.0625rem',
+ lineHeight: 1,
+ flexShrink: 0,
+ userSelect: 'none'
+}));
+
+const SearchInput = styled(InputBase)(({ theme }) => ({
+ flex: 1,
+ fontFamily: MONO_FONT,
+ fontSize: '0.9375rem',
+ color: theme.palette.text.primary,
+ // iOS Safari zooms the viewport on focus when the field's font-size is < 16px;
+ // keep it at 16px on mobile to suppress that (desktop stays compact at 15px).
+ [theme.breakpoints.down('sm')]: { fontSize: '1rem' },
+ '& input::placeholder': { color: theme.palette.text.primary, opacity: 0.7 },
+ '& input::-webkit-search-cancel-button': { display: 'none' }
+}));
+
+export const ExtensionSearchfield = forwardRef(
+ (props: ExtensionSearchfieldProps, ref: ForwardedRef) => {
+ const inputRef = useRef(null);
+ const inputId = useId();
+
+ // Keep the forwarded ref and the internal ref (used by the clear button) in sync.
+ const setInputRef = useCallback(
+ (node: HTMLInputElement | null) => {
+ inputRef.current = node;
+ if (typeof ref === 'function') {
+ ref(node);
+ } else if (ref) {
+ ref.current = node;
+ }
+ },
+ [ref]
+ );
+
+ const handleSearchChange = (event: ChangeEvent) => {
+ props.onSearchChanged(event.target.value);
+ };
+
+ const handleSearchButtonClick = () => {
+ if (props.onSearchSubmit) {
+ props.onSearchSubmit(props.searchQuery ?? '');
+ }
+ };
+
+ const handleClear = () => {
+ props.onSearchChanged('');
+ inputRef.current?.focus();
+ };
+
+ // Merged into inputProps because InputBase spreads inputProps after its own
+ // onKeyDown, so a caller-supplied handler would silently replace Enter-submit.
+ const handleKeyDown = (event: KeyboardEvent) => {
+ props.inputProps?.onKeyDown?.(event);
+ if (event.key === 'Enter' && props.onSearchSubmit && !event.defaultPrevented) {
+ props.onSearchSubmit(props.searchQuery ?? '');
+ }
+ };
+
+ return (
+
+ /
+
+
+ {props.searchQuery && (
+
+
+
+ )}
+ {!props.hideIconButton && (
+
+
+
+ )}
+
+ );
+ }
+);
+
+ExtensionSearchfield.displayName = 'ExtensionSearchfield';
diff --git a/webui/src/components/extension/extension-icon.tsx b/webui/src/components/extension/extension-icon.tsx
index 533d31b5a..8078e87f1 100644
--- a/webui/src/components/extension/extension-icon.tsx
+++ b/webui/src/components/extension/extension-icon.tsx
@@ -12,18 +12,26 @@
*****************************************************************************/
import { FunctionComponent, useContext } from 'react';
-import { Box, SxProps, Theme } from '@mui/material';
+import { Box, Skeleton, SxProps, Theme } from '@mui/material';
import { MainContext } from '../../context';
import { Extension, SearchEntry } from '../../extension-registry-types';
import { useExtensionIcon } from './use-extension-icon';
-/**
- * Renders an extension's icon, falling back to the configured default icon
- * while the real one loads or when the extension has none.
- */
+/** Renders an extension's icon: a skeleton while loading, then the icon or the configured default. */
export const ExtensionIcon: FunctionComponent = ({ extension, alt, sx }) => {
const { pageSettings } = useContext(MainContext);
- const icon = useExtensionIcon(extension);
+ const { data: icon, isLoading } = useExtensionIcon(extension);
+
+ if (isLoading) {
+ // Reset the Skeleton's default height so `aspectRatio` squares it from
+ // the width; an explicit height in `sx` still wins.
+ return (
+
+ );
+ }
return (
{
+export const useExtensionIcon = (extension: Extension | SearchEntry) => {
const { service } = useContext(MainContext);
const targetPlatform = 'targetPlatform' in extension ? extension.targetPlatform : undefined;
- const { data } = useQuery({
+ return useQuery({
queryKey: [
'extension-icon',
extension.namespace,
@@ -40,27 +39,6 @@ export const useExtensionIcon = (extension: Extension | SearchEntry): string | u
const icon = await service.getExtensionIcon(controllerFromSignal(signal), extension);
// useQuery forbids `undefined`; normalise the "no icon" case to null.
return icon ?? null;
- },
- gcTime: 0,
- staleTime: 0
- });
-
- const previousUrl = useRef(null);
- useEffect(() => {
- if (previousUrl.current && previousUrl.current !== data) {
- URL.revokeObjectURL(previousUrl.current);
}
- previousUrl.current = data ?? null;
- }, [data]);
-
- useEffect(
- () => () => {
- if (previousUrl.current) {
- URL.revokeObjectURL(previousUrl.current);
- }
- },
- []
- );
-
- return data ?? undefined;
+ });
};
diff --git a/webui/src/components/kbd-key.tsx b/webui/src/components/kbd-key.tsx
new file mode 100644
index 000000000..c4b92da35
--- /dev/null
+++ b/webui/src/components/kbd-key.tsx
@@ -0,0 +1,50 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { Box } from '@mui/material';
+import { MONO_FONT } from '../default/theme';
+
+export const KbdKey: FunctionComponent = ({ children }) => (
+
+ {children}
+
+);
diff --git a/webui/src/components/openvsx-mark.tsx b/webui/src/components/openvsx-mark.tsx
new file mode 100644
index 000000000..24d44d862
--- /dev/null
+++ b/webui/src/components/openvsx-mark.tsx
@@ -0,0 +1,21 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { CSSProperties, FunctionComponent } from 'react';
+
+export const OpenVsxMark: FunctionComponent<{ style?: CSSProperties }> = ({ style }) => (
+
+);
diff --git a/webui/src/components/page-primitives.tsx b/webui/src/components/page-primitives.tsx
new file mode 100644
index 000000000..27a4101c9
--- /dev/null
+++ b/webui/src/components/page-primitives.tsx
@@ -0,0 +1,88 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { Box, Typography } from '@mui/material';
+import { alpha, styled, Theme } from '@mui/material/styles';
+
+/** Max width of the centered content column shared by every page section. */
+export const CONTENT_MAX_WIDTH = 1320;
+
+/**
+ * Horizontally-centered content column with responsive gutters. The single
+ * source of truth for page width so sections stay aligned across the app.
+ */
+export const Section = styled(Box)(({ theme }) => ({
+ maxWidth: CONTENT_MAX_WIDTH,
+ marginInline: 'auto',
+ paddingInline: '1.75rem',
+ [theme.breakpoints.down('sm')]: {
+ paddingInline: '1rem'
+ }
+}));
+
+/** Small uppercase label used to head sections, columns and sidebars. */
+export const Eyebrow = styled(Typography)(({ theme }) => ({
+ fontSize: '0.75rem',
+ fontWeight: 700,
+ textTransform: 'uppercase',
+ letterSpacing: '0.08em',
+ color: theme.palette.text.disabled
+})) as typeof Typography;
+
+/**
+ * Elevated surface shared by cards (extensions, categories, panels): paper
+ * background, hairline border and the card corner radius from the theme.
+ */
+export const cardSurface = (theme: Theme) => ({
+ backgroundColor: theme.palette.background.paper,
+ border: `1px solid ${theme.palette.divider}`,
+ borderRadius: theme.shape.borderRadiusCard
+});
+
+/** Accent focus ring shared by the search fields and card links. */
+export const focusRing = (theme: Theme, extraShadow?: string) => ({
+ borderColor: theme.palette.secondary.main,
+ boxShadow: `0 0 0 3px ${alpha(theme.palette.secondary.main, 0.16)}${extraShadow ? `, ${extraShadow}` : ''}`
+});
+
+/**
+ * Keyboard-focus outline for buttons, pills and links. ButtonBase resets the
+ * native outline, so anything built on it needs this to be reachable by keyboard.
+ */
+export const focusOutline = (theme: Theme) => ({
+ '&.Mui-focusVisible, &:focus-visible': {
+ outline: `2px solid ${theme.palette.secondary.main}`,
+ outlineOffset: '2px'
+ }
+});
+
+/** Hover treatment for chips and pills: accent border and text color. Suppressed on touch devices. */
+export const accentHover = (theme: Theme) => ({
+ '@media (hover: hover)': {
+ '&:hover': {
+ borderColor: theme.palette.secondary.main,
+ color: theme.palette.secondary.light
+ }
+ }
+});
+
+/** Hover treatment for interactive cards: accent border, shadow and lift. Suppressed on touch devices. */
+export const cardHoverLift = (theme: Theme) => ({
+ '@media (hover: hover)': {
+ '&:hover': {
+ borderColor: theme.palette.secondary.main,
+ boxShadow: 'var(--shadow)',
+ transform: 'translateY(-2px)'
+ }
+ }
+});
diff --git a/webui/src/components/sanitized-markdown.tsx b/webui/src/components/sanitized-markdown.tsx
index 09228c535..98a49513d 100644
--- a/webui/src/components/sanitized-markdown.tsx
+++ b/webui/src/components/sanitized-markdown.tsx
@@ -18,6 +18,11 @@ import linkIcon from './link-icon';
import { useLocation } from 'react-router-dom';
const Markdown = styled('div')(({ theme }: { theme: Theme }) => ({
+ // The container owns the leading gap; the first block shouldn't add its own
+ // heading/paragraph margin on top of it.
+ '& > :first-of-type': {
+ marginTop: 0
+ },
'& a': {
textDecoration: 'none',
color: theme.palette.secondary.main,
@@ -66,6 +71,8 @@ const Markdown = styled('div')(({ theme }: { theme: Theme }) => ({
'& table': {
borderCollapse: 'collapse',
borderSpacing: 0,
+ display: 'block',
+ overflowX: 'auto',
'& tr, & td, & th': {
border: '1px solid #ddd'
},
diff --git a/webui/src/components/shortcuts-modal.tsx b/webui/src/components/shortcuts-modal.tsx
new file mode 100644
index 000000000..25ad5d0b4
--- /dev/null
+++ b/webui/src/components/shortcuts-modal.tsx
@@ -0,0 +1,72 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent } from 'react';
+import { Dialog, DialogTitle, DialogContent, Box, Typography, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { KbdKey } from './kbd-key';
+import { useKeyboardShortcuts } from '../context/keyboard-shortcuts-context';
+
+interface ShortcutsModalProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+export const ShortcutsModal: FunctionComponent = ({ open, onClose }) => {
+ const { shortcuts } = useKeyboardShortcuts();
+
+ return (
+
+ );
+};
diff --git a/webui/src/context/extension-tint-context.tsx b/webui/src/context/extension-tint-context.tsx
new file mode 100644
index 000000000..6b48ff499
--- /dev/null
+++ b/webui/src/context/extension-tint-context.tsx
@@ -0,0 +1,50 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { createContext, FunctionComponent, ReactNode, useContext, useMemo, useState } from 'react';
+
+/**
+ * The tint region an extension detail page declares while mounted. The page
+ * only describes it; the nav bar compares the depth against its own scroll
+ * position to decide when to wear the color.
+ */
+export interface ExtensionTint {
+ // Gallery color the nav wears while the region backs it, flipping its
+ // content to the contrast color. Null for default-colored bands, which
+ // keep the nav on theme colors.
+ color: string | null;
+ // Document offset where the region ends; scrolled past it the nav returns
+ // to theme colors.
+ depth: number;
+}
+
+const ExtensionTintContext = createContext<{
+ tint: ExtensionTint | null;
+ setTint: (tint: ExtensionTint | null) => void;
+}>({ tint: null, setTint: () => {} });
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useExtensionTint(): ExtensionTint | null {
+ return useContext(ExtensionTintContext).tint;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useSetExtensionTint(): (tint: ExtensionTint | null) => void {
+ return useContext(ExtensionTintContext).setTint;
+}
+
+export const ExtensionTintProvider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
+ const [tint, setTint] = useState(null);
+ const value = useMemo(() => ({ tint, setTint }), [tint]);
+ return {children};
+};
diff --git a/webui/src/context/keyboard-shortcuts-context.tsx b/webui/src/context/keyboard-shortcuts-context.tsx
new file mode 100644
index 000000000..89de8278e
--- /dev/null
+++ b/webui/src/context/keyboard-shortcuts-context.tsx
@@ -0,0 +1,153 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {
+ createContext,
+ FunctionComponent,
+ PropsWithChildren,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react';
+
+export interface ShortcutInfo {
+ key: string;
+ label: string;
+ order: number;
+}
+
+interface ShortcutEntry extends ShortcutInfo {
+ callback: () => void;
+}
+
+interface KeyboardShortcutsContextValue {
+ shortcuts: ShortcutInfo[];
+ register: (entry: ShortcutEntry) => void;
+ unregister: (key: string) => void;
+}
+
+const KeyboardShortcutsContext = createContext({
+ shortcuts: [],
+ register: () => {},
+ unregister: () => {}
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useKeyboardShortcuts = () => useContext(KeyboardShortcutsContext);
+
+export const KeyboardShortcutsProvider: FunctionComponent = ({ children }) => {
+ const registryRef = useRef>(new Map());
+ const [shortcuts, setShortcuts] = useState([]);
+
+ const sync = () =>
+ setShortcuts(
+ Array.from(registryRef.current.values())
+ .map(({ key, label, order }) => ({ key, label, order }))
+ .sort((a, b) => a.order - b.order)
+ );
+
+ const register = useCallback((entry: ShortcutEntry) => {
+ registryRef.current.set(entry.key, entry);
+ sync();
+ }, []);
+
+ const unregister = useCallback((key: string) => {
+ registryRef.current.delete(key);
+ sync();
+ }, []);
+
+ // Chord detection: only fire a shortcut when the key was pressed in isolation.
+ //
+ // Two subtleties drive the implementation:
+ //
+ // 1. Key identity: Shift changes e.key (Shift+/ → e.key='?'), but e.code is
+ // always the physical key ('Slash'). We track by e.code and store e.key at
+ // keydown so the correct character is available at keyup even if Shift was
+ // released in between.
+ //
+ // 2. Browser defaults: some browsers handle '/' as a find shortcut on keydown,
+ // before our keyup fires. When a solo registered key goes down we eagerly
+ // call e.preventDefault() to block that, then fire the callback on keyup.
+ //
+ // 3. Missed keyups: browsers don't always deliver keyup. On macOS a held Meta
+ // swallows the keyup of the other key (Cmd+C, Cmd+T, …), and losing window
+ // focus (Alt+Tab, opening a tab) sends the keyup elsewhere. Either leaves
+ // stale entries in `pressed`/`dirty` that permanently break detection, so we
+ // flush the transient state on window blur and when Meta is released.
+ useEffect(() => {
+ const pressed = new Map(); // code → key captured at keydown
+ const dirty = new Set(); // codes involved in a chord
+
+ const reset = () => {
+ pressed.clear();
+ dirty.clear();
+ };
+
+ // Ignore keys typed into inputs and keys pressed while a popup owns focus
+ // (MUI selects/menus/dialogs render as listbox/menu/dialog roles, not native elements).
+ const shouldIgnore = (target: EventTarget | null) => {
+ const el = target as HTMLElement;
+ return (
+ el.tagName === 'INPUT' ||
+ el.tagName === 'TEXTAREA' ||
+ el.tagName === 'SELECT' ||
+ el.isContentEditable ||
+ Boolean(el.closest?.('[role="listbox"], [role="menu"], [role="dialog"]'))
+ );
+ };
+
+ const onKeydown = (e: KeyboardEvent) => {
+ if (e.repeat || e.key === 'Shift') return;
+ if (pressed.size > 0) {
+ pressed.forEach((_, code) => dirty.add(code));
+ dirty.add(e.code);
+ } else if (!shouldIgnore(e.target) && registryRef.current.has(e.key)) {
+ e.preventDefault();
+ }
+ pressed.set(e.code, e.key);
+ };
+
+ const onKeyup = (e: KeyboardEvent) => {
+ if (e.key === 'Shift') return;
+ // Meta chords swallow the keyup of the other key, so once Meta is
+ // released flush anything still held to avoid stale state.
+ if (e.key === 'Meta') return reset();
+ const isDirty = dirty.has(e.code);
+ const key = pressed.get(e.code) ?? e.key;
+ pressed.delete(e.code);
+ dirty.delete(e.code);
+ if (isDirty || shouldIgnore(e.target)) return;
+ const entry = registryRef.current.get(key);
+ if (entry) entry.callback();
+ };
+
+ document.addEventListener('keydown', onKeydown);
+ document.addEventListener('keyup', onKeyup);
+ window.addEventListener('blur', reset);
+ return () => {
+ document.removeEventListener('keydown', onKeydown);
+ document.removeEventListener('keyup', onKeyup);
+ window.removeEventListener('blur', reset);
+ };
+ }, []);
+
+ return (
+ ({ shortcuts, register, unregister }), [shortcuts, register, unregister])}>
+ {children}
+
+ );
+};
diff --git a/webui/src/context/search/page-search-bar-context.tsx b/webui/src/context/search/page-search-bar-context.tsx
new file mode 100644
index 000000000..657289297
--- /dev/null
+++ b/webui/src/context/search/page-search-bar-context.tsx
@@ -0,0 +1,110 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {
+ createContext,
+ FunctionComponent,
+ ReactNode,
+ RefObject,
+ useCallback,
+ useContext,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react';
+
+/**
+ * Tracks whether a page-level search bar (e.g. the home hero) is active — the
+ * nav bar derives its own field's visibility from it.
+ */
+
+export interface PageSearchBarValue {
+ // A page-level search bar is registered — the nav bar hides its own field.
+ hasPageSearchBar: boolean;
+ // Synchronous read — `hasPageSearchBar` lags one render when a bar (un)registers
+ // in the same commit that emits a focus signal.
+ isPageSearchBarActive: () => boolean;
+ registerPageSearchBar: () => () => void;
+}
+
+const PageSearchBarContext = createContext({
+ hasPageSearchBar: false,
+ isPageSearchBarActive: () => false,
+ registerPageSearchBar: () => () => {}
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function usePageSearchBar(): PageSearchBarValue {
+ return useContext(PageSearchBarContext);
+}
+
+/**
+ * Marks the calling component as the page's search bar, so the nav bar hides its
+ * own field and hands focus requests over. Registered while mounted, or — when
+ * `visibilityRef` is given — only while that element is in the viewport. Returns
+ * whether the bar is currently registered; callers gate focus handling and their
+ * view-transition name on it.
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useRegisterPageSearchBar(visibilityRef?: RefObject): boolean {
+ const { registerPageSearchBar } = usePageSearchBar();
+ const [registered, setRegistered] = useState(true);
+ // Layout effect so the count is updated before other layout effects in the same commit.
+ useLayoutEffect(() => {
+ const el = visibilityRef?.current;
+ if (!el) {
+ return registerPageSearchBar();
+ }
+ let unregister: (() => void) | undefined;
+ const update = (visible: boolean) => {
+ if (visible && !unregister) {
+ unregister = registerPageSearchBar();
+ } else if (!visible && unregister) {
+ unregister();
+ unregister = undefined;
+ }
+ setRegistered(visible);
+ };
+ // Seed synchronously — the observer's first callback is async and the nav field would flash.
+ const rect = el.getBoundingClientRect();
+ update(rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth);
+ const observer = new IntersectionObserver(entries => update(entries[entries.length - 1].isIntersecting));
+ observer.observe(el);
+ return () => {
+ observer.disconnect();
+ unregister?.();
+ };
+ }, [registerPageSearchBar, visibilityRef]);
+ return registered;
+}
+
+export const PageSearchBarProvider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
+ // Ref for synchronous reads during a commit; the state mirror drives re-renders.
+ const pageSearchBarCount = useRef(0);
+ const [hasPageSearchBar, setHasPageSearchBar] = useState(false);
+ const registerPageSearchBar = useCallback(() => {
+ pageSearchBarCount.current++;
+ setHasPageSearchBar(true);
+ return () => {
+ pageSearchBarCount.current--;
+ setHasPageSearchBar(pageSearchBarCount.current > 0);
+ };
+ }, []);
+ const isPageSearchBarActive = useCallback(() => pageSearchBarCount.current > 0, []);
+ const value = useMemo(
+ () => ({ hasPageSearchBar, isPageSearchBarActive, registerPageSearchBar }),
+ [hasPageSearchBar, isPageSearchBarActive, registerPageSearchBar]
+ );
+ return {children};
+};
diff --git a/webui/src/context/search/search-context.tsx b/webui/src/context/search/search-context.tsx
new file mode 100644
index 000000000..3f969a342
--- /dev/null
+++ b/webui/src/context/search/search-context.tsx
@@ -0,0 +1,62 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { createContext, FunctionComponent, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SearchFocusProvider } from './search-focus-context';
+import { PageSearchBarProvider } from './page-search-bar-context';
+
+export interface SearchContextValue {
+ query: string;
+ setQuery: (q: string) => void;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const SearchContext = createContext({
+ query: '',
+ setQuery: () => {}
+});
+
+/**
+ * The draft query shared by the search fields. Only the fields themselves should
+ * read this (it changes per keystroke); pages read the applied filter from the
+ * URL via useSearch instead.
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useSearchQuery(): SearchContextValue {
+ return useContext(SearchContext);
+}
+
+// Mounts the whole search feature: the persisted query (so the search fields stay
+// in sync as the user navigates) plus the focus and page-bar contexts. Separate
+// contexts keep re-render scopes tight — the query changes per keystroke, the
+// others rarely. The `search` action lives in useSearch.
+export const SearchProvider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
+ const [query, setQuery] = useState('');
+ const [searchParams] = useSearchParams();
+ const urlQuery = searchParams.get('q') ?? '';
+
+ // Keep the fields in sync with URL query changes (back/forward, shared links, category tiles).
+ useEffect(() => {
+ setQuery(urlQuery);
+ }, [urlQuery]);
+
+ const value = useMemo(() => ({ query, setQuery }), [query]);
+ return (
+
+
+ {children}
+
+
+ );
+};
diff --git a/webui/src/context/search/search-focus-context.tsx b/webui/src/context/search/search-focus-context.tsx
new file mode 100644
index 000000000..5aa98de16
--- /dev/null
+++ b/webui/src/context/search/search-focus-context.tsx
@@ -0,0 +1,59 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { createContext, FunctionComponent, ReactNode, useContext, useMemo, useState } from 'react';
+import { GridStep } from '../../hooks/use-grid-cursor';
+import { Signal, useSignal } from '../../hooks/use-signal';
+
+/**
+ * Focus coordination between the search fields and the results grid. Signals are
+ * emitted by whichever component owns the intent; subscribers react via
+ * useSignalEffect and focus their own element, so no entry point needs a global
+ * DOM lookup.
+ */
+
+// Step the results cursor from the search field, or open the card under it.
+export type ResultsNavAction = GridStep | 'open';
+
+export interface SearchFocusValue {
+ // Ask the active search field (the page search bar when one is registered, nav bar otherwise) to focus.
+ searchFocusSignal: Signal;
+ // Drive the results grid's cursor while focus stays in the search field.
+ resultsNavigationSignal: Signal;
+ // Whether the search field has focus — the grid only shows its cursor then.
+ searchFocused: boolean;
+ setSearchFocused: (focused: boolean) => void;
+}
+
+const SearchFocusContext = createContext({
+ searchFocusSignal: { signal: 0, emit: () => {} },
+ resultsNavigationSignal: { signal: 0, emit: () => {} },
+ searchFocused: false,
+ setSearchFocused: () => {}
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useSearchFocus(): SearchFocusValue {
+ return useContext(SearchFocusContext);
+}
+
+export const SearchFocusProvider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
+ const searchFocusSignal = useSignal();
+ const resultsNavigationSignal = useSignal();
+ const [searchFocused, setSearchFocused] = useState(false);
+ const value = useMemo(
+ () => ({ searchFocusSignal, resultsNavigationSignal, searchFocused, setSearchFocused }),
+ [searchFocusSignal, resultsNavigationSignal, searchFocused]
+ );
+ return {children};
+};
diff --git a/webui/src/default/default-app.tsx b/webui/src/default/default-app.tsx
index 8976c20e4..6db67b827 100644
--- a/webui/src/default/default-app.tsx
+++ b/webui/src/default/default-app.tsx
@@ -8,6 +8,13 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/
+import '@fontsource-variable/geist/index.css';
+import '@fontsource-variable/geist-mono/index.css';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '../main.css';
import { createRoot } from 'react-dom/client';
import { useMemo } from 'react';
import { HelmetProvider } from 'react-helmet-async';
@@ -39,8 +46,7 @@ const service = new ExtensionRegistryService(`${location.protocol}//${serverHost
export const App = () => {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = useMemo(() => createDefaultTheme(prefersDarkMode ? 'dark' : 'light'), [prefersDarkMode]);
-
- const pageSettings = createPageSettings(prefersDarkMode, service.serverUrl);
+ const pageSettings = useMemo(() => createPageSettings(prefersDarkMode, service.serverUrl), [prefersDarkMode]);
return (
diff --git a/webui/src/default/menu-content.tsx b/webui/src/default/menu-content.tsx
index e078ad297..aa742baef 100644
--- a/webui/src/default/menu-content.tsx
+++ b/webui/src/default/menu-content.tsx
@@ -8,30 +8,22 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/
-import { FunctionComponent, PropsWithChildren, useContext, useRef } from 'react';
-import {
- Typography,
- MenuItem,
- Link,
- Button,
- IconButton,
- Accordion,
- AccordionSummary,
- Avatar,
- AccordionDetails
-} from '@mui/material';
-import { useLocation, Link as RouteLink } from 'react-router-dom';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { FunctionComponent, PropsWithChildren, useContext, useRef, useState } from 'react';
+import { Typography, MenuItem, Link, Button, IconButton, Avatar, Menu } from '@mui/material';
+import { useLocation, useNavigate, Link as RouteLink } from 'react-router-dom';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
import GitHubIcon from '@mui/icons-material/GitHub';
import MenuBookIcon from '@mui/icons-material/MenuBook';
-import ForumIcon from '@mui/icons-material/Forum';
import InfoIcon from '@mui/icons-material/Info';
import PublishIcon from '@mui/icons-material/Publish';
import AccountBoxIcon from '@mui/icons-material/AccountBox';
import { UserAvatar } from '../pages/user/avatar';
import { UserSettingsRoutes } from '../pages/user/user-settings-routes';
-import { styled, Theme } from '@mui/material/styles';
+import { alpha, styled, Theme } from '@mui/material/styles';
import { MainContext } from '../context';
+import { KbdKey } from '../components/kbd-key';
+import { useShortcut } from '../hooks/use-shortcut';
+import { focusOutline } from '../components/page-primitives';
import SettingsIcon from '@mui/icons-material/Settings';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import LogoutIcon from '@mui/icons-material/Logout';
@@ -39,6 +31,10 @@ import { AdminDashboardRoutes } from '../pages/admin-dashboard/admin-dashboard-r
import { LogoutForm } from '../pages/user/logout';
import { LoginComponent } from './login';
+// Shared destinations so a menu item's link, its keyboard shortcut, and its hint
+// can't drift apart. External docs open in the same tab, matching the link click.
+const DOCS_URL = 'https://github.com/eclipse/openvsx/wiki';
+
//-------------------- Mobile View --------------------//
// eslint-disable-next-line react-refresh/only-export-components
export const itemIcon = {
@@ -59,36 +55,44 @@ export const MenuItemText: FunctionComponent = ({ children })
};
export const MobileUserAvatar: FunctionComponent = () => {
- const context = useContext(MainContext);
- const user = context.user;
+ const { user } = useContext(MainContext);
const logoutFormRef = useRef(null);
+ const anchorRef = useRef(null);
+ const [open, setOpen] = useState(false);
+ const close = () => setOpen(false);
if (!user) {
return null;
}
return (
-
- } aria-controls='user-actions' id='user-avatar'>
+ <>
+
+
+
);
};
@@ -131,7 +135,7 @@ export const MobileMenuContent: FunctionComponent = () => {
/>
))}
{loginProviders && !location.pathname.startsWith(UserSettingsRoutes.ROOT) && (
-