From ec4aba99678d23995173f32c09e8264ef02dd8f5 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 5 Mar 2026 14:11:12 +0100
Subject: [PATCH] Add toggle to expand session name in mobile app active
 sessions screen (#1812)

---
 .../settings/security/active-sessions.tsx     | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/mobile-app/app/(tabs)/settings/security/active-sessions.tsx b/apps/mobile-app/app/(tabs)/settings/security/active-sessions.tsx
index 4482e883c..429fc88ef 100644
--- a/apps/mobile-app/app/(tabs)/settings/security/active-sessions.tsx
+++ b/apps/mobile-app/app/(tabs)/settings/security/active-sessions.tsx
@@ -27,6 +27,7 @@ export default function ActiveSessionsScreen() : React.ReactNode {
   const [refreshTokens, setRefreshTokens] = useState<RefreshToken[]>([]);
   const [isLoading, setIsLoading] = useMinDurationLoading(true, 200);
   const [isRefreshing, setIsRefreshing] = useMinDurationLoading(false, 200);
+  const [expandedSessions, setExpandedSessions] = useState<Set<string>>(new Set());
 
   const styles = StyleSheet.create({
     detailText: {
@@ -158,6 +159,27 @@ export default function ActiveSessionsScreen() : React.ReactNode {
     return dateObject.toISOString().slice(0, 16).replace('T', ' ');
   };
 
+  /**
+   * Toggle the expansion state of a session.
+   * @param sessionId - The session ID to toggle
+   */
+  const toggleSessionExpansion = (sessionId: string) : void => {
+    setExpandedSessions((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(sessionId)) {
+        newSet.delete(sessionId);
+      } else {
+        newSet.add(sessionId);
+      }
+      return newSet;
+    });
+
+    // Trigger haptic feedback when toggling
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    }
+  };
+
   return (
     <ThemedContainer>
       <ThemedScrollView
@@ -184,7 +206,18 @@ export default function ActiveSessionsScreen() : React.ReactNode {
             refreshTokens.map((item) => (
               <View key={item.id} style={styles.sessionItem}>
                 <View style={styles.sessionHeader}>
-                  <ThemedText style={styles.deviceName} numberOfLines={2}>{item.deviceIdentifier}</ThemedText>
+                  <TouchableOpacity
+                    style={{ flex: 1 }}
+                    onPress={() => toggleSessionExpansion(item.id)}
+                    activeOpacity={0.7}
+                  >
+                    <ThemedText
+                      style={styles.deviceName}
+                      numberOfLines={expandedSessions.has(item.id) ? undefined : 2}
+                    >
+                      {item.deviceIdentifier}
+                    </ThemedText>
+                  </TouchableOpacity>
                   <TouchableOpacity onPress={() => handleRevokeSession(item.id)}>
                     <ThemedText style={styles.revokeButton}>{t('settings.securitySettings.activeSessions.revoke')}</ThemedText>
                   </TouchableOpacity>