Initial commit

lib/pages/chat_search/chat_search_files_tab.dart

@@ -0,0 +1,112 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/config/app_config.dart';
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/pages/chat_search/search_footer.dart';
+import 'package:tatchat/utils/date_time_extension.dart';
+import 'package:tatchat/utils/matrix_sdk_extensions/event_extension.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart';
+
+class ChatSearchFilesTab extends StatelessWidget {
+  final Room room;
+  final List<Event> events;
+  final void Function() onStartSearch;
+  final bool endReached, isLoading;
+  final DateTime? searchedUntil;
+
+  const ChatSearchFilesTab({
+    required this.room,
+    required this.events,
+    required this.onStartSearch,
+    required this.endReached,
+    required this.isLoading,
+    super.key,
+    required this.searchedUntil,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return SelectionArea(
+      child: ListView.builder(
+        padding: const EdgeInsets.all(8.0),
+        itemCount: events.length + 1,
+        itemBuilder: (context, i) {
+          if (i == events.length) {
+            return SearchFooter(
+              searchedUntil: searchedUntil,
+              endReached: endReached,
+              isLoading: isLoading,
+              onStartSearch: onStartSearch,
+            );
+          }
+          final event = events[i];
+          final filename =
+              event.content.tryGet<String>('filename') ??
+              event.content.tryGet<String>('body') ??
+              L10n.of(context).unknownEvent('File');
+          final filetype = (filename.contains('.')
+              ? filename.split('.').last.toUpperCase()
+              : event.content
+                        .tryGetMap<String, Object?>('info')
+                        ?.tryGet<String>('mimetype')
+                        ?.toUpperCase() ??
+                    'UNKNOWN');
+          final sizeString = event.sizeString;
+          final prevEvent = i > 0 ? events[i - 1] : null;
+          final sameEnvironment =
+              prevEvent != null &&
+              prevEvent.originServerTs.sameEnvironment(event.originServerTs);
+          return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if (!sameEnvironment) ...[
+                  Row(
+                    children: [
+                      Expanded(
+                        child: Container(height: 1, color: theme.dividerColor),
+                      ),
+                      Padding(
+                        padding: const EdgeInsets.all(8.0),
+                        child: Text(
+                          event.originServerTs.localizedTime(context),
+                          style: theme.textTheme.labelSmall,
+                          textAlign: TextAlign.center,
+                        ),
+                      ),
+                      Expanded(
+                        child: Container(height: 1, color: theme.dividerColor),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 4),
+                ],
+                Material(
+                  borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+                  color: theme.colorScheme.onInverseSurface,
+                  clipBehavior: Clip.hardEdge,
+                  child: ListTile(
+                    leading: const Icon(Icons.file_present_outlined),
+                    title: Text(
+                      filename,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    subtitle: Text('$sizeString | $filetype'),
+                    onTap: () => event.saveFile(context),
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/pages/chat_search/chat_search_images_tab.dart

@@ -0,0 +1,129 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/config/app_config.dart';
+import 'package:tatchat/pages/chat/events/video_player.dart';
+import 'package:tatchat/pages/chat_search/search_footer.dart';
+import 'package:tatchat/pages/image_viewer/image_viewer.dart';
+import 'package:tatchat/widgets/mxc_image.dart';
+import 'package:intl/intl.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart';
+
+class ChatSearchImagesTab extends StatelessWidget {
+  final Room room;
+  final List<Event> events;
+  final void Function() onStartSearch;
+  final bool endReached, isLoading;
+  final DateTime? searchedUntil;
+
+  const ChatSearchImagesTab({
+    required this.room,
+    required this.events,
+    required this.onStartSearch,
+    required this.endReached,
+    required this.isLoading,
+    super.key,
+    required this.searchedUntil,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.circular(AppConfig.borderRadius / 2);
+    final theme = Theme.of(context);
+
+    final eventsByMonth = <DateTime, List<Event>>{};
+    for (final event in events) {
+      final month = DateTime(
+        event.originServerTs.year,
+        event.originServerTs.month,
+      );
+      eventsByMonth[month] ??= [];
+      eventsByMonth[month]!.add(event);
+    }
+    final eventsByMonthList = eventsByMonth.entries.toList();
+
+    const padding = 8.0;
+
+    return ListView.builder(
+      itemCount: eventsByMonth.length + 1,
+      itemBuilder: (context, i) {
+        if (i == eventsByMonth.length) {
+          return SearchFooter(
+            searchedUntil: searchedUntil,
+            endReached: endReached,
+            isLoading: isLoading,
+            onStartSearch: onStartSearch,
+          );
+        }
+
+        final monthEvents = eventsByMonthList[i].value;
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const SizedBox(height: 4),
+            Row(
+              children: [
+                Expanded(
+                  child: Container(height: 1, color: theme.dividerColor),
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Text(
+                    DateFormat.yMMMM(
+                      Localizations.localeOf(context).languageCode,
+                    ).format(eventsByMonthList[i].key),
+                    style: theme.textTheme.labelSmall,
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+                Expanded(
+                  child: Container(height: 1, color: theme.dividerColor),
+                ),
+              ],
+            ),
+            GridView.count(
+              physics: const NeverScrollableScrollPhysics(),
+              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 Material(
+                    clipBehavior: Clip.hardEdge,
+                    borderRadius: borderRadius,
+                    child: EventVideoPlayer(event),
+                  );
+                }
+                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(),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/pages/chat_search/chat_search_message_tab.dart

@@ -0,0 +1,147 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/pages/chat_search/search_footer.dart';
+import 'package:tatchat/utils/date_time_extension.dart';
+import 'package:tatchat/utils/matrix_sdk_extensions/matrix_locals.dart';
+import 'package:tatchat/utils/url_launcher.dart';
+import 'package:tatchat/widgets/avatar.dart';
+import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:go_router/go_router.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart';
+
+class ChatSearchMessageTab extends StatelessWidget {
+  final String searchQuery;
+  final Room room;
+  final List<Event> events;
+  final void Function() onStartSearch;
+  final bool endReached, isLoading;
+  final DateTime? searchedUntil;
+
+  const ChatSearchMessageTab({
+    required this.searchQuery,
+    required this.room,
+    required this.onStartSearch,
+    required this.events,
+    required this.searchedUntil,
+    required this.endReached,
+    required this.isLoading,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    if (events.isEmpty && searchQuery.isEmpty) {
+      return Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const Icon(Icons.search_outlined, size: 64),
+          const SizedBox(height: 8),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 32.0),
+            child: Text(
+              L10n.of(context).searchIn(
+                room.getLocalizedDisplayname(MatrixLocals(L10n.of(context))),
+              ),
+              textAlign: TextAlign.center,
+            ),
+          ),
+        ],
+      );
+    }
+
+    return SelectionArea(
+      child: ListView.separated(
+        itemCount: events.length + 1,
+        separatorBuilder: (context, _) =>
+            Divider(color: theme.dividerColor, height: 1),
+        itemBuilder: (context, i) {
+          if (i == events.length) {
+            return SearchFooter(
+              searchedUntil: searchedUntil,
+              endReached: endReached,
+              isLoading: isLoading,
+              onStartSearch: onStartSearch,
+            );
+          }
+          final event = events[i];
+          final sender = event.senderFromMemoryOrFallback;
+          final displayname = sender.calcDisplayname(
+            i18n: MatrixLocals(L10n.of(context)),
+          );
+          return _MessageSearchResultListTile(
+            sender: sender,
+            displayname: displayname,
+            event: event,
+            room: room,
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _MessageSearchResultListTile extends StatelessWidget {
+  const _MessageSearchResultListTile({
+    required this.sender,
+    required this.displayname,
+    required this.event,
+    required this.room,
+  });
+
+  final User sender;
+  final String displayname;
+  final Event event;
+  final Room room;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return ListTile(
+      title: Row(
+        children: [
+          Avatar(mxContent: sender.avatarUrl, name: displayname, size: 16),
+          const SizedBox(width: 8),
+          Text(displayname),
+          Expanded(
+            child: Text(
+              ' | ${event.originServerTs.localizedTimeShort(context)}',
+              style: const TextStyle(fontSize: 12),
+            ),
+          ),
+        ],
+      ),
+      subtitle: Linkify(
+        textScaleFactor: MediaQuery.textScalerOf(context).scale(1),
+        options: const LinkifyOptions(humanize: false),
+        linkStyle: TextStyle(
+          color: theme.colorScheme.primary,
+          decoration: TextDecoration.underline,
+          decorationColor: theme.colorScheme.primary,
+        ),
+        onOpen: (url) => UrlLauncher(context, url.url).launchUrl(),
+        text: event
+            .calcLocalizedBodyFallback(
+              plaintextBody: true,
+              removeMarkdown: true,
+              MatrixLocals(L10n.of(context)),
+            )
+            .trim(),
+        maxLines: 7,
+        overflow: TextOverflow.ellipsis,
+      ),
+      trailing: IconButton(
+        icon: const Icon(Icons.chevron_right_outlined),
+        onPressed: () => context.go(
+          '/${Uri(pathSegments: ['rooms', room.id], queryParameters: {'event': event.eventId})}',
+        ),
+      ),
+    );
+  }
+}

lib/pages/chat_search/chat_search_page.dart

@@ -0,0 +1,143 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/pages/chat_search/chat_search_view.dart';
+import 'package:tatchat/widgets/matrix.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart';
+
+class ChatSearchPage extends StatefulWidget {
+  final String roomId;
+  const ChatSearchPage({required this.roomId, super.key});
+
+  @override
+  ChatSearchController createState() => ChatSearchController();
+}
+
+class ChatSearchController extends State<ChatSearchPage>
+    with SingleTickerProviderStateMixin {
+  Room? get room => Matrix.of(context).client.getRoomById(widget.roomId);
+
+  final TextEditingController searchController = TextEditingController();
+  late final TabController tabController;
+
+  final List<Event> messages = [];
+  final List<Event> images = [];
+  final List<Event> files = [];
+  String? messagesNextBatch, imagesNextBatch, filesNextBatch;
+  bool messagesEndReached = false;
+  bool imagesEndReached = false;
+  bool filesEndReached = false;
+  bool isLoading = false;
+  DateTime? searchedUntil;
+
+  void restartSearch() {
+    setState(() {
+      messages.clear();
+      images.clear();
+      files.clear();
+      messagesNextBatch = imagesNextBatch = filesNextBatch = searchedUntil =
+          null;
+      messagesEndReached = imagesEndReached = filesEndReached = false;
+    });
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      startSearch();
+    });
+  }
+
+  Future<void> startSearch() async {
+    switch (tabController.index) {
+      case 0:
+        final searchQuery = searchController.text.trim();
+        if (searchQuery.isEmpty) return;
+        setState(() {
+          isLoading = true;
+        });
+        final result = await room!.searchEvents(
+          searchTerm: searchController.text.trim(),
+          nextBatch: messagesNextBatch,
+        );
+        setState(() {
+          isLoading = false;
+          messages.addAll(result.events);
+          messagesNextBatch = result.nextBatch;
+          messagesEndReached = result.nextBatch == null;
+          searchedUntil = result.searchedUntil;
+        });
+        return;
+      case 1:
+        setState(() {
+          isLoading = true;
+        });
+        final result = await room!.searchEvents(
+          searchFunc: (event) => {
+            MessageTypes.Image,
+            MessageTypes.Video,
+          }.contains(event.messageType),
+          nextBatch: imagesNextBatch,
+        );
+        setState(() {
+          isLoading = false;
+          images.addAll(result.events);
+          imagesNextBatch = result.nextBatch;
+          imagesEndReached = result.nextBatch == null;
+          searchedUntil = result.searchedUntil;
+        });
+        return;
+      case 2:
+        setState(() {
+          isLoading = true;
+        });
+        final result = await room!.searchEvents(
+          searchFunc: (event) =>
+              event.messageType == MessageTypes.File ||
+              (event.messageType == MessageTypes.Audio &&
+                  !event.content.containsKey('org.matrix.msc3245.voice')),
+          nextBatch: filesNextBatch,
+        );
+        setState(() {
+          isLoading = false;
+          files.addAll(result.events);
+          filesNextBatch = result.nextBatch;
+          filesEndReached = result.nextBatch == null;
+          searchedUntil = result.searchedUntil;
+        });
+        return;
+      default:
+        return;
+    }
+  }
+
+  void _onTabChanged() {
+    switch (tabController.index) {
+      case 1:
+      case 2:
+        startSearch();
+        break;
+      case 0:
+      default:
+        restartSearch();
+        break;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    tabController = TabController(initialIndex: 0, length: 3, vsync: this);
+    tabController.addListener(_onTabChanged);
+  }
+
+  @override
+  void dispose() {
+    tabController.removeListener(_onTabChanged);
+    searchController.dispose();
+    tabController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => ChatSearchView(this);
+}

lib/pages/chat_search/chat_search_view.dart

@@ -0,0 +1,122 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/config/themes.dart';
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/pages/chat_search/chat_search_files_tab.dart';
+import 'package:tatchat/pages/chat_search/chat_search_images_tab.dart';
+import 'package:tatchat/pages/chat_search/chat_search_message_tab.dart';
+import 'package:tatchat/pages/chat_search/chat_search_page.dart';
+import 'package:tatchat/utils/matrix_sdk_extensions/matrix_locals.dart';
+import 'package:tatchat/widgets/layouts/max_width_body.dart';
+import 'package:material_ui/material_ui.dart';
+
+class ChatSearchView extends StatelessWidget {
+  final ChatSearchController controller;
+
+  const ChatSearchView(this.controller, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final room = controller.room;
+    if (room == null) {
+      return Scaffold(
+        appBar: AppBar(title: Text(L10n.of(context).oopsSomethingWentWrong)),
+        body: Center(
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Text(L10n.of(context).youAreNoLongerParticipatingInThisChat),
+          ),
+        ),
+      );
+    }
+
+    final theme = Theme.of(context);
+
+    return Scaffold(
+      appBar: AppBar(
+        leading: const Center(child: BackButton()),
+        titleSpacing: 0,
+        title: Text(
+          L10n.of(context).searchIn(
+            room.getLocalizedDisplayname(MatrixLocals(L10n.of(context))),
+          ),
+        ),
+      ),
+      body: MaxWidthBody(
+        withScrolling: false,
+        child: Column(
+          children: [
+            if (FluffyThemes.isThreeColumnMode(context))
+              const SizedBox(height: 16),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: TextField(
+                controller: controller.searchController,
+                onSubmitted: (_) => controller.restartSearch(),
+                autofocus: true,
+                enabled: controller.tabController.index == 0,
+                decoration: InputDecoration(
+                  hintText: L10n.of(context).search,
+                  prefixIcon: const Icon(Icons.search_outlined),
+                  filled: true,
+                  fillColor: theme.colorScheme.secondaryContainer,
+                  border: OutlineInputBorder(
+                    borderSide: BorderSide.none,
+                    borderRadius: BorderRadius.circular(99),
+                  ),
+                  hintStyle: TextStyle(
+                    color: theme.colorScheme.onPrimaryContainer,
+                    fontWeight: FontWeight.normal,
+                  ),
+                ),
+              ),
+            ),
+            TabBar(
+              controller: controller.tabController,
+              tabs: [
+                Tab(child: Text(L10n.of(context).messages)),
+                Tab(child: Text(L10n.of(context).gallery)),
+                Tab(child: Text(L10n.of(context).files)),
+              ],
+            ),
+            Expanded(
+              child: TabBarView(
+                controller: controller.tabController,
+                children: [
+                  ChatSearchMessageTab(
+                    searchQuery: controller.searchController.text,
+                    room: room,
+                    onStartSearch: controller.startSearch,
+                    events: controller.messages,
+                    endReached: controller.messagesEndReached,
+                    isLoading: controller.isLoading,
+                    searchedUntil: controller.searchedUntil,
+                  ),
+                  ChatSearchImagesTab(
+                    room: room,
+                    onStartSearch: controller.startSearch,
+                    events: controller.images,
+                    endReached: controller.imagesEndReached,
+                    isLoading: controller.isLoading,
+                    searchedUntil: controller.searchedUntil,
+                  ),
+                  ChatSearchFilesTab(
+                    room: room,
+                    onStartSearch: controller.startSearch,
+                    events: controller.files,
+                    endReached: controller.filesEndReached,
+                    isLoading: controller.isLoading,
+                    searchedUntil: controller.searchedUntil,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/chat_search/search_footer.dart

@@ -0,0 +1,72 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/utils/date_time_extension.dart';
+import 'package:material_ui/material_ui.dart';
+
+class SearchFooter extends StatelessWidget {
+  final DateTime? searchedUntil;
+  final bool endReached, isLoading;
+  final void Function() onStartSearch;
+
+  const SearchFooter({
+    super.key,
+    required this.searchedUntil,
+    required this.endReached,
+    required this.isLoading,
+    required this.onStartSearch,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (endReached) {
+      return Center(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Text(L10n.of(context).noMoreResultsFound),
+        ),
+      );
+    }
+    final theme = Theme.of(context);
+    final searchedUntil = this.searchedUntil;
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          mainAxisSize: .min,
+          children: [
+            if (searchedUntil != null)
+              Padding(
+                padding: const EdgeInsets.only(bottom: 8.0),
+                child: Text(
+                  L10n.of(
+                    context,
+                  ).chatSearchedUntil(searchedUntil.localizedTime(context)),
+                  style: TextStyle(fontSize: 10.5),
+                ),
+              ),
+            TextButton.icon(
+              style: TextButton.styleFrom(
+                backgroundColor: theme.colorScheme.secondaryContainer,
+                foregroundColor: theme.colorScheme.onSecondaryContainer,
+              ),
+              onPressed: isLoading ? null : onStartSearch,
+              icon: isLoading
+                  ? SizedBox.square(
+                      dimension: 18,
+                      child: const CircularProgressIndicator.adaptive(
+                        strokeWidth: 2,
+                      ),
+                    )
+                  : const Icon(Icons.arrow_downward_outlined),
+              label: Text(L10n.of(context).searchMore),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}