From 0767d72603a8d8346f8eccdf40057affc630e12c Mon Sep 17 00:00:00 2001 From: tianma-if Date: Tue, 15 Sep 2026 23:36:15 +0800 Subject: [PATCH] fix(desktop): make the menu-bar cat match other status icons Ship a 22pt template glyph with a heavier stroke so the cat reads at the same size and ink weight as neighboring macOS menu-bar extras. --- apps/desktop/assets/trayTemplate.png | Bin 671 -> 695 bytes apps/desktop/assets/trayTemplate.svg | 4 ++-- apps/desktop/assets/trayTemplate@2x.png | Bin 756 -> 805 bytes apps/desktop/src/main/tray-icon.test.mjs | 12 +++++++----- scripts/prepare-desktop-icons.mjs | 13 +++++++++---- 5 files changed, 18 insertions(+), 11 deletions(-) diff --git a/apps/desktop/assets/trayTemplate.png b/apps/desktop/assets/trayTemplate.png index 8d0b0411431d4fee60607462c6b7902e4c77a18b..86649747ad6eb9fa589408e37f19c77fc3087473 100644 GIT binary patch delta 187 zcmbQwx}88n#b`4|*9j{Nz*{Po>#u>$3fNo{FO7Hj{;@f`oA)4cLR zUsLFZE2d69EH=A0M}19LHJ@cpY~N0+t{{WuGRog(JU{4i@P?#Y(}|k=9JR?k;i5l8 d*1mAQ%E+BEF<*J=&f6e6Jzf1=);T3K0RSRSLD>KR delta 163 zcmdnaI-gasGr-TCmrII^fq{Y7)59eQNDF{42OE%-|NK93qvB^q36K!;0u}~Fs5Fpb zc*j}8Gg*g8BHGQ<#WBR - - + + diff --git a/apps/desktop/assets/trayTemplate@2x.png b/apps/desktop/assets/trayTemplate@2x.png index 806cb5916efb5a4463beae56d863b40577e95742..0105fff19e5660a0868e6e9b87fe16de4c0bf6a5 100644 GIT binary patch delta 298 zcmeyux|B_^Gr-TCmrII^fq{Y7)59eQNb7(w2OE%-Yl&jqsQ8&t0wlz|fQ5k(Dh;F< zR5!g|JXwcHqW+Ahi(^Q{;kP#&`C1J)SOVVFzx*jZ{g<-AVVBk=rw@5A&doe>%+0Ex z$NkE|lL3ymO+Tb-Y<6(6rb35u9bom-|?EAAHr9)XbLlC2ponk%33A zdhYTUWjl@5WKDHH*pt7rYw2BeE&DSW!nf{ny2-K5v~K*%I{EH_OMW+Aotsd5enC9v qGXB1T#m6_Ul0RLfToUJOZdO-uLiy*9@Od>LFM7KAxvX^WWXOD-!i_5|7Y)wzr;F8q-AIJ8a(e zT2Zj+TGr$=1%nIR%qs*6wrDW09=g1cyO&|cr4K@3_5Qo7SOXX){mUx8zMP?KM)}?X z28M9Phy~oM-b!42E62;PaPDL{@0I8av$K@iyXCwD?y&isYjFQ>*!D24LC4W`c4NZl qgqvHmw<_2LUD-9|y6>uw_Kz6F_nok~_u!sB$i<$nelF{r5}E)!^jyvW diff --git a/apps/desktop/src/main/tray-icon.test.mjs b/apps/desktop/src/main/tray-icon.test.mjs index f04e43aa..a85ba972 100644 --- a/apps/desktop/src/main/tray-icon.test.mjs +++ b/apps/desktop/src/main/tray-icon.test.mjs @@ -32,18 +32,20 @@ describe("trayIconPath", () => { })).toBe("/resources/web/pwa-192x192.png"); }); - test("uses a larger menu-bar cat instead of the padded brand mark", () => { + test("uses a heavier 22pt menu-bar cat instead of the padded brand mark", () => { const svg = readFileSync(new URL("../../assets/trayTemplate.svg", import.meta.url), "utf8"); expect(svg).not.toContain("M9 2h14a6 6 0 0 1 6 6v16a6 6 0 0 1-6 6H9"); expect(svg).not.toContain("scale(0.74234234)"); expect(svg).toContain("viewBox=\"0 0 1024 1024\""); expect(svg).toContain("fill=\"#000000\""); - expect(svg).toContain("scale(1.22)"); + expect(svg).toContain("stroke=\"#000000\""); + expect(svg).toContain("stroke-width=\"36\""); + expect(svg).toContain("scale(1.1)"); }); test.each([ - ["trayTemplate.png", 16, 72], - ["trayTemplate@2x.png", 32, 144], + ["trayTemplate.png", 22, 72], + ["trayTemplate@2x.png", 44, 144], ])("%s is a crisp black template glyph", async (name, size, density) => { const path = fileURLToPath(new URL(`../../assets/${name}`, import.meta.url)); const image = sharp(path); @@ -65,7 +67,7 @@ describe("trayIconPath", () => { hasAlpha: true, }); expect(soft).toBe(0); - expect(coverage).toBeGreaterThan(0.12); + expect(coverage).toBeGreaterThan(0.22); expect(coverage).toBeLessThan(0.4); }); }); diff --git a/scripts/prepare-desktop-icons.mjs b/scripts/prepare-desktop-icons.mjs index a0969b92..718eb226 100644 --- a/scripts/prepare-desktop-icons.mjs +++ b/scripts/prepare-desktop-icons.mjs @@ -62,14 +62,19 @@ const writeResizedPng = async (sourceBuffer, size, destination) => { const TRAY_TEMPLATE_ALPHA_THRESHOLD = 80; const TRAY_MARK_CENTER = { x: 627, y: 580 }; -const TRAY_MARK_SCALE = 1.22; +// 22pt matches other macOS menu-bar extras. A round stroke adds ink so the +// open cat face keeps up with filled marks like Notion and WeChat. +export const TRAY_MARK_SCALE = 1.1; +export const TRAY_MARK_STROKE_WIDTH = 36; +export const TRAY_TEMPLATE_SIZE = 22; +export const TRAY_TEMPLATE_SIZE_2X = 44; export const buildMacTrayTemplateSvg = (markSvg) => { const pathMatch = markSvg.match(/]*\sd="([^"]+)"/); if (!pathMatch) throw new Error("Brand mark is missing a path"); return ` - + `; @@ -109,8 +114,8 @@ export const prepareTrayIcons = async ({ .toFile(join(assetsDirectory, fileName)); }; - await render(16, 72, "trayTemplate.png"); - await render(32, 144, "trayTemplate@2x.png"); + await render(TRAY_TEMPLATE_SIZE, 72, "trayTemplate.png"); + await render(TRAY_TEMPLATE_SIZE_2X, 144, "trayTemplate@2x.png"); console.log("[prepare-desktop-icons] wrote macOS tray template icons from the brand mark"); };