Skip to content

Commit 67194c6

Browse files
esmcelroyCopilot
esmcelroy
and
Copilot
committed
feat: UX polish — collapsible sections, sticky process button, reset, settings indicator, empty state
- Group settings into collapsible details/summary sections (Fill Type, Aspect Ratio open; Output, Effects collapsed) - Move Process button to sticky position below settings panel, always visible - Add Reset button in settings header to restore defaults - Show 'Settings changed — re-process to apply' indicator after modifying processed results - Add step-by-step empty state guide (Upload → Configure → Process → Download) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 1eb8fc4 commit 67194c6

12 files changed

Lines changed: 747 additions & 13 deletions

‎.playwright-mcp/page-2026-04-18T03-04-58-864Z.yml‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
- generic [ref=e3]:
2+
- banner [ref=e4]:
3+
- generic [ref=e5]:
4+
- img [ref=e7]
5+
- generic [ref=e11]:
6+
- heading "Squarify" [level=1] [ref=e12]
7+
- paragraph [ref=e13]: Pad photos to a uniform aspect ratio
8+
- generic [ref=e14]:
9+
- button "Light theme" [ref=e15]:
10+
- img [ref=e16]
11+
- button "Dark theme" [ref=e22]:
12+
- img [ref=e23]
13+
- button "System theme" [pressed] [ref=e25]:
14+
- img [ref=e26]
15+
- main [ref=e28]:
16+
- generic [ref=e29]:
17+
- button "Drop photos here or click to browse" [ref=e32] [cursor=pointer]:
18+
- generic [ref=e33]:
19+
- img [ref=e34]
20+
- generic [ref=e37]:
21+
- paragraph [ref=e38]: Drop photos here or click to browse
22+
- paragraph [ref=e39]: JPG, PNG, WebP, GIF, HEIC — up to 20 photos (0/20 added)
23+
- generic [ref=e41]:
24+
- heading "Padding Settings" [level=2] [ref=e42]
25+
- generic [ref=e43]:
26+
- button "Color" [ref=e44]:
27+
- img [ref=e45]
28+
- text: Color
29+
- button "Image" [ref=e51]:
30+
- img [ref=e52]
31+
- text: Image
32+
- button "Gradient" [ref=e56]:
33+
- img [ref=e57]
34+
- text: Gradient
35+
- button "Blur" [ref=e60]:
36+
- img [ref=e61]
37+
- text: Blur
38+
- button "Pattern" [ref=e64]:
39+
- img [ref=e65]
40+
- text: Pattern
41+
- generic [ref=e67]:
42+
- generic [ref=e68]: Color
43+
- generic [ref=e69]:
44+
- textbox "Fill color" [ref=e70] [cursor=pointer]: "#ffffff"
45+
- textbox "Fill color hex" [ref=e71]:
46+
- /placeholder: "#ffffff"
47+
- text: "#ffffff"
48+
- button "Pick color from screen" [ref=e72]:
49+
- img [ref=e73]
50+
- generic [ref=e77]:
51+
- text: Target Aspect Ratio
52+
- generic [ref=e78]:
53+
- button "Auto (widest)" [ref=e79]
54+
- button "1:1 Square" [ref=e80]
55+
- button "4:3" [ref=e81]
56+
- button "3:4" [ref=e82]
57+
- button "3:2" [ref=e83]
58+
- button "2:3" [ref=e84]
59+
- button "16:9" [ref=e85]
60+
- button "9:16" [ref=e86]
61+
- button "Custom" [ref=e87]
62+
- generic [ref=e88]:
63+
- paragraph [ref=e89]: Social Media Presets
64+
- generic [ref=e90]:
65+
- button "IG Post" [ref=e91]
66+
- button "IG Story" [ref=e92]
67+
- button "Facebook" [ref=e93]
68+
- button "X / Twitter" [ref=e94]
69+
- button "LinkedIn" [ref=e95]
70+
- button "YouTube" [ref=e96]
71+
- generic [ref=e97]:
72+
- generic [ref=e98]:
73+
- generic [ref=e99]: Border Padding
74+
- generic [ref=e100]: 0px
75+
- slider "Border padding" [ref=e101]: "0"
76+
- generic [ref=e102]:
77+
- text: Output Format
78+
- generic [ref=e103]:
79+
- button "png" [ref=e104]
80+
- button "jpeg" [ref=e105]
81+
- button "webp" [ref=e106]
82+
- generic [ref=e107]:
83+
- generic [ref=e108]:
84+
- generic [ref=e109]: Max Dimension
85+
- generic [ref=e110]: None
86+
- slider "Max dimension" [ref=e111]: "0"
87+
- generic [ref=e112]:
88+
- generic [ref=e113]: No limit
89+
- generic [ref=e114]: 4000px
90+
- generic [ref=e116]:
91+
- generic [ref=e117]:
92+
- img [ref=e118]
93+
- text: Watermark
94+
- button "Toggle watermark" [ref=e120]
95+
- generic [ref=e123]:
96+
- generic [ref=e124]:
97+
- img [ref=e125]
98+
- text: Drop Shadow
99+
- button "Toggle drop shadow" [ref=e129]
100+
- button "Process Images" [disabled] [ref=e131]:
101+
- img [ref=e132]
102+
- text: Process Images
103+
- contentinfo [ref=e135]:
104+
- generic [ref=e136]:
105+
- paragraph [ref=e137]: Squarify
106+
- generic [ref=e138]:
107+
- button "About" [ref=e139]:
108+
- img [ref=e140]
109+
- text: About
110+
- link "View source on GitHub" [ref=e142] [cursor=pointer]:
111+
- /url: https://github.com/esmcelroy/squarify
112+
- img [ref=e143]

‎.playwright-mcp/page-2026-04-18T03-05-01-896Z.png‎

78.4 KB
Loading

‎.playwright-mcp/page-2026-04-18T03-08-54-840Z.yml‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
- generic [ref=e3]:
2+
- banner [ref=e4]:
3+
- generic [ref=e5]:
4+
- img [ref=e7]
5+
- generic [ref=e11]:
6+
- heading "Squarify" [level=1] [ref=e12]
7+
- paragraph [ref=e13]: Pad photos to a uniform aspect ratio
8+
- generic [ref=e14]:
9+
- button "Light theme" [ref=e15]:
10+
- img [ref=e16]
11+
- button "Dark theme" [ref=e22]:
12+
- img [ref=e23]
13+
- button "System theme" [pressed] [ref=e25]:
14+
- img [ref=e26]
15+
- main [ref=e28]:
16+
- generic [ref=e29]:
17+
- generic [ref=e30]:
18+
- button "Drop photos here or click to browse" [ref=e32] [cursor=pointer]:
19+
- generic [ref=e33]:
20+
- img [ref=e34]
21+
- generic [ref=e37]:
22+
- paragraph [ref=e38]: Drop photos here or click to browse
23+
- paragraph [ref=e39]: JPG, PNG, WebP, GIF, HEIC — up to 20 photos (0/20 added)
24+
- generic [ref=e41]:
25+
- generic [ref=e42]:
26+
- img [ref=e43]
27+
- generic [ref=e46]: Upload
28+
- img [ref=e47]
29+
- generic [ref=e49]:
30+
- img [ref=e50]
31+
- generic [ref=e51]: Configure
32+
- img [ref=e52]
33+
- generic [ref=e54]:
34+
- img [ref=e55]
35+
- generic [ref=e58]: Process
36+
- img [ref=e59]
37+
- generic [ref=e61]:
38+
- img [ref=e62]
39+
- generic [ref=e65]: Download
40+
- generic [ref=e66]:
41+
- generic [ref=e67]:
42+
- generic [ref=e68]:
43+
- heading "Padding Settings" [level=2] [ref=e69]
44+
- button "Reset settings" [ref=e70]:
45+
- img [ref=e71]
46+
- text: Reset
47+
- group [ref=e74]:
48+
- generic "Fill Type" [ref=e75] [cursor=pointer]:
49+
- img [ref=e76]
50+
- text: Fill Type
51+
- generic [ref=e78]:
52+
- generic [ref=e79]:
53+
- button "Color" [ref=e80]:
54+
- img [ref=e81]
55+
- text: Color
56+
- button "Image" [ref=e87]:
57+
- img [ref=e88]
58+
- text: Image
59+
- button "Gradient" [ref=e92]:
60+
- img [ref=e93]
61+
- text: Gradient
62+
- button "Blur" [ref=e96]:
63+
- img [ref=e97]
64+
- text: Blur
65+
- button "Pattern" [ref=e100]:
66+
- img [ref=e101]
67+
- text: Pattern
68+
- generic [ref=e103]:
69+
- generic [ref=e104]: Color
70+
- generic [ref=e105]:
71+
- textbox "Fill color" [ref=e106] [cursor=pointer]: "#ffffff"
72+
- textbox "Fill color hex" [ref=e107]:
73+
- /placeholder: "#ffffff"
74+
- text: "#ffffff"
75+
- button "Pick color from screen" [ref=e108]:
76+
- img [ref=e109]
77+
- group [ref=e113]:
78+
- generic "Aspect Ratio" [ref=e114] [cursor=pointer]:
79+
- img [ref=e115]
80+
- text: Aspect Ratio
81+
- generic [ref=e118]:
82+
- text: Target Aspect Ratio
83+
- generic [ref=e119]:
84+
- button "Auto (widest)" [ref=e120]
85+
- button "1:1 Square" [ref=e121]
86+
- button "4:3" [ref=e122]
87+
- button "3:4" [ref=e123]
88+
- button "3:2" [ref=e124]
89+
- button "2:3" [ref=e125]
90+
- button "16:9" [ref=e126]
91+
- button "9:16" [ref=e127]
92+
- button "Custom" [ref=e128]
93+
- generic [ref=e129]:
94+
- paragraph [ref=e130]: Social Media Presets
95+
- generic [ref=e131]:
96+
- button "IG Post" [ref=e132]
97+
- button "IG Story" [ref=e133]
98+
- button "Facebook" [ref=e134]
99+
- button "X / Twitter" [ref=e135]
100+
- button "LinkedIn" [ref=e136]
101+
- button "YouTube" [ref=e137]
102+
- group [ref=e138]:
103+
- generic "Output" [ref=e139] [cursor=pointer]:
104+
- img [ref=e140]
105+
- text: Output
106+
- group [ref=e142]:
107+
- generic "Effects" [ref=e143] [cursor=pointer]:
108+
- img [ref=e144]
109+
- text: Effects
110+
- button "Process Images" [disabled] [ref=e148]:
111+
- img [ref=e149]
112+
- text: Process Images
113+
- contentinfo [ref=e152]:
114+
- generic [ref=e153]:
115+
- paragraph [ref=e154]: Squarify
116+
- generic [ref=e155]:
117+
- button "About" [ref=e156]:
118+
- img [ref=e157]
119+
- text: About
120+
- link "View source on GitHub" [ref=e159] [cursor=pointer]:
121+
- /url: https://github.com/esmcelroy/squarify
122+
- img [ref=e160]

‎.playwright-mcp/page-2026-04-18T03-08-58-045Z.png‎

75.7 KB
Loading

‎.playwright-mcp/page-2026-04-18T03-09-20-141Z.yml‎

Whitespace-only changes.

‎.playwright-mcp/page-2026-04-18T03-09-24-051Z.yml‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
- generic [ref=e3]:
2+
- banner [ref=e4]:
3+
- generic [ref=e5]:
4+
- img [ref=e7]
5+
- generic [ref=e11]:
6+
- heading "Squarify" [level=1] [ref=e12]
7+
- paragraph [ref=e13]: Pad photos to a uniform aspect ratio
8+
- generic [ref=e14]:
9+
- button "Light theme" [ref=e15]:
10+
- img [ref=e16]
11+
- button "Dark theme" [ref=e22]:
12+
- img [ref=e23]
13+
- button "System theme" [pressed] [ref=e25]:
14+
- img [ref=e26]
15+
- main [ref=e28]:
16+
- generic [ref=e29]:
17+
- generic [ref=e30]:
18+
- button "Drop photos here or click to browse" [active] [ref=e32] [cursor=pointer]:
19+
- generic [ref=e33]:
20+
- img [ref=e34]
21+
- generic [ref=e37]:
22+
- paragraph [ref=e38]: Drop photos here or click to browse
23+
- paragraph [ref=e39]: JPG, PNG, WebP, GIF, HEIC — up to 20 photos (1/20 added)
24+
- generic [ref=e162]:
25+
- generic [ref=e163]: "1 photo · Target: Auto (0.950)"
26+
- button "Clear all photos" [ref=e164]:
27+
- img [ref=e165]
28+
- text: Clear all
29+
- generic [ref=e169]:
30+
- img "hero.png" [ref=e171]
31+
- generic [ref=e172]:
32+
- img [ref=e173]
33+
- text: Widest
34+
- generic [ref=e177]:
35+
- paragraph [ref=e178]: hero.png
36+
- paragraph [ref=e179]: 343 × 361
37+
- button "Remove hero.png" [ref=e181]:
38+
- img [ref=e182]
39+
- generic [ref=e66]:
40+
- generic [ref=e67]:
41+
- generic [ref=e68]:
42+
- heading "Padding Settings" [level=2] [ref=e69]
43+
- button "Reset settings" [ref=e70]:
44+
- img [ref=e71]
45+
- text: Reset
46+
- group [ref=e74]:
47+
- generic "Fill Type" [ref=e75] [cursor=pointer]:
48+
- img [ref=e76]
49+
- text: Fill Type
50+
- generic [ref=e78]:
51+
- generic [ref=e79]:
52+
- button "Color" [ref=e80]:
53+
- img [ref=e81]
54+
- text: Color
55+
- button "Image" [ref=e87]:
56+
- img [ref=e88]
57+
- text: Image
58+
- button "Gradient" [ref=e92]:
59+
- img [ref=e93]
60+
- text: Gradient
61+
- button "Blur" [ref=e96]:
62+
- img [ref=e97]
63+
- text: Blur
64+
- button "Pattern" [ref=e100]:
65+
- img [ref=e101]
66+
- text: Pattern
67+
- generic [ref=e103]:
68+
- generic [ref=e104]: Color
69+
- generic [ref=e105]:
70+
- textbox "Fill color" [ref=e106] [cursor=pointer]: "#ffffff"
71+
- textbox "Fill color hex" [ref=e107]:
72+
- /placeholder: "#ffffff"
73+
- text: "#ffffff"
74+
- button "Pick color from screen" [ref=e108]:
75+
- img [ref=e109]
76+
- group [ref=e113]:
77+
- generic "Aspect Ratio" [ref=e114] [cursor=pointer]:
78+
- img [ref=e115]
79+
- text: Aspect Ratio
80+
- generic [ref=e118]:
81+
- text: Target Aspect Ratio
82+
- generic [ref=e119]:
83+
- button "Auto (widest)" [ref=e120]
84+
- button "1:1 Square" [ref=e121]
85+
- button "4:3" [ref=e122]
86+
- button "3:4" [ref=e123]
87+
- button "3:2" [ref=e124]
88+
- button "2:3" [ref=e125]
89+
- button "16:9" [ref=e126]
90+
- button "9:16" [ref=e127]
91+
- button "Custom" [ref=e128]
92+
- generic [ref=e129]:
93+
- paragraph [ref=e130]: Social Media Presets
94+
- generic [ref=e131]:
95+
- button "IG Post" [ref=e132]
96+
- button "IG Story" [ref=e133]
97+
- button "Facebook" [ref=e134]
98+
- button "X / Twitter" [ref=e135]
99+
- button "LinkedIn" [ref=e136]
100+
- button "YouTube" [ref=e137]
101+
- group [ref=e138]:
102+
- generic "Output" [ref=e139] [cursor=pointer]:
103+
- img [ref=e140]
104+
- text: Output
105+
- group [ref=e142]:
106+
- generic "Effects" [ref=e143] [cursor=pointer]:
107+
- img [ref=e144]
108+
- text: Effects
109+
- button "Process Images" [ref=e148]:
110+
- img [ref=e149]
111+
- text: Process Images
112+
- contentinfo [ref=e152]:
113+
- generic [ref=e153]:
114+
- paragraph [ref=e154]: Squarify
115+
- generic [ref=e155]:
116+
- button "About" [ref=e156]:
117+
- img [ref=e157]
118+
- text: About
119+
- link "View source on GitHub" [ref=e159] [cursor=pointer]:
120+
- /url: https://github.com/esmcelroy/squarify
121+
- img [ref=e160]

‎.playwright-mcp/page-2026-04-18T03-09-27-122Z.png‎

96 KB
Loading

0 commit comments

Comments
 (0)