Kantongku: kategori di Pengaturan jadi grid chip ringkas

src/screens/SettingsScreen.tsx

@@ -368,15 +368,13 @@ export function SettingsScreen() {
             <Text style={styles.catGroupLabel}>
               {t === 'income' ? '💚 Pemasukan' : '❤️ Pengeluaran'}
             </Text>
+            <View style={styles.catChipGrid}>
               {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>
+                  <View key={c.id} style={styles.catChipWrap}>
                     <Pressable
-                    style={styles.dataInfo}
+                      style={styles.catChip}
                       onPress={() =>
                         navigation.navigate('CategoryForm', {
                           categoryId: c.id,
@@ -385,14 +383,22 @@ export function SettingsScreen() {
                         })
                       }
                     >
-                    <Text style={styles.dataTitle}>{c.name}</Text>
+                      <Text style={styles.catChipEmoji}>{c.icon}</Text>
+                      <Text style={styles.catChipName} numberOfLines={1}>
+                        {c.name}
+                      </Text>
                     </Pressable>
-                  <Pressable onPress={() => handleDeleteCategory(c)} hitSlop={8}>
-                    <Ionicons name="trash-outline" size={18} color={colors.expense} />
+                    <Pressable
+                      style={styles.catChipDelete}
+                      onPress={() => handleDeleteCategory(c)}
+                      hitSlop={6}
+                    >
+                      <Ionicons name="close" size={12} color={colors.white} />
                     </Pressable>
                   </View>
                 ))}
             </View>
+          </View>
         ))}
         <View style={styles.divider} />
         <Pressable
@@ -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,