Feedback on button presses

[tajemniktv]

Enhancmened idea for all buttons - some sort of feedback so the UI doesn't feel so static

[github-actions]

This issue has been inactive for a long period. It is now marked stale. Comment or remove the stale label if this is still relevant.

[coderabbitai]

Coding Plan

Summary

• Create shared primitives first: TajsMotion tokens, a platform-safe Haptics abstraction (expect/actual), a LocalReduceMotion CompositionLocal, and one pressFeedback modifier.
• Integrate the primitives into the existing shared choke points (mouseClickable, ActionButton) and a new tactile IconButton, then remove the four duplicated implementations.
• Broaden adoption by migrating raw Button/IconButton usages and by covering the confirmed gaps in dashboard cards, NodeCards, and TrackCards rows.
• Respect the existing reduceMotion preference and keep haptics no-op on targets that do not support them.

Design Choices

Design Choice 1: How should haptic feedback be provided across platforms?

Options Considered:

1. Use Compose LocalHapticFeedback directly in common code everywhere.
2. Introduce a platform-abstracted Haptics using the existing expect/actual pattern under ui/platform/, with real implementations on Android and iOS and no-op on JVM/web.

Chosen Option: 2

Rationale: Compose LocalHapticFeedback.performHapticFeedback() compiles in common code but is reliably effective only on Android in the current Compose Multiplatform baseline. iOS, JVM, and web need separate handling or no-op. Option 2 follows the existing ClipboardUtils template and the repo's cross-platform guidance, and it avoids assuming haptics work on targets where they do not.

Design Choice 2: Where should press feedback be centralized so it reaches the most controls?

Options Considered:

1. Add feedback only inside ActionButton and migrate all call sites to it.
2. Add a reusable press-feedback modifier, integrate it into mouseClickable and ActionButton, and add a shared tactile IconButton wrapper.

Chosen Option: 2

Rationale: Feedback is duplicated in four places and absent in most raw Button/IconButton usages. Option 2 reuses the existing shared choke points (mouseClickable, ActionButton) and provides one primitive that removes duplication, so feedback propagates broadly with fewer call-site changes.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Establish shared feedback primitives

This phase creates the reusable building blocks for press feedback. It defines motion tokens, a platform-safe haptic abstraction, a reduced-motion signal, and a single press-feedback modifier. These primitives let later phases apply consistent feedback without duplicating logic.

Task 1: Add centralized motion tokens

Create shared animation-spec tokens so all feedback uses the DESIGN.md values.

• Add a TajsMotion token object in the theme package (composeApp/.../ui/theme/), alongside TajsOSTheme.
• Define the fast-feedback spring (stiffness 180, damping ratio 0.22) and the pressed scale value (0.98) as named constants.
• Define the standard and gentle spring presets from DESIGN.md for future reuse.
• Use these tokens everywhere press feedback is applied, replacing hardcoded spring values.

Task 2: Add a platform-abstracted haptic utility

Create a haptic abstraction that is safe on all targets, following the ClipboardUtils expect/actual template.

• Add HapticUtils.kt in commonMain/.../ui/platform/ declaring an expect entry point to perform a light press haptic and a compose helper to obtain a callable trigger.
• Add HapticUtils.android.kt in androidMain/.../ui/platform/ using the Android haptic API (or delegating to Compose LocalHapticFeedback).
• Add HapticUtils.ios.kt in iosMain/.../ui/platform/ using UIKit impact feedback.
• Add HapticUtils.jvm.kt and HapticUtils.web.kt in the matching source sets as no-op implementations.

Task 3: Add a reduced-motion CompositionLocal and provide it app-wide

Expose the existing reduceMotion preference to UI code so feedback can respect it.

• Add a LocalReduceMotion CompositionLocal, mirroring LocalGlassSystem in GlassEffects.kt.
• Provide LocalReduceMotion near the app root where reduceMotion from MainViewModel is already available, using CompositionLocalProvider.
• Read the existing reduceMotion StateFlow that SettingsScreen already collects; do not add a new preference.

Task 4: Add a reusable press-feedback modifier

Create the single primitive that produces the visual press feedback.

• Add a Modifier.pressFeedback (or similarly named) in ui/components/common/.
• Accept a MutableInteractionSource, derive isPressed with collectIsPressedAsState(), and animate scale with animateFloatAsState using TajsMotion tokens applied via graphicsLayer.
• When LocalReduceMotion is true, skip the scale animation and keep scale at 1f.
• Provide an option to fire the haptic trigger from Task 1.2 on press start, gated so it is a no-op on targets without haptics.

🤖 Prompt for AI agents

Implement the shared press-feedback primitives that later phases will reuse. The
goal is a single set of building blocks (motion tokens, a platform-safe haptic
trigger, a reduced-motion signal, and a press-feedback modifier) with no
duplication.

1. Motion tokens: Create a `TajsMotion` token object in the theme package
(`composeApp/.../ui/theme/`), next to `TajsOSTheme`. Define named constants for
the fast-feedback spring (stiffness 180, damping ratio 0.22) and the pressed
scale value (0.98). Also define the standard and gentle spring presets from
DESIGN.md for future reuse. All press-feedback code must reference these tokens
instead of hardcoded spring values.

2. Haptic utility: Follow the `ClipboardUtils` expect/actual template. In
`commonMain/.../ui/platform/`, add `HapticUtils.kt` with an `expect`
function/entry point to perform a light press haptic, plus a Compose helper that
returns a callable trigger. In `androidMain/.../ui/platform/`, add
`HapticUtils.android.kt` using the Android haptic API (or delegating to Compose
`LocalHapticFeedback`). In `iosMain/.../ui/platform/`, add `HapticUtils.ios.kt`
using UIKit impact feedback. In the `jvmMain`/`webMain` (or equivalent) source
sets, add `HapticUtils.jvm.kt` and `HapticUtils.web.kt` as no-op
implementations.

3. Reduced-motion CompositionLocal: Add `LocalReduceMotion`, mirroring the
`LocalGlassSystem` pattern in `GlassEffects.kt`. Provide it near the app root
using `CompositionLocalProvider`, sourced from the existing `reduceMotion`
StateFlow already exposed by `MainViewModel` and consumed by `SettingsScreen`.
Do not add a new preference; reuse the existing one end-to-end.

4. Press-feedback modifier: Add `Modifier.pressFeedback` (or a similarly named
modifier) in `ui/components/common/`. It must accept a
`MutableInteractionSource`, derive `isPressed` via `collectIsPressedAsState()`,
and animate scale with `animateFloatAsState` using the `TajsMotion` tokens,
applied through `graphicsLayer`. When `LocalReduceMotion` is true, skip the
scale animation and keep the scale at 1f. Add an option to fire the haptic
trigger (from step 2) on press start, and ensure this option is a safe no-op on
targets without haptics support.

Phase 2: Integrate feedback into shared interactive entry points

This phase wires the new primitives into the shared components that most controls already pass through. It also removes the four duplicated implementations. After this phase, all surfaces built on mouseClickable, ActionButton, the new tactile IconButton, and DashCard get consistent feedback.

Task 1: Add optional press feedback to `mouseClickable`

Give the shared clickable modifier built-in feedback for card and row surfaces.

• Update Modifier.mouseClickable in MouseInteractions.kt to optionally apply the pressFeedback modifier from Task 1.4.
• Reuse the interactionSource that mouseClickable already accepts; when none is passed, remember one internally.
• Add a parameter to enable or disable the feedback so callers that need custom behavior can opt out.
• Respect LocalReduceMotion and the enabled flag (Compose suppresses press interactions when disabled, so the animation is skipped automatically).

Task 2: Add haptics and tokens to `ActionButton`

Bring ActionButton in line with the shared primitives.

• Update ActionButton.kt to use the TajsMotion tokens and the pressFeedback modifier instead of its inline scale logic.
• Add a haptic trigger on press using the Task 1.2 abstraction, matching the existing ModuleCard behavior.
• Keep the existing enabled handling for colors and pointerHoverIcon.

Task 3: Add a shared tactile `IconButton` wrapper

Provide one icon-button component with feedback and normalized defaults.

• Add a tactile IconButton wrapper in ui/components/ that wraps Material3 IconButton, applies pressFeedback, and fires the haptic trigger.
• Require a non-null contentDescription parameter to satisfy the repo string/accessibility guideline.
• Provide sensible default touch-target size and tint so scattered IconButton sizing/tint variance is reduced.
• Pass enabled through to the underlying IconButton and gate the hand cursor on it.

Task 4: Remove duplicated feedback and cover `DashCard`

Consolidate existing implementations onto the shared primitives.

• Update PrimitiveCards.kt (TactileCard) to use pressFeedback and TajsMotion tokens, removing its local spring logic.
• Update ModuleCard.kt to use pressFeedback and the haptic abstraction, removing its inline scale and direct LocalHapticFeedback usage.
• Update NewEntryButton in AppSidebar.kt to use pressFeedback, removing its duplicated scale logic.
• Update DashCard in PrimitiveCards.kt to add press feedback through the shared primitive so dashboard tiles built on it feel responsive.

🤖 Prompt for AI agents

Wire the Phase 1 primitives into the components that most controls already pass
through, and remove the duplicated press-feedback implementations that exist
today.

1. `mouseClickable`: In `MouseInteractions.kt`, update `Modifier.mouseClickable`
to optionally apply the `pressFeedback` modifier. Reuse the `interactionSource`
parameter it already accepts; if none is passed, remember one internally. Add a
parameter to enable or disable the feedback so callers needing custom behavior
can opt out. Ensure the modifier respects `LocalReduceMotion` and the `enabled`
flag (Compose already suppresses press interactions when disabled, so the
animation is skipped automatically in that case).

2. `ActionButton`: In `ActionButton.kt`, replace the inline scale logic with the
`TajsMotion` tokens and the `pressFeedback` modifier. Add a haptic trigger on
press using the Task 1.2 abstraction, matching the existing `ModuleCard`
behavior. Keep the existing `enabled` handling for colors and `pointerHoverIcon`
unchanged.

3. Tactile `IconButton`: Add a new wrapper component in `ui/components/` that
wraps Material3 `IconButton`, applies `pressFeedback`, and fires the haptic
trigger. Require a non-null `contentDescription` parameter. Provide sensible
default touch-target size and tint values. Pass `enabled` through to the
underlying `IconButton` and gate the hand cursor on the `enabled` state.

4. Remove duplication: Update `PrimitiveCards.kt` (`TactileCard`) to use
`pressFeedback` and `TajsMotion` tokens, removing its local spring logic. Update
`ModuleCard.kt` to use `pressFeedback` and the haptic abstraction, removing its
inline scale logic and its direct `LocalHapticFeedback` usage. Update
`NewEntryButton` in `AppSidebar.kt` to use `pressFeedback`, removing its
duplicated scale logic. Update `DashCard` in `PrimitiveCards.kt` to add press
feedback through the shared primitive.

Phase 3: Broaden adoption across screens

This phase closes the coverage gaps so feedback reaches the controls that currently bypass the shared components. It migrates raw Material3 usages and adds feedback to card and row surfaces that lack it.

Task 1: Migrate raw `Button` usages to `ActionButton`

Give the 46 raw Button sites consistent feedback.

• Replace raw Material3 Button(...) calls across the listed screen and block files with ActionButton, preserving text, colors, enabled, and icons.
• Where a Button needs styling that ActionButton cannot express, apply the pressFeedback modifier and haptic trigger directly instead.

Task 2: Migrate raw `IconButton` usages to the tactile wrapper

Give icon-only actions feedback and normalized accessibility.

• Replace raw IconButton(...) calls across headers, toolbars, and list rows with the tactile IconButton wrapper from Task 2.3.
• Provide localized contentDescription values from resource files where they were previously null.

Task 3: Add feedback to remaining card and row surfaces

Cover the confirmed gaps outside the shared components.

• Update per-medication rows in TrackCards.kt to pass an interactionSource and use pressFeedback (or the enhanced mouseClickable).
• Update NodeCards.kt to add press-driven feedback through an interactionSource, separate from its existing isDone state animation.
• Review the remaining dashboard card renderers referenced by DashboardCoreBlockRenderers.kt (AlertCards.kt, GeneralCards.kt, DashboardCards.kt) and apply the shared feedback where clickable cards lack it.

Task 4: Add unit tests for feedback logic

Follow the existing plain kotlin.test convention.

• Extract the scale-target and should-trigger-haptic decisions into small pure functions.
• Add kotlin.test tests in commonTest that verify the scale value for pressed/unpressed and reduced-motion cases, mirroring the existing ScreenTest/PerformanceTest style.

🤖 Prompt for AI agents

Close the remaining coverage gaps by migrating raw Material3 controls onto the
shared primitives and by adding feedback to card/row surfaces that still lack
it. Then add unit tests for the feedback logic.

1. `Button` migration: Replace the 46 raw Material3 `Button(...)` calls, across
the affected screen and block files, with `ActionButton`, preserving text,
colors, `enabled`, and icons. For any `Button` that needs styling `ActionButton`
cannot express, apply the `pressFeedback` modifier and the haptic trigger
directly instead of migrating to `ActionButton`.

2. `IconButton` migration: Replace raw `IconButton(...)` calls in headers,
toolbars, and list rows with the tactile `IconButton` wrapper from Phase 2.
Where `contentDescription` was previously null, supply localized values from
resource files.

3. Remaining card/row surfaces: In `TrackCards.kt`, update per-medication rows
to pass an `interactionSource` and use `pressFeedback` (or the enhanced
`mouseClickable`). In `NodeCards.kt`, add press-driven feedback through an
`interactionSource`, kept separate from the existing `isDone` state animation.
Review the dashboard card renderers referenced by
`DashboardCoreBlockRenderers.kt` (`AlertCards.kt`, `GeneralCards.kt`,
`DashboardCards.kt`) and apply the shared feedback to any clickable cards that
lack it.

4. Unit tests: Extract the scale-target decision and the should-trigger-haptic
decision into small pure functions. Add `kotlin.test` tests in `commonTest` that
verify the scale value for the pressed, unpressed, and reduced-motion cases,
following the style of the existing `ScreenTest`/`PerformanceTest` tests.

Research

The app is a Compose Multiplatform project. Interactive surfaces route through two families: Material3 components (Button, IconButton, Surface(onClick=…)) and custom surfaces that use Modifier.mouseClickable in ui/components/common/MouseInteractions.kt. mouseClickable is the widely shared click entry point (27+ files).

Press-scale feedback is duplicated in ActionButton.kt, PrimitiveCards.kt (TactileCard), ModuleCard.kt, and AppSidebar.kt. Haptics exist only in ModuleCard.kt, through LocalHapticFeedback. Most raw Button usages (46 sites) and IconButton usages (about 30 sites) have no press feedback.

A reduceMotion preference exists end-to-end in PreferencesRepository, MainViewModel, and SettingsScreen, but no code consumes it yet.

DESIGN.md defines the tactile-feedback contract and references a TajsMotion token set that does not yet exist.

GlassEffects.kt shows the LocalGlassSystem CompositionLocal pattern. ClipboardUtils shows the expect/actual per-platform template under ui/platform/.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement the shared press-feedback primitives that later phases will reuse. The
goal is a single set of building blocks (motion tokens, a platform-safe haptic
trigger, a reduced-motion signal, and a press-feedback modifier) with no
duplication.

1. Motion tokens: Create a `TajsMotion` token object in the theme package
(`composeApp/.../ui/theme/`), next to `TajsOSTheme`. Define named constants for
the fast-feedback spring (stiffness 180, damping ratio 0.22) and the pressed
scale value (0.98). Also define the standard and gentle spring presets from
DESIGN.md for future reuse. All press-feedback code must reference these tokens
instead of hardcoded spring values.

2. Haptic utility: Follow the `ClipboardUtils` expect/actual template. In
`commonMain/.../ui/platform/`, add `HapticUtils.kt` with an `expect`
function/entry point to perform a light press haptic, plus a Compose helper that
returns a callable trigger. In `androidMain/.../ui/platform/`, add
`HapticUtils.android.kt` using the Android haptic API (or delegating to Compose
`LocalHapticFeedback`). In `iosMain/.../ui/platform/`, add `HapticUtils.ios.kt`
using UIKit impact feedback. In the `jvmMain`/`webMain` (or equivalent) source
sets, add `HapticUtils.jvm.kt` and `HapticUtils.web.kt` as no-op
implementations.

3. Reduced-motion CompositionLocal: Add `LocalReduceMotion`, mirroring the
`LocalGlassSystem` pattern in `GlassEffects.kt`. Provide it near the app root
using `CompositionLocalProvider`, sourced from the existing `reduceMotion`
StateFlow already exposed by `MainViewModel` and consumed by `SettingsScreen`.
Do not add a new preference; reuse the existing one end-to-end.

4. Press-feedback modifier: Add `Modifier.pressFeedback` (or a similarly named
modifier) in `ui/components/common/`. It must accept a
`MutableInteractionSource`, derive `isPressed` via `collectIsPressedAsState()`,
and animate scale with `animateFloatAsState` using the `TajsMotion` tokens,
applied through `graphicsLayer`. When `LocalReduceMotion` is true, skip the
scale animation and keep the scale at 1f. Add an option to fire the haptic
trigger (from step 2) on press start, and ensure this option is a safe no-op on
targets without haptics support.
===============================================================================

Task: 2

Wire the Phase 1 primitives into the components that most controls already pass
through, and remove the duplicated press-feedback implementations that exist
today.

1. `mouseClickable`: In `MouseInteractions.kt`, update `Modifier.mouseClickable`
to optionally apply the `pressFeedback` modifier. Reuse the `interactionSource`
parameter it already accepts; if none is passed, remember one internally. Add a
parameter to enable or disable the feedback so callers needing custom behavior
can opt out. Ensure the modifier respects `LocalReduceMotion` and the `enabled`
flag (Compose already suppresses press interactions when disabled, so the
animation is skipped automatically in that case).

2. `ActionButton`: In `ActionButton.kt`, replace the inline scale logic with the
`TajsMotion` tokens and the `pressFeedback` modifier. Add a haptic trigger on
press using the Task 1.2 abstraction, matching the existing `ModuleCard`
behavior. Keep the existing `enabled` handling for colors and `pointerHoverIcon`
unchanged.

3. Tactile `IconButton`: Add a new wrapper component in `ui/components/` that
wraps Material3 `IconButton`, applies `pressFeedback`, and fires the haptic
trigger. Require a non-null `contentDescription` parameter. Provide sensible
default touch-target size and tint values. Pass `enabled` through to the
underlying `IconButton` and gate the hand cursor on the `enabled` state.

4. Remove duplication: Update `PrimitiveCards.kt` (`TactileCard`) to use
`pressFeedback` and `TajsMotion` tokens, removing its local spring logic. Update
`ModuleCard.kt` to use `pressFeedback` and the haptic abstraction, removing its
inline scale logic and its direct `LocalHapticFeedback` usage. Update
`NewEntryButton` in `AppSidebar.kt` to use `pressFeedback`, removing its
duplicated scale logic. Update `DashCard` in `PrimitiveCards.kt` to add press
feedback through the shared primitive.
===============================================================================

Task: 3

Close the remaining coverage gaps by migrating raw Material3 controls onto the
shared primitives and by adding feedback to card/row surfaces that still lack
it. Then add unit tests for the feedback logic.

1. `Button` migration: Replace the 46 raw Material3 `Button(...)` calls, across
the affected screen and block files, with `ActionButton`, preserving text,
colors, `enabled`, and icons. For any `Button` that needs styling `ActionButton`
cannot express, apply the `pressFeedback` modifier and the haptic trigger
directly instead of migrating to `ActionButton`.

2. `IconButton` migration: Replace raw `IconButton(...)` calls in headers,
toolbars, and list rows with the tactile `IconButton` wrapper from Phase 2.
Where `contentDescription` was previously null, supply localized values from
resource files.

3. Remaining card/row surfaces: In `TrackCards.kt`, update per-medication rows
to pass an `interactionSource` and use `pressFeedback` (or the enhanced
`mouseClickable`). In `NodeCards.kt`, add press-driven feedback through an
`interactionSource`, kept separate from the existing `isDone` state animation.
Review the dashboard card renderers referenced by
`DashboardCoreBlockRenderers.kt` (`AlertCards.kt`, `GeneralCards.kt`,
`DashboardCards.kt`) and apply the shared feedback to any clickable cards that
lack it.

4. Unit tests: Extract the scale-target decision and the should-trigger-haptic
decision into small pure functions. Add `kotlin.test` tests in `commonTest` that
verify the scale value for the pressed, unpressed, and reduced-motion cases,
following the style of the existing `ScreenTest`/`PerformanceTest` tests.

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!