chore(mobile): Improve readability of logs page (#1033)

mobile/lib/shared/providers/websocket.provider.dart

@@ -60,7 +60,7 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
       var accessToken = Hive.box(userInfoBox).get(accessTokenKey);
       var endpoint = Hive.box(userInfoBox).get(serverEndpointKey);
       try {
-        log.info("Attempting to connect to websocket");
+        debugPrint("Attempting to connect to websocket");
         // Configure socket transports must be specified
         Socket socket = io(
           endpoint.toString().replaceAll('/api', ''),
@@ -76,12 +76,12 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
         );
 
         socket.onConnect((_) {
-          log.info("Established Websocket Connection");
+          debugPrint("Established Websocket Connection");
           state = WebsocketState(isConnected: true, socket: socket);
         });
 
         socket.onDisconnect((_) {
-          log.info("Disconnect to Websocket Connection");
+          debugPrint("Disconnect to Websocket Connection");
           state = WebsocketState(isConnected: false, socket: null);
         });
 
@@ -105,7 +105,7 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
   }
 
   disconnect() {
-    log.info("Attempting to disconnect from websocket");
+    debugPrint("Attempting to disconnect from websocket");
 
     var socket = state.socket?.disconnect();
 
@@ -115,12 +115,12 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
   }
 
   stopListenToEvent(String eventName) {
-    log.info("Stop listening to event $eventName");
+    debugPrint("Stop listening to event $eventName");
     state.socket?.off(eventName);
   }
 
   listenUploadEvent() {
-    log.info("Start listening to event on_upload_success");
+    debugPrint("Start listening to event on_upload_success");
     state.socket?.on('on_upload_success', (data) {
       var jsonString = jsonDecode(data.toString());
       AssetResponseDto? newAsset = AssetResponseDto.fromJson(jsonString);

mobile/lib/shared/views/app_log_page.dart

@@ -15,44 +15,33 @@ class AppLogPage extends HookConsumerWidget {
     final immichLogger = ImmichLogger();
     final logMessages = useState(immichLogger.messages);
 
+    Widget colorStatusIndicator(Color color) {
+      return Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Container(
+            width: 10,
+            height: 10,
+            decoration: BoxDecoration(
+              color: color,
+              shape: BoxShape.circle,
+            ),
+          ),
+        ],
+      );
+    }
+
     Widget buildLeadingIcon(String level) {
       switch (level) {
         case "INFO":
-          return Container(
+          return colorStatusIndicator(Theme.of(context).primaryColor);
-            width: 10,
-            height: 10,
-            decoration: BoxDecoration(
-              color: Theme.of(context).primaryColor,
-              borderRadius: BorderRadius.circular(5),
-            ),
-          );
         case "SEVERE":
-          return Container(
+          return colorStatusIndicator(Colors.redAccent);
-            width: 10,
+
-            height: 10,
-            decoration: BoxDecoration(
-              color: Colors.redAccent,
-              borderRadius: BorderRadius.circular(5),
-            ),
-          );
         case "WARNING":
-          return Container(
+          return colorStatusIndicator(Colors.orangeAccent);
-            width: 10,
-            height: 10,
-            decoration: BoxDecoration(
-              color: Colors.orangeAccent,
-              borderRadius: BorderRadius.circular(5),
-            ),
-          );
         default:
-          return Container(
+          return colorStatusIndicator(Colors.grey);
-            width: 10,
-            height: 10,
-            decoration: BoxDecoration(
-              color: Theme.of(context).primaryColor,
-              borderRadius: BorderRadius.circular(5),
-            ),
-          );
       }
     }
 
@@ -61,9 +50,13 @@ class AppLogPage extends HookConsumerWidget {
         case "INFO":
           return Colors.transparent;
         case "SEVERE":
-          return Colors.redAccent.withOpacity(0.075);
+          return Theme.of(context).brightness == Brightness.dark
+              ? Colors.redAccent.withOpacity(0.25)
+              : Colors.redAccent.withOpacity(0.075);
         case "WARNING":
-          return Colors.orangeAccent.withOpacity(0.075);
+          return Theme.of(context).brightness == Brightness.dark
+              ? Colors.orangeAccent.withOpacity(0.25)
+              : Colors.orangeAccent.withOpacity(0.075);
         default:
           return Theme.of(context).primaryColor.withOpacity(0.1);
       }
@@ -122,7 +115,7 @@ class AppLogPage extends HookConsumerWidget {
             height: 0,
             color: Theme.of(context).brightness == Brightness.dark
                 ? Colors.white70
-                : Colors.grey[500],
+                : Colors.grey[600],
           );
         },
         itemCount: logMessages.value.length,
@@ -133,8 +126,27 @@ class AppLogPage extends HookConsumerWidget {
             dense: true,
             tileColor: getTileColor(logMessage.level),
             minLeadingWidth: 10,
-            title: Text(
+            title: Text.rich(
-              logMessage.message,
+              TextSpan(
+                children: [
+                  TextSpan(
+                    text: "#$index ",
+                    style: TextStyle(
+                      color: Theme.of(context).brightness == Brightness.dark
+                          ? Colors.white70
+                          : Colors.grey[600],
+                      fontSize: 14.0,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  TextSpan(
+                    text: logMessage.message,
+                    style: const TextStyle(
+                      fontSize: 14.0,
+                    ),
+                  ),
+                ],
+              ),
               style: const TextStyle(fontSize: 14.0, fontFamily: "Inconsolata"),
             ),
             subtitle: Text(