💄 Optimize message action area

assets/i18n/en-US.json

@@ -48,6 +48,8 @@
     "deletePublisherHint": "Are you sure to delete this publisher? This will also deleted all the post and collections under this publisher.",
     "deletePost": "Delete Post",
     "deletePostHint": "Are you sure to delete this post?",
+    "deleteMessage": "Delete Message",
+    "deleteMessageConfirmation": "Are you sure you want to delete this message?",
     "copyLink": "Copy Link",
     "postCreateAccountTitle": "Thanks for joining!",
     "postCreateAccountNext": "What's next?",

lib/widgets/chat/message_item.dart

@@ -26,6 +26,7 @@ import 'package:island/widgets/post/post_shared.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:island/widgets/content/sheet.dart';
+import 'package:island/widgets/alert.dart';
 
 class MessageItemAction {
   static const String edit = "edit";
@@ -160,53 +161,85 @@ class MessageItem extends HookConsumerWidget {
             ? Theme.of(context).colorScheme.primaryContainer.withOpacity(0.8)
             : Colors.transparent;
 
-    return InkWell(
+    final isHovered = useState(false);
-      mouseCursor: MouseCursor.defer,
+
-      focusColor: Colors.transparent,
+    return Stack(
-      onLongPress: showActionMenu,
+      clipBehavior: Clip.none,
-      onSecondaryTap: showActionMenu,
+      children: [
-      onTap: () {
+        InkWell(
-        // Jump to related message
+          mouseCursor: MouseCursor.defer,
-        if (['messages.update', 'messages.delete'].contains(message.type) &&
+          focusColor: Colors.transparent,
-            message.meta['message_id'] is String &&
+          onLongPress: showActionMenu,
-            message.meta['message_id'] != null) {
+          onSecondaryTap: showActionMenu,
-          onJump(message.meta['message_id']);
+          onTap: () {
-        }
+            // Jump to related message
-      },
+            if (['messages.update', 'messages.delete'].contains(message.type) &&
-      child: AnimatedContainer(
+                message.meta['message_id'] is String &&
-        curve: Curves.easeInOut,
+                message.meta['message_id'] != null) {
-        duration: const Duration(milliseconds: kFlashDuration),
+              onJump(message.meta['message_id']);
-        decoration: BoxDecoration(color: flashColor),
+            }
-        child: switch (settings.messageDisplayStyle) {
+          },
-          'compact' => MessageItemDisplayIRC(
+          child: Container(
-            message: message,
+            width: double.infinity,
-            isCurrentUser: isCurrentUser,
+            child: MouseRegion(
-            progress: progress,
+              onEnter: (_) => isHovered.value = true,
-            showAvatar: showAvatar,
+              onExit: (_) => isHovered.value = false,
-            onJump: onJump,
+              child: AnimatedContainer(
-            translatedText: translatedText.value,
+                curve: Curves.easeInOut,
-            translating: translating.value,
+                duration: const Duration(milliseconds: kFlashDuration),
+                decoration: BoxDecoration(color: flashColor),
+                child: switch (settings.messageDisplayStyle) {
+                  'compact' => MessageItemDisplayIRC(
+                    message: message,
+                    isCurrentUser: isCurrentUser,
+                    progress: progress,
+                    showAvatar: showAvatar,
+                    onJump: onJump,
+                    translatedText: translatedText.value,
+                    translating: translating.value,
+                  ),
+                  'column' => MessageItemDisplayDiscord(
+                    message: message,
+                    isCurrentUser: isCurrentUser,
+                    progress: progress,
+                    showAvatar: showAvatar,
+                    onJump: onJump,
+                    translatedText: translatedText.value,
+                    translating: translating.value,
+                  ),
+                  _ => MessageItemDisplayBubble(
+                    message: message,
+                    isCurrentUser: isCurrentUser,
+                    progress: progress,
+                    showAvatar: showAvatar,
+                    onJump: onJump,
+                    translatedText: translatedText.value,
+                    translating: translating.value,
+                  ),
+                },
+              ),
+            ),
           ),
-          'column' => MessageItemDisplayDiscord(
+        ),
-            message: message,
+        if (isHovered.value && !isMobile)
-            isCurrentUser: isCurrentUser,
+          Positioned(
-            progress: progress,
+            top: -15,
-            showAvatar: showAvatar,
+            right: 15,
-            onJump: onJump,
+            child: MouseRegion(
-            translatedText: translatedText.value,
+              onEnter: (_) => isHovered.value = true,
-            translating: translating.value,
+              onExit: (_) => isHovered.value = false,
+              child: MessageHoverActionMenu(
+                isCurrentUser: isCurrentUser,
+                onAction: onAction,
+                translatableLanguage: translatableLanguage,
+                translating: translating.value,
+                translatedText: translatedText.value,
+                translate: translate,
+                remoteMessage: remoteMessage,
+              ),
+            ),
           ),
-          _ => MessageItemDisplayBubble(
+      ],
-            message: message,
-            isCurrentUser: isCurrentUser,
-            progress: progress,
-            showAvatar: showAvatar,
-            onJump: onJump,
-            translatedText: translatedText.value,
-            translating: translating.value,
-          ),
-        },
-      ),
     );
   }
 }
@@ -317,6 +350,120 @@ class MessageActionSheet extends StatelessWidget {
   }
 }
 
+class MessageHoverActionMenu extends StatelessWidget {
+  final bool isCurrentUser;
+  final Function(String action)? onAction;
+  final bool translatableLanguage;
+  final bool translating;
+  final String? translatedText;
+  final VoidCallback translate;
+  final dynamic remoteMessage;
+
+  const MessageHoverActionMenu({
+    super.key,
+    required this.isCurrentUser,
+    required this.onAction,
+    required this.translatableLanguage,
+    required this.translating,
+    required this.translatedText,
+    required this.translate,
+    required this.remoteMessage,
+  });
+
+  Future<void> _handleDelete(BuildContext context) async {
+    final confirmed = await showConfirmAlert(
+      'deleteMessageConfirmation'.tr(),
+      'deleteMessage'.tr(),
+    );
+
+    if (confirmed) {
+      onAction?.call(MessageItemAction.delete);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // General actions (available for all users)
+    final generalActions = [
+      if (!isCurrentUser) // Hide reply for message author
+        IconButton(
+          icon: Icon(Symbols.reply, size: 16),
+          onPressed: () => onAction?.call(MessageItemAction.reply),
+          tooltip: 'reply'.tr(),
+          padding: const EdgeInsets.all(8),
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+      IconButton(
+        icon: Icon(Symbols.forward, size: 16),
+        onPressed: () => onAction?.call(MessageItemAction.forward),
+        tooltip: 'forward'.tr(),
+        padding: const EdgeInsets.all(8),
+        constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+      ),
+      if (translatableLanguage)
+        IconButton(
+          icon: Icon(Symbols.translate, size: 16),
+          onPressed: translate,
+          tooltip:
+              translatedText == null ? 'translate'.tr() : 'translated'.tr(),
+          padding: const EdgeInsets.all(8),
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+    ];
+
+    // Author-only actions (edit/delete)
+    final authorActions = [
+      if (isCurrentUser)
+        IconButton(
+          icon: Icon(Symbols.edit, size: 16),
+          onPressed: () => onAction?.call(MessageItemAction.edit),
+          tooltip: 'edit'.tr(),
+          padding: const EdgeInsets.all(8),
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+      if (isCurrentUser)
+        IconButton(
+          icon: Icon(Symbols.delete, size: 16, color: Colors.red),
+          onPressed: () => _handleDelete(context),
+          tooltip: 'delete'.tr(),
+          padding: const EdgeInsets.all(8),
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+    ];
+
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.1),
+            blurRadius: 4,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // General actions (left side)
+          ...generalActions,
+          // Separator (only if both general and author actions exist)
+          if (generalActions.isNotEmpty && authorActions.isNotEmpty)
+            Container(
+              width: 1,
+              height: 24,
+              color: Theme.of(context).colorScheme.outlineVariant,
+              margin: const EdgeInsets.symmetric(horizontal: 4),
+            ),
+          // Author actions (right side)
+          ...authorActions,
+        ],
+      ),
+    );
+  }
+}
+
 class MessageItemDisplayBubble extends HookConsumerWidget {
   final LocalChatMessage message;
   final bool isCurrentUser;