Skip to content

[codex] refine WebView UI layout #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zclucas merged 1 commit into from
May 7, 2026
Merged

[codex] refine WebView UI layout #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Project Instructions

## Project Overview

- RMT is an AutoHotkey v2 macro tool with a React/TypeScript WebView2 UI.
- Key entry points are `RMT.ahk`, `Main\UIUtil.ahk`, `Main\WebView2UI.ahk`, `WebViewApp\src`, `Web\JS\SingleHtml.js`, and `PackRMT.ps1`.
- Treat `WebViewApp` as the source for the new UI. Treat root `index.html` and release folders as generated packaging output unless a task explicitly targets packaged artifacts.

## Build, Test, And Run

- Build the WebView UI with `npm run build` from `WebViewApp`.
- Run the repository verification script with `powershell -ExecutionPolicy Bypass -File .\scripts\verify.ps1 -AhkExe .\.tools\AutoHotkey\v2\AutoHotkey64.exe`.
- Package releases with `powershell -ExecutionPolicy Bypass -File .\PackRMT.ps1 -ReleaseType both -Distribution both -OutputDir C:\tmp\RMTRelease -NoWait` when release validation is required.
- Validate release layout with `powershell -ExecutionPolicy Bypass -File .\scripts\verify-release-layout.ps1 -ReleaseRoot C:\tmp\RMTRelease\RMTv2.0`.

## Coding Conventions

- Keep edits scoped to the requested behavior and follow the existing AutoHotkey, React, TypeScript, and CSS patterns.
- Preserve Simplified Chinese UI copy unless the task explicitly asks for another language.
- Avoid treating `ReleaseX32`, `ReleaseX64`, or other generated staging folders as source of truth.
- Do not fetch, push, tag, publish, or create release artifacts unless the user explicitly asks.

## UI Workflow

- For UI changes, update `WebViewApp\src` first, then build so generated WebView assets stay in sync.
- For live UI development without rebuilding after every edit, run the Vite dev server and start RMT with `RMT_WEBVIEW_DEV=1`; see `docs\development.md`.
- Keep UI compact and practical; use color for state and emphasis, not as unrelated decoration.
- When changing colors or buttons, prefer existing theme/color utilities so controls react consistently to color method changes.
- Verify that button labels fit, especially in macro item rows and settings controls.

## Version And History

- Record maintenance-significant changes in `history.md`.
- Follow existing version and release documentation before bumping versions or archiving packages.
- Do not commit local handoff or temporary planning files unless the user explicitly asks.
1 change: 1 addition & 0 deletions WebViewApp/dist/assets/main-6EIFqRhE.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion WebViewApp/dist/assets/main-p_kL_GN5.js → WebViewApp/dist/assets/main-9vTrqAc6.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion WebViewApp/dist/assets/main-DcxjBwCV.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions WebViewApp/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RMT</title>
<script type="module" crossorigin src="./assets/main-p_kL_GN5.js"></script>
<link rel="stylesheet" crossorigin href="./assets/main-DcxjBwCV.css">
<script type="module" crossorigin src="./assets/main-9vTrqAc6.js"></script>
<link rel="stylesheet" crossorigin href="./assets/main-6EIFqRhE.css">
</head>
<body>
<div id="root"></div>
Expand Down
6 changes: 3 additions & 3 deletions WebViewApp/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1307,6 +1307,9 @@ function SettingsPanel({
<button className="legacy-command" onClick={() => runAction("editCmdTip")} type="button">
{uiCopy.tool.commandDisplay}
</button>
<button className="legacy-command" onClick={() => runAction("openToolRecordSetting")} type="button">
{uiCopy.tool.recordOptions}
</button>
<label className="legacy-check">
<input type="checkbox" checked={settings.fixedMenuWheel} onChange={(event) => { patchLocalSettings("fixedMenuWheel", event.target.checked); updateSetting("fixedMenuWheel", event.target.checked); }} />
{uiCopy.settings.fixedMenuWheel}
Expand All @@ -1315,9 +1318,6 @@ function SettingsPanel({
<input type="checkbox" checked={settings.noVariableTip} onChange={(event) => { patchLocalSettings("noVariableTip", event.target.checked); updateSetting("noVariableTip", event.target.checked); }} />
{uiCopy.settings.noVariableTip}
</label>
<button className="legacy-command" onClick={() => runAction("openToolRecordSetting")} type="button">
{uiCopy.tool.recordOptions}
</button>
<label className="legacy-check">
<input type="checkbox" checked={settings.modalSubGui} onChange={(event) => { patchLocalSettings("modalSubGui", event.target.checked); updateSetting("modalSubGui", event.target.checked); }} />
{uiCopy.settings.modalSubGui}
Expand Down
110 changes: 55 additions & 55 deletions WebViewApp/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -877,16 +877,18 @@ h2 {
.legacy-switch-grid {
display: grid;
align-items: center;
gap: 12px 28px;
grid-template-columns: repeat(4, max-content);
gap: 10px 22px;
grid-template-columns: repeat(4, minmax(88px, max-content));
}

.legacy-switch-grid .legacy-check,
.legacy-switch-grid .legacy-command {
font-size: 15px;
margin: 0;
min-height: 34px;
min-width: 0;
padding-left: 10px;
padding-right: 10px;
padding-left: 8px;
padding-right: 8px;
}

.legacy-interface-grid {
Expand Down Expand Up @@ -931,8 +933,8 @@ h2 {
.help-legacy-page,
.reward-panel,
.thanks-panel {
font-size: 16px;
line-height: 1.65;
font-size: 17px;
line-height: 1.7;
max-width: none;
}

Expand All @@ -949,7 +951,7 @@ h2 {
}

.help-supplement {
font-size: 16px;
font-size: 17px;
font-weight: 600;
margin: 0;
text-align: center;
Expand Down Expand Up @@ -995,7 +997,7 @@ h2 {
border: 0;
color: var(--rmt-info);
display: inline-flex;
font-size: 16px;
font-size: 17px;
gap: 4px;
margin: 0;
min-height: 0;
Expand Down Expand Up @@ -1432,23 +1434,23 @@ h2 {

.classic-app .titlebar {
background: var(--rmt-title-bg);
border-bottom: 2px solid var(--rmt-title-bottom);
border-bottom: 1px solid var(--rmt-title-bottom);
color: var(--rmt-title-text);
height: 40px;
height: 34px;
}

.classic-app .drag-region {
font-size: 17px;
font-size: 15px;
font-weight: 700;
gap: 8px;
padding: 0 9px;
gap: 7px;
padding: 0 8px;
}

.classic-app .app-icon {
flex: 0 0 auto;
height: 28px;
height: 24px;
object-fit: contain;
width: 28px;
width: 24px;
}

.classic-app .version-label {
Expand All @@ -1458,8 +1460,8 @@ h2 {
.classic-app .window-actions button {
border-left: 1px solid rgba(0, 0, 0, 0.08);
color: var(--rmt-title-text);
height: 40px;
min-height: 40px;
height: 34px;
min-height: 34px;
}

.classic-app .window-actions button:hover {
Expand All @@ -1474,7 +1476,7 @@ h2 {
.classic-body {
display: grid;
flex: 1;
grid-template-columns: 218px minmax(0, 1fr);
grid-template-columns: 198px minmax(0, 1fr);
min-height: 0;
}

Expand All @@ -1483,23 +1485,23 @@ h2 {
border-right: 1px solid var(--rmt-border);
display: flex;
flex-direction: column;
gap: 12px;
gap: 10px;
min-height: 0;
overflow: hidden;
padding: 12px 14px 12px;
padding: 10px 12px;
z-index: 2;
}

.sidebar-section {
border-bottom: 1px solid var(--rmt-border);
display: grid;
gap: 9px;
padding-bottom: 14px;
gap: 8px;
padding-bottom: 12px;
}

.sidebar-section.global-actions {
border-bottom: 0;
gap: 9px;
gap: 8px;
}

.side-label {
Expand All @@ -1509,10 +1511,10 @@ h2 {

.config-select-button {
justify-content: flex-start;
font-size: 15px;
min-height: 50px;
font-size: 14px;
min-height: 42px;
overflow: hidden;
padding: 7px 12px;
padding: 6px 10px;
text-overflow: ellipsis;
width: 100%;
}
Expand All @@ -1521,7 +1523,7 @@ h2 {
.side-card {
border-radius: 5px;
justify-content: center;
min-height: 38px;
min-height: 34px;
width: 100%;
}

Expand All @@ -1536,37 +1538,34 @@ h2 {
}

.side-button.red {
background: var(--rmt-danger-soft);
border-color: var(--rmt-danger);
color: var(--rmt-danger);
background: var(--rmt-button-bg);
border-color: var(--rmt-button-border);
color: var(--rmt-button-text);
}

.side-button.green:hover,
.side-button.gray:hover,
.side-button.blue:hover {
.side-button.blue:hover,
.side-button.red:hover {
background: var(--rmt-button-hover);
color: var(--rmt-button-hover-text);
}

.side-button.red:hover {
background: var(--rmt-danger);
color: #ffffff;
}

.side-card {
align-items: stretch;
background: var(--rmt-surface);
display: grid;
gap: 7px;
gap: 5px;
justify-content: stretch;
min-height: 76px;
padding: 9px 12px;
min-height: 62px;
padding: 7px 10px;
text-align: left;
}

.side-card.is-active {
border-color: var(--rmt-danger);
color: var(--rmt-danger);
background: var(--rmt-primary-soft);
border-color: var(--rmt-primary);
color: var(--rmt-text);
}

.side-card span {
Expand All @@ -1584,22 +1583,22 @@ h2 {
color: var(--rmt-text);
display: block;
font-family: "Cascadia Code", Consolas, monospace;
font-size: 14px;
font-size: 13px;
font-weight: 600;
padding: 4px 8px;
padding: 3px 7px;
text-align: right;
}

.shortcut-line {
margin-top: -8px;
margin-top: -6px;
}

.sidebar-save {
margin-top: auto;
}

.sidebar-save .side-button {
min-height: 40px;
min-height: 36px;
}

.classic-main {
Expand Down Expand Up @@ -1857,16 +1856,16 @@ h2 {
.module-macro-row {
align-items: center;
display: grid;
gap: 6px;
gap: 5px;
grid-template-columns:
42px
minmax(142px, 0.72fr)
132px
84px
68px
minmax(118px, 0.52fr)
126px
80px
64px
82px
84px
214px;
78px
220px;
min-width: 0;
}

Expand All @@ -1882,7 +1881,7 @@ h2 {
}

.module-macro-header span:nth-child(2) {
padding-left: 14px;
padding-left: 10px;
text-align: left;
}

Expand Down Expand Up @@ -2065,12 +2064,13 @@ h2 {

.row-actions {
display: grid;
gap: 4px;
grid-template-columns: 62px 78px 62px;
gap: 3px;
grid-template-columns: 68px 78px 68px;
}

.row-actions button,
.row-actions .row-disabled {
gap: 3px;
min-width: 0;
padding-left: 4px;
padding-right: 4px;
Expand Down
Loading
Loading