🚀 Launch 2.0.0+4 (canary preview)

✨ Websocket connection status indicator
✨ Basic websocket connection
2024-11-15 00:55:49 +08:00 · 2024-11-15 00:52:31 +08:00 · 2024-11-15 00:24:46 +08:00 · 2024-11-14 23:25:02 +08:00 · 2024-11-14 22:49:17 +08:00 · 2024-11-14 22:42:06 +08:00
35 changed files with 954 additions and 319 deletions
--- a/analysis_options.yaml
+++ b/analysis_options.yaml
@ -9,6 +9,13 @@
 # packages, and plugins designed to encourage good coding practices.
 include: package:flutter_lints/flutter.yaml

+analyzer:
+  exclude:
+    - "**/*.g.dart"
+    - "**/*.freezed.dart"
+  errors:
+    invalid_annotation_target: ignore # Due to freezed + json_serializable issue, ref https://github.com/rrousselGit/freezed/issues/488#issuecomment-894358980
+
 linter:
  # The lint rules applied to this project can be customized in the
  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
--- a/assets/translations/en-US.json
+++ b/assets/translations/en-US.json
@ -131,5 +131,7 @@
  "sensitiveContent": "Sensitive Content",
  "sensitiveContentCollapsed": "Sensitive content has been collapsed.",
  "sensitiveContentDescription": "This content has been marked as sensitive, and may not be suitable for all viewers.",
-  "sensitiveContentReveal": "Reveal"
+  "sensitiveContentReveal": "Reveal",
+  "serverConnecting": "Connecting to server...",
+  "serverDisconnected": "Lost connection from server"
 }
--- a/assets/translations/zh-CN.json
+++ b/assets/translations/zh-CN.json
@ -131,5 +131,7 @@
  "sensitiveContent": "敏感内容",
  "sensitiveContentCollapsed": "敏感内容已折叠。",
  "sensitiveContentDescription": "此内容已被标记，可能不适合所有人查看。",
-  "sensitiveContentReveal": "显示内容"
+  "sensitiveContentReveal": "显示内容",
+  "serverConnecting": "正在连接服务器…",
+  "serverDisconnected": "已与服务器断开连接"
 }
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -43,7 +43,7 @@ PODS:
  - Flutter (1.0.0)
  - flutter_native_splash (0.0.1):
    - Flutter
-  - flutter_secure_storage (3.3.1):
+  - flutter_secure_storage (6.0.0):
    - Flutter
  - image_picker_ios (0.0.1):
    - Flutter
@ -119,7 +119,7 @@ SPEC CHECKSUMS:
  file_picker: 09aa5ec1ab24135ccd7a1621c46c84134bfd6655
  Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
  flutter_native_splash: edf599c81f74d093a4daf8e17bd7a018854bc778
-  flutter_secure_storage: 7953c38a04c3fdbb00571bcd87d8e3b5ceb9daec
+  flutter_secure_storage: d33dac7ae2ea08509be337e775f6b59f1ff45f12
  image_picker_ios: c560581cceedb403a6ff17f2f816d7fea1421fc1
  path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
  SDWebImage: 8a6b7b160b4d710e2a22b6900e25301075c34cb3
--- a/lib/main.dart
+++ b/lib/main.dart
@ -11,6 +11,7 @@ import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/theme.dart';
 import 'package:surface/providers/userinfo.dart';
+import 'package:surface/providers/websocket.dart';
 import 'package:surface/router.dart';

 void main() async {
@ -35,14 +36,19 @@ class SolianApp extends StatelessWidget {
        supportedLocales: [Locale('en', 'US'), Locale('zh', 'CN')],
        fallbackLocale: Locale('en', 'US'),
        useFallbackTranslations: true,
+        useOnlyLangCode: true,
        assetLoader: JsonAssetLoader(),
        child: MultiProvider(
          providers: [
+            // Display layer
+            ChangeNotifierProvider(create: (_) => ThemeProvider()),
+            ChangeNotifierProvider(create: (ctx) => NavigationProvider()),
+
+            // Data layer
            Provider(create: (_) => SnNetworkProvider()),
            Provider(create: (ctx) => SnAttachmentProvider(ctx)),
-            ChangeNotifierProvider(create: (ctx) => NavigationProvider()),
            ChangeNotifierProvider(create: (ctx) => UserProvider(ctx)),
-            ChangeNotifierProvider(create: (_) => ThemeProvider()),
+            ChangeNotifierProvider(create: (ctx) => WebSocketProvider(ctx)),
          ],
          child: AppMainContent(),
        ),
@ -62,7 +68,7 @@ class AppMainContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    context.read<NavigationProvider>();
-    context.read<UserProvider>();
+    context.read<WebSocketProvider>();

    final th = context.watch<ThemeProvider>();

--- a/lib/providers/sn_network.dart
+++ b/lib/providers/sn_network.dart
@ -44,6 +44,25 @@ class SnNetworkProvider {
          RequestOptions options,
          RequestInterceptorHandler handler,
        ) async {
+          final atk = await getFreshAtk();
+          if (atk != null) {
+            options.headers['Authorization'] = 'Bearer $atk';
+          }
+          return handler.next(options);
+        },
+      ),
+    );
+
+    client = addClientAdapter(client);
+
+    SharedPreferences.getInstance().then((prefs) {
+      _prefs = prefs;
+      client.options.baseUrl =
+          _prefs.getString(kNetworkServerStoreKey) ?? kNetworkServerDefault;
+    });
+  }
+
+  Future<String?> getFreshAtk() async {
    try {
      var atk = await _storage.read(key: kAtkStoreKey);
      if (atk != null) {
@ -52,8 +71,7 @@ class SnNetworkProvider {
          throw Exception('invalid format of access token');
        }

-              var rawPayload =
-                  atkParts[1].replaceAll('-', '+').replaceAll('_', '/');
+        var rawPayload = atkParts[1].replaceAll('-', '+').replaceAll('_', '/');
        switch (rawPayload.length % 4) {
          case 0:
            break;
@ -76,27 +94,16 @@ class SnNetworkProvider {
        }

        if (atk != null) {
-                options.headers['Authorization'] = 'Bearer $atk';
+          return atk;
        } else {
          log('Access token refresh failed...');
        }
      }
    } catch (err) {
      log('Failed to authenticate user: $err');
-          } finally {
-            handler.next(options);
    }
-        },
-      ),
-    );

-    client = addClientAdapter(client);
-
-    SharedPreferences.getInstance().then((prefs) {
-      _prefs = prefs;
-      client.options.baseUrl =
-          _prefs.getString(kNetworkServerStoreKey) ?? kNetworkServerDefault;
-    });
+    return null;
  }

  String getAttachmentUrl(String ky) {
--- a/lib/providers/userinfo.dart
+++ b/lib/providers/userinfo.dart
@ -13,6 +13,8 @@ class UserProvider extends ChangeNotifier {
  late final SnNetworkProvider _sn;
  late final FlutterSecureStorage _storage = FlutterSecureStorage();

+  Future<String?> get atk => _storage.read(key: kAtkStoreKey);
+
  UserProvider(BuildContext context) {
    _sn = context.read<SnNetworkProvider>();

--- a/lib/providers/websocket.dart
+++ b/lib/providers/websocket.dart
@ -0,0 +1,110 @@
+import 'dart:async';
+import 'dart:convert';
+import 'dart:developer';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:surface/providers/sn_network.dart';
+import 'package:surface/providers/userinfo.dart';
+import 'package:surface/types/websocket.dart';
+import 'package:web_socket_channel/web_socket_channel.dart';
+
+class WebSocketProvider extends ChangeNotifier {
+  bool isBusy = false;
+  bool isConnected = false;
+
+  WebSocketChannel? conn;
+
+  late final SnNetworkProvider _sn;
+  late final UserProvider _ua;
+
+  StreamController<WebSocketPackage> stream = StreamController.broadcast();
+
+  WebSocketProvider(BuildContext context) {
+    _sn = context.read<SnNetworkProvider>();
+    _ua = context.read<UserProvider>();
+
+    // Wait for the userinfo provide initialize authorization status
+    Future.delayed(const Duration(milliseconds: 250), () async {
+      if (_ua.isAuthorized) {
+        log('[WebSocket] Connecting to the server...');
+        await connect();
+      } else {
+        log('[WebSocket] Unable connect to the server, unauthorized.');
+      }
+    });
+  }
+
+  Future<void> connect({noRetry = false}) async {
+    if (!_ua.isAuthorized) return;
+    if (isConnected) {
+      disconnect();
+    }
+
+    final atk = await _sn.getFreshAtk();
+    final uri = Uri.parse(
+      '${_sn.client.options.baseUrl.replaceFirst('http', 'ws')}/ws?tk=$atk',
+    );
+
+    isBusy = true;
+    notifyListeners();
+
+    try {
+      conn = WebSocketChannel.connect(uri);
+      await conn!.ready;
+      log('[WebSocket] Connected to server!');
+      isConnected = true;
+    } catch (err) {
+      if (err is WebSocketChannelException) {
+        log('Failed to connect to websocket: ${(err.inner as dynamic).message}');
+      } else {
+        log('Failed to connect to websocket: $err');
+      }
+
+      if (!noRetry) {
+        log('Retry connecting to websocket in 3 seconds...');
+        return Future.delayed(
+          const Duration(seconds: 3),
+          () => connect(noRetry: true),
+        );
+      }
+    } finally {
+      isBusy = false;
+      notifyListeners();
+    }
+  }
+
+  void disconnect() {
+    if (conn != null) {
+      conn!.sink.close();
+    }
+    isConnected = false;
+    notifyListeners();
+  }
+
+  void listen() {
+    conn?.stream.listen(
+      (event) {
+        final packet = WebSocketPackage.fromJson(jsonDecode(event));
+        log('Websocket incoming message: ${packet.method} ${packet.message}');
+        stream.sink.add(packet);
+        // TODO handle notification
+        // if (packet.method == 'notifications.new') {
+        //   final NotificationProvider nty = Get.find();
+        //   nty.notifications.add(Notification.fromJson(packet.payload!));
+        //   nty.notificationUnread.value++;
+        // }
+      },
+      onDone: () {
+        isConnected = false;
+        notifyListeners();
+        Future.delayed(const Duration(seconds: 1), () => connect());
+      },
+      onError: (err) {
+        isConnected = false;
+        notifyListeners();
+        Future.delayed(const Duration(seconds: 11), () => connect());
+      },
+    );
+  }
+}
--- a/lib/router.dart
+++ b/lib/router.dart
@ -16,13 +16,12 @@ import 'package:surface/screens/settings.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/navigation/app_scaffold.dart';

-final appRouter = GoRouter(
-  routes: [
+final _appRoutes = [
  ShellRoute(
    builder: (context, state, child) => AppScaffold(
      body: child,
      showBottomNavigation: true,
-        showDrawer: true,
+      showAppBar: false,
    ),
    routes: [
      GoRoute(
@ -53,9 +52,7 @@ final appRouter = GoRouter(
    ],
  ),
  ShellRoute(
-      builder: (context, state, child) => AppScaffold(
-        body: child,
-      ),
+    builder: (context, state, child) => child,
    routes: [
      GoRoute(
        path: '/post/write/:mode',
@ -84,11 +81,7 @@ final appRouter = GoRouter(
    ],
  ),
  ShellRoute(
-      builder: (context, state, child) => AppScaffold(
-        body: child,
-        autoImplyAppBar: true,
-        showDrawer: true,
-      ),
+    builder: (context, state, child) => AppScaffold(body: child),
    routes: [
      GoRoute(
        path: '/auth/login',
@ -125,10 +118,7 @@ final appRouter = GoRouter(
    ],
  ),
  ShellRoute(
-      builder: (context, state, child) => AppScaffold(
-        body: child,
-        autoImplyAppBar: true,
-      ),
+    builder: (context, state, child) => AppScaffold(body: child),
    routes: [
      GoRoute(
        path: '/settings',
@ -137,5 +127,13 @@ final appRouter = GoRouter(
      ),
    ],
  ),
+];
+
+final appRouter = GoRouter(
+  routes: [
+    ShellRoute(
+      builder: (context, state, child) => AppRootScaffold(body: child),
+      routes: _appRoutes,
+    ),
  ],
 );
--- a/lib/screens/account.dart
+++ b/lib/screens/account.dart
@ -8,7 +8,6 @@ import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/dialog.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';

 class AccountScreen extends StatelessWidget {
  const AccountScreen({super.key});
@ -17,7 +16,7 @@ class AccountScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    final ua = context.watch<UserProvider>();

-    return AppScaffold(
+    return Scaffold(
      appBar: AppBar(
        title: Text("screenAccount").tr(),
        actions: [
--- a/lib/screens/account/publishers/publisher_edit.dart
+++ b/lib/screens/account/publishers/publisher_edit.dart
@ -18,7 +18,6 @@ import 'package:surface/types/post.dart';
 import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/loading_indicator.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';
 import 'package:surface/widgets/universal_image.dart';

 class AccountPublisherEditScreen extends StatefulWidget {
@ -189,7 +188,7 @@ class _AccountPublisherEditScreenState
  Widget build(BuildContext context) {
    final sn = context.read<SnNetworkProvider>();

-    return AppScaffold(
+    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
--- a/lib/screens/account/publishers/publisher_new.dart
+++ b/lib/screens/account/publishers/publisher_new.dart
@ -8,7 +8,6 @@ import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/dialog.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';

 class AccountPublisherNewScreen extends StatefulWidget {
  const AccountPublisherNewScreen({super.key});
@ -23,7 +22,7 @@ class _AccountPublisherNewScreenState extends State<AccountPublisherNewScreen> {

  @override
  Widget build(BuildContext context) {
-    return AppScaffold(
+    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
--- a/lib/screens/account/publishers/publishers.dart
+++ b/lib/screens/account/publishers/publishers.dart
@ -1,5 +1,4 @@
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
@ -11,7 +10,6 @@ import 'package:surface/types/post.dart';
 import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/loading_indicator.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';

 class PublisherScreen extends StatefulWidget {
  const PublisherScreen({super.key});
@ -55,7 +53,7 @@ class _PublisherScreenState extends State<PublisherScreen> {

  @override
  Widget build(BuildContext context) {
-    return AppScaffold(
+    return Scaffold(
      body: Column(
        children: [
          ListTile(
--- a/lib/screens/explore.dart
+++ b/lib/screens/explore.dart
@ -5,10 +5,10 @@ import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/types/post.dart';
-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';

@ -74,7 +74,7 @@ class _ExploreScreenState extends State<ExploreScreen> {

  @override
  Widget build(BuildContext context) {
-    return AppScaffold(
+    return Scaffold(
      floatingActionButtonLocation: ExpandableFab.location,
      floatingActionButton: ExpandableFab(
        key: _fabKey,
@ -173,7 +173,10 @@ class _ExploreScreenState extends State<ExploreScreen> {
              onFetchData: _fetchPosts,
              itemBuilder: (context, idx) {
                return GestureDetector(
+                  child: Container(
+                    constraints: const BoxConstraints(maxWidth: 640),
                    child: PostItem(data: _posts[idx]),
+                  ).center(),
                  onTap: () {
                    GoRouter.of(context).pushNamed(
                      'postDetail',
--- a/lib/screens/home.dart
+++ b/lib/screens/home.dart
@ -1,7 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:styled_widget/styled_widget.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';
 import 'package:flutter/material.dart';

 class HomeScreen extends StatefulWidget {
@ -14,7 +13,7 @@ class HomeScreen extends StatefulWidget {
 class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
-    return AppScaffold(
+    return Scaffold(
      appBar: AppBar(
        title: Text("screenHome").tr(),
      ),
--- a/lib/screens/post/post_detail.dart
+++ b/lib/screens/post/post_detail.dart
@ -9,10 +9,10 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
+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_scaffold.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';
@ -72,9 +72,10 @@ class _PostDetailScreenState extends State<PostDetailScreen> {

  @override
  Widget build(BuildContext context) {
+    final ua = context.watch<UserProvider>();
    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

-    return AppScaffold(
+    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
          onPressed: () {
@ -108,10 +109,13 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
          ),
          if (_data != null)
            SliverToBoxAdapter(
+              child: Container(
+                constraints: const BoxConstraints(maxWidth: 640),
                child: PostItem(
                  data: _data!,
                  showComments: false,
                ),
+              ).center(),
            ),
          const SliverToBoxAdapter(child: Divider(height: 1)),
          if (_data != null)
@ -127,7 +131,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
                ],
              ).padding(horizontal: 20, vertical: 12),
            ),
-          if (_data != null)
+          if (_data != null && ua.isAuthorized)
            SliverToBoxAdapter(
              child: Container(
                height: 240,
@ -158,6 +162,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
            PostCommentSliverList(
              key: _childListKey,
              parentPostId: _data!.id,
+              maxWidth: 640,
            ),
          SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
        ],
--- a/lib/screens/post/post_editor.dart
+++ b/lib/screens/post/post_editor.dart
@ -15,7 +15,6 @@ import 'package:surface/providers/sn_network.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/loading_indicator.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:surface/widgets/post/post_media_pending_list.dart';
 import 'package:surface/widgets/post/post_meta_editor.dart';
@ -111,7 +110,7 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
    return ListenableBuilder(
      listenable: _writeController,
      builder: (context, _) {
-        return AppScaffold(
+        return Scaffold(
          appBar: AppBar(
            leading: BackButton(
              onPressed: () {
--- a/lib/screens/settings.dart
+++ b/lib/screens/settings.dart
@ -15,7 +15,6 @@ import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/theme.dart';
 import 'package:surface/theme.dart';
 import 'package:surface/widgets/dialog.dart';
-import 'package:surface/widgets/navigation/app_scaffold.dart';

 class SettingsScreen extends StatefulWidget {
  const SettingsScreen({super.key});
@ -58,7 +57,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
  Widget build(BuildContext context) {
    final sn = context.read<SnNetworkProvider>();

-    return AppScaffold(
+    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
--- a/lib/types/websocket.dart
+++ b/lib/types/websocket.dart
@ -0,0 +1,17 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'websocket.freezed.dart';
+part 'websocket.g.dart';
+
+@freezed
+class WebSocketPackage with _$WebSocketPackage {
+  const factory WebSocketPackage({
+    @JsonKey(name: 'w') @Default('unknown') String method,
+    @JsonKey(name: 'e') String? endpoint,
+    @JsonKey(name: 'm') String? message,
+    @JsonKey(name: 'p') @Default({}) Map<String, dynamic>? payload,
+  }) = _WebSocketPackage;
+
+  factory WebSocketPackage.fromJson(Map<String, dynamic> json) =>
+      _$WebSocketPackageFromJson(json);
+}
--- a/lib/types/websocket.freezed.dart
+++ b/lib/types/websocket.freezed.dart
@ -0,0 +1,252 @@
+// coverage:ignore-file
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// ignore_for_file: type=lint
+// ignore_for_file: unused_element, deprecated_member_use, deprecated_member_use_from_same_package, use_function_type_syntax_for_parameters, unnecessary_const, avoid_init_to_null, invalid_override_different_default_values_named, prefer_expression_function_bodies, annotate_overrides, invalid_annotation_target, unnecessary_question_mark
+
+part of 'websocket.dart';
+
+// **************************************************************************
+// FreezedGenerator
+// **************************************************************************
+
+T _$identity<T>(T value) => value;
+
+final _privateConstructorUsedError = UnsupportedError(
+    'It seems like you constructed your class using `MyClass._()`. This constructor is only meant to be used by freezed and you are not supposed to need it nor use it.\nPlease check the documentation here for more information: https://github.com/rrousselGit/freezed#adding-getters-and-methods-to-our-models');
+
+WebSocketPackage _$WebSocketPackageFromJson(Map<String, dynamic> json) {
+  return _WebSocketPackage.fromJson(json);
+}
+
+/// @nodoc
+mixin _$WebSocketPackage {
+  @JsonKey(name: 'w')
+  String get method => throw _privateConstructorUsedError;
+  @JsonKey(name: 'e')
+  String? get endpoint => throw _privateConstructorUsedError;
+  @JsonKey(name: 'm')
+  String? get message => throw _privateConstructorUsedError;
+  @JsonKey(name: 'p')
+  Map<String, dynamic>? get payload => throw _privateConstructorUsedError;
+
+  /// Serializes this WebSocketPackage to a JSON map.
+  Map<String, dynamic> toJson() => throw _privateConstructorUsedError;
+
+  /// Create a copy of WebSocketPackage
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  $WebSocketPackageCopyWith<WebSocketPackage> get copyWith =>
+      throw _privateConstructorUsedError;
+}
+
+/// @nodoc
+abstract class $WebSocketPackageCopyWith<$Res> {
+  factory $WebSocketPackageCopyWith(
+          WebSocketPackage value, $Res Function(WebSocketPackage) then) =
+      _$WebSocketPackageCopyWithImpl<$Res, WebSocketPackage>;
+  @useResult
+  $Res call(
+      {@JsonKey(name: 'w') String method,
+      @JsonKey(name: 'e') String? endpoint,
+      @JsonKey(name: 'm') String? message,
+      @JsonKey(name: 'p') Map<String, dynamic>? payload});
+}
+
+/// @nodoc
+class _$WebSocketPackageCopyWithImpl<$Res, $Val extends WebSocketPackage>
+    implements $WebSocketPackageCopyWith<$Res> {
+  _$WebSocketPackageCopyWithImpl(this._value, this._then);
+
+  // ignore: unused_field
+  final $Val _value;
+  // ignore: unused_field
+  final $Res Function($Val) _then;
+
+  /// Create a copy of WebSocketPackage
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? method = null,
+    Object? endpoint = freezed,
+    Object? message = freezed,
+    Object? payload = freezed,
+  }) {
+    return _then(_value.copyWith(
+      method: null == method
+          ? _value.method
+          : method // ignore: cast_nullable_to_non_nullable
+              as String,
+      endpoint: freezed == endpoint
+          ? _value.endpoint
+          : endpoint // ignore: cast_nullable_to_non_nullable
+              as String?,
+      message: freezed == message
+          ? _value.message
+          : message // ignore: cast_nullable_to_non_nullable
+              as String?,
+      payload: freezed == payload
+          ? _value.payload
+          : payload // ignore: cast_nullable_to_non_nullable
+              as Map<String, dynamic>?,
+    ) as $Val);
+  }
+}
+
+/// @nodoc
+abstract class _$$WebSocketPackageImplCopyWith<$Res>
+    implements $WebSocketPackageCopyWith<$Res> {
+  factory _$$WebSocketPackageImplCopyWith(_$WebSocketPackageImpl value,
+          $Res Function(_$WebSocketPackageImpl) then) =
+      __$$WebSocketPackageImplCopyWithImpl<$Res>;
+  @override
+  @useResult
+  $Res call(
+      {@JsonKey(name: 'w') String method,
+      @JsonKey(name: 'e') String? endpoint,
+      @JsonKey(name: 'm') String? message,
+      @JsonKey(name: 'p') Map<String, dynamic>? payload});
+}
+
+/// @nodoc
+class __$$WebSocketPackageImplCopyWithImpl<$Res>
+    extends _$WebSocketPackageCopyWithImpl<$Res, _$WebSocketPackageImpl>
+    implements _$$WebSocketPackageImplCopyWith<$Res> {
+  __$$WebSocketPackageImplCopyWithImpl(_$WebSocketPackageImpl _value,
+      $Res Function(_$WebSocketPackageImpl) _then)
+      : super(_value, _then);
+
+  /// Create a copy of WebSocketPackage
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? method = null,
+    Object? endpoint = freezed,
+    Object? message = freezed,
+    Object? payload = freezed,
+  }) {
+    return _then(_$WebSocketPackageImpl(
+      method: null == method
+          ? _value.method
+          : method // ignore: cast_nullable_to_non_nullable
+              as String,
+      endpoint: freezed == endpoint
+          ? _value.endpoint
+          : endpoint // ignore: cast_nullable_to_non_nullable
+              as String?,
+      message: freezed == message
+          ? _value.message
+          : message // ignore: cast_nullable_to_non_nullable
+              as String?,
+      payload: freezed == payload
+          ? _value._payload
+          : payload // ignore: cast_nullable_to_non_nullable
+              as Map<String, dynamic>?,
+    ));
+  }
+}
+
+/// @nodoc
+@JsonSerializable()
+class _$WebSocketPackageImpl implements _WebSocketPackage {
+  const _$WebSocketPackageImpl(
+      {@JsonKey(name: 'w') this.method = 'unknown',
+      @JsonKey(name: 'e') this.endpoint,
+      @JsonKey(name: 'm') this.message,
+      @JsonKey(name: 'p') final Map<String, dynamic>? payload = const {}})
+      : _payload = payload;
+
+  factory _$WebSocketPackageImpl.fromJson(Map<String, dynamic> json) =>
+      _$$WebSocketPackageImplFromJson(json);
+
+  @override
+  @JsonKey(name: 'w')
+  final String method;
+  @override
+  @JsonKey(name: 'e')
+  final String? endpoint;
+  @override
+  @JsonKey(name: 'm')
+  final String? message;
+  final Map<String, dynamic>? _payload;
+  @override
+  @JsonKey(name: 'p')
+  Map<String, dynamic>? get payload {
+    final value = _payload;
+    if (value == null) return null;
+    if (_payload is EqualUnmodifiableMapView) return _payload;
+    // ignore: implicit_dynamic_type
+    return EqualUnmodifiableMapView(value);
+  }
+
+  @override
+  String toString() {
+    return 'WebSocketPackage(method: $method, endpoint: $endpoint, message: $message, payload: $payload)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _$WebSocketPackageImpl &&
+            (identical(other.method, method) || other.method == method) &&
+            (identical(other.endpoint, endpoint) ||
+                other.endpoint == endpoint) &&
+            (identical(other.message, message) || other.message == message) &&
+            const DeepCollectionEquality().equals(other._payload, _payload));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(runtimeType, method, endpoint, message,
+      const DeepCollectionEquality().hash(_payload));
+
+  /// Create a copy of WebSocketPackage
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  @pragma('vm:prefer-inline')
+  _$$WebSocketPackageImplCopyWith<_$WebSocketPackageImpl> get copyWith =>
+      __$$WebSocketPackageImplCopyWithImpl<_$WebSocketPackageImpl>(
+          this, _$identity);
+
+  @override
+  Map<String, dynamic> toJson() {
+    return _$$WebSocketPackageImplToJson(
+      this,
+    );
+  }
+}
+
+abstract class _WebSocketPackage implements WebSocketPackage {
+  const factory _WebSocketPackage(
+          {@JsonKey(name: 'w') final String method,
+          @JsonKey(name: 'e') final String? endpoint,
+          @JsonKey(name: 'm') final String? message,
+          @JsonKey(name: 'p') final Map<String, dynamic>? payload}) =
+      _$WebSocketPackageImpl;
+
+  factory _WebSocketPackage.fromJson(Map<String, dynamic> json) =
+      _$WebSocketPackageImpl.fromJson;
+
+  @override
+  @JsonKey(name: 'w')
+  String get method;
+  @override
+  @JsonKey(name: 'e')
+  String? get endpoint;
+  @override
+  @JsonKey(name: 'm')
+  String? get message;
+  @override
+  @JsonKey(name: 'p')
+  Map<String, dynamic>? get payload;
+
+  /// Create a copy of WebSocketPackage
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  _$$WebSocketPackageImplCopyWith<_$WebSocketPackageImpl> get copyWith =>
+      throw _privateConstructorUsedError;
+}
--- a/lib/types/websocket.g.dart
+++ b/lib/types/websocket.g.dart
@ -0,0 +1,25 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'websocket.dart';
+
+// **************************************************************************
+// JsonSerializableGenerator
+// **************************************************************************
+
+_$WebSocketPackageImpl _$$WebSocketPackageImplFromJson(
+        Map<String, dynamic> json) =>
+    _$WebSocketPackageImpl(
+      method: json['w'] as String? ?? 'unknown',
+      endpoint: json['e'] as String?,
+      message: json['m'] as String?,
+      payload: json['p'] as Map<String, dynamic>? ?? const {},
+    );
+
+Map<String, dynamic> _$$WebSocketPackageImplToJson(
+        _$WebSocketPackageImpl instance) =>
+    <String, dynamic>{
+      'w': instance.method,
+      'e': instance.endpoint,
+      'm': instance.message,
+      'p': instance.payload,
+    };
--- a/lib/widgets/attachment/attachment_list.dart
+++ b/lib/widgets/attachment/attachment_list.dart
@ -1,5 +1,3 @@
-import 'dart:math' as math;
-
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
@ -11,14 +9,15 @@ class AttachmentList extends StatelessWidget {
  final List<SnAttachment> data;
  final bool? bordered;
  final double? maxHeight;
+  final EdgeInsets? listPadding;
  const AttachmentList({
    super.key,
    required this.data,
    this.bordered,
    this.maxHeight,
+    this.listPadding,
  });

-  static const double kMaxItemWidth = 520;
  static const BorderRadius kDefaultRadius =
      BorderRadius.all(Radius.circular(8));

@ -27,19 +26,22 @@ class AttachmentList extends StatelessWidget {
    final borderSide = (bordered ?? false)
        ? BorderSide(width: 1, color: Theme.of(context).dividerColor)
        : BorderSide.none;
+    final backgroundColor = Theme.of(context).colorScheme.surfaceContainer;
+    final constraints = BoxConstraints(
+      minWidth: 80,
+      maxHeight: maxHeight ?? double.infinity,
+    );

    if (data.isEmpty) return const SizedBox.shrink();
    if (data.length == 1) {
      if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
-        return Container(
-          constraints: BoxConstraints(
-            maxHeight: maxHeight ?? double.infinity,
-            maxWidth: math.min(
-              MediaQuery.of(context).size.width - 20,
-              kMaxItemWidth,
-            ),
-          ),
+        return Padding(
+          // Single child list-like displaying
+          padding: listPadding ?? EdgeInsets.zero,
+          child: Container(
+            constraints: constraints,
            decoration: BoxDecoration(
+              color: backgroundColor,
              border: Border(top: borderSide, bottom: borderSide),
              borderRadius: kDefaultRadius,
            ),
@ -50,11 +52,13 @@ class AttachmentList extends StatelessWidget {
                child: AttachmentItem(data: data[0], isExpandable: true),
              ),
            ),
+          ),
        );
      }

      return Container(
        decoration: BoxDecoration(
+          color: backgroundColor,
          border: Border(top: borderSide, bottom: borderSide),
        ),
        child: AspectRatio(
@ -72,15 +76,12 @@ class AttachmentList extends StatelessWidget {
          shrinkWrap: true,
          itemCount: data.length,
          itemBuilder: (context, idx) {
-            return Container(
-              constraints: BoxConstraints(
-                maxHeight: maxHeight ?? double.infinity,
-                maxWidth: math.min(
-                  MediaQuery.of(context).size.width - 20,
-                  kMaxItemWidth,
-                ),
-              ),
+            return Stack(
+              children: [
+                Container(
+                  constraints: constraints,
                  decoration: BoxDecoration(
+                    color: backgroundColor,
                    border: Border(top: borderSide, bottom: borderSide),
                    borderRadius: kDefaultRadius,
                  ),
@ -88,13 +89,23 @@ class AttachmentList extends StatelessWidget {
                    aspectRatio: data[idx].metadata['ratio']?.toDouble() ?? 1,
                    child: ClipRRect(
                      borderRadius: kDefaultRadius,
-                  child: AttachmentItem(data: data[idx], isExpandable: true),
+                      child:
+                          AttachmentItem(data: data[idx], isExpandable: true),
                    ),
                  ),
+                ),
+                Positioned(
+                  right: 12,
+                  bottom: 12,
+                  child: Chip(
+                    label: Text('${idx + 1}/${data.length}'),
+                  ),
+                ),
+              ],
            );
          },
          separatorBuilder: (context, index) => const Gap(8),
-          padding: const EdgeInsets.symmetric(horizontal: 12),
+          padding: listPadding,
          physics: const BouncingScrollPhysics(),
          scrollDirection: Axis.horizontal,
        ),
--- a/lib/widgets/connection_indicator.dart
+++ b/lib/widgets/connection_indicator.dart
@ -0,0 +1,55 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/userinfo.dart';
+import 'package:surface/providers/websocket.dart';
+
+class ConnectionIndicator extends StatelessWidget {
+  const ConnectionIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final ws = context.watch<WebSocketProvider>();
+
+    return ListenableBuilder(
+      listenable: ws,
+      builder: (context, _) {
+        final ua = context.read<UserProvider>();
+
+        return Container(
+          padding: EdgeInsets.only(
+            bottom: 8,
+            top: MediaQuery.of(context).padding.top + 8,
+            left: 24,
+            right: 24,
+          ),
+          color: Theme.of(context).colorScheme.secondaryContainer,
+          child: ua.isAuthorized
+              ? Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    if (ws.isBusy)
+                      Text('serverConnecting').tr().textColor(
+                          Theme.of(context).colorScheme.onSecondaryContainer)
+                    else if (!ws.isConnected)
+                      Text('serverDisconnected').tr().textColor(
+                          Theme.of(context).colorScheme.onSecondaryContainer),
+                  ],
+                )
+              : const SizedBox.shrink(),
+        )
+            .height(
+                (ws.isBusy || !ws.isConnected) && ua.isAuthorized
+                    ? MediaQuery.of(context).padding.top + 30
+                    : 0,
+                animate: true)
+            .animate(
+              const Duration(milliseconds: 300),
+              Curves.easeInOut,
+            );
+      },
+    );
+  }
+}
--- a/lib/widgets/navigation/app_drawer_navigation.dart
+++ b/lib/widgets/navigation/app_drawer_navigation.dart
@ -1,5 +1,3 @@
-import 'dart:math' as math;
-
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
@ -9,7 +7,8 @@ import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/navigation.dart';

 class AppNavigationDrawer extends StatefulWidget {
-  const AppNavigationDrawer({super.key});
+  final double? elevation;
+  const AppNavigationDrawer({super.key, this.elevation});

  @override
  State<AppNavigationDrawer> createState() => _AppNavigationDrawerState();
@ -43,6 +42,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
        ];

        return NavigationDrawer(
+          elevation: widget.elevation,
          backgroundColor: backgroundColor,
          selectedIndex: nav.currentIndex,
          children: [
@ -51,12 +51,12 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Solar Network').bold(),
-                Text('Solar Network 2.0α').fontSize(12).textColor(
+                Text('Canary Preview 2.0α').fontSize(12).textColor(
                    Theme.of(context).colorScheme.onSurface.withOpacity(0.5)),
              ],
            ).padding(
              horizontal: 32,
-              top: math.max(MediaQuery.of(context).padding.top, 16),
+              top: MediaQuery.of(context).padding.top > 16 ? 8 : 16,
              bottom: 16,
            ),
            ...destinations.where((ele) => ele.isPinned).map((ele) {
--- a/lib/widgets/navigation/app_rail_navigation.dart
+++ b/lib/widgets/navigation/app_rail_navigation.dart
@ -0,0 +1,68 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:material_symbols_icons/symbols.dart';
+import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/navigation.dart';
+
+class AppRailNavigation extends StatefulWidget {
+  const AppRailNavigation({super.key});
+
+  @override
+  State<AppRailNavigation> createState() => _AppRailNavigationState();
+}
+
+class _AppRailNavigationState extends State<AppRailNavigation> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context
+          .read<NavigationProvider>()
+          .autoDetectIndex(GoRouter.maybeOf(context));
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final nav = context.watch<NavigationProvider>();
+
+    return ListenableBuilder(
+      listenable: nav,
+      builder: (context, _) {
+        final destinations =
+            nav.destinations.where((ele) => ele.isPinned).toList();
+
+        return NavigationRail(
+          selectedIndex: nav.currentIndex,
+          destinations: [
+            ...destinations.where((ele) => ele.isPinned).map((ele) {
+              return NavigationRailDestination(
+                icon: ele.icon,
+                label: Text(ele.label).tr(),
+              );
+            }),
+          ],
+          trailing: Expanded(
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: StyledWidget(
+                IconButton(
+                  icon: const Icon(Symbols.menu),
+                  onPressed: () {
+                    Scaffold.of(context).openDrawer();
+                  },
+                ),
+              ).padding(bottom: 16),
+            ),
+          ),
+          onDestinationSelected: (idx) {
+            nav.setIndex(idx);
+            GoRouter.of(context).goNamed(destinations[idx].screen);
+          },
+        );
+      },
+    );
+  }
+}
--- a/lib/widgets/navigation/app_scaffold.dart
+++ b/lib/widgets/navigation/app_scaffold.dart
@ -2,76 +2,93 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:responsive_framework/responsive_framework.dart';
+import 'package:surface/widgets/connection_indicator.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/navigation/app_bottom_navigation.dart';
 import 'package:surface/widgets/navigation/app_drawer_navigation.dart';
+import 'package:surface/widgets/navigation/app_rail_navigation.dart';

 class AppScaffold extends StatelessWidget {
-  final PreferredSizeWidget? appBar;
-  final FloatingActionButtonLocation? floatingActionButtonLocation;
-  final Widget? floatingActionButton;
  final String? title;
  final Widget? body;
-  final bool autoImplyAppBar;
+  final bool showAppBar;
  final bool showBottomNavigation;
-  final bool showDrawer;
  const AppScaffold({
    super.key,
-    this.appBar,
-    this.floatingActionButton,
-    this.floatingActionButtonLocation,
    this.title,
    this.body,
-    this.autoImplyAppBar = false,
+    this.showAppBar = true,
    this.showBottomNavigation = false,
-    this.showDrawer = false,
  });

  @override
  Widget build(BuildContext context) {
-    final isShowDrawer = showDrawer
-        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
-        : false;
    final isShowBottomNavigation = (showBottomNavigation)
        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
        : false;

    final state = GoRouter.maybeOf(context);
+    final autoTitle = state != null
+        ? 'screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}'
+        : 'screen';

-    final innerWidget = AppBackground(
-      child: Scaffold(
-        appBar: appBar ??
-            (autoImplyAppBar
+    return Scaffold(
+      appBar: showAppBar
          ? AppBar(
-                    title: title != null
-                        ? Text(title!)
-                        : state != null
-                            ? Text(
-                                ('screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}')
-                                    .tr(),
+              title: Text(title ?? autoTitle.tr()),
            )
-                            : null)
-                : null),
+          : null,
      body: body,
-        floatingActionButtonLocation: floatingActionButtonLocation,
-        floatingActionButton: floatingActionButton,
-        drawer: isShowDrawer ? AppNavigationDrawer() : null,
      bottomNavigationBar:
          isShowBottomNavigation ? AppBottomNavigationBar() : null,
-      ),
    );
-
-    if (showDrawer) {
-      return Row(
-        children: [
-          AppNavigationDrawer(),
-          VerticalDivider(width: 1, color: Theme.of(context).dividerColor),
-          Expanded(child: innerWidget),
-        ],
-      );
-    }
-
-    return innerWidget;
+  }
+}
+
+class AppRootScaffold extends StatelessWidget {
+  final Widget body;
+  const AppRootScaffold({super.key, required this.body});
+
+  @override
+  Widget build(BuildContext context) {
+    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
+
+    final isCollapseDrawer =
+        ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE);
+    final isExpandDrawer = ResponsiveBreakpoints.of(context).largerThan(TABLET);
+
+    final innerWidget = isCollapseDrawer
+        ? body
+        : Row(
+            children: [
+              Container(
+                decoration: BoxDecoration(
+                  border: Border(
+                    right: BorderSide(
+                      color: Theme.of(context).dividerColor,
+                      width: 1 / devicePixelRatio,
+                    ),
+                  ),
+                ),
+                child: isExpandDrawer
+                    ? AppNavigationDrawer(elevation: 0)
+                    : AppRailNavigation(),
+              ),
+              Expanded(child: body),
+            ],
+          );
+
+    return AppBackground(
+      child: Scaffold(
+        body: Column(
+          children: [
+            ConnectionIndicator(),
+            Expanded(child: innerWidget),
+          ],
+        ),
+        drawer: !isExpandDrawer ? AppNavigationDrawer() : null,
+      ),
+    );
  }
 }
--- a/lib/widgets/post/post_comment_list.dart
+++ b/lib/widgets/post/post_comment_list.dart
@ -7,6 +7,7 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
+import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:surface/widgets/post/post_mini_editor.dart';
@ -14,7 +15,12 @@ import 'package:very_good_infinite_list/very_good_infinite_list.dart';

 class PostCommentSliverList extends StatefulWidget {
  final int parentPostId;
-  const PostCommentSliverList({super.key, required this.parentPostId});
+  final double? maxWidth;
+  const PostCommentSliverList({
+    super.key,
+    required this.parentPostId,
+    this.maxWidth,
+  });

  @override
  State<PostCommentSliverList> createState() => PostCommentSliverListState();
@ -88,7 +94,12 @@ class PostCommentSliverListState extends State<PostCommentSliverList> {
      onFetchData: _fetchPosts,
      itemBuilder: (context, idx) {
        return GestureDetector(
+          child: Container(
+            constraints: BoxConstraints(
+              maxWidth: widget.maxWidth ?? double.infinity,
+            ),
            child: PostItem(data: _posts[idx]),
+          ).center(),
          onTap: () {
            GoRouter.of(context).pushNamed(
              'postDetail',
@ -121,6 +132,7 @@ class _PostCommentListPopupState extends State<PostCommentListPopup> {

  @override
  Widget build(BuildContext context) {
+    final ua = context.watch<UserProvider>();
    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

    return Column(
@ -139,6 +151,7 @@ class _PostCommentListPopupState extends State<PostCommentListPopup> {
        Expanded(
          child: CustomScrollView(
            slivers: [
+              if (ua.isAuthorized)
                SliverToBoxAdapter(
                  child: Container(
                    height: 240,
--- a/lib/widgets/post/post_item.dart
+++ b/lib/widgets/post/post_item.dart
@ -4,7 +4,6 @@ import 'package:go_router/go_router.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:relative_time/relative_time.dart';
-import 'package:responsive_framework/responsive_framework.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
@ -34,10 +33,6 @@ class PostItem extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final isListAttachments =
-        ResponsiveBreakpoints.of(context).largerThan(MOBILE) ||
-            (data.preload?.attachments?.length ?? 0) > 1;
-
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
@ -52,7 +47,8 @@ class PostItem extends StatelessWidget {
            data: data.preload!.attachments!,
            bordered: true,
            maxHeight: 520,
-          ).padding(horizontal: isListAttachments ? 12 : 0),
+            listPadding: const EdgeInsets.symmetric(horizontal: 12),
+          ),
        _PostBottomAction(
          data: data,
          showComments: showComments,
--- a/linux/flutter/generated_plugin_registrant.cc
+++ b/linux/flutter/generated_plugin_registrant.cc
@ -7,16 +7,16 @@
 #include "generated_plugin_registrant.h"

 #include <file_selector_linux/file_selector_plugin.h>
-#include <flutter_secure_storage/flutter_secure_storage_plugin.h>
+#include <flutter_secure_storage_linux/flutter_secure_storage_linux_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>

 void fl_register_plugins(FlPluginRegistry* registry) {
  g_autoptr(FlPluginRegistrar) file_selector_linux_registrar =
      fl_plugin_registry_get_registrar_for_plugin(registry, "FileSelectorPlugin");
  file_selector_plugin_register_with_registrar(file_selector_linux_registrar);
-  g_autoptr(FlPluginRegistrar) flutter_secure_storage_registrar =
-      fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStoragePlugin");
-  flutter_secure_storage_plugin_register_with_registrar(flutter_secure_storage_registrar);
+  g_autoptr(FlPluginRegistrar) flutter_secure_storage_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStorageLinuxPlugin");
+  flutter_secure_storage_linux_plugin_register_with_registrar(flutter_secure_storage_linux_registrar);
  g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
      fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
  url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);
--- a/linux/flutter/generated_plugins.cmake
+++ b/linux/flutter/generated_plugins.cmake
@ -4,7 +4,7 @@

 list(APPEND FLUTTER_PLUGIN_LIST
  file_selector_linux
-  flutter_secure_storage
+  flutter_secure_storage_linux
  url_launcher_linux
 )

--- a/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/macos/Flutter/GeneratedPluginRegistrant.swift
@ -7,6 +7,7 @@ import Foundation

 import connectivity_plus
 import file_selector_macos
+import flutter_secure_storage_macos
 import path_provider_foundation
 import shared_preferences_foundation
 import sqflite_darwin
@ -15,6 +16,7 @@ import url_launcher_macos
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
  ConnectivityPlusPlugin.register(with: registry.registrar(forPlugin: "ConnectivityPlusPlugin"))
  FileSelectorPlugin.register(with: registry.registrar(forPlugin: "FileSelectorPlugin"))
+  FlutterSecureStoragePlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStoragePlugin"))
  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
  SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
  SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
--- a/pubspec.lock
+++ b/pubspec.lock
@ -418,10 +418,10 @@ packages:
    dependency: transitive
    description:
      name: file_selector_linux
-      sha256: "712ce7fab537ba532c8febdb1a8f167b32441e74acd68c3ccb2e36dcb52c4ab2"
+      sha256: b2b91daf8a68ecfa4a01b778a6f52edef9b14ecd506e771488ea0f2e0784198b
      url: "https://pub.dev"
    source: hosted
-    version: "0.9.3"
+    version: "0.9.3+1"
  file_selector_macos:
    dependency: transitive
    description:
@ -532,10 +532,50 @@ packages:
    dependency: "direct main"
    description:
      name: flutter_secure_storage
-      sha256: "9f3dd2ac3b6875b0fde5b04734789c3ef35ba3965c18e99dd564a7a2f8056df6"
+      sha256: "165164745e6afb5c0e3e3fcc72a012fb9e58496fb26ffb92cf22e16a821e85d0"
      url: "https://pub.dev"
    source: hosted
-    version: "4.2.1"
+    version: "9.2.2"
+  flutter_secure_storage_linux:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_linux
+      sha256: "4d91bfc23047422cbcd73ac684bc169859ee766482517c22172c86596bf1464b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
+  flutter_secure_storage_macos:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_macos
+      sha256: "1693ab11121a5f925bbea0be725abfcfbbcf36c1e29e571f84a0c0f436147a81"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
+  flutter_secure_storage_platform_interface:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_platform_interface
+      sha256: cf91ad32ce5adef6fba4d736a542baca9daf3beac4db2d04be350b87f69ac4a8
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
+  flutter_secure_storage_web:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_web
+      sha256: f4ebff989b4f07b2656fb16b47852c0aab9fed9b4ec1c70103368337bc1886a9
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
+  flutter_secure_storage_windows:
+    dependency: transitive
+    description:
+      name: flutter_secure_storage_windows
+      sha256: b20b07cb5ed4ed74fc567b78a72936203f587eba460af1df11281c9326cd3709
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
  flutter_shaders:
    dependency: transitive
    description:
@ -598,10 +638,10 @@ packages:
    dependency: "direct main"
    description:
      name: go_router
-      sha256: ce89c5a993ca5eea74535f798478502c30a625ecb10a1de4d7fef5cd1bcac2a4
+      sha256: "8ae664a70174163b9f65ea68dd8673e29db8f9095de7b5cd00e167c621f4fef5"
      url: "https://pub.dev"
    source: hosted
-    version: "14.4.1"
+    version: "14.6.0"
  google_fonts:
    dependency: "direct main"
    description:
@ -766,10 +806,10 @@ packages:
    dependency: transitive
    description:
      name: js
-      sha256: c1b2e9b5ea78c45e1a0788d29606ba27dc5f71f019f32ca5140f61ef071838cf
+      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
      url: "https://pub.dev"
    source: hosted
-    version: "0.7.1"
+    version: "0.6.7"
  json_annotation:
    dependency: "direct main"
    description:
@ -1347,10 +1387,10 @@ packages:
    dependency: transitive
    description:
      name: url_launcher_linux
-      sha256: e2b9622b4007f97f504cd64c0128309dfb978ae66adbe944125ed9e1750f06af
+      sha256: "4e9ba368772369e3e08f231d2301b4ef72b9ff87c31192ef471b380ef29a4935"
      url: "https://pub.dev"
    source: hosted
-    version: "3.2.0"
+    version: "3.2.1"
  url_launcher_macos:
    dependency: transitive
    description:
@ -1440,7 +1480,7 @@ packages:
    source: hosted
    version: "0.1.6"
  web_socket_channel:
-    dependency: transitive
+    dependency: "direct main"
    description:
      name: web_socket_channel
      sha256: "9f187088ed104edd8662ca07af4b124465893caf063ba29758f97af57e61da8f"
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -16,7 +16,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 2.0.0+2
+version: 2.0.0+4

 environment:
  sdk: ^3.5.4
@ -58,7 +58,7 @@ dependencies:
  google_fonts: ^6.2.1
  path: ^1.9.0
  relative_time: ^5.0.0
-  flutter_secure_storage: ^4.2.1
+  flutter_secure_storage: ^9.2.2
  image_picker: ^1.1.2
  cross_file: ^0.3.4+2
  file_picker: ^8.1.3
@ -73,6 +73,7 @@ dependencies:
  path_provider: ^2.1.5
  collection: ^1.18.0
  mime: ^2.0.0
+  web_socket_channel: ^3.0.1

 dev_dependencies:
  flutter_test:
--- a/windows/flutter/generated_plugin_registrant.cc
+++ b/windows/flutter/generated_plugin_registrant.cc
@ -8,6 +8,7 @@

 #include <connectivity_plus/connectivity_plus_windows_plugin.h>
 #include <file_selector_windows/file_selector_windows.h>
+#include <flutter_secure_storage_windows/flutter_secure_storage_windows_plugin.h>
 #include <url_launcher_windows/url_launcher_windows.h>

 void RegisterPlugins(flutter::PluginRegistry* registry) {
@ -15,6 +16,8 @@ void RegisterPlugins(flutter::PluginRegistry* registry) {
      registry->GetRegistrarForPlugin("ConnectivityPlusWindowsPlugin"));
  FileSelectorWindowsRegisterWithRegistrar(
      registry->GetRegistrarForPlugin("FileSelectorWindows"));
+  FlutterSecureStorageWindowsPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("FlutterSecureStorageWindowsPlugin"));
  UrlLauncherWindowsRegisterWithRegistrar(
      registry->GetRegistrarForPlugin("UrlLauncherWindows"));
 }
--- a/windows/flutter/generated_plugins.cmake
+++ b/windows/flutter/generated_plugins.cmake
@ -5,6 +5,7 @@
 list(APPEND FLUTTER_PLUGIN_LIST
  connectivity_plus
  file_selector_windows
+  flutter_secure_storage_windows
  url_launcher_windows
 )
Author	SHA1	Message	Date
LittleSheep	fa73a28324	🚀 Launch 2.0.0+4 (canary preview)	2024-11-15 00:55:49 +08:00
LittleSheep	d945b103ca	✨ Websocket connection status indicator	2024-11-15 00:52:31 +08:00
LittleSheep	8bc0da5188	✨ Basic websocket connection	2024-11-15 00:24:46 +08:00
LittleSheep	2e68d227a0	⬆️ Upgrade deps	2024-11-14 23:25:02 +08:00
LittleSheep	b8245b00b6	💄 Post item maxWidth	2024-11-14 22:49:17 +08:00
LittleSheep	462e818078	💄 Optimize attachment list	2024-11-14 22:42:06 +08:00
LittleSheep	e4582b7d25	♻️ Optimized responsive navigation	2024-11-14 22:21:13 +08:00
LittleSheep	00eef6e45a	🐛 Fix app drawer show on mobile	2024-11-14 13:02:42 +08:00
LittleSheep	9498d428cd	🐛 Use only lang code on localization to fix not found bug	2024-11-14 00:40:58 +08:00