Refine device info layout and add collapsible map legend (#164)

lib/screens/map_screen.dart

@@ -51,6 +51,7 @@ class _MapScreenState extends State<MapScreen> {
   bool _isSelectingPoi = false;
   bool _hasInitializedMap = false;
   bool _removedMarkersLoaded = false;
+  bool _legendExpanded = false;
 
   @override
   void initState() {
@@ -503,11 +504,23 @@ class _MapScreenState extends State<MapScreen> {
       top: 16,
       right: 16,
       child: Card(
-        child: Padding(
-          padding: const EdgeInsets.all(12.0),
         child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
+          children: [
+            InkWell(
+              borderRadius: BorderRadius.circular(12),
+              onTap: () {
+                setState(() {
+                  _legendExpanded = !_legendExpanded;
+                });
+              },
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(12, 10, 12, 10),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
                         Text(
                           context.l10n.map_nodesCount(nodeCount),
@@ -519,11 +532,30 @@ class _MapScreenState extends State<MapScreen> {
                         Text(
                           context.l10n.map_pinsCount(markerCount),
                           style: const TextStyle(
-                  fontWeight: FontWeight.bold,
+                            fontWeight: FontWeight.w600,
                             fontSize: 12,
                           ),
                         ),
-              const SizedBox(height: 8),
+                      ],
+                    ),
+                    const SizedBox(width: 8),
+                    AnimatedRotation(
+                      turns: _legendExpanded ? 0.5 : 0,
+                      duration: const Duration(milliseconds: 200),
+                      child: const Icon(Icons.expand_more, size: 20),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            AnimatedCrossFade(
+              firstChild: const SizedBox.shrink(),
+              secondChild: Padding(
+                padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const SizedBox(height: 6),
                     _buildLegendItem(
                       Icons.person,
                       context.l10n.map_chat,
@@ -544,7 +576,11 @@ class _MapScreenState extends State<MapScreen> {
                       context.l10n.map_sensor,
                       Colors.orange,
                     ),
-              _buildLegendItem(Icons.flag, context.l10n.map_pinDm, Colors.blue),
+                    _buildLegendItem(
+                      Icons.flag,
+                      context.l10n.map_pinDm,
+                      Colors.blue,
+                    ),
                     _buildLegendItem(
                       Icons.flag,
                       context.l10n.map_pinPrivate,
@@ -558,6 +594,13 @@ class _MapScreenState extends State<MapScreen> {
                   ],
                 ),
               ),
+              crossFadeState: _legendExpanded
+                  ? CrossFadeState.showSecond
+                  : CrossFadeState.showFirst,
+              duration: const Duration(milliseconds: 200),
+            ),
+          ],
+        ),
       ),
     );
   }

lib/screens/settings_screen.dart

@@ -21,6 +21,7 @@ class SettingsScreen extends StatefulWidget {
 
 class _SettingsScreenState extends State<SettingsScreen> {
   bool _showBatteryVoltage = false;
+  bool _deviceInfoExpanded = false;
   String _appVersion = '';
 
   @override
@@ -74,18 +75,52 @@ class _SettingsScreenState extends State<SettingsScreen> {
     MeshCoreConnector connector,
   ) {
     final l10n = context.l10n;
+
     return Card(
-      child: Padding(
-        padding: const EdgeInsets.all(16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-            Text(
+          InkWell(
+            borderRadius: BorderRadius.circular(12),
+            onTap: () {
+              setState(() {
+                _deviceInfoExpanded = !_deviceInfoExpanded;
+              });
+            },
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Text(
                       l10n.settings_deviceInfo,
-              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+                      style: const TextStyle(
+                        fontSize: 18,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                  AnimatedRotation(
+                    turns: _deviceInfoExpanded ? 0.5 : 0,
+                    duration: const Duration(milliseconds: 200),
+                    child: const Icon(Icons.expand_more),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          AnimatedCrossFade(
+            firstChild: const SizedBox.shrink(),
+            secondChild: Padding(
+              padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  _buildInfoRow(
+                    l10n.settings_infoName,
+                    connector.deviceDisplayName,
                   ),
-            const SizedBox(height: 16),
-            _buildInfoRow(l10n.settings_infoName, connector.deviceDisplayName),
                   _buildInfoRow(l10n.settings_infoId, connector.deviceIdLabel),
                   _buildInfoRow(
                     l10n.settings_infoStatus,
@@ -112,6 +147,13 @@ class _SettingsScreenState extends State<SettingsScreen> {
                 ],
               ),
             ),
+            crossFadeState: _deviceInfoExpanded
+                ? CrossFadeState.showSecond
+                : CrossFadeState.showFirst,
+            duration: const Duration(milliseconds: 200),
+          ),
+        ],
+      ),
     );
   }
 
@@ -355,22 +397,33 @@ class _SettingsScreenState extends State<SettingsScreen> {
     Color? valueColor,
     VoidCallback? onTap,
   }) {
+    final theme = Theme.of(context);
+
     final row = Padding(
-      padding: const EdgeInsets.symmetric(vertical: 4),
+      padding: const EdgeInsets.symmetric(vertical: 10),
-      child: Row(
+      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             children: [
               if (leading != null) ...[leading, const SizedBox(width: 8)],
-              Text(label, style: TextStyle(color: Colors.grey[600])),
+              Expanded(
+                child: Text(
+                  label,
+                  style: theme.textTheme.bodySmall?.copyWith(
+                    color: theme.colorScheme.onSurfaceVariant,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
             ],
           ),
-          Flexible(
+          const SizedBox(height: 4),
-            child: Text(
+          Text(
             value,
-              style: TextStyle(fontWeight: FontWeight.w500, color: valueColor),
+            style: theme.textTheme.bodyLarge?.copyWith(
-              overflow: TextOverflow.ellipsis,
+              color: valueColor,
+              fontWeight: FontWeight.w500,
             ),
           ),
         ],
@@ -379,11 +432,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
 
     if (onTap != null) {
       return InkWell(
+        borderRadius: BorderRadius.circular(6),
         onTap: onTap,
-        borderRadius: BorderRadius.circular(4),
         child: row,
       );
     }
+
     return row;
   }