From 1db6941431e2e6335c448c42ec6e62ee89e0d55e Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sun, 17 Aug 2025 23:13:59 +0800
Subject: [PATCH] :lipstick: Optimize message styling

---
 lib/screens/chat/room.dart         | 59 +++++++++++++++++++++++-------
 lib/widgets/chat/message_item.dart | 20 ++++++++++
 2 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/lib/screens/chat/room.dart b/lib/screens/chat/room.dart
index b2b3357e..99b0dbb2 100644
--- a/lib/screens/chat/room.dart
+++ b/lib/screens/chat/room.dart
@@ -453,14 +453,23 @@ class MessagesNotifier extends _$MessagesNotifier {
       await _database.deleteMessage(localMessage.id);
       await _database.saveMessage(_database.messageToCompanion(updatedMessage));
 
-      final newMessages =
-          (state.value ?? []).map((m) {
-            if (m.id == localMessage.id) {
-              return updatedMessage;
-            }
-            return m;
-          }).toList();
-      state = AsyncValue.data(newMessages);
+      final currentMessages = state.value ?? [];
+      if (editingTo != null) {
+        final newMessages = currentMessages
+            .where((m) => m.id != localMessage.id) // remove pending message
+            .map((m) => m.id == editingTo.id ? updatedMessage : m) // update original message
+            .toList();
+        state = AsyncValue.data(newMessages);
+      } else {
+        final newMessages =
+            currentMessages.map((m) {
+              if (m.id == localMessage.id) {
+                return updatedMessage;
+              }
+              return m;
+            }).toList();
+        state = AsyncValue.data(newMessages);
+      }
       developer.log(
         'Message with nonce $nonce sent successfully',
         name: 'MessagesNotifier',
@@ -627,14 +636,37 @@ class MessagesNotifier extends _$MessagesNotifier {
       name: 'MessagesNotifier',
     );
     _pendingMessages.remove(messageId);
-    await _database.deleteMessage(messageId);
 
     final currentMessages = state.value ?? [];
-    final filteredMessages =
-        currentMessages.where((m) => m.id != messageId).toList();
+    final messageIndex = currentMessages.indexWhere((m) => m.id == messageId);
 
-    if (filteredMessages.length != currentMessages.length) {
-      state = AsyncValue.data(filteredMessages);
+    LocalChatMessage? messageToUpdate;
+    if (messageIndex != -1) {
+      messageToUpdate = currentMessages[messageIndex];
+    } else {
+      messageToUpdate = await fetchMessageById(messageId);
+    }
+
+    if (messageToUpdate == null) return;
+
+    final remote = messageToUpdate.toRemoteMessage();
+    final updatedRemote = remote.copyWith(
+      content: 'This message was deleted',
+      type: 'deleted',
+      attachments: [],
+    );
+
+    final deletedMessage = LocalChatMessage.fromRemoteMessage(
+      updatedRemote,
+      messageToUpdate.status,
+    );
+
+    await _database.saveMessage(_database.messageToCompanion(deletedMessage));
+
+    if (messageIndex != -1) {
+      final newList = [...currentMessages];
+      newList[messageIndex] = deletedMessage;
+      state = AsyncValue.data(newList);
     }
   }
 
@@ -1087,7 +1119,6 @@ class ChatRoomScreen extends HookConsumerWidget {
               skipError: true,
               data:
                   (identity) => MessageItem(
-                    key: ValueKey(message.id),
                     message: message,
                     isCurrentUser: identity?.id == message.senderId,
                     onAction: (action) {
diff --git a/lib/widgets/chat/message_item.dart b/lib/widgets/chat/message_item.dart
index ec30dd70..0bd96a90 100644
--- a/lib/widgets/chat/message_item.dart
+++ b/lib/widgets/chat/message_item.dart
@@ -546,6 +546,26 @@ class _MessageItemContent extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     switch (item.type) {
+      case 'deleted':
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Icon(
+              Symbols.delete,
+              size: 14,
+              color: Theme.of(context).colorScheme.onSurfaceVariant.withOpacity(0.6),
+            ),
+            const Gap(4),
+            Text(
+              item.content!,
+              style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant.withOpacity(0.6),
+                    fontStyle: FontStyle.italic,
+                  ),
+            ),
+          ],
+        );
       case 'call.start':
       case 'call.ended':
         return _MessageContentCall(