reorganize and rename widgets

lib/controllers/room_settings_sections.dart

@@ -36,9 +36,9 @@ import "package:nexus/models/join_rule.dart";
 import "package:nexus/models/power_level_permission.dart";
 import "package:nexus/models/setting.dart";
 import "package:nexus/models/settings_category.dart";
-import "package:nexus/widgets/avatar_or_hash.dart";
+import "package:nexus/widgets/avatars/avatar_or_hash.dart";
-import "package:nexus/widgets/divider_text.dart";
+import "package:nexus/widgets/common/divider_text.dart";
-import "package:nexus/widgets/image_pack_avatar.dart";
+import "package:nexus/widgets/avatars/image_pack_avatar.dart";
 import "package:nexus/widgets/settings/add_users_power_level_sheet.dart";
 import "package:nexus/widgets/settings/aliases_sheet.dart";
 import "package:nexus/widgets/settings/allowed_rooms_sheet.dart";

lib/controllers/settings_sections.dart

@@ -35,15 +35,15 @@ import "package:nexus/models/settings.dart";
 import "package:nexus/models/settings_category.dart";
 import "package:nexus/models/show_and_send.dart";
 import "package:nexus/main.dart";
-import "package:nexus/widgets/avatar_or_hash.dart";
+import "package:nexus/widgets/avatars/avatar_or_hash.dart";
-import "package:nexus/widgets/divider_text.dart";
+import "package:nexus/widgets/common/divider_text.dart";
-import "package:nexus/widgets/image_pack_avatar.dart";
+import "package:nexus/widgets/avatars/image_pack_avatar.dart";
 import "package:nexus/widgets/settings/block_user_field.dart";
 import "package:nexus/widgets/settings/dialog_list_tile.dart";
 import "package:nexus/widgets/settings/enable_image_packs_sheet.dart";
 import "package:nexus/widgets/settings/keyword_field.dart";
-import "package:nexus/widgets/user_bottom_sheet.dart";
+import "package:nexus/widgets/users/user_bottom_sheet.dart";
-import "package:nexus/widgets/reset_encryption_sheet.dart";
+import "package:nexus/widgets/encryption/reset_encryption_sheet.dart";
 
 class SettingsSectionsController
     extends AsyncNotifier<IMap<String, IList<SettingsCategory>>> {

lib/helpers/extensions/better_when.dart

@@ -1,7 +1,7 @@
 import "package:flutter/widgets.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
-import "package:nexus/widgets/error_dialog.dart";
+import "package:nexus/widgets/common/error_dialog.dart";
-import "package:nexus/widgets/loading.dart";
+import "package:nexus/widgets/common/loading.dart";
 
 extension BetterWhen<T> on AsyncValue<T> {
   Widget betterWhen({

lib/helpers/extensions/build_event_options.dart

@@ -15,8 +15,8 @@ import "package:nexus/helpers/extensions/event_id_is_fake.dart";
 import "package:nexus/models/content/message.dart";
 import "package:nexus/models/event.dart";
 import "package:nexus/models/relation_type.dart";
-import "package:nexus/widgets/emoji_picker.dart";
+import "package:nexus/widgets/emoji/emoji_picker.dart";
-import "package:nexus/widgets/mxc_emoji.dart";
+import "package:nexus/widgets/emoji/mxc_emoji.dart";
 import "package:nexus/main.dart";
 
 extension BuildEventOptions on Event {

lib/helpers/extensions/image_pack_emoji.dart

@@ -2,7 +2,7 @@ import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:material_emoji_picker/material_emoji_picker.dart";
 import "package:nexus/models/content/image_pack.dart";
 import "package:nexus/models/image_pack.dart";
-import "package:nexus/widgets/mxc_emoji.dart";
+import "package:nexus/widgets/emoji/mxc_emoji.dart";
 
 extension ImagePackEmoji on ImagePack {
   EmojiCategory? get emojiCategory => _category(emoticons);

lib/helpers/extensions/open_link_info.dart

@@ -7,7 +7,7 @@ import "package:nexus/helpers/extensions/focus_room.dart";
 import "package:nexus/helpers/extensions/get_link_info.dart";
 import "package:nexus/helpers/extensions/show_user_popover.dart";
 import "package:nexus/models/room_summary.dart";
-import "package:nexus/widgets/room_summary_sheet.dart";
+import "package:nexus/widgets/rooms/room_summary_sheet.dart";
 
 extension OpenLinkInfo on WidgetRef {
   Future<void> openLinkInfo(

lib/helpers/extensions/room_destinations.dart

@@ -2,7 +2,7 @@ import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:material_ui/material_ui.dart";
 import "package:navigation_rail_m3e/navigation_rail_m3e.dart";
 import "package:nexus/models/room.dart";
-import "package:nexus/widgets/avatar_or_hash.dart";
+import "package:nexus/widgets/avatars/avatar_or_hash.dart";
 
 extension RoomDestination on Room {
   NavigationRailM3EDestination toDestination({

lib/helpers/extensions/show_image_viewer.dart

@@ -5,7 +5,7 @@ import "package:nexus/helpers/extensions/save_attachment.dart";
 import "package:nexus/helpers/extensions/size_to_string.dart";
 import "package:nexus/helpers/mxc_image.dart";
 import "package:nexus/models/requests/download_media.dart";
-import "package:nexus/widgets/error_dialog.dart";
+import "package:nexus/widgets/common/error_dialog.dart";
 
 extension ShowImageViewer on BuildContext {
   /// Shows the image from [request] fullscreen, zoomable.

lib/helpers/extensions/show_user_popover.dart

@@ -1,6 +1,6 @@
 import "package:material_ui/material_ui.dart";
 import "package:material_adaptive_sheets/material_adaptive_sheets.dart";
-import "package:nexus/widgets/user_bottom_sheet.dart";
+import "package:nexus/widgets/users/user_bottom_sheet.dart";
 
 extension ShowUserPopover on BuildContext {
   void showUserPopover(String userId, {String? roomId, Rect? anchor}) =>

lib/main.dart

@@ -22,9 +22,9 @@ import "package:nexus/widgets/pages/select_server.dart";
 import "package:nexus/widgets/pages/settings.dart";
 import "package:nexus/widgets/pages/verify.dart";
 import "package:nexus/widgets/account_scope.dart";
-import "package:nexus/widgets/appbar.dart";
+import "package:nexus/widgets/common/appbar.dart";
-import "package:nexus/widgets/error_dialog.dart";
+import "package:nexus/widgets/common/error_dialog.dart";
-import "package:nexus/widgets/loading.dart";
+import "package:nexus/widgets/common/loading.dart";
 import "package:window_manager/window_manager.dart";
 import "package:material_ui/material_ui.dart";
 

lib/widgets/avatars/avatar_or_hash.dart

@@ -0,0 +1,42 @@
+import "package:color_hash/color_hash.dart";
+import "package:material_ui/material_ui.dart";
+import "package:flutter_riverpod/flutter_riverpod.dart";
+import "package:nexus/helpers/mxc_image.dart";
+
+final class const AvatarOrHash(
+  final Uri? avatar,
+  final String title, {
+  final Widget? fallback,
+  final double dimension = 24,
+  super.key,
+}) extends ConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final box = ColoredBox(
+      color: ColorHash(title).color,
+      child: Center(child: Icon(Icons.person, size: dimension / 2)),
+    );
+
+    return SizedBox(
+      width: dimension,
+      height: dimension,
+      child: Center(
+        child: ClipRRect(
+          borderRadius: .all(.circular((dimension - 8) / 2.5)),
+          child: SizedBox.square(
+            dimension: dimension,
+            child: avatar == null
+                ? fallback ?? box
+                : Image(
+                    image: MxcImage(ref, .new(mxc: avatar!, isAvatar: true)),
+                    fit: .cover,
+                    loadingBuilder: (_, child, loadingProgress) =>
+                        loadingProgress == null ? child : fallback ?? box,
+                    errorBuilder: (_, _, _) => fallback ?? box,
+                  ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/avatars/avatar_ring.dart

@@ -0,0 +1,39 @@
+import "package:material_ui/material_ui.dart";
+
+class const AvatarRing({
+  required final String tooltip,
+  required final VoidCallback onTap,
+  required final Widget child,
+  final double dimension = 24,
+  super.key,
+}) extends StatelessWidget {
+  static const ringWidth = 1.5;
+
+  @override
+  Widget build(BuildContext context) => Tooltip(
+    message: tooltip,
+    child: Container(
+      padding: .all(ringWidth),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        shape: .circle,
+      ),
+      child: ClipOval(
+        child: SizedBox.square(
+          dimension: dimension,
+          child: Stack(
+            fit: .expand,
+            children: [
+              child,
+              // Over the child, so the ripple shows on top of avatars
+              Material(
+                type: .transparency,
+                child: InkWell(onTap: onTap),
+              ),
+            ],
+          ),
+        ),
+      ),
+    ),
+  );
+}

lib/widgets/avatars/editable_avatar.dart

@@ -0,0 +1,86 @@
+import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:material_ui/material_ui.dart";
+import "package:material_adaptive_sheets/material_adaptive_sheets.dart";
+import "package:nexus/controllers/client.dart";
+import "package:nexus/helpers/file_dialog_helper.dart";
+import "package:nexus/helpers/hooks/saving.dart";
+import "package:nexus/main.dart";
+import "package:nexus/models/content/message.dart";
+
+/// Shows [child], an avatar, with a button to upload a new one or remove it.
+class const EditableAvatar({
+  required final Widget child,
+
+  /// Whether there's an avatar to remove.
+  required final bool hasAvatar,
+
+  /// Called with the uploaded image, or null when the avatar is removed.
+  required final Future<void> Function(Uri? url) onChanged,
+  final double dimension = 200,
+  super.key,
+}) extends HookConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final saving = Saving.use();
+    Future<void> save(Future<void> Function() action) =>
+        saving.run(() => action().onError(showError));
+
+    Future<void> pick() async {
+      final file = await ref
+          .read(FileDialogHelper.provider)
+          .pickFile(images: true);
+      if (file == null || !context.mounted) return;
+
+      await save(() async {
+        final content = await ref
+            .read(ClientController.provider.notifier)
+            .uploadMedia(.new(path: file.path, encrypt: false));
+        if (content case ImageMessageContent(:final url)) {
+          await onChanged(url);
+        } else {
+          throw Exception("The file isn't an image");
+        }
+      });
+    }
+
+    return SizedBox.square(
+      dimension: dimension,
+      child: Stack(
+        children: [
+          child,
+          if (saving.active) const Center(child: CircularProgressIndicator()),
+          Positioned(
+            right: dimension * 0.01,
+            bottom: dimension * 0.01,
+            child: Builder(
+              builder: (context) => IconButton.filled(
+                tooltip: "Edit avatar",
+                icon: Icon(Icons.edit),
+                onPressed: saving.active
+                    ? null
+                    : !hasAvatar
+                    ? pick
+                    : () => context.showAdaptiveMenu([
+                        PopupMenuItem(
+                          onTap: pick,
+                          child: ListTile(
+                            leading: Icon(Icons.upload),
+                            title: Text("Upload new avatar"),
+                          ),
+                        ),
+                        PopupMenuItem(
+                          onTap: () => save(() => onChanged(null)),
+                          child: ListTile(
+                            leading: Icon(Icons.delete),
+                            title: Text("Remove avatar"),
+                          ),
+                        ),
+                      ]),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/avatars/image_pack_avatar.dart

@@ -0,0 +1,14 @@
+import "package:material_ui/material_ui.dart";
+import "package:nexus/widgets/emoji/mxc_emoji.dart";
+
+class const ImagePackAvatar(final Uri? icon, {super.key})
+    extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) => SizedBox.square(
+    dimension: 40,
+    child: switch (icon) {
+      final icon? => MxcEmoji(icon),
+      null => Icon(Icons.emoji_emotions),
+    },
+  );
+}

lib/widgets/common/account_switcher.dart

@@ -0,0 +1,133 @@
+import "package:collection/collection.dart";
+import "package:flutter_riverpod/flutter_riverpod.dart";
+import "package:material_ui/material_ui.dart";
+import "package:material_adaptive_sheets/material_adaptive_sheets.dart";
+import "package:nexus/controllers/accounts.dart";
+import "package:nexus/controllers/active_account.dart";
+import "package:nexus/helpers/extensions/log_out.dart";
+import "package:nexus/main.dart";
+import "package:nexus/models/account.dart";
+import "package:nexus/widgets/avatars/avatar_or_hash.dart";
+
+/// Switches between, adds and logs out of accounts. With [onlyWithOthers], it's
+/// hidden when there's only one account.
+class const AccountSwitcher({final bool onlyWithOthers = false, super.key})
+    extends ConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final danger = Theme.of(context).colorScheme.error;
+    final accounts = ref.watch(AccountsController.provider).value;
+    final activeId = ref.watch(ActiveAccountController.provider);
+    if (accounts == null || (onlyWithOthers && accounts.length < 2)) {
+      return const SizedBox.shrink();
+    }
+
+    String nameOf(Account account) =>
+        account.displayName ?? account.userId ?? "New account";
+
+    Widget avatarOf(Account account, double dimension) => AvatarOrHash(
+      account.avatar,
+      nameOf(account),
+      dimension: dimension,
+      fallback: account.userId == null
+          ? Icon(Icons.account_circle, size: dimension)
+          : null,
+    );
+
+    final active = accounts.firstWhereOrNull(
+      (account) => account.id == activeId,
+    );
+
+    void switchTo(String accountId) => ref
+        .read(ActiveAccountController.provider.notifier)
+        .switchTo(accountId)
+        .onError(showError);
+
+    final loggingOut = ref.watch(LogOut.mutation).isPending;
+
+    return AdaptiveMenuButton<void>(
+      tooltip: loggingOut ? "Logging out..." : "Switch account",
+      enabled: !loggingOut,
+      icon: loggingOut
+          ? const SizedBox.square(
+              dimension: 24,
+              child: CircularProgressIndicator(),
+            )
+          : active == null
+          ? const Icon(Icons.account_circle)
+          : avatarOf(active, 28),
+      itemBuilder: (_) => [
+        for (final account in accounts)
+          PopupMenuItem(
+            onTap: () => switchTo(account.id),
+            child: ListTile(
+              selected: account.id == activeId,
+              leading: avatarOf(account, 32),
+              title: Text(nameOf(account)),
+              subtitle: switch (account) {
+                Account(displayName: _?, :final userId?) => Text(userId),
+                _ => null,
+              },
+              trailing: account.userId == null
+                  ? null
+                  // Inside the menu, so it can close it
+                  : Builder(
+                      builder: (menuContext) => IconButton(
+                        tooltip: "Log out",
+                        icon: Icon(Icons.logout, color: danger),
+                        onPressed: () async {
+                          Navigator.of(menuContext).pop();
+
+                          final confirmed = await showDialog<bool>(
+                            context: context,
+                            builder: (dialogContext) => AlertDialog(
+                              title: Text("Log out of ${nameOf(account)}?"),
+                              content: Text(
+                                account.id == activeId
+                                    ? "You'll be switched to another account, or returned to the login page if this is your only one."
+                                    : "You'll stop receiving notifications for this account.",
+                              ),
+                              actions: [
+                                TextButton(
+                                  onPressed: () =>
+                                      Navigator.of(dialogContext).pop(false),
+                                  child: const Text("Cancel"),
+                                ),
+                                TextButton(
+                                  onPressed: () =>
+                                      Navigator.of(dialogContext).pop(true),
+                                  style: TextButton.styleFrom(
+                                    foregroundColor: danger,
+                                  ),
+                                  child: const Text("Log out"),
+                                ),
+                              ],
+                            ),
+                          );
+                          if (confirmed != true) return;
+
+                          await ref.logOut(account.id).onError(showError);
+                        },
+                      ),
+                    ),
+            ),
+          ),
+        const PopupMenuDivider(),
+        PopupMenuItem(
+          onTap: () {
+            final id = DateTime.now().millisecondsSinceEpoch.toString();
+            ref
+                .read(AccountsController.provider.notifier)
+                .save(.new(id: id))
+                .then((_) => switchTo(id))
+                .onError(showError);
+          },
+          child: const ListTile(
+            leading: Icon(Icons.person_add),
+            title: Text("Add account"),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/common/appbar.dart

@@ -0,0 +1,96 @@
+import "dart:io";
+
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:material_ui/material_ui.dart";
+import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:nexus/controllers/settings.dart";
+import "package:window_manager/window_manager.dart";
+
+final class const Appbar({
+  final Widget? leading,
+  final Widget? title,
+  final Color? backgroundColor,
+  final double? scrolledUnderElevation,
+  final IList<Widget> actions = const .empty(),
+  final VoidCallback? onTap,
+
+  /// Whether to show the minimize, maximize and close buttons on desktop.
+  final bool windowControls = true,
+  super.key,
+}) extends ConsumerWidget implements PreferredSizeWidget {
+  @override
+  Size get preferredSize => const .fromHeight(kToolbarHeight);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isDesktop = !(Platform.isAndroid || Platform.isIOS);
+
+    void maximize() {
+      final window = WindowManager.instance.getCurrent();
+      if (window == null) return;
+
+      if (window.isMaximized) {
+        return window.unmaximize();
+      }
+
+      return window.maximize();
+    }
+
+    return GestureDetector(
+      onPanStart: ref
+          .watch(SettingsController.provider)
+          .whenOrNull(
+            data: (settings) => !isDesktop || settings.linuxMobileMode
+                ? null
+                : (_) => WindowManager.instance.getCurrent()?.startDragging(),
+          ),
+      child: AppBar(
+        leading: leading == null ? null : InkWell(onTap: onTap, child: leading),
+        backgroundColor: backgroundColor,
+        scrolledUnderElevation: scrolledUnderElevation,
+        actionsPadding: const .symmetric(horizontal: 8),
+        title: InkWell(
+          onTap: onTap,
+          child: IgnorePointer(child: title),
+        ),
+        flexibleSpace: GestureDetector(
+          onDoubleTap: isDesktop ? maximize : null,
+        ),
+        actions: [
+          ...actions,
+          if (windowControls && isDesktop) ...[
+            if (ref
+                    .watch(SettingsController.provider)
+                    .whenOrNull(
+                      data: (settings) => settings.showMinimizeButton,
+                    ) ??
+                false)
+              IconButton(
+                tooltip: "Minimize window",
+                onPressed: () =>
+                    WindowManager.instance.getCurrent()?.minimize(),
+                icon: const Icon(Icons.minimize),
+              ),
+            if (!Platform.isLinux)
+              IconButton(
+                tooltip: "Maximize window",
+                onPressed: maximize,
+                icon: const Icon(Icons.fullscreen),
+              ),
+            if (ref
+                    .watch(SettingsController.provider)
+                    .whenOrNull(
+                      data: (settings) => !settings.linuxMobileMode,
+                    ) ??
+                true)
+              IconButton(
+                tooltip: "Close window",
+                onPressed: () => exit(0),
+                icon: const Icon(Icons.close),
+              ),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/widgets/common/bouncing_dots.dart

@@ -0,0 +1,41 @@
+import "dart:math";
+
+import "package:flutter_hooks/flutter_hooks.dart";
+import "package:material_ui/material_ui.dart";
+
+/// Three dots that bounce one after another, in a loop.
+class const BouncingDots({required final Color color, super.key})
+    extends HookWidget {
+  @override
+  Widget build(BuildContext context) {
+    final controller = useAnimationController(
+      duration: const .new(milliseconds: 1200),
+    );
+    useEffect(() {
+      controller.repeat();
+      return null;
+    }, []);
+    final progress = useAnimation(controller);
+
+    return Row(
+      mainAxisSize: .min,
+      spacing: 3,
+      children: [0, 1, 2].map((index) {
+        final phase = (progress - index * 0.15) % 1;
+        final bounce = phase < 0.4 ? sin(phase / 0.4 * pi) : 0.0;
+
+        return Transform.translate(
+          offset: .new(0, -3 * bounce),
+          child: Opacity(
+            opacity: 0.4 + 0.6 * bounce,
+            child: Container(
+              width: 6,
+              height: 6,
+              decoration: BoxDecoration(color: color, shape: .circle),
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

lib/widgets/common/count_badge.dart

@@ -0,0 +1,16 @@
+import "package:material_ui/material_ui.dart";
+
+/// Shows [count] in a badge on [child]: nothing if null, a dot if 0, and the
+/// number otherwise.
+class const CountBadge(
+  final int? count, {
+  required final Widget child,
+  super.key,
+}) extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) => switch (count) {
+    null => child,
+    0 => Badge(child: child),
+    final count => Badge.count(count: count, child: child),
+  };
+}

lib/widgets/common/divider_text.dart

@@ -0,0 +1,9 @@
+import "package:material_ui/material_ui.dart";
+import "package:nexus/widgets/common/divider_widget.dart";
+
+final class const DividerText(final String text, {super.key})
+    extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) =>
+      DividerWidget(Text(text, style: Theme.of(context).textTheme.labelLarge));
+}

lib/widgets/common/divider_widget.dart

@@ -0,0 +1,23 @@
+import "package:material_ui/material_ui.dart";
+
+final class const DividerWidget(final Widget widget, {super.key})
+    extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) => LayoutBuilder(
+    builder: (_, constraints) => Row(
+      children: [
+        SizedBox(
+          width: 16,
+          child: Divider(color: Theme.of(context).colorScheme.onSurface),
+        ),
+        ConstrainedBox(
+          constraints: .new(maxWidth: constraints.maxWidth - 32),
+          child: Padding(padding: const .all(8), child: widget),
+        ),
+        Expanded(
+          child: Divider(color: Theme.of(context).colorScheme.onSurface),
+        ),
+      ],
+    ),
+  );
+}