feat: ui papercuts

Author: AlirezaHadjar

example/app/import-modal.tsx

@@ -96,7 +96,10 @@ export default function ImportModal() {
   const isPresented = router.canGoBack();
 
   return (
-    <KeyboardAwareScrollView style={styles.container}>
+    <KeyboardAwareScrollView
+      style={styles.container}
+      keyboardShouldPersistTaps="handled"
+    >
       <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
         <Text style={styles.headerTitle}>Import Recording</Text>
         {isPresented && (
@@ -115,6 +118,7 @@ export default function ImportModal() {
           <TextInput
             style={styles.titleInput}
             value={title}
+            autoFocus
             onChangeText={setTitle}
             placeholder="Enter recording name"
             placeholderTextColor="#636366"

example/src/components/RecordingItem.tsx

@@ -29,9 +29,9 @@ export default function RecordingItem({
   onDelete,
   onNameChange,
 }: RecordingItemProps) {
-  const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
+  const formatDuration = (millisecond: number) => {
+    const mins = Math.floor(millisecond / 60000);
+    const secs = Math.floor((millisecond % 60000) / 1000);
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   };
 

example/src/components/RecordingsList.tsx

@@ -62,8 +62,16 @@ export default function RecordingsList({
       <View style={styles.emptyContainer}>
         <Text style={styles.emptyText}>No recordings yet</Text>
         <Text style={styles.emptySubtext}>
-          Tap RECORD to create your first haptic pattern
+          Create a new haptic pattern or import an existing one
         </Text>
+        <View style={styles.emptyButtonsContainer}>
+          <Link href="/import-modal" asChild>
+            <TouchableOpacity style={styles.emptyButton}>
+              <Text style={styles.emptyButtonIcon}>📁</Text>
+              <Text style={styles.emptyButtonText}>Import</Text>
+            </TouchableOpacity>
+          </Link>
+        </View>
       </View>
     );
   }
@@ -151,5 +159,30 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: '#636366',
     textAlign: 'center',
+    marginBottom: 32,
+  },
+  emptyButtonsContainer: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  emptyButton: {
+    backgroundColor: '#1C1C1E',
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 120,
+    borderWidth: 1,
+    borderColor: '#2C2C2E',
+  },
+  emptyButtonIcon: {
+    fontSize: 32,
+    marginBottom: 8,
+  },
+  emptyButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#FFFFFF',
   },
 });