UI Tweak: Fade buttons on history preview (homescreen) if no interaction in progress.

[sachasayan]

Description

Minor UI Tweak: Fades the buttons on the homescreen history preview section if there's no interaction in progress to reduce visual clutter on that screen. This makes no functional difference, it simply reduces the visual prominence of the copy buttons and 'mutes' them if the relevant item is not currently in an active/hover state.

(Before: Left / After: Right)

Type of Change

• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).

Pre-Submission Checklist

• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Screen.Recording.2025-05-12.at.7.43.56.PM.mov

Documentation Updates

Does this PR necessitate updates to user-facing documentation?

• No documentation updates are required.

---

Important

UI change to fade CopyButton in HistoryPreview when not interacted with, reducing visual clutter.

• UI Change:
  • CopyButton in CopyButton.tsx now accepts an optional className prop to customize styles.
  • In HistoryPreview.tsx, CopyButton is given className with opacity-20 and group-hover:opacity-50 to fade when not hovered.
• Behavior:
  • Buttons in history preview fade to reduce visual clutter when not interacted with.
  • No functional changes, purely stylistic.

^{This description was created by for b6b4fb5cd0f0c00d52fd038e5c4ec5192b558019. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: b6b4fb5cd0f0c00d52fd038e5c4ec5192b558019

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[sachasayan]

Ready to go.

[daniel-lxs]

This seems like a nice detail to add to the main task list.

Just rebased and looks good!

[hannesrudolph]

Code Review: UI Tweak - Fade buttons on history preview

Overview

This PR implements a minor UI improvement to reduce visual clutter by fading action buttons in the history preview section when not actively being interacted with. The change uses CSS opacity transitions to make buttons less prominent until hovered.

✅ Strengths

Code Quality:

• Clean, minimal implementation focused on a single improvement
• Proper use of TypeScript with optional prop typing
• Good use of utility class composition with cn() helper
• Maintains existing functionality while enhancing UX

UI/UX Design:

• Thoughtful approach to reducing visual noise
• Progressive disclosure pattern - buttons appear when needed
• Maintains accessibility with hover states
• Before/after screenshots clearly demonstrate the improvement

Implementation Approach:

• Uses CSS classes for styling rather than inline styles
• Leverages existing design system (Tailwind CSS)
• Proper component prop extension pattern
• Good separation of concerns

🔍 Technical Details

Changes Made:

1. CopyButton.tsx: Added optional className prop and merged it with existing classes
2. TaskItem.tsx: Added group class to enable group-hover functionality
3. TaskItemHeader.tsx: Applied opacity classes (opacity-20, group-hover:opacity-50, hover:opacity-100)

CSS Class Hierarchy:

Default: opacity-20 (very faded)
Group hover: opacity-50 (medium fade)
Direct hover: opacity-100 (full opacity)

✅ Code Quality Assessment

Type Safety:

• Proper TypeScript implementation with optional props
• No type errors or unsafe operations

Accessibility:

• Maintains hover states for keyboard/mouse interaction
• Buttons remain functional at all opacity levels
• Good contrast progression

Performance:

• Zero performance impact - pure CSS transitions
• No JavaScript event handlers added
• Minimal bundle size increase

🔍 Minor Considerations

1. Accessibility: While functional, very low opacity (20%) might be difficult for some users to discover
2. Mobile: Touch interfaces don't have hover states - buttons will remain at 20% opacity
3. Consistency: Consider if this pattern should be applied to other similar UI elements

Security & Performance

• ✅ No security implications
• ✅ No performance impact
• ✅ No external dependencies added
• ✅ CSS-only implementation

Overall Assessment

LGTM ✅

This is a well-executed, focused UI improvement that reduces visual clutter effectively while maintaining full functionality. The implementation uses proper React/TypeScript patterns and follows existing code conventions.

Suggestion for future consideration: Monitor user feedback to ensure the 20% opacity isn't too subtle for discoverability, and consider applying this pattern consistently across other similar UI elements.

[mrubens]

Thanks!