Kantongku: kategori di Pengaturan jadi grid chip ringkas

src/screens/SettingsScreen.tsx

@@ -368,30 +368,36 @@ export function SettingsScreen() {
             <Text style={styles.catGroupLabel}>
               {t === 'income' ? '💚 Pemasukan' : '❤️ Pengeluaran'}
             </Text>
-            {categories
-              .filter((c) => c.type === t)
-              .map((c) => (
-                <View key={c.id} style={styles.recurringRow}>
-                  <View style={styles.dataIconCircle}>
-                    <Text style={styles.catEmoji}>{c.icon}</Text>
+            <View style={styles.catChipGrid}>
+              {categories
+                .filter((c) => c.type === t)
+                .map((c) => (
+                  <View key={c.id} style={styles.catChipWrap}>
+                    <Pressable
+                      style={styles.catChip}
+                      onPress={() =>
+                        navigation.navigate('CategoryForm', {
+                          categoryId: c.id,
+                          initialName: c.name,
+                          initialIcon: c.icon,
+                        })
+                      }
+                    >
+                      <Text style={styles.catChipEmoji}>{c.icon}</Text>
+                      <Text style={styles.catChipName} numberOfLines={1}>
+                        {c.name}
+                      </Text>
+                    </Pressable>
+                    <Pressable
+                      style={styles.catChipDelete}
+                      onPress={() => handleDeleteCategory(c)}
+                      hitSlop={6}
+                    >
+                      <Ionicons name="close" size={12} color={colors.white} />
+                    </Pressable>
                   </View>
-                  <Pressable
-                    style={styles.dataInfo}
-                    onPress={() =>
-                      navigation.navigate('CategoryForm', {
-                        categoryId: c.id,
-                        initialName: c.name,
-                        initialIcon: c.icon,
-                      })
-                    }
-                  >
-                    <Text style={styles.dataTitle}>{c.name}</Text>
-                  </Pressable>
-                  <Pressable onPress={() => handleDeleteCategory(c)} hitSlop={8}>
-                    <Ionicons name="trash-outline" size={18} color={colors.expense} />
-                  </Pressable>
-                </View>
-              ))}
+                ))}
+            </View>
           </View>
         ))}
         <View style={styles.divider} />
@@ -592,9 +598,45 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     color: colors.textMuted,
     marginTop: 6,
-    marginBottom: 4,
+    marginBottom: 8,
+  },
+  catChipGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginBottom: 8,
+  },
+  catChipWrap: { position: 'relative' },
+  catChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: colors.background,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 10,
+    paddingLeft: 10,
+    paddingRight: 24,
+    paddingVertical: 8,
+  },
+  catChipEmoji: { fontSize: 15 },
+  catChipName: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.text,
+    maxWidth: 90,
+  },
+  catChipDelete: {
+    position: 'absolute',
+    right: 3,
+    top: 3,
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: colors.expense,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  catEmoji: { fontSize: 17 },
   emptyRecurringText: {
     fontSize: 13,
     color: colors.textMuted,