From 354a13e9a96c839cfd6d177a194b70a3e679b1de Mon Sep 17 00:00:00 2001
From: Luna <clawy@reversed.dev>
Date: Sat, 18 Apr 2026 21:32:12 +0200
Subject: [PATCH] fix(#14,#15): reduce UI clutter and rename status actions

---
 src/components/ItemCard.js | 12 +++---
 src/styles.js              | 82 +++++++++++++++++++-------------------
 src/tabs/TripsTab.js       |  2 +-
 3 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/components/ItemCard.js b/src/components/ItemCard.js
index e53f52d..9a219a7 100644
--- a/src/components/ItemCard.js
+++ b/src/components/ItemCard.js
@@ -31,11 +31,11 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
       <View style={styles.itemMain}>
         <View style={styles.cardRow}>
           <View style={styles.flex}>
-            <Text style={styles.itemTitle}>{item.name}</Text>
-            <Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</Text>
+            <Text style={styles.itemTitle} numberOfLines={1}>{item.name}</Text>
+            <Text style={styles.itemMeta} numberOfLines={1}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</Text>
             <Text style={styles.itemMeta}>Location: {item.placement}</Text>
-            {item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta}>Borrower: {item.lentTo}</Text> : null}
-            {!!item.description ? <Text style={styles.itemMeta}>{item.description}</Text> : null}
+            {item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta} numberOfLines={1}>Borrower: {item.lentTo}</Text> : null}
+            {!!item.description ? <Text style={styles.itemMeta} numberOfLines={2}>{item.description}</Text> : null}
           </View>
           <View style={styles.stackButtons}>
             <Pressable style={styles.miniBtn} onPress={() => onEdit(item)}>
@@ -49,10 +49,10 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
 
         <View style={styles.quickStatusRow}>
           <Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
-            <Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Pack</Text>
+            <Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Packed</Text>
           </Pressable>
           <Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
-            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpack</Text>
+            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpacked</Text>
           </Pressable>
         </View>
       </View>
diff --git a/src/styles.js b/src/styles.js
index cf425d4..aadf4bd 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -10,10 +10,10 @@ export const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: TAB_BAR_HEIGHT + 22,
-    gap: 14,
+    paddingHorizontal: 14,
+    paddingTop: 10,
+    paddingBottom: TAB_BAR_HEIGHT + 20,
+    gap: 10,
   },
   statusSpacer: {
     height: Platform.OS === 'android' ? 8 : 0,
@@ -86,7 +86,7 @@ export const styles = StyleSheet.create({
   },
 
   section: {
-    gap: 12,
+    gap: 10,
   },
   sectionTitle: {
     color: '#f1f5f9',
@@ -105,8 +105,8 @@ export const styles = StyleSheet.create({
     borderRadius: 16,
     borderWidth: 1,
     borderColor: '#1f2937',
-    padding: 12,
-    gap: 8,
+    padding: 10,
+    gap: 6,
   },
   cardActive: {
     borderColor: '#60a5fa',
@@ -120,12 +120,12 @@ export const styles = StyleSheet.create({
     borderRadius: 16,
     borderWidth: 1,
     borderColor: '#1e293b',
-    padding: 12,
-    gap: 10,
+    padding: 10,
+    gap: 8,
   },
   cardRow: {
     flexDirection: 'row',
-    gap: 10,
+    gap: 8,
   },
   cardTitle: {
     color: '#f8fafc',
@@ -134,8 +134,8 @@ export const styles = StyleSheet.create({
   },
   cardMeta: {
     color: '#94a3b8',
-    marginTop: 3,
-    fontSize: 13,
+    marginTop: 2,
+    fontSize: 12,
   },
   tripHistoryLabel: {
     color: '#93c5fd',
@@ -148,8 +148,8 @@ export const styles = StyleSheet.create({
     borderRadius: 18,
     borderWidth: 1,
     borderColor: '#334155',
-    padding: 12,
-    gap: 8,
+    padding: 10,
+    gap: 6,
   },
   tripHeroImage: {
     width: '100%',
@@ -160,7 +160,7 @@ export const styles = StyleSheet.create({
   tripHeroTitle: {
     color: '#f8fafc',
     fontWeight: '800',
-    fontSize: 22,
+    fontSize: 20,
   },
   tripListTitle: {
     color: '#cbd5e1',
@@ -290,19 +290,19 @@ export const styles = StyleSheet.create({
   },
 
   stackButtons: {
-    gap: 7,
+    gap: 6,
   },
   miniBtn: {
     backgroundColor: '#1e293b',
     borderRadius: 8,
-    paddingVertical: 7,
-    paddingHorizontal: 10,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
   },
   miniBtnDanger: {
     backgroundColor: '#3b1d22',
     borderRadius: 8,
-    paddingVertical: 7,
-    paddingHorizontal: 10,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
   },
   miniBtnText: {
     color: '#e2e8f0',
@@ -324,18 +324,18 @@ export const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
   itemThumbWrap: {
-    paddingTop: 10,
-    paddingLeft: 10,
+    paddingTop: 8,
+    paddingLeft: 8,
   },
   itemThumbSmall: {
-    width: 46,
-    height: 46,
+    width: 42,
+    height: 42,
     borderRadius: 8,
     backgroundColor: '#0b1220',
   },
   itemThumbPlaceholder: {
-    width: 46,
-    height: 46,
+    width: 42,
+    height: 42,
     borderRadius: 8,
     backgroundColor: '#0b1220',
     alignItems: 'center',
@@ -344,12 +344,12 @@ export const styles = StyleSheet.create({
     borderColor: '#243244',
   },
   itemThumbPlaceholderText: {
-    fontSize: 18,
+    fontSize: 16,
   },
   itemMain: {
     flex: 1,
-    padding: 10,
-    gap: 8,
+    padding: 8,
+    gap: 6,
   },
   itemTitle: {
     color: '#f8fafc',
@@ -358,17 +358,17 @@ export const styles = StyleSheet.create({
   },
   itemMeta: {
     color: '#94a3b8',
-    marginTop: 2,
-    fontSize: 13,
+    marginTop: 1,
+    fontSize: 12,
   },
   quickStatusRow: {
     flexDirection: 'row',
-    gap: 8,
-    marginTop: 2,
+    gap: 6,
+    marginTop: 1,
   },
   quickStatusBtn: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
     borderRadius: 999,
     borderWidth: 1,
     borderColor: '#334155',
@@ -381,7 +381,7 @@ export const styles = StyleSheet.create({
   quickStatusBtnText: {
     color: '#cbd5e1',
     fontWeight: '700',
-    fontSize: 12,
+    fontSize: 11,
   },
   quickStatusBtnTextActive: {
     color: '#dbeafe',
@@ -576,8 +576,8 @@ export const styles = StyleSheet.create({
   tabItem: {
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 4,
-    minWidth: 58,
+    gap: 3,
+    minWidth: 56,
   },
   tabAddBtn: {
     width: 54,
@@ -595,7 +595,7 @@ export const styles = StyleSheet.create({
   },
   tabLabel: {
     color: '#94a3b8',
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: '600',
   },
   tabLabelActive: {
@@ -673,8 +673,8 @@ export const styles = StyleSheet.create({
     borderRadius: 20,
     borderWidth: 1,
     borderColor: '#1e293b',
-    padding: 16,
-    gap: 10,
+    padding: 14,
+    gap: 8,
   },
   closeText: {
     color: '#93c5fd',
diff --git a/src/tabs/TripsTab.js b/src/tabs/TripsTab.js
index 6c196d2..479d809 100644
--- a/src/tabs/TripsTab.js
+++ b/src/tabs/TripsTab.js
@@ -136,7 +136,7 @@ export default function TripsTab({
               <View style={styles.flex}>
                 <Text style={styles.cardTitle}>{trip.name}</Text>
                 <Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
-                <Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
+                {defaultTemplateTripId === trip.id ? <Text style={styles.cardMeta}>Default template</Text> : null}
               </View>
               <View style={styles.stackButtons}>
                 <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>