fix(mobile): improve button press feedback on Home and subfolder screens

Author: typelets

apps/mobile/v1/src/screens/FolderNotes/components/NotesList/SubfoldersList.tsx

@@ -78,7 +78,10 @@ export const SubfoldersList: React.FC<SubfoldersListProps> = ({
         {/* Create Folder Button */}
         <Pressable
           onPress={onCreateFolderPress}
-          android_ripple={{ color: theme.colors.muted }}
+          style={({ pressed }) => [
+            viewMode === 'grid' ? styles.pressableItemGrid : styles.pressableItem,
+            pressed && { opacity: 0.6 }
+          ]}
         >
           <GlassView
             glassEffectStyle="regular"
@@ -100,15 +103,15 @@ export const SubfoldersList: React.FC<SubfoldersListProps> = ({
         {subfolders.map((subfolder) => (
           <Pressable
             key={subfolder.id}
-            style={[
+            style={({ pressed }) => [
               viewMode === 'grid' ? styles.subfolderItemGrid : styles.subfolderItem,
               {
                 backgroundColor: viewMode === 'grid' ? subfolder.color || '#000000' : theme.colors.card,
                 borderColor: theme.colors.border
-              }
+              },
+              pressed && { opacity: 0.6 }
             ]}
             onPress={() => onFolderPress(subfolder.id, subfolder.name)}
-            android_ripple={{ color: theme.colors.muted }}
           >
             <View style={viewMode === 'grid' ? styles.subfolderContentGrid : styles.subfolderContent}>
               {viewMode === 'list' && (
@@ -133,6 +136,12 @@ export const SubfoldersList: React.FC<SubfoldersListProps> = ({
 };
 
 const styles = StyleSheet.create({
+  pressableItem: {
+    borderRadius: 12,
+  },
+  pressableItemGrid: {
+    borderRadius: 12,
+  },
   sectionHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',

apps/mobile/v1/src/screens/Home/index.tsx

@@ -7,7 +7,7 @@ import { GlassView } from 'expo-glass-effect';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback,useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Alert, Animated, Dimensions, Image, Keyboard, RefreshControl, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Alert, Animated, Dimensions, Image, Keyboard, Pressable, RefreshControl, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { CreateFileSheet, CreateFileSheetRef } from '../../components/CreateFileSheet';
@@ -405,14 +405,18 @@ export default function HomeScreen() {
               </Text>
               <View style={styles.specialViewsList}>
                 {SPECIAL_VIEWS.map((view) => (
-                  <TouchableOpacity
+                  <Pressable
                     key={view.id}
                     onPress={() => {
                       router.push({
                         pathname: '/folder-notes',
                         params: { viewType: view.id }
                       });
                     }}
+                    style={({ pressed }) => [
+                      styles.pressableItem,
+                      pressed && { opacity: 0.6 }
+                    ]}
                   >
                     <GlassView glassEffectStyle="regular" style={[styles.glassSpecialViewItem, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]} pointerEvents="none">
                       <View style={styles.specialViewItem}>
@@ -431,7 +435,7 @@ export default function HomeScreen() {
                         </View>
                       </View>
                     </GlassView>
-                  </TouchableOpacity>
+                  </Pressable>
                 ))}
               </View>
             </View>
@@ -494,7 +498,13 @@ export default function HomeScreen() {
               <View style={viewMode === 'grid' ? styles.foldersGrid : styles.foldersList}>
                 {/* Create Folder Button */}
                 {viewMode === 'grid' ? (
-                  <TouchableOpacity onPress={() => createFolderSheetRef.current?.present()}>
+                  <Pressable
+                    onPress={() => createFolderSheetRef.current?.present()}
+                    style={({ pressed }) => [
+                      styles.pressableItemGrid,
+                      pressed && { opacity: 0.7 }
+                    ]}
+                  >
                     <GlassView
                       glassEffectStyle="regular"
                       style={[
@@ -516,9 +526,15 @@ export default function HomeScreen() {
                         </View>
                       </View>
                     </GlassView>
-                  </TouchableOpacity>
+                  </Pressable>
                 ) : (
-                  <TouchableOpacity onPress={() => createFolderSheetRef.current?.present()}>
+                  <Pressable
+                    onPress={() => createFolderSheetRef.current?.present()}
+                    style={({ pressed }) => [
+                      styles.pressableItem,
+                      pressed && { opacity: 0.6 }
+                    ]}
+                  >
                     <GlassView
                       glassEffectStyle="regular"
                       style={[
@@ -536,19 +552,20 @@ export default function HomeScreen() {
                         </View>
                       </View>
                     </GlassView>
-                  </TouchableOpacity>
+                  </Pressable>
                 )}
 
                 {allFolders.map((folder) => (
                   viewMode === 'grid' ? (
-                    <TouchableOpacity
+                    <Pressable
                       key={folder.id}
-                      style={[
+                      style={({ pressed }) => [
                         styles.folderItemGrid,
                         {
                           backgroundColor: folder.color || '#000000',
                           borderColor: theme.colors.border
-                        }
+                        },
+                        pressed && { opacity: 0.7 }
                       ]}
                       onPress={() => {
                         router.push({
@@ -562,16 +579,20 @@ export default function HomeScreen() {
                           {folder.name}
                         </Text>
                       </View>
-                    </TouchableOpacity>
+                    </Pressable>
                   ) : (
-                    <TouchableOpacity
+                    <Pressable
                       key={folder.id}
                       onPress={() => {
                         router.push({
                           pathname: '/folder-notes',
                           params: { folderId: folder.id, folderName: folder.name }
                         });
                       }}
+                      style={({ pressed }) => [
+                        styles.pressableItem,
+                        pressed && { opacity: 0.6 }
+                      ]}
                     >
                       <GlassView glassEffectStyle="regular" style={[styles.glassFolderItem, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]} pointerEvents="none">
                         <View style={styles.folderItem}>
@@ -588,7 +609,7 @@ export default function HomeScreen() {
                           </View>
                         </View>
                       </GlassView>
-                    </TouchableOpacity>
+                    </Pressable>
                   )
                 ))}
               </View>
@@ -763,6 +784,12 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  pressableItem: {
+    borderRadius: 12,
+  },
+  pressableItemGrid: {
+    borderRadius: 12,
+  },
   loadingContainer: {
     position: 'absolute',
     top: 0,