From 120fea88b339cb03ca1757ea577440e3e76972a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E9=98=B3?= Date: Tue, 28 Jul 2026 11:46:39 +0800 Subject: [PATCH 1/5] docs: design rounded sidebar brand icon --- ...debar-brand-icon-rounded-corners-design.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/superpowers/specs/2026-07-28-sidebar-brand-icon-rounded-corners-design.md diff --git a/docs/superpowers/specs/2026-07-28-sidebar-brand-icon-rounded-corners-design.md b/docs/superpowers/specs/2026-07-28-sidebar-brand-icon-rounded-corners-design.md new file mode 100644 index 0000000..bc7b3a4 --- /dev/null +++ b/docs/superpowers/specs/2026-07-28-sidebar-brand-icon-rounded-corners-design.md @@ -0,0 +1,29 @@ +# Sidebar Brand Icon Rounded Corners Design + +## Goal + +Make the OfficeDex icon in the sidebar brand block appear with its intended rounded outline instead of showing the opaque black square corners contained in the PNG. + +## Scope + +- Change only the sidebar brand mark rendered by `Shell`. +- Keep `public/officedex-logo.png` unchanged. +- Do not change the macOS Dock icon, Windows icon, installer artwork, or About screen icon. +- Include the fix in OfficeDex `v0.6.7`. + +## Design + +Apply a rounded clipping boundary to `.brand-mark` in `src/renderer/styles/shell.css`: + +- use an approximately 20% corner radius for the 40px square mark; +- hide overflow so the opaque black corners of the source PNG are clipped; +- preserve the existing image dimensions and `object-fit: contain` behavior. + +This keeps the fix local to the affected UI surface and avoids altering a shared image asset. + +## Verification + +1. Add a focused regression assertion that the sidebar brand mark stylesheet defines both rounded corners and overflow clipping. +2. Run the focused Shell test and the relevant renderer suite. +3. Build or run the local UI and visually confirm that the sidebar icon has rounded corners without changing its size or alignment. +4. Let the `v0.6.7` Release workflow verify the complete packaged application on macOS and Windows. From 6373f5d3e25b338b7f5085d3877d6b1007f34231 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E9=98=B3?= Date: Tue, 28 Jul 2026 11:48:59 +0800 Subject: [PATCH 2/5] docs: plan rounded sidebar icon release --- ...7-28-sidebar-brand-icon-rounded-corners.md | 271 ++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 docs/superpowers/plans/2026-07-28-sidebar-brand-icon-rounded-corners.md diff --git a/docs/superpowers/plans/2026-07-28-sidebar-brand-icon-rounded-corners.md b/docs/superpowers/plans/2026-07-28-sidebar-brand-icon-rounded-corners.md new file mode 100644 index 0000000..2d66232 --- /dev/null +++ b/docs/superpowers/plans/2026-07-28-sidebar-brand-icon-rounded-corners.md @@ -0,0 +1,271 @@ +# Sidebar Brand Icon Rounded Corners Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Clip the opaque square corners of the OfficeDex sidebar logo so the visible brand icon has its intended rounded outline, then ship the fix in OfficeDex `v0.6.7` with OfficeCLI `0.2.121` bundled. + +**Architecture:** Keep the source PNG and system application icons unchanged. Apply clipping only at the `.brand-mark` presentation boundary, with a focused stylesheet regression test, then verify the complete release metadata and packaged build workflow. + +**Tech Stack:** React, TypeScript, CSS, Vitest, Wails v2, GitHub Actions + +--- + +## File Structure + +- `src/renderer/components/Shell.test.tsx`: regression assertion for the sidebar brand-mark clipping contract. +- `src/renderer/styles/shell.css`: rounded clipping boundary for the 40px sidebar brand mark. +- `package.json`: OfficeDex release version `0.6.7` and OfficeCLI pin `0.2.121`. +- `package-lock.json`: root package metadata synchronized to `0.6.7`. +- `wails.json`: packaged product version synchronized to `0.6.7`. + +### Task 1: Add the failing sidebar icon regression test + +**Files:** +- Modify: `src/renderer/components/Shell.test.tsx` +- Test: `src/renderer/components/Shell.test.tsx` + +- [ ] **Step 1: Write the failing test** + +Add this test after `uses the OfficeDex PNG app icon for the sidebar brand mark`: + +```ts +it("clips the opaque sidebar logo asset to rounded corners", () => { + const css = readFileSync("src/renderer/styles/shell.css", "utf8"); + const brandMarkRule = css.match(/\.brand-mark\s*\{[^}]*\}/s)?.[0] ?? ""; + + expect(brandMarkRule).toMatch(/border-radius:\s*8px;/); + expect(brandMarkRule).toMatch(/overflow:\s*hidden;/); +}); +``` + +- [ ] **Step 2: Run the focused test and verify RED** + +Run: + +```bash +npx vitest run src/renderer/components/Shell.test.tsx -t "clips the opaque sidebar logo asset to rounded corners" +``` + +Expected: FAIL because `.brand-mark` does not yet contain `border-radius: 8px` or `overflow: hidden`. + +- [ ] **Step 3: Commit the failing test** + +```bash +git add src/renderer/components/Shell.test.tsx +git commit -m "test: require rounded sidebar brand icon" +``` + +### Task 2: Apply the minimal rounded clipping style + +**Files:** +- Modify: `src/renderer/styles/shell.css` +- Test: `src/renderer/components/Shell.test.tsx` + +- [ ] **Step 1: Add clipping to `.brand-mark`** + +Change the rule to: + +```css +.brand-mark { + display: grid; + width: 40px; + height: 40px; + overflow: hidden; + border-radius: 8px; + place-items: center; +} +``` + +- [ ] **Step 2: Run the focused test and verify GREEN** + +Run: + +```bash +npx vitest run src/renderer/components/Shell.test.tsx -t "clips the opaque sidebar logo asset to rounded corners" +``` + +Expected: the focused test passes. + +- [ ] **Step 3: Run the complete Shell test file** + +Run: + +```bash +npx vitest run src/renderer/components/Shell.test.tsx +``` + +Expected: all Shell tests pass. + +- [ ] **Step 4: Commit the style fix** + +```bash +git add src/renderer/styles/shell.css +git commit -m "fix: round sidebar brand icon corners" +``` + +### Task 3: Verify the rendered sidebar visually + +**Files:** +- Verify: `src/renderer/styles/shell.css` +- Verify: `public/officedex-logo.png` + +- [ ] **Step 1: Generate Wails bindings and start the browser UI** + +Run: + +```bash +mkdir -p dist +touch dist/.placeholder +env -u GOROOT wails generate module +npm run dev:browser +``` + +Expected: Vite serves the OfficeDex renderer at `http://127.0.0.1:3100` or the reported local URL. + +- [ ] **Step 2: Inspect the sidebar at desktop width** + +Open the renderer and confirm: + +- the icon remains 40px square in layout; +- the black opaque pixels outside the rounded outline are not visible; +- the icon remains aligned with the OfficeDex name and connection status; +- no Dock, installer, About screen, or shared PNG asset is changed. + +- [ ] **Step 3: Stop the development server** + +Stop the Vite process after capturing the visual result. + +### Task 4: Complete release metadata and regression verification + +**Files:** +- Modify: `package.json` +- Modify: `package-lock.json` +- Modify: `wails.json` + +- [ ] **Step 1: Verify release metadata values** + +Confirm these exact values: + +```json +// package.json +{ + "version": "0.6.7", + "officecliVersion": "0.2.121" +} +``` + +```json +// package-lock.json root and packages[""] +{ + "version": "0.6.7" +} +``` + +```json +// wails.json info +{ + "productVersion": "0.6.7" +} +``` + +- [ ] **Step 2: Run release metadata verification** + +Run: + +```bash +node scripts/verify-release-version.mjs \ + --expected 0.6.7 \ + --package package.json \ + --wails wails.json \ + --tag v0.6.7 +``` + +Expected: `Verified OfficeDex release version 0.6.7.` + +- [ ] **Step 3: Verify the pinned OfficeCLI binary** + +Run: + +```bash +HTTPS_PROXY=http://127.0.0.1:7890 \ +HTTP_PROXY=http://127.0.0.1:7890 \ +npm run prefetch:officecli +build/officecli/officecli version +``` + +Expected: the prefetch log targets `v0.2.121`, both macOS checksums pass, and the binary reports `officecli version 0.2.121`. + +- [ ] **Step 4: Run the renderer and script regression suites** + +Run: + +```bash +npm run test:scripts +npx vitest run +``` + +Expected: all script and renderer tests pass. + +- [ ] **Step 5: Commit release metadata** + +```bash +git add package.json package-lock.json wails.json +git commit -m "release: prepare OfficeDex 0.6.7" +``` + +### Task 5: Merge and publish OfficeDex v0.6.7 + +**Files:** +- Verify: `.github/workflows/ci.yml` +- Verify: `.github/workflows/release.yml` + +- [ ] **Step 1: Push the release branch and create a pull request** + +```bash +git push -u origin release/officedex-0.6.7 +gh pr create \ + --repo officecli/officedex \ + --base main \ + --head release/officedex-0.6.7 \ + --title "release: OfficeDex 0.6.7" \ + --body "Ships the rounded sidebar brand icon and bundles OfficeCLI 0.2.121." +``` + +- [ ] **Step 2: Track PR CI to success** + +Run `gh pr checks --watch` for the created PR. + +Expected: embedded PPTist reproduction, TypeScript, script tests, renderer tests, and both Go test modes pass. + +- [ ] **Step 3: Merge the pull request** + +```bash +pr_number="$(gh pr view --repo officecli/officedex --json number --jq .number)" +gh pr merge "$pr_number" --repo officecli/officedex --merge --delete-branch +``` + +- [ ] **Step 4: Tag the merged commit** + +```bash +git fetch origin main --tags +git tag -a v0.6.7 origin/main -m "OfficeDex v0.6.7" +git push origin v0.6.7 +``` + +- [ ] **Step 5: Track the Release workflow** + +Run `gh run watch --repo officecli/officedex --exit-status`. + +Expected: macOS universal and Windows amd64 jobs prefetch OfficeCLI `0.2.121`, complete packaged Canvas renders, create the signed/notarized artifacts, publish GitHub Release `v0.6.7`, and synchronize `officedex-dist`. + +- [ ] **Step 6: Verify latest downloadable artifacts** + +Run: + +```bash +gh release view v0.6.7 --repo officecli/officedex --json tagName,publishedAt,url,assets +gh api 'repos/officecli/officedex-dist/contents/manifest.json?ref=main' --jq .content \ + | tr -d '\n' | base64 --decode | jq . +``` + +Expected: `v0.6.7` is the latest release, macOS DMG/ZIP and Windows ZIP exist, and the distribution manifest reports version `0.6.7`. From 81d8235011b2ea37f300f2b7000c0f0e578334c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E9=98=B3?= Date: Tue, 28 Jul 2026 11:50:59 +0800 Subject: [PATCH 3/5] test: require rounded sidebar brand icon --- src/renderer/components/Shell.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/renderer/components/Shell.test.tsx b/src/renderer/components/Shell.test.tsx index f48e7a1..0943af2 100644 --- a/src/renderer/components/Shell.test.tsx +++ b/src/renderer/components/Shell.test.tsx @@ -68,6 +68,14 @@ describe("Shell sidebar layout", () => { expect(screen.getByAltText("OfficeDex logo").getAttribute("src")).toBe("./officedex-logo.png"); }); + it("clips the opaque sidebar logo asset to rounded corners", () => { + const css = readFileSync("src/renderer/styles/shell.css", "utf8"); + const brandMarkRule = css.match(/\.brand-mark\s*\{[^}]*\}/s)?.[0] ?? ""; + + expect(brandMarkRule).toMatch(/border-radius:\s*8px;/); + expect(brandMarkRule).toMatch(/overflow:\s*hidden;/); + }); + it("places the credit meter above Profile in the sidebar footer", () => { render( From f5dcd321f2fca3a72128a6a06280f0dd4fe22db3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E9=98=B3?= Date: Tue, 28 Jul 2026 11:51:22 +0800 Subject: [PATCH 4/5] fix: round sidebar brand icon corners --- src/renderer/styles/shell.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/renderer/styles/shell.css b/src/renderer/styles/shell.css index fd05636..c3d0592 100644 --- a/src/renderer/styles/shell.css +++ b/src/renderer/styles/shell.css @@ -48,6 +48,8 @@ width: 40px; height: 40px; place-items: center; + overflow: hidden; + border-radius: 8px; } .brand-mark img { From 662e548084dad5d520daabb830b3a63a80875c2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E9=98=B3?= Date: Tue, 28 Jul 2026 12:28:07 +0800 Subject: [PATCH 5/5] release: prepare OfficeDex 0.6.7 --- package-lock.json | 4 ++-- package.json | 2 +- wails.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 31aed93..186bee8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "officedex", - "version": "0.6.5", + "version": "0.6.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "officedex", - "version": "0.6.5", + "version": "0.6.7", "license": "GPL-3.0-only", "dependencies": { "@ant-design/icons": "^6.1.0", diff --git a/package.json b/package.json index 8923540..535437d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "officedex", - "version": "0.6.6", + "version": "0.6.7", "description": "The AI desktop workspace for documents, slides, and spreadsheets. Wails v2 + React 19 client for OfficeCLI.", "license": "GPL-3.0-only", "homepage": "https://github.com/officecli/officedex#readme", diff --git a/wails.json b/wails.json index 0a8d7e7..c94dbb8 100644 --- a/wails.json +++ b/wails.json @@ -14,7 +14,7 @@ }, "info": { "productName": "OfficeDex", - "productVersion": "0.6.6", + "productVersion": "0.6.7", "copyright": "", "comments": "OfficeDex desktop app (Wails v2 + Go)" }