♻️ Refactor the way to set thumbnail

en and zh

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -0,0 +1,87 @@
+name: Bug report
+description: Create a report to help us address issues you are facing
+title: "[Bug] "
+labels: [Bug]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to make us better!
+
+  - type: checkboxes
+    id: duplication
+    attributes:
+      label: ⠀
+      options:
+        - label: This issue is not duplicated with any other open or closed issues
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is
+      placeholder: |
+        Example:
+          App crashes on startup every time after changing settings.
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen
+      placeholder: |
+        Example:
+          App started normally, everything worked fine.
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the bug
+      placeholder: |
+        Example:
+          1. Change "HyperNet Server" to "127.0.1" in "Network" settings
+          2. Restart the app
+          3. Crash
+    validations:
+      required: true
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Device information
+      description: Provide details about your system environment
+      placeholder: |
+        Example:
+          Device: Google Pixel 8 Pro
+          System: Baklava (BP22.250124.009)
+          Version*: 2.3.2
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem
+      placeholder: |
+        Example:
+          setting_items.jpg
+          crash_screen.jpg
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here
+      placeholder: |
+        Crash report or other useful informations
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/bug_report_zh.yaml

@@ -0,0 +1,83 @@
+name: 问题反馈
+description: 提交 Bug 或其它问题的反馈
+title: "[Bug] 标题"
+labels: [Bug]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        非常感谢，你将要提交的反馈会让我们变得更好！
+
+  - type: checkboxes
+    id: duplication
+    attributes:
+      label: ⠀
+      options:
+        - label: 我已经搜索并确认此 issue 不与其它任何 issue 重复
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: 问题描述
+      description: 清楚且详细地描述你遇到的 Bug 或问题
+      placeholder: |
+        发生了什么？生动地描述你所看到的一切
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: 期望表现
+      description: 清楚且详细地描述你期望发生的事
+      placeholder: |
+        什么功能应该正常运行，运行后会有什么结果
+        什么界面应该正常显示，应该会显示什么内容
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: 复现步骤
+      description: 能够复现问题的每一步
+      placeholder: |
+        1. 尽可能详细地描述每一步
+        2. 更改的设置、添加的好友...
+        3. 这里也可以描述你看到的界面
+    validations:
+      required: true
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: 环境/版本
+      description: 提供运行时的环境信息
+      placeholder: |
+        示例:
+          设备型号: Google Pixel 8 Pro
+          系统板本: Baklava (BP22.250124.009)
+          程序版本: 2.3.2
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: 屏幕截图/录制
+      description: 提供截屏或录屏来更好地描述问题
+      placeholder: |
+        错误显示的界面/崩溃时的界面、先前改动的设置
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: 更多信息
+      description: 任何与问题有关且有用的信息
+      placeholder: |
+        崩溃报告、日志，或是你的用户名
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Solsynth Releases
+    url: https://files.solsynth.dev/production01/solian
+    about: Another place to download released apps

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -0,0 +1,59 @@
+name: Feature request
+description: Suggest features you want to add or suggest to modify existing features
+title: "[Feature] "
+labels: [Feature]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to make us better!
+
+  - type: checkboxes
+    id: duplication
+    attributes:
+      label: ⠀
+      options:
+        - label: This issue is not duplicated with any other open or closed issues
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the feature
+      description: A clear and concise description of what the feature is
+      placeholder: |
+        Example:
+          A Quick Settings tile to start the service, long press to launch the app.
+    validations:
+      required: true
+
+  - type: textarea
+    id: reasons
+    attributes:
+      label: Reason for adding
+      description: Explain why this feature would be useful to you
+      placeholder: |
+        Example:
+          Start the service quickly from the Quick Settings tile and save lots of time.
+    validations:
+      required: true
+
+  - type: textarea
+    id: examples
+    attributes:
+      label: Example(s)
+      description: Post screenshots/drawings/links/etc of the feature request, or proof-of-concept images about the feature
+      placeholder: |
+        Example:
+          shazam_toggle.jpg
+          nekobox_switch.jpg
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the feature here
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature_request_zh.yaml

@@ -0,0 +1,49 @@
+name: 功能建议
+description: 提出你想要添加或更改的功能
+title: "[Feature] 标题"
+labels: [Feature]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        非常感谢，你将要提交的请求会让我们变得更好！
+
+  - type: checkboxes
+    id: duplication
+    attributes:
+      label: ⠀
+      options:
+        - label: 我已经搜索并确认此 issue 不与其它任何 issue 重复
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: 功能描述
+      description: 清楚且详细地描述要添加/更改后的功能
+    validations:
+      required: true
+
+  - type: textarea
+    id: reasons
+    attributes:
+      label: 添加/更改理由
+      description: 解释为什么要这样做，对用户有什么好处
+    validations:
+      required: true
+
+  - type: textarea
+    id: examples
+    attributes:
+      label: 功能示例
+      description: 相似/已存在功能的截图，或画出大致的界面
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: 更多信息
+      description: 任何与功能有关且有用的信息，或已存在功能的代码/仓库
+    validations:
+      required: false

api/Paperclip/Stickers/Create Sticker.bru

@@ -12,9 +12,9 @@ post {
 
 body:json {
   {
-    "alias": "BaLoading",
-    "name": "BaLoading",
-    "attachment_id": "2JCI2uh21mKkfk9P",
-    "pack_id": 3
+    "alias": "Deadge",
+    "name": "Dead",
+    "attachment_id": "pcbFd0u4zgdM39HM",
+    "pack_id": 4
   }
 }

api/Passport/Developer Notify One User.bru

@@ -5,7 +5,7 @@ meta {
 }
 
 post {
-  url: {{endpoint}}/cgi/id/dev/notify/122
+  url: {{endpoint}}/cgi/id/dev/notify/328
   body: json
   auth: inherit
 }
@@ -15,9 +15,9 @@ body:json {
     "client_id": "{{third_client_id}}",
     "client_secret":"{{third_client_tk}}",
     "type": "general",
-    "subject": "处理该帐号 @solian 的决定",
-    "subtitle": "违反用户协议",
-    "content": "您的帐号违反了我们用户协议中关于冒充我们官方的行为，至此做出停权的决定。还请见谅。该决定是最终决定，不接受上诉。",
+    "subject": "处理该发布者 @vedal987 的决定",
+    "subtitle": "一条来自 Solar Network 客户支持的信息",
+    "content": "您的发布者违反了我们用户协议中的「禁止冒充他人」的相关条例，经管理决定，将相关内容隐藏。冒充他人的判定无论作者是否有主观意志，只要造成了误解我们就有责任处理。希望您能理解，本次决定未作出任何帐号相关的连带处罚。",
     "priority": 10
   }
 }

assets/translations/en-US.json

@@ -548,6 +548,7 @@
   "termAcceptNextWithAgree": "By clicking the \"Next\", it means you agree to our terms and its updates.",
   "unauthorized": "Unauthorized",
   "unauthorizedDescription": "Login to explore the entire Solar Network.",
+  "projectDetail": "Project Details",
   "serviceStatus": "Service Status",
   "termRelated": "Related Terms",
   "appDetails": "App Details",
@@ -665,5 +666,10 @@
     "zero": "No views",
     "one": "{} view",
     "other": "{} views"
-  }
+  },
+  "attachmentBillingUploaded": "Used space",
+  "attachmentBillingDiscount": "Free space",
+  "attachmentBillingRatio": "Usage",
+  "attachmentBillingHint": "Sliding Window Pricing®\nFees will only apply if the size of the file uploaded within 24 hours exceeds the free space.",
+  "postThumbnail": "Post Thumbnail"
 }

assets/translations/zh-CN.json

@@ -546,6 +546,7 @@
   "termAcceptNextWithAgree": "点击 “下一步”，即表示你同意我们的各项条款，包括其之后的更新。",
   "unauthorized": "未登陆",
   "unauthorizedDescription": "登陆以探索整个 Solar Network。",
+  "projectDetail": "项目详情",
   "serviceStatus": "服务状态",
   "termRelated": "相关条款",
   "appDetails": "应用程序详情",
@@ -664,5 +665,9 @@
     "zero": "{} 次浏览",
     "one": "{} 次浏览",
     "other": "{} 次浏览"
-  }
+  },
+  "attachmentBillingUploaded": "已占用的字节数",
+  "attachmentBillingDiscount": "免费的字节数",
+  "attachmentBillingHint": "滑动窗口计价®\n在24小时内上传的文件大小超出免费空间才会适用扣费。",
+  "postThumbnail": "帖子缩略图"
 }

assets/translations/zh-HK.json

@@ -546,6 +546,7 @@
   "termAcceptNextWithAgree": "點擊 “下一步”，即表示你同意我們的各項條款，包括其之後的更新。",
   "unauthorized": "未登陸",
   "unauthorizedDescription": "登陸以探索整個 Solar Network。",
+  "projectDetail": "項目詳情",
   "serviceStatus": "服務狀態",
   "termRelated": "相關條款",
   "appDetails": "應用程序詳情",
@@ -664,5 +665,9 @@
     "zero": "{} 次瀏覽",
     "one": "{} 次瀏覽",
     "other": "{} 次瀏覽"
-  }
+  },
+  "attachmentBillingUploaded": "已佔用的字節數",
+  "attachmentBillingDiscount": "免費的字節數",
+  "attachmentBillingHint": "滑動窗口計價®\n在24小時內上傳的文件大小超出免費空間才會適用扣費。",
+  "postThumbnail": "帖子縮略圖"
 }

assets/translations/zh-TW.json

@@ -546,6 +546,7 @@
   "termAcceptNextWithAgree": "點擊 “下一步”，即表示你同意我們的各項條款，包括其之後的更新。",
   "unauthorized": "未登陸",
   "unauthorizedDescription": "登陸以探索整個 Solar Network。",
+  "projectDetail": "項目詳情",
   "serviceStatus": "服務狀態",
   "termRelated": "相關條款",
   "appDetails": "應用程序詳情",
@@ -664,5 +665,9 @@
     "zero": "{} 次瀏覽",
     "one": "{} 次瀏覽",
     "other": "{} 次瀏覽"
-  }
+  },
+  "attachmentBillingUploaded": "已佔用的字節數",
+  "attachmentBillingDiscount": "免費的字節數",
+  "attachmentBillingHint": "滑動窗口計價®\n在24小時內上傳的文件大小超出免費空間才會適用扣費。",
+  "postThumbnail": "帖子縮略圖"
 }

lib/controllers/post_write_controller.dart

@@ -161,7 +161,8 @@ class PostWriteController extends ChangeNotifier {
   ContentInsertionConfiguration get contentInsertionConfiguration => ContentInsertionConfiguration(
         onContentInserted: (KeyboardInsertedContent content) {
           if (content.hasData) {
-        addAttachments([PostWriteMedia.fromBytes(content.data!, 'attachmentInsertedImage'.tr(), SnMediaType.image)]);
+            addAttachments(
+                [PostWriteMedia.fromBytes(content.data!, 'attachmentInsertedImage'.tr(), SnMediaType.image)]);
           }
         },
       );
@@ -571,17 +572,8 @@ class PostWriteController extends ChangeNotifier {
     notifyListeners();
   }
 
-  void setThumbnail(int? idx) {
-    if (idx == null) {
-      attachments.add(thumbnail!);
-      thumbnail = null;
-    } else {
-      if (thumbnail != null) {
-        attachments.add(thumbnail!);
-      }
-      thumbnail = attachments[idx];
-      attachments.removeAt(idx);
-    }
+  void setThumbnail(SnAttachment? value) {
+    thumbnail = value == null ? null : PostWriteMedia(value);
     notifyListeners();
   }
 

lib/main.dart

@@ -87,7 +87,7 @@ void main() async {
   Hive.registerAdapter(SnChannelMemberImplAdapter());
   Hive.registerAdapter(SnChatMessageImplAdapter());
 
-  if (kIsWeb && !Platform.isLinux) {
+  if (!kIsWeb && !Platform.isLinux) {
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions.currentPlatform,
     );
@@ -427,8 +427,16 @@ class _AppSplashScreenState extends State<_AppSplashScreen> with TrayListener {
         });
         return false;
       },
-      child: SizeChangedLayoutNotifier(
+      child: OrientationBuilder(
+        builder: (context, orientation) {
+          final cfg = context.read<ConfigProvider>();
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            cfg.calcDrawerSize(context);
+          });
+          return SizeChangedLayoutNotifier(
             child: widget.child,
+          );
+        },
       ),
     );
   }

lib/providers/config.dart

@@ -17,6 +17,7 @@ const kAppDrawerPreferCollapse = 'app_drawer_prefer_collapse';
 const kAppNotifyWithHaptic = 'app_notify_with_haptic';
 const kAppExpandPostLink = 'app_expand_post_link';
 const kAppExpandChatLink = 'app_expand_chat_link';
+const kAppRealmCompactView = 'app_realm_compact_view';
 
 const Map<String, FilterQuality> kImageQualityLevel = {
   'settingsImageQualityLowest': FilterQuality.none,
@@ -72,6 +73,13 @@ class ConfigProvider extends ChangeNotifier {
     return prefs.getString(kNetworkServerStoreKey) ?? kNetworkServerDefault;
   }
 
+  bool get realmCompactView {
+    return prefs.getBool(kAppRealmCompactView) ?? false;
+  }
+  set realmCompactView(bool value) {
+    prefs.setBool(kAppRealmCompactView, value);
+  }
+
   set serverUrl(String url) {
     prefs.setString(kNetworkServerStoreKey, url);
     _home.saveWidgetData("nex_server_url", url);

lib/screens/album.dart

@@ -2,6 +2,9 @@ import 'package:dismissible_page/dismissible_page.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+import 'package:gap/gap.dart';
+import 'package:google_fonts/google_fonts.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_network.dart';
@@ -27,9 +30,23 @@ class _AlbumScreenState extends State<AlbumScreen> {
   bool _isBusy = false;
   int? _totalCount;
 
+  SnAttachmentBilling? _billing;
+
   final List<SnAttachment> _attachments = List.empty(growable: true);
   final List<String> _heroTags = List.empty(growable: true);
 
+  Future<void> _fetchBillingStatus() async {
+    try {
+      final sn = context.read<SnNetworkProvider>();
+      final resp = await sn.client.get('/cgi/uc/billing');
+      final out = SnAttachmentBilling.fromJson(resp.data);
+      setState(() => _billing = out);
+    } catch (err) {
+      if (!mounted) return;
+      context.showErrorDialog(err);
+    }
+  }
+
   Future<void> _fetchAttachments() async {
     setState(() => _isBusy = true);
 
@@ -62,6 +79,7 @@ class _AlbumScreenState extends State<AlbumScreen> {
   @override
   void initState() {
     super.initState();
+    _fetchBillingStatus();
     _fetchAttachments();
     _scrollController.addListener(() {
       if (_scrollController.position.atEdge) {
@@ -91,6 +109,48 @@ class _AlbumScreenState extends State<AlbumScreen> {
             leading: AutoAppBarLeading(),
             title: Text('screenAlbum').tr(),
           ),
+          SliverToBoxAdapter(
+            child: Card(
+              child: Row(
+                children: [
+                  SizedBox(
+                    width: 80,
+                    height: 80,
+                    child: CircularProgressIndicator(
+                      value: _billing?.includedRatio ?? 0,
+                      strokeWidth: 8,
+                      backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh,
+                    ),
+                  ).padding(all: 12),
+                  const Gap(24),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text('attachmentBillingUploaded').tr().bold(),
+                        Text(
+                          (_billing?.currentBytes ?? 0).formatBytes(decimals: 4),
+                          style: GoogleFonts.robotoMono(),
+                        ),
+                        Text('attachmentBillingDiscount').tr().bold(),
+                        Text(
+                          '${(_billing?.discountFileSize ?? 0).formatBytes(decimals: 2)} · ${((_billing?.includedRatio ?? 0) * 100).toStringAsFixed(2)}%',
+                          style: GoogleFonts.robotoMono(),
+                        ),
+                      ],
+                    ),
+                  ),
+                  Tooltip(
+                    message: 'attachmentBillingHint'.tr(),
+                    child: IconButton(
+                      icon: const Icon(Symbols.info),
+                      onPressed: () {},
+                    ),
+                  ),
+                ],
+              ).padding(horizontal: 24, vertical: 8),
+            ),
+          ),
           SliverMasonryGrid.extent(
             childCount: _attachments.length,
             maxCrossAxisExtent: 320,

lib/screens/chat/channel_detail.dart

@@ -104,7 +104,7 @@ class _ChannelDetailScreenState extends State<ChannelDetailScreen> {
     try {
       final sn = context.read<SnNetworkProvider>();
       await sn.client.delete(
-        '/cgi/im/channels/${_channel!.realm?.alias ?? 'global'}/${_channel!.id}/members/me',
+        '/cgi/im/channels/${_channel!.realm?.alias ?? 'global'}/${_channel!.alias}/members/me',
       );
       if (!mounted) return;
       Navigator.pop(context, false);

lib/screens/chat/manage.dart

@@ -95,6 +95,10 @@ class _ChatManageScreenState extends State<ChatManageScreen> {
       'description': _descriptionController.text,
       'is_public': _isPublic,
       'is_community': _isCommunity,
+      if (_editingChannel != null && _belongToRealm == null)
+        'new_belongs_realm': 'global'
+      else if (_editingChannel != null && _belongToRealm?.id != _editingChannel?.realm?.id)
+        'new_belongs_realm': _belongToRealm!.alias,
     };
 
     try {
@@ -171,7 +175,6 @@ class _ChatManageScreenState extends State<ChatManageScreen> {
                 items: [
                   ...(_realms?.map(
                         (SnRealm item) => DropdownMenuItem<SnRealm>(
-                          enabled: _editingChannel == null || _editingChannel?.realmId == item.id,
                           value: item,
                           child: Row(
                             children: [
@@ -204,7 +207,6 @@ class _ChatManageScreenState extends State<ChatManageScreen> {
                       ) ??
                       []),
                   DropdownMenuItem<SnRealm>(
-                    enabled: _editingChannel == null,
                     value: null,
                     child: Row(
                       children: [

lib/screens/post/post_editor.dart

@@ -161,6 +161,20 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
     }
   }
 
+  void _showThumbnailEditorDialog() async {
+    final attachment = await showDialog<SnAttachment?>(
+      context: context,
+      builder: (context) => AttachmentInputDialog(
+        title: 'postThumbnail'.tr(),
+        pool: 'interactive',
+        mediaType: SnMediaType.image,
+      ),
+    );
+    if (!context.mounted) return;
+    if (attachment == null) return;
+    _writeController.setThumbnail(attachment);
+  }
+
   @override
   void dispose() {
     _writeController.dispose();
@@ -344,15 +358,11 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
                         left: 0,
                         right: 0,
                         child: PostMediaPendingList(
-                          thumbnail: _writeController.thumbnail,
                           attachments: _writeController.attachments,
                           isBusy: _writeController.isBusy,
                           onUpload: (int idx) async {
                             await _writeController.uploadSingleAttachment(context, idx);
                           },
-                          onPostSetThumbnail: (int? idx) {
-                            _writeController.setThumbnail(idx);
-                          },
                           onInsertLink: (int idx) async {
                             _writeController.contentController.text +=
                                 '\n![](solink://attachments/${_writeController.attachments[idx].attachment!.rid})';
@@ -453,6 +463,22 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
                                         _showPollEditorDialog();
                                       },
                                     ),
+                                  if (_writeController.mode == 'articles')
+                                    IconButton(
+                                      icon: Icon(Symbols.image, color: Theme.of(context).colorScheme.primary),
+                                      style: ButtonStyle(
+                                        backgroundColor: _writeController.thumbnail == null
+                                            ? null
+                                            : WidgetStatePropertyAll(Theme.of(context).colorScheme.surfaceContainer),
+                                      ),
+                                      onPressed: () {
+                                        if (_writeController.thumbnail != null) {
+                                          _writeController.setThumbnail(null);
+                                          return;
+                                        }
+                                        _showThumbnailEditorDialog();
+                                      },
+                                    ),
                                 ],
                               ),
                             ),
@@ -668,7 +694,24 @@ class _PostArticleEditor extends StatelessWidget {
         onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
         contentInsertionConfiguration: controller.contentInsertionConfiguration,
       ).padding(horizontal: 16),
-      const Gap(4),
+      if (controller.thumbnail != null)
+        Container(
+          margin: const EdgeInsets.only(left: 12, right: 12, top: 8, bottom: 4),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(8),
+            border: Border.all(color: Theme.of(context).dividerColor),
+          ),
+          child: ClipRRect(
+            borderRadius: const BorderRadius.all(Radius.circular(8)),
+            child: AspectRatio(
+              aspectRatio: 16 / 9,
+              child: AttachmentItem(
+                data: controller.thumbnail!.attachment!,
+                heroTag: "post-editor-thumbnail-preview",
+              ),
+            ),
+          ),
+        ),
     ];
 
     if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {

lib/screens/realm.dart

@@ -4,17 +4,16 @@ 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/config.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/realm.dart';
-import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/app_bar_leading.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/realm/realm_item.dart';
 import 'package:surface/widgets/unauthorized_hint.dart';
-import 'package:surface/widgets/universal_image.dart';
 
 class RealmScreen extends StatefulWidget {
   const RealmScreen({super.key});
@@ -75,12 +74,12 @@ class _RealmScreenState extends State<RealmScreen> {
   @override
   void initState() {
     super.initState();
+    _isCompactView = context.read<ConfigProvider>().realmCompactView;
     _fetchRealms();
   }
 
   @override
   Widget build(BuildContext context) {
-    final sn = context.read<SnNetworkProvider>();
     final ua = context.read<UserProvider>();
 
     if (!ua.isAuthorized) {
@@ -110,6 +109,7 @@ class _RealmScreenState extends State<RealmScreen> {
             icon: !_isCompactView ? const Icon(Symbols.view_list) : const Icon(Symbols.view_module),
             onPressed: () {
               setState(() => _isCompactView = !_isCompactView);
+              context.read<ConfigProvider>().realmCompactView = _isCompactView;
             },
           ),
           const Gap(8),
@@ -134,21 +134,12 @@ class _RealmScreenState extends State<RealmScreen> {
                   itemCount: _realms?.length ?? 0,
                   itemBuilder: (context, idx) {
                     final realm = _realms![idx];
-                    if (_isCompactView) {
-                      return ListTile(
-                        contentPadding: const EdgeInsets.symmetric(horizontal: 16),
-                        leading: AccountImage(
-                          content: realm.avatar,
-                          fallbackWidget: const Icon(Symbols.group, size: 20),
-                        ),
-                        title: Text(realm.name),
-                        subtitle: Text(
-                          realm.description,
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                        trailing: PopupMenuButton(
-                          itemBuilder: (BuildContext context) => [
+
+                    return RealmItemWidget(
+                      showPopularity: false,
+                      item: realm,
+                      isListView: _isCompactView,
+                      actionListView: [
                         PopupMenuItem(
                           child: Row(
                             children: [
@@ -181,82 +172,8 @@ class _RealmScreenState extends State<RealmScreen> {
                           },
                         ),
                       ],
-                        ),
-                        onTap: () {
-                          GoRouter.of(context).pushNamed(
-                            'realmDetail',
-                            pathParameters: {'alias': realm.alias},
-                          ).then((value) {
-                            if (value == true) {
-                              _fetchRealms();
-                            }
-                          });
-                        },
+                      onUpdate: _fetchRealms,
                     );
-                    }
-
-                    return Container(
-                      constraints: BoxConstraints(maxWidth: 640),
-                      child: Card(
-                        margin: const EdgeInsets.all(12),
-                        child: InkWell(
-                          borderRadius: const BorderRadius.all(Radius.circular(8)),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              AspectRatio(
-                                aspectRatio: 16 / 7,
-                                child: Stack(
-                                  clipBehavior: Clip.none,
-                                  fit: StackFit.expand,
-                                  children: [
-                                    ClipRRect(
-                                      borderRadius: const BorderRadius.all(Radius.circular(8)),
-                                      child: Container(
-                                        color: Theme.of(context).colorScheme.surfaceContainer,
-                                        child: (realm.banner?.isEmpty ?? true)
-                                            ? const SizedBox.shrink()
-                                            : AutoResizeUniversalImage(
-                                                sn.getAttachmentUrl(realm.banner!),
-                                                fit: BoxFit.cover,
-                                              ),
-                                      ),
-                                    ),
-                                    Positioned(
-                                      bottom: -30,
-                                      left: 18,
-                                      child: AccountImage(
-                                        content: realm.avatar,
-                                        radius: 24,
-                                        fallbackWidget: const Icon(Symbols.group, size: 24),
-                                      ),
-                                    ),
-                                  ],
-                                ),
-                              ),
-                              const Gap(20 + 12),
-                              Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                children: [
-                                  Text(realm.name).textStyle(Theme.of(context).textTheme.titleMedium!),
-                                  Text(realm.description).textStyle(Theme.of(context).textTheme.bodySmall!),
-                                ],
-                              ).padding(horizontal: 24, bottom: 14),
-                            ],
-                          ),
-                          onTap: () {
-                            GoRouter.of(context).pushNamed(
-                              'realmDetail',
-                              pathParameters: {'alias': realm.alias},
-                            ).then((value) {
-                              if (value == true) {
-                                _fetchRealms();
-                              }
-                            });
-                          },
-                        ),
-                      ),
-                    ).center();
                   },
                 ),
               ),

lib/screens/realm/realm_discovery.dart

@@ -4,6 +4,7 @@ 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/config.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/chat.dart';
@@ -12,6 +13,7 @@ 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/realm/realm_item.dart';
 import 'package:surface/widgets/universal_image.dart';
 
 class RealmDiscoveryScreen extends StatefulWidget {
@@ -24,6 +26,7 @@ class RealmDiscoveryScreen extends StatefulWidget {
 class _RealmDiscoveryScreenState extends State<RealmDiscoveryScreen> {
   List<SnRealm>? _realms;
   bool _isBusy = false;
+  bool _isCompactView = false;
 
   Future<void> _fetchRealms() async {
     try {
@@ -44,16 +47,25 @@ class _RealmDiscoveryScreenState extends State<RealmDiscoveryScreen> {
   @override
   void initState() {
     super.initState();
+    _isCompactView = context.read<ConfigProvider>().realmCompactView;
     _fetchRealms();
   }
 
   @override
   Widget build(BuildContext context) {
-    final sn = context.read<SnNetworkProvider>();
-
     return AppScaffold(
       appBar: AppBar(
         title: Text('screenRealmDiscovery').tr(),
+        actions: [
+          IconButton(
+            icon: _isCompactView ? const Icon(Symbols.view_list) : const Icon(Symbols.view_module),
+            onPressed: () {
+              setState(() => _isCompactView = !_isCompactView);
+              context.read<ConfigProvider>().realmCompactView = _isCompactView;
+            },
+          ),
+          const Gap(8),
+        ],
       ),
       body: Column(
         children: [
@@ -66,64 +78,16 @@ class _RealmDiscoveryScreenState extends State<RealmDiscoveryScreen> {
                 itemCount: _realms?.length ?? 0,
                 itemBuilder: (context, idx) {
                   final realm = _realms![idx];
-                  return Container(
-                    constraints: BoxConstraints(maxWidth: 640),
-                    child: Card(
-                      margin: const EdgeInsets.all(12),
-                      child: InkWell(
-                        borderRadius: const BorderRadius.all(Radius.circular(8)),
-                        child: Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            AspectRatio(
-                              aspectRatio: 16 / 7,
-                              child: Stack(
-                                clipBehavior: Clip.none,
-                                fit: StackFit.expand,
-                                children: [
-                                  ClipRRect(
-                                    borderRadius: const BorderRadius.all(Radius.circular(8)),
-                                    child: Container(
-                                      color: Theme.of(context).colorScheme.surfaceContainer,
-                                      child: (realm.banner?.isEmpty ?? true)
-                                          ? const SizedBox.shrink()
-                                          : AutoResizeUniversalImage(
-                                              sn.getAttachmentUrl(realm.banner!),
-                                              fit: BoxFit.cover,
-                                            ),
-                                    ),
-                                  ),
-                                  Positioned(
-                                    bottom: -30,
-                                    left: 18,
-                                    child: AccountImage(
-                                      content: realm.avatar,
-                                      radius: 24,
-                                      fallbackWidget: const Icon(Symbols.group, size: 24),
-                                    ),
-                                  ),
-                                ],
-                              ),
-                            ),
-                            const Gap(20 + 12),
-                            Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                Text(realm.name).textStyle(Theme.of(context).textTheme.titleMedium!),
-                                Text(realm.description).textStyle(Theme.of(context).textTheme.bodySmall!),
-                              ],
-                            ).padding(horizontal: 24, bottom: 14),
-                          ],
-                        ),
+                  return RealmItemWidget(
+                    item: realm,
+                    isListView: _isCompactView,
                     onTap: () {
                       showModalBottomSheet(
                         context: context,
                         builder: (context) => _RealmJoinPopup(realm: realm),
                       );
                     },
-                      ),
-                    ),
-                  ).center();
+                  );
                 },
               ),
             ),
@@ -235,6 +199,8 @@ class _RealmJoinPopupState extends State<_RealmJoinPopup> {
                   ),
                   Text(
                     widget.realm.description,
+                    maxLines: 3,
+                    overflow: TextOverflow.ellipsis,
                     style: Theme.of(context).textTheme.bodyMedium,
                   ),
                 ],

lib/types/attachment.dart

@@ -177,3 +177,14 @@ class SnStickerPack with _$SnStickerPack {
 
   factory SnStickerPack.fromJson(Map<String, Object?> json) => _$SnStickerPackFromJson(json);
 }
+
+@freezed
+class SnAttachmentBilling with _$SnAttachmentBilling {
+  const factory SnAttachmentBilling({
+    required int currentBytes,
+    required int discountFileSize,
+    required double includedRatio,
+  }) = _SnAttachmentBilling;
+
+  factory SnAttachmentBilling.fromJson(Map<String, Object?> json) => _$SnAttachmentBillingFromJson(json);
+}

lib/types/attachment.freezed.dart

@@ -3007,3 +3007,195 @@ abstract class _SnStickerPack implements SnStickerPack {
   _$$SnStickerPackImplCopyWith<_$SnStickerPackImpl> get copyWith =>
       throw _privateConstructorUsedError;
 }
+
+SnAttachmentBilling _$SnAttachmentBillingFromJson(Map<String, dynamic> json) {
+  return _SnAttachmentBilling.fromJson(json);
+}
+
+/// @nodoc
+mixin _$SnAttachmentBilling {
+  int get currentBytes => throw _privateConstructorUsedError;
+  int get discountFileSize => throw _privateConstructorUsedError;
+  double get includedRatio => throw _privateConstructorUsedError;
+
+  /// Serializes this SnAttachmentBilling to a JSON map.
+  Map<String, dynamic> toJson() => throw _privateConstructorUsedError;
+
+  /// Create a copy of SnAttachmentBilling
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  $SnAttachmentBillingCopyWith<SnAttachmentBilling> get copyWith =>
+      throw _privateConstructorUsedError;
+}
+
+/// @nodoc
+abstract class $SnAttachmentBillingCopyWith<$Res> {
+  factory $SnAttachmentBillingCopyWith(
+          SnAttachmentBilling value, $Res Function(SnAttachmentBilling) then) =
+      _$SnAttachmentBillingCopyWithImpl<$Res, SnAttachmentBilling>;
+  @useResult
+  $Res call({int currentBytes, int discountFileSize, double includedRatio});
+}
+
+/// @nodoc
+class _$SnAttachmentBillingCopyWithImpl<$Res, $Val extends SnAttachmentBilling>
+    implements $SnAttachmentBillingCopyWith<$Res> {
+  _$SnAttachmentBillingCopyWithImpl(this._value, this._then);
+
+  // ignore: unused_field
+  final $Val _value;
+  // ignore: unused_field
+  final $Res Function($Val) _then;
+
+  /// Create a copy of SnAttachmentBilling
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? currentBytes = null,
+    Object? discountFileSize = null,
+    Object? includedRatio = null,
+  }) {
+    return _then(_value.copyWith(
+      currentBytes: null == currentBytes
+          ? _value.currentBytes
+          : currentBytes // ignore: cast_nullable_to_non_nullable
+              as int,
+      discountFileSize: null == discountFileSize
+          ? _value.discountFileSize
+          : discountFileSize // ignore: cast_nullable_to_non_nullable
+              as int,
+      includedRatio: null == includedRatio
+          ? _value.includedRatio
+          : includedRatio // ignore: cast_nullable_to_non_nullable
+              as double,
+    ) as $Val);
+  }
+}
+
+/// @nodoc
+abstract class _$$SnAttachmentBillingImplCopyWith<$Res>
+    implements $SnAttachmentBillingCopyWith<$Res> {
+  factory _$$SnAttachmentBillingImplCopyWith(_$SnAttachmentBillingImpl value,
+          $Res Function(_$SnAttachmentBillingImpl) then) =
+      __$$SnAttachmentBillingImplCopyWithImpl<$Res>;
+  @override
+  @useResult
+  $Res call({int currentBytes, int discountFileSize, double includedRatio});
+}
+
+/// @nodoc
+class __$$SnAttachmentBillingImplCopyWithImpl<$Res>
+    extends _$SnAttachmentBillingCopyWithImpl<$Res, _$SnAttachmentBillingImpl>
+    implements _$$SnAttachmentBillingImplCopyWith<$Res> {
+  __$$SnAttachmentBillingImplCopyWithImpl(_$SnAttachmentBillingImpl _value,
+      $Res Function(_$SnAttachmentBillingImpl) _then)
+      : super(_value, _then);
+
+  /// Create a copy of SnAttachmentBilling
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? currentBytes = null,
+    Object? discountFileSize = null,
+    Object? includedRatio = null,
+  }) {
+    return _then(_$SnAttachmentBillingImpl(
+      currentBytes: null == currentBytes
+          ? _value.currentBytes
+          : currentBytes // ignore: cast_nullable_to_non_nullable
+              as int,
+      discountFileSize: null == discountFileSize
+          ? _value.discountFileSize
+          : discountFileSize // ignore: cast_nullable_to_non_nullable
+              as int,
+      includedRatio: null == includedRatio
+          ? _value.includedRatio
+          : includedRatio // ignore: cast_nullable_to_non_nullable
+              as double,
+    ));
+  }
+}
+
+/// @nodoc
+@JsonSerializable()
+class _$SnAttachmentBillingImpl implements _SnAttachmentBilling {
+  const _$SnAttachmentBillingImpl(
+      {required this.currentBytes,
+      required this.discountFileSize,
+      required this.includedRatio});
+
+  factory _$SnAttachmentBillingImpl.fromJson(Map<String, dynamic> json) =>
+      _$$SnAttachmentBillingImplFromJson(json);
+
+  @override
+  final int currentBytes;
+  @override
+  final int discountFileSize;
+  @override
+  final double includedRatio;
+
+  @override
+  String toString() {
+    return 'SnAttachmentBilling(currentBytes: $currentBytes, discountFileSize: $discountFileSize, includedRatio: $includedRatio)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _$SnAttachmentBillingImpl &&
+            (identical(other.currentBytes, currentBytes) ||
+                other.currentBytes == currentBytes) &&
+            (identical(other.discountFileSize, discountFileSize) ||
+                other.discountFileSize == discountFileSize) &&
+            (identical(other.includedRatio, includedRatio) ||
+                other.includedRatio == includedRatio));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode =>
+      Object.hash(runtimeType, currentBytes, discountFileSize, includedRatio);
+
+  /// Create a copy of SnAttachmentBilling
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  @pragma('vm:prefer-inline')
+  _$$SnAttachmentBillingImplCopyWith<_$SnAttachmentBillingImpl> get copyWith =>
+      __$$SnAttachmentBillingImplCopyWithImpl<_$SnAttachmentBillingImpl>(
+          this, _$identity);
+
+  @override
+  Map<String, dynamic> toJson() {
+    return _$$SnAttachmentBillingImplToJson(
+      this,
+    );
+  }
+}
+
+abstract class _SnAttachmentBilling implements SnAttachmentBilling {
+  const factory _SnAttachmentBilling(
+      {required final int currentBytes,
+      required final int discountFileSize,
+      required final double includedRatio}) = _$SnAttachmentBillingImpl;
+
+  factory _SnAttachmentBilling.fromJson(Map<String, dynamic> json) =
+      _$SnAttachmentBillingImpl.fromJson;
+
+  @override
+  int get currentBytes;
+  @override
+  int get discountFileSize;
+  @override
+  double get includedRatio;
+
+  /// Create a copy of SnAttachmentBilling
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  _$$SnAttachmentBillingImplCopyWith<_$SnAttachmentBillingImpl> get copyWith =>
+      throw _privateConstructorUsedError;
+}

lib/types/attachment.g.dart

@@ -281,3 +281,19 @@ Map<String, dynamic> _$$SnStickerPackImplToJson(_$SnStickerPackImpl instance) =>
       'stickers': instance.stickers?.map((e) => e.toJson()).toList(),
       'account_id': instance.accountId,
     };
+
+_$SnAttachmentBillingImpl _$$SnAttachmentBillingImplFromJson(
+        Map<String, dynamic> json) =>
+    _$SnAttachmentBillingImpl(
+      currentBytes: (json['current_bytes'] as num).toInt(),
+      discountFileSize: (json['discount_file_size'] as num).toInt(),
+      includedRatio: (json['included_ratio'] as num).toDouble(),
+    );
+
+Map<String, dynamic> _$$SnAttachmentBillingImplToJson(
+        _$SnAttachmentBillingImpl instance) =>
+    <String, dynamic>{
+      'current_bytes': instance.currentBytes,
+      'discount_file_size': instance.discountFileSize,
+      'included_ratio': instance.includedRatio,
+    };

lib/types/realm.dart

@@ -43,6 +43,7 @@ class SnRealm with _$SnRealm {
     @HiveField(10) required int accountId,
     @HiveField(11) required bool isPublic,
     @HiveField(12) required bool isCommunity,
+    @Default(0) int popularity,
   }) = _SnRealm;
 
   factory SnRealm.fromJson(Map<String, dynamic> json) =>

lib/types/realm.freezed.dart

@@ -394,6 +394,7 @@ mixin _$SnRealm {
   bool get isPublic => throw _privateConstructorUsedError;
   @HiveField(12)
   bool get isCommunity => throw _privateConstructorUsedError;
+  int get popularity => throw _privateConstructorUsedError;
 
   /// Serializes this SnRealm to a JSON map.
   Map<String, dynamic> toJson() => throw _privateConstructorUsedError;
@@ -423,7 +424,8 @@ abstract class $SnRealmCopyWith<$Res> {
       @HiveField(9) Map<String, dynamic>? accessPolicy,
       @HiveField(10) int accountId,
       @HiveField(11) bool isPublic,
-      @HiveField(12) bool isCommunity});
+      @HiveField(12) bool isCommunity,
+      int popularity});
 }
 
 /// @nodoc
@@ -455,6 +457,7 @@ class _$SnRealmCopyWithImpl<$Res, $Val extends SnRealm>
     Object? accountId = null,
     Object? isPublic = null,
     Object? isCommunity = null,
+    Object? popularity = null,
   }) {
     return _then(_value.copyWith(
       id: null == id
@@ -513,6 +516,10 @@ class _$SnRealmCopyWithImpl<$Res, $Val extends SnRealm>
           ? _value.isCommunity
           : isCommunity // ignore: cast_nullable_to_non_nullable
               as bool,
+      popularity: null == popularity
+          ? _value.popularity
+          : popularity // ignore: cast_nullable_to_non_nullable
+              as int,
     ) as $Val);
   }
 }
@@ -538,7 +545,8 @@ abstract class _$$SnRealmImplCopyWith<$Res> implements $SnRealmCopyWith<$Res> {
       @HiveField(9) Map<String, dynamic>? accessPolicy,
       @HiveField(10) int accountId,
       @HiveField(11) bool isPublic,
-      @HiveField(12) bool isCommunity});
+      @HiveField(12) bool isCommunity,
+      int popularity});
 }
 
 /// @nodoc
@@ -568,6 +576,7 @@ class __$$SnRealmImplCopyWithImpl<$Res>
     Object? accountId = null,
     Object? isPublic = null,
     Object? isCommunity = null,
+    Object? popularity = null,
   }) {
     return _then(_$SnRealmImpl(
       id: null == id
@@ -626,6 +635,10 @@ class __$$SnRealmImplCopyWithImpl<$Res>
           ? _value.isCommunity
           : isCommunity // ignore: cast_nullable_to_non_nullable
               as bool,
+      popularity: null == popularity
+          ? _value.popularity
+          : popularity // ignore: cast_nullable_to_non_nullable
+              as int,
     ));
   }
 }
@@ -648,7 +661,8 @@ class _$SnRealmImpl extends _SnRealm {
       @HiveField(9) required final Map<String, dynamic>? accessPolicy,
       @HiveField(10) required this.accountId,
       @HiveField(11) required this.isPublic,
-      @HiveField(12) required this.isCommunity})
+      @HiveField(12) required this.isCommunity,
+      this.popularity = 0})
       : _members = members,
         _accessPolicy = accessPolicy,
         super._();
@@ -713,10 +727,13 @@ class _$SnRealmImpl extends _SnRealm {
   @override
   @HiveField(12)
   final bool isCommunity;
+  @override
+  @JsonKey()
+  final int popularity;
 
   @override
   String toString() {
-    return 'SnRealm(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, alias: $alias, name: $name, description: $description, members: $members, avatar: $avatar, banner: $banner, accessPolicy: $accessPolicy, accountId: $accountId, isPublic: $isPublic, isCommunity: $isCommunity)';
+    return 'SnRealm(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, alias: $alias, name: $name, description: $description, members: $members, avatar: $avatar, banner: $banner, accessPolicy: $accessPolicy, accountId: $accountId, isPublic: $isPublic, isCommunity: $isCommunity, popularity: $popularity)';
   }
 
   @override
@@ -745,7 +762,9 @@ class _$SnRealmImpl extends _SnRealm {
             (identical(other.isPublic, isPublic) ||
                 other.isPublic == isPublic) &&
             (identical(other.isCommunity, isCommunity) ||
-                other.isCommunity == isCommunity));
+                other.isCommunity == isCommunity) &&
+            (identical(other.popularity, popularity) ||
+                other.popularity == popularity));
   }
 
   @JsonKey(includeFromJson: false, includeToJson: false)
@@ -765,7 +784,8 @@ class _$SnRealmImpl extends _SnRealm {
       const DeepCollectionEquality().hash(_accessPolicy),
       accountId,
       isPublic,
-      isCommunity);
+      isCommunity,
+      popularity);
 
   /// Create a copy of SnRealm
   /// with the given fields replaced by the non-null parameter values.
@@ -798,7 +818,8 @@ abstract class _SnRealm extends SnRealm {
       @HiveField(9) required final Map<String, dynamic>? accessPolicy,
       @HiveField(10) required final int accountId,
       @HiveField(11) required final bool isPublic,
-      @HiveField(12) required final bool isCommunity}) = _$SnRealmImpl;
+      @HiveField(12) required final bool isCommunity,
+      final int popularity}) = _$SnRealmImpl;
   const _SnRealm._() : super._();
 
   factory _SnRealm.fromJson(Map<String, dynamic> json) = _$SnRealmImpl.fromJson;
@@ -844,6 +865,8 @@ abstract class _SnRealm extends SnRealm {
   @override
   @HiveField(12)
   bool get isCommunity;
+  @override
+  int get popularity;
 
   /// Create a copy of SnRealm
   /// with the given fields replaced by the non-null parameter values.

lib/types/realm.g.dart

@@ -128,6 +128,7 @@ _$SnRealmImpl _$$SnRealmImplFromJson(Map<String, dynamic> json) =>
       accountId: (json['account_id'] as num).toInt(),
       isPublic: json['is_public'] as bool,
       isCommunity: json['is_community'] as bool,
+      popularity: (json['popularity'] as num?)?.toInt() ?? 0,
     );
 
 Map<String, dynamic> _$$SnRealmImplToJson(_$SnRealmImpl instance) =>
@@ -146,4 +147,5 @@ Map<String, dynamic> _$$SnRealmImplToJson(_$SnRealmImpl instance) =>
       'account_id': instance.accountId,
       'is_public': instance.isPublic,
       'is_community': instance.isCommunity,
+      'popularity': instance.popularity,
     };

lib/widgets/about.dart

@@ -97,6 +97,13 @@ class AboutScreen extends StatelessWidget {
                       launchUrlString('https://status.solsynth.dev');
                     },
                   ),
+                  TextButton(
+                    style: denseButtonStyle,
+                    child: Text('projectDetail').tr(),
+                    onPressed: () {
+                      launchUrlString('https://solsynth.dev/products/solar-network');
+                    },
+                  ),
                 ],
               ),
             ).center(),
@@ -108,6 +115,12 @@ class AboutScreen extends StatelessWidget {
                 fontSize: 12,
               ),
             ),
+            InkWell(
+              child: Text('GitHub', style: TextStyle(fontSize: 12)),
+              onTap: () {
+                launchUrlString('https://github.com/Solsynth/HyperNet.Surface');
+              },
+            )
           ],
         ),
       ),

lib/widgets/post/post_media_pending_list.dart

@@ -30,25 +30,21 @@ import 'package:surface/widgets/universal_image.dart';
 import '../attachment/pending_attachment_compress.dart';
 
 class PostMediaPendingList extends StatelessWidget {
-  final PostWriteMedia? thumbnail;
   final List<PostWriteMedia> attachments;
   final bool isBusy;
   final Future<void> Function(int idx, PostWriteMedia updatedMedia)? onUpdate;
   final Future<void> Function(int idx)? onRemove;
   final Future<void> Function(int idx)? onUpload;
-  final void Function(int? idx)? onPostSetThumbnail;
   final void Function(int idx)? onInsertLink;
   final void Function(bool state)? onUpdateBusy;
 
   const PostMediaPendingList({
     super.key,
-    this.thumbnail,
     required this.attachments,
     required this.isBusy,
     this.onUpdate,
     this.onRemove,
     this.onUpload,
-    this.onPostSetThumbnail,
     this.onInsertLink,
     this.onUpdateBusy,
   });
@@ -116,7 +112,7 @@ class PostMediaPendingList extends StatelessWidget {
   }
 
   Future<void> _deleteAttachment(BuildContext context, int idx) async {
-    final media = idx == -1 ? thumbnail! : attachments[idx];
+    final media = attachments[idx];
     if (media.attachment == null) return;
 
     try {
@@ -212,22 +208,6 @@ class PostMediaPendingList extends StatelessWidget {
               onSelected: () {
                 onUpload!(idx);
               }),
-        if (media.attachment != null && media.type == SnMediaType.image && onPostSetThumbnail != null && idx != -1)
-          MenuItem(
-            label: 'attachmentSetAsPostThumbnail'.tr(),
-            icon: Symbols.gallery_thumbnail,
-            onSelected: () {
-              onPostSetThumbnail!(idx);
-            },
-          )
-        else if (media.attachment != null && media.type == SnMediaType.image && onPostSetThumbnail != null)
-          MenuItem(
-            label: 'attachmentUnsetAsPostThumbnail'.tr(),
-            icon: Symbols.cancel,
-            onSelected: () {
-              onPostSetThumbnail!(null);
-            },
-          ),
         if (media.attachment != null && onInsertLink != null)
           MenuItem(
             label: 'attachmentInsertLink'.tr(),
@@ -291,23 +271,9 @@ class PostMediaPendingList extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       constraints: const BoxConstraints(maxHeight: 120),
-      child: Row(
-        children: [
-          const Gap(16),
-          if (thumbnail != null)
-            ContextMenuArea(
-              contextMenu: _createContextMenu(context, -1, thumbnail!),
-              child: _PostMediaPendingItem(media: thumbnail!),
-            ),
-          if (thumbnail != null)
-            const VerticalDivider(width: 1, thickness: 1).padding(
-              horizontal: 12,
-              vertical: 16,
-            ),
-          Expanded(
       child: ListView.separated(
         scrollDirection: Axis.horizontal,
-              padding: const EdgeInsets.only(right: 8),
+        padding: const EdgeInsets.symmetric(horizontal: 8),
         separatorBuilder: (context, index) => const Gap(8),
         itemCount: attachments.length,
         itemBuilder: (context, idx) {
@@ -318,9 +284,6 @@ class PostMediaPendingList extends StatelessWidget {
           );
         },
       ),
-          ),
-        ],
-      ),
     );
   }
 }

lib/widgets/realm/realm_item.dart

@@ -0,0 +1,149 @@
+import 'package:flutter/material.dart';
+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_network.dart';
+import 'package:surface/types/realm.dart';
+import 'package:surface/widgets/account/account_image.dart';
+import 'package:surface/widgets/universal_image.dart';
+
+class RealmItemWidget extends StatelessWidget {
+  final SnRealm item;
+  final bool isListView;
+  final List<PopupMenuItem>? actionListView;
+  final Function? onUpdate;
+  final Function? onTap;
+  final bool showPopularity;
+
+  const RealmItemWidget({
+    super.key,
+    required this.item,
+    required this.isListView,
+    this.actionListView,
+    this.onUpdate,
+    this.onTap,
+    this.showPopularity = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (isListView) {
+      return ListTile(
+        contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+        leading: AccountImage(
+          content: item.avatar,
+          fallbackWidget: const Icon(Symbols.group, size: 20),
+        ),
+        title: Text(item.name),
+        subtitle: Row(
+          children: [
+            if (showPopularity) const Icon(Symbols.local_fire_department, size: 18).padding(right: 1),
+            if (showPopularity) Text(item.popularity.toString()),
+            if (showPopularity) const Gap(6),
+            Expanded(
+              child: Text(
+                item.description,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ],
+        ),
+        trailing:
+            actionListView != null ? PopupMenuButton(itemBuilder: (BuildContext context) => actionListView!) : null,
+        onTap: () {
+          if (onTap != null) {
+            onTap!();
+            return;
+          }
+          GoRouter.of(context).pushNamed(
+            'realmDetail',
+            pathParameters: {'alias': item.alias},
+          ).then((value) {
+            if (value == true) {
+              onUpdate?.call();
+            }
+          });
+        },
+      );
+    }
+
+    final sn = context.read<SnNetworkProvider>();
+
+    return Container(
+      constraints: BoxConstraints(maxWidth: 640),
+      child: Card(
+        margin: const EdgeInsets.all(12),
+        child: InkWell(
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AspectRatio(
+                aspectRatio: 16 / 7,
+                child: Stack(
+                  clipBehavior: Clip.none,
+                  fit: StackFit.expand,
+                  children: [
+                    ClipRRect(
+                      borderRadius: const BorderRadius.all(Radius.circular(8)),
+                      child: Container(
+                        color: Theme.of(context).colorScheme.surfaceContainer,
+                        child: (item.banner?.isEmpty ?? true)
+                            ? const SizedBox.shrink()
+                            : AutoResizeUniversalImage(
+                                sn.getAttachmentUrl(item.banner!),
+                                fit: BoxFit.cover,
+                              ),
+                      ),
+                    ),
+                    Positioned(
+                      bottom: -30,
+                      left: 18,
+                      child: AccountImage(
+                        content: item.avatar,
+                        radius: 24,
+                        fallbackWidget: const Icon(Symbols.group, size: 24),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const Gap(20 + 12),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(item.name).textStyle(Theme.of(context).textTheme.titleMedium!),
+                  if (showPopularity)
+                    Row(
+                      children: [
+                        Text(item.popularity.toString()),
+                        const Icon(Symbols.local_fire_department, size: 16).padding(bottom: 2),
+                      ],
+                    ).padding(top: 6),
+                  Text(item.description).textStyle(Theme.of(context).textTheme.bodySmall!),
+                ],
+              ).padding(horizontal: 24, bottom: 14),
+            ],
+          ),
+          onTap: () {
+            if (onTap != null) {
+              onTap!();
+              return;
+            }
+            GoRouter.of(context).pushNamed(
+              'realmDetail',
+              pathParameters: {'alias': item.alias},
+            ).then((value) {
+              if (value == true) {
+                onUpdate?.call();
+              }
+            });
+          },
+        ),
+      ),
+    ).center();
+  }
+}

pubspec.lock

@@ -191,7 +191,7 @@ packages:
     source: hosted
     version: "3.4.1"
   cached_network_image_platform_interface:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: cached_network_image_platform_interface
       sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
@@ -1083,7 +1083,7 @@ packages:
     source: hosted
     version: "0.2.1+2"
   image_picker_platform_interface:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: image_picker_platform_interface
       sha256: "886d57f0be73c4b140004e78b9f28a8914a09e50c2d816bdd0520051a71236a0"

pubspec.yaml

@@ -121,6 +121,8 @@ dependencies:
   tray_manager: ^0.3.2
   hotkey_manager: ^0.2.3
   image_picker_android: ^0.8.12+20
+  cached_network_image_platform_interface: ^4.1.1
+  image_picker_platform_interface: ^2.10.1
 
 dev_dependencies:
   flutter_test: