💄 Optimize message styling

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 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 =
-          (state.value ?? []).map((m) {
+            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 =
+    final messageIndex = currentMessages.indexWhere((m) => m.id == messageId);
-        currentMessages.where((m) => m.id != messageId).toList();
 
-    if (filteredMessages.length != currentMessages.length) {
+    LocalChatMessage? messageToUpdate;
-      state = AsyncValue.data(filteredMessages);
+    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) {

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(