✨ Basic fediverse posts displaying

api/Interactive/Trigger Fediverse Scan.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Trigger Fediverse Scan
+  type: http
+  seq: 1
+}
+
+post {
+  url: {{endpoint}}/cgi/co/admin/fediverse
+  body: none
+  auth: inherit
+}

assets/translations/en-US.json

@@ -791,5 +791,8 @@
   "fieldAccountStatusClearAt": "Clear At",
   "accountStatusNegative": "Negative",
   "accountStatusNeutral": "Neutral",
-  "accountStatusPositive": "Positive"
+  "accountStatusPositive": "Positive",
+  "mixedFeed": "Mixed Feed",
+  "mixedFeedDescription": "The Explore screen may not only display the user's posts, but may also contain other content. However, this mode does not apply to classification and filtering.",
+  "filterFeed": "Exploring Adjust"
 }

assets/translations/zh-CN.json

@@ -789,5 +789,8 @@
   "fieldAccountStatusClearAt": "清除时间",
   "accountStatusNegative": "负面",
   "accountStatusNeutral": "中性",
-  "accountStatusPositive": "正面"
+  "accountStatusPositive": "正面",
+  "mixedFeed": "混合推荐流",
+  "mixedFeedDescription": "探索页面可能不只会展示用户的帖子，更可能包含其他的内容。但该模式不适用分类和过滤。",
+  "filterFeed": "探索队列调整"
 }

lib/providers/config.dart

@@ -19,6 +19,7 @@ const kAppExpandPostLink = 'app_expand_post_link';
 const kAppExpandChatLink = 'app_expand_chat_link';
 const kAppRealmCompactView = 'app_realm_compact_view';
 const kAppCustomFonts = 'app_custom_fonts';
+const kAppMixedFeed = 'app_mixed_feed';
 
 const Map<String, FilterQuality> kImageQualityLevel = {
   'settingsImageQualityLowest': FilterQuality.none,
@@ -81,8 +82,18 @@ class ConfigProvider extends ChangeNotifier {
     return prefs.getBool(kAppRealmCompactView) ?? false;
   }
 
+  bool get mixedFeed {
+    return prefs.getBool(kAppMixedFeed) ?? true;
+  }
+
+  set mixedFeed(bool value) {
+    prefs.setBool(kAppMixedFeed, value);
+    notifyListeners();
+  }
+
   set realmCompactView(bool value) {
     prefs.setBool(kAppRealmCompactView, value);
+    notifyListeners();
   }
 
   set serverUrl(String url) {

lib/providers/post.dart

@@ -145,6 +145,36 @@ class SnPostContentProvider {
     return out;
   }
 
+  Future<List<SnFeedEntry>> getFeed({int take = 20, DateTime? cursor}) async {
+    final resp =
+        await _sn.client.get('/cgi/co/recommendations/feed', queryParameters: {
+      'take': take,
+      if (cursor != null) 'cursor': cursor.toUtc().millisecondsSinceEpoch,
+    });
+    final List<SnFeedEntry> out =
+        List.from(resp.data.map((ele) => SnFeedEntry.fromJson(ele)));
+
+    List<SnPost> posts = List.empty(growable: true);
+    for (var idx = 0; idx < out.length; idx++) {
+      final ele = out[idx];
+      if (ele.type == 'interactive.post') {
+        posts.add(SnPost.fromJson(ele.data));
+      }
+    }
+    posts = await _preloadRelatedDataInBatch(posts);
+
+    var postsIdx = 0;
+    for (var idx = 0; idx < out.length; idx++) {
+      final ele = out[idx];
+      if (ele.type == 'interactive.post') {
+        out[idx] = ele.copyWith(data: posts[postsIdx].toJson());
+        postsIdx++;
+      }
+    }
+
+    return out;
+  }
+
   Future<(List<SnPost>, int)> listPosts({
     int take = 10,
     int offset = 0,

lib/screens/explore.dart

@@ -7,6 +7,7 @@ import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/config.dart';
 import 'package:surface/providers/post.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/sn_realm.dart';
@@ -17,6 +18,7 @@ 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/navigation/app_scaffold.dart';
+import 'package:surface/widgets/post/fediverse_post_item.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:very_good_infinite_list/very_good_infinite_list.dart';
 
@@ -151,6 +153,7 @@ class _ExploreScreenState extends State<ExploreScreen>
 
   @override
   Widget build(BuildContext context) {
+    final cfg = context.watch<ConfigProvider>();
     return AppScaffold(
       floatingActionButtonLocation: ExpandableFab.location,
       floatingActionButton: ExpandableFab(
@@ -272,6 +275,14 @@ class _ExploreScreenState extends State<ExploreScreen>
                                     }
                                   });
                                 },
+                                onMixedFeedChanged: (flag) {
+                                  _listKey.currentState?.setRealm(null);
+                                  _listKey.currentState?.setCategory(null);
+                                  if (_showCategories && flag) {
+                                    _toggleShowCategories();
+                                  }
+                                  _listKey.currentState?.refreshPosts();
+                                },
                               ),
                             );
                           },
@@ -295,9 +306,11 @@ class _ExploreScreenState extends State<ExploreScreen>
                             ),
                           )
                         : null,
-                    onPressed: () {
+                    onPressed: cfg.mixedFeed
-                      _toggleShowCategories();
+                        ? null
-                    },
+                        : () {
+                            _toggleShowCategories();
+                          },
                   ),
                   IconButton(
                     icon: const Icon(Symbols.search),
@@ -307,74 +320,78 @@ class _ExploreScreenState extends State<ExploreScreen>
                   ),
                   const Gap(8),
                 ],
-                bottom: TabBar(
+                bottom: cfg.mixedFeed
-                  isScrollable: _showCategories,
+                    ? null
-                  controller: _tabController,
+                    : TabBar(
-                  tabs: _showCategories
+                        isScrollable: _showCategories,
-                      ? [
+                        controller: _tabController,
-                          for (final category in _categories)
+                        tabs: _showCategories
-                            Tab(
+                            ? [
-                              child: Row(
+                                for (final category in _categories)
-                                mainAxisSize: MainAxisSize.min,
+                                  Tab(
-                                crossAxisAlignment: CrossAxisAlignment.center,
+                                    child: Row(
-                                children: [
+                                      mainAxisSize: MainAxisSize.min,
-                                  Icon(
+                                      crossAxisAlignment:
-                                    kCategoryIcons[category.alias] ??
+                                          CrossAxisAlignment.center,
-                                        Symbols.question_mark,
+                                      children: [
-                                    color: Theme.of(context)
+                                        Icon(
-                                        .appBarTheme
+                                          kCategoryIcons[category.alias] ??
-                                        .foregroundColor!,
+                                              Symbols.question_mark,
-                                  ),
+                                          color: Theme.of(context)
-                                  const Gap(8),
+                                              .appBarTheme
-                                  Flexible(
+                                              .foregroundColor!,
-                                    child: Text(
+                                        ),
-                                      'postCategory${category.alias.capitalize()}'
+                                        const Gap(8),
-                                              .trExists()
+                                        Flexible(
-                                          ? 'postCategory${category.alias.capitalize()}'
+                                          child: Text(
-                                              .tr()
+                                            'postCategory${category.alias.capitalize()}'
-                                          : category.name,
+                                                    .trExists()
-                                      maxLines: 1,
+                                                ? 'postCategory${category.alias.capitalize()}'
-                                    ).textColor(
+                                                    .tr()
-                                      Theme.of(context)
+                                                : category.name,
-                                          .appBarTheme
+                                            maxLines: 1,
-                                          .foregroundColor!,
+                                          ).textColor(
+                                            Theme.of(context)
+                                                .appBarTheme
+                                                .foregroundColor!,
+                                          ),
+                                        ),
+                                      ],
                                     ),
                                   ),
-                                ],
+                              ]
-                              ),
+                            : [
-                            ),
+                                for (final channel in kPostChannels)
-                        ]
+                                  Tab(
-                      : [
+                                    child: Row(
-                          for (final channel in kPostChannels)
+                                      mainAxisSize: MainAxisSize.min,
-                            Tab(
+                                      crossAxisAlignment:
-                              child: Row(
+                                          CrossAxisAlignment.center,
-                                mainAxisSize: MainAxisSize.min,
+                                      children: [
-                                crossAxisAlignment: CrossAxisAlignment.center,
+                                        Icon(
-                                children: [
+                                          kPostChannelIcons[
-                                  Icon(
+                                              kPostChannels.indexOf(channel)],
-                                    kPostChannelIcons[
+                                          size: 20,
-                                        kPostChannels.indexOf(channel)],
+                                          color: Theme.of(context)
-                                    size: 20,
-                                    color: Theme.of(context)
-                                        .appBarTheme
-                                        .foregroundColor,
-                                  ),
-                                  const Gap(8),
-                                  Flexible(
-                                    child: Text(
-                                      'postChannel$channel',
-                                      maxLines: 1,
-                                    ).tr().textColor(
-                                          Theme.of(context)
                                               .appBarTheme
                                               .foregroundColor,
                                         ),
+                                        const Gap(8),
+                                        Flexible(
+                                          child: Text(
+                                            'postChannel$channel',
+                                            maxLines: 1,
+                                          ).tr().textColor(
+                                                Theme.of(context)
+                                                    .appBarTheme
+                                                    .foregroundColor,
+                                              ),
+                                        ),
+                                      ],
+                                    ),
                                   ),
-                                ],
+                              ],
-                              ),
+                      ),
-                            ),
-                        ],
-                ),
               ),
             ),
           ];
@@ -399,21 +416,22 @@ class _PostListWidgetState extends State<_PostListWidget> {
 
   SnRealm? get realm => _selectedRealm;
 
-  final List<SnPost> _posts = List.empty(growable: true);
+  final List<SnFeedEntry> _feed = List.empty(growable: true);
   SnRealm? _selectedRealm;
   String? _selectedChannel;
   SnPostCategory? _selectedCategory;
-  int? _postCount;
+  bool _hasLoadedAll = false;
 
+  // Called when using regular feed
   Future<void> _fetchPosts() async {
-    if (_postCount != null && _posts.length >= _postCount!) return;
+    if (_hasLoadedAll) return;
 
     setState(() => _isBusy = true);
 
     final pt = context.read<SnPostContentProvider>();
     final result = await pt.listPosts(
       take: 10,
-      offset: _posts.length,
+      offset: _feed.length,
       categories: _selectedCategory != null ? [_selectedCategory!.alias] : null,
       channel: _selectedChannel,
       realm: _selectedRealm?.alias,
@@ -422,8 +440,31 @@ class _PostListWidgetState extends State<_PostListWidget> {
 
     if (!mounted) return;
 
-    _postCount = result.$2;
+    final postCount = result.$2;
-    _posts.addAll(out);
+    _feed.addAll(
+      out.map((ele) => SnFeedEntry(
+          type: 'interactive.post',
+          data: ele.toJson(),
+          createdAt: ele.createdAt)),
+    );
+    _hasLoadedAll = postCount >= _feed.length;
+
+    if (mounted) setState(() => _isBusy = false);
+  }
+
+  // Called when mixed feed is enabled
+  Future<void> _fetchFeed() async {
+    if (_hasLoadedAll) return;
+
+    setState(() => _isBusy = true);
+
+    final pt = context.read<SnPostContentProvider>();
+    final result = await pt.getFeed(cursor: _feed.lastOrNull?.createdAt);
+
+    if (!mounted) return;
+
+    _feed.addAll(result);
+    _hasLoadedAll = result.isEmpty;
 
     if (mounted) setState(() => _isBusy = false);
   }
@@ -444,9 +485,14 @@ class _PostListWidgetState extends State<_PostListWidget> {
   }
 
   Future<void> refreshPosts() {
-    _postCount = null;
+    _hasLoadedAll = false;
-    _posts.clear();
+    _feed.clear();
-    return _fetchPosts();
+    final cfg = context.read<ConfigProvider>();
+    if (cfg.mixedFeed) {
+      return _fetchFeed();
+    } else {
+      return _fetchPosts();
+    }
   }
 
   @override
@@ -457,64 +503,48 @@ class _PostListWidgetState extends State<_PostListWidget> {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    final cfg = context.watch<ConfigProvider>();
-      children: [
+    return MediaQuery.removePadding(
-        if (_selectedCategory != null)
+      context: context,
-          MaterialBanner(
+      removeTop: true,
-            content: Text(
+      child: RefreshIndicator(
-              'postFilterWithCategory'.tr(args: [
+        displacement: 40 + MediaQuery.of(context).padding.top,
-                'postCategory${_selectedCategory!.alias.capitalize()}'.trExists()
+        onRefresh: () => refreshPosts(),
-                    ? 'postCategory${_selectedCategory!.alias.capitalize()}'
+        child: InfiniteList(
-                        .tr()
+          padding: EdgeInsets.only(top: 8),
-                    : _selectedCategory!.name,
+          itemCount: _feed.length,
-              ]),
+          isLoading: _isBusy,
-            ),
+          centerLoading: true,
-            leading: Icon(kCategoryIcons[_selectedCategory!.alias] ??
+          hasReachedMax: _hasLoadedAll,
-                Symbols.question_mark),
+          onFetchData: cfg.mixedFeed ? _fetchFeed : _fetchPosts,
-            actions: [
+          itemBuilder: (context, idx) {
-              IconButton(
+            final ele = _feed[idx];
-                icon: const Icon(Symbols.clear),
+            switch (ele.type) {
-                onPressed: () {
+              case 'interactive.post':
-                  setState(() => _selectedCategory = null);
+                return OpenablePostItem(
-                  refreshPosts();
+                  data: SnPost.fromJson(ele.data),
-                },
+                  maxWidth: 640,
-              ),
+                  onChanged: (data) {
-            ],
+                    setState(() {
-            padding: const EdgeInsets.only(left: 20, right: 4),
+                      _feed[idx] = _feed[idx].copyWith(data: data.toJson());
-          ),
+                    });
-        Expanded(
+                  },
-          child: MediaQuery.removePadding(
+                  onDeleted: () {
-            context: context,
+                    refreshPosts();
-            removeTop: true,
+                  },
-            child: RefreshIndicator(
+                );
-              displacement: 40 + MediaQuery.of(context).padding.top,
+              case 'fediverse.post':
-              onRefresh: () => refreshPosts(),
+                return FediversePostWidget(
-              child: InfiniteList(
+                  data: SnFediversePost.fromJson(ele.data),
-                padding: EdgeInsets.only(top: 8),
+                  maxWidth: 640,
-                itemCount: _posts.length,
+                );
-                isLoading: _isBusy,
+              default:
-                centerLoading: true,
+                return Placeholder();
-                hasReachedMax:
+            }
-                    _postCount != null && _posts.length >= _postCount!,
+          },
-                onFetchData: _fetchPosts,
+          separatorBuilder: (_, __) => const Gap(8),
-                itemBuilder: (context, idx) {
-                  return OpenablePostItem(
-                    data: _posts[idx],
-                    maxWidth: 640,
-                    onChanged: (data) {
-                      setState(() => _posts[idx] = data);
-                    },
-                    onDeleted: () {
-                      refreshPosts();
-                    },
-                  );
-                },
-                separatorBuilder: (_, __) => const Gap(8),
-              ),
-            ),
-          ),
         ),
-      ],
+      ),
     );
   }
 }
@@ -522,54 +552,71 @@ class _PostListWidgetState extends State<_PostListWidget> {
 class _PostListRealmPopup extends StatelessWidget {
   final List<SnRealm>? realms;
   final Function(SnRealm?) onUpdate;
+  final Function(bool) onMixedFeedChanged;
 
   const _PostListRealmPopup({
     required this.realms,
     required this.onUpdate,
+    required this.onMixedFeedChanged,
   });
 
   @override
   Widget build(BuildContext context) {
+    final cfg = context.watch<ConfigProvider>();
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const Icon(Symbols.face, size: 24),
+            const Icon(Symbols.tune, size: 24),
             const Gap(16),
-            Text('accountRealms', style: Theme.of(context).textTheme.titleLarge)
+            Text('filterFeed', style: Theme.of(context).textTheme.titleLarge)
                 .tr(),
           ],
         ).padding(horizontal: 20, top: 16, bottom: 12),
-        ListTile(
+        SwitchListTile(
-          leading: const Icon(Symbols.close),
+          secondary: const Icon(Symbols.merge_type),
-          title: Text('postInGlobal').tr(),
-          subtitle: Text('postViewInGlobalDescription').tr(),
           contentPadding: const EdgeInsets.symmetric(horizontal: 24),
-          onTap: () {
+          title: Text('mixedFeed').tr(),
-            onUpdate.call(null);
+          subtitle: Text('mixedFeedDescription').tr(),
-            Navigator.pop(context);
+          value: cfg.mixedFeed,
+          onChanged: (value) {
+            cfg.mixedFeed = value;
+            onMixedFeedChanged.call(value);
           },
         ),
-        const Divider(height: 1),
+        if (!cfg.mixedFeed)
-        Expanded(
+          ListTile(
-          child: ListView.builder(
+            leading: const Icon(Symbols.close),
-            itemCount: realms?.length ?? 0,
+            title: Text('postInGlobal').tr(),
-            itemBuilder: (context, idx) {
+            subtitle: Text('postViewInGlobalDescription').tr(),
-              final realm = realms![idx];
+            contentPadding: const EdgeInsets.symmetric(horizontal: 24),
-              return ListTile(
+            onTap: () {
-                title: Text(realm.name),
+              onUpdate.call(null);
-                subtitle: Text('@${realm.alias}'),
+              Navigator.pop(context);
-                leading: AccountImage(content: realm.avatar, radius: 18),
-                onTap: () {
-                  onUpdate.call(realm);
-                  Navigator.pop(context);
-                },
-              );
             },
           ),
-        ),
+        if (!cfg.mixedFeed) const Divider(height: 1),
+        if (!cfg.mixedFeed)
+          Expanded(
+            child: ListView.builder(
+              itemCount: realms?.length ?? 0,
+              itemBuilder: (context, idx) {
+                final realm = realms![idx];
+                return ListTile(
+                  title: Text(realm.name),
+                  subtitle: Text('@${realm.alias}'),
+                  leading: AccountImage(content: realm.avatar, radius: 18),
+                  onTap: () {
+                    onUpdate.call(realm);
+                    Navigator.pop(context);
+                  },
+                );
+              },
+            ),
+          ),
       ],
     );
   }

lib/screens/news/news_detail.dart

@@ -1,5 +1,4 @@
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:html/dom.dart' as dom;
@@ -10,9 +9,9 @@ import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/types/news.dart';
 import 'package:surface/widgets/dialog.dart';
+import 'package:surface/widgets/html.dart';
 import 'package:surface/widgets/navigation/app_scaffold.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
-import 'package:surface/widgets/universal_image.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 class NewsDetailScreen extends StatefulWidget {
@@ -45,104 +44,6 @@ class _NewsDetailScreenState extends State<NewsDetailScreen> {
     }
   }
 
-  List<Widget> _parseHtmlToWidgets(Iterable<dom.Element>? elements) {
-    if (elements == null) return [];
-
-    final List<Widget> widgets = [];
-
-    for (final node in elements) {
-      switch (node.localName) {
-        case 'h1':
-        case 'h2':
-        case 'h3':
-        case 'h4':
-        case 'h5':
-        case 'h6':
-          widgets.add(Text(node.text.trim(), style: Theme.of(context).textTheme.titleMedium));
-          break;
-        case 'p':
-          if (node.text.trim().isEmpty) continue;
-          widgets.add(
-            Text.rich(
-              TextSpan(
-                text: node.text.trim(),
-                children: [
-                  for (final child in node.children)
-                    switch (child.localName) {
-                      'a' => TextSpan(
-                          text: child.text.trim(),
-                          style: const TextStyle(decoration: TextDecoration.underline),
-                          recognizer: TapGestureRecognizer()
-                            ..onTap = () {
-                              launchUrlString(child.attributes['href']!);
-                            },
-                        ),
-                      _ => TextSpan(text: child.text.trim()),
-                    },
-                ],
-              ),
-              style: Theme.of(context).textTheme.bodyLarge,
-            ),
-          );
-          break;
-        case 'a':
-          // drop single link
-          break;
-        case 'div':
-          // ignore div text, normally it is not meaningful
-          widgets.addAll(_parseHtmlToWidgets(node.children));
-          break;
-        case 'hr':
-          widgets.add(const Divider());
-          break;
-        case 'img':
-          var src = node.attributes['src'];
-          if (src == null) break;
-          final width = double.tryParse(node.attributes['width'] ?? 'null');
-          final height = double.tryParse(node.attributes['height'] ?? 'null');
-          final ratio = width != null && height != null ? width / height : 1.0;
-          if (src.startsWith('//')) {
-            src = 'https:$src';
-          } else if (!src.startsWith('http')) {
-            final baseUri = Uri.parse(_article!.url);
-            final baseUrl = '${baseUri.scheme}://${baseUri.host}';
-            src = '$baseUrl/$src';
-          }
-          widgets.add(
-            AspectRatio(
-              aspectRatio: ratio,
-              child: Container(
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.all(Radius.circular(8)),
-                  border: Border.all(
-                    color: Theme.of(context).dividerColor,
-                    width: 1,
-                  ),
-                ),
-                height: height ?? double.infinity,
-                child: ClipRRect(
-                  borderRadius: BorderRadius.all(Radius.circular(8)),
-                  child: Container(
-                    color: Theme.of(context).colorScheme.surfaceContainer,
-                    child: AutoResizeUniversalImage(
-                      src,
-                      fit: width != null && height != null ? BoxFit.cover : BoxFit.contain,
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          );
-          break;
-        default:
-          widgets.addAll(_parseHtmlToWidgets(node.children));
-          break;
-      }
-    }
-
-    return widgets;
-  }
-
   @override
   void initState() {
     super.initState();
@@ -163,7 +64,9 @@ class _NewsDetailScreenState extends State<NewsDetailScreen> {
           MaterialBanner(
             dividerColor: Colors.transparent,
             leading: const Icon(Icons.info),
-            content: Text(_isReadingFromReader ? 'newsReadingFromReader'.tr() : 'newsReadingFromOriginal'.tr()),
+            content: Text(_isReadingFromReader
+                ? 'newsReadingFromReader'.tr()
+                : 'newsReadingFromOriginal'.tr()),
             actions: [
               TextButton(
                 child: Text('newsReadingProviderSwap').tr(),
@@ -182,28 +85,41 @@ class _NewsDetailScreenState extends State<NewsDetailScreen> {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     spacing: 8,
                     children: [
-                      Text(_article!.title, style: Theme.of(context).textTheme.titleLarge),
+                      Text(_article!.title,
+                          style: Theme.of(context).textTheme.titleLarge),
                       Builder(builder: (context) {
                         final htmlDescription = parse(_article!.description);
                         return Text(
-                          htmlDescription.children.map((ele) => ele.text.trim()).join(),
+                          htmlDescription.children
+                              .map((ele) => ele.text.trim())
+                              .join(),
                           style: Theme.of(context).textTheme.bodyMedium,
                         );
                       }),
                       Builder(builder: (context) {
-                        final date = _article!.publishedAt ?? _article!.createdAt;
+                        final date =
+                            _article!.publishedAt ?? _article!.createdAt;
                         return Row(
                           spacing: 2,
                           children: [
-                            Text(DateFormat().format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
+                            Text(DateFormat().format(date)).textStyle(
-                            Text(' · ').textStyle(Theme.of(context).textTheme.bodySmall!).bold(),
+                                Theme.of(context).textTheme.bodySmall!),
-                            Text(RelativeTime(context).format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
+                            Text(' · ')
+                                .textStyle(
+                                    Theme.of(context).textTheme.bodySmall!)
+                                .bold(),
+                            Text(RelativeTime(context).format(date)).textStyle(
+                                Theme.of(context).textTheme.bodySmall!),
                           ],
                         ).opacity(0.75);
                       }),
-                      Text('newsDisclaimer').tr().textStyle(Theme.of(context).textTheme.bodySmall!).opacity(0.75),
+                      Text('newsDisclaimer')
+                          .tr()
+                          .textStyle(Theme.of(context).textTheme.bodySmall!)
+                          .opacity(0.75),
                       const Divider(),
-                      ..._parseHtmlToWidgets(_articleFragment!.children),
+                      ...parseHtmlToWidgets(
+                          context, _articleFragment!.children),
                       const Divider(),
                       InkWell(
                         child: Row(
@@ -211,7 +127,8 @@ class _NewsDetailScreenState extends State<NewsDetailScreen> {
                           children: [
                             Text(
                               'Reference from original website',
-                              style: TextStyle(decoration: TextDecoration.underline),
+                              style: TextStyle(
+                                  decoration: TextDecoration.underline),
                             ),
                             const Gap(4),
                             Icon(Icons.launch, size: 16),

lib/types/post.dart

@@ -166,3 +166,53 @@ abstract class SnSubscription with _$SnSubscription {
   factory SnSubscription.fromJson(Map<String, Object?> json) =>
       _$SnSubscriptionFromJson(json);
 }
+
+@freezed
+abstract class SnFeedEntry with _$SnFeedEntry {
+  const factory SnFeedEntry({
+    required String type,
+    required Map<String, dynamic> data,
+    required DateTime createdAt,
+  }) = _SnFeedEntry;
+
+  factory SnFeedEntry.fromJson(Map<String, dynamic> json) =>
+      _$SnFeedEntryFromJson(json);
+}
+
+@freezed
+abstract class SnFediversePost with _$SnFediversePost {
+  const factory SnFediversePost({
+    required int id,
+    required DateTime createdAt,
+    required DateTime updatedAt,
+    required DateTime? deletedAt,
+    required String identifier,
+    required String origin,
+    required String content,
+    required String language,
+    required List<String> images,
+    required SnFediverseUser user,
+    required int userId,
+  }) = _SnFediversePost;
+
+  factory SnFediversePost.fromJson(Map<String, Object?> json) =>
+      _$SnFediversePostFromJson(json);
+}
+
+@freezed
+abstract class SnFediverseUser with _$SnFediverseUser {
+  const factory SnFediverseUser({
+    required int id,
+    required DateTime createdAt,
+    required DateTime updatedAt,
+    required DateTime? deletedAt,
+    required String identifier,
+    required String origin,
+    required String avatar,
+    required String name,
+    required String nick,
+  }) = _SnFediverseUser;
+
+  factory SnFediverseUser.fromJson(Map<String, dynamic> json) =>
+      _$SnFediverseUserFromJson(json);
+}

lib/types/post.freezed.dart

@@ -3120,4 +3120,883 @@ class __$SnSubscriptionCopyWithImpl<$Res>
   }
 }
 
+/// @nodoc
+mixin _$SnFeedEntry {
+  String get type;
+  Map<String, dynamic> get data;
+  DateTime get createdAt;
+
+  /// Create a copy of SnFeedEntry
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @pragma('vm:prefer-inline')
+  $SnFeedEntryCopyWith<SnFeedEntry> get copyWith =>
+      _$SnFeedEntryCopyWithImpl<SnFeedEntry>(this as SnFeedEntry, _$identity);
+
+  /// Serializes this SnFeedEntry to a JSON map.
+  Map<String, dynamic> toJson();
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is SnFeedEntry &&
+            (identical(other.type, type) || other.type == type) &&
+            const DeepCollectionEquality().equals(other.data, data) &&
+            (identical(other.createdAt, createdAt) ||
+                other.createdAt == createdAt));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(
+      runtimeType, type, const DeepCollectionEquality().hash(data), createdAt);
+
+  @override
+  String toString() {
+    return 'SnFeedEntry(type: $type, data: $data, createdAt: $createdAt)';
+  }
+}
+
+/// @nodoc
+abstract mixin class $SnFeedEntryCopyWith<$Res> {
+  factory $SnFeedEntryCopyWith(
+          SnFeedEntry value, $Res Function(SnFeedEntry) _then) =
+      _$SnFeedEntryCopyWithImpl;
+  @useResult
+  $Res call({String type, Map<String, dynamic> data, DateTime createdAt});
+}
+
+/// @nodoc
+class _$SnFeedEntryCopyWithImpl<$Res> implements $SnFeedEntryCopyWith<$Res> {
+  _$SnFeedEntryCopyWithImpl(this._self, this._then);
+
+  final SnFeedEntry _self;
+  final $Res Function(SnFeedEntry) _then;
+
+  /// Create a copy of SnFeedEntry
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? type = null,
+    Object? data = null,
+    Object? createdAt = null,
+  }) {
+    return _then(_self.copyWith(
+      type: null == type
+          ? _self.type
+          : type // ignore: cast_nullable_to_non_nullable
+              as String,
+      data: null == data
+          ? _self.data
+          : data // ignore: cast_nullable_to_non_nullable
+              as Map<String, dynamic>,
+      createdAt: null == createdAt
+          ? _self.createdAt
+          : createdAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+    ));
+  }
+}
+
+/// @nodoc
+@JsonSerializable()
+class _SnFeedEntry implements SnFeedEntry {
+  const _SnFeedEntry(
+      {required this.type,
+      required final Map<String, dynamic> data,
+      required this.createdAt})
+      : _data = data;
+  factory _SnFeedEntry.fromJson(Map<String, dynamic> json) =>
+      _$SnFeedEntryFromJson(json);
+
+  @override
+  final String type;
+  final Map<String, dynamic> _data;
+  @override
+  Map<String, dynamic> get data {
+    if (_data is EqualUnmodifiableMapView) return _data;
+    // ignore: implicit_dynamic_type
+    return EqualUnmodifiableMapView(_data);
+  }
+
+  @override
+  final DateTime createdAt;
+
+  /// Create a copy of SnFeedEntry
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @pragma('vm:prefer-inline')
+  _$SnFeedEntryCopyWith<_SnFeedEntry> get copyWith =>
+      __$SnFeedEntryCopyWithImpl<_SnFeedEntry>(this, _$identity);
+
+  @override
+  Map<String, dynamic> toJson() {
+    return _$SnFeedEntryToJson(
+      this,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _SnFeedEntry &&
+            (identical(other.type, type) || other.type == type) &&
+            const DeepCollectionEquality().equals(other._data, _data) &&
+            (identical(other.createdAt, createdAt) ||
+                other.createdAt == createdAt));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(
+      runtimeType, type, const DeepCollectionEquality().hash(_data), createdAt);
+
+  @override
+  String toString() {
+    return 'SnFeedEntry(type: $type, data: $data, createdAt: $createdAt)';
+  }
+}
+
+/// @nodoc
+abstract mixin class _$SnFeedEntryCopyWith<$Res>
+    implements $SnFeedEntryCopyWith<$Res> {
+  factory _$SnFeedEntryCopyWith(
+          _SnFeedEntry value, $Res Function(_SnFeedEntry) _then) =
+      __$SnFeedEntryCopyWithImpl;
+  @override
+  @useResult
+  $Res call({String type, Map<String, dynamic> data, DateTime createdAt});
+}
+
+/// @nodoc
+class __$SnFeedEntryCopyWithImpl<$Res> implements _$SnFeedEntryCopyWith<$Res> {
+  __$SnFeedEntryCopyWithImpl(this._self, this._then);
+
+  final _SnFeedEntry _self;
+  final $Res Function(_SnFeedEntry) _then;
+
+  /// Create a copy of SnFeedEntry
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $Res call({
+    Object? type = null,
+    Object? data = null,
+    Object? createdAt = null,
+  }) {
+    return _then(_SnFeedEntry(
+      type: null == type
+          ? _self.type
+          : type // ignore: cast_nullable_to_non_nullable
+              as String,
+      data: null == data
+          ? _self._data
+          : data // ignore: cast_nullable_to_non_nullable
+              as Map<String, dynamic>,
+      createdAt: null == createdAt
+          ? _self.createdAt
+          : createdAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+    ));
+  }
+}
+
+/// @nodoc
+mixin _$SnFediversePost {
+  int get id;
+  DateTime get createdAt;
+  DateTime get updatedAt;
+  DateTime? get deletedAt;
+  String get identifier;
+  String get origin;
+  String get content;
+  String get language;
+  List<String> get images;
+  SnFediverseUser get user;
+  int get userId;
+
+  /// Create a copy of SnFediversePost
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @pragma('vm:prefer-inline')
+  $SnFediversePostCopyWith<SnFediversePost> get copyWith =>
+      _$SnFediversePostCopyWithImpl<SnFediversePost>(
+          this as SnFediversePost, _$identity);
+
+  /// Serializes this SnFediversePost to a JSON map.
+  Map<String, dynamic> toJson();
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is SnFediversePost &&
+            (identical(other.id, id) || other.id == id) &&
+            (identical(other.createdAt, createdAt) ||
+                other.createdAt == createdAt) &&
+            (identical(other.updatedAt, updatedAt) ||
+                other.updatedAt == updatedAt) &&
+            (identical(other.deletedAt, deletedAt) ||
+                other.deletedAt == deletedAt) &&
+            (identical(other.identifier, identifier) ||
+                other.identifier == identifier) &&
+            (identical(other.origin, origin) || other.origin == origin) &&
+            (identical(other.content, content) || other.content == content) &&
+            (identical(other.language, language) ||
+                other.language == language) &&
+            const DeepCollectionEquality().equals(other.images, images) &&
+            (identical(other.user, user) || other.user == user) &&
+            (identical(other.userId, userId) || other.userId == userId));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(
+      runtimeType,
+      id,
+      createdAt,
+      updatedAt,
+      deletedAt,
+      identifier,
+      origin,
+      content,
+      language,
+      const DeepCollectionEquality().hash(images),
+      user,
+      userId);
+
+  @override
+  String toString() {
+    return 'SnFediversePost(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, identifier: $identifier, origin: $origin, content: $content, language: $language, images: $images, user: $user, userId: $userId)';
+  }
+}
+
+/// @nodoc
+abstract mixin class $SnFediversePostCopyWith<$Res> {
+  factory $SnFediversePostCopyWith(
+          SnFediversePost value, $Res Function(SnFediversePost) _then) =
+      _$SnFediversePostCopyWithImpl;
+  @useResult
+  $Res call(
+      {int id,
+      DateTime createdAt,
+      DateTime updatedAt,
+      DateTime? deletedAt,
+      String identifier,
+      String origin,
+      String content,
+      String language,
+      List<String> images,
+      SnFediverseUser user,
+      int userId});
+
+  $SnFediverseUserCopyWith<$Res> get user;
+}
+
+/// @nodoc
+class _$SnFediversePostCopyWithImpl<$Res>
+    implements $SnFediversePostCopyWith<$Res> {
+  _$SnFediversePostCopyWithImpl(this._self, this._then);
+
+  final SnFediversePost _self;
+  final $Res Function(SnFediversePost) _then;
+
+  /// Create a copy of SnFediversePost
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? id = null,
+    Object? createdAt = null,
+    Object? updatedAt = null,
+    Object? deletedAt = freezed,
+    Object? identifier = null,
+    Object? origin = null,
+    Object? content = null,
+    Object? language = null,
+    Object? images = null,
+    Object? user = null,
+    Object? userId = null,
+  }) {
+    return _then(_self.copyWith(
+      id: null == id
+          ? _self.id
+          : id // ignore: cast_nullable_to_non_nullable
+              as int,
+      createdAt: null == createdAt
+          ? _self.createdAt
+          : createdAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      updatedAt: null == updatedAt
+          ? _self.updatedAt
+          : updatedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      deletedAt: freezed == deletedAt
+          ? _self.deletedAt
+          : deletedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime?,
+      identifier: null == identifier
+          ? _self.identifier
+          : identifier // ignore: cast_nullable_to_non_nullable
+              as String,
+      origin: null == origin
+          ? _self.origin
+          : origin // ignore: cast_nullable_to_non_nullable
+              as String,
+      content: null == content
+          ? _self.content
+          : content // ignore: cast_nullable_to_non_nullable
+              as String,
+      language: null == language
+          ? _self.language
+          : language // ignore: cast_nullable_to_non_nullable
+              as String,
+      images: null == images
+          ? _self.images
+          : images // ignore: cast_nullable_to_non_nullable
+              as List<String>,
+      user: null == user
+          ? _self.user
+          : user // ignore: cast_nullable_to_non_nullable
+              as SnFediverseUser,
+      userId: null == userId
+          ? _self.userId
+          : userId // ignore: cast_nullable_to_non_nullable
+              as int,
+    ));
+  }
+
+  /// Create a copy of SnFediversePost
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $SnFediverseUserCopyWith<$Res> get user {
+    return $SnFediverseUserCopyWith<$Res>(_self.user, (value) {
+      return _then(_self.copyWith(user: value));
+    });
+  }
+}
+
+/// @nodoc
+@JsonSerializable()
+class _SnFediversePost implements SnFediversePost {
+  const _SnFediversePost(
+      {required this.id,
+      required this.createdAt,
+      required this.updatedAt,
+      required this.deletedAt,
+      required this.identifier,
+      required this.origin,
+      required this.content,
+      required this.language,
+      required final List<String> images,
+      required this.user,
+      required this.userId})
+      : _images = images;
+  factory _SnFediversePost.fromJson(Map<String, dynamic> json) =>
+      _$SnFediversePostFromJson(json);
+
+  @override
+  final int id;
+  @override
+  final DateTime createdAt;
+  @override
+  final DateTime updatedAt;
+  @override
+  final DateTime? deletedAt;
+  @override
+  final String identifier;
+  @override
+  final String origin;
+  @override
+  final String content;
+  @override
+  final String language;
+  final List<String> _images;
+  @override
+  List<String> get images {
+    if (_images is EqualUnmodifiableListView) return _images;
+    // ignore: implicit_dynamic_type
+    return EqualUnmodifiableListView(_images);
+  }
+
+  @override
+  final SnFediverseUser user;
+  @override
+  final int userId;
+
+  /// Create a copy of SnFediversePost
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @pragma('vm:prefer-inline')
+  _$SnFediversePostCopyWith<_SnFediversePost> get copyWith =>
+      __$SnFediversePostCopyWithImpl<_SnFediversePost>(this, _$identity);
+
+  @override
+  Map<String, dynamic> toJson() {
+    return _$SnFediversePostToJson(
+      this,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _SnFediversePost &&
+            (identical(other.id, id) || other.id == id) &&
+            (identical(other.createdAt, createdAt) ||
+                other.createdAt == createdAt) &&
+            (identical(other.updatedAt, updatedAt) ||
+                other.updatedAt == updatedAt) &&
+            (identical(other.deletedAt, deletedAt) ||
+                other.deletedAt == deletedAt) &&
+            (identical(other.identifier, identifier) ||
+                other.identifier == identifier) &&
+            (identical(other.origin, origin) || other.origin == origin) &&
+            (identical(other.content, content) || other.content == content) &&
+            (identical(other.language, language) ||
+                other.language == language) &&
+            const DeepCollectionEquality().equals(other._images, _images) &&
+            (identical(other.user, user) || other.user == user) &&
+            (identical(other.userId, userId) || other.userId == userId));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(
+      runtimeType,
+      id,
+      createdAt,
+      updatedAt,
+      deletedAt,
+      identifier,
+      origin,
+      content,
+      language,
+      const DeepCollectionEquality().hash(_images),
+      user,
+      userId);
+
+  @override
+  String toString() {
+    return 'SnFediversePost(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, identifier: $identifier, origin: $origin, content: $content, language: $language, images: $images, user: $user, userId: $userId)';
+  }
+}
+
+/// @nodoc
+abstract mixin class _$SnFediversePostCopyWith<$Res>
+    implements $SnFediversePostCopyWith<$Res> {
+  factory _$SnFediversePostCopyWith(
+          _SnFediversePost value, $Res Function(_SnFediversePost) _then) =
+      __$SnFediversePostCopyWithImpl;
+  @override
+  @useResult
+  $Res call(
+      {int id,
+      DateTime createdAt,
+      DateTime updatedAt,
+      DateTime? deletedAt,
+      String identifier,
+      String origin,
+      String content,
+      String language,
+      List<String> images,
+      SnFediverseUser user,
+      int userId});
+
+  @override
+  $SnFediverseUserCopyWith<$Res> get user;
+}
+
+/// @nodoc
+class __$SnFediversePostCopyWithImpl<$Res>
+    implements _$SnFediversePostCopyWith<$Res> {
+  __$SnFediversePostCopyWithImpl(this._self, this._then);
+
+  final _SnFediversePost _self;
+  final $Res Function(_SnFediversePost) _then;
+
+  /// Create a copy of SnFediversePost
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $Res call({
+    Object? id = null,
+    Object? createdAt = null,
+    Object? updatedAt = null,
+    Object? deletedAt = freezed,
+    Object? identifier = null,
+    Object? origin = null,
+    Object? content = null,
+    Object? language = null,
+    Object? images = null,
+    Object? user = null,
+    Object? userId = null,
+  }) {
+    return _then(_SnFediversePost(
+      id: null == id
+          ? _self.id
+          : id // ignore: cast_nullable_to_non_nullable
+              as int,
+      createdAt: null == createdAt
+          ? _self.createdAt
+          : createdAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      updatedAt: null == updatedAt
+          ? _self.updatedAt
+          : updatedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      deletedAt: freezed == deletedAt
+          ? _self.deletedAt
+          : deletedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime?,
+      identifier: null == identifier
+          ? _self.identifier
+          : identifier // ignore: cast_nullable_to_non_nullable
+              as String,
+      origin: null == origin
+          ? _self.origin
+          : origin // ignore: cast_nullable_to_non_nullable
+              as String,
+      content: null == content
+          ? _self.content
+          : content // ignore: cast_nullable_to_non_nullable
+              as String,
+      language: null == language
+          ? _self.language
+          : language // ignore: cast_nullable_to_non_nullable
+              as String,
+      images: null == images
+          ? _self._images
+          : images // ignore: cast_nullable_to_non_nullable
+              as List<String>,
+      user: null == user
+          ? _self.user
+          : user // ignore: cast_nullable_to_non_nullable
+              as SnFediverseUser,
+      userId: null == userId
+          ? _self.userId
+          : userId // ignore: cast_nullable_to_non_nullable
+              as int,
+    ));
+  }
+
+  /// Create a copy of SnFediversePost
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $SnFediverseUserCopyWith<$Res> get user {
+    return $SnFediverseUserCopyWith<$Res>(_self.user, (value) {
+      return _then(_self.copyWith(user: value));
+    });
+  }
+}
+
+/// @nodoc
+mixin _$SnFediverseUser {
+  int get id;
+  DateTime get createdAt;
+  DateTime get updatedAt;
+  DateTime? get deletedAt;
+  String get identifier;
+  String get origin;
+  String get avatar;
+  String get name;
+  String get nick;
+
+  /// Create a copy of SnFediverseUser
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @pragma('vm:prefer-inline')
+  $SnFediverseUserCopyWith<SnFediverseUser> get copyWith =>
+      _$SnFediverseUserCopyWithImpl<SnFediverseUser>(
+          this as SnFediverseUser, _$identity);
+
+  /// Serializes this SnFediverseUser to a JSON map.
+  Map<String, dynamic> toJson();
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is SnFediverseUser &&
+            (identical(other.id, id) || other.id == id) &&
+            (identical(other.createdAt, createdAt) ||
+                other.createdAt == createdAt) &&
+            (identical(other.updatedAt, updatedAt) ||
+                other.updatedAt == updatedAt) &&
+            (identical(other.deletedAt, deletedAt) ||
+                other.deletedAt == deletedAt) &&
+            (identical(other.identifier, identifier) ||
+                other.identifier == identifier) &&
+            (identical(other.origin, origin) || other.origin == origin) &&
+            (identical(other.avatar, avatar) || other.avatar == avatar) &&
+            (identical(other.name, name) || other.name == name) &&
+            (identical(other.nick, nick) || other.nick == nick));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(runtimeType, id, createdAt, updatedAt,
+      deletedAt, identifier, origin, avatar, name, nick);
+
+  @override
+  String toString() {
+    return 'SnFediverseUser(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, identifier: $identifier, origin: $origin, avatar: $avatar, name: $name, nick: $nick)';
+  }
+}
+
+/// @nodoc
+abstract mixin class $SnFediverseUserCopyWith<$Res> {
+  factory $SnFediverseUserCopyWith(
+          SnFediverseUser value, $Res Function(SnFediverseUser) _then) =
+      _$SnFediverseUserCopyWithImpl;
+  @useResult
+  $Res call(
+      {int id,
+      DateTime createdAt,
+      DateTime updatedAt,
+      DateTime? deletedAt,
+      String identifier,
+      String origin,
+      String avatar,
+      String name,
+      String nick});
+}
+
+/// @nodoc
+class _$SnFediverseUserCopyWithImpl<$Res>
+    implements $SnFediverseUserCopyWith<$Res> {
+  _$SnFediverseUserCopyWithImpl(this._self, this._then);
+
+  final SnFediverseUser _self;
+  final $Res Function(SnFediverseUser) _then;
+
+  /// Create a copy of SnFediverseUser
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? id = null,
+    Object? createdAt = null,
+    Object? updatedAt = null,
+    Object? deletedAt = freezed,
+    Object? identifier = null,
+    Object? origin = null,
+    Object? avatar = null,
+    Object? name = null,
+    Object? nick = null,
+  }) {
+    return _then(_self.copyWith(
+      id: null == id
+          ? _self.id
+          : id // ignore: cast_nullable_to_non_nullable
+              as int,
+      createdAt: null == createdAt
+          ? _self.createdAt
+          : createdAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      updatedAt: null == updatedAt
+          ? _self.updatedAt
+          : updatedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      deletedAt: freezed == deletedAt
+          ? _self.deletedAt
+          : deletedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime?,
+      identifier: null == identifier
+          ? _self.identifier
+          : identifier // ignore: cast_nullable_to_non_nullable
+              as String,
+      origin: null == origin
+          ? _self.origin
+          : origin // ignore: cast_nullable_to_non_nullable
+              as String,
+      avatar: null == avatar
+          ? _self.avatar
+          : avatar // ignore: cast_nullable_to_non_nullable
+              as String,
+      name: null == name
+          ? _self.name
+          : name // ignore: cast_nullable_to_non_nullable
+              as String,
+      nick: null == nick
+          ? _self.nick
+          : nick // ignore: cast_nullable_to_non_nullable
+              as String,
+    ));
+  }
+}
+
+/// @nodoc
+@JsonSerializable()
+class _SnFediverseUser implements SnFediverseUser {
+  const _SnFediverseUser(
+      {required this.id,
+      required this.createdAt,
+      required this.updatedAt,
+      required this.deletedAt,
+      required this.identifier,
+      required this.origin,
+      required this.avatar,
+      required this.name,
+      required this.nick});
+  factory _SnFediverseUser.fromJson(Map<String, dynamic> json) =>
+      _$SnFediverseUserFromJson(json);
+
+  @override
+  final int id;
+  @override
+  final DateTime createdAt;
+  @override
+  final DateTime updatedAt;
+  @override
+  final DateTime? deletedAt;
+  @override
+  final String identifier;
+  @override
+  final String origin;
+  @override
+  final String avatar;
+  @override
+  final String name;
+  @override
+  final String nick;
+
+  /// Create a copy of SnFediverseUser
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @pragma('vm:prefer-inline')
+  _$SnFediverseUserCopyWith<_SnFediverseUser> get copyWith =>
+      __$SnFediverseUserCopyWithImpl<_SnFediverseUser>(this, _$identity);
+
+  @override
+  Map<String, dynamic> toJson() {
+    return _$SnFediverseUserToJson(
+      this,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _SnFediverseUser &&
+            (identical(other.id, id) || other.id == id) &&
+            (identical(other.createdAt, createdAt) ||
+                other.createdAt == createdAt) &&
+            (identical(other.updatedAt, updatedAt) ||
+                other.updatedAt == updatedAt) &&
+            (identical(other.deletedAt, deletedAt) ||
+                other.deletedAt == deletedAt) &&
+            (identical(other.identifier, identifier) ||
+                other.identifier == identifier) &&
+            (identical(other.origin, origin) || other.origin == origin) &&
+            (identical(other.avatar, avatar) || other.avatar == avatar) &&
+            (identical(other.name, name) || other.name == name) &&
+            (identical(other.nick, nick) || other.nick == nick));
+  }
+
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  int get hashCode => Object.hash(runtimeType, id, createdAt, updatedAt,
+      deletedAt, identifier, origin, avatar, name, nick);
+
+  @override
+  String toString() {
+    return 'SnFediverseUser(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, identifier: $identifier, origin: $origin, avatar: $avatar, name: $name, nick: $nick)';
+  }
+}
+
+/// @nodoc
+abstract mixin class _$SnFediverseUserCopyWith<$Res>
+    implements $SnFediverseUserCopyWith<$Res> {
+  factory _$SnFediverseUserCopyWith(
+          _SnFediverseUser value, $Res Function(_SnFediverseUser) _then) =
+      __$SnFediverseUserCopyWithImpl;
+  @override
+  @useResult
+  $Res call(
+      {int id,
+      DateTime createdAt,
+      DateTime updatedAt,
+      DateTime? deletedAt,
+      String identifier,
+      String origin,
+      String avatar,
+      String name,
+      String nick});
+}
+
+/// @nodoc
+class __$SnFediverseUserCopyWithImpl<$Res>
+    implements _$SnFediverseUserCopyWith<$Res> {
+  __$SnFediverseUserCopyWithImpl(this._self, this._then);
+
+  final _SnFediverseUser _self;
+  final $Res Function(_SnFediverseUser) _then;
+
+  /// Create a copy of SnFediverseUser
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $Res call({
+    Object? id = null,
+    Object? createdAt = null,
+    Object? updatedAt = null,
+    Object? deletedAt = freezed,
+    Object? identifier = null,
+    Object? origin = null,
+    Object? avatar = null,
+    Object? name = null,
+    Object? nick = null,
+  }) {
+    return _then(_SnFediverseUser(
+      id: null == id
+          ? _self.id
+          : id // ignore: cast_nullable_to_non_nullable
+              as int,
+      createdAt: null == createdAt
+          ? _self.createdAt
+          : createdAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      updatedAt: null == updatedAt
+          ? _self.updatedAt
+          : updatedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime,
+      deletedAt: freezed == deletedAt
+          ? _self.deletedAt
+          : deletedAt // ignore: cast_nullable_to_non_nullable
+              as DateTime?,
+      identifier: null == identifier
+          ? _self.identifier
+          : identifier // ignore: cast_nullable_to_non_nullable
+              as String,
+      origin: null == origin
+          ? _self.origin
+          : origin // ignore: cast_nullable_to_non_nullable
+              as String,
+      avatar: null == avatar
+          ? _self.avatar
+          : avatar // ignore: cast_nullable_to_non_nullable
+              as String,
+      name: null == name
+          ? _self.name
+          : name // ignore: cast_nullable_to_non_nullable
+              as String,
+      nick: null == nick
+          ? _self.nick
+          : nick // ignore: cast_nullable_to_non_nullable
+              as String,
+    ));
+  }
+}
+
 // dart format on

lib/types/post.g.dart

@@ -282,3 +282,77 @@ Map<String, dynamic> _$SnSubscriptionToJson(_SnSubscription instance) =>
       'follower_id': instance.followerId,
       'account_id': instance.accountId,
     };
+
+_SnFeedEntry _$SnFeedEntryFromJson(Map<String, dynamic> json) => _SnFeedEntry(
+      type: json['type'] as String,
+      data: json['data'] as Map<String, dynamic>,
+      createdAt: DateTime.parse(json['created_at'] as String),
+    );
+
+Map<String, dynamic> _$SnFeedEntryToJson(_SnFeedEntry instance) =>
+    <String, dynamic>{
+      'type': instance.type,
+      'data': instance.data,
+      'created_at': instance.createdAt.toIso8601String(),
+    };
+
+_SnFediversePost _$SnFediversePostFromJson(Map<String, dynamic> json) =>
+    _SnFediversePost(
+      id: (json['id'] as num).toInt(),
+      createdAt: DateTime.parse(json['created_at'] as String),
+      updatedAt: DateTime.parse(json['updated_at'] as String),
+      deletedAt: json['deleted_at'] == null
+          ? null
+          : DateTime.parse(json['deleted_at'] as String),
+      identifier: json['identifier'] as String,
+      origin: json['origin'] as String,
+      content: json['content'] as String,
+      language: json['language'] as String,
+      images:
+          (json['images'] as List<dynamic>).map((e) => e as String).toList(),
+      user: SnFediverseUser.fromJson(json['user'] as Map<String, dynamic>),
+      userId: (json['user_id'] as num).toInt(),
+    );
+
+Map<String, dynamic> _$SnFediversePostToJson(_SnFediversePost instance) =>
+    <String, dynamic>{
+      'id': instance.id,
+      'created_at': instance.createdAt.toIso8601String(),
+      'updated_at': instance.updatedAt.toIso8601String(),
+      'deleted_at': instance.deletedAt?.toIso8601String(),
+      'identifier': instance.identifier,
+      'origin': instance.origin,
+      'content': instance.content,
+      'language': instance.language,
+      'images': instance.images,
+      'user': instance.user.toJson(),
+      'user_id': instance.userId,
+    };
+
+_SnFediverseUser _$SnFediverseUserFromJson(Map<String, dynamic> json) =>
+    _SnFediverseUser(
+      id: (json['id'] as num).toInt(),
+      createdAt: DateTime.parse(json['created_at'] as String),
+      updatedAt: DateTime.parse(json['updated_at'] as String),
+      deletedAt: json['deleted_at'] == null
+          ? null
+          : DateTime.parse(json['deleted_at'] as String),
+      identifier: json['identifier'] as String,
+      origin: json['origin'] as String,
+      avatar: json['avatar'] as String,
+      name: json['name'] as String,
+      nick: json['nick'] as String,
+    );
+
+Map<String, dynamic> _$SnFediverseUserToJson(_SnFediverseUser instance) =>
+    <String, dynamic>{
+      'id': instance.id,
+      'created_at': instance.createdAt.toIso8601String(),
+      'updated_at': instance.updatedAt.toIso8601String(),
+      'deleted_at': instance.deletedAt?.toIso8601String(),
+      'identifier': instance.identifier,
+      'origin': instance.origin,
+      'avatar': instance.avatar,
+      'name': instance.name,
+      'nick': instance.nick,
+    };

lib/widgets/attachment/attachment_list.dart

@@ -95,8 +95,9 @@ class _AttachmentListState extends State<AttachmentList> {
                 ),
               ),
               onTap: () {
-                if (widget.data.firstOrNull?.mediaType != SnMediaType.image)
+                if (widget.data.firstOrNull?.mediaType != SnMediaType.image) {
                   return;
+                }
                 context.pushTransparentRoute(
                   AttachmentZoomView(
                     data: widget.data.where((ele) => ele != null).cast(),
@@ -209,7 +210,7 @@ class _AttachmentListState extends State<AttachmentList> {
           child: AspectRatio(
             aspectRatio: widget.data[0]?.data['ratio']?.toDouble() ?? 1,
             child: ScrollConfiguration(
-              behavior: _AttachmentListScrollBehavior(),
+              behavior: AttachmentListScrollBehavior(),
               child: ListView.separated(
                 padding: widget.padding,
                 shrinkWrap: true,
@@ -283,7 +284,7 @@ class _AttachmentListState extends State<AttachmentList> {
   }
 }
 
-class _AttachmentListScrollBehavior extends MaterialScrollBehavior {
+class AttachmentListScrollBehavior extends MaterialScrollBehavior {
   @override
   Set<PointerDeviceKind> get dragDevices =>
       {PointerDeviceKind.touch, PointerDeviceKind.mouse};

lib/widgets/html.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:html/dom.dart' as dom;
+import 'package:surface/widgets/universal_image.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+
+List<Widget> parseHtmlToWidgets(
+    BuildContext context, Iterable<dom.Element>? elements) {
+  if (elements == null) return [];
+
+  final List<Widget> widgets = [];
+
+  for (final node in elements) {
+    switch (node.localName) {
+      case 'h1':
+      case 'h2':
+      case 'h3':
+      case 'h4':
+      case 'h5':
+      case 'h6':
+        widgets.add(Text(node.text.trim(),
+            style: Theme.of(context).textTheme.titleMedium));
+        break;
+      case 'p':
+        if (node.text.trim().isEmpty) continue;
+        widgets.add(
+          Text.rich(
+            TextSpan(
+              text: node.text.trim(),
+              children: [
+                for (final child in node.children)
+                  switch (child.localName) {
+                    'a' => TextSpan(
+                        text: child.text.trim(),
+                        style: const TextStyle(
+                            decoration: TextDecoration.underline),
+                        recognizer: TapGestureRecognizer()
+                          ..onTap = () {
+                            launchUrlString(child.attributes['href']!);
+                          },
+                      ),
+                    _ => TextSpan(text: child.text.trim()),
+                  },
+              ],
+            ),
+            style: Theme.of(context).textTheme.bodyLarge,
+          ),
+        );
+        break;
+      case 'a':
+        // drop single link
+        break;
+      case 'div':
+        // ignore div text, normally it is not meaningful
+        widgets.addAll(parseHtmlToWidgets(context, node.children));
+        break;
+      case 'hr':
+        widgets.add(const Divider());
+        break;
+      case 'img':
+        var src = node.attributes['src'];
+        if (src == null) break;
+        final width = double.tryParse(node.attributes['width'] ?? 'null');
+        final height = double.tryParse(node.attributes['height'] ?? 'null');
+        final ratio = width != null && height != null ? width / height : 1.0;
+        if (src.startsWith('//')) {
+          src = 'https:$src';
+        } else if (!src.startsWith('http')) {
+          // final baseUri = Uri.parse(_article!.url);
+          // final baseUrl = '${baseUri.scheme}://${baseUri.host}';
+          src = src;
+        }
+        widgets.add(
+          AspectRatio(
+            aspectRatio: ratio,
+            child: Container(
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.all(Radius.circular(8)),
+                border: Border.all(
+                  color: Theme.of(context).dividerColor,
+                  width: 1,
+                ),
+              ),
+              height: height ?? double.infinity,
+              child: ClipRRect(
+                borderRadius: BorderRadius.all(Radius.circular(8)),
+                child: Container(
+                  color: Theme.of(context).colorScheme.surfaceContainer,
+                  child: AutoResizeUniversalImage(
+                    src,
+                    fit: width != null && height != null
+                        ? BoxFit.cover
+                        : BoxFit.contain,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+        break;
+      default:
+        widgets.addAll(parseHtmlToWidgets(context, node.children));
+        break;
+    }
+  }
+
+  return widgets;
+}

lib/widgets/post/fediverse_post_item.dart

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/types/post.dart';
+import 'package:html/parser.dart';
+import 'package:surface/widgets/account/account_image.dart';
+import 'package:surface/widgets/attachment/attachment_list.dart';
+import 'package:surface/widgets/html.dart';
+import 'package:surface/widgets/universal_image.dart';
+
+class FediversePostWidget extends StatelessWidget {
+  final SnFediversePost data;
+  final double maxWidth;
+  const FediversePostWidget(
+      {super.key, required this.data, required this.maxWidth});
+
+  @override
+  Widget build(BuildContext context) {
+    final borderSide =
+        BorderSide(width: 1, color: Theme.of(context).dividerColor);
+    final backgroundColor = Theme.of(context).colorScheme.surfaceContainer;
+
+    return Center(
+      child: Container(
+        constraints: BoxConstraints(maxWidth: maxWidth),
+        child: Card(
+          margin: EdgeInsets.zero,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  AccountImage(content: data.user.avatar),
+                  const Gap(8),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        data.user.nick.isNotEmpty
+                            ? data.user.nick
+                            : '@${data.user.name}',
+                      ).bold(),
+                      Text(data.user.identifier),
+                    ],
+                  ),
+                ],
+              ),
+              const Gap(8),
+              ...parseHtmlToWidgets(context, parse(data.content).children),
+              if (data.images.isNotEmpty)
+                AspectRatio(
+                  aspectRatio: 1,
+                  child: ScrollConfiguration(
+                    behavior: AttachmentListScrollBehavior(),
+                    child: ListView.separated(
+                      shrinkWrap: true,
+                      itemCount: data.images.length,
+                      itemBuilder: (context, idx) {
+                        return Container(
+                          constraints: BoxConstraints(maxWidth: maxWidth),
+                          child: AspectRatio(
+                            aspectRatio: 1,
+                            child: Stack(
+                              fit: StackFit.expand,
+                              children: [
+                                Container(
+                                  decoration: BoxDecoration(
+                                    color: backgroundColor,
+                                    border: Border(
+                                      top: borderSide,
+                                      bottom: borderSide,
+                                    ),
+                                    borderRadius: AttachmentList.kDefaultRadius,
+                                  ),
+                                  child: ClipRRect(
+                                    borderRadius: AttachmentList.kDefaultRadius,
+                                    child: AutoResizeUniversalImage(
+                                      data.images[idx],
+                                    ),
+                                  ),
+                                ),
+                                Positioned(
+                                  right: 8,
+                                  bottom: 8,
+                                  child: Chip(
+                                    label: Text(
+                                        '${idx + 1}/${data.images.length}'),
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        );
+                      },
+                      separatorBuilder: (context, index) => const Gap(8),
+                      physics: const BouncingScrollPhysics(),
+                      scrollDirection: Axis.horizontal,
+                    ),
+                  ),
+                ),
+            ],
+          ).padding(all: 8),
+        ),
+      ),
+    );
+  }
+}