new: animation

lib/data/res/build_data.dart

@@ -2,8 +2,8 @@
 
 class BuildData {
   static const String name = "ServerBox";
-  static const int build = 446;
+  static const int build = 450;
   static const String engine = "3.10.6";
-  static const String buildAt = "2023-08-07 18:34:12.547300";
-  static const int modifications = 4;
+  static const String buildAt = "2023-08-08 14:47:37.806229";
+  static const int modifications = 9;
 }

lib/data/res/ui.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 const textSize11 = TextStyle(fontSize: 11);
 const textSize12Grey = TextStyle(color: Colors.grey, fontSize: 11);
 const textSize13 = TextStyle(fontSize: 13);
+const textSize13Bold = TextStyle(fontSize: 13, fontWeight: FontWeight.bold);
 const textSize13Grey = TextStyle(color: Colors.grey, fontSize: 13);
 const textSize15 = TextStyle(fontSize: 15);
 const textSize18 = TextStyle(fontSize: 18);

lib/view/page/docker.dart

@@ -455,7 +455,7 @@ class _DockerManagePageState extends State<DockerManagePage> {
             AppRoute(
               SSHPage(
                 spi: widget.spi,
-                initCmd: 'docker logs ${dItem.containerId}',
+                initCmd: 'docker logs -f --tail 100 ${dItem.containerId}',
               ),
               'Docker logs',
             ).go(context);
@@ -464,7 +464,7 @@ class _DockerManagePageState extends State<DockerManagePage> {
             AppRoute(
               SSHPage(
                 spi: widget.spi,
-                initCmd: 'docker exec -it ${dItem.containerId} /bin/sh',
+                initCmd: 'docker exec -it ${dItem.containerId} sh',
               ),
               'Docker terminal',
             ).go(context);

lib/view/page/server/detail.dart

@@ -106,6 +106,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
   }
 
   Widget _buildCPUView(ServerStatus ss) {
+    final percent = ss.cpu.usedPercent(coreIdx: 0).toInt();
     return RoundRectCard(
       Padding(
         padding: roundRectCardPadding,
@@ -113,10 +114,10 @@ class _ServerDetailPageState extends State<ServerDetailPage>
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text(
-                '${ss.cpu.usedPercent(coreIdx: 0).toInt()}%',
-                style: textSize27,
-                textScaleFactor: 1.0,
+              _buildAnimatedText(
+                ValueKey(percent),
+                '$percent%',
+                textSize27,
               ),
               Row(
                 children: [
@@ -206,6 +207,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
     final free = ss.mem.free / ss.mem.total * 100;
     final avail = ss.mem.availPercent * 100;
     final used = ss.mem.usedPercent * 100;
+    final usedStr = used.toStringAsFixed(0);
 
     return RoundRectCard(
       Padding(
@@ -219,7 +221,11 @@ class _ServerDetailPageState extends State<ServerDetailPage>
               children: [
                 Row(
                   children: [
-                    Text('${used.toStringAsFixed(0)}%', style: textSize27),
+                    _buildAnimatedText(
+                      ValueKey(usedStr),
+                      '$usedStr%',
+                      textSize27,
+                    ),
                     width7,
                     Text('of ${(ss.mem.total * 1024).convertBytes}',
                         style: textSize13Grey)
@@ -437,4 +443,20 @@ class _ServerDetailPageState extends State<ServerDetailPage>
       child: Column(children: children),
     ));
   }
+
+  Widget _buildAnimatedText(Key key, String text, TextStyle style) {
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 277),
+      child: Text(
+        key: key,
+        text,
+        style: style,
+        textScaleFactor: 1.0,
+      ),
+      transitionBuilder: (child, animation) => FadeTransition(
+        opacity: animation,
+        child: child,
+      ),
+    );
+  }
 }

lib/view/page/server/tab.dart

@@ -168,10 +168,15 @@ class _ServerPageState extends State<ServerPage>
     ServerPrivateInfo spi,
   ) {
     final rootDisk = findRootDisk(ss.disk);
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
+    late final List<Widget> children;
+    var height = 23.0;
+    if (cs != ServerState.connected) {
+      children = [
+        _buildServerCardTitle(ss, cs, spi),
+      ];
+    } else {
+      height = 137;
+      children = [
         _buildServerCardTitle(ss, cs, spi),
         height13,
         Row(
@@ -195,7 +200,17 @@ class _ServerPageState extends State<ServerPage>
           ],
         ),
         const SizedBox(height: 3),
-      ],
+      ];
+    }
+
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 377),
+      curve: Curves.fastEaseInToSlowEaseOut,
+      height: height,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: children,
+      ),
     );
   }
 
@@ -213,8 +228,7 @@ class _ServerPageState extends State<ServerPage>
             children: [
               Text(
                 spi.name,
-                style:
-                    const TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
+                style: textSize13Bold,
                 textScaleFactor: 1.0,
               ),
               const Icon(