💄 Optimized connection indicator

assets/translations/en-US.json

@@ -215,8 +215,9 @@
   "sensitiveContentCollapsed": "Sensitive content has been collapsed.",
   "sensitiveContentDescription": "This content has been marked as sensitive, and may not be suitable for all viewers.",
   "sensitiveContentReveal": "Reveal",
-  "serverConnecting": "Connecting to server...",
-  "serverDisconnected": "Lost connection from server",
+  "serverConnecting": "Connecting...",
+  "serverDisconnected": "Connection Lost",
+  "serverConnected": "Connected",
   "fieldChatAlias": "Channel Alias",
   "fieldChatAliasHint": "The unique channel alias within the site, used to represent the channel in URL, leave blank to auto generate. Should be URL-Safe.",
   "fieldChatName": "Name",

assets/translations/zh-CN.json

@@ -213,8 +213,9 @@
   "sensitiveContentCollapsed": "敏感内容已折叠。",
   "sensitiveContentDescription": "此内容已被标记，可能不适合所有人查看。",
   "sensitiveContentReveal": "显示内容",
-  "serverConnecting": "正在连接服务器…",
-  "serverDisconnected": "已与服务器断开连接",
+  "serverConnecting": "正在连接…",
+  "serverDisconnected": "已断开连接",
+  "serverConnected": "已连接",
   "fieldChatAlias": "频道别名",
   "fieldChatAliasHint": "全站范围内唯一的频道别名，用于在 URL 中表示该频道，留空则自动生成。应遵循 URL-Safe 的原则。",
   "fieldChatName": "名称",

lib/screens/explore.dart

@@ -1,3 +1,4 @@
+import 'package:animations/animations.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';
@@ -8,6 +9,7 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/post.dart';
 import 'package:surface/providers/sn_network.dart';
+import 'package:surface/screens/post/post_detail.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/app_bar_leading.dart';
 import 'package:surface/widgets/dialog.dart';
@@ -210,6 +212,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
                 ),
               ),
             ),
+            const SliverGap(8),
             SliverInfiniteList(
               itemCount: _posts.length,
               isLoading: _isBusy,
@@ -218,47 +221,36 @@ class _ExploreScreenState extends State<ExploreScreen> {
               onFetchData: _fetchPosts,
               itemBuilder: (context, idx) {
                 return Center(
-                  child: Container(
-                    decoration: BoxDecoration(
-                      border: Border(
-                        left: BorderSide(
-                          color: Theme.of(context).dividerColor,
-                          width: 1 / MediaQuery.of(context).devicePixelRatio,
-                        ),
-                        right: BorderSide(
-                          color: Theme.of(context).dividerColor,
-                          width: 1 / MediaQuery.of(context).devicePixelRatio,
-                        ),
+                  child: OpenContainer(
+                    closedBuilder: (_, __) => Container(
+                      constraints: const BoxConstraints(maxWidth: 640),
+                      child: PostItem(
+                        data: _posts[idx],
+                        maxWidth: 640,
+                        onChanged: (data) {
+                          setState(() => _posts[idx] = data);
+                        },
+                        onDeleted: () {
+                          _refreshPosts();
+                        },
                       ),
                     ),
-                    constraints: const BoxConstraints(maxWidth: 640),
-                    child: Column(
-                      children: [
-                        GestureDetector(
-                          child: PostItem(
-                            data: _posts[idx],
-                            maxWidth: 640,
-                            onChanged: (data) {
-                              setState(() => _posts[idx] = data);
-                            },
-                            onDeleted: () {
-                              _refreshPosts();
-                            },
-                          ),
-                          onTap: () {
-                            GoRouter.of(context).pushNamed(
-                              'postDetail',
-                              pathParameters: {'slug': _posts[idx].id.toString()},
-                              extra: _posts[idx],
-                            );
-                          },
-                        ),
-                        const Divider(height: 1),
-                      ],
+                    openBuilder: (_, close) => PostDetailScreen(
+                      slug: _posts[idx].id.toString(),
+                      preload: _posts[idx],
+                      onBack: close,
+                    ),
+                    openColor: Colors.transparent,
+                    openElevation: 0,
+                    closedColor: Theme.of(context).colorScheme.surface,
+                    transitionType: ContainerTransitionType.fade,
+                    closedShape: const RoundedRectangleBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(8)),
                     ),
                   ),
                 );
               },
+              separatorBuilder: (_, __) => const Gap(8),
             ),
           ],
         ),

lib/screens/post/post_detail.dart

@@ -13,6 +13,7 @@ import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/loading_indicator.dart';
+import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/post/post_comment_list.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:surface/widgets/post/post_mini_editor.dart';
@@ -20,12 +21,9 @@ import 'package:surface/widgets/post/post_mini_editor.dart';
 class PostDetailScreen extends StatefulWidget {
   final String slug;
   final SnPost? preload;
+  final Function? onBack;
 
-  const PostDetailScreen({
-    super.key,
-    required this.slug,
-    this.preload,
-  });
+  const PostDetailScreen({super.key, required this.slug, this.preload, this.onBack});
 
   @override
   State<PostDetailScreen> createState() => _PostDetailScreenState();
@@ -67,123 +65,129 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
     final ua = context.watch<UserProvider>();
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
-    return Scaffold(
-      appBar: AppBar(
-        leading: BackButton(
-          onPressed: () {
-            if (GoRouter.of(context).canPop()) {
-              GoRouter.of(context).pop(context);
-              return;
-            }
-            GoRouter.of(context).replaceNamed('explore');
-          },
-        ),
-        title: _data?.body['title'] != null
-            ? RichText(
-                textAlign: TextAlign.center,
-                text: TextSpan(children: [
-                  TextSpan(
-                    text: _data?.body['title'] ?? 'postNoun'.tr(),
-                    style: Theme.of(context).textTheme.titleLarge!.copyWith(
-                          color: Theme.of(context).appBarTheme.foregroundColor!,
-                        ),
-                  ),
-                  const TextSpan(text: '\n'),
-                  TextSpan(
-                    text: 'postDetail'.tr(),
-                    style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                          color: Theme.of(context).appBarTheme.foregroundColor!,
-                        ),
-                  ),
-                ]),
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-              )
-            : Text('postDetail').tr(),
-      ),
-      body: CustomScrollView(
-        slivers: [
-          SliverToBoxAdapter(
-            child: LoadingIndicator(isActive: _isBusy),
+    return AppBackground(
+      isRoot: widget.onBack != null,
+      child: Scaffold(
+        appBar: AppBar(
+          leading: BackButton(
+            onPressed: () {
+              if (widget.onBack != null) {
+                widget.onBack!.call();
+              }
+              if (GoRouter.of(context).canPop()) {
+                GoRouter.of(context).pop(context);
+                return;
+              }
+              GoRouter.of(context).replaceNamed('explore');
+            },
           ),
-          if (_data != null)
-            SliverToBoxAdapter(
-              child: PostItem(
-                data: _data!,
-                maxWidth: 640,
-                showComments: false,
-                showFullPost: true,
-                onChanged: (data) {
-                  setState(() => _data = data);
-                },
-                onDeleted: () {
-                  Navigator.pop(context);
-                },
-              ),
-            ),
-          const SliverToBoxAdapter(child: Divider(height: 1)),
-          if (_data != null)
-            SliverToBoxAdapter(
-              child: Container(
-                constraints: const BoxConstraints(maxWidth: 640),
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: [
-                    const Icon(Symbols.comment, size: 24),
-                    const Gap(16),
-                    Text('postCommentsDetailed')
-                        .plural(_data!.metric.replyCount)
-                        .textStyle(Theme.of(context).textTheme.titleLarge!),
-                  ],
-                ).padding(horizontal: 20, vertical: 12).center(),
-              ),
-            ),
-          if (_data != null && ua.isAuthorized)
-            SliverToBoxAdapter(
-              child: Container(
-                height: 240,
-                constraints: const BoxConstraints(maxWidth: 640),
-                margin:
-                    ResponsiveBreakpoints.of(context).largerThan(MOBILE) ? const EdgeInsets.all(8) : EdgeInsets.zero,
-                decoration: BoxDecoration(
-                  borderRadius: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
-                      ? const BorderRadius.all(Radius.circular(8))
-                      : BorderRadius.zero,
-                  border: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
-                      ? Border.all(
-                          color: Theme.of(context).dividerColor,
-                          width: 1 / devicePixelRatio,
-                        )
-                      : Border.symmetric(
-                          horizontal: BorderSide(
-                            color: Theme.of(context).dividerColor,
-                            width: 1 / devicePixelRatio,
+          title: _data?.body['title'] != null
+              ? RichText(
+                  textAlign: TextAlign.center,
+                  text: TextSpan(children: [
+                    TextSpan(
+                      text: _data?.body['title'] ?? 'postNoun'.tr(),
+                      style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                            color: Theme.of(context).appBarTheme.foregroundColor!,
                           ),
-                        ),
-                ),
-                child: PostMiniEditor(
-                  postReplyId: _data!.id,
-                  onPost: () {
-                    setState(() {
-                      _data = _data!.copyWith(
-                        metric: _data!.metric.copyWith(
-                          replyCount: _data!.metric.replyCount + 1,
-                        ),
-                      );
-                    });
-                    _childListKey.currentState!.refresh();
+                    ),
+                    const TextSpan(text: '\n'),
+                    TextSpan(
+                      text: 'postDetail'.tr(),
+                      style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                            color: Theme.of(context).appBarTheme.foregroundColor!,
+                          ),
+                    ),
+                  ]),
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                )
+              : Text('postDetail').tr(),
+        ),
+        body: CustomScrollView(
+          slivers: [
+            SliverToBoxAdapter(
+              child: LoadingIndicator(isActive: _isBusy),
+            ),
+            if (_data != null)
+              SliverToBoxAdapter(
+                child: PostItem(
+                  data: _data!,
+                  maxWidth: 640,
+                  showComments: false,
+                  showFullPost: true,
+                  onChanged: (data) {
+                    setState(() => _data = data);
+                  },
+                  onDeleted: () {
+                    Navigator.pop(context);
                   },
                 ),
-              ).center(),
-            ),
-          if (_data != null)
-            PostCommentSliverList(
-              key: _childListKey,
-              parentPostId: _data!.id,
-              maxWidth: 640,
-            ),
-          SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
-        ],
+              ),
+            const SliverToBoxAdapter(child: Divider(height: 1)),
+            if (_data != null)
+              SliverToBoxAdapter(
+                child: Container(
+                  constraints: const BoxConstraints(maxWidth: 640),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      const Icon(Symbols.comment, size: 24),
+                      const Gap(16),
+                      Text('postCommentsDetailed')
+                          .plural(_data!.metric.replyCount)
+                          .textStyle(Theme.of(context).textTheme.titleLarge!),
+                    ],
+                  ).padding(horizontal: 20, vertical: 12).center(),
+                ),
+              ),
+            if (_data != null && ua.isAuthorized)
+              SliverToBoxAdapter(
+                child: Container(
+                  height: 240,
+                  constraints: const BoxConstraints(maxWidth: 640),
+                  margin:
+                      ResponsiveBreakpoints.of(context).largerThan(MOBILE) ? const EdgeInsets.all(8) : EdgeInsets.zero,
+                  decoration: BoxDecoration(
+                    borderRadius: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
+                        ? const BorderRadius.all(Radius.circular(8))
+                        : BorderRadius.zero,
+                    border: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
+                        ? Border.all(
+                            color: Theme.of(context).dividerColor,
+                            width: 1 / devicePixelRatio,
+                          )
+                        : Border.symmetric(
+                            horizontal: BorderSide(
+                              color: Theme.of(context).dividerColor,
+                              width: 1 / devicePixelRatio,
+                            ),
+                          ),
+                  ),
+                  child: PostMiniEditor(
+                    postReplyId: _data!.id,
+                    onPost: () {
+                      setState(() {
+                        _data = _data!.copyWith(
+                          metric: _data!.metric.copyWith(
+                            replyCount: _data!.metric.replyCount + 1,
+                          ),
+                        );
+                      });
+                      _childListKey.currentState!.refresh();
+                    },
+                  ),
+                ).center(),
+              ),
+            if (_data != null)
+              PostCommentSliverList(
+                key: _childListKey,
+                parentPostId: _data!.id,
+                maxWidth: 640,
+              ),
+            SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
+          ],
+        ),
       ),
     );
   }

lib/widgets/connection_indicator.dart

@@ -1,5 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/userinfo.dart';
@@ -18,13 +20,9 @@ class ConnectionIndicator extends StatelessWidget {
         final ua = context.read<UserProvider>();
 
         return GestureDetector(
-          child: Container(
-            padding: EdgeInsets.only(
-              bottom: 8,
-              top: MediaQuery.of(context).padding.top + 8,
-              left: 24,
-              right: 24,
-            ),
+          child: Material(
+            elevation: 2,
+            shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
             color: Theme.of(context).colorScheme.secondaryContainer,
             child: ua.isAuthorized
                 ? Row(
@@ -32,21 +30,25 @@ class ConnectionIndicator extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.center,
                     children: [
                       if (ws.isBusy)
-                        Text('serverConnecting').tr().textColor(
-                            Theme.of(context).colorScheme.onSecondaryContainer)
+                        Text('serverConnecting').tr().textColor(Theme.of(context).colorScheme.onSecondaryContainer)
                       else if (!ws.isConnected)
-                        Text('serverDisconnected').tr().textColor(
-                            Theme.of(context).colorScheme.onSecondaryContainer),
+                        Text('serverDisconnected').tr().textColor(Theme.of(context).colorScheme.onSecondaryContainer)
+                      else
+                        Text('serverConnected').tr().textColor(Theme.of(context).colorScheme.onSecondaryContainer),
+                      const Gap(8),
+                      if (ws.isBusy)
+                        const CircularProgressIndicator(strokeWidth: 2.5)
+                            .width(12)
+                            .height(12)
+                            .padding(horizontal: 4, right: 4)
+                      else if (!ws.isConnected)
+                        const Icon(Symbols.power_off, size: 18)
+                      else
+                        const Icon(Symbols.power, size: 18),
                     ],
-                  )
+                  ).padding(horizontal: 8, vertical: 4)
                 : const SizedBox.shrink(),
-          )
-              .height(
-                  (ws.isBusy || !ws.isConnected) && ua.isAuthorized
-                      ? MediaQuery.of(context).padding.top + 36
-                      : 0,
-                  animate: true)
-              .animate(
+          ).opacity((ws.isBusy || !ws.isConnected) && ua.isAuthorized ? 1 : 0, animate: true).animate(
                 const Duration(milliseconds: 300),
                 Curves.easeInOut,
               ),

lib/widgets/navigation/app_scaffold.dart

@@ -98,56 +98,58 @@ class AppRootScaffold extends StatelessWidget {
       iconMouseDown: Theme.of(context).colorScheme.primary,
     );
 
+    final safeTop = MediaQuery.of(context).padding.top;
+
     return AppBackground(
       isRoot: true,
       child: Scaffold(
         key: globalRootScaffoldKey,
-        body: Column(
+        body: Stack(
           children: [
-            if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS))
-              Container(
-                decoration: BoxDecoration(
-                  border: Border(
-                    bottom: BorderSide(
-                      color: Theme.of(context).dividerColor,
-                      width: 1 / devicePixelRatio,
-                    ),
-                  ),
-                ),
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  mainAxisAlignment: Platform.isMacOS ? MainAxisAlignment.center : MainAxisAlignment.start,
-                  children: [
-                    WindowTitleBarBox(
-                      child: MoveWindow(
-                        child: Text(
-                          'Solar Network',
-                          style: GoogleFonts.spaceGrotesk(),
-                        ).padding(horizontal: 12, vertical: 5),
+            Column(
+              children: [
+                if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS))
+                  Container(
+                    decoration: BoxDecoration(
+                      border: Border(
+                        bottom: BorderSide(
+                          color: Theme.of(context).dividerColor,
+                          width: 1 / devicePixelRatio,
+                        ),
                       ),
                     ),
-                    if (!Platform.isMacOS)
-                      Expanded(
-                        child: WindowTitleBarBox(
-                          child: Row(
-                            children: [
-                              Expanded(child: MoveWindow()),
-                              Row(
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: Platform.isMacOS ? MainAxisAlignment.center : MainAxisAlignment.start,
+                      children: [
+                        WindowTitleBarBox(
+                          child: MoveWindow(
+                            child: Text(
+                              'Solar Network',
+                              style: GoogleFonts.spaceGrotesk(),
+                            ).padding(horizontal: 12, vertical: 5),
+                          ),
+                        ),
+                        if (!Platform.isMacOS)
+                          MoveWindow(
+                            child: WindowTitleBarBox(
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.end,
                                 children: [
                                   MinimizeWindowButton(colors: windowButtonColor),
                                   MaximizeWindowButton(colors: windowButtonColor),
                                   CloseWindowButton(colors: windowButtonColor),
                                 ],
                               ),
-                            ],
+                            ),
                           ),
-                        ),
-                      ),
-                  ],
-                ),
-              ),
-            ConnectionIndicator(),
-            Expanded(child: innerWidget),
+                      ],
+                    ),
+                  ),
+                Expanded(child: innerWidget),
+              ],
+            ),
+            Positioned(top: safeTop > 0 ? safeTop : 16, right: 8, child: ConnectionIndicator()),
           ],
         ),
         drawer: !isExpandedDrawer ? AppNavigationDrawer() : null,