✨ Web articles detail page & explore feed

lib/widgets/article/article_list.dart

@@ -0,0 +1 @@
+

lib/widgets/content/markdown.dart

@@ -74,9 +74,7 @@ class MarkdownTextContent extends HookConsumerWidget {
               final url = Uri.tryParse(href);
               if (url != null) {
                 if (url.scheme == 'solian') {
-                  context.push(
-                    ['', url.host, ...url.pathSegments].join('/'),
-                  );
+                  context.push(['', url.host, ...url.pathSegments].join('/'));
                   return;
                 }
                 final whitelistDomains = ['solian.app', 'solsynth.dev'];
@@ -143,17 +141,27 @@ class MarkdownTextContent extends HookConsumerWidget {
           ),
         ],
       ),
-      generator: MarkdownGenerator(
-        generators: [latexGenerator],
-        inlineSyntaxList: [
-          _UserNameCardInlineSyntax(),
-          _StickerInlineSyntax(),
-          LatexSyntax(isDark),
-        ],
-        linesMargin: linesMargin ?? EdgeInsets.symmetric(vertical: 4),
+      generator: MarkdownTextContent.buildGenerator(
+        isDark: isDark,
+        linesMargin: linesMargin,
       ),
     );
   }
+
+  static MarkdownGenerator buildGenerator({
+    bool isDark = false,
+    EdgeInsets? linesMargin,
+  }) {
+    return MarkdownGenerator(
+      generators: [latexGenerator],
+      inlineSyntaxList: [
+        _UserNameCardInlineSyntax(),
+        _StickerInlineSyntax(),
+        LatexSyntax(isDark),
+      ],
+      linesMargin: linesMargin ?? EdgeInsets.symmetric(vertical: 4),
+    );
+  }
 }
 
 class _UserNameCardInlineSyntax extends markdown.InlineSyntax {

lib/widgets/loading_indicator.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+/// A simple loading indicator widget that can be used throughout the app
+class LoadingIndicator extends StatelessWidget {
+  /// The size of the loading indicator
+  final double size;
+
+  /// The color of the loading indicator
+  final Color? color;
+
+  /// Creates a loading indicator
+  const LoadingIndicator({
+    super.key,
+    this.size = 24.0,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: size,
+      height: size,
+      child: CircularProgressIndicator(
+        strokeWidth: 2.0,
+        valueColor: color != null
+            ? AlwaysStoppedAnimation<Color>(
+                color!,
+              )
+            : null,
+      ),
+    );
+  }
+}

lib/widgets/web_article_card.dart

@@ -1,7 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:styled_widget/styled_widget.dart';
-import 'package:url_launcher/url_launcher_string.dart';
+import 'package:go_router/go_router.dart';
 import 'package:island/models/webfeed.dart';
 
 class WebArticleCard extends StatelessWidget {
@@ -10,6 +9,10 @@ class WebArticleCard extends StatelessWidget {
 
   const WebArticleCard({super.key, required this.article, this.maxWidth});
 
+  void _onTap(BuildContext context) {
+    context.push('/articles/${article.id}');
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -20,14 +23,7 @@ class WebArticleCard extends StatelessWidget {
       child: Card(
         clipBehavior: Clip.antiAlias,
         child: InkWell(
-          onTap: () async {
-            if (await canLaunchUrlString(article.url)) {
-              await launchUrlString(
-                article.url,
-                mode: LaunchMode.externalApplication,
-              );
-            }
-          },
+          onTap: () => _onTap(context),
           child: AspectRatio(
             aspectRatio: 16 / 9,
             child: Stack(
@@ -88,9 +84,14 @@ class WebArticleCard extends StatelessWidget {
                           maxLines: 2,
                           overflow: TextOverflow.ellipsis,
                         ),
+                        const SizedBox(height: 2),
                         Text(
                           article.feed?.title ?? 'Unknown Source',
-                        ).fontSize(9).opacity(0.75).padding(top: 2),
+                          style: const TextStyle(
+                            fontSize: 9,
+                            color: Colors.white70,
+                          ),
+                        ),
                       ],
                     ),
                   ),