From 59648bf2d702f665b989d0ad473526327c4f0b25 Mon Sep 17 00:00:00 2001
From: krille-chan <christian-kussowski@posteo.de>
Date: Wed, 5 Feb 2025 17:35:24 +0100
Subject: [PATCH] fix: Image search rendering problem

---
 lib/pages/chat/events/image_bubble.dart       |  2 --
 lib/pages/chat_list/navi_rail_item.dart       |  2 +-
 .../chat_search/chat_search_images_tab.dart   | 36 ++++++++++++++++---
 lib/pages/chat_search/chat_search_view.dart   |  2 +-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/lib/pages/chat/events/image_bubble.dart b/lib/pages/chat/events/image_bubble.dart
index 6c9a788ac..3fa352d25 100644
--- a/lib/pages/chat/events/image_bubble.dart
+++ b/lib/pages/chat/events/image_bubble.dart
@@ -14,7 +14,6 @@ class ImageBubble extends StatelessWidget {
   final Event event;
   final bool tapToView;
   final BoxFit fit;
-  final bool maxSize;
   final Color? backgroundColor;
   final Color? textColor;
   final Color? linkColor;
@@ -29,7 +28,6 @@ class ImageBubble extends StatelessWidget {
   const ImageBubble(
     this.event, {
     this.tapToView = true,
-    this.maxSize = true,
     this.backgroundColor,
     this.fit = BoxFit.contain,
     this.thumbnailOnly = true,
diff --git a/lib/pages/chat_list/navi_rail_item.dart b/lib/pages/chat_list/navi_rail_item.dart
index acb29ab64..0e844e05d 100644
--- a/lib/pages/chat_list/navi_rail_item.dart
+++ b/lib/pages/chat_list/navi_rail_item.dart
@@ -65,7 +65,7 @@ class NaviRailItem extends StatelessWidget {
                     borderRadius: borderRadius,
                     color: isSelected
                         ? theme.colorScheme.primaryContainer
-                        : theme.colorScheme.surfaceBright,
+                        : theme.colorScheme.surfaceContainerHigh,
                     child: Tooltip(
                       message: toolTip,
                       child: InkWell(
diff --git a/lib/pages/chat_search/chat_search_images_tab.dart b/lib/pages/chat_search/chat_search_images_tab.dart
index a930ed02d..e2465a6d9 100644
--- a/lib/pages/chat_search/chat_search_images_tab.dart
+++ b/lib/pages/chat_search/chat_search_images_tab.dart
@@ -4,9 +4,11 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:intl/intl.dart';
 import 'package:matrix/matrix.dart';
 
-import 'package:fluffychat/pages/chat/events/image_bubble.dart';
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pages/chat/events/video_player.dart';
+import 'package:fluffychat/pages/image_viewer/image_viewer.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
+import 'package:fluffychat/widgets/mxc_image.dart';
 
 class ChatSearchImagesTab extends StatelessWidget {
   final Room room;
@@ -25,6 +27,7 @@ class ChatSearchImagesTab extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.circular(AppConfig.borderRadius / 2);
     return StreamBuilder(
       stream: searchStream,
       builder: (context, snapshot) {
@@ -144,16 +147,39 @@ class ChatSearchImagesTab extends StatelessWidget {
                   shrinkWrap: true,
                   mainAxisSpacing: padding,
                   crossAxisSpacing: padding,
+                  clipBehavior: Clip.hardEdge,
                   padding: const EdgeInsets.all(padding),
                   crossAxisCount: 3,
                   children: monthEvents.map(
                     (event) {
                       if (event.messageType == MessageTypes.Video) {
-                        return EventVideoPlayer(event);
+                        return Material(
+                          clipBehavior: Clip.hardEdge,
+                          borderRadius: borderRadius,
+                          child: EventVideoPlayer(event),
+                        );
                       }
-                      return ImageBubble(
-                        event,
-                        fit: BoxFit.cover,
+                      return InkWell(
+                        onTap: () => showDialog(
+                          context: context,
+                          builder: (_) => ImageViewer(
+                            event,
+                            outerContext: context,
+                          ),
+                        ),
+                        borderRadius: borderRadius,
+                        child: Material(
+                          clipBehavior: Clip.hardEdge,
+                          borderRadius: borderRadius,
+                          child: MxcImage(
+                            event: event,
+                            width: 128,
+                            height: 128,
+                            fit: BoxFit.cover,
+                            animated: true,
+                            isThumbnail: true,
+                          ),
+                        ),
                       );
                     },
                   ).toList(),
diff --git a/lib/pages/chat_search/chat_search_view.dart b/lib/pages/chat_search/chat_search_view.dart
index 1f458ca98..422479ccf 100644
--- a/lib/pages/chat_search/chat_search_view.dart
+++ b/lib/pages/chat_search/chat_search_view.dart
@@ -59,7 +59,7 @@ class ChatSearchView extends StatelessWidget {
                 enabled: controller.tabController.index == 0,
                 decoration: InputDecoration(
                   hintText: L10n.of(context).search,
-                  suffixIcon: const Icon(Icons.search_outlined),
+                  prefixIcon: const Icon(Icons.search_outlined),
                   filled: true,
                   fillColor: theme.colorScheme.secondaryContainer,
                   border: OutlineInputBorder(