♻️ New post explore realm design

assets/translations/en-US.json

@@ -768,5 +768,6 @@
   "decrypting": "Decrypting……",
   "decryptingKeyNotFound": "Key not found or exchange failed, the other party may not be online",
   "messageUnablePreview": "Unable preview",
-  "messageUnablePreviewEncrypted": "Unable preview encrypted message"
+  "messageUnablePreviewEncrypted": "Unable preview encrypted message",
+  "postViewInGlobalDescription": "Do not view the post in the specific realm."
 }

assets/translations/zh-CN.json

@@ -766,5 +766,6 @@
   "decrypting": "解密中……",
   "decryptingKeyNotFound": "未找到密钥对或交换失败，对方可能不在线",
   "messageUnablePreview": "无法预览消息",
-  "messageUnablePreviewEncrypted": "无法预览加密消息"
+  "messageUnablePreviewEncrypted": "无法预览加密消息",
+  "postViewInGlobalDescription": "不查看特定领域的帖子。"
 }

assets/translations/zh-HK.json

@@ -137,6 +137,11 @@
   "publisherRunBy": "由 {} 管理",
   "fieldPublisherBelongToRealm": "所屬領域",
   "fieldPublisherBelongToRealmUnset": "未設置發佈者所屬領域",
+  "writePost": "撰寫",
+  "postTypeStory": "動態",
+  "postTypeArticle": "文章",
+  "postTypeQuestion": "問題",
+  "postTypeVideo": "視頻",
   "writePostTypeStory": "發動態",
   "writePostTypeArticle": "寫文章",
   "writePostTypeQuestion": "提問題",
@@ -761,5 +766,6 @@
   "decrypting": "解密中……",
   "decryptingKeyNotFound": "未找到密鑰對或交換失敗，對方可能不在線",
   "messageUnablePreview": "無法預覽消息",
-  "messageUnablePreviewEncrypted": "無法預覽加密消息"
+  "messageUnablePreviewEncrypted": "無法預覽加密消息",
+  "postViewInGlobalDescription": "不查看特定領域的帖子。"
 }

assets/translations/zh-TW.json

@@ -137,6 +137,11 @@
   "publisherRunBy": "由 {} 管理",
   "fieldPublisherBelongToRealm": "所屬領域",
   "fieldPublisherBelongToRealmUnset": "未設置發佈者所屬領域",
+  "writePost": "撰寫",
+  "postTypeStory": "動態",
+  "postTypeArticle": "文章",
+  "postTypeQuestion": "問題",
+  "postTypeVideo": "視頻",
   "writePostTypeStory": "發動態",
   "writePostTypeArticle": "寫文章",
   "writePostTypeQuestion": "提問題",
@@ -761,5 +766,6 @@
   "decrypting": "解密中……",
   "decryptingKeyNotFound": "未找到密鑰對或交換失敗，對方可能不在線",
   "messageUnablePreview": "無法預覽消息",
-  "messageUnablePreviewEncrypted": "無法預覽加密消息"
+  "messageUnablePreviewEncrypted": "無法預覽加密消息",
+  "postViewInGlobalDescription": "不查看特定領域的帖子。"
 }

lib/screens/explore.dart

@@ -1,4 +1,3 @@
-import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';
@@ -19,6 +18,9 @@ import 'package:surface/widgets/navigation/app_scaffold.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:very_good_infinite_list/very_good_infinite_list.dart';
 
+const kPostChannels = ['Global', 'Friends', 'Following'];
+const kPostChannelIcons = [Symbols.globe, Symbols.group, Symbols.subscriptions];
+
 const Map<String, IconData> kCategoryIcons = {
   'technology': Symbols.tools_wrench,
   'gaming': Symbols.gamepad,
@@ -39,17 +41,17 @@ class ExploreScreen extends StatefulWidget {
   State<ExploreScreen> createState() => _ExploreScreenState();
 }
 
-// You know what? I'm not going to make this a global variable.
-// Cuz the global key make the selected category not update to child widget when the category is changed.
-SnPostCategory? _selectedCategory;
-
 class _ExploreScreenState extends State<ExploreScreen>
-    with SingleTickerProviderStateMixin {
-  late final TabController _tabController =
-      TabController(length: 4, vsync: this);
+    with TickerProviderStateMixin {
+  late TabController _tabController = TabController(
+    length: kPostChannels.length,
+    vsync: this,
+  );
 
   final _fabKey = GlobalKey<ExpandableFabState>();
-  final _listKeys = List.generate(4, (_) => GlobalKey<_PostListWidgetState>());
+  final _listKey = GlobalKey<_PostListWidgetState>();
+
+  bool _showCategories = false;
 
   final List<SnPostCategory> _categories = List.empty(growable: true);
 
@@ -69,14 +71,64 @@ class _ExploreScreenState extends State<ExploreScreen>
     }
   }
 
-  void _clearFilter() {
-    _selectedCategory = null;
+  final List<SnRealm> _realms = List.empty(growable: true);
+
+  Future<void> _fetchRealms() async {
+    try {
+      final rels = context.read<SnRealmProvider>();
+      final out = await rels.listAvailableRealms();
+      setState(() {
+        _realms.addAll(out);
+      });
+    } catch (err) {
+      if (!mounted) return;
+      context.showErrorDialog(err);
+      rethrow;
+    }
+  }
+
+  void _toggleShowCategories() {
+    _showCategories = !_showCategories;
+    if (_showCategories) {
+      _tabController = TabController(length: _categories.length, vsync: this);
+    } else {
+      _tabController = TabController(length: kPostChannels.length, vsync: this);
+    }
+    _tabListen();
+    setState(() {});
+  }
+
+  void _tabListen() {
+    _tabController.addListener(() {
+      if (_tabController.indexIsChanging) {
+        if (_showCategories) {
+          _listKey.currentState?.setCategory(_categories[_tabController.index]);
+          _listKey.currentState?.refreshPosts();
+          return;
+        }
+        switch (_tabController.index) {
+          case 0:
+          case 3:
+            _listKey.currentState?.setChannel(null);
+            break;
+          case 1:
+            _listKey.currentState?.setChannel('friends');
+            break;
+          case 2:
+            _listKey.currentState?.setChannel('following');
+            break;
+        }
+        _listKey.currentState?.refreshPosts();
+      }
+    });
   }
 
   @override
   void initState() {
-    _fetchCategories();
     super.initState();
+    _tabListen();
+    _fetchCategories();
+    _fetchRealms();
   }
 
   @override
@@ -86,7 +138,7 @@ class _ExploreScreenState extends State<ExploreScreen>
   }
 
   Future<void> refreshPosts() async {
-    await _listKeys[_tabController.index].currentState?.refreshPosts();
+    await _listKey.currentState?.refreshPosts();
   }
 
   @override
@@ -149,25 +201,62 @@ class _ExploreScreenState extends State<ExploreScreen>
               handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
               sliver: SliverAppBar(
                 leading: AutoAppBarLeading(),
-                title: Text('screenExplore').tr(),
+                titleSpacing: 0,
+                title: Row(
+                  children: [
+                    IconButton(
+                      padding: EdgeInsets.zero,
+                      constraints: const BoxConstraints(),
+                      visualDensity: VisualDensity.compact,
+                      icon: _listKey.currentState?.realm != null
+                          ? AccountImage(
+                              content: _listKey.currentState!.realm!.avatar,
+                              radius: 14,
+                            )
+                          : const Icon(Symbols.group),
+                      onPressed: () {
+                        showModalBottomSheet(
+                          context: context,
+                          builder: (context) => _PostListRealmPopup(
+                            realms: _realms,
+                            onUpdate: (realm) {
+                              _listKey.currentState?.setRealm(realm);
+                              _listKey.currentState?.refreshPosts();
+                              Future.delayed(const Duration(milliseconds: 100),
+                                  () {
+                                if (mounted) {
+                                  setState(() {});
+                                }
+                              });
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                    Expanded(
+                      child: Center(
+                        child: Text('screenExplore').tr(),
+                      ),
+                    ),
+                  ],
+                ),
                 floating: true,
                 snap: true,
                 actions: [
                   IconButton(
                     icon: const Icon(Symbols.category),
+                    style: _showCategories
+                        ? ButtonStyle(
+                            foregroundColor: WidgetStateProperty.all(
+                              Theme.of(context).colorScheme.primary,
+                            ),
+                            backgroundColor: MaterialStateProperty.all(
+                              Theme.of(context).colorScheme.secondaryContainer,
+                            ),
+                          )
+                        : null,
                     onPressed: () {
-                      showModalBottomSheet(
-                        context: context,
-                        builder: (context) => _PostCategoryPickerPopup(
-                          categories: _categories,
-                          selected: _selectedCategory,
-                        ),
-                      ).then((value) {
-                        if (value != null && context.mounted) {
-                          _selectedCategory = value == false ? null : value;
-                          refreshPosts();
-                        }
-                      });
+                      _toggleShowCategories();
                     },
                   ),
                   IconButton(
@@ -179,122 +268,74 @@ class _ExploreScreenState extends State<ExploreScreen>
                   const Gap(8),
                 ],
                 bottom: TabBar(
+                  isScrollable: _showCategories,
                   controller: _tabController,
-                  tabs: [
-                    Tab(
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.center,
-                        children: [
-                          Icon(Symbols.globe,
-                              size: 20,
-                              color: Theme.of(context)
-                                  .appBarTheme
-                                  .foregroundColor),
-                          const Gap(8),
-                          Flexible(
-                            child: Text(
-                              'postChannelGlobal',
-                              maxLines: 1,
-                            ).tr().textColor(
-                                Theme.of(context).appBarTheme.foregroundColor),
-                          ),
+                  tabs: _showCategories
+                      ? [
+                          for (final category in _categories)
+                            Tab(
+                              child: Row(
+                                mainAxisSize: MainAxisSize.min,
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: [
+                                  Icon(
+                                      kCategoryIcons[category.alias] ??
+                                          Symbols.question_mark,
+                                      color: Theme.of(context)
+                                          .appBarTheme
+                                          .foregroundColor!),
+                                  const Gap(8),
+                                  Flexible(
+                                    child: Text(
+                                      'postCategory${category.alias.capitalize()}'
+                                              .trExists()
+                                          ? 'postCategory${category.alias.capitalize()}'
+                                              .tr()
+                                          : category.name,
+                                      maxLines: 1,
+                                    ).textColor(Theme.of(context)
+                                        .appBarTheme
+                                        .foregroundColor!),
+                                  ),
+                                ],
+                              ),
+                            ),
+                        ]
+                      : [
+                          for (final channel in kPostChannels)
+                            Tab(
+                              child: Row(
+                                mainAxisSize: MainAxisSize.min,
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: [
+                                  Icon(
+                                    kPostChannelIcons[
+                                        kPostChannels.indexOf(channel)],
+                                    size: 20,
+                                    color: Theme.of(context)
+                                        .appBarTheme
+                                        .foregroundColor,
+                                  ),
+                                  const Gap(8),
+                                  Flexible(
+                                    child: Text(
+                                      'postChannel$channel',
+                                      maxLines: 1,
+                                    ).tr().textColor(Theme.of(context)
+                                        .appBarTheme
+                                        .foregroundColor),
+                                  ),
+                                ],
+                              ),
+                            ),
                         ],
-                      ),
-                    ),
-                    Tab(
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.center,
-                        children: [
-                          Icon(Symbols.group,
-                              size: 20,
-                              color: Theme.of(context)
-                                  .appBarTheme
-                                  .foregroundColor),
-                          const Gap(8),
-                          Flexible(
-                            child: Text(
-                              'postChannelFriends',
-                              maxLines: 1,
-                              textAlign: TextAlign.center,
-                            ).tr().textColor(
-                                Theme.of(context).appBarTheme.foregroundColor),
-                          ),
-                        ],
-                      ),
-                    ),
-                    Tab(
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.center,
-                        children: [
-                          Icon(Symbols.subscriptions,
-                              size: 20,
-                              color: Theme.of(context)
-                                  .appBarTheme
-                                  .foregroundColor),
-                          const Gap(8),
-                          Flexible(
-                            child: Text(
-                              'postChannelFollowing',
-                              maxLines: 1,
-                            ).tr().textColor(
-                                Theme.of(context).appBarTheme.foregroundColor),
-                          ),
-                        ],
-                      ),
-                    ),
-                    Tab(
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.center,
-                        children: [
-                          Icon(Symbols.workspaces,
-                              size: 20,
-                              color: Theme.of(context)
-                                  .appBarTheme
-                                  .foregroundColor),
-                          const Gap(8),
-                          Flexible(
-                            child: Text(
-                              'postChannelRealm',
-                              maxLines: 1,
-                            ).tr().textColor(
-                                Theme.of(context).appBarTheme.foregroundColor),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ],
                 ),
               ),
             ),
           ];
         },
-        body: TabBarView(
-          controller: _tabController,
-          children: [
-            _PostListWidget(
-              key: _listKeys[0],
-              onClearFilter: _clearFilter,
-            ),
-            _PostListWidget(
-              key: _listKeys[1],
-              channel: 'friends',
-              onClearFilter: _clearFilter,
-            ),
-            _PostListWidget(
-              key: _listKeys[2],
-              channel: 'following',
-              onClearFilter: _clearFilter,
-            ),
-            _PostListWidget(
-              key: _listKeys[3],
-              withRealm: true,
-              onClearFilter: _clearFilter,
-            ),
-          ],
+        body: _PostListWidget(
+          key: _listKey,
         ),
       ),
     );
@@ -302,15 +343,7 @@ class _ExploreScreenState extends State<ExploreScreen>
 }
 
 class _PostListWidget extends StatefulWidget {
-  final String? channel;
-  final bool withRealm;
-  final Function onClearFilter;
-
-  const _PostListWidget(
-      {super.key,
-      this.channel,
-      this.withRealm = false,
-      required this.onClearFilter});
+  const _PostListWidget({super.key});
 
   @override
   State<_PostListWidget> createState() => _PostListWidgetState();
@@ -319,25 +352,13 @@ class _PostListWidget extends StatefulWidget {
 class _PostListWidgetState extends State<_PostListWidget> {
   bool _isBusy = false;
 
-  final List<SnPost> _posts = List.empty(growable: true);
-  final List<SnRealm> _realms = List.empty(growable: true);
-  SnRealm? _selectedRealm;
-  int? _postCount;
+  SnRealm? get realm => _selectedRealm;
 
-  Future<void> _fetchRealms() async {
-    try {
-      final rels = context.read<SnRealmProvider>();
-      final out = await rels.listAvailableRealms();
-      setState(() {
-        _realms.addAll(out);
-        _selectedRealm = out.firstOrNull;
-      });
-    } catch (err) {
-      if (!mounted) return;
-      context.showErrorDialog(err);
-      rethrow;
-    }
-  }
+  final List<SnPost> _posts = List.empty(growable: true);
+  SnRealm? _selectedRealm;
+  String? _selectedChannel;
+  SnPostCategory? _selectedCategory;
+  int? _postCount;
 
   Future<void> _fetchPosts() async {
     if (_postCount != null && _posts.length >= _postCount!) return;
@@ -349,7 +370,7 @@ class _PostListWidgetState extends State<_PostListWidget> {
       take: 10,
       offset: _posts.length,
       categories: _selectedCategory != null ? [_selectedCategory!.alias] : null,
-      channel: widget.channel,
+      channel: _selectedChannel,
       realm: _selectedRealm?.alias,
     );
     final out = result.$1;
@@ -362,6 +383,21 @@ class _PostListWidgetState extends State<_PostListWidget> {
     if (mounted) setState(() => _isBusy = false);
   }
 
+  void setChannel(String? channel) {
+    _selectedChannel = channel;
+    setState(() {});
+  }
+
+  void setRealm(SnRealm? realm) {
+    _selectedRealm = realm;
+    setState(() {});
+  }
+
+  void setCategory(SnPostCategory? category) {
+    _selectedCategory = category;
+    setState(() {});
+  }
+
   Future<void> refreshPosts() {
     _postCount = null;
     _posts.clear();
@@ -371,13 +407,7 @@ class _PostListWidgetState extends State<_PostListWidget> {
   @override
   void initState() {
     super.initState();
-    if (widget.withRealm) {
-      _fetchRealms().then((_) {
-        _fetchPosts();
-      });
-    } else {
-      _fetchPosts();
-    }
+    _fetchPosts();
   }
 
   @override
@@ -400,52 +430,13 @@ class _PostListWidgetState extends State<_PostListWidget> {
               IconButton(
                 icon: const Icon(Symbols.clear),
                 onPressed: () {
-                  widget.onClearFilter.call();
+                  setState(() => _selectedCategory = null);
                   refreshPosts();
                 },
               ),
             ],
             padding: const EdgeInsets.only(left: 20, right: 4),
           ),
-        if (widget.withRealm)
-          DropdownButtonHideUnderline(
-            child: DropdownButton2<SnRealm>(
-              isExpanded: true,
-              items: _realms
-                  .map(
-                    (ele) => DropdownMenuItem<SnRealm>(
-                      value: ele,
-                      child: Row(
-                        children: [
-                          AccountImage(
-                            content: ele.avatar,
-                            fallbackWidget: const Icon(Symbols.group, size: 16),
-                            radius: 14,
-                          ),
-                          const Gap(8),
-                          Text(
-                            ele.name,
-                            style: Theme.of(context).textTheme.bodyMedium,
-                          ),
-                        ],
-                      ),
-                    ),
-                  )
-                  .toList(),
-              value: _selectedRealm,
-              onChanged: (SnRealm? value) {
-                setState(() => _selectedRealm = value);
-                refreshPosts();
-              },
-              buttonStyleData: const ButtonStyleData(
-                padding: EdgeInsets.only(left: 4, right: 12),
-              ),
-              menuItemStyleData: const MenuItemStyleData(
-                height: 48,
-              ),
-            ),
-          ),
-        if (widget.withRealm) const Divider(height: 1),
         Expanded(
           child: MediaQuery.removePadding(
             context: context,
@@ -454,6 +445,7 @@ class _PostListWidgetState extends State<_PostListWidget> {
               displacement: 40 + MediaQuery.of(context).padding.top,
               onRefresh: () => refreshPosts(),
               child: InfiniteList(
+                padding: EdgeInsets.only(top: 8),
                 itemCount: _posts.length,
                 isLoading: _isBusy,
                 centerLoading: true,
@@ -475,18 +467,21 @@ class _PostListWidgetState extends State<_PostListWidget> {
                 separatorBuilder: (_, __) => const Gap(8),
               ),
             ),
-          ).padding(top: 8),
+          ),
         ),
       ],
     );
   }
 }
 
-class _PostCategoryPickerPopup extends StatelessWidget {
-  final List<SnPostCategory> categories;
-  final SnPostCategory? selected;
+class _PostListRealmPopup extends StatelessWidget {
+  final List<SnRealm>? realms;
+  final Function(SnRealm?) onUpdate;
 
-  const _PostCategoryPickerPopup({required this.categories, this.selected});
+  const _PostListRealmPopup({
+    required this.realms,
+    required this.onUpdate,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -496,62 +491,38 @@ class _PostCategoryPickerPopup extends StatelessWidget {
         Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const Icon(Symbols.category, size: 24),
+            const Icon(Symbols.face, size: 24),
             const Gap(16),
-            Text('postCategory')
-                .tr()
-                .textStyle(Theme.of(context).textTheme.titleLarge!),
+            Text('accountRealms', style: Theme.of(context).textTheme.titleLarge)
+                .tr(),
           ],
         ).padding(horizontal: 20, top: 16, bottom: 12),
         ListTile(
-          leading: const Icon(Symbols.clear),
-          title: Text('postFilterReset').tr(),
-          subtitle: Text('postFilterResetDescription').tr(),
-          contentPadding: const EdgeInsets.symmetric(horizontal: 20),
+          leading: const Icon(Symbols.close),
+          title: Text('postInGlobal').tr(),
+          subtitle: Text('postViewInGlobalDescription').tr(),
+          contentPadding: const EdgeInsets.symmetric(horizontal: 24),
           onTap: () {
-            Navigator.pop(context, false);
+            onUpdate.call(null);
+            Navigator.pop(context);
           },
         ),
         const Divider(height: 1),
         Expanded(
-          child: GridView.count(
-            crossAxisCount: 4,
-            shrinkWrap: true,
-            physics: const NeverScrollableScrollPhysics(),
-            childAspectRatio: 1,
-            children: categories
-                .map(
-                  (ele) => InkWell(
-                    onTap: () {
-                      _selectedCategory = ele;
-                      Navigator.pop(context, ele);
-                    },
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Icon(
-                          kCategoryIcons[ele.alias] ?? Symbols.question_mark,
-                          color: selected == ele
-                              ? Theme.of(context).colorScheme.primary
-                              : null,
-                        ),
-                        const Gap(4),
-                        Text(
-                          'postCategory${ele.alias.capitalize()}'.trExists()
-                              ? 'postCategory${ele.alias.capitalize()}'.tr()
-                              : ele.name,
-                        )
-                            .textStyle(Theme.of(context).textTheme.titleMedium!)
-                            .textColor(selected == ele
-                                ? Theme.of(context).colorScheme.primary
-                                : null),
-                      ],
-                    ),
-                  ),
-                )
-                .toList(),
+          child: ListView.builder(
+            itemCount: realms?.length ?? 0,
+            itemBuilder: (context, idx) {
+              final realm = realms![idx];
+              return ListTile(
+                title: Text(realm.name),
+                subtitle: Text('@${realm.alias}'),
+                leading: AccountImage(content: realm.avatar, radius: 18),
+                onTap: () {
+                  onUpdate.call(realm);
+                  Navigator.pop(context);
+                },
+              );
+            },
           ),
         ),
       ],