Background
The panel UI (Home, Explore, Settings, About) is built on Ant Design v4 with a dark theme
that's compiled in statically. It works, but it has drifted from how Windows 11 looks today:
the geometry, the Mica surfaces, the typography and the controls, and there's no light mode
at all. The goal here is to bring it in line with Fluent 2, which is the design language
WinUI 3 apps use.
Why Fluent UI React, not WinUI 3
The UI isn't native. It's a React app rendered inside a VS Code webview (src/vscode-windhawk-ui),
so XAML/WinUI 3 doesn't apply. The web-side equivalent is Fluent UI React v9
(@fluentui/react-components), Microsoft's implementation of Fluent 2. Same design language,
fits the current React 18 / TypeScript setup, no change to the hosting model.
Plan
This would go in steps instead of one large rewrite, with both libraries running at the same
time until the migration is finished:
- Add a FluentProvider in app.tsx next to the existing ConfigProvider. antd keeps rendering
as before. i18n and RTL stay untouched.
- Convert the Home screen first as a proof of concept: the navigation in AppHeader.tsx and
the cards in ModCard.tsx. Before/after screenshots attached.
- Move the remaining screens after that, one per PR (Explore, Settings, About, the mod
details views).
- Once nothing imports antd anymore, remove it. That also cuts down the large compiled
app.css.
System light/dark would be straightforward to wire up along the way if that's wanted, and it
would match how native Win11 apps behave.
Open questions
Before putting real work into PRs:
- Is this something you'd consider merging at all?
- Any constraints I should know about (bundle size, older Windows versions, design
preferences you already have)?
- Smaller PRs or larger ones?
I can start with the Home screen alone so the result is visible before deciding on the rest.
Background
The panel UI (Home, Explore, Settings, About) is built on Ant Design v4 with a dark theme
that's compiled in statically. It works, but it has drifted from how Windows 11 looks today:
the geometry, the Mica surfaces, the typography and the controls, and there's no light mode
at all. The goal here is to bring it in line with Fluent 2, which is the design language
WinUI 3 apps use.
Why Fluent UI React, not WinUI 3
The UI isn't native. It's a React app rendered inside a VS Code webview (src/vscode-windhawk-ui),
so XAML/WinUI 3 doesn't apply. The web-side equivalent is Fluent UI React v9
(@fluentui/react-components), Microsoft's implementation of Fluent 2. Same design language,
fits the current React 18 / TypeScript setup, no change to the hosting model.
Plan
This would go in steps instead of one large rewrite, with both libraries running at the same
time until the migration is finished:
as before. i18n and RTL stay untouched.
the cards in ModCard.tsx. Before/after screenshots attached.
details views).
app.css.
System light/dark would be straightforward to wire up along the way if that's wanted, and it
would match how native Win11 apps behave.
Open questions
Before putting real work into PRs:
preferences you already have)?
I can start with the Home screen alone so the result is visible before deciding on the rest.