refactor: simplify comment and note handling by removing unused dependencies and consolidating logic

lib/model/directory/add_comment_bottom_sheet.dart

@@ -1,10 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:flutter_quill/flutter_quill.dart' as quill;
 import 'package:marco/controller/directory/add_comment_controller.dart';
-import 'package:marco/helpers/widgets/my_spacing.dart';
+import 'package:marco/helpers/utils/base_bottom_sheet.dart';
-import 'package:marco/helpers/widgets/my_text.dart';
-import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart';
 
 class AddCommentBottomSheet extends StatefulWidget {
   final String contactId;
@@ -17,120 +14,59 @@ class AddCommentBottomSheet extends StatefulWidget {
 
 class _AddCommentBottomSheetState extends State<AddCommentBottomSheet> {
   late final AddCommentController controller;
-  late final quill.QuillController quillController;
+  final TextEditingController textController = TextEditingController();
+  bool isSubmitting = false;
 
   @override
   void initState() {
     super.initState();
     controller = Get.put(AddCommentController(contactId: widget.contactId));
-    quillController = quill.QuillController.basic();
   }
 
   @override
   void dispose() {
-    quillController.dispose();
+    textController.dispose();
-    Get.delete<AddCommentController>();
     super.dispose();
   }
 
+  Future<void> handleSubmit() async {
+    final noteText = textController.text.trim();
+    if (noteText.isEmpty) return;
+
+    setState(() {
+      isSubmitting = true;
+    });
+
+    controller.updateNote(noteText);
+    await controller.submitComment();
+
+    if (mounted) {
+      setState(() {
+        isSubmitting = false;
+      });
+      Get.back(result: true);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
+    return BaseBottomSheet(
-      padding: MediaQuery.of(context).viewInsets,
+      title: "Add Note",
-      child: Container(
+      onCancel: () => Get.back(),
-        decoration: BoxDecoration(
+      onSubmit: handleSubmit,
-          color: Theme.of(context).cardColor,
+      isSubmitting: isSubmitting,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
+      child: TextField(
-          boxShadow: const [
+        controller: textController,
-            BoxShadow(
+        maxLines: null,
-              color: Colors.black12,
+        minLines: 5,
-              blurRadius: 12,
+        decoration: InputDecoration(
-              offset: Offset(0, -2),
+          hintText: "Enter your note here...",
-            ),
+          border: OutlineInputBorder(
-          ],
+            borderRadius: BorderRadius.circular(12),
-        ),
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(20, 16, 20, 32),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Center(
-                child: Container(
-                  width: 40,
-                  height: 5,
-                  decoration: BoxDecoration(
-                    color: Colors.grey.shade300,
-                    borderRadius: BorderRadius.circular(10),
-                  ),
-                ),
-              ),
-              MySpacing.height(12),
-              Center(child: MyText.titleMedium("Add Note", fontWeight: 700)),
-              MySpacing.height(24),
-              CommentEditorCard(
-                controller: quillController,
-                onCancel: () => Get.back(),
-                onSave: (editorController) async {
-                  final delta = editorController.document.toDelta();
-                  final htmlOutput = _convertDeltaToHtml(delta);
-                  controller.updateNote(htmlOutput);
-                  await controller.submitComment();
-                },
-              ),
-            ],
           ),
+          contentPadding: const EdgeInsets.all(12),
         ),
       ),
     );
   }
-
-  String _convertDeltaToHtml(dynamic delta) {
-    final buffer = StringBuffer();
-    bool inList = false;
-
-    for (var op in delta.toList()) {
-      final data = op.data?.toString() ?? '';
-      final attr = op.attributes ?? {};
-
-      final isListItem = attr.containsKey('list');
-      final trimmedData = data.trim();
-
-      if (isListItem && !inList) {
-        buffer.write('<ul>');
-        inList = true;
-      }
-
-      if (!isListItem && inList) {
-        buffer.write('</ul>');
-        inList = false;
-      }
-
-      if (isListItem && trimmedData.isEmpty) continue;
-
-      if (isListItem) buffer.write('<li>');
-
-      if (attr.containsKey('bold')) buffer.write('<strong>');
-      if (attr.containsKey('italic')) buffer.write('<em>');
-      if (attr.containsKey('underline')) buffer.write('<u>');
-      if (attr.containsKey('strike')) buffer.write('<s>');
-      if (attr.containsKey('link')) buffer.write('<a href="${attr['link']}">');
-
-      buffer.write(trimmedData.replaceAll('\n', ''));
-
-      if (attr.containsKey('link')) buffer.write('</a>');
-      if (attr.containsKey('strike')) buffer.write('</s>');
-      if (attr.containsKey('underline')) buffer.write('</u>');
-      if (attr.containsKey('italic')) buffer.write('</em>');
-      if (attr.containsKey('bold')) buffer.write('</strong>');
-
-      if (isListItem) {
-        buffer.write('</li>');
-      } else if (data.contains('\n')) {
-        buffer.write('<br>');
-      }
-    }
-
-    if (inList) buffer.write('</ul>');
-    return buffer.toString();
-  }
 }

lib/view/directory/contact_detail_screen.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:flutter_html/flutter_html.dart' as html;
-import 'package:flutter_quill/flutter_quill.dart' as quill;
 import 'package:marco/controller/project_controller.dart';
 import 'package:marco/controller/directory/directory_controller.dart';
 import 'package:marco/helpers/widgets/my_spacing.dart';
@@ -9,58 +7,12 @@ import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/model/directory/contact_model.dart';
 import 'package:marco/helpers/widgets/avatar.dart';
 import 'package:marco/helpers/utils/launcher_utils.dart';
-import 'package:tab_indicator_styler/tab_indicator_styler.dart';
-import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart';
-import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
 import 'package:marco/model/directory/add_comment_bottom_sheet.dart';
-import 'package:marco/helpers/utils/date_time_utils.dart';
 import 'package:marco/model/directory/add_contact_bottom_sheet.dart';
+import 'package:marco/helpers/utils/date_time_utils.dart';
 import 'package:marco/helpers/widgets/my_refresh_indicator.dart';
 import 'package:marco/helpers/widgets/my_confirmation_dialog.dart';
-import 'package:marco/model/directory/directory_comment_model.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
-
-// HELPER: Delta to HTML conversion
-String _convertDeltaToHtml(dynamic delta) {
-  final buffer = StringBuffer();
-  bool inList = false;
-
-  for (var op in delta.toList()) {
-    final String data = op.data?.toString() ?? '';
-    final attr = op.attributes ?? {};
-    final bool isListItem = attr.containsKey('list');
-
-    if (isListItem && !inList) {
-      buffer.write('<ul>');
-      inList = true;
-    }
-    if (!isListItem && inList) {
-      buffer.write('</ul>');
-      inList = false;
-    }
-
-    if (isListItem) buffer.write('<li>');
-
-    if (attr.containsKey('bold')) buffer.write('<strong>');
-    if (attr.containsKey('italic')) buffer.write('<em>');
-    if (attr.containsKey('underline')) buffer.write('<u>');
-    if (attr.containsKey('strike')) buffer.write('<s>');
-    if (attr.containsKey('link')) buffer.write('<a href="${attr['link']}">');
-    buffer.write(data.replaceAll('\n', ''));
-    if (attr.containsKey('link')) buffer.write('</a>');
-    if (attr.containsKey('strike')) buffer.write('</s>');
-    if (attr.containsKey('underline')) buffer.write('</u>');
-    if (attr.containsKey('italic')) buffer.write('</em>');
-    if (attr.containsKey('bold')) buffer.write('</strong>');
-
-    if (isListItem)
-      buffer.write('</li>');
-    else if (data.contains('\n')) {
-      buffer.write('<br>');
-    }
-  }
-  if (inList) buffer.write('</ul>');
-  return buffer.toString();
-}
 
 class ContactDetailScreen extends StatefulWidget {
   final ContactModel contact;
@@ -70,10 +22,10 @@ class ContactDetailScreen extends StatefulWidget {
   State<ContactDetailScreen> createState() => _ContactDetailScreenState();
 }
 
-class _ContactDetailScreenState extends State<ContactDetailScreen> {
+class _ContactDetailScreenState extends State<ContactDetailScreen>
+    with UIMixin {
   late final DirectoryController directoryController;
   late final ProjectController projectController;
-
   late Rx<ContactModel> contactRx;
 
   @override
@@ -90,7 +42,6 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
           active: false);
     });
 
-    // Listen to controller's allContacts and update contact if changed
     ever(directoryController.allContacts, (_) {
       final updated = directoryController.allContacts
           .firstWhereOrNull((c) => c.id == contactRx.value.id);
@@ -173,11 +124,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(children: [
-            Avatar(
+            Avatar(firstName: firstName, lastName: lastName, size: 35),
-              firstName: firstName,
-              lastName: lastName,
-              size: 35,
-            ),
             MySpacing.width(12),
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -191,16 +138,9 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
             ),
           ]),
           TabBar(
-            labelColor: Colors.red,
+            labelColor: Colors.black,
-            unselectedLabelColor: Colors.black,
+            unselectedLabelColor: Colors.grey,
-            indicator: MaterialIndicator(
+            indicatorColor: contentTheme.primary,
-              color: Colors.red,
-              height: 4,
-              topLeftRadius: 8,
-              topRightRadius: 8,
-              bottomLeftRadius: 8,
-              bottomRightRadius: 8,
-            ),
             tabs: const [
               Tab(text: "Details"),
               Tab(text: "Notes"),
@@ -288,8 +228,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
                 _iconInfoRow(Icons.location_on, "Address", contact.address),
               ]),
               _infoCard("Organization", [
-                _iconInfoRow(
+                _iconInfoRow(Icons.business, "Organization", contact.organization),
-                    Icons.business, "Organization", contact.organization),
                 _iconInfoRow(Icons.category, "Category", category),
               ]),
               _infoCard("Meta Info", [
@@ -317,7 +256,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
           bottom: 20,
           right: 20,
           child: FloatingActionButton.extended(
-            backgroundColor: Colors.red,
+            backgroundColor: contentTheme.primary,
             onPressed: () async {
               final result = await Get.bottomSheet(
                 AddContactBottomSheet(existingContact: contact),
@@ -345,25 +284,37 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
   Widget _buildCommentsTab() {
     return Obx(() {
       final contactId = contactRx.value.id;
-      final comments = directoryController.combinedComments(contactId);
+
+      final activeComments = directoryController
+          .getCommentsForContact(contactId)
+          .where((c) => c.isActive)
+          .toList();
+      final inactiveComments = directoryController
+          .getCommentsForContact(contactId)
+          .where((c) => !c.isActive)
+          .toList();
+
+      final comments =
+          [...activeComments, ...inactiveComments].reversed.toList();
       final editingId = directoryController.editingCommentId.value;
 
       return Stack(
         children: [
-          comments.isEmpty
+          MyRefreshIndicator(
-              ? Center(
+            onRefresh: () async {
-                  child: MyText.bodyLarge("No notes yet.", color: Colors.grey),
+              await directoryController.fetchCommentsForContact(contactId,
-                )
+                  active: true);
-              : MyRefreshIndicator(
+              await directoryController.fetchCommentsForContact(contactId,
-                  onRefresh: () async {
+                  active: false);
-                    await directoryController.fetchCommentsForContact(contactId,
+            },
-                        active: true);
+            child: Padding(
-                    await directoryController.fetchCommentsForContact(contactId,
+              padding: MySpacing.xy(12, 12),
-                        active: false);
+              child: comments.isEmpty
-                  },
+                  ? Center(
-                  child: Padding(
+                      child:
-                    padding: MySpacing.xy(12, 12),
+                          MyText.bodyLarge("No notes yet.", color: Colors.grey),
-                    child: ListView.separated(
+                    )
+                  : ListView.separated(
                       physics: const AlwaysScrollableScrollPhysics(),
                       padding: const EdgeInsets.only(bottom: 100),
                       itemCount: comments.length,
@@ -371,19 +322,21 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
                       itemBuilder: (_, index) => _buildCommentItem(
                           comments[index], editingId, contactId),
                     ),
-                  ),
+            ),
-                ),
+          ),
           if (editingId == null)
             Positioned(
               bottom: 20,
               right: 20,
               child: FloatingActionButton.extended(
-                backgroundColor: Colors.red,
+                backgroundColor: contentTheme.primary,
                 onPressed: () async {
                   final result = await Get.bottomSheet(
                     AddCommentBottomSheet(contactId: contactId),
                     isScrollControlled: true,
+                    enableDrag: true,
                   );
+
                   if (result == true) {
                     await directoryController.fetchCommentsForContact(contactId,
                         active: true);
@@ -401,205 +354,214 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
     });
   }
 
-  Widget _buildCommentItem(
+  Widget _buildCommentItem(comment, editingId, contactId) {
-      DirectoryComment comment, String? editingId, String contactId) {
     final isEditing = editingId == comment.id;
     final initials = comment.createdBy.firstName.isNotEmpty
         ? comment.createdBy.firstName[0].toUpperCase()
         : "?";
 
-    final decodedDelta = HtmlToDelta().convert(comment.note);
+    final textController = TextEditingController(text: comment.note);
-    final quillController = isEditing
-        ? quill.QuillController(
-            document: quill.Document.fromDelta(decodedDelta),
-            selection: TextSelection.collapsed(offset: decodedDelta.length),
-          )
-        : null;
-
-    final isInactive = !comment.isActive;
 
     return Container(
-        margin: const EdgeInsets.symmetric(vertical: 6),
+      margin: const EdgeInsets.symmetric(vertical: 6),
-        padding: const EdgeInsets.all(12),
+      padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
+      decoration: BoxDecoration(
-          color: Colors.white,
+        color: Colors.white,
-          borderRadius: BorderRadius.circular(14),
+        borderRadius: BorderRadius.circular(14),
-          border: Border.all(color: Colors.grey.shade200),
+        border: Border.all(color: Colors.grey.shade200),
-          boxShadow: [
+        boxShadow: [
-            BoxShadow(
+          BoxShadow(
-              color: Colors.black.withOpacity(0.03),
+            color: Colors.black.withOpacity(0.03),
-              blurRadius: 6,
+            blurRadius: 6,
-              offset: const Offset(0, 2),
+            offset: const Offset(0, 2),
-            ),
+          ),
-          ],
+        ],
-        ),
+      ),
-        child: Column(
+      child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
+        children: [
-            // 🧑 Header
+          // Header: Avatar + Name + Role + Timestamp + Actions
-            Row(
+          Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
+            children: [
-                Avatar(
+              Avatar(firstName: initials, lastName: '', size: 40),
-                  firstName: initials,
+              const SizedBox(width: 10),
-                  lastName: '',
+              Expanded(
-                  size: 40,
+                child: Column(
-                ),
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                const SizedBox(width: 10),
+                  children: [
-                Expanded(
+                    Text(
-                  child: Column(
+                      "${comment.createdBy.firstName} ${comment.createdBy.lastName}",
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                      style: const TextStyle(
-                    children: [
+                        fontWeight: FontWeight.w700,
+                        fontSize: 15,
+                        color: Colors.black87,
+                      ),
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    const SizedBox(height: 2),
+                    if (comment.createdBy.jobRoleName?.isNotEmpty ?? false)
                       Text(
-                        "${comment.createdBy.firstName} ${comment.createdBy.lastName}",
+                        comment.createdBy.jobRoleName,
                         style: TextStyle(
-                          fontWeight: FontWeight.w700,
+                          fontSize: 13,
-                          fontSize: 15,
+                          color: Colors.indigo[600],
-                          color: isInactive ? Colors.grey : Colors.black87,
+                          fontWeight: FontWeight.w500,
-                          fontStyle:
-                              isInactive ? FontStyle.italic : FontStyle.normal,
-                        ),
-                        overflow: TextOverflow.ellipsis,
-                      ),
-                      const SizedBox(height: 2),
-                      if (comment.createdBy.jobRoleName.isNotEmpty)
-                        Text(
-                          comment.createdBy.jobRoleName,
-                          style: TextStyle(
-                            fontSize: 13,
-                            color:
-                                isInactive ? Colors.grey : Colors.indigo[600],
-                            fontWeight: FontWeight.w500,
-                            fontStyle: isInactive
-                                ? FontStyle.italic
-                                : FontStyle.normal,
-                          ),
-                        ),
-                      const SizedBox(height: 2),
-                      Text(
-                        DateTimeUtils.convertUtcToLocal(
-                          comment.createdAt.toString(),
-                          format: 'dd MMM yyyy, hh:mm a',
-                        ),
-                        style: TextStyle(
-                          fontSize: 12,
-                          color: Colors.grey[600],
-                          fontStyle:
-                              isInactive ? FontStyle.italic : FontStyle.normal,
                         ),
                       ),
-                    ],
+                    const SizedBox(height: 2),
-                  ),
+                    Text(
+                      DateTimeUtils.convertUtcToLocal(
+                        comment.createdAt.toString(),
+                        format: 'dd MMM yyyy, hh:mm a',
+                      ),
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: Colors.grey[600],
+                      ),
+                    ),
+                  ],
                 ),
-
-                // ⚡ Action buttons
-                if (!isInactive)
-                  Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      IconButton(
-                        icon: const Icon(Icons.edit_outlined,
-                            size: 18, color: Colors.indigo),
-                        tooltip: "Edit",
-                        splashRadius: 18,
-                        onPressed: () {
-                          directoryController.editingCommentId.value =
-                              isEditing ? null : comment.id;
-                        },
-                      ),
-                      IconButton(
-                        icon: const Icon(Icons.delete_outline,
-                            size: 18, color: Colors.red),
-                        tooltip: "Delete",
-                        splashRadius: 18,
-                        onPressed: () async {
-                          await Get.dialog(
-                            ConfirmDialog(
-                              title: "Delete Note",
-                              message:
-                                  "Are you sure you want to delete this note?",
-                              confirmText: "Delete",
-                              confirmColor: Colors.red,
-                              icon: Icons.delete_forever,
-                              onConfirm: () async {
-                                await directoryController.deleteComment(
-                                    comment.id, contactId);
-                              },
-                            ),
-                          );
-                        },
-                      ),
-                    ],
-                  )
-                else
-                  IconButton(
-                    icon: const Icon(Icons.restore,
-                        size: 18, color: Colors.green),
-                    tooltip: "Restore",
-                    splashRadius: 18,
-                    onPressed: () async {
-                      await Get.dialog(
-                        ConfirmDialog(
-                          title: "Restore Note",
-                          message:
-                              "Are you sure you want to restore this note?",
-                          confirmText: "Restore",
-                          confirmColor: Colors.green,
-                          icon: Icons.restore,
-                          onConfirm: () async {
-                            await directoryController.restoreComment(
-                                comment.id, contactId);
-                          },
-                        ),
-                      );
-                    },
-                  ),
-              ],
-            ),
-
-            const SizedBox(height: 8),
-
-            // 📝 Comment Content
-            if (isEditing && quillController != null)
-              CommentEditorCard(
-                controller: quillController,
-                onCancel: () =>
-                    directoryController.editingCommentId.value = null,
-                onSave: (ctrl) async {
-                  final delta = ctrl.document.toDelta();
-                  final htmlOutput = _convertDeltaToHtml(delta);
-                  final updated = comment.copyWith(note: htmlOutput);
-                  await directoryController.updateComment(updated);
-                  await directoryController.fetchCommentsForContact(contactId,
-                      active: true);
-                  await directoryController.fetchCommentsForContact(contactId,
-                      active: false);
-                  directoryController.editingCommentId.value = null;
-                },
-              )
-            else
-              html.Html(
-                data: comment.note,
-                style: {
-                  "body": html.Style(
-                    margin: html.Margins.zero,
-                    padding: html.HtmlPaddings.zero,
-                    fontSize: html.FontSize(14),
-                    color: isInactive ? Colors.grey : Colors.black87,
-                    fontStyle: isInactive ? FontStyle.italic : FontStyle.normal,
-                  ),
-                  "p": html.Style(
-                    margin: html.Margins.only(bottom: 6),
-                    lineHeight: const html.LineHeight(1.4),
-                  ),
-                  "strong": html.Style(
-                    fontWeight: FontWeight.w700,
-                    color: isInactive ? Colors.grey : Colors.black87,
-                  ),
-                },
               ),
-          ],
+              Row(
-        ));
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (!comment.isActive)
+                    IconButton(
+                      icon: const Icon(Icons.restore,
+                          size: 18, color: Colors.green),
+                      tooltip: "Restore",
+                      splashRadius: 18,
+                      onPressed: () async {
+                        await Get.dialog(
+                          ConfirmDialog(
+                            title: "Restore Note",
+                            message:
+                                "Are you sure you want to restore this note?",
+                            confirmText: "Restore",
+                            confirmColor: Colors.green,
+                            icon: Icons.restore,
+                            onConfirm: () async {
+                              await directoryController.restoreComment(
+                                  comment.id, contactId);
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                  if (comment.isActive) ...[
+                    IconButton(
+                      icon: const Icon(Icons.edit_outlined,
+                          size: 18, color: Colors.indigo),
+                      tooltip: "Edit",
+                      splashRadius: 18,
+                      onPressed: () {
+                        directoryController.editingCommentId.value =
+                            isEditing ? null : comment.id;
+                      },
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.delete_outline,
+                          size: 18, color: Colors.red),
+                      tooltip: "Delete",
+                      splashRadius: 18,
+                      onPressed: () async {
+                        await Get.dialog(
+                          ConfirmDialog(
+                            title: "Delete Note",
+                            message:
+                                "Are you sure you want to delete this note?",
+                            confirmText: "Delete",
+                            confirmColor: Colors.red,
+                            icon: Icons.delete_forever,
+                            onConfirm: () async {
+                              await directoryController.deleteComment(
+                                  comment.id, contactId);
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                  ],
+                ],
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          if (isEditing)
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                TextField(
+                  controller: textController,
+                  maxLines: null,
+                  minLines: 5,
+                  decoration: InputDecoration(
+                    hintText: "Edit note...",
+                    border: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(12)),
+                    contentPadding: const EdgeInsets.all(12),
+                  ),
+                ),
+                const SizedBox(height: 12),
+                Row(
+                  children: [
+                    Expanded(
+                      child: ElevatedButton.icon(
+                        onPressed: () =>
+                            directoryController.editingCommentId.value = null,
+                        icon: const Icon(Icons.close, color: Colors.white),
+                        label: const Text(
+                          "Cancel",
+                          style: TextStyle(color: Colors.white),
+                        ),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: Colors.grey,
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          padding: const EdgeInsets.symmetric(vertical: 12),
+                        ),
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: ElevatedButton.icon(
+                        onPressed: () async {
+                          final updated =
+                              comment.copyWith(note: textController.text);
+                          await directoryController.updateComment(updated);
+                          await directoryController
+                              .fetchCommentsForContact(contactId);
+                          directoryController.editingCommentId.value = null;
+                        },
+                        icon: const Icon(Icons.check_circle_outline,
+                            color: Colors.white),
+                        label: const Text(
+                          "Save",
+                          style: TextStyle(color: Colors.white),
+                        ),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: contentTheme.primary,
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          padding: const EdgeInsets.symmetric(vertical: 12),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            )
+          else
+            Text(
+              comment.note,
+              style: TextStyle(color: Colors.grey[800], fontSize: 14),
+            ),
+        ],
+      ),
+    );
   }
 
   Widget _iconInfoRow(
@@ -661,7 +623,6 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
   }
 }
 
-// Helper widget for Project label in AppBar
 class ProjectLabel extends StatelessWidget {
   final String? projectName;
   const ProjectLabel(this.projectName, {super.key});

lib/view/directory/notes_view.dart

@@ -1,24 +1,25 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:flutter_quill/flutter_quill.dart' as quill;
-import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
-import 'package:flutter_html/flutter_html.dart' as html;
-
 import 'package:marco/helpers/widgets/my_refresh_indicator.dart';
 import 'package:marco/controller/directory/notes_controller.dart';
 import 'package:marco/helpers/widgets/my_spacing.dart';
 import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/helpers/widgets/avatar.dart';
 import 'package:marco/helpers/utils/date_time_utils.dart';
-import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart';
 import 'package:marco/helpers/widgets/my_confirmation_dialog.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 
-class NotesView extends StatelessWidget {
+class NotesView extends StatefulWidget {
+  const NotesView({super.key});
+
+  @override
+  State<NotesView> createState() => _NotesViewState();
+}
+
+class _NotesViewState extends State<NotesView> with UIMixin {
   final NotesController controller = Get.find();
   final TextEditingController searchController = TextEditingController();
 
-  NotesView({super.key});
-
   Future<void> _refreshNotes() async {
     try {
       await controller.fetchNotes();
@@ -28,49 +29,6 @@ class NotesView extends StatelessWidget {
     }
   }
 
-  String _convertDeltaToHtml(dynamic delta) {
-    final buffer = StringBuffer();
-    bool inList = false;
-
-    for (var op in delta.toList()) {
-      final data = op.data?.toString() ?? '';
-      final attr = op.attributes ?? {};
-      final isListItem = attr.containsKey('list');
-
-      if (isListItem && !inList) {
-        buffer.write('<ul>');
-        inList = true;
-      }
-      if (!isListItem && inList) {
-        buffer.write('</ul>');
-        inList = false;
-      }
-
-      if (isListItem) buffer.write('<li>');
-
-      if (attr.containsKey('bold')) buffer.write('<strong>');
-      if (attr.containsKey('italic')) buffer.write('<em>');
-      if (attr.containsKey('underline')) buffer.write('<u>');
-      if (attr.containsKey('strike')) buffer.write('<s>');
-      if (attr.containsKey('link')) buffer.write('<a href="${attr['link']}">');
-
-      buffer.write(data.replaceAll('\n', ''));
-
-      if (attr.containsKey('link')) buffer.write('</a>');
-      if (attr.containsKey('strike')) buffer.write('</s>');
-      if (attr.containsKey('underline')) buffer.write('</u>');
-      if (attr.containsKey('italic')) buffer.write('</em>');
-      if (attr.containsKey('bold')) buffer.write('</strong>');
-
-      if (isListItem)
-        buffer.write('</li>');
-      else if (data.contains('\n')) buffer.write('<br>');
-    }
-
-    if (inList) buffer.write('</ul>');
-    return buffer.toString();
-  }
-
   Widget _buildEmptyState() {
     return Center(
       child: Column(
@@ -93,11 +51,206 @@ class NotesView extends StatelessWidget {
     );
   }
 
+  Widget _buildNoteItem(note) {
+    final isEditing = controller.editingNoteId.value == note.id;
+    final textController = TextEditingController(text: note.note);
+    final initials = note.contactName.trim().isNotEmpty
+        ? note.contactName
+            .trim()
+            .split(' ')
+            .map((e) => e[0])
+            .take(2)
+            .join()
+            .toUpperCase()
+        : "NA";
+
+    return Container(
+      margin: const EdgeInsets.symmetric(vertical: 6),
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(5),
+        border: Border.all(color: Colors.grey.shade200),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.03),
+            blurRadius: 6,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Header: Avatar + Name + Timestamp + Actions
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Avatar(firstName: initials, lastName: '', size: 40),
+              const SizedBox(width: 10),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    MyText.titleSmall(
+                      "${note.contactName} (${note.organizationName})",
+                      fontWeight: 600,
+                      color: Colors.black87,
+                    ),
+                    const SizedBox(height: 2),
+                    MyText.bodySmall(
+                      "by ${note.createdBy.firstName} ${note.createdBy.lastName} • "
+                      "${DateTimeUtils.convertUtcToLocal(note.createdAt.toString(), format: 'dd MMM yyyy, hh:mm a')}",
+                      color: Colors.grey[600],
+                    ),
+                  ],
+                ),
+              ),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (!note.isActive)
+                    IconButton(
+                      icon: const Icon(Icons.restore,
+                          size: 18, color: Colors.green),
+                      tooltip: "Restore",
+                      splashRadius: 18,
+                      onPressed: () async {
+                        await Get.dialog(
+                          ConfirmDialog(
+                            title: "Restore Note",
+                            message:
+                                "Are you sure you want to restore this note?",
+                            confirmText: "Restore",
+                            confirmColor: Colors.green,
+                            icon: Icons.restore,
+                            onConfirm: () async {
+                              await controller.restoreOrDeleteNote(note,
+                                  restore: true);
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                  if (note.isActive) ...[
+                    IconButton(
+                      icon: Icon(isEditing ? Icons.close : Icons.edit_outlined,
+                          color: Colors.indigo, size: 18),
+                      splashRadius: 18,
+                      onPressed: () {
+                        controller.editingNoteId.value =
+                            isEditing ? null : note.id;
+                      },
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.delete_outline,
+                          size: 18, color: Colors.red),
+                      splashRadius: 18,
+                      onPressed: () async {
+                        await Get.dialog(
+                          ConfirmDialog(
+                            title: "Delete Note",
+                            message:
+                                "Are you sure you want to delete this note?",
+                            confirmText: "Delete",
+                            confirmColor: Colors.red,
+                            icon: Icons.delete_forever,
+                            onConfirm: () async {
+                              await controller.restoreOrDeleteNote(note,
+                                  restore: false);
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                  ],
+                ],
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+
+          // Content: TextField when editing or plain text
+          if (isEditing)
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                TextField(
+                  controller: textController,
+                  maxLines: null,
+                  minLines: 5,
+                  decoration: InputDecoration(
+                    hintText: "Edit note...",
+                    border: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(5)),
+                    contentPadding: const EdgeInsets.all(12),
+                  ),
+                ),
+                const SizedBox(height: 12),
+                Row(
+                  children: [
+                    Expanded(
+                      child: ElevatedButton.icon(
+                        onPressed: () => controller.editingNoteId.value = null,
+                        icon: const Icon(Icons.close, color: Colors.white),
+                        label: MyText.bodyMedium(
+                          "Cancel",
+                          color: Colors.white,
+                          fontWeight: 600,
+                        ),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: Colors.grey,
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          padding: const EdgeInsets.symmetric(vertical: 8),
+                        ),
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: ElevatedButton.icon(
+                        onPressed: () async {
+                          final updated =
+                              note.copyWith(note: textController.text);
+                          await controller.updateNote(updated);
+                          controller.editingNoteId.value = null;
+                        },
+                        icon: const Icon(Icons.check_circle_outline,
+                            color: Colors.white),
+                        label: MyText.bodyMedium(
+                          "Save",
+                          color: Colors.white,
+                          fontWeight: 600,
+                        ),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: contentTheme.primary,
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          padding: const EdgeInsets.symmetric(vertical: 8),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            )
+          else
+            Text(
+              note.note,
+              style: TextStyle(color: Colors.grey[800], fontSize: 14),
+            ),
+        ],
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
       children: [
-        /// 🔍 Search Field
+        // Search
         Padding(
           padding: MySpacing.xy(8, 8),
           child: Row(
@@ -131,7 +284,7 @@ class NotesView extends StatelessWidget {
           ),
         ),
 
-        /// 📄 Notes List
+        // Notes List
         Expanded(
           child: Obx(() {
             if (controller.isLoading.value) {
@@ -150,7 +303,9 @@ class NotesView extends StatelessWidget {
                       child: ConstrainedBox(
                         constraints:
                             BoxConstraints(minHeight: constraints.maxHeight),
-                        child: Center(child: _buildEmptyState()),
+                        child: Center(
+                          child: _buildEmptyState(),
+                        ),
                       ),
                     );
                   },
@@ -165,228 +320,8 @@ class NotesView extends StatelessWidget {
                 padding: MySpacing.only(left: 8, right: 8, top: 4, bottom: 80),
                 itemCount: notes.length,
                 separatorBuilder: (_, __) => MySpacing.height(12),
-                itemBuilder: (_, index) {
+                itemBuilder: (_, index) =>
-                  final note = notes[index];
+                    Obx(() => _buildNoteItem(notes[index])),
-
-                  return Obx(() {
-                    final isEditing = controller.editingNoteId.value == note.id;
-
-                    final initials = note.contactName.trim().isNotEmpty
-                        ? note.contactName
-                            .trim()
-                            .split(' ')
-                            .map((e) => e[0])
-                            .take(2)
-                            .join()
-                            .toUpperCase()
-                        : "NA";
-
-                    final createdDate = DateTimeUtils.convertUtcToLocal(
-                        note.createdAt.toString(),
-                        format: 'dd MMM yyyy');
-                    final createdTime = DateTimeUtils.convertUtcToLocal(
-                        note.createdAt.toString(),
-                        format: 'hh:mm a');
-
-                    final decodedDelta = HtmlToDelta().convert(note.note);
-                    final quillController = isEditing
-                        ? quill.QuillController(
-                            document: quill.Document.fromDelta(decodedDelta),
-                            selection: TextSelection.collapsed(
-                                offset: decodedDelta.length),
-                          )
-                        : null;
-
-                    return AnimatedContainer(
-                      duration: const Duration(milliseconds: 250),
-                      padding: MySpacing.xy(12, 12),
-                      decoration: BoxDecoration(
-                        color: isEditing
-                            ? Colors.indigo[50]
-                            : note.isActive
-                                ? Colors.white
-                                : Colors.grey.shade100,
-                        border: Border.all(
-                          color: note.isActive
-                              ? (isEditing
-                                  ? Colors.indigo
-                                  : Colors.grey.shade300)
-                              : Colors.grey.shade400,
-                          width: 1.1,
-                        ),
-                        borderRadius: BorderRadius.circular(5),
-                        boxShadow: const [
-                          BoxShadow(
-                            color: Colors.black12,
-                            blurRadius: 4,
-                            offset: Offset(0, 2),
-                          ),
-                        ],
-                      ),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          // Header & Note content (fade them if inactive)
-                          AnimatedOpacity(
-                            duration: const Duration(milliseconds: 200),
-                            opacity: note.isActive ? 1.0 : 0.6,
-                            child: IgnorePointer(
-                              ignoring: !note.isActive,
-                              child: Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                children: [
-                                  Row(
-                                    crossAxisAlignment:
-                                        CrossAxisAlignment.start,
-                                    children: [
-                                      Avatar(
-                                        firstName: initials,
-                                        lastName: '',
-                                        size: 40,
-                                        backgroundColor: note.isActive
-                                            ? null
-                                            : Colors.grey.shade400,
-                                      ),
-                                      MySpacing.width(12),
-                                      Expanded(
-                                        child: Column(
-                                          crossAxisAlignment:
-                                              CrossAxisAlignment.start,
-                                          children: [
-                                            MyText.titleSmall(
-                                              "${note.contactName} (${note.organizationName})",
-                                              fontWeight: 600,
-                                              overflow: TextOverflow.ellipsis,
-                                              color: note.isActive
-                                                  ? Colors.indigo[800]
-                                                  : Colors.grey,
-                                            ),
-                                            MyText.bodySmall(
-                                              "by ${note.createdBy.firstName} • $createdDate, $createdTime",
-                                              color: note.isActive
-                                                  ? Colors.grey[600]
-                                                  : Colors.grey,
-                                            ),
-                                          ],
-                                        ),
-                                      ),
-                                    ],
-                                  ),
-                                  MySpacing.height(12),
-                                  if (isEditing && quillController != null)
-                                    CommentEditorCard(
-                                      controller: quillController,
-                                      onCancel: () =>
-                                          controller.editingNoteId.value = null,
-                                      onSave: (quillCtrl) async {
-                                        final delta =
-                                            quillCtrl.document.toDelta();
-                                        final htmlOutput =
-                                            _convertDeltaToHtml(delta);
-                                        final updated =
-                                            note.copyWith(note: htmlOutput);
-                                        await controller.updateNote(updated);
-                                        controller.editingNoteId.value = null;
-                                      },
-                                    )
-                                  else
-                                    html.Html(
-                                      data: note.note,
-                                      style: {
-                                        "body": html.Style(
-                                          margin: html.Margins.zero,
-                                          padding: html.HtmlPaddings.zero,
-                                          fontSize: html.FontSize.medium,
-                                          color: note.isActive
-                                              ? Colors.black87
-                                              : Colors.grey,
-                                        ),
-                                      },
-                                    ),
-                                ],
-                              ),
-                            ),
-                          ),
-
-                          // Action buttons (always fully visible)
-                          Row(
-                            mainAxisAlignment: MainAxisAlignment.end,
-                            children: [
-                              if (note.isActive) ...[
-                                IconButton(
-                                  icon: Icon(
-                                    isEditing ? Icons.close : Icons.edit,
-                                    color: Colors.indigo,
-                                    size: 20,
-                                  ),
-                                  padding: EdgeInsets.all(2),
-                                  constraints: const BoxConstraints(),
-                                  onPressed: () {
-                                    controller.editingNoteId.value =
-                                        isEditing ? null : note.id;
-                                  },
-                                ),
-                                IconButton(
-                                  icon: const Icon(
-                                    Icons.delete_outline,
-                                    color: Colors.redAccent,
-                                    size: 20,
-                                  ),
-                                  constraints: const BoxConstraints(),
-                                  onPressed: () async {
-                                    await Get.dialog(
-                                      ConfirmDialog(
-                                        title: "Delete Note",
-                                        message:
-                                            "Are you sure you want to delete this note?",
-                                        confirmText: "Delete",
-                                        confirmColor: Colors.redAccent,
-                                        icon: Icons.delete_forever,
-                                        onConfirm: () async {
-                                          await controller.restoreOrDeleteNote(
-                                              note,
-                                              restore: false);
-                                        },
-                                      ),
-                                      barrierDismissible: false,
-                                    );
-                                  },
-                                ),
-                              ],
-                              if (!note.isActive)
-                                IconButton(
-                                  icon: const Icon(
-                                    Icons.restore,
-                                    color: Colors.green,
-                                    size: 22,
-                                  ),
-                                  tooltip: "Restore",
-                                  onPressed: () async {
-                                    await Get.dialog(
-                                      ConfirmDialog(
-                                        title: "Restore Note",
-                                        message:
-                                            "Are you sure you want to restore this note?",
-                                        confirmText: "Restore",
-                                        confirmColor: Colors.green,
-                                        icon: Icons.restore,
-                                        onConfirm: () async {
-                                          await controller.restoreOrDeleteNote(
-                                              note,
-                                              restore: true);
-                                        },
-                                      ),
-                                      barrierDismissible: false,
-                                    );
-                                  },
-                                ),
-                            ],
-                          ),
-                        ],
-                      ),
-                    );
-                  });
-                },
               ),
             );
           }),