feat: redesign UI as a classic Windows wizard#46
Merged
Conversation
Replaces the flat material card layout with a Windows-style wizard shell while keeping the existing navy/green brand palette. Layout changes: - New WizardLayout.vue: navy header, dark step-sidebar (1→2→3→4 with dot/check indicators), white content pane, classic grey footer bar - routes.js switched from MainLayout to WizardLayout Page changes (all use new .wiz-page chrome — header band + scrollable body + sticky Back/Next nav bar): - LoginPage: provider-row cards (GitHub / GitLab) with hover highlight - ReposPage: flat bordered list rows replacing the card grid - ExtractPage: two-panel config layout (folder tree | destination), separate "Extracting…" state with StatusPoller, reset flow - app.scss: shared .wiz-page utility classes
Adds a bordered intro box above the provider buttons on step 1 that explains what git-extract does and outlines the three-step flow, so first-time visitors immediately understand the tool's purpose.
Full Win98 aesthetic overhaul while keeping the navy/green palette: Shell - Classic #008080 teal desktop background - Centered window with Win98 3D raised box-shadow border - Title bar: navy gradient with ⎇ icon + cosmetic _□✕ controls - Left sidebar: brand navy with ► / ✔ / ○ step indicators - Content pane: inset Win98 border - Footer: two-line separator + status text + Back/Next/Cancel buttons - All buttons use the authentic 4-layer inset box-shadow (raised/sunken) - Font: Tahoma / MS Sans Serif throughout composables/useWizardNav.js (new) - provide/inject channel so each page registers its Back/Next handlers and the layout renders them in the window footer Pages - LoginPage: Win98 list-view rows for provider selection, inset text input for GitLab host, yellow info box for tool description - ReposPage: Explorer-style list view with column headers (Name / Provider / Last updated), click to select + double-click or Next button to confirm - ExtractPage: native <select> and <input> fields with Win98 inset style; nav buttons wired through useWizardNav
Color palette (#011826 / #168C40 / #6BBF89 / #A7D9B8 / #F2F2F2): - $primary #011826 darkest navy — desktop, title bar, sidebar, headings - $secondary #168C40 forest green — active step arrow, primary buttons, hover bg - $accent #6BBF89 sage green — done-step checkmarks, link buttons - $positive #168C40 (same as secondary) - $info #6BBF89 (same as accent) - Win98 chrome: #F2F2F2 replaces old #c0c0c0; hover highlight uses #A7D9B8 Step restructure (4 steps instead of 3): - Step 1 /welcome WelcomePage (new) — intro + overview, no auth required - Step 2 /login LoginPage — sign-in only, Back → /welcome - Step 3 /repos ReposPage — repository picker, Back → /login - Step 4 /extract ExtractPage — configure & extract, Back → /repos Root / now redirects to /welcome; WelcomePage Next button skips to /repos when already authenticated.
Win98Window.vue (new component): - Draggable: mousedown on title bar records offset; mousemove/mouseup listeners on document track position and release; clamped to viewport - Minimize: hides window body, shows a Win98 taskbar at the bottom; clicking taskbar button restores the window - Maximize / Restore: toggles position:fixed inset:0 (double-click title bar also toggles); restore icon ❐ vs □ - Close ✕: opens a modal confirm dialog (Yes / No); on Yes emits 'close' to parent (WizardLayout resets auth and routes to /welcome) - Title bar gradient: #0d4a88 → #1a78cc (clear blue, visually distinct from the #011826 dark-navy desktop background) - Window border: border 2px + outline 1px #000 + box-shadow for depth — ensures the window edge is always visible on the desktop - Close button turns red on hover (classic Win98 UX hint) WizardLayout.vue: - Now just a thin shell that uses <Win98Window> and provides the sidebar + content + footer as slotted content
All three nav buttons are now permanently visible in the wizard footer. Each page sets onFinish/finishDisabled so the primary action (Extract & Push, Done) lives on the Finish button rather than overloading Next.
LoginPage now shows two large selectable icon tiles (GitHub / GitLab) with classic raised/sunken Win98 borders. Clicking a tile enables the "Sign In >" Next button; double-click proceeds immediately. The GitLab host group-box fades in only when GitLab is selected. Finish button changed from green --primary to --default (grey with a black outline ring), matching the Win98 default-button convention.
Classic sunken listbox (inset box-shadow border) with two rows. Unfocused selection is grey; focused selection turns navy ($primary). Arrow keys navigate, Enter proceeds. GitLab host group-box slides in below the list when GitLab is selected.
LoginPage now uses Win98-style radio option rows — each option has a native radio button, provider icon, name and description. Selecting one recesses the row (sunken inset) matching the Win98 dialog style. Win98Window: dblclick on the title bar no longer maximises when the Maximize button is disabled (new maximizable prop, default false).
Removed all raised/sunken panel borders from individual provider rows. Options now sit flat on the white page background with a native radio button, bold name + small icon, and indented description — matching real Win98 wizard pages (Internet Connection Wizard style).
Track vw/vh as reactive refs, updated via a window resize listener. Effective window size is min(desired, viewport) so the window shrinks to fit small screens. Position is re-clamped after every resize so the window can never be dragged or pushed outside the visible area.
Add opacity:1 to all :disabled rules to cancel the browser's built-in opacity dimming (the main cause of the 'modern' look). Disabled buttons now show grey text (#808080) with a 1px white emboss offset — the classic Win98 engraved-text effect — while keeping their full raised 3D border unchanged.
The _ and □ Unicode characters rendered as font glyphs at 9px, which never matched Win98's bitmap icons. Now using CSS ::before pseudo- elements: - Minimize: 8×2px horizontal bar nudged toward the bottom - Maximize: 8×7px rectangle with a 2px top border (the title bar) - Close: keeps the ✕ text (always enabled, renders fine) Disabled state: icon shape turns grey (#808080) and gets a 1px white drop-shadow via filter:drop-shadow — the authentic Win98 emboss effect applied to the shape rather than to text.
Confirming close (Yes in the dialog) now triggers:
1. Instant monitor-flicker CSS animation into a full-screen BSOD
(#0000AA) with authentic Win98 fatal-exception text and a live
3-second countdown ("Restarting git-extract setup in N...")
2. At 3.5 s the screen collapses to black (monitor off)
3. At 4.2 s the BSOD is dismissed, 'close' is emitted, and the
wizard reboots to the Welcome step
Confirming close now plays a ~12.5 s sequence:
1. BSOD (#0000AA) with 3 s countdown — existing
2. Black (CRT off between screens)
3. BIOS POST — Phoenix AwardBIOS header, memory test counting
up (16384 → 131072 → 524288K OK), IDE drive detection,
boot-menu hint, "Booting from CD-ROM..." — lines stagger in
via CSS animation-delay on each .boot-line
4. Black
5. CD-ROM boot — ATAPI drive, boot-sector load, blinking cursor
after "Press any key to boot from CD-ROM."
6. Black
7. Starting Windows 98... — classic white-on-black text
8. Black — monitor off
9. bootPhase resets to null, 'close' emitted, wizard reboots
to Welcome step
Phoenix → Fenix, AwardBIOS → RewardBIOS, Intel → Intek, Pentium III → Pentagram III, ST320423A → XS320423A, ASUS → AZUS, Ultra DMA → Ultra DXA, Microsoft Windows 98 → Microtough Winders 98
- Clicking the ⎇ icon opens a Win98-style system menu dropdown with Minimize / Maximize (both disabled/greyed) and Close (Alt+F4). Double-clicking the icon opens the close-confirm dialog directly. Clicking anywhere outside dismisses the menu via a document mousedown listener. - Removed hover background/colour change from all chrome buttons — Win98 title bar buttons have no hover effect.
BlueScreen.vue — presentational; renders the BSOD blue screen with
a countdown prop.
BootSequence.vue — self-contained sequence (BSOD → BIOS → CD boot →
Winders 98 start); runs entirely on onMounted,
emits 'done' when finished. Uses <BlueScreen>
internally for the BSOD phase.
Win98Window.vue — now just mounts <BootSequence v-if="showBoot">
and calls emit('close') on its 'done' event;
all content arrays, phase state and timing
logic removed.
Classic BIOS-style logo box (dark blue #000080, grey border) fixed to the top-right corner of the BIOS phase. Shows the Fenix flame glyph in amber, FENIX brand in large white bold text, RewardBIOS product name, version, and git-extract Systems attribution.
The old logo used CSS background, border, flexbox and multiple font sizes — things that didn't exist in 1998 BIOS text modes. New approach: each line is a <div> containing one row of the ASCII box, drawn entirely with Unicode box-drawing characters (╔ ═ ║ ╠ ╚ etc.). The only CSS is font-family, font-size, line-height and color per line — matching how real Award/Phoenix BIOS logos actually looked.
Replace ASCII box-drawing BIOS logo with a canvas-based pixel-art
graphic (80×50 px, CSS-scaled 3× with image-rendering: pixelated).
Draws a dithered dark-blue background, chunky 5×5 'FENIX' in yellow,
separator line, and small variable-width pixel-font subtitles —
matching the low-res bitmap look of real 90s Award/AMI BIOS cards.
Split the single Configure & Extract step into four dedicated pages:
/extract/paths – branch selector + FolderTree folder picker
/extract/options – target repo/branch/path + generate project file
/extract/progress – InstallShield-style segmented progress bar with
scrolling status log; POSTs job and polls status
/extract/finish – summary panel with source/target details
Wizard sidebar grows from 4 to 7 steps. All inter-step state
(sourceBranch, targetBranch, generateProjectFile, extractRunId, …)
moved to the repos Pinia store so it persists across page transitions.
Shared Win98 form controls (w98-select, w98-input-full, w98-link-btn)
promoted from scoped CSS to global app.scss.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
DEL during POST → Award-style BIOS Setup Utility screen
- 2-column menu (12 entries), arrow-key navigation
- Any of Esc / F10 / Enter exits and resumes boot from cdboot
F12 during POST → Boot Device Priority menu
- CD-ROM / Hard Disk / Floppy, arrow-key selection
- CD-ROM / Floppy → resume normal cdboot sequence
- Hard Disk → shows 'DISK BOOT FAILURE' screen for 2.8 s,
then automatically falls back to CD-ROM boot
Any key during cdboot → skips 'Press any key' wait
and immediately jumps to the Winders 98 start screen
Internal: go() now stores timer IDs; cancelAll() clears them
so entering a sub-screen properly cancels the scheduled phases.
keydown listener added on mount, removed on unmount.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the flat Material card layout with a Windows-style wizard shell, keeping the existing navy
#1e2e4a/ green#2ea84ebrand palette throughout.Visual structure
Files changed
src/layouts/WizardLayout.vuesrc/router/routes.jsMainLayout→WizardLayoutsrc/css/app.scss.wiz-pagechrome classessrc/pages/LoginPage.vuesrc/pages/ReposPage.vuesrc/pages/ExtractPage.vueTest plan
npm -w frontend run lint— cleannpm -w frontend run build— succeeds