Skip to content

feat(ai): floating-chevron hero + docs link on the account modal#51

Merged
ndemianc merged 1 commit into
developfrom
feat/account-modal-chevron-hero
Jul 26, 2026
Merged

feat(ai): floating-chevron hero + docs link on the account modal#51
ndemianc merged 1 commit into
developfrom
feat/account-modal-chevron-hero

Conversation

@ndemianc

Copy link
Copy Markdown
Contributor

Builds on the merged classic account card (#50) — makes the signed-in Manage-account popover dynamic, per the approved direction.

What's new

  • Floating-chevron hero. The exact levelcode.ai landing effect: three colored chevrons (#5fb4ff → #7d6bff → #5b3fd6) over four soft "portal" circles that drift up-and-back (portalDrift 7s, transform-origin: 50% 60%, staggered -1.4s per layer). It replaces the plain SD initials as the hero, so the modal moves. Lifted 1:1 from LandingPage.tsx (circles/paths/coords) + globals.css (the drift).
  • Premium dialog. Full-bleed hero, 14px radius, soft shadow (0 18px 50px), entrance pop.
  • Documentation linkhttps://levelcode.ai/ai/docs, in a tidy footer beside the Synced line.

Safety / a11y

  • The docs link routes through the same fixed allow-list as Terms/Privacy — data-act="docs"{type:'openExternal', target:'docs'}openLegal() maps 'docs' → '/ai/docs'. No webview-supplied URL, so the open-redirect guard is intact.
  • The hero is decorative (aria-hidden) and the motion honors prefers-reduced-motion (drift + pop both stop).
  • Still model-agnostic. Light / One Dark keep the brand palette; high-contrast still defers to editor tokens (from redesign(ai): restyle the signed-in account card to the levelcode.ai classic look #50) — the hero is a decorative brand splash, not text/controls.

Preview

Approved mockup (animated, both themes): https://claude.ai/code/artifact/0c955831-6ce9-444f-95b2-c211b8706e88

Verification

  • chat.html scripts parse (0 errors, vm.Script); extension.js node --check clean.
  • Full gate 24 suites; the new structure (hero / portal / footer / docs action / reduced-motion) is present.
  • A live in-editor render needs the VS Code host, so this is verified against the approved mockup (identical SVG + drift + tokens) + syntax/gate — not a screenshot of the running editor.

🤖 Generated with Claude Code

Elevates the signed-in Manage-account popover from clean-but-plain to the landing page's
signature moment.

- Hero: the levelcode.ai "portal" mark — three colored chevrons rising over four soft circles
  that drift (portalDrift 7s, staggered -1.4s per layer), replacing the plain SD initials.
  Decorative + aria-hidden; honors prefers-reduced-motion.
- The modal is now a proper premium dialog: full-bleed hero, 14px radius, soft shadow, entrance
  pop.
- Documentation link -> https://levelcode.ai/ai/docs, in a tidy footer beside the Synced line.
  Routed through the SAME fixed allow-list as Terms/Privacy (target 'docs' -> /ai/docs); never a
  webview-supplied URL, so the open-redirect guard holds.

Still model-agnostic; light/One Dark keep the brand palette; high-contrast still defers to editor
tokens (the hero is decorative). extension.js: openLegal() gains the 'docs' target.

Verified: both files parse; full gate 24 suites; structure present. Matches the approved mockup;
a live in-editor render needs the VS Code host.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings July 26, 2026 03:08

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the signed-in Manage-account popover UI in the levelcode-ai webview to match the levelcode.ai landing “portal” hero treatment, and adds a safe Documentation link routed through the extension’s existing allow-listed external navigation.

Changes:

  • Replace the classic account card’s initials avatar with a full-bleed, decorative “portal” hero (animated chevrons + drifting circles) and update modal sizing/shadow/radius.
  • Add a Documentation footer link in the popover and wire it into the existing openExternal message path.
  • Extend the extension-side allow-list mapping (openLegal) to include the docs target (/ai/docs).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
extensions/levelcode-ai/media/chat.html Adds the portal hero markup/CSS (with reduced-motion guard) and a new docs action/link in the signed-in account card footer.
extensions/levelcode-ai/extension.js Extends the fixed allow-list in openLegal() to support the new docs target safely.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@ndemianc
ndemianc merged commit 65357af into develop Jul 26, 2026
2 checks passed
@ndemianc
ndemianc deleted the feat/account-modal-chevron-hero branch July 26, 2026 03:10
@ndemianc
ndemianc restored the feat/account-modal-chevron-hero branch July 26, 2026 03:17
@ndemianc
ndemianc deleted the feat/account-modal-chevron-hero branch July 26, 2026 03:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants