🐛 Fix compability issue on web platform

lib/widgets/alert.dart

@@ -1,61 +1,13 @@
-import 'dart:developer';
-
-import 'package:dio/dio.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_platform_alert/flutter_platform_alert.dart';
 import 'package:gap/gap.dart';
 import 'package:styled_widget/styled_widget.dart';
 
-// TODO support web here
+export 'content/alert.native.dart'
+    if (dart.library.html) 'content/alert.web.dart';
 
-String _parseRemoteError(DioException err) {
-  log('${err.requestOptions.method} ${err.requestOptions.uri} ${err.message}');
-  if (err.response?.data is String) return err.response?.data;
-  if (err.response?.data?['errors'] != null) {
-    final errors = err.response?.data['errors'] as Map<String, dynamic>;
-    return errors.values
-        .map(
-          (ele) =>
-              (ele as List<dynamic>).map((ele) => ele.toString()).join('\n'),
-        )
-        .join('\n');
-  }
-  return err.message ?? err.toString();
-}
-
-void showErrorAlert(dynamic err) async {
-  final text = switch (err) {
-    String _ => err,
-    DioException _ => _parseRemoteError(err),
-    Exception _ => err.toString(),
-    _ => err.toString(),
-  };
-  FlutterPlatformAlert.showAlert(
-    windowTitle: 'somethingWentWrong'.tr(),
-    text: text,
-    alertStyle: AlertButtonStyle.ok,
-    iconStyle: IconStyle.error,
-  );
-}
-
-void showInfoAlert(String message, String title) async {
-  FlutterPlatformAlert.showAlert(
-    windowTitle: title,
-    text: message,
-    alertStyle: AlertButtonStyle.ok,
-    iconStyle: IconStyle.information,
-  );
-}
-
-Future<bool> showConfirmAlert(String message, String title) async {
-  final result = await FlutterPlatformAlert.showAlert(
-    windowTitle: title,
-    text: message,
-    alertStyle: AlertButtonStyle.okCancel,
-    iconStyle: IconStyle.question,
-  );
-  return result == AlertButton.okButton;
+void showSnackBar(BuildContext context, String message) {
+  showSnackBar(context, message);
 }
 
 OverlayEntry? _loadingOverlay;

lib/widgets/app_scaffold.dart

@@ -259,9 +259,13 @@ class _WebSocketIndicator extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final isDesktop =
+        !kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux);
+
     final user = ref.watch(userInfoProvider);
     final websocketState = ref.watch(websocketStateProvider);
-    final indicatorHeight = MediaQuery.of(context).padding.top + 60;
+    final indicatorHeight =
+        MediaQuery.of(context).padding.top + (isDesktop ? 27.5 : 60);
 
     Color indicatorColor;
     String indicatorText;
@@ -287,18 +291,23 @@ class _WebSocketIndicator extends HookConsumerWidget {
       left: 0,
       right: 0,
       height: indicatorHeight,
-      child: Material(
-        elevation: 4,
-        child: AnimatedContainer(
-          duration: Duration(milliseconds: 300),
-          color: indicatorColor,
-          child: Center(
-            child:
-                Text(
-                  indicatorText,
-                  style: TextStyle(color: Colors.white, fontSize: 16),
-                ).tr(),
-          ).padding(top: MediaQuery.of(context).padding.top),
+      child: IgnorePointer(
+        child: Material(
+          elevation:
+              !user.hasValue || websocketState == WebSocketState.connected()
+                  ? 0
+                  : 4,
+          child: AnimatedContainer(
+            duration: Duration(milliseconds: 300),
+            color: indicatorColor,
+            child: Center(
+              child:
+                  Text(
+                    indicatorText,
+                    style: TextStyle(color: Colors.white, fontSize: 16),
+                  ).tr(),
+            ).padding(top: MediaQuery.of(context).padding.top),
+          ),
         ),
       ),
     );

lib/widgets/content/alert.native.dart

@@ -0,0 +1,54 @@
+import 'dart:developer';
+
+import 'package:dio/dio.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_platform_alert/flutter_platform_alert.dart';
+
+String _parseRemoteError(DioException err) {
+  log('${err.requestOptions.method} ${err.requestOptions.uri} ${err.message}');
+  if (err.response?.data is String) return err.response?.data;
+  if (err.response?.data?['errors'] != null) {
+    final errors = err.response?.data['errors'] as Map<String, dynamic>;
+    return errors.values
+        .map(
+          (ele) =>
+              (ele as List<dynamic>).map((ele) => ele.toString()).join('\n'),
+        )
+        .join('\n');
+  }
+  return err.message ?? err.toString();
+}
+
+void showErrorAlert(dynamic err) async {
+  final text = switch (err) {
+    String _ => err,
+    DioException _ => _parseRemoteError(err),
+    Exception _ => err.toString(),
+    _ => err.toString(),
+  };
+  FlutterPlatformAlert.showAlert(
+    windowTitle: 'somethingWentWrong'.tr(),
+    text: text,
+    alertStyle: AlertButtonStyle.ok,
+    iconStyle: IconStyle.error,
+  );
+}
+
+void showInfoAlert(String message, String title) async {
+  FlutterPlatformAlert.showAlert(
+    windowTitle: title,
+    text: message,
+    alertStyle: AlertButtonStyle.ok,
+    iconStyle: IconStyle.information,
+  );
+}
+
+Future<bool> showConfirmAlert(String message, String title) async {
+  final result = await FlutterPlatformAlert.showAlert(
+    windowTitle: title,
+    text: message,
+    alertStyle: AlertButtonStyle.okCancel,
+    iconStyle: IconStyle.question,
+  );
+  return result == AlertButton.okButton;
+}

lib/widgets/content/alert.web.dart

@@ -0,0 +1,46 @@
+// ignore_for_file: avoid_web_libraries_in_flutter
+
+import 'dart:developer';
+import 'dart:js' as js;
+
+import 'package:dio/dio.dart';
+import 'package:easy_localization/easy_localization.dart';
+
+String _parseRemoteError(DioException err) {
+  log('${err.requestOptions.method} ${err.requestOptions.uri} ${err.message}');
+  if (err.response?.data is String) return err.response?.data;
+  if (err.response?.data?['errors'] != null) {
+    final errors = err.response?.data['errors'] as Map<String, dynamic>;
+    return errors.values
+        .map(
+          (ele) =>
+              (ele as List<dynamic>).map((ele) => ele.toString()).join('\n'),
+        )
+        .join('\n');
+  }
+  return err.message ?? err.toString();
+}
+
+void showErrorAlert(dynamic err) async {
+  final text = switch (err) {
+    String _ => err,
+    DioException _ => _parseRemoteError(err),
+    Exception _ => err.toString(),
+    _ => err.toString(),
+  };
+  js.context.callMethod('swal', ['somethingWentWrong'.tr(), text, 'error']);
+}
+
+void showInfoAlert(String message, String title) async {
+  js.context.callMethod('swal', [title, message, 'info']);
+}
+
+Future<bool> showConfirmAlert(String message, String title) async {
+  final result = await js.context.callMethod('swal', [
+    title,
+    message,
+    'question',
+    {'buttons': true},
+  ]);
+  return result == true;
+}

lib/widgets/content/image.web.dart

@@ -7,6 +7,8 @@ class UniversalImage extends StatelessWidget {
   final BoxFit fit;
   final double? width;
   final double? height;
+  // No cache optimization for web
+  final bool noCacheOptimization;
 
   const UniversalImage({
     super.key,
@@ -15,6 +17,7 @@ class UniversalImage extends StatelessWidget {
     this.fit = BoxFit.cover,
     this.width,
     this.height,
+    this.noCacheOptimization = false,
   });
 
   @override