eclipse-openvsx · gnugomez · Jul 1, 2026 · Jul 1, 2026 · Jul 2, 2026 · Jul 2, 2026
diff --git 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
 - 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
@@ -3,9 +3,6 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     </head>
 
     <body>

diff --git 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/categories.ts 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<SvgIconProps> = 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<ExtensionCategory, FunctionComponent<SvgIconProps>> = {
+    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
@@ -0,0 +1,61 @@
+/********************************************************************************
+ * 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',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    overflow: 'hidden',
+    padding: '1.125rem',
+    color: theme.palette.text.primary,
+    width: '100%',
+    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<SvgIconProps>;
+    onClick: () => void;
+}
+
+export const CategoryCard: FunctionComponent<CategoryCardProps> = ({ label, icon: Icon, onClick }) => (
+    <Root onClick={onClick}>
+        <Box
+            sx={{
+                width: '2.375rem',
+                height: '2.375rem',
+                borderRadius: '10px',
+                bgcolor: 'accentSoft',
+                color: 'secondary.main',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                mb: '0.875rem',
+                flexShrink: 0
+            }}>
+            <Icon sx={{ fontSize: '1.25rem' }} />
+        </Box>
+        <Typography sx={{ fontSize: '0.9375rem', fontWeight: 600, mb: '0.1875rem' }}>{label}</Typography>
+    </Root>
+);
diff --git a/webui/src/components/category-list-item.tsx 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<SvgIconProps>;
+    isSelected: boolean;
+    onClick: () => void;
+}
+
+export const CategoryListItem: FunctionComponent<CategoryListItemProps> = ({
+    label,
+    icon: Icon,
+    isSelected,
+    onClick
+}) => (
+    <Root isSelected={isSelected} aria-current={isSelected ? 'true' : undefined} onClick={onClick}>
+        <Icon sx={{ fontSize: '0.9375rem', opacity: 0.75, flexShrink: 0 }} />
+        {label}
+    </Root>
+);
diff --git a/webui/src/components/category-pill.tsx 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<SvgIconProps>;
+    isSelected?: boolean;
+    onClick: () => void;
+}
+
+export const CategoryPill: FunctionComponent<CategoryPillProps> = ({ label, icon: Icon, isSelected, onClick }) => {
+    const ref = useRef<HTMLButtonElement>(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 (
+        <Root ref={ref} isSelected={isSelected} aria-pressed={!!isSelected} onClick={onClick}>
+            <Icon sx={{ fontSize: '1rem', flexShrink: 0, color: 'secondary.main' }} />
+            {label}
+        </Root>
+    );
+};