13 changed files with 507 additions and 563 deletions
--- a/assets/locales/en_us.json
+++ b/assets/locales/en_us.json
@ -463,8 +463,5 @@
  "friendAdd": "Add as friend",
  "blockUser": "Block user",
  "unblockUser": "Unblock user",
-  "learnMoreAboutPerson": "Learn more about that person",
-  "global": "Global",
-  "all": "All",
-  "unablePreview": "Unable to preview"
+  "learnMoreAboutPerson": "Learn more about that person"
 }
--- a/assets/locales/zh_cn.json
+++ b/assets/locales/zh_cn.json
@ -459,8 +459,5 @@
  "friendAdd": "添加好友",
  "blockUser": "屏蔽用户",
  "unblockUser": "解除屏蔽用户",
-  "learnMoreAboutPerson": "了解关于 TA 的更多",
-  "global": "全局",
-  "all": "全部",
-  "unablePreview": "无法预览"
+  "learnMoreAboutPerson": "了解关于 TA 的更多"
 }
--- a/lib/providers/content/channel.dart
+++ b/lib/providers/content/channel.dart
@ -24,7 +24,8 @@ class ChannelProvider extends GetxController {
    final resp = await listAvailableChannel();
    isLoading.value = false;

-    availableChannels.value = await listAvailableChannel();
+    availableChannels.value =
+        resp.body.map((x) => Channel.fromJson(x)).toList().cast<Channel>();
    availableChannels.refresh();
  }

@ -88,22 +89,18 @@ class ChannelProvider extends GetxController {
    return resp;
  }

-  Future<List<Channel>> listAvailableChannel({
-    String scope = 'global',
-    bool isDirect = false,
-  }) async {
+  Future<Response> listAvailableChannel({String scope = 'global'}) async {
    final AuthProvider auth = Get.find();
    if (auth.isAuthorized.isFalse) throw const UnauthorizedException();

    final client = await auth.configureClient('messaging');

-    final resp =
-        await client.get('/channels/$scope/me/available?direct=$isDirect');
+    final resp = await client.get('/channels/$scope/me/available');
    if (resp.statusCode != 200) {
      throw RequestException(resp);
    }

-    return List.from(resp.body.map((x) => Channel.fromJson(x)));
+    return resp;
  }

  Future<Response> createChannel(String scope, dynamic payload) async {
--- a/lib/providers/database/services/messages.dart
+++ b/lib/providers/database/services/messages.dart
@ -1,6 +1,3 @@
-import 'dart:convert';
-
-import 'package:collection/collection.dart';
 import 'package:drift/drift.dart';
 import 'package:get/get.dart' hide Value;
 import 'package:solian/exceptions/request.dart';
@ -185,26 +182,4 @@ class MessagesFetchingProvider extends GetxController {
          ..orderBy([(t) => OrderingTerm.desc(t.id)]))
        .getSingleOrNull();
  }
-
-  Future<Map<int, List<LocalMessageEventTableData>>>
-      getLastInAllChannels() async {
-    final database = Get.find<DatabaseProvider>().database;
-    final rows = await database.customSelect('''
-    SELECT id, channel_id, data, created_at
-    FROM ${database.localMessageEventTable.actualTableName}
-    WHERE (channel_id, created_at) IN (
-      SELECT channel_id, MAX(created_at)
-      FROM ${database.localMessageEventTable.actualTableName}
-      GROUP BY channel_id
-    )
-    ''', readsFrom: {database.localMessageEventTable}).get();
-    return rows.map((row) {
-      return LocalMessageEventTableData(
-        id: row.read<int>('id'),
-        channelId: row.read<int>('channel_id'),
-        data: Event.fromJson(jsonDecode(row.read<String>('data'))),
-        createdAt: row.read<DateTime>('created_at'),
-      );
-    }).groupListsBy((x) => x.channelId);
-  }
 }
--- a/lib/screens/chat.dart
+++ b/lib/screens/chat.dart
@ -1,24 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
-import 'package:gap/gap.dart';
 import 'package:get/get.dart';
-import 'package:solian/controllers/chat_events_controller.dart';
 import 'package:solian/exts.dart';
-import 'package:solian/models/channel.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/content/channel.dart';
-import 'package:solian/providers/content/realm.dart';
-import 'package:solian/providers/database/database.dart';
 import 'package:solian/router.dart';
 import 'package:solian/screens/account/notification.dart';
 import 'package:solian/theme.dart';
-import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/account/signin_required_overlay.dart';
 import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/channel/channel_list.dart';
 import 'package:solian/widgets/chat/call/chat_call_indicator.dart';
 import 'package:solian/widgets/current_state_action.dart';
+import 'package:solian/widgets/sized_container.dart';

 class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});
@ -28,97 +23,28 @@ class ChatScreen extends StatefulWidget {
 }

 class _ChatScreenState extends State<ChatScreen> {
-  List<Channel> _normalChannels = List.empty();
-  List<Channel> _directChannels = List.empty();
-  final Map<String, List<Channel>> _realmChannels = {};
-
-  late final ChannelProvider _channels = Get.find();
-
-  List<Channel> _sortChannels(List<Channel> channels) {
-    channels.sort(
-      (a, b) =>
-          _lastMessages?[b.id]?.createdAt.compareTo(
-                _lastMessages?[a.id]?.createdAt ??
-                    DateTime.fromMillisecondsSinceEpoch(0),
-              ) ??
-          0,
-    );
-    return channels;
-  }
-
-  Future<void> _loadNormalChannels() async {
-    final resp = await _channels.listAvailableChannel(isDirect: false);
-    setState(() {
-      _normalChannels = _sortChannels(resp);
-    });
-  }
-
-  Future<void> _loadDirectChannels() async {
-    final resp = await _channels.listAvailableChannel(isDirect: true);
-    setState(() {
-      _directChannels = _sortChannels(resp);
-    });
-  }
-
-  Future<void> _loadRealmChannels(String realm) async {
-    final resp = await _channels.listAvailableChannel(scope: realm);
-    setState(() {
-      _realmChannels[realm] = _sortChannels(List.from(resp));
-    });
-  }
-
-  Future<void> _loadAllChannels() async {
-    final RealmProvider realms = Get.find();
-    Future.wait([
-      _loadNormalChannels(),
-      _loadDirectChannels(),
-      ...realms.availableRealms.map((x) => _loadRealmChannels(x.alias)),
-    ]);
-  }
-
-  Map<int, LocalMessageEventTableData>? _lastMessages;
-
-  Future<void> _loadLastMessages() async {
-    final ctrl = ChatEventController();
-    await ctrl.initialize();
-    final messages = await ctrl.src.getLastInAllChannels();
-    setState(() {
-      _lastMessages = messages
-          .map((k, v) => MapEntry(k, v.firstOrNull))
-          .cast<int, LocalMessageEventTableData>();
-    });
-  }
+  late final ChannelProvider _channels;

  @override
  void initState() {
    super.initState();
-    _loadLastMessages().then((_) {
-      _loadAllChannels();
-    });
+    try {
+      _channels = Get.find();
+      _channels.refreshAvailableChannel();
+    } catch (e) {
+      context.showErrorDialog(e);
+    }
  }

  @override
  Widget build(BuildContext context) {
    final AuthProvider auth = Get.find();
-    final RealmProvider realms = Get.find();

-    return Obx(
-      () => DefaultTabController(
-        length: 2 + realms.availableRealms.length,
-        child: Material(
+    return Material(
      color: Theme.of(context).colorScheme.surface,
      child: Scaffold(
        appBar: AppBar(
-              leading: Obx(() {
-                final adaptive = AppBarLeadingButton.adaptive(context);
-                if (adaptive != null) return adaptive;
-                if (_channels.isLoading.value) {
-                  return const CircularProgressIndicator(
-                    strokeWidth: 3,
-                  ).paddingAll(18);
-                }
-                return const SizedBox.shrink();
-              }),
+          leading: AppBarLeadingButton.adaptive(context),
          title: AppBarTitle('chat'.tr),
          centerTitle: true,
          toolbarHeight: AppTheme.toolbarHeight(context),
@ -132,8 +58,7 @@ class _ChatScreenState extends State<ChatScreen> {
                  child: ListTile(
                    title: Text('channelOrganizeCommon'.tr),
                    leading: const Icon(Icons.tag),
-                        contentPadding:
-                            const EdgeInsets.symmetric(horizontal: 8),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 8),
                  ),
                  onTap: () {
                    AppRouter.instance.pushNamed('channelOrganizing').then(
@ -152,8 +77,7 @@ class _ChatScreenState extends State<ChatScreen> {
                      FontAwesomeIcons.userGroup,
                      size: 16,
                    ),
-                        contentPadding:
-                            const EdgeInsets.symmetric(horizontal: 8),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 8),
                  ),
                  onTap: () {
                    final ChannelProvider channels = Get.find();
@ -174,70 +98,11 @@ class _ChatScreenState extends State<ChatScreen> {
              width: AppTheme.isLargeScreen(context) ? 8 : 16,
            ),
          ],
-              bottom: TabBar(
-                isScrollable: true,
-                dividerColor: Theme.of(context).dividerColor.withOpacity(0.1),
-                tabAlignment: TabAlignment.startOffset,
-                tabs: [
-                  Tab(
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        CircleAvatar(
-                          radius: 14,
-                          backgroundColor:
-                              Theme.of(context).colorScheme.primary,
-                          child: const Icon(
-                            Icons.forum,
-                            size: 16,
-                            color: Colors.white,
-                          ),
-                        ),
-                        const Gap(8),
-                        Text('all'.tr),
-                      ],
-                    ),
-                  ),
-                  Tab(
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        const CircleAvatar(
-                          radius: 14,
-                          child: Icon(
-                            Icons.chat_bubble,
-                            size: 16,
-                          ),
-                        ),
-                        const Gap(8),
-                        Text('channelTypeDirect'.tr),
-                      ],
-                    ),
-                  ),
-                  ...realms.availableRealms.map((x) => Tab(
-                        child: Row(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            AccountAvatar(
-                              content: x.avatar,
-                              radius: 14,
-                              fallbackWidget: const Icon(
-                                Icons.workspaces,
-                                size: 16,
-                              ),
-                            ),
-                            const Gap(8),
-                            Text(x.name),
-                          ],
-                        ),
-                      )),
-                ],
-              ),
        ),
        body: Obx(() {
          if (auth.isAuthorized.isFalse) {
            return SigninRequiredOverlay(
-                  onDone: () => _loadAllChannels(),
+              onDone: () => _channels.refreshAvailableChannel(),
            );
          }

@ -245,49 +110,37 @@ class _ChatScreenState extends State<ChatScreen> {

          return Column(
            children: [
+              Obx(() {
+                if (_channels.isLoading.isFalse) {
+                  return const SizedBox.shrink();
+                } else {
+                  return const LinearProgressIndicator();
+                }
+              }),
              const ChatCallCurrentIndicator(),
              Expanded(
-                    child: TabBarView(
-                      children: [
-                        RefreshIndicator(
-                          onRefresh: _loadNormalChannels,
-                          child: ChannelListWidget(
-                            channels: _sortChannels([
-                              ..._normalChannels,
-                              ..._directChannels,
-                              ..._realmChannels.values.expand((x) => x),
+                child: CenteredContainer(
+                  child: RefreshIndicator(
+                    onRefresh: _channels.refreshAvailableChannel,
+                    child: Obx(
+                      () => ChannelListWidget(
+                        noCategory: true,
+                        channels: List.from([
+                          ..._channels.groupChannels
+                              .where((x) => x.realmId == null),
+                          ..._channels.directChannels
                        ]),
                        selfId: selfId,
                        useReplace: false,
                      ),
                    ),
-                        RefreshIndicator(
-                          onRefresh: _loadDirectChannels,
-                          child: ChannelListWidget(
-                            channels: _directChannels,
-                            selfId: selfId,
-                            useReplace: false,
                  ),
                ),
-                        ...realms.availableRealms.map(
-                          (x) => RefreshIndicator(
-                            onRefresh: () => _loadRealmChannels(x.alias),
-                            child: ChannelListWidget(
-                              channels: _realmChannels[x.alias] ?? [],
-                              selfId: selfId,
-                              useReplace: false,
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
              ),
            ],
          );
        }),
      ),
-        ),
-      ),
    );
  }
 }
--- a/lib/screens/explore.dart
+++ b/lib/screens/explore.dart
@ -10,9 +10,9 @@ import 'package:solian/router.dart';
 import 'package:solian/screens/account/notification.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/signin_required_overlay.dart';
+import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/current_state_action.dart';
 import 'package:solian/widgets/app_bar_leading.dart';
-import 'package:solian/widgets/navigation/realm_switcher.dart';
 import 'package:solian/widgets/posts/post_shuffle_swiper.dart';
 import 'package:solian/widgets/posts/post_warped_list.dart';

@ -55,6 +55,7 @@ class _ExploreScreenState extends State<ExploreScreen>
  @override
  Widget build(BuildContext context) {
    final AuthProvider auth = Get.find();
+    final NavigationStateProvider navState = Get.find();

    return Material(
      color: Theme.of(context).colorScheme.surface,
@ -81,14 +82,8 @@ class _ExploreScreenState extends State<ExploreScreen>
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(
-                flexibleSpace: SizedBox(
-                  height: 48,
-                  child: const Row(
-                    children: [
-                      RealmSwitcher(),
-                    ],
-                  ).paddingSymmetric(horizontal: 8),
-                ).paddingOnly(top: MediaQuery.of(context).padding.top),
+                title: AppBarTitle('explore'.tr),
+                centerTitle: true,
                floating: true,
                toolbarHeight: AppTheme.toolbarHeight(context),
                leading: AppBarLeadingButton.adaptive(context),
@ -101,7 +96,6 @@ class _ExploreScreenState extends State<ExploreScreen>
                ],
                bottom: TabBar(
                  controller: _tabController,
-                  dividerColor: Theme.of(context).dividerColor.withOpacity(0.1),
                  tabs: [
                    Tab(text: 'postListNews'.tr),
                    Tab(text: 'postListFriends'.tr),
@ -120,6 +114,16 @@ class _ExploreScreenState extends State<ExploreScreen>

            return Column(
              children: [
+                if (navState.focusedRealm.value != null)
+                  MaterialBanner(
+                    leading: const Icon(Icons.layers),
+                    content: Text(
+                      'postBrowsingIn'.trParams({
+                        'region': '#${navState.focusedRealm.value!.alias}',
+                      }),
+                    ),
+                    actions: const [SizedBox.shrink()],
+                  ),
                Expanded(
                  child: TabBarView(
                    physics: const NeverScrollableScrollPhysics(),
--- a/lib/screens/realms/realm_view.dart
+++ b/lib/screens/realms/realm_view.dart
@ -68,7 +68,12 @@ class _RealmViewScreenState extends State<RealmViewScreen> {
      _channels.addAll(
        resp.body.map((e) => Channel.fromJson(e)).toList().cast<Channel>(),
      );
-      _channels.addAll(availableResp);
+      _channels.addAll(
+        availableResp.body
+            .map((e) => Channel.fromJson(e))
+            .toList()
+            .cast<Channel>(),
+      );
      _channels.retainWhere((x) => channelIdx.add(x.id));
    });

@ -255,6 +260,7 @@ class RealmChannelListWidget extends StatelessWidget {
            child: ChannelListWidget(
              channels: channels,
              selfId: auth.userProfile.value!['id'],
+              noCategory: true,
            ),
          )
        ],
--- a/lib/widgets/account/account_avatar.dart
+++ b/lib/widgets/account/account_avatar.dart
@ -7,7 +7,6 @@ class AccountAvatar extends StatelessWidget {
  final Color? bgColor;
  final Color? feColor;
  final double? radius;
-  final Widget? fallbackWidget;

  const AccountAvatar({
    super.key,
@ -15,7 +14,6 @@ class AccountAvatar extends StatelessWidget {
    this.bgColor,
    this.feColor,
    this.radius,
-    this.fallbackWidget,
  });

  @override
@ -37,12 +35,11 @@ class AccountAvatar extends StatelessWidget {
      backgroundColor: bgColor,
      backgroundImage: !isEmpty ? AutoCacheImage.provider(url) : null,
      child: isEmpty
-          ? (fallbackWidget ??
-              Icon(
+          ? Icon(
              Icons.account_circle,
              size: radius != null ? radius! * 1.2 : 24,
              color: feColor,
-              ))
+            )
          : null,
    );
  }
--- a/lib/widgets/channel/channel_list.dart
+++ b/lib/widgets/channel/channel_list.dart
@ -4,18 +4,18 @@ import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:gap/gap.dart';
 import 'package:get/get.dart';
-import 'package:intl/intl.dart';
 import 'package:solian/controllers/chat_events_controller.dart';
 import 'package:solian/models/channel.dart';
 import 'package:solian/platform.dart';
-import 'package:solian/providers/database/database.dart';
 import 'package:solian/router.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
-import 'package:badges/badges.dart' as badges;

 class ChannelListWidget extends StatefulWidget {
  final List<Channel> channels;
  final int selfId;
+  final bool isDense;
+  final bool isCollapsed;
+  final bool noCategory;
  final bool useReplace;
  final Function(Channel)? onSelected;

@ -23,6 +23,9 @@ class ChannelListWidget extends StatefulWidget {
    super.key,
    required this.channels,
    required this.selfId,
+    this.isDense = false,
+    this.isCollapsed = false,
+    this.noCategory = false,
    this.useReplace = false,
    this.onSelected,
  });
@ -32,25 +35,43 @@ class ChannelListWidget extends StatefulWidget {
 }

 class _ChannelListWidgetState extends State<ChannelListWidget> {
-  Map<int, LocalMessageEventTableData>? _lastMessages;
+  final List<Channel> _globalChannels = List.empty(growable: true);
+  final Map<String, List<Channel>> _inRealms = {};

  final ChatEventController _eventController = ChatEventController();

-  Future<void> _loadLastMessages() async {
-    final messages = await _eventController.src.getLastInAllChannels();
-    setState(() {
-      _lastMessages = messages
-          .map((k, v) => MapEntry(k, v.firstOrNull))
-          .cast<int, LocalMessageEventTableData>();
-    });
+  void _mapChannels() {
+    _inRealms.clear();
+    _globalChannels.clear();
+
+    if (widget.noCategory) {
+      _globalChannels.addAll(widget.channels);
+      return;
+    }
+
+    for (final channel in widget.channels) {
+      if (channel.realmId != null) {
+        if (_inRealms[channel.realm!.alias] == null) {
+          _inRealms[channel.realm!.alias] = List.empty(growable: true);
+        }
+        _inRealms[channel.realm!.alias]!.add(channel);
+      } else {
+        _globalChannels.add(channel);
+      }
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant ChannelListWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    setState(() => _mapChannels());
  }

  @override
  void initState() {
    super.initState();
-    _eventController.initialize().then((_) {
-      _loadLastMessages();
-    });
+    _mapChannels();
+    _eventController.initialize();
  }

  void _gotoChannel(Channel item) {
@ -77,129 +98,39 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
    }
  }

-  Widget _buildTitle(Channel item, ChannelMember? otherside) {
-    if (otherside != null) {
-      return Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Expanded(child: Text(otherside.account.nick)),
-          if (_lastMessages != null && _lastMessages![item.id] != null)
-            Text(
-              DateFormat('MM/dd').format(
-                _lastMessages![item.id]!.createdAt.toLocal(),
-              ),
-              style: TextStyle(
-                fontSize: 12,
-                color:
-                    Theme.of(context).colorScheme.onSurface.withOpacity(0.75),
-              ),
-            ),
-        ],
-      );
-    }
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        Expanded(child: Text(item.name)),
-        if (_lastMessages != null && _lastMessages![item.id] != null)
-          Text(
-            DateFormat('MM/dd').format(
-              _lastMessages![item.id]!.createdAt.toLocal(),
-            ),
-            style: TextStyle(
-              fontSize: 12,
-              color: Theme.of(context).colorScheme.onSurface.withOpacity(0.75),
-            ),
-          ),
-      ],
-    );
-  }
-
-  Widget _buildSubtitle(Channel item, ChannelMember? otherside) {
+  Widget _buildDirectMessageDescription(Channel item, ChannelMember otherside) {
    if (PlatformInfo.isWeb) {
-      return otherside != null
-          ? Text(
-              'channelDirectDescription'.trParams(
+      return Text('channelDirectDescription'.trParams(
        {'username': '@${otherside.account.name}'},
-              ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            )
-          : Text(
-              item.description,
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            );
+      ));
    }

-    return AnimatedSwitcher(
-      switchInCurve: Curves.easeIn,
-      switchOutCurve: Curves.easeOut,
-      transitionBuilder: (child, animation) {
-        return FadeTransition(opacity: animation, child: child);
-      },
-      duration: const Duration(milliseconds: 300),
-      child: (_lastMessages == null || _lastMessages![item.id] == null)
-          ? Builder(
-              builder: (context) {
-                return otherside != null
-                    ? Text(
-                        'channelDirectDescription'.trParams(
+    return FutureBuilder(
+      future: Future.delayed(
+        const Duration(milliseconds: 500),
+        () => _eventController.src.getLastInChannel(item),
+      ),
+      builder: (context, snapshot) {
+        if (!snapshot.hasData && snapshot.data == null) {
+          return Text('channelDirectDescription'.trParams(
            {'username': '@${otherside.account.name}'},
-                        ),
+          ));
+        }
+
+        final data = snapshot.data!.data!;
+        return Text(
+          '${data.sender.account.nick}: ${data.body['text'] ?? 'Unsupported message to preview'}',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
-                      )
-                    : Text(
-                        item.description,
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                      );
-              },
-            )
-          : Builder(
-              builder: (context) {
-                final data = _lastMessages![item.id]!.data!;
-                return Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: [
-                    if (item.type == 0)
-                      Badge(
-                        label: Text(data.sender.account.nick),
-                        backgroundColor:
-                            Theme.of(context).colorScheme.secondaryContainer,
-                        textColor:
-                            Theme.of(context).colorScheme.onSecondaryContainer,
-                      ),
-                    if (item.type == 0) const Gap(6),
-                    if (data.body['text'] != null)
-                      Expanded(
-                        child: Text(
-                          data.body['text'],
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                      )
-                    else
-                      Badge(label: Text('unablePreview'.tr)),
-                  ],
-                );
-              },
-            ),
-      layoutBuilder: (currentChild, previousChildren) {
-        return Stack(
-          alignment: Alignment.centerLeft,
-          children: <Widget>[
-            ...previousChildren,
-            if (currentChild != null) currentChild,
-          ],
        );
      },
    );
  }

  Widget _buildEntry(Channel item) {
-    const padding = EdgeInsets.symmetric(horizontal: 20);
+    final padding = widget.isDense
+        ? const EdgeInsets.symmetric(horizontal: 20)
+        : const EdgeInsets.symmetric(horizontal: 16);

    final otherside =
        item.members!.where((e) => e.account.id != widget.selfId).firstOrNull;
@ -207,53 +138,67 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
    if (item.type == 1 && otherside != null) {
      final avatar = AccountAvatar(
        content: otherside.account.avatar,
-        radius: 20,
+        radius: widget.isDense ? 12 : 20,
        bgColor: Theme.of(context).colorScheme.primary,
        feColor: Theme.of(context).colorScheme.onPrimary,
      );

+      if (widget.isCollapsed) {
+        return Tooltip(
+          message: otherside.account.nick,
+          child: InkWell(
+            child: avatar.paddingSymmetric(vertical: 12),
+            onTap: () => _gotoChannel(item),
+          ),
+        );
+      }
+
      return ListTile(
        leading: avatar,
        contentPadding: padding,
-        title: _buildTitle(item, otherside),
-        subtitle: _buildSubtitle(item, otherside),
+        title: Text(otherside.account.nick),
+        subtitle: !widget.isDense
+            ? _buildDirectMessageDescription(item, otherside)
+            : null,
        onTap: () => _gotoChannel(item),
      );
    } else {
      final avatar = CircleAvatar(
-        backgroundColor: Theme.of(context).colorScheme.primary,
-        radius: 20,
+        backgroundColor: item.realmId == null
+            ? Theme.of(context).colorScheme.primary
+            : Colors.transparent,
+        radius: widget.isDense ? 12 : 20,
        child: FaIcon(
          FontAwesomeIcons.hashtag,
-          color: Theme.of(context).colorScheme.onPrimary,
-          size: 16,
+          color: item.realmId == null
+              ? Theme.of(context).colorScheme.onPrimary
+              : Theme.of(context).colorScheme.primary,
+          size: widget.isDense ? 12 : 16,
        ),
      );

+      if (widget.isCollapsed) {
+        return Tooltip(
+          message: item.name,
+          child: InkWell(
+            child: avatar.paddingSymmetric(vertical: 12),
+            onTap: () => _gotoChannel(item),
+          ),
+        );
+      }
+
      return ListTile(
-        minTileHeight: null,
-        leading: item.realmId == null
-            ? avatar
-            : badges.Badge(
-                position: badges.BadgePosition.bottomEnd(bottom: -4, end: -6),
-                badgeStyle: badges.BadgeStyle(
-                  badgeColor: Theme.of(context).colorScheme.secondaryContainer,
-                  padding: const EdgeInsets.all(2),
-                  elevation: 8,
-                ),
-                badgeContent: AccountAvatar(
-                  content: item.realm?.avatar,
-                  radius: 10,
-                  fallbackWidget: const Icon(
-                    Icons.workspaces,
-                    size: 16,
-                  ),
-                ),
-                child: avatar,
-              ),
+        minTileHeight: widget.isDense ? 48 : null,
+        leading: avatar,
        contentPadding: padding,
-        title: _buildTitle(item, null),
-        subtitle: _buildSubtitle(item, null),
+        title: Text(item.name),
+        subtitle: !widget.isDense
+            ? Text(
+                item.description,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              )
+            : null,
        onTap: () => _gotoChannel(item),
      );
    }
@ -261,12 +206,13 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {

  @override
  Widget build(BuildContext context) {
+    if (widget.noCategory) {
      return CustomScrollView(
        slivers: [
          SliverList.builder(
-          itemCount: widget.channels.length,
+            itemCount: _globalChannels.length,
            itemBuilder: (context, index) {
-            final element = widget.channels[index];
+              final element = _globalChannels[index];
              return _buildEntry(element);
            },
          ),
@ -274,4 +220,36 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
        ],
      );
    }
+
+    return CustomScrollView(
+      slivers: [
+        SliverList.builder(
+          itemCount: _globalChannels.length,
+          itemBuilder: (context, index) {
+            final element = _globalChannels[index];
+            return _buildEntry(element);
+          },
+        ),
+        SliverList.list(
+          children: _inRealms.entries.map((element) {
+            return ExpansionTile(
+              tilePadding: const EdgeInsets.only(left: 20, right: 24),
+              minTileHeight: 48,
+              title: Text(element.value.first.realm!.name),
+              leading: CircleAvatar(
+                backgroundColor: Colors.teal,
+                radius: widget.isDense ? 12 : 24,
+                child: Icon(
+                  Icons.workspaces,
+                  color: Colors.white,
+                  size: widget.isDense ? 12 : 16,
+                ),
+              ),
+              children: element.value.map((x) => _buildEntry(x)).toList(),
+            );
+          }).toList(),
+        ),
+      ],
+    );
+  }
 }
--- a/lib/widgets/navigation/app_navigation.dart
+++ b/lib/widgets/navigation/app_navigation.dart
@ -14,16 +14,16 @@ abstract class AppNavigation {
      label: 'explore'.tr,
      page: 'explore',
    ),
-    AppNavigationDestination(
-      icon: const Icon(Icons.forum),
-      label: 'chat'.tr,
-      page: 'chat',
-    ),
    AppNavigationDestination(
      icon: const Icon(Icons.workspaces),
      label: 'realms'.tr,
      page: 'realms',
    ),
+    AppNavigationDestination(
+      icon: const Icon(Icons.forum),
+      label: 'chat'.tr,
+      page: 'chat',
+    ),
    AppNavigationDestination(
      icon: const AppAccountWidget(),
      label: 'account'.tr,
--- a/lib/widgets/navigation/app_navigation_region.dart
+++ b/lib/widgets/navigation/app_navigation_region.dart
@ -0,0 +1,230 @@
+import 'package:animations/animations.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/models/realm.dart';
+import 'package:solian/providers/auth.dart';
+import 'package:solian/providers/content/channel.dart';
+import 'package:solian/providers/content/realm.dart';
+import 'package:solian/providers/navigation.dart';
+import 'package:solian/services.dart';
+import 'package:solian/widgets/account/account_avatar.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
+import 'package:solian/widgets/channel/channel_list.dart';
+
+class AppNavigationRegion extends StatefulWidget {
+  final bool isCollapsed;
+  final Function onSelected;
+
+  const AppNavigationRegion({
+    super.key,
+    this.isCollapsed = false,
+    required this.onSelected,
+  });
+
+  @override
+  State<AppNavigationRegion> createState() => _AppNavigationRegionState();
+}
+
+class _AppNavigationRegionState extends State<AppNavigationRegion> {
+  bool _isTryingExit = false;
+
+  void _focusRealm(Realm item) {
+    setState(
+      () => Get.find<NavigationStateProvider>().focusedRealm.value = item,
+    );
+  }
+
+  void _unFocusRealm() {
+    setState(
+      () => Get.find<NavigationStateProvider>().focusedRealm.value = null,
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  Widget _buildRealmFocusAvatar() {
+    final focusedRealm = Get.find<NavigationStateProvider>().focusedRealm.value;
+    return GestureDetector(
+      child: MouseRegion(
+        child: AnimatedSwitcher(
+          switchInCurve: Curves.fastOutSlowIn,
+          switchOutCurve: Curves.fastOutSlowIn,
+          duration: const Duration(milliseconds: 300),
+          transitionBuilder: (child, animation) {
+            return ScaleTransition(
+              scale: animation,
+              child: child,
+            );
+          },
+          child: _isTryingExit
+              ? CircleAvatar(
+                  backgroundColor: Theme.of(context).colorScheme.primary,
+                  child: const Icon(
+                    Icons.arrow_back,
+                    color: Colors.white,
+                    size: 16,
+                  ),
+                ).paddingSymmetric(
+                  vertical: 8,
+                )
+              : _buildEntryAvatar(focusedRealm!),
+        ),
+        onEnter: (_) => setState(() => _isTryingExit = true),
+        onExit: (_) => setState(() => _isTryingExit = false),
+      ),
+      onTap: () => _unFocusRealm(),
+    );
+  }
+
+  Widget _buildEntryAvatar(Realm item) {
+    return Hero(
+      tag: Key('region-realm-avatar-${item.id}'),
+      child: (item.avatar?.isNotEmpty ?? false)
+          ? AccountAvatar(content: item.avatar)
+          : CircleAvatar(
+              backgroundColor: Theme.of(context).colorScheme.primary,
+              child: const Icon(
+                Icons.workspaces,
+                color: Colors.white,
+                size: 16,
+              ),
+            ).paddingSymmetric(
+              vertical: 8,
+            ),
+    );
+  }
+
+  Widget _buildEntry(BuildContext context, Realm item) {
+    const padding = EdgeInsets.symmetric(horizontal: 20, vertical: 8);
+
+    if (widget.isCollapsed) {
+      return InkWell(
+        child: _buildEntryAvatar(item).paddingSymmetric(vertical: 8),
+        onTap: () => _focusRealm(item),
+      );
+    }
+
+    return ListTile(
+      minTileHeight: 0,
+      leading: _buildEntryAvatar(item),
+      contentPadding: padding,
+      title: Text(item.name),
+      subtitle: Text(
+        item.description,
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      onTap: () => _focusRealm(item),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final RealmProvider realms = Get.find();
+    final ChannelProvider channels = Get.find();
+    final AuthProvider auth = Get.find();
+    final NavigationStateProvider navState = Get.find();
+
+    return Obx(
+      () => PageTransitionSwitcher(
+        transitionBuilder: (child, animation, secondaryAnimation) {
+          return SharedAxisTransition(
+            animation: animation,
+            secondaryAnimation: secondaryAnimation,
+            transitionType: SharedAxisTransitionType.horizontal,
+            child: Material(
+              color: Theme.of(context).colorScheme.surface,
+              child: child,
+            ),
+          );
+        },
+        child: navState.focusedRealm.value == null
+            ? widget.isCollapsed
+                ? CustomScrollView(
+                    slivers: [
+                      const SliverPadding(padding: EdgeInsets.only(top: 16)),
+                      SliverList.builder(
+                        itemCount: realms.availableRealms.length,
+                        itemBuilder: (context, index) {
+                          final element = realms.availableRealms[index];
+                          return Tooltip(
+                            message: element.name,
+                            child: _buildEntry(context, element),
+                          );
+                        },
+                      ),
+                    ],
+                  )
+                : CustomScrollView(
+                    slivers: [
+                      SliverList.builder(
+                        itemCount: realms.availableRealms.length,
+                        itemBuilder: (context, index) {
+                          final element = realms.availableRealms[index];
+                          return _buildEntry(context, element);
+                        },
+                      ),
+                    ],
+                  )
+            : Column(
+                children: [
+                  if (!widget.isCollapsed &&
+                      (navState.focusedRealm.value!.banner?.isNotEmpty ??
+                          false))
+                    AspectRatio(
+                      aspectRatio: 16 / 7,
+                      child: AutoCacheImage(
+                        ServiceFinder.buildUrl(
+                          'uc',
+                          '/attachments/${navState.focusedRealm.value!.banner}',
+                        ),
+                        fit: BoxFit.cover,
+                      ),
+                    ),
+                  if (widget.isCollapsed)
+                    Tooltip(
+                      message: navState.focusedRealm.value!.name,
+                      child: _buildRealmFocusAvatar().paddingOnly(
+                        top: 24,
+                        bottom: 8,
+                      ),
+                    )
+                  else
+                    ListTile(
+                      minTileHeight: 0,
+                      tileColor:
+                          Theme.of(context).colorScheme.surfaceContainerLow,
+                      leading: _buildRealmFocusAvatar(),
+                      contentPadding: const EdgeInsets.symmetric(
+                          horizontal: 20, vertical: 8),
+                      title: Text(navState.focusedRealm.value!.name),
+                      subtitle: Text(
+                        navState.focusedRealm.value!.description,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  Expanded(
+                    child: Obx(
+                      () => ChannelListWidget(
+                        useReplace: true,
+                        channels: channels.availableChannels
+                            .where((x) =>
+                                x.realm?.id == navState.focusedRealm.value?.id)
+                            .toList(),
+                        isCollapsed: widget.isCollapsed,
+                        selfId: auth.userProfile.value!['id'],
+                        noCategory: true,
+                        onSelected: (_) => widget.onSelected(),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+      ),
+    );
+  }
+}
--- a/lib/widgets/navigation/realm_switcher.dart
+++ b/lib/widgets/navigation/realm_switcher.dart
@ -1,89 +0,0 @@
-import 'package:dropdown_button2/dropdown_button2.dart';
-import 'package:flutter/material.dart';
-import 'package:gap/gap.dart';
-import 'package:get/get.dart';
-import 'package:solian/models/realm.dart';
-import 'package:solian/providers/content/realm.dart';
-import 'package:solian/providers/navigation.dart';
-import 'package:solian/widgets/account/account_avatar.dart';
-
-class RealmSwitcher extends StatelessWidget {
-  const RealmSwitcher({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    final realms = Get.find<RealmProvider>();
-    final navState = Get.find<NavigationStateProvider>();
-
-    return Obx(() {
-      return DropdownButtonHideUnderline(
-        child: DropdownButton2<Realm?>(
-          isExpanded: true,
-          hint: Text(
-            'Select Item',
-            style: TextStyle(
-              fontSize: 14,
-              color: Theme.of(context).hintColor,
-            ),
-          ),
-          items: [null, ...realms.availableRealms]
-              .map((Realm? item) => DropdownMenuItem<Realm?>(
-                    value: item,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      children: [
-                        if (item != null)
-                          AccountAvatar(
-                            content: item.avatar,
-                            radius: 14,
-                            fallbackWidget: const Icon(
-                              Icons.workspaces,
-                              size: 16,
-                            ),
-                          )
-                        else
-                          CircleAvatar(
-                            backgroundColor:
-                                Theme.of(context).colorScheme.primary,
-                            radius: 14,
-                            child: const Icon(
-                              Icons.public,
-                              color: Colors.white,
-                              size: 16,
-                            ),
-                          ),
-                        const Gap(8),
-                        Expanded(
-                          child: Text(
-                            item?.name ?? 'global'.tr,
-                            style: const TextStyle(
-                              fontSize: 14,
-                            ),
-                            maxLines: 2,
-                            overflow: TextOverflow.ellipsis,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ))
-              .toList(),
-          value: navState.focusedRealm.value,
-          onChanged: (Realm? value) {
-            navState.focusedRealm.value = value;
-          },
-          buttonStyleData: const ButtonStyleData(
-            padding: EdgeInsets.symmetric(horizontal: 16),
-            height: 48,
-            width: 200,
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(16)),
-            ),
-          ),
-          menuItemStyleData: const MenuItemStyleData(
-            height: 48,
-          ),
-        ),
-      );
-    });
-  }
-}
--- a/lib/widgets/posts/editor/post_editor_thumbnail.dart
+++ b/lib/widgets/posts/editor/post_editor_thumbnail.dart
@ -29,7 +29,7 @@ class _PostEditorThumbnailDialogState extends State<PostEditorThumbnailDialog> {
            _attachmentController.text = value.toString();
          });

-          widget.controller.thumbnail.value = value.isEmpty ? null : value;
+          widget.controller.thumbnail.value = value;
        },
        initialAttachments: const [],
        onRemove: (_) {},
@ -91,8 +91,7 @@ class _PostEditorThumbnailDialogState extends State<PostEditorThumbnailDialog> {
      actions: [
        TextButton(
          onPressed: () {
-            final text = _attachmentController.text;
-            widget.controller.thumbnail.value = text.isEmpty ? null : text;
+            widget.controller.thumbnail.value = _attachmentController.text;
            Navigator.pop(context);
          },
          child: Text('confirm'.tr),