feat: add Back to Home button in Vector Studio header

[Tirthpanchori]

Summary

Added a "HOME" navigation button to the top-left of the Vector Studio header so users can return to the main dashboard without using browser history.

Related Issue

Closes #161

Changes

• Added an <a> anchor tag with class back-home-btn in the header, placed before the polyline icon and "Vector Studio" title
• Added .back-home-btn CSS using existing CSS variables (var(--text), var(--border), var(--accent)) so it automatically adapts to both dark and light mode
• Link points to ../../index.html which correctly resolves to the root index from tools/vector-studio/

Testing

• Added/updated tests
• Tested locally (describe steps below)

Testing Steps

1. Open tools/vector-studio/vector_studio.html in browser
2. Confirm "HOME" button appears in the top-left of the header, next to the Vector Studio logo
3. Hover over the button and confirm the accent color border/text effect appears
4. Click the button and confirm it navigates to index.html (the main homepage)
5. Toggle to Light Mode and confirm the button still looks correct

Contributor Details

• Name: Tirth Panchori
• GitHub Username: @Tirthpanchori
• Program (SSoC / GSSoC / Hacktoberfest / Other): SSoC

Checklist before requesting a review

• Code follows the project's conventions
• No secrets or .env values are committed
• I have performed a self-review of my code
• Documentation has been updated if needed
• CI passes
• Linked the related issue above

[vercel]

@Tirthpanchori is attempting to deploy a commit to the winter262005's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Ishwarpatra]

hey,few issues here,

1. Hardcoded Path Fragility

   • The link uses ../../index.html which assumes a fixed directory structure
   • my recommendation is ro Consider making this more robust by:
     • Adding a comment documenting the expected structure
     • Or using a JavaScript approach to set the path dynamically based on the current location

2. HTML Semantics & Accessibility

   • The button is implemented as an <a> tag styled as a button, but screen readers may announce it differently than expected
     hint:-

     <a href="../../index.html" class="back-home-btn" aria-label="Return to home">HOME</a>

   • Add aria-label to improve screen reader experience

3. Styling Duplication is not appreicated

   • .back-home-btn and .btn share nearly identical styles (padding, font, border, cursor, hover effects)
   • you need to Refactor to reduce duplication:

     .btn, .back-home-btn { 
         /* shared styles */
     }
     .back-home-btn:hover { border-color: var(--accent); color: var(--accent); }

4. Mobile Responsiveness would be a issue

   • Consider testing on narrow viewports to ensure the button doesn't cause layout shifts
   • The fixed styling looks good but responsive testing would be valuable

5. Also Navigation Path Validation

• Verify that index.html exists and is accessible from all deployment contexts (local dev, production, etc.)

take time ,don't rush it

[Tirthpanchori]

hey,few issues here,

1. Hardcoded Path Fragility
   
   * The link uses `../../index.html` which assumes a fixed directory structure
   * my recommendation is ro  Consider making this more robust by:
     
     * Adding a comment documenting the expected structure
     * Or using a JavaScript approach to set the path dynamically based on the current location

2. HTML Semantics & Accessibility
   
   * The button is implemented as an `<a>` tag styled as a button, but screen readers may announce it differently than expected
     hint:-
     ```
     <a href="../../index.html" class="back-home-btn" aria-label="Return to home">HOME</a>
     ```
   * Add `aria-label` to improve screen reader experience

3. Styling Duplication is not appreicated
   
   * `.back-home-btn` and `.btn` share nearly identical styles (padding, font, border, cursor, hover effects)
   * you need to  Refactor to reduce duplication:
     ```css
     .btn, .back-home-btn { 
         /* shared styles */
     }
     .back-home-btn:hover { border-color: var(--accent); color: var(--accent); }
     ```

4. Mobile Responsiveness would be a issue
   
   * Consider testing on narrow viewports to ensure the button doesn't cause layout shifts
   * The fixed styling looks good but responsive testing would be valuable

5. Also Navigation Path Validation


* Verify that `index.html` exists and is accessible from all deployment contexts (local dev, production, etc.)

take time ,don't rush it

ok, i'll work on it

[Tirthpanchori]

hey,few issues here,

1. Hardcoded Path Fragility
   
   * The link uses `../../index.html` which assumes a fixed directory structure
   * my recommendation is ro  Consider making this more robust by:
     
     * Adding a comment documenting the expected structure
     * Or using a JavaScript approach to set the path dynamically based on the current location

2. HTML Semantics & Accessibility
   
   * The button is implemented as an `<a>` tag styled as a button, but screen readers may announce it differently than expected
     hint:-
     ```
     <a href="../../index.html" class="back-home-btn" aria-label="Return to home">HOME</a>
     ```
   * Add `aria-label` to improve screen reader experience

3. Styling Duplication is not appreicated
   
   * `.back-home-btn` and `.btn` share nearly identical styles (padding, font, border, cursor, hover effects)
   * you need to  Refactor to reduce duplication:
     ```css
     .btn, .back-home-btn { 
         /* shared styles */
     }
     .back-home-btn:hover { border-color: var(--accent); color: var(--accent); }
     ```

4. Mobile Responsiveness would be a issue
   
   * Consider testing on narrow viewports to ensure the button doesn't cause layout shifts
   * The fixed styling looks good but responsive testing would be valuable

5. Also Navigation Path Validation


* Verify that `index.html` exists and is accessible from all deployment contexts (local dev, production, etc.)

take time ,don't rush it

Hi! I've addressed all the review points:

1. Added a comment above the link documenting the expected directory structure
2. Added aria-label="Return to home page" for screen reader accessibility
3. Refactored styles — extended .btn to cover .back-home-btn, removed duplicate block
4. Verified ../../index.html resolves correctly from tools/vector-studio/ (locally)

Regarding mobile responsiveness — I tested on iPhone 14 viewport (393x852) in DevTools and noticed the overall header layout already has pre-existing overflow issues on mobile (VECTOR STUDIO text wrapping, export buttons clipping off-screen, properties panel overlapping the canvas).

Fixing the back-home-btn alone in isolation wouldn't meaningfully improve the mobile experience since the root cause is the header's layout at narrow viewports. I'd suggest this be tracked as a separate issue so it gets a proper responsive overhaul.

Screenshot attached: