eclipse-openvsx · netomi · Jul 16, 2026 · Jul 1, 2026 · Jul 1, 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
 - 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
@@ -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/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<PropsWithChildren<BannerProps>> = 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 (
-        <Collapse in={props.open}>
-            <Paper
-                elevation={0}
+        <Collapse in={open} timeout={{ enter: 800, exit: 300 }}>
+            <Box
                 sx={{
-                    display: 'block',
-                    width: '100%',
-                    mx: 'auto',
-                    pb: 2,
-                    pr: 2,
-                    pl: 2,
-                    pt: 2,
-                    color: cardColor,
-                    bgcolor: cardBackground,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '1rem',
+                    minHeight: '2.25rem',
+                    py: '0.375rem',
+                    // Left/right edges line up with the navbar content.
+                    px: { xs: '0.625rem', sm: '1.75rem' },
+                    bgcolor: bg,
+                    color: 'text.primary',
+                    // The link in the consumer content follows the tone's accent.
                     '& a': {
-                        color: cardColor,
-                        fontWeight: 'bold'
+                        color: accent,
+                        fontWeight: 700,
+                        textDecoration: 'none',
+                        '&:hover': { textDecoration: 'underline' }
                     }
                 }}>
-                <Grid container spacing={2}>
-                    <Grid item xs={12} sm sx={{ alignSelf: 'center' }}>
-                        {props.children}
-                    </Grid>
-                    {props.showDismissButton && (
-                        <Grid
-                            item
-                            xs={12}
-                            sm='auto'
-                            sx={{
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: '0.5rem', minWidth: 0 }}>
+                    <Icon sx={{ color: accent, fontSize: '1.125rem', flexShrink: 0 }} />
+                    <Box component='span' sx={{ fontSize: '0.875rem', lineHeight: 1.4 }}>
+                        {children}
+                    </Box>
+                </Box>
+                {showDismissButton &&
+                    (dismissButtonLabel ? (
+                        <Button
+                            variant='text'
+                            onClick={dismissButtonOnClick}
+                            sx={theme => ({
+                                flexShrink: 0,
+                                color: accent,
+                                px: 2,
+                                py: 0.5,
+                                fontWeight: 600,
+                                fontSize: '0.8125rem',
                                 whiteSpace: 'nowrap',
-                                alignSelf: 'center',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                flexBasis: '100%'
-                            }}>
-                            <Button variant='outlined' onClick={props.dismissButtonOnClick}>
-                                {props.dismissButtonLabel ?? 'Close'}
-                            </Button>
-                        </Grid>
-                    )}
-                </Grid>
-            </Paper>
+                                borderRadius: `${theme.shape.borderRadius}px`,
+                                '&:hover': { backgroundColor: 'color-mix(in srgb, currentColor 8%, transparent)' }
+                            })}>
+                            {dismissButtonLabel}
+                        </Button>
+                    ) : (
+                        <IconButton
+                            size='small'
+                            aria-label='Dismiss'
+                            onClick={dismissButtonOnClick}
+                            sx={{ flexShrink: 0, color: 'inherit', mr: '-0.375rem' }}>
+                            <CloseIcon sx={{ fontSize: '1.125rem' }} />
+                        </IconButton>
+                    ))}
+            </Box>
         </Collapse>
     );
 };
@@ -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
@@ -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,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<SvgIconProps>;
+    onClick: () => void;
+}
+
+export const CategoryCard: FunctionComponent<CategoryCardProps> = ({ label, icon: Icon, onClick }) => (
+    <Root onClick={onClick}>
+        <Box
+            sx={{
+                width: '1.875rem',
+                height: '1.875rem',
+                borderRadius: '8px',
+                bgcolor: 'accentSoft',
+                color: 'secondary.main',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0
+            }}>
+            <Icon sx={{ fontSize: '1.0625rem' }} />
+        </Box>
+        <Typography noWrap sx={{ fontSize: '0.875rem', fontWeight: 600, minWidth: 0 }}>
+            {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>
+);