feat: Tampilkan note dari setiap track yang ada note-nya di halaman report screenshot

Note-nya ditampilkan dalam bentuk tooltip.

Author: CoderJava

lib/feature/presentation/page/report_screenshot/report_screenshot_page.dart

@@ -808,71 +808,97 @@ class _ReportScreenshotPageState extends State<ReportScreenshotPage> {
     }
 
     final trackId = element.id;
+    final note = element.note ?? '';
     return Align(
       alignment: Alignment.center,
       child: Padding(
         padding: EdgeInsets.only(top: heightImage),
         child: Row(
           mainAxisSize: MainAxisSize.max,
-          mainAxisAlignment: MainAxisAlignment.end,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            Material(
-              borderRadius: BorderRadius.circular(999),
-              child: InkWell(
-                borderRadius: BorderRadius.circular(999),
-                onTap: () {
-                  if (trackId == null) {
-                    widgetHelper.showSnackBar(
-                      context,
-                      'track_id_invalid'.tr(),
-                    );
-                    return;
-                  }
+            note.isEmpty
+                ? Container()
+                : Tooltip(
+                    message: note,
+                    child: Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: FaIcon(
+                        FontAwesomeIcons.penToSquare,
+                        color: Theme.of(context).colorScheme.primary,
+                        size: 14,
+                      ),
+                    ),
+                  ),
+            buildWidgetIconDelete(
+              const FaIcon(
+                FontAwesomeIcons.trashCan,
+                color: Colors.red,
+                size: 14,
+              ),
+              onTap: () {
+                if (trackId == null) {
+                  widgetHelper.showSnackBar(
+                    context,
+                    'track_id_invalid'.tr(),
+                  );
+                  return;
+                }
 
-                  showDialog<bool?>(
-                    context: context,
-                    builder: (context) {
-                      return AlertDialog(
-                        title: Text('title_delete_track'.tr()),
-                        content: Text('content_delete_track'.tr()),
-                        actions: [
-                          TextButton(
-                            onPressed: () => context.pop(false),
-                            child: Text('cancel'.tr()),
-                          ),
-                          TextButton(
-                            onPressed: () => context.pop(true),
-                            style: TextButton.styleFrom(
-                              foregroundColor: Colors.red,
-                            ),
-                            child: Text('delete'.tr()),
+                showDialog<bool?>(
+                  context: context,
+                  builder: (context) {
+                    return AlertDialog(
+                      title: Text('title_delete_track'.tr()),
+                      content: Text('content_delete_track'.tr()),
+                      actions: [
+                        TextButton(
+                          onPressed: () => context.pop(false),
+                          child: Text('cancel'.tr()),
+                        ),
+                        TextButton(
+                          onPressed: () => context.pop(true),
+                          style: TextButton.styleFrom(
+                            foregroundColor: Colors.red,
                           ),
-                        ],
-                      );
-                    },
-                  ).then((value) {
-                    if (value != null && value) {
-                      trackingBloc.add(
-                        DeleteTrackUserTrackingEvent(
-                          trackId: trackId,
+                          child: Text('delete'.tr()),
                         ),
-                      );
-                    }
-                  });
-                },
-                child: const Padding(
-                  padding: EdgeInsets.all(8.0),
-                  child: FaIcon(
-                    FontAwesomeIcons.trashCan,
-                    color: Colors.red,
-                    size: 14,
-                  ),
-                ),
-              ),
+                      ],
+                    );
+                  },
+                ).then((value) {
+                  if (value != null && value) {
+                    trackingBloc.add(
+                      DeleteTrackUserTrackingEvent(
+                        trackId: trackId,
+                      ),
+                    );
+                  }
+                });
+              },
             ),
           ],
         ),
       ),
     );
   }
+
+  Widget buildWidgetIconDelete(
+    Widget icon, {
+    Function()? onTap,
+    ValueChanged<bool>? onHover,
+  }) {
+    return Material(
+      borderRadius: BorderRadius.circular(999),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(999),
+        onTap: onTap,
+        onHover: onHover,
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: icon,
+        ),
+      ),
+    );
+  }
 }