Reorganize UI controls and improve form interactions

[mostlygeek]

Summary

This PR reorganizes control placement in the playground interfaces and improves form interactions for better UX, particularly on mobile devices.

Key Changes

• AudioInterface & ImageInterface: Moved "Clear" buttons from the top control bar into the action button group below the form inputs for better visual hierarchy and logical grouping
• ImageInterface:
  • Added prompt clearing to the clearImage() function so the input field is reset when clearing generated images
  • Updated Clear button disabled state to also check if prompt is empty, allowing users to clear an empty prompt
  • Added responsive flex styling (flex-1 md:flex-none) to the Clear button for better mobile layout
• ExpandableTextarea:
  • Imported untrack from Svelte to properly handle reactive dependencies
  • Wrapped expandedValue.length in untrack() to prevent unnecessary reactivity when setting cursor position
  • Improved button visibility on mobile by changing opacity from opacity-0 to opacity-60 with md:opacity-0 breakpoint, making the expand button more discoverable on touch devices

Implementation Details

The untrack() usage in ExpandableTextarea ensures that reading the text length doesn't create a reactive dependency, preventing potential infinite loops while still allowing the effect to run when isExpanded changes.

https://claude.ai/code/session_01XvnL5FJF4fBRNh9oKXSYrm

Summary by CodeRabbit

• Style

  • Repositioned Clear buttons in audio and image playgrounds to the main action area for better UI organization
  • Enhanced expand button visibility on mobile screens with improved opacity styling

• Bug Fixes

  • Image interface now properly resets the prompt field along with clearing generated content

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR reorganizes UI elements across three playground components. Clear buttons are relocated from control areas to action areas in AudioInterface and ImageInterface, with updated disable logic in the latter. ExpandableTextarea refactors its focus handler using Svelte's untrack and adjusts button opacity styling.

Changes

Cohort / File(s)	Summary
Clear button relocation ui-svelte/src/components/playground/AudioInterface.svelte, ui-svelte/src/components/playground/ImageInterface.svelte	Moved Clear buttons from top control sections to bottom action areas. ImageInterface's clearImage() also now resets prompt to empty string, and the disable condition updated to check prompt state in addition to generated image and error status.
Focus handler and styling refactoring ui-svelte/src/components/playground/ExpandableTextarea.svelte	Added untrack import; refactored expanded view focus handler to compute text length inside untrack before setting caret position. Updated expand button CSS classes to show 60% opacity on small screens and 0% opacity at md+ breakpoint, preserving group-hover behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly reflects the main changes: reorganizing UI controls (moving Clear buttons) and improving form interactions (ExpandableTextarea focus handling, responsive styling).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/reorganize-clear-buttons-ykwjD

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}