[jules] style: Add haptic feedback to all mobile buttons (#276)

* [jules] style: Add haptic feedback to all mobile buttons

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>

* [jules] fix: Fix closing tag syntax error in FriendsScreen.js

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>

* [jules] refactor: Use shared withHapticFeedback HOC

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>

* Update mobile/components/ui/HapticMenu.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

.Jules/changelog.md

@@ -7,6 +7,13 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Haptics:** Implemented system-wide haptic feedback for all interactive elements.
+  - **Features:**
+    - Created `HapticButton`, `HapticIconButton`, `HapticFAB`, `HapticCard`, `HapticList`, `HapticCheckbox`, `HapticMenu`, `HapticSegmentedButtons`, `HapticAppbar` (including `HapticAppbarAction`, `HapticAppbarBackAction`) wrappers.
+    - Integrated into all screens (`Home`, `GroupDetails`, `AddExpense`, `Friends`, `Account`, `EditProfile`, `Login`, `Signup`, `JoinGroup`, `GroupSettings`, `SplitwiseImport`).
+    - Uses `expo-haptics` with `Light` impact style for subtle feedback.
+  - **Technical:** Centralized haptic logic in `mobile/components/ui/` to ensure consistency and maintainability.
+
 - **Mobile Accessibility:** Completed accessibility audit for all mobile screens.
   - **Features:**
     - Added `accessibilityLabel` to all interactive elements (buttons, inputs, list items).

.Jules/todo.md

@@ -94,11 +94,12 @@
   - Size: ~55 lines
   - Added: 2026-01-01
 
-- [ ] **[style]** Haptic feedback on all button presses
-  - Files: All button interactions across mobile
-  - Context: Add Expo.Haptics.impactAsync(Light) to buttons
-  - Impact: Tactile feedback makes app feel responsive
-  - Size: ~40 lines
+- [x] **[style]** Haptic feedback on all button presses
+  - Completed: 2026-02-07
+  - Files: `mobile/components/ui/Haptic*.js`, `mobile/screens/*.js`
+  - Context: Created comprehensive Haptic UI system wrapping React Native Paper components
+  - Impact: Tactile feedback makes app feel responsive and native
+  - Size: ~400 lines
   - Added: 2026-01-01
 
 ---

mobile/components/ui/HapticAppbar.js

@@ -0,0 +1,7 @@
+import { Appbar } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticAppbarAction = withHapticFeedback(Appbar.Action);
+const HapticAppbarBackAction = withHapticFeedback(Appbar.BackAction);
+
+export { HapticAppbarAction, HapticAppbarBackAction };

mobile/components/ui/HapticButton.js

@@ -0,0 +1,6 @@
+import { Button } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticButton = withHapticFeedback(Button);
+
+export default HapticButton;

mobile/components/ui/HapticCard.js

@@ -0,0 +1,12 @@
+import { Card } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticCard = withHapticFeedback(Card, { onlyWhenHandler: true });
+
+// Attach subcomponents
+HapticCard.Content = Card.Content;
+HapticCard.Actions = Card.Actions;
+HapticCard.Cover = Card.Cover;
+HapticCard.Title = Card.Title;
+
+export default HapticCard;

mobile/components/ui/HapticCheckbox.js

@@ -0,0 +1,6 @@
+import { Checkbox } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticCheckboxItem = withHapticFeedback(Checkbox.Item);
+
+export default HapticCheckboxItem;

mobile/components/ui/HapticFAB.js

@@ -0,0 +1,6 @@
+import { FAB } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticFAB = withHapticFeedback(FAB);
+
+export default HapticFAB;

mobile/components/ui/HapticIconButton.js

@@ -0,0 +1,6 @@
+import { IconButton } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticIconButton = withHapticFeedback(IconButton);
+
+export default HapticIconButton;

mobile/components/ui/HapticList.js

@@ -0,0 +1,7 @@
+import { List } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticListItem = withHapticFeedback(List.Item, { onlyWhenHandler: true });
+const HapticListAccordion = withHapticFeedback(List.Accordion, { onlyWhenHandler: true });
+
+export { HapticListItem, HapticListAccordion };

mobile/components/ui/HapticMenu.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Menu } from 'react-native-paper';
+import { withHapticFeedback } from './hapticUtils';
+
+const HapticMenuItem = withHapticFeedback(Menu.Item);
+
+const HapticMenu = React.forwardRef(({ children, ...props }, ref) => {
+  return <Menu ref={ref} {...props}>{children}</Menu>;
+});
+HapticMenu.displayName = 'HapticMenu';
+
+HapticMenu.Item = HapticMenuItem;
+
+export default HapticMenu;