Improve AI prompt button UX and fix AudioContext initialization

[kmay89]

Summary

This PR improves the user experience of the AI prompt copy buttons and fixes the AudioContext initialization to work reliably across browsers.

Key Changes

UI/UX Improvements:

• Updated AI prompt copy button styling for better consistency across breakpoints
  • Standardized padding to 5px 10px and font-size to 10px across all screen sizes
  • Reduced SVG icon size from 16px to 14px for better visual balance
• Enhanced button text labels for clarity:
  • Changed "Copy" → "Copy prompt" (hero section)
  • Changed "Copied!" → "Paste into your AI!" (both sections)
• Removed unnecessary CSS rules hiding text spans (now always visible)

AudioContext Fix:

• Moved AudioContext lazy initialization from the init() method's one-time click listener to the play() method
• This ensures AudioContext is created only when a sound actually needs to play, improving reliability
• Maintains the requirement for user gesture (click) before audio can play, as per browser autoplay policies

Implementation Details

The AudioContext initialization change addresses a potential issue where the one-time listener might not fire before a sound is requested, causing audio to fail silently. By creating the context on-demand in play(), we ensure it's always available when needed while still respecting browser security requirements.

https://claude.ai/code/session_01R7NXwectGATMAhTcFRxbnF

[netlify]

✅ Deploy Preview for scqcs ready!

Name	Link
🔨 Latest commit	8cbeeb3
🔍 Latest deploy log	https://app.netlify.com/projects/scqcs/deploys/6983e0ea7b5eb5000774639f
😎 Deploy Preview	https://deploy-preview-14--scqcs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @kmay89, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the user experience of the AI prompt copy buttons by standardizing their visual presentation and clarifying their text labels. Concurrently, it addresses a critical issue with AudioContext initialization, ensuring that audio playback is reliable and consistent by creating the context on-demand when a sound is triggered, thereby respecting browser autoplay policies and preventing silent audio failures.

Highlights

• UI/UX Improvements for AI Prompt Buttons: Standardized styling for AI prompt copy buttons across breakpoints, including consistent padding (5px 10px) and font-size (10px), and reduced SVG icon size from 16px to 14px for better visual balance. The button text labels were also enhanced for clarity, changing 'Copy' to 'Copy prompt' (hero section) and 'Copied!' to 'Paste into your AI!' (both sections). Unnecessary CSS rules that previously hid text spans were removed, making them always visible.
• AudioContext Initialization Fix: The AudioContext initialization logic was refactored to be lazy, moving its creation from a one-time click listener in the init() method to the play() method. This ensures that the AudioContext is only created when a sound actually needs to play, improving reliability across different browsers while still adhering to browser autoplay policies that require a user gesture.

Changelog

• index.html
  • Standardized CSS for .ai-prompt-copy buttons, setting padding to 5px 10px and font-size to 10px.
  • Reduced the width and height of SVG icons within .ai-prompt-copy buttons from 16px to 14px.
  • Removed display: none CSS rules for span elements within .ai-prompt-copy and .hero-ai-prompt .ai-prompt-copy.
  • Updated the text for the 'Copy' button in the hero section from 'Copy' to 'Copy prompt'.
  • Updated the 'Copied!' message to 'Paste into your AI!' for both hero and general AI prompt copy buttons.
• main.js
  • Removed the AudioContext initialization from the init() method's one-time click listener.
  • Implemented lazy AudioContext initialization within the play() method, ensuring it's created only when a sound is played and a user gesture has occurred.
  • Adjusted the play() method's initial guard clause to only check for this.enabled, as this.ctx is now handled by the lazy initialization.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully improves the user experience for the AI prompt copy buttons and fixes a bug in the AudioContext initialization. The UI changes make the button styling consistent and the labels clearer. The JavaScript change correctly defers AudioContext creation until it's needed within a user gesture, resolving an issue where sounds might not play on hover. The changes are well-executed. I've added a couple of suggestions to remove some minor code redundancy introduced by these improvements.