♻️ Optimized the experience of cloud files

assets/i18n/en-US.json

@@ -1103,6 +1103,9 @@
     "openReleasePage": "Open release page",
     "postCompose": "Compose Post",
     "postPublish": "Publish Post",
+    "restoreDraftTitle": "Restore Draft",
+    "restoreDraftMessage": "A draft was found. Do you want to restore it?",
+    "draft": "Draft",
     "purchaseGift": "Purchase Gift",
     "selectRecipient": "Select Recipient",
     "changeRecipient": "Change Recipient",
@@ -1209,5 +1212,8 @@
     "transferCreatedSuccessfully": "Transfer created successfully!",
     "postUpdate": "Update",
     "fileMetadata": "File Metadata",
-    "resend": "Resend"
+    "resend": "Resend",
+    "fileInfoTitle": "File Information",
+    "download": "Download",
+    "info": "Info"
 }

assets/i18n/zh-CN.json

@@ -1060,7 +1060,7 @@
     "selectPool": "选择储存池",
     "choosePool": "选择一个储存池",
     "errorLoadingPools": "加载池时出错",
-    "quotaCostInfo": "此上传将消耗{} 配额点",
+    "quotaCostInfo": "此上传将消耗 {} 配额点",
     "uploadConstraints": "上传限制",
     "fileSizeExceeded": "文件大小超过了 {} 的最大限制",
     "fileTypeNotAccepted": "此储存池不接受该文件类型",
@@ -1076,5 +1076,10 @@
     "recycledFilesDeleted": "被回收文件成功删除",
     "failedToDeleteRecycledFiles": "删除被回收文件失败",
     "upload": "上传",
-    "systemWallet": "中央统筹"
+    "systemWallet": "中央统筹",
-}
+    "postCompose": "撰写帖子",
+    "postPublish": "发布帖子",
+    "restoreDraftTitle": "恢复草稿",
+    "restoreDraftMessage": "发现了一个草稿。你想要恢复它吗？",
+    "draft": "草稿"
+}

assets/i18n/zh-TW.json

@@ -1075,5 +1075,7 @@
     "deleteRecycledFiles": "刪除已回收檔案",
     "recycledFilesDeleted": "已回收檔案刪除成功",
     "failedToDeleteRecycledFiles": "已回收檔案刪除失敗",
-    "upload": "上傳"
+    "upload": "上傳",
-}
+    "postCompose": "撰寫帖子",
+    "postPublish": "發佈帖子"
+}

lib/services/file_uploader.dart

@@ -9,6 +9,7 @@ import 'package:island/models/file.dart';
 import 'package:island/pods/network.dart';
 import 'package:mime/mime.dart';
 import 'package:native_exif/native_exif.dart';
+import 'package:path/path.dart' show extension;
 
 class FileUploader {
   final Dio _client;
@@ -276,7 +277,7 @@ class FileUploader {
   }
 
   /// Gets the MIME type of a UniversalFile.
-  static String getMimeType(UniversalFile file) {
+  static String getMimeType(UniversalFile file, {bool useFallback = true}) {
     final data = file.data;
     if (data is XFile) {
       final mime = data.mimeType;
@@ -293,6 +294,11 @@ class FileUploader {
           _ => 'application/unknown',
         };
       }
+      if (useFallback) {
+        final ext = extension(data.path).substring(1);
+        if (ext.isNotEmpty) return 'application/$ext';
+        return 'application/unknown';
+      }
       throw Exception('Cannot detect mime type for file: $filename');
     } else if (data is List<int> || data is Uint8List) {
       return 'application/octet-stream';

lib/widgets/chat/chat_input.dart

@@ -368,7 +368,7 @@ class ChatInput extends HookConsumerWidget {
                               onLinkAttachment!,
                             ),
                         ],
-                        iconColor: Colors.white,
+                        iconColor: Theme.of(context).colorScheme.onSurface,
                       ),
                     ],
                   ),

lib/widgets/chat/message_indicators.dart

@@ -39,7 +39,7 @@ class MessageIndicators extends StatelessWidget {
           context,
           status!,
           textColor.withOpacity(0.7),
-        ).padding(bottom: 4),
+        ).padding(bottom: 2),
       );
     }
 
@@ -72,7 +72,7 @@ class MessageIndicators extends StatelessWidget {
             strokeWidth: 2,
             valueColor: AlwaysStoppedAnimation(textColor),
           ),
-        );
+        ).padding(bottom: 2);
       case MessageStatus.sent:
         // Sent status is hidden
         return const SizedBox.shrink();

lib/widgets/chat/message_item.dart

@@ -1,7 +1,6 @@
 import 'dart:async';
 import 'dart:io';
 
-import 'package:intl/intl.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';

lib/widgets/content/cloud_files.dart

@@ -1,7 +1,9 @@
+import 'dart:io';
 import 'dart:math' as math;
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:file_saver/file_saver.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
@@ -11,12 +13,15 @@ import 'package:island/pods/config.dart';
 import 'package:island/pods/network.dart';
 import 'package:island/services/time.dart';
 import 'package:island/utils/format.dart';
+import 'package:island/widgets/alert.dart';
 import 'package:island/widgets/content/audio.dart';
 import 'package:material_symbols_icons/symbols.dart';
+import 'package:path/path.dart' show extension;
+import 'package:path_provider/path_provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
-import 'package:url_launcher/url_launcher_string.dart';
 import 'package:island/widgets/data_saving_gate.dart';
+import 'package:island/widgets/content/file_info_sheet.dart';
 
 import 'image.dart';
 import 'video.dart';
@@ -63,61 +68,304 @@ class CloudFileWidget extends HookConsumerWidget {
     );
 
     if (item.mimeType == 'application/pdf') {
-      return Stack(
+      final pdfViewer = useMemoized(() => SfPdfViewer.network(uri), [uri]);
-        children: [
+
-          SizedBox(height: 600, child: SfPdfViewer.network(uri)),
+      Future<void> downloadFile() async {
-          Positioned(
+        try {
-            top: 8,
+          showSnackBar('Downloading file...');
-            left: 8,
+
-            child: Container(
+          final client = ref.read(apiClientProvider);
-              padding: const EdgeInsets.all(4),
+          final tempDir = await getTemporaryDirectory();
-              decoration: BoxDecoration(
+          var extName = extension(item.name).trim();
-                color: Colors.black54,
+          if (extName.isEmpty) {
-                borderRadius: BorderRadius.circular(8),
+            extName = item.mimeType?.split('/').lastOrNull ?? 'pdf';
-              ),
+          }
-              child: Row(
+          final filePath = '${tempDir.path}/${item.id}.$extName';
-                mainAxisSize: MainAxisSize.min,
+
-                children: [
+          await client.download(
-                  Icon(Symbols.picture_as_pdf, size: 16, color: Colors.white),
+            '/drive/files/${item.id}',
-                  const SizedBox(width: 4),
+            filePath,
-                  const Text(
+            queryParameters: {'original': true},
-                    'PDF',
+          );
-                    style: TextStyle(color: Colors.white, fontSize: 12),
+
-                  ),
+          await FileSaver.instance.saveFile(
-                ],
+            name: item.name.isEmpty ? '${item.id}.$extName' : item.name,
+            file: File(filePath),
+          );
+          showSnackBar('File saved to downloads');
+        } catch (e) {
+          showErrorAlert(e);
+        }
+      }
+
+      return Container(
+        height: 400,
+        decoration: BoxDecoration(
+          border: Border.all(
+            color: Theme.of(context).colorScheme.outline,
+            width: 1,
+          ),
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: Stack(
+          children: [
+            pdfViewer,
+            Positioned(
+              top: 8,
+              left: 8,
+              child: Container(
+                padding: const EdgeInsets.all(4),
+                decoration: BoxDecoration(
+                  color: Colors.black54,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  spacing: 7,
+                  children: [
+                    Icon(
+                      Symbols.picture_as_pdf,
+                      size: 16,
+                      color: Colors.white,
+                    ).padding(top: 2),
+                    Column(
+                      mainAxisSize: MainAxisSize.min,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          item.name,
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 12,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                        Text(
+                          formatFileSize(item.size),
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 9,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ],
+                ).padding(vertical: 4, horizontal: 8),
               ),
             ),
-          ),
+            Positioned(
-        ],
+              top: 8,
+              right: 8,
+              child: Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: Colors.black54,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  spacing: 4,
+                  children: [
+                    IconButton(
+                      icon: const Icon(
+                        Symbols.download,
+                        color: Colors.white,
+                        size: 16,
+                      ),
+                      onPressed: downloadFile,
+                      padding: EdgeInsets.all(4),
+                      constraints: const BoxConstraints(),
+                    ),
+                    IconButton(
+                      icon: const Icon(
+                        Symbols.info,
+                        color: Colors.white,
+                        size: 16,
+                      ),
+                      onPressed: () {
+                        showModalBottomSheet(
+                          useRootNavigator: true,
+                          context: context,
+                          isScrollControlled: true,
+                          builder: (context) => FileInfoSheet(item: item),
+                        );
+                      },
+                      padding: EdgeInsets.all(4),
+                      constraints: const BoxConstraints(),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
       );
     }
 
     if (item.mimeType?.startsWith('text/') == true) {
-      return SizedBox(
+      final textFuture = useMemoized(
+        () => ref
+            .read(apiClientProvider)
+            .get(uri)
+            .then((response) => response.data as String),
+        [uri],
+      );
+
+      Future<void> downloadFile() async {
+        try {
+          showSnackBar('Downloading file...');
+
+          final client = ref.read(apiClientProvider);
+          final tempDir = await getTemporaryDirectory();
+          var extName = extension(item.name).trim();
+          if (extName.isEmpty) {
+            extName = item.mimeType?.split('/').lastOrNull ?? 'txt';
+          }
+          final filePath = '${tempDir.path}/${item.id}.$extName';
+
+          await client.download(
+            '/drive/files/${item.id}',
+            filePath,
+            queryParameters: {'original': true},
+          );
+
+          await FileSaver.instance.saveFile(
+            name: item.name.isEmpty ? '${item.id}.$extName' : item.name,
+            file: File(filePath),
+          );
+          showSnackBar('File saved to downloads');
+        } catch (e) {
+          showErrorAlert(e);
+        }
+      }
+
+      return Container(
         height: 400,
-        child: FutureBuilder<String>(
+        decoration: BoxDecoration(
-          future: ref
+          border: Border.all(
-              .read(apiClientProvider)
+            color: Theme.of(context).colorScheme.outline,
-              .get(uri)
+            width: 1,
-              .then((response) => response.data as String),
+          ),
-          builder: (context, snapshot) {
+          borderRadius: BorderRadius.circular(8),
-            if (snapshot.connectionState == ConnectionState.waiting) {
+        ),
-              return const Center(child: CircularProgressIndicator());
+        child: Stack(
-            } else if (snapshot.hasError) {
+          children: [
-              return Center(
+            FutureBuilder<String>(
-                child: Text('Error loading text: ${snapshot.error}'),
+              future: textFuture,
-              );
+              builder: (context, snapshot) {
-            } else if (snapshot.hasData) {
+                if (snapshot.connectionState == ConnectionState.waiting) {
-              return SingleChildScrollView(
+                  return const Center(child: CircularProgressIndicator());
-                padding: const EdgeInsets.all(16),
+                } else if (snapshot.hasError) {
-                child: SelectableText(
+                  return Center(
-                  snapshot.data!,
+                    child: Text('Error loading text: ${snapshot.error}'),
-                  style: const TextStyle(fontFamily: 'monospace', fontSize: 14),
+                  );
+                } else if (snapshot.hasData) {
+                  return SingleChildScrollView(
+                    padding: const EdgeInsets.fromLTRB(20, 20 + 48, 20, 20),
+                    child: SelectableText(
+                      snapshot.data!,
+                      style: const TextStyle(
+                        fontFamily: 'monospace',
+                        fontSize: 14,
+                      ),
+                    ),
+                  );
+                }
+                return const Center(child: Text('No content'));
+              },
+            ),
+            Positioned(
+              top: 8,
+              left: 8,
+              child: Container(
+                padding: const EdgeInsets.all(4),
+                decoration: BoxDecoration(
+                  color: Colors.black54,
+                  borderRadius: BorderRadius.circular(8),
                 ),
-              );
+                child: Row(
-            }
+                  mainAxisSize: MainAxisSize.min,
-            return const Center(child: Text('No content'));
+                  crossAxisAlignment: CrossAxisAlignment.start,
-          },
+                  spacing: 7,
+                  children: [
+                    Icon(
+                      Symbols.file_present,
+                      size: 16,
+                      color: Colors.white,
+                    ).padding(top: 2),
+                    Column(
+                      mainAxisSize: MainAxisSize.min,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          item.name,
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 12,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                        Text(
+                          formatFileSize(item.size),
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 9,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ],
+                ).padding(vertical: 4, horizontal: 8),
+              ),
+            ),
+            Positioned(
+              top: 8,
+              right: 8,
+              child: Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: Colors.black54,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  spacing: 4,
+                  children: [
+                    IconButton(
+                      icon: const Icon(
+                        Symbols.download,
+                        color: Colors.white,
+                        size: 16,
+                      ),
+                      onPressed: downloadFile,
+                      padding: EdgeInsets.all(4),
+                      constraints: const BoxConstraints(),
+                    ),
+                    IconButton(
+                      icon: const Icon(
+                        Symbols.info,
+                        color: Colors.white,
+                        size: 16,
+                      ),
+                      onPressed: () {
+                        showModalBottomSheet(
+                          useRootNavigator: true,
+                          context: context,
+                          isScrollControlled: true,
+                          builder: (context) => FileInfoSheet(item: item),
+                        );
+                      },
+                      padding: EdgeInsets.all(4),
+                      constraints: const BoxConstraints(),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
         ),
       );
     }
@@ -145,45 +393,99 @@ class CloudFileWidget extends HookConsumerWidget {
           child: UniversalAudio(uri: uri, filename: item.name),
         ),
       ),
-      _ => Column(
+      _ => Builder(
-        mainAxisSize: MainAxisSize.min,
+        builder: (context) {
-        mainAxisAlignment: MainAxisAlignment.center,
+          Future<void> downloadFile() async {
-        children: [
+            try {
-          Icon(
+              showSnackBar('Downloading file...');
-            Symbols.insert_drive_file,
+
-            size: 48,
+              final client = ref.read(apiClientProvider);
-            color: Theme.of(context).colorScheme.onSurfaceVariant,
+              final tempDir = await getTemporaryDirectory();
-          ),
+              var extName = extension(item.name).trim();
-          const Gap(8),
+              if (extName.isEmpty) {
-          Text(
+                extName = item.mimeType?.split('/').lastOrNull ?? 'bin';
-            item.name,
+              }
-            maxLines: 1,
+              final filePath = '${tempDir.path}/${item.id}.$extName';
-            overflow: TextOverflow.ellipsis,
+
-            style: TextStyle(
+              await client.download(
-              fontSize: 14,
+                '/drive/files/${item.id}',
-              color: Theme.of(context).colorScheme.onSurfaceVariant,
+                filePath,
-            ),
+                queryParameters: {'original': true},
-          ),
-          Text(
-            formatFileSize(item.size),
-            style: TextStyle(
-              fontSize: 12,
-              color: Theme.of(context).colorScheme.onSurfaceVariant,
-            ),
-          ),
-          const Gap(8),
-          TextButton.icon(
-            onPressed: () {
-              launchUrlString(
-                'https://solian.app/files/${item.id}',
-                mode: LaunchMode.externalApplication,
               );
-            },
+
-            icon: const Icon(Symbols.launch),
+              await FileSaver.instance.saveFile(
-            label: Text('openInBrowser').tr(),
+                name: item.name.isEmpty ? '${item.id}.$extName' : item.name,
-          ),
+                file: File(filePath),
-        ],
+              );
-      ).padding(all: 8),
+              showSnackBar('File saved to downloads');
+            } catch (e) {
+              showErrorAlert(e);
+            }
+          }
+
+          return Container(
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: Theme.of(context).colorScheme.outline,
+                width: 1,
+              ),
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(
+                  Symbols.insert_drive_file,
+                  size: 48,
+                  color: Theme.of(context).colorScheme.onSurfaceVariant,
+                ),
+                const Gap(8),
+                Text(
+                  item.name,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                Text(
+                  formatFileSize(item.size),
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                const Gap(8),
+                Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    TextButton.icon(
+                      onPressed: downloadFile,
+                      icon: const Icon(Symbols.download),
+                      label: Text('download').tr(),
+                    ),
+                    const Gap(8),
+                    TextButton.icon(
+                      onPressed: () {
+                        showModalBottomSheet(
+                          useRootNavigator: true,
+                          context: context,
+                          isScrollControlled: true,
+                          builder: (context) => FileInfoSheet(item: item),
+                        );
+                      },
+                      icon: const Icon(Symbols.info),
+                      label: Text('info').tr(),
+                    ),
+                  ],
+                ),
+              ],
+            ).padding(all: 8),
+          );
+        },
+      ),
     };
 
     if (heroTag != null) {

lib/widgets/content/file_info_sheet.dart

@@ -9,6 +9,7 @@ import 'package:island/widgets/alert.dart';
 import 'package:island/widgets/content/sheet.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:styled_widget/styled_widget.dart';
+import 'package:url_launcher/url_launcher_string.dart';
 
 class FileInfoSheet extends StatelessWidget {
   final SnCloudFile item;
@@ -140,6 +141,18 @@ class FileInfoSheet extends StatelessWidget {
                   },
                 ),
               ),
+            ListTile(
+              leading: const Icon(Symbols.launch),
+              title: Text('openInBrowser').tr(),
+              subtitle: Text('https://solian.app/files/${item.id}'),
+              contentPadding: EdgeInsets.symmetric(horizontal: 24),
+              onTap: () {
+                launchUrlString(
+                  'https://solian.app/files/${item.id}',
+                  mode: LaunchMode.externalApplication,
+                );
+              },
+            ),
             if (exifData.isNotEmpty) ...[
               const Divider(height: 1),
               Theme(

lib/widgets/post/compose_dialog.dart

@@ -1,3 +1,4 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -86,14 +87,15 @@ class PostComposeDialog extends HookConsumerWidget {
 
       final restore = await showDialog<bool>(
         context: ref.context,
+        useRootNavigator: true,
         builder:
             (context) => AlertDialog(
-              title: const Text('Restore Draft'),
+              title: Text('restoreDraftTitle'.tr()),
               content: Column(
                 mainAxisSize: MainAxisSize.min,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  const Text('A draft was found. Do you want to restore it?'),
+                  Text('restoreDraftMessage'.tr()),
                   const SizedBox(height: 16),
                   _buildCompactDraftPreview(context, latestDraft),
                 ],
@@ -101,11 +103,11 @@ class PostComposeDialog extends HookConsumerWidget {
               actions: [
                 TextButton(
                   onPressed: () => Navigator.of(context).pop(false),
-                  child: const Text('No'),
+                  child: Text('no'.tr()),
                 ),
                 TextButton(
                   onPressed: () => Navigator.of(context).pop(true),
-                  child: const Text('Yes'),
+                  child: Text('yes'.tr()),
                 ),
               ],
             ),
@@ -151,7 +153,7 @@ class PostComposeDialog extends HookConsumerWidget {
               ),
               const SizedBox(width: 8),
               Text(
-                'Draft',
+                'draft'.tr(),
                 style: Theme.of(context).textTheme.labelMedium?.copyWith(
                   color: Theme.of(context).colorScheme.primary,
                 ),