Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Proposal: Modernize the UI with a Fluent 2 / Windows 11 design

Open
  • Is something wrong?
#953 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
18/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
react, typescript
Domain
design, frontend

Research direction

Start in src/vscode-windhawk-ui, where app.tsx holds the existing ConfigProvider and where the FluentProvider would sit beside it, then read AppHeader.tsx and ModCard.tsx, the Home screen pieces the proposal uses for a proof of concept. Done would need maintainer agreement on the approach and migration steps first, then a Home-screen conversion with before and after screenshots. The large compiled app.css is the eventual cleanup target.

Written by the indexing model from the issue text.

Description

enhancement

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:

  1. Add a FluentProvider in app.tsx next to the existing ConfigProvider. antd keeps rendering
    as before. i18n and RTL stay untouched.
  2. 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.
  3. Move the remaining screens after that, one per PR (Explore, Settings, About, the mod
    details views).
  4. 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.

Dominant language
Rust
Stars
9.3k
Forks
246
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ramensoftware/windhawk

All issues in ramensoftware/windhawk

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.