feat(ui): revamp create logo layout for #1091

[rachittaneja56-max]

Description

What type of PR is this? (Check all applicable)

• [x ] 🍕 Feature
• 🐛 Bug Fix
• 📄 Documentation Update
• 👨‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🛠️ CI/CD

Screenshots (if applicable)

Screen.Recording.2026-08-20.153642.mp4

Checklist

• [ x] I have performed a self-review of my code
• [x ] I have commented my code, particularly in hard-to-understand areas
• [x ] I have added tests that prove my fix is effective or that my feature works
• [x ] New and existing unit tests pass locally with my changes

[github-actions]

No linked issues found. Please add the corresponding issues in the pull request description.
Use GitHub automation to close the issue when a PR is merged

[sonarqubecloud]

Quality Gate passed

Issues
20 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[devin-ai-integration]

Code review

The new rail + popover layout is a nice direction, but this can't merge as-is: CI is red and two logic changes in useCanvasControls.js are unrelated to the UI revamp and are regressions.

Blocking

1. canvas.getWidth()/getHeight() → canvas.width/height breaks the canvas center and the test suite. In "Check coding standards" (__tests__/components/logo/useCanvasControls.test.js:274 and :355) getCanvasCenter() now returns {x: NaN, y: NaN}, so shapes are added at left: NaN, top: NaN. getWidth() is the documented Fabric API and accounts for retina scaling — please revert this change; it isn't needed for the layout work.
2. canvas.backgroundColor = null in resetCanvas changes export output. PNG export goes through canvas.toDataURL({format: "png", multiplier: 2}) (useFileOperations.js:119), so after a reset the exported PNG is transparent while the editor still looks white (that white comes from CSS). Either keep the explicit white, or make transparency an intentional export option.
3. PR hygiene checks failing: "PR Title Convention" and the linked-issue check. Please rename to the repo convention ([Feat] Issue-1091 ...), add Closes #1091 and fill in the description — it's currently the empty template, which makes a 1.5k-line UI diff hard to review.

Should fix

4. isInitialized: isInitializedRef.current exports a render-time snapshot of a ref: flipping the ref never re-renders and consumers read a stale value. Nothing consumes it today, so either drop it from the return value or keep a state mirror alongside the ref.
5. toolbarButtons.slice(1) silently assumes the toggle is element 0; use .filter((b) => b.action !== "toggle"). The variant fields left in that array are now dead, and the toggle's title is duplicated as a literal.
6. Shared Button replaced by raw <button> in both toolbars. That drops the design-system variants/disabled/focus styling — please confirm .exportBtn:disabled covers the isGuest state and that :focus-visible styles exist for .iconBtn/.railBtn/.shapeBtn. Also add type="button" to all of the new buttons.
7. A11y of the new rail: buttons rely on title alone for their accessible name. Add aria-label, plus aria-expanded/aria-controls on the rail toggles, and Escape-to-close / focus handling for the popover — currently only an outside mousedown closes it (keyboard users can't dismiss it).
8. Abbreviated labels leak into tooltips: "Rect"/"Tri" are now both the visible label and the title, so hover text reads "Tri". Keep the full word in title. (Having to rewrite the tests to getByTitle("Tri") is the signal here.)

Nits / verify

9. Deleted responsive breakpoints: the 840px / 420px / 318px sidebar-height rules are gone and .topToolbar is now position: absolute; top: 16px; left: 50% — please check <420px viewports where the floating pill can overlap the canvas and the rail; those breakpoints existed for a reason.
10. Reset openPanel when sidebarOpen flips to false, and register the mousedown listener only while a panel is open.
11. No tests for the new behavior (panel toggle, switching panels, outside-click close) — Sonar reports 0% coverage on new code.

Written by Devin