chore: bump version

closes #24

lib/imgproxy.dart

@@ -1,7 +1,10 @@
 import 'dart:convert';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:convert/convert.dart';
 import 'package:crypto/crypto.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:zap_stream_flutter/theme.dart';
 
 class ImgProxySettings {
   final String url;
@@ -12,11 +15,12 @@ class ImgProxySettings {
 
   static ImgProxySettings static() {
     return ImgProxySettings(
-        url: "https://imgproxy.v0l.io",
+      url: "https://imgproxy.v0l.io",
-        key:
+      key:
-            "a82fcf26aa0ccb55dfc6b4bd6a1c90744d3be0f38429f21a8828b43449ce7cebe6bdc2b09a827311bef37b18ce35cb1e6b1c60387a254541afa9e5b4264ae942",
+          "a82fcf26aa0ccb55dfc6b4bd6a1c90744d3be0f38429f21a8828b43449ce7cebe6bdc2b09a827311bef37b18ce35cb1e6b1c60387a254541afa9e5b4264ae942",
-        salt:
+      salt:
-            "a897770d9abf163de055e9617891214e75a9016d748f8ef865e6ffbcb9ed932295659549773a22a019a5f06d0b440c320be411e3fddfe784e199e4f03d74bd9b");
+          "a897770d9abf163de055e9617891214e75a9016d748f8ef865e6ffbcb9ed932295659549773a22a019a5f06d0b440c320be411e3fddfe784e199e4f03d74bd9b",
+    );
   }
 }
 
@@ -35,8 +39,14 @@ String signUrl(String u, ImgProxySettings settings) {
   return urlSafe(base64.encode(result.bytes));
 }
 
-String proxyImg(BuildContext context, String url,
+String proxyImg(
-    {ImgProxySettings? settings, int? resize, String? sha256, double? dpr}) {
+  BuildContext context,
+  String url, {
+  ImgProxySettings? settings,
+  int? resize,
+  String? sha256,
+  double? dpr,
+}) {
   final s = settings ?? ImgProxySettings.static();
 
   if (url.startsWith("data:") || url.startsWith("blob:") || url.isEmpty) {
@@ -63,4 +73,47 @@ String proxyImg(BuildContext context, String url,
   final sig = signUrl(path, s);
 
   return '${s.url}/$sig$path';
-}
+}
+
+class ProxyImg extends StatelessWidget {
+  final String? url;
+
+  /// Size of the placeholder & error images
+  final double? placeholderSize;
+
+  /// request imgproxy to resize the image
+  final int? resize;
+
+  final double? width;
+  final double? height;
+
+  const ProxyImg({
+    super.key,
+    required this.url,
+    this.placeholderSize,
+    this.resize,
+    this.width,
+    this.height,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CachedNetworkImage(
+      imageUrl: proxyImg(context, url ?? "", resize: resize),
+      width: width,
+      height: height,
+      fit: BoxFit.cover,
+      placeholderFadeInDuration: Duration.zero,
+      fadeOutDuration: Duration.zero,
+      placeholder:
+          (ctx, url) =>
+              SvgPicture.asset("assets/svg/logo.svg", height: placeholderSize),
+      errorWidget:
+          (context, url, error) => SvgPicture.asset(
+            "assets/svg/logo.svg",
+            height: placeholderSize,
+            colorFilter: ColorFilter.mode(WARNING, BlendMode.srcATop),
+          ),
+    );
+  }
+}

lib/login.dart

@@ -12,8 +12,14 @@ class LoginAccount {
   final AccountType type;
   final String pubkey;
   final String? privateKey;
+  final List<String>? signerRelays;
 
-  LoginAccount._({required this.type, required this.pubkey, this.privateKey});
+  LoginAccount._({
+    required this.type,
+    required this.pubkey,
+    this.privateKey,
+    this.signerRelays,
+  });
 
   static LoginAccount nip19(String key) {
     final keyData = bech32ToHex(key);
@@ -42,6 +48,19 @@ class LoginAccount {
     return LoginAccount._(type: AccountType.externalSigner, pubkey: key);
   }
 
+  static LoginAccount bunker(
+    String privateKey,
+    String pubkey,
+    List<String> relays,
+  ) {
+    return LoginAccount._(
+      type: AccountType.externalSigner,
+      pubkey: pubkey,
+      privateKey: privateKey,
+      signerRelays: relays,
+    );
+  }
+
   static Map<String, dynamic> toJson(LoginAccount? acc) => {
     "type": acc?.type.name,
     "pubKey": acc?.pubkey,
@@ -53,9 +72,11 @@ class LoginAccount {
       if ((json["pubKey"] as String).length != 64) {
         throw "Invalid pubkey, length != 64";
       }
-      if (json.containsKey("privateKey") &&
+      if (json.containsKey("privateKey")) {
-          (json["privateKey"] as String).length != 64) {
+        final privKey = json["privateKey"] as String?;
-        throw "Invalid privateKey, length != 64";
+        if (privKey != null && privKey.length != 64) {
+          throw "Invalid privateKey, length != 64";
+        }
       }
       return LoginAccount._(
         type: AccountType.values.firstWhere(
@@ -75,14 +96,17 @@ class LoginData extends ValueNotifier<LoginAccount?> {
 
   LoginData() : super(null) {
     super.addListener(() async {
-      final data = json.encode(LoginAccount.toJson(value));
+      if (value != null) {
-      await _storage.write(key: _storageKey, value: data);
+        final data = json.encode(LoginAccount.toJson(value));
+        await _storage.write(key: _storageKey, value: data);
+      } else {
+        await _storage.delete(key: _storageKey);
+      }
     });
   }
 
-  Future<void> logout() async {
+  void logout() {
     super.value = null;
-    await _storage.delete(key: _storageKey);
   }
 
   Future<void> load() async {

lib/main.dart

@@ -6,17 +6,20 @@ import 'package:ndk/ndk.dart';
 import 'package:ndk_amber/ndk_amber.dart';
 import 'package:ndk_objectbox/ndk_objectbox.dart';
 import 'package:ndk_rust_verifier/ndk_rust_verifier.dart';
+import 'package:zap_stream_flutter/pages/category.dart';
+import 'package:zap_stream_flutter/pages/hashtag.dart';
 import 'package:zap_stream_flutter/pages/login.dart';
 import 'package:zap_stream_flutter/pages/login_input.dart';
 import 'package:zap_stream_flutter/pages/new_account.dart';
 import 'package:zap_stream_flutter/pages/profile.dart';
+import 'package:zap_stream_flutter/pages/settings_profile.dart';
 import 'package:zap_stream_flutter/pages/stream.dart';
 import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/header.dart';
 
 import 'login.dart';
 import 'pages/home.dart';
-import 'pages/layout.dart';
 
 class NoVerify extends EventVerifier {
   @override
@@ -27,18 +30,28 @@ class NoVerify extends EventVerifier {
 
 final ndkCache = DbObjectBox();
 final eventVerifier = kDebugMode ? NoVerify() : RustEventVerifier();
-var ndk = Ndk(NdkConfig(eventVerifier: eventVerifier, cache: ndkCache, bootstrapRelays: defaultRelays));
+var ndk = Ndk(
+  NdkConfig(
+    eventVerifier: eventVerifier,
+    cache: ndkCache,
+    bootstrapRelays: defaultRelays,
+    //engine: NdkEngine.JIT,
+  ),
+);
 
 const userAgent = "zap.stream/1.0";
 const defaultRelays = [
   "wss://nos.lol",
   "wss://relay.damus.io",
   "wss://relay.primal.net",
-  "wss://relay.snort.social"
+  "wss://relay.snort.social",
+  "wss://relay.fountain.fm",
 ];
 const searchRelays = ["wss://relay.nostr.band", "wss://search.nos.today"];
 
 final loginData = LoginData();
+final RouteObserver<ModalRoute<void>> routeObserver =
+    RouteObserver<ModalRoute<void>>();
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -82,66 +95,95 @@ Future<void> main() async {
       ),
       routerConfig: GoRouter(
         routes: [
-          StatefulShellRoute.indexedStack(
+          ShellRoute(
+            observers: [routeObserver],
             builder:
-                (context, state, navigationShell) =>
+                (context, state, child) => SafeArea(
-                    SafeArea(child: LayoutScreen(navigationShell)),
+                  child: Scaffold(body: child, backgroundColor: Colors.black),
-            branches: [
+                ),
-              StatefulShellBranch(
+            routes: [
-                routes: [
+              GoRoute(path: "/", builder: (ctx, state) => HomePage()),
-                  GoRoute(path: "/", builder: (ctx, state) => HomePage()),
+              ShellRoute(
-                  ShellRoute(
+                observers: [routeObserver],
-                    builder: (context, state, child) {
+                builder: (context, state, child) {
-                      return Container(
+                  return Container(
-                        margin: EdgeInsets.only(top: 50),
+                    margin: EdgeInsets.only(top: 50),
-                        padding: EdgeInsets.symmetric(horizontal: 5),
+                    padding: EdgeInsets.symmetric(horizontal: 5),
-                        child: Column(
+                    child: Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.start,
-                          spacing: 20,
+                      spacing: 20,
-                          children: [
+                      children: [
-                            Center(
+                        Center(
-                              child: Image.asset(
+                          child: Image.asset("assets/logo.png", height: 150),
-                                "assets/logo.png",
-                                height: 150,
-                              ),
-                            ),
-                            child,
-                          ],
                         ),
-                      );
+                        child,
-                    },
+                      ],
+                    ),
+                  );
+                },
+                routes: [
+                  GoRoute(
+                    path: "/login",
+                    builder: (ctx, state) => LoginPage(),
                     routes: [
                       GoRoute(
-                        path: "/login",
+                        path: "key",
-                        builder: (ctx, state) => LoginPage(),
+                        builder: (ctx, state) => LoginInputPage(),
-                        routes: [
+                      ),
-                          GoRoute(
+                      GoRoute(
-                            path: "key",
+                        path: "new",
-                            builder: (ctx, state) => LoginInputPage(),
+                        builder: (context, state) => NewAccountPage(),
-                          ),
-                          GoRoute(
-                            path: "new",
-                            builder: (context, state) => NewAccountPage(),
-                          ),
-                        ],
                       ),
                     ],
                   ),
+                ],
+              ),
+              GoRoute(
+                path: StreamPage.path,
+                builder: (ctx, state) {
+                  if (state.extra is StreamEvent) {
+                    return StreamPage(stream: state.extra as StreamEvent);
+                  } else {
+                    throw UnimplementedError();
+                  }
+                },
+              ),
+              GoRoute(
+                path: "/p/:id",
+                builder: (ctx, state) {
+                  return ProfilePage(pubkey: state.pathParameters["id"]!);
+                },
+              ),
+              GoRoute(
+                path: "/t/:id",
+                builder: (context, state) {
+                  return HashtagPage(tag: state.pathParameters["id"]!);
+                },
+              ),
+              GoRoute(
+                path: "/category/:id",
+                builder: (context, state) {
+                  return CategoryPage(
+                    category: state.pathParameters["id"]!,
+                    info: state.extra as GameInfo?,
+                  );
+                },
+              ),
+              ShellRoute(
+                observers: [routeObserver],
+                builder:
+                    (context, state, child) =>
+                        Column(children: [HeaderWidget(), child]),
+                routes: [
                   GoRoute(
-                    path: "/e/:id",
+                    path: "/settings",
-                    builder: (ctx, state) {
+                    builder: (context, state) => SizedBox(),
-                      if (state.extra is StreamEvent) {
+                    routes: [
-                        return StreamPage(stream: state.extra as StreamEvent);
+                      GoRoute(
-                      } else {
+                        path: "profile",
-                        throw UnimplementedError();
+                        builder: (context, state) => SettingsProfilePage(),
-                      }
+                      ),
-                    },
+                    ],
-                  ),
-                  GoRoute(
-                    path: "/p/:id",
-                    builder: (ctx, state) {
-                      return ProfilePage(pubkey: state.pathParameters["id"]!);
-                    },
                   ),
                 ],
               ),

lib/pages/category.dart

@@ -0,0 +1,107 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/category_top_zapped.dart';
+import 'package:zap_stream_flutter/widgets/header.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+import 'package:zap_stream_flutter/widgets/stream_grid.dart';
+
+class CategoryPage extends StatelessWidget {
+  final String category;
+  final GameInfo? info;
+
+  const CategoryPage({super.key, required this.category, required this.info});
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Container(
+        margin: EdgeInsets.all(5.0),
+        child: Column(
+          spacing: 16,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            HeaderWidget(),
+            Row(
+              spacing: 8,
+              children: [
+                if (info?.coverImage != null)
+                  Container(
+                    clipBehavior: Clip.antiAlias,
+                    constraints: BoxConstraints(maxHeight: 200),
+                    decoration: BoxDecoration(
+                      borderRadius: DEFAULT_BR,
+                      color: LAYER_1,
+                    ),
+                    child:
+                        info!.coverImage!.startsWith("assets/")
+                            ? Image.asset(
+                              info!.coverImage!,
+                              fit: BoxFit.contain,
+                            )
+                            : ProxyImg(url: info!.coverImage!),
+                  ),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    spacing: 8,
+                    children: [
+                      Text(
+                        info?.name ?? category,
+                        style: TextStyle(
+                          fontSize: 24,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      if (info?.genres != null)
+                        Row(
+                          spacing: 4,
+                          children:
+                              info!.genres
+                                  .map(
+                                    (g) => PillWidget(
+                                      color: LAYER_1,
+                                      child: Text(
+                                        g,
+                                        style: TextStyle(
+                                          fontWeight: FontWeight.w600,
+                                        ),
+                                      ),
+                                    ),
+                                  )
+                                  .toList(),
+                        ),
+                      CategoryTopZapped(tag: category),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            RxFilter<Nip01Event>(
+              Key("category-page:$category"),
+              filters: [
+                Filter(
+                  kinds: [30_311],
+                  limit: 100,
+                  tTags: [category.toLowerCase()],
+                ),
+              ],
+              builder: (ctx, state) {
+                if (state == null) {
+                  return SizedBox.shrink();
+                } else {
+                  return StreamGrid(events: state);
+                }
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/hashtag.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/widgets/category_top_zapped.dart';
+import 'package:zap_stream_flutter/widgets/header.dart';
+import 'package:zap_stream_flutter/widgets/stream_grid.dart';
+
+class HashtagPage extends StatelessWidget {
+  final String tag;
+
+  const HashtagPage({super.key, required this.tag});
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Container(
+        margin: EdgeInsets.all(5.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            HeaderWidget(),
+            Text(
+              "#$tag",
+              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+            ),
+            CategoryTopZapped(tag: tag),
+            RxFilter<Nip01Event>(
+              Key("tags-page:$tag"),
+              filters: [
+                Filter(kinds: [30_311], limit: 100, tTags: [tag.toLowerCase()]),
+              ],
+              builder: (ctx, state) {
+                if (state == null) {
+                  return SizedBox.shrink();
+                } else {
+                  return StreamGrid(events: state);
+                }
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/home.dart

@@ -13,11 +13,13 @@ class HomePage extends StatelessWidget {
       child: Container(
         margin: EdgeInsets.all(5.0),
         child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             HeaderWidget(),
             RxFilter<Nip01Event>(
+              Key("home-page"),
               filters: [
-                Filter(kinds: [30_311], limit: 50),
+                Filter(kinds: [30_311], limit: 100),
               ],
               builder: (ctx, state) {
                 if (state == null) {
@@ -27,7 +29,6 @@ class HomePage extends StatelessWidget {
                 }
               },
             ),
-            //other stuff..
           ],
         ),
       ),

lib/pages/layout.dart

@@ -1,16 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
-
-class LayoutScreen extends StatelessWidget {
-  final StatefulNavigationShell navigationShell;
-
-  const LayoutScreen(this.navigationShell, {super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: navigationShell,
-      backgroundColor: Colors.black,
-    );
-  }
-}

lib/pages/login.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:amberflutter/amberflutter.dart';
 import 'package:flutter/widgets.dart';
 import 'package:go_router/go_router.dart';
@@ -14,27 +16,30 @@ class LoginPage extends StatelessWidget {
     return Column(
       spacing: 20,
       children: [
-        FutureBuilder(
+        if (Platform.isAndroid)
-          future: Amberflutter().isAppInstalled(),
+          FutureBuilder(
-          builder: (ctx, state) {
+            future: Amberflutter().isAppInstalled(),
-            if (state.data ?? false) {
+            builder: (ctx, state) {
-              return BasicButton.text(
+              if (state.data ?? false) {
-                "Login with Amber",
+                return BasicButton.text(
-                onTap: () async {
+                  "Login with Amber",
-                  final amber = Amberflutter();
+                  onTap: () async {
-                  final result = await amber.getPublicKey();
+                    final amber = Amberflutter();
-                  if (result['signature'] != null) {
+                    final result = await amber.getPublicKey();
-                    final key = bech32ToHex(result['signature']);
+                    if (result['signature'] != null) {
-                    loginData.value = LoginAccount.externalPublicKeyHex(key);
+                      final key = bech32ToHex(result['signature']);
-                    ctx.go("/");
+                      loginData.value = LoginAccount.externalPublicKeyHex(key);
-                  }
+                      if (ctx.mounted) {
-                },
+                        ctx.go("/");
-              );
+                      }
-            } else {
+                    }
-              return SizedBox.shrink();
+                  },
-            }
+                );
-          },
+              } else {
-        ),
+                return SizedBox.shrink();
+              }
+            },
+          ),
         BasicButton.text(
           "Login with Key",
           onTap: () => context.push("/login/key"),

lib/pages/login_input.dart

@@ -30,6 +30,14 @@ class _LoginInputPage extends State<LoginInputPage> {
           "Login",
           onTap: () async {
             try {
+              if (_controller.text.startsWith("bunker://")) {
+                // not supported yet in ndk
+                setState(() {
+                  _error = "Bunker login not supported yet";
+                  _controller.clear();
+                });
+                return;
+              }
               final keyData = bech32ToHex(_controller.text);
               if (keyData.isNotEmpty) {
                 loginData.value = LoginAccount.nip19(_controller.text);

lib/pages/new_account.dart

@@ -1,13 +1,12 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:image_picker/image_picker.dart';
 import 'package:ndk/ndk.dart';
 import 'package:ndk/shared/nips/nip01/bip340.dart';
 import 'package:ndk/shared/nips/nip01/key_pair.dart';
 import 'package:zap_stream_flutter/login.dart';
 import 'package:zap_stream_flutter/main.dart';
 import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/widgets/avatar_upload.dart';
 import 'package:zap_stream_flutter/widgets/button.dart';
 
 class NewAccountPage extends StatefulWidget {
@@ -19,28 +18,12 @@ class NewAccountPage extends StatefulWidget {
 
 class _NewAccountPage extends State<NewAccountPage> {
   final TextEditingController _name = TextEditingController();
+  final FocusNode _nameFocus = FocusNode();
   String? _avatar;
   String? _error;
+  bool _loading = false;
   final KeyPair _privateKey = Bip340.generatePrivateKey();
 
-  Future<void> _uploadAvatar() async {
-    ndk.accounts.loginPrivateKey(
-      pubkey: _privateKey.publicKey,
-      privkey: _privateKey.privateKey!,
-    );
-
-    final file = await ImagePicker().pickImage(source: ImageSource.gallery);
-    if (file != null) {
-      final upload = await ndk.blossom.uploadBlob(
-        serverUrls: ["https://nostr.download"],
-        data: await file.readAsBytes(),
-      );
-      setState(() {
-        _avatar = upload.first.descriptor!.url;
-      });
-    }
-  }
-
   Future<void> _login() async {
     if (ndk.accounts.isNotLoggedIn) {
       ndk.accounts.loginPrivateKey(
@@ -63,53 +46,58 @@ class _NewAccountPage extends State<NewAccountPage> {
     return Column(
       spacing: 20,
       children: [
-        GestureDetector(
+        AvatarUpload(
-          onTap: () {
+          onUploadStart: () async {
-            _uploadAvatar().catchError((e) {
+            if (ndk.accounts.isNotLoggedIn) {
-              setState(() {
+              ndk.accounts.loginPrivateKey(
-                if (e is String) {
+                pubkey: _privateKey.publicKey,
-                  _error = e;
+                privkey: _privateKey.privateKey!,
-                }
+              );
-              });
+            }
+          },
+          onUpload: (i) {
+            setState(() {
+              _avatar = i;
             });
           },
-          child: Container(
-            width: 200,
-            height: 200,
-            clipBehavior: Clip.antiAlias,
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(200)),
-              color: Color.fromARGB(100, 50, 50, 50),
-            ),
-            child:
-                _avatar == null
-                    ? Center(child: Text("Upload Avatar"))
-                    : CachedNetworkImage(imageUrl: _avatar!),
-          ),
         ),
         TextField(
           controller: _name,
+          readOnly: _loading,
+          focusNode: _nameFocus,
           decoration: InputDecoration(labelText: "Username"),
         ),
-        BasicButton.text(
+        ValueListenableBuilder(
-          "Login",
+          valueListenable: _name,
-          onTap: () {
+          builder: (context, value, child) {
-            _login()
+            return BasicButton.text(
-                .then((_) {
+              "Login",
-                  loginData.value = LoginAccount.privateKeyHex(
+              disabled: _loading || value.text.isEmpty,
-                    _privateKey.privateKey!,
+              onTap: () {
-                  );
+                setState(() {
-                  context.go("/");
+                  _loading = true;
-                })
+                  _nameFocus.unfocus();
-                .catchError((e) {
-                  setState(() {
-                    if (e is String) {
-                      _error = e;
-                    }
-                  });
                 });
+                _login()
+                    .then((_) {
+                      loginData.value = LoginAccount.privateKeyHex(
+                        _privateKey.privateKey!,
+                      );
+                      if (context.mounted) {
+                        context.go("/");
+                      }
+                    })
+                    .catchError((e) {
+                      setState(() {
+                        _loading = false;
+                        _error = e is String ? e : e.toString();
+                      });
+                    });
+              },
+            );
           },
         ),
+        if (_loading) CircularProgressIndicator(),
         if (_error != null)
           Text(
             _error!,

lib/pages/profile.dart

@@ -1,4 +1,3 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/widgets.dart';
 import 'package:go_router/go_router.dart';
 import 'package:ndk/ndk.dart';
@@ -9,7 +8,9 @@ import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
 import 'package:zap_stream_flutter/widgets/avatar.dart';
 import 'package:zap_stream_flutter/widgets/button.dart';
+import 'package:zap_stream_flutter/widgets/button_follow.dart';
 import 'package:zap_stream_flutter/widgets/header.dart';
+import 'package:zap_stream_flutter/widgets/nostr_text.dart';
 import 'package:zap_stream_flutter/widgets/profile.dart';
 import 'package:zap_stream_flutter/widgets/stream_grid.dart';
 
@@ -21,6 +22,8 @@ class ProfilePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final hexPubkey = bech32ToHex(pubkey);
+    final isMe = ndk.accounts.getPublicKey() == hexPubkey;
+
     return ProfileLoaderWidget(hexPubkey, (ctx, state) {
       final profile = state.data ?? Metadata(pubKey: hexPubkey);
       return SingleChildScrollView(
@@ -33,10 +36,7 @@ class ProfilePage extends StatelessWidget {
               SizedBox(
                 height: 140,
                 width: double.maxFinite,
-                child: CachedNetworkImage(
+                child: ProxyImg(url: profile.banner!),
-                  imageUrl: proxyImg(context, profile.banner!),
-                  fit: BoxFit.cover,
-                ),
               ),
             Row(
               spacing: 8,
@@ -53,9 +53,15 @@ class ProfilePage extends StatelessWidget {
                           fontWeight: FontWeight.w600,
                         ),
                       ),
-                      Text(
+                      Text.rich(
-                        profile.about ?? "",
+                        TextSpan(
-                        style: TextStyle(color: LAYER_5),
+                          style: TextStyle(color: LAYER_5),
+                          children: textToSpans(
+                            profile.about ?? "",
+                            [],
+                            profile.pubKey,
+                          ),
+                        ),
                       ),
                     ],
                   ),
@@ -63,29 +69,37 @@ class ProfilePage extends StatelessWidget {
               ],
             ),
 
-            if (ndk.accounts.getPublicKey() == hexPubkey)
+            if (isMe)
               Row(
+                spacing: 8,
                 children: [
                   BasicButton.text(
                     "Logout",
                     onTap: () {
                       loginData.logout();
+                      ndk.accounts.logout();
                       context.go("/");
                     },
                   ),
+                  BasicButton.text(
+                    "Edit Profile",
+                    onTap: () {
+                      context.push("/settings/profile");
+                    },
+                  ),
                 ],
               ),
+            if (!isMe) FollowButton(pubkey: hexPubkey),
             Text(
               "Past Streams",
               style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
             ),
 
             RxFilter<Nip01Event>(
-              key: Key("profile-streams:$hexPubkey"),
+              Key("profile-streams:$hexPubkey"),
-              relays: defaultRelays,
               filters: [
-                Filter(kinds: [30_311], limit: 200, pTags: [hexPubkey]),
+                Filter(kinds: [30_311], limit: 100, pTags: [hexPubkey]),
-                Filter(kinds: [30_311], limit: 200, authors: [hexPubkey]),
+                Filter(kinds: [30_311], limit: 100, authors: [hexPubkey]),
               ],
               builder: (ctx, state) {
                 return StreamGrid(

lib/pages/settings_profile.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/widgets/avatar_upload.dart';
+import 'package:zap_stream_flutter/widgets/button.dart';
+
+class SettingsProfilePage extends StatelessWidget {
+  final TextEditingController _picture = TextEditingController();
+  final TextEditingController _name = TextEditingController();
+  final TextEditingController _about = TextEditingController();
+  final TextEditingController _nip5 = TextEditingController();
+  final TextEditingController _lud16 = TextEditingController();
+  final ValueNotifier<bool> _loading = ValueNotifier(false);
+
+  SettingsProfilePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final pubkey = ndk.accounts.getPublicKey();
+    if (pubkey == null) return Text("Cant edit profile when logged out");
+
+    return FutureBuilder(
+      future: ndk.metadata.loadMetadata(pubkey),
+      builder: (context, state) {
+        if (state.hasData) {
+          _name.text = state.data!.name ?? "";
+          _about.text = state.data!.about ?? "";
+          _nip5.text = state.data!.nip05 ?? "";
+          _lud16.text = state.data!.lud16 ?? "";
+          _picture.text = state.data!.picture ?? "";
+        }
+        return ValueListenableBuilder(
+          valueListenable: _loading,
+          builder: (context, v, _) {
+            return Column(
+              spacing: 16,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Center(
+                  child: AvatarUpload(
+                    key: Key("avatar:${_picture.text}"),
+                    avatar: _picture.text.isEmpty ? null : _picture.text,
+                    onUpload: (i) {
+                      _picture.text = i;
+                    },
+                  ),
+                ),
+                TextField(
+                  controller: _name,
+                  readOnly: v,
+                  decoration: InputDecoration(
+                    labelText: "Display Name",
+                    fillColor: LAYER_1,
+                    filled: true,
+                  ),
+                ),
+                TextField(
+                  controller: _about,
+                  readOnly: v,
+                  decoration: InputDecoration(
+                    labelText: "About",
+                    fillColor: LAYER_1,
+                    filled: true,
+                  ),
+                ),
+                TextField(
+                  controller: _nip5,
+                  readOnly: v,
+                  decoration: InputDecoration(
+                    labelText: "Nostr Address",
+                    fillColor: LAYER_1,
+                    filled: true,
+                  ),
+                ),
+                TextField(
+                  controller: _lud16,
+                  readOnly: v,
+                  decoration: InputDecoration(
+                    labelText: "Lightning Address",
+                    fillColor: LAYER_1,
+                    filled: true,
+                  ),
+                ),
+                BasicButton.text(
+                  "Save",
+                  disabled: v,
+                  onTap: () async {
+                    _loading.value = true;
+                    try {
+                      final newMeta = Metadata(
+                        pubKey: pubkey,
+                        name: _name.text.isEmpty ? null : _name.text,
+                        about: _about.text.isEmpty ? null : _about.text,
+                        picture: _picture.text.isEmpty ? null : _picture.text,
+                        nip05: _nip5.text.isEmpty ? null : _nip5.text,
+                        lud16: _lud16.text.isEmpty ? null : _lud16.text,
+                      );
+                      await ndk.metadata.broadcastMetadata(newMeta);
+                      if (context.mounted) {
+                        context.pop();
+                      }
+                    } finally {
+                      _loading.value = false;
+                    }
+                  },
+                ),
+                if (v) Center(child: CircularProgressIndicator()),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+}

lib/pages/stream.dart

@@ -1,19 +1,24 @@
-import 'package:cached_network_image/cached_network_image.dart';
+import 'dart:developer' as developer;
-import 'package:chewie/chewie.dart';
+
 import 'package:flutter/material.dart';
-import 'package:video_player/video_player.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/ndk.dart';
 import 'package:wakelock_plus/wakelock_plus.dart';
 import 'package:zap_stream_flutter/imgproxy.dart';
 import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
 import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
 import 'package:zap_stream_flutter/widgets/button.dart';
 import 'package:zap_stream_flutter/widgets/chat.dart';
 import 'package:zap_stream_flutter/widgets/pill.dart';
 import 'package:zap_stream_flutter/widgets/profile.dart';
+import 'package:zap_stream_flutter/widgets/stream_info.dart';
+import 'package:zap_stream_flutter/widgets/video_player.dart';
 import 'package:zap_stream_flutter/widgets/zap.dart';
 
 class StreamPage extends StatefulWidget {
+  static const String path = "/e/:id";
   final StreamEvent stream;
 
   const StreamPage({super.key, required this.stream});
@@ -22,56 +27,84 @@ class StreamPage extends StatefulWidget {
   State<StatefulWidget> createState() => _StreamPage();
 }
 
-class _StreamPage extends State<StreamPage> {
+class _StreamPage extends State<StreamPage> with RouteAware {
-  VideoPlayerController? _controller;
+  bool _offScreen = false;
-  ChewieController? _chewieController;
+
+  bool isWidgetVisible(BuildContext context) {
+    final router = GoRouter.of(context);
+    final currentConfiguration = router.routerDelegate.currentConfiguration;
+    final match = currentConfiguration.matches.lastOrNull;
+    final lastMatch = match is ShellRouteMatch ? match.matches.lastOrNull : match;
+    return lastMatch != null &&
+        (lastMatch.route is GoRoute &&
+        (lastMatch.route as GoRoute).path == StreamPage.path);
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    routeObserver.subscribe(this, ModalRoute.of(context)!);
+  }
 
   @override
   void initState() {
-    super.initState();
-
     WakelockPlus.enable();
-    final url = widget.stream.info.stream;
+    super.initState();
-
-    if (url != null) {
-      if (_controller != null) {
-        _controller!.dispose();
-      }
-      _controller = VideoPlayerController.networkUrl(
-        Uri.parse(url),
-        httpHeaders: Map.from({"user-agent": userAgent}),
-      );
-      () async {
-        await _controller!.initialize();
-        setState(() {
-          _chewieController = ChewieController(
-            videoPlayerController: _controller!,
-            aspectRatio: 16 / 9,
-            autoPlay: true,
-            placeholder:
-                (widget.stream.info.image?.isNotEmpty ?? false)
-                    ? CachedNetworkImage(
-                      imageUrl: proxyImg(context, widget.stream.info.image!),
-                    )
-                    : null,
-          );
-        });
-      }();
-    }
   }
 
   @override
   void dispose() {
-    super.dispose();
     WakelockPlus.disable();
-    if (_controller != null) {
+    routeObserver.unsubscribe(this);
-      _controller!.dispose();
+    super.dispose();
-      _controller = null;
+  }
+
+  @override
+  void didPush() {
+    setState(() {
+      developer.log("STREAM: ON SCREEN");
+      _offScreen = false;
+    });
+  }
+
+  @override
+  void didPopNext() {
+    setState(() {
+      developer.log("STREAM: ON SCREEN");
+      _offScreen = false;
+    });
+  }
+
+  @override
+  void didPushNext() {
+    if (!isWidgetVisible(context)) {
+      setState(() {
+        developer.log("STREAM: OFF SCREEN");
+        _offScreen = true;
+      });
     }
   }
 
   @override
   Widget build(BuildContext context) {
+    return RxFilter<Nip01Event>(
+      Key("stream:event:${widget.stream.aTag}"),
+      relays: widget.stream.info.relays,
+      filters: [
+        Filter(
+          kinds: [widget.stream.event.kind],
+          authors: [widget.stream.event.pubKey],
+          dTags: [widget.stream.event.getDtag()!],
+        ),
+      ],
+      builder: (ctx, state) {
+        final stream = StreamEvent(state?.firstOrNull ?? widget.stream.event);
+        return _buildStream(context, stream);
+      },
+    );
+  }
+
+  Widget _buildStream(BuildContext context, StreamEvent stream) {
     return Column(
       spacing: 4,
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -79,68 +112,76 @@ class _StreamPage extends State<StreamPage> {
         AspectRatio(
           aspectRatio: 16 / 9,
           child:
-              _chewieController != null
+              (stream.info.stream != null && !_offScreen)
-                  ? Chewie(controller: _chewieController!)
+                  ? VideoPlayerWidget(
-                  : Container(
+                    url: stream.info.stream!,
-                    color: LAYER_1,
+                    placeholder: stream.info.image,
-                    child:
+                    aspectRatio: 16 / 9,
-                        (widget.stream.info.image?.isNotEmpty ?? false)
+                  )
-                            ? CachedNetworkImage(
+                  : (stream.info.image?.isNotEmpty ?? false)
-                              imageUrl: proxyImg(
+                  ? ProxyImg(url: stream.info.image)
-                                context,
+                  : Container(decoration: BoxDecoration(color: LAYER_1)),
-                                widget.stream.info.image!,
-                              ),
-                            )
-                            : null,
-                  ),
         ),
         Text(
-          widget.stream.info.title ?? "",
+          stream.info.title ?? "",
           style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
         ),
-        Row(
+        ProfileWidget.pubkey(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          stream.info.host,
           children: [
-            ProfileWidget.pubkey(widget.stream.info.host),
+            Expanded(child: SizedBox()), // spacer
-            Row(
+            BasicButton(
-              spacing: 8,
+              Row(children: [Icon(Icons.bolt, size: 14), Text("Zap")]),
-              children: [
+              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
-                BasicButton(
+              decoration: BoxDecoration(
-                  Row(children: [Icon(Icons.bolt, size: 14), Text("Zap")]),
+                color: PRIMARY_1,
-                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
+                borderRadius: DEFAULT_BR,
-                  decoration: BoxDecoration(
+              ),
-                    color: PRIMARY_1,
+              onTap: () {
-                    borderRadius: DEFAULT_BR,
+                showModalBottomSheet(
-                  ),
+                  context: context,
-                  onTap: () {
+                  constraints: BoxConstraints.expand(),
-                    showModalBottomSheet(
+                  builder: (ctx) {
-                      context: context,
+                    return SingleChildScrollView(
-                      constraints: BoxConstraints.expand(),
+                      primary: false,
-                      builder: (ctx) {
+                      child: ZapWidget(
-                        return ZapWidget(
+                        pubkey: stream.info.host,
-                          pubkey: widget.stream.info.host,
+                        target: stream.event,
-                          target: widget.stream.event,
+                        zapTags:
-                        );
+                            // tag goal onto zap request
-                      },
+                            stream.info.goal != null
+                                ? [
+                                  ["e", stream.info.goal!],
+                                ]
+                                : null,
+                      ),
                     );
                   },
+                );
+              },
+            ),
+            if (stream.info.participants != null)
+              PillWidget(
+                color: LAYER_1,
+                child: Text(
+                  "${stream.info.participants} viewers",
+                  style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
                 ),
-                if (widget.stream.info.participants != null)
+              ),
-                  PillWidget(
+            GestureDetector(
-                    color: LAYER_1,
+              onTap: () {
-                    child: Text(
+                showModalBottomSheet(
-                      "${widget.stream.info.participants} viewers",
+                  context: context,
-                      style: TextStyle(
+                  constraints: BoxConstraints.expand(),
-                        fontSize: 12,
+                  isScrollControlled: true,
-                        fontWeight: FontWeight.w500,
+                  builder: (context) => StreamInfoWidget(stream: stream),
-                      ),
+                );
-                    ),
+              },
-                  ),
+              child: Icon(Icons.info),
-              ],
             ),
           ],
         ),
-        Expanded(child: ChatWidget(stream: widget.stream)),
+        Expanded(child: ChatWidget(stream: stream)),
       ],
     );
   }

lib/rx_filter.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:collection';
 import 'dart:developer' as developer;
 
@@ -14,14 +15,14 @@ class RxFilter<T> extends StatefulWidget {
   final T Function(Nip01Event)? mapper;
   final List<String>? relays;
 
-  const RxFilter({
+  const RxFilter(
-    super.key,
+    Key key, {
     required this.filters,
     required this.builder,
     this.mapper,
     this.leaveOpen = true,
     this.relays,
-  });
+  }) : super(key: key);
 
   @override
   State<StatefulWidget> createState() => _RxFilter<T>();
@@ -29,6 +30,7 @@ class RxFilter<T> extends StatefulWidget {
 
 class _RxFilter<T> extends State<RxFilter<T>> {
   late NdkResponse _response;
+  late StreamSubscription _listener;
   HashMap<String, (int, T)>? _events;
 
   @override
@@ -37,9 +39,8 @@ class _RxFilter<T> extends State<RxFilter<T>> {
     developer.log("RX:SEDNING ${widget.filters}");
     _response = ndk.requests.subscription(
       filters: widget.filters,
-      cacheRead: true,
-      cacheWrite: true,
       explicitRelays: widget.relays,
+      cacheWrite: true
     );
     if (!widget.leaveOpen) {
       _response.future.then((_) {
@@ -47,28 +48,30 @@ class _RxFilter<T> extends State<RxFilter<T>> {
         ndk.requests.closeSubscription(_response.requestId);
       });
     }
-    _response.stream
+    _listener = _response.stream
         .bufferTime(const Duration(milliseconds: 500))
         .where((events) => events.isNotEmpty)
         .handleError((e) {
           developer.log("RX:ERROR $e");
         })
         .listen((events) {
-          setState(() {
+          if (context.mounted) {
-            _events ??= HashMap();
+            setState(() {
-            developer.log(
+              developer.log(
-              "RX:GOT ${events.length} events for ${widget.filters}",
+                "RX:GOT ${events.length} events for ${widget.filters}",
-            );
+              );
-            events.forEach(_replaceInto);
+              events.forEach(_replaceInto);
-          });
+            });
+          }
         });
   }
 
   void _replaceInto(Nip01Event ev) {
     final evKey = _eventKey(ev);
-    final existing = _events?[evKey];
+    _events ??= HashMap();
+    final existing = _events![evKey];
     if (existing == null || existing.$1 < ev.createdAt) {
-      _events?[evKey] = (
+      _events![evKey] = (
         ev.createdAt,
         widget.mapper != null ? widget.mapper!(ev) : ev as T,
       );
@@ -90,6 +93,7 @@ class _RxFilter<T> extends State<RxFilter<T>> {
     super.dispose();
 
     developer.log("RX:CLOSING ${widget.filters}");
+    _listener.cancel();
     ndk.requests.closeSubscription(_response.requestId);
   }
 
@@ -107,14 +111,14 @@ class RxFutureFilter<T> extends StatelessWidget {
   final Widget? loadingWidget;
   final T Function(Nip01Event)? mapper;
 
-  const RxFutureFilter({
+  const RxFutureFilter(
-    super.key,
+    Key key, {
     required this.filterBuilder,
     required this.builder,
     this.mapper,
     this.leaveOpen = true,
     this.loadingWidget,
-  });
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -123,6 +127,7 @@ class RxFutureFilter<T> extends StatelessWidget {
       builder: (ctx, data) {
         if (data.hasData) {
           return RxFilter<T>(
+            super.key!,
             filters: data.data!,
             mapper: mapper,
             builder: builder,

lib/utils.dart

@@ -1,7 +1,12 @@
+import 'dart:convert';
+
 import 'package:bech32/bech32.dart';
 import 'package:collection/collection.dart';
 import 'package:convert/convert.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
 import 'package:ndk/ndk.dart';
+import 'package:ndk/shared/nips/nip19/hrps.dart';
 import 'package:ndk/shared/nips/nip19/nip19.dart';
 
 /// Container class over event and stream info
@@ -14,6 +19,23 @@ class StreamEvent {
     return "${event.kind}:${event.pubKey}:${info.id}";
   }
 
+  /// Get the naddr for this stream
+  String get link {
+    final k = event.kind & 0xFFFFFFFF;
+    final idData = utf8.encode(info.id!);
+    final tlv = [
+      TLV(0, idData.length, idData),
+      TLV(2, 32, hex.decode(event.pubKey)),
+      TLV(3, 4, [
+        (k >> 24) & 0xFF,
+        (k >> 16) & 0xFF,
+        (k >> 8) & 0xFF,
+        k & 0xFF,
+      ]),
+    ];
+    return encodeBech32TLV("naddr", tlv);
+  }
+
   StreamEvent(this.event) {
     info = extractStreamInfo(event);
   }
@@ -42,6 +64,7 @@ class StreamInfo {
   String? gameId;
   GameInfo? gameInfo;
   List<String> streams;
+  List<String>? relays;
 
   StreamInfo({
     this.id,
@@ -67,16 +90,16 @@ class StreamInfo {
 }
 
 class GameInfo {
-  String id;
+  final String id;
-  String name;
+  final String name;
-  List<String> genres;
+  final List<String> genres;
-  String className;
+  final String? coverImage;
 
-  GameInfo({
+  const GameInfo({
     required this.id,
     required this.name,
     required this.genres,
-    required this.className,
+    required this.coverImage,
   });
 }
 
@@ -126,6 +149,12 @@ StreamInfo extractStreamInfo(Nip01Event ev) {
     matchTag(t, 'starts', (v) => ret.starts = int.tryParse(v));
     matchTag(t, 'ends', (v) => ret.ends = int.tryParse(v));
     matchTag(t, 'service', (v) => ret.service = v);
+    if (t[0] == "relays") {
+      ret.relays = t.slice(1);
+      if (ret.relays!.isEmpty) {
+        ret.relays = null;
+      }
+    }
   }
 
   var sortedTags = sortStreamTags(ev.tags);
@@ -169,32 +198,32 @@ StreamInfo extractStreamInfo(Nip01Event ev) {
 ({GameInfo? gameInfo, String? gameId}) extractGameTag(List<String> tags) {
   final gameId = tags.firstWhereOrNull((a) => gameTagFormat.hasMatch(a));
 
-  final internalGame = AllCategories.firstWhereOrNull(
+  final internalGame = allCategories.firstWhereOrNull(
     (a) => gameId == 'internal:${a.id}',
   );
   if (internalGame != null) {
     return (
       gameInfo: GameInfo(
-        id: internalGame.id,
+        id: "internal:${internalGame.id}",
         name: internalGame.name,
         genres: internalGame.tags,
-        className: internalGame.className,
+        coverImage: internalGame.coverImage,
       ),
       gameId: gameId,
     );
   }
 
   final lowerTags = tags.map((t) => t.toLowerCase());
-  final taggedCategory = AllCategories.firstWhereOrNull(
+  final taggedCategory = allCategories.firstWhereOrNull(
     (a) => a.tags.any(lowerTags.contains),
   );
   if (taggedCategory != null) {
     return (
       gameInfo: GameInfo(
-        id: taggedCategory.id,
+        id: "internal:${taggedCategory.id}",
         name: taggedCategory.name,
         genres: taggedCategory.tags,
-        className: taggedCategory.className,
+        coverImage: taggedCategory.coverImage,
       ),
       gameId: gameId,
     );
@@ -210,28 +239,89 @@ String getHost(Nip01Event ev) {
 }
 
 class Category {
-  String id;
+  final String id;
-  String name;
+  final String name;
-  List<String> tags;
+  final IconData icon;
-  String className;
+  final List<String> tags;
+  final int order;
+  final String? coverImage;
 
-  Category({
+  const Category({
     required this.id,
     required this.name,
+    required this.icon,
     required this.tags,
-    required this.className,
+    required this.order,
+    this.coverImage,
   });
 }
 
-List<Category> AllCategories = []; // Implement as needed
+const List<Category> allCategories = [
+  Category(
+    id: "irl",
+    name: "IRL",
+    icon: Icons.face,
+    tags: ["irl"],
+    order: 0,
+    coverImage: "assets/category/irl.jpeg",
+  ),
+  Category(
+    id: "gaming",
+    name: "Gaming",
+    icon: Icons.gamepad,
+    tags: ["gaming"],
+    order: 0,
+    coverImage: "assets/category/gaming.jpeg",
+  ),
+  Category(
+    id: "music",
+    name: "Music",
+    icon: Icons.note,
+    tags: ["music", "raido"],
+    order: 0,
+    coverImage: "assets/category/music.jpeg",
+  ),
+  Category(
+    id: "talk",
+    name: "Talk",
+    icon: Icons.mic,
+    tags: ["talk", "just-chatting"],
+    order: 0,
+    coverImage: "assets/category/talk.jpeg",
+  ),
+  Category(
+    id: "art",
+    name: "Art",
+    icon: Icons.brush,
+    tags: ["art"],
+    order: 0,
+    coverImage: "assets/category/art.jpeg",
+  ),
+  Category(
+    id: "gambling",
+    name: "Gambling",
+    icon: Icons.casino,
+    tags: ["gambling", "casino", "slots"],
+    order: 1,
+  ),
+  Category(
+    id: "science-and-technology",
+    name: "Science & Technology",
+    icon: Icons.casino,
+    tags: ["science", "tech", "technology"],
+    order: 1,
+  ),
+];
 
-String formatSats(int n) {
+String formatSats(int n, {int? maxDigits}) {
+  final fmt = NumberFormat();
+  fmt.maximumFractionDigits = maxDigits ?? 2;
   if (n >= 1000000) {
-    return "${(n / 1000000).toStringAsFixed(1)}M";
+    return "${fmt.format(n / 1000000)}M";
-  } else if (n >= 1000) {
+  } else if (n >= 1500) {
-    return "${(n / 1000).toStringAsFixed(1)}k";
+    return "${fmt.format(n / 1000)}K";
   } else {
-    return "$n";
+    return fmt.format(n);
   }
 }
 
@@ -242,6 +332,57 @@ String zapSum(List<Nip01Event> zaps) {
   return formatSats(total);
 }
 
+class TopZaps {
+  final int sum;
+  final List<ZapReceipt> zaps;
+
+  const TopZaps({required this.sum, required this.zaps});
+}
+
+Map<String, TopZaps> topZapSender(Iterable<ZapReceipt> zaps) {
+  return Map.fromEntries(
+    zaps
+        .where((e) => e.sender != null)
+        .groupListsBy((v) => v.sender!)
+        .entries
+        .map(
+          (v) => MapEntry(
+            v.key,
+            TopZaps(
+              sum: v.value.fold(0, (acc, v) => acc + (v.amountSats ?? 0)),
+              zaps: v.value,
+            ),
+          ),
+        ),
+  );
+}
+
+Map<String, TopZaps> topZapReceiver(Iterable<ZapReceipt> zaps) {
+  return Map.fromEntries(
+    zaps
+        .where((e) => e.recipient != null)
+        .groupListsBy((v) => v.recipient!)
+        .entries
+        .map(
+          (v) => MapEntry(
+            v.key,
+            TopZaps(
+              sum: v.value.fold(0, (acc, v) => acc + (v.amountSats ?? 0)),
+              zaps: v.value,
+            ),
+          ),
+        ),
+  );
+}
+
+String formatSecondsToHHMMSS(int seconds) {
+  int hours = seconds ~/ 3600;
+  int minutes = (seconds % 3600) ~/ 60;
+  int remainingSeconds = seconds % 60;
+
+  return '${hours.toString().padLeft(2, '0')}:${minutes.toString().padLeft(2, '0')}:${remainingSeconds.toString().padLeft(2, '0')}';
+}
+
 String bech32ToHex(String bech32) {
   final decoder = Bech32Decoder();
   final data = decoder.convert(bech32, 10_000);
@@ -254,12 +395,120 @@ String bech32ToHex(String bech32) {
   }
 }
 
+// https://github.com/nostr-protocol/nips/blob/master/19.md
+class TLVTypes {
+  static const int kSpecial = 0;
+  static const int kRelay = 1;
+  static const int kAuthor = 2;
+  static const int kKind = 3;
+}
+
+class TLVEntity {
+  final String hrp;
+  final List<TLV> data;
+
+  const TLVEntity(this.hrp, this.data);
+
+  TLV? get special {
+    return data.firstWhereOrNull((e) => e.type == TLVTypes.kSpecial);
+  }
+
+  /// return the special entry as hex
+  String? get specialHex {
+    final r = special;
+    return r != null ? hex.encode(r.value) : null;
+  }
+
+  /// return the special entry as utf8 string
+  String? get specialUtf8 {
+    final r = special;
+    return r != null ? utf8.decode(r.value) : null;
+  }
+
+  int? get kind {
+    final k = data.firstWhereOrNull((e) => e.type == TLVTypes.kKind);
+    return k != null
+        ? k.value[0] << 24 | k.value[1] << 16 | k.value[2] << 8 | k.value[3]
+        : null;
+  }
+
+  String? get author {
+    final a = data.firstWhereOrNull((e) => e.type == TLVTypes.kAuthor);
+    return a != null ? hex.encode(a.value) : null;
+  }
+
+  List<String>? get relays {
+    final r = data.where((r) => r.type == TLVTypes.kRelay);
+    if (r.isNotEmpty) {
+      return r.map((e) => utf8.decode(e.value)).toList();
+    }
+    return null;
+  }
+
+  Filter toFilter() {
+    var ret = <String, dynamic>{};
+    if (hrp == Hrps.kNaddr) {
+      final dTag = specialUtf8;
+      final kindValue = kind;
+      final authorValue = author;
+      if (dTag == null || kindValue == null || authorValue == null) {
+        throw "Invalid naddr entity, special, kind and author must be set";
+      }
+      ret["#d"] = [dTag];
+      ret["authors"] = [authorValue];
+      ret["kinds"] = [kindValue];
+    } else if (hrp == Hrps.kNevent) {
+      final idValue = specialHex;
+      if (idValue == null) {
+        throw "Invalid nevent, special entry is invalid or missing";
+      }
+      ret["ids"] = [idValue];
+      final kindValue = kind;
+      if (kindValue != null) {
+        ret["kinds"] = [kindValue];
+      }
+      final authorValue = author;
+      if (authorValue != null) {
+        ret["authors"] = [authorValue];
+      }
+    } else if (hrp == Hrps.kNoteId) {
+      final idValue = specialHex;
+      if (idValue == null) {
+        throw "Invalid nevent, special entry is invalid or missing";
+      }
+      ret["ids"] = [idValue];
+    } else {
+      throw "Cant convert $hrp to a filter";
+    }
+    return Filter.fromMap(ret);
+  }
+}
+
 class TLV {
   final int type;
   final int length;
   final List<int> value;
 
   TLV(this.type, this.length, this.value);
+
+  void validate() {
+    if (type < 0 || type > 255) {
+      throw ArgumentError('Type must be 0-255 (1 byte)');
+    }
+    if (length < 0 || length > 255) {
+      throw ArgumentError('Length must be 0-255 (1 byte)');
+    }
+    if (length != value.length) {
+      throw ArgumentError(
+        'Length ($length) does not match value length (${value.length})',
+      );
+    }
+    for (var byte in value) {
+      if (byte < 0 || byte > 255) {
+        throw ArgumentError('Value bytes must be 0-255');
+      }
+    }
+  }
 }
 
 List<TLV> parseTLV(List<int> data) {
@@ -294,3 +543,40 @@ List<TLV> parseTLV(List<int> data) {
 
   return result;
 }
+
+List<int> serializeTLV(List<TLV> tlvs) {
+  List<int> result = [];
+
+  for (var tlv in tlvs) {
+    tlv.validate();
+    result.add(tlv.type);
+    result.add(tlv.length);
+    result.addAll(tlv.value);
+  }
+
+  return result;
+}
+
+/// Encodes TLV data into a Bech32 string
+String encodeBech32TLV(String hrp, List<TLV> tlvs) {
+  try {
+    final data8bit = serializeTLV(tlvs);
+    final data5bit = Nip19.convertBits(data8bit, 8, 5, true);
+    final bech32Data = Bech32(hrp, data5bit);
+    return bech32.encode(bech32Data, 10_000);
+  } catch (e) {
+    throw FormatException('Failed to encode Bech32 or TLV: $e');
+  }
+}
+
+TLVEntity decodeBech32ToTLVEntity(String input) {
+  final decoder = Bech32Decoder();
+  final data = decoder.convert(input, 10_000);
+  final data8bit = Nip19.convertBits(data.data, 5, 8, false);
+  if (data.hrp != "npub" || data.hrp != "nsec" || data.hrp != "note") {
+    return TLVEntity(data.hrp, parseTLV(data8bit));
+  } else {
+    // convert to basic type using special entry only
+    return TLVEntity(data.hrp, [TLV(0, data8bit.length, data8bit)]);
+  }
+}

lib/widgets/avatar.dart

@@ -23,17 +23,13 @@ class AvatarWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final thisSize = size ?? 40;
     return ClipOval(
-      child: CachedNetworkImage(
+      child: ProxyImg(
-        fit: BoxFit.cover,
+        url:
-        imageUrl: proxyImg(
+            profile.picture ??
-          context,
+            "https://nostr.api.v0l.io/api/v1/avatar/cyberpunks/${profile.pubKey}",
-          profile.picture ??
+        resize: thisSize.ceil(),
-              "https://nostr.api.v0l.io/api/v1/avatar/cyberpunks/${profile.pubKey}",
-          resize: thisSize.ceil(),
-        ),
-        height: thisSize,
         width: thisSize,
-        errorWidget: (context, url, error) => Icon(Icons.error),
+        height: thisSize,
       ),
     );
   }

lib/widgets/avatar_upload.dart

@@ -0,0 +1,106 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:image_picker/image_picker.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+
+class AvatarUpload extends StatefulWidget {
+  final String? avatar;
+  final Future<void> Function()? onUploadStart;
+  final void Function(String)? onUpload;
+
+  const AvatarUpload({
+    super.key,
+    this.onUpload,
+    this.onUploadStart,
+    this.avatar,
+  });
+
+  @override
+  State<StatefulWidget> createState() => _AvatarUpload();
+}
+
+class _AvatarUpload extends State<AvatarUpload> {
+  String? _avatar;
+  String? _error;
+  bool _loading = false;
+
+  @override
+  void initState() {
+    _avatar = widget.avatar;
+    super.initState();
+  }
+
+  Future<String?> _uploadAvatar() async {
+    if (widget.onUploadStart != null) {
+      await widget.onUploadStart!();
+    }
+    final file = await ImagePicker().pickImage(source: ImageSource.gallery);
+    if (file != null) {
+      final upload = await ndk.blossom.uploadBlob(
+        serverUrls: ["https://nostr.download"],
+        data: await file.readAsBytes(),
+      );
+      final imgUrl = upload.first.descriptor!.url;
+      setState(() {
+        _avatar = imgUrl;
+      });
+      return imgUrl;
+    }
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          _loading = true;
+        });
+        _uploadAvatar()
+            .then((u) {
+              setState(() {
+                _loading = false;
+              });
+              if (widget.onUpload != null && u != null) {
+                widget.onUpload!(u);
+              }
+            })
+            .catchError((e) {
+              setState(() {
+                _error = e is String ? e : e.toString();
+                _loading = false;
+              });
+            });
+      },
+      child: Column(
+        spacing: 8,
+        children: [
+          Container(
+            width: 200,
+            height: 200,
+            clipBehavior: Clip.antiAlias,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(200)),
+              color: Color.fromARGB(100, 50, 50, 50),
+            ),
+            child:
+                _avatar == null
+                    ? Center(
+                      child:
+                          _loading
+                              ? CircularProgressIndicator()
+                              : Text("Upload Avatar"),
+                    )
+                    : CachedNetworkImage(imageUrl: _avatar!),
+          ),
+          if (_error != null)
+            Text(
+              _error!,
+              style: TextStyle(color: WARNING, fontWeight: FontWeight.bold),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/button.dart

@@ -7,6 +7,7 @@ class BasicButton extends StatelessWidget {
   final EdgeInsetsGeometry? padding;
   final EdgeInsetsGeometry? margin;
   final void Function()? onTap;
+  final bool? disabled;
 
   const BasicButton(
     this.child, {
@@ -15,6 +16,7 @@ class BasicButton extends StatelessWidget {
     this.padding,
     this.margin,
     this.onTap,
+    this.disabled,
   });
 
   static text(
@@ -24,6 +26,7 @@ class BasicButton extends StatelessWidget {
     EdgeInsetsGeometry? margin,
     void Function()? onTap,
     double? fontSize,
+    bool? disabled,
   }) {
     return BasicButton(
       Text(
@@ -34,6 +37,7 @@ class BasicButton extends StatelessWidget {
           fontWeight: FontWeight.bold,
         ),
       ),
+      disabled: disabled,
       decoration: decoration,
       padding: padding ?? EdgeInsets.symmetric(vertical: 4, horizontal: 12),
       margin: margin,
@@ -44,16 +48,20 @@ class BasicButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final defaultBr = BorderRadius.all(Radius.circular(100));
+    final inner = Container(
+      padding: padding,
+      margin: margin,
+      decoration:
+          decoration ?? BoxDecoration(color: LAYER_2, borderRadius: defaultBr),
+      child: Center(child: child),
+    );
     return GestureDetector(
-      onTap: onTap,
+      onTap: () {
-      child: Container(
+        if (!(disabled ?? false) && onTap != null) {
-        padding: padding,
+          onTap!();
-        margin: margin,
+        }
-        decoration:
+      },
-            decoration ??
+      child: (disabled ?? false) ? Opacity(opacity: 0.5, child: inner) : inner,
-            BoxDecoration(color: LAYER_2, borderRadius: defaultBr),
-        child: Center(child: child),
-      ),
     );
   }
 }

lib/widgets/button_follow.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/widgets/button.dart';
+
+class FollowButton extends StatelessWidget {
+  final String pubkey;
+  final void Function()? onTap;
+  final void Function()? onFollow;
+  final void Function()? onUnfollow;
+  final ValueNotifier<bool> _loading = ValueNotifier(false);
+
+  FollowButton({
+    super.key,
+    required this.pubkey,
+    this.onTap,
+    this.onFollow,
+    this.onUnfollow,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final signer = ndk.accounts.getLoggedAccount()?.signer;
+    if (signer == null || signer.getPublicKey() == pubkey) {
+      return SizedBox.shrink();
+    }
+
+    return ValueListenableBuilder(
+      valueListenable: _loading,
+      builder: (context, loading, _) {
+        return FutureBuilder(
+          future: ndk.follows.getContactList(signer.getPublicKey()),
+          builder: (context, state) {
+            final follows = state.data?.contacts ?? [];
+            final isFollowing = follows.contains(pubkey);
+            return BasicButton(
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                spacing: 8,
+                children: [
+                  loading
+                      ? SizedBox(
+                        height: 16,
+                        width: 16,
+                        child: CircularProgressIndicator(),
+                      )
+                      : Icon(
+                        isFollowing ? Icons.person_remove : Icons.person_add,
+                        size: 16,
+                      ),
+                  Text(
+                    isFollowing ? "Unfollow" : "Follow",
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  ),
+                ],
+              ),
+              disabled: loading,
+              padding: EdgeInsets.symmetric(vertical: 4, horizontal: 12),
+              decoration: BoxDecoration(
+                borderRadius: DEFAULT_BR,
+                color: LAYER_2,
+              ),
+              onTap: () async {
+                _loading.value = true;
+                try {
+                  if (onTap != null) {
+                    onTap!();
+                  }
+                  if (isFollowing) {
+                    await ndk.follows.broadcastRemoveContact(pubkey);
+                    if (onUnfollow != null) {
+                      onUnfollow!();
+                    }
+                  } else {
+                    await ndk.follows.broadcastAddContact(pubkey);
+                    if (onFollow != null) {
+                      onFollow!();
+                    }
+                  }
+                } finally {
+                  _loading.value = false;
+                }
+              },
+            );
+          },
+        );
+      },
+    );
+  }
+}

lib/widgets/category_top_zapped.dart

@@ -0,0 +1,109 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class CategoryTopZapped extends StatelessWidget {
+  final String tag;
+  final int? limit;
+
+  const CategoryTopZapped({super.key, required this.tag, this.limit});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      spacing: 8,
+      children: [
+        RichText(
+          text: TextSpan(
+            children: [
+              WidgetSpan(
+                child: Icon(Icons.bolt, color: ZAP_1),
+                alignment: PlaceholderAlignment.middle,
+              ),
+              TextSpan(
+                text: " Most Zapped Streamers",
+                style: TextStyle(color: LAYER_4, fontWeight: FontWeight.w500),
+              ),
+            ],
+          ),
+        ),
+
+        SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          primary: false,
+          child: FutureBuilder(
+            future:
+                ndk.requests
+                    .query(
+                      filters: [
+                        Filter(
+                          kinds: [30_311],
+                          limit: 100,
+                          tTags: [tag.toLowerCase()],
+                        ),
+                      ],
+                    )
+                    .future,
+            builder: (context, state) {
+              final aTags =
+                  (state.data ?? [])
+                      .map((e) => "30311:${e.pubKey}:${e.getDtag()}")
+                      .toList();
+              return RxFilter<Nip01Event>(
+                Key("top-zapped:$tag:${aTags.length}"),
+                filters: [
+                  Filter(kinds: [9735], aTags: aTags),
+                ],
+                builder: (context, zaps) {
+                  final parsedZaps =
+                      zaps?.map((e) => ZapReceipt.fromEvent(e)) ?? [];
+                  final topZapped = topZapReceiver(parsedZaps).entries
+                      .sortedBy((e) => e.value.sum)
+                      .reversed
+                      .take(limit ?? 5);
+
+                  return Row(
+                    spacing: 16,
+                    children:
+                        topZapped
+                            .map(
+                              (e) => Row(
+                                spacing: 8,
+                                children: [
+                                  AvatarWidget.pubkey(e.key),
+                                  Column(
+                                    crossAxisAlignment:
+                                        CrossAxisAlignment.start,
+                                    spacing: 2,
+                                    children: [
+                                      Text(
+                                        formatSats(e.value.sum, maxDigits: 0),
+                                        style: TextStyle(
+                                          color: ZAP_1,
+                                          fontWeight: FontWeight.bold,
+                                        ),
+                                      ),
+                                      ProfileNameWidget.pubkey(e.key),
+                                    ],
+                                  ),
+                                ],
+                              ),
+                            )
+                            .toList(),
+                  );
+                },
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/chat.dart

@@ -1,5 +1,3 @@
-import 'dart:developer' as developer;
-
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:ndk/ndk.dart';
@@ -7,16 +5,17 @@ import 'package:zap_stream_flutter/main.dart';
 import 'package:zap_stream_flutter/rx_filter.dart';
 import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
-import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/chat_message.dart';
-import 'package:zap_stream_flutter/widgets/nostr_text.dart';
+import 'package:zap_stream_flutter/widgets/chat_raid.dart';
+import 'package:zap_stream_flutter/widgets/chat_write.dart';
+import 'package:zap_stream_flutter/widgets/chat_zap.dart';
+import 'package:zap_stream_flutter/widgets/goal.dart';
 import 'package:zap_stream_flutter/widgets/profile.dart';
-import 'package:zap_stream_flutter/widgets/profile_modal.dart';
 
 class ChatWidget extends StatelessWidget {
   final StreamEvent stream;
 
   const ChatWidget({super.key, required this.stream});
-
   @override
   Widget build(BuildContext context) {
     var muteLists = [stream.info.host];
@@ -24,18 +23,24 @@ class ChatWidget extends StatelessWidget {
       muteLists.add(ndk.accounts.getPublicKey()!);
     }
 
+    var filters = [
+      Filter(kinds: [1311, 9735], limit: 200, aTags: [stream.aTag]),
+      Filter(kinds: [1312], limit: 200, aTags: [stream.aTag]),
+      Filter(kinds: [Nip51List.kMute], authors: muteLists),
+    ];
     return RxFilter<Nip01Event>(
-      filters: [
+      Key("stream:chat:${stream.aTag}"),
-        Filter(kinds: [1311, 9735], limit: 200, aTags: [stream.aTag]),
+      relays: stream.info.relays,
-        Filter(kinds: [Nip51List.kMute], authors: muteLists),
+      filters: filters,
-      ],
       builder: (ctx, state) {
         final mutedPubkeys =
             (state ?? [])
                 .where((e) => e.kind == Nip51List.kMute)
                 .map((e) => e.tags)
                 .expand((e) => e)
-                .where((e) => e[0] == "p")
+                .where(
+                  (e) => e[0] == "p" && e[1] != stream.info.host,
+                ) // cant mute host
                 .map((e) => e[1])
                 .toSet();
 
@@ -52,52 +57,54 @@ class ChatWidget extends StatelessWidget {
                 .reversed
                 .toList();
 
+        final zaps =
+            filteredChat
+                .where((e) => e.kind == 9735)
+                .map((e) => ZapReceipt.fromEvent(e))
+                .toList();
         return Column(
           spacing: 8,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            _TopZappersWidget(events: filteredChat),
+            if (zaps.isNotEmpty) _TopZappersWidget(events: zaps),
+            if (stream.info.goal != null) GoalWidget.id(stream.info.goal!),
             Expanded(
               child: ListView.builder(
                 reverse: true,
-                shrinkWrap: true,
                 primary: true,
                 itemCount: filteredChat.length,
                 itemBuilder:
                     (ctx, idx) => switch (filteredChat[idx].kind) {
-                      1311 => Padding(
+                      1311 => ChatMessageWidget(
-                        padding: EdgeInsets.symmetric(
+                        key: Key("chat:${filteredChat[idx].id}"),
-                          horizontal: 2,
+                        stream: stream,
-                          vertical: 2,
+                        msg: filteredChat[idx],
-                        ),
-                        child: _ChatMessageWidget(
-                          stream: stream,
-                          msg: filteredChat[idx],
-                        ),
                       ),
-                      9735 => Padding(
+                      1312 => ChatRaidMessage(
-                        padding: EdgeInsets.symmetric(
+                        event: filteredChat[idx],
-                          horizontal: 2,
+                        stream: stream,
-                          vertical: 2,
-                        ),
-                        child: _ChatZapWidget(
-                          stream: stream,
-                          zap: filteredChat[idx],
-                        ),
                       ),
-                      _ => SizedBox.shrink(),
+                      9735 => ChatZapWidget(
+                        key: Key("chat:${filteredChat[idx].id}"),
+                        stream: stream,
+                        zap: filteredChat[idx],
+                      ),
+                      _ => SizedBox(),
                     },
               ),
             ),
             if (stream.info.status == StreamStatus.live)
-              _WriteMessageWidget(stream: stream),
+              WriteMessageWidget(stream: stream),
             if (stream.info.status == StreamStatus.ended)
               Container(
                 padding: EdgeInsets.all(8),
-                margin: EdgeInsets.symmetric(vertical: 8),
+                margin: EdgeInsets.only(bottom: 8, top: 4),
                 width: double.maxFinite,
                 alignment: Alignment.center,
-                decoration: BoxDecoration(borderRadius: DEFAULT_BR),
+                decoration: BoxDecoration(
+                  borderRadius: DEFAULT_BR,
+                  color: PRIMARY_1,
+                ),
                 child: Text(
                   "STREAM ENDED",
                   style: TextStyle(fontWeight: FontWeight.bold),
@@ -111,7 +118,7 @@ class ChatWidget extends StatelessWidget {
 }
 
 class _TopZappersWidget extends StatelessWidget {
-  final List<Nip01Event> events;
+  final List<ZapReceipt> events;
 
   const _TopZappersWidget({required this.events});
 
@@ -119,8 +126,6 @@ class _TopZappersWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final topZaps =
         events
-            .where((e) => e.kind == 9735)
-            .map((e) => ZapReceipt.fromEvent(e))
             .fold(<String, int>{}, (acc, e) {
               if (e.sender != null) {
                 acc[e.sender!] = (acc[e.sender!] ?? 0) + e.amountSats!;
@@ -164,270 +169,3 @@ class _TopZappersWidget extends StatelessWidget {
     );
   }
 }
-
-class _ChatZapWidget extends StatelessWidget {
-  final StreamEvent stream;
-  final Nip01Event zap;
-
-  const _ChatZapWidget({required this.stream, required this.zap});
-
-  @override
-  Widget build(BuildContext context) {
-    final parsed = ZapReceipt.fromEvent(zap);
-    return Container(
-      padding: EdgeInsets.all(8),
-      decoration: BoxDecoration(
-        border: Border.all(color: ZAP_1),
-        borderRadius: DEFAULT_BR,
-      ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          _zapperRowZap(parsed),
-          if (parsed.comment?.isNotEmpty ?? false) Text(parsed.comment!),
-        ],
-      ),
-    );
-  }
-
-  Widget _zapperRowZap(ZapReceipt parsed) {
-    if (parsed.sender != null) {
-      return ProfileLoaderWidget(parsed.sender!, (ctx, state) {
-        final name = ProfileNameWidget.nameFromProfile(
-          state.data ?? Metadata(pubKey: parsed.sender!),
-        );
-        return _zapperRow(name, parsed.amountSats ?? 0, state.data);
-      });
-    } else {
-      return _zapperRow("Anon", parsed.amountSats ?? 0, null);
-    }
-  }
-
-  Widget _zapperRow(String name, int amount, Metadata? profile) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.end,
-      children: [
-        RichText(
-          text: TextSpan(
-            style: TextStyle(color: ZAP_1),
-            children: [
-              WidgetSpan(
-                child: Icon(Icons.bolt, color: ZAP_1),
-                alignment: PlaceholderAlignment.middle,
-              ),
-              if (profile != null)
-                WidgetSpan(
-                  child: Padding(
-                    padding: EdgeInsets.only(right: 8),
-                    child: AvatarWidget(profile: profile, size: 20),
-                  ),
-                  alignment: PlaceholderAlignment.middle,
-                ),
-              TextSpan(text: name),
-              TextSpan(text: " zapped ", style: TextStyle(color: FONT_COLOR)),
-              TextSpan(text: formatSats(amount)),
-              TextSpan(text: " sats", style: TextStyle(color: FONT_COLOR)),
-            ],
-          ),
-        ),
-      ],
-    );
-  }
-}
-
-class _ChatMessageWidget extends StatelessWidget {
-  final StreamEvent stream;
-  final Nip01Event msg;
-
-  const _ChatMessageWidget({required this.stream, required this.msg});
-
-  @override
-  Widget build(BuildContext context) {
-    return ProfileLoaderWidget(msg.pubKey, (ctx, state) {
-      final profile = state.data ?? Metadata(pubKey: msg.pubKey);
-      return GestureDetector(
-        onLongPress: () {
-          if (ndk.accounts.canSign) {
-            showModalBottomSheet(
-              context: context,
-              constraints: BoxConstraints.expand(),
-              builder:
-                  (ctx) => ProfileModalWidget(profile: profile, event: msg),
-            );
-          }
-        },
-        child: Column(
-          spacing: 2,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            _chatText(profile),
-            RxFilter<Nip01Event>(
-              filters: [
-                Filter(kinds: [9735, 7], eTags: [msg.id]),
-              ],
-              builder: (ctx, data) => _chatReactions(data),
-            ),
-          ],
-        ),
-      );
-    });
-  }
-
-  Widget _chatText(Metadata profile) {
-    return RichText(
-      text: TextSpan(
-        children: [
-          WidgetSpan(
-            child: AvatarWidget(profile: profile, size: 24),
-            alignment: PlaceholderAlignment.middle,
-          ),
-          TextSpan(text: " "),
-          WidgetSpan(
-            alignment: PlaceholderAlignment.middle,
-            child: ProfileNameWidget(
-              profile: profile,
-              style: TextStyle(
-                color: msg.pubKey == stream.info.host ? PRIMARY_1 : SECONDARY_1,
-              ),
-            ),
-          ),
-          TextSpan(text: " "),
-          ...textToSpans(msg.content, msg.tags, msg.pubKey),
-        ],
-      ),
-    );
-  }
-
-  Widget _chatReactions(List<Nip01Event>? events) {
-    if ((events?.length ?? 0) == 0) return SizedBox.shrink();
-
-    final zaps = events!
-        .where((e) => e.kind == 9735)
-        .map((e) => ZapReceipt.fromEvent(e));
-    final reactions = events.where((e) => e.kind == 7);
-
-    return Row(
-      spacing: 8,
-      children: [
-        if (zaps.isNotEmpty)
-          Container(
-            padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
-            decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
-            child: Row(
-              children: [
-                Icon(Icons.bolt, color: ZAP_1, size: 16),
-                Text(
-                  formatSats(
-                    zaps.fold(0, (acc, v) => acc + (v.amountSats ?? 0)),
-                  ),
-                ),
-              ],
-            ),
-          ),
-        if (reactions.isNotEmpty)
-          ...reactions
-              .fold(<String, Set<String>>{}, (acc, v) {
-                acc[v.content] ??= Set();
-                acc[v.content]!.add(v.pubKey);
-                return acc;
-              })
-              .entries
-              .map(
-                (v) => Container(
-                  padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
-                  decoration: BoxDecoration(
-                    color: LAYER_2,
-                    borderRadius: DEFAULT_BR,
-                  ),
-                  child: Center(child: Text(v.key)),
-                ),
-              ),
-      ],
-    );
-  }
-}
-
-class _WriteMessageWidget extends StatefulWidget {
-  final StreamEvent stream;
-
-  const _WriteMessageWidget({required this.stream});
-
-  @override
-  State<StatefulWidget> createState() => __WriteMessageWidget();
-}
-
-class __WriteMessageWidget extends State<_WriteMessageWidget> {
-  late final TextEditingController _controller;
-
-  @override
-  void initState() {
-    super.initState();
-    _controller = TextEditingController();
-  }
-
-  Future<void> _sendMessage() async {
-    final login = ndk.accounts.getLoggedAccount();
-    if (login == null) return;
-
-    final chatMsg = Nip01Event(
-      pubKey: login.pubkey,
-      kind: 1311,
-      content: _controller.text,
-      tags: [
-        ["a", widget.stream.aTag],
-      ],
-    );
-    final res = ndk.broadcast.broadcast(nostrEvent: chatMsg);
-    await res.broadcastDoneFuture;
-    _controller.text = "";
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final canSign = ndk.accounts.canSign;
-    final isLogin = ndk.accounts.isLoggedIn;
-
-    return Container(
-      margin: EdgeInsets.fromLTRB(4, 8, 4, 0),
-      padding: EdgeInsets.symmetric(horizontal: 8),
-      decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
-      child:
-          canSign
-              ? Row(
-                children: [
-                  Expanded(
-                    child: TextField(
-                      controller: _controller,
-                      onSubmitted: (_) => _sendMessage(),
-                      decoration: InputDecoration(
-                        labelText: "Write message",
-                        contentPadding: EdgeInsets.symmetric(vertical: 4),
-                        labelStyle: TextStyle(color: LAYER_4, fontSize: 14),
-                        border: InputBorder.none,
-                      ),
-                    ),
-                  ),
-                  //IconButton(onPressed: () {}, icon: Icon(Icons.mood)),
-                  IconButton(
-                    onPressed: () {
-                      _sendMessage();
-                    },
-                    icon: Icon(Icons.send),
-                  ),
-                ],
-              )
-              : Container(
-                padding: EdgeInsets.symmetric(vertical: 12),
-                child: Row(
-                  children: [
-                    Text(
-                      isLogin
-                          ? "Can't write messages with npub login"
-                          : "Please login to send messages",
-                    ),
-                  ],
-                ),
-              ),
-    );
-  }
-}

lib/widgets/chat_message.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/chat_modal.dart';
+import 'package:zap_stream_flutter/widgets/custom_emoji.dart';
+import 'package:zap_stream_flutter/widgets/nostr_text.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class ChatMessageWidget extends StatelessWidget {
+  final StreamEvent stream;
+  final Nip01Event msg;
+
+  const ChatMessageWidget({super.key, required this.stream, required this.msg});
+
+  @override
+  Widget build(BuildContext context) {
+    return ProfileLoaderWidget(msg.pubKey, (ctx, state) {
+      final profile = state.data ?? Metadata(pubKey: msg.pubKey);
+      return GestureDetector(
+        onLongPress: () {
+          if (ndk.accounts.canSign) {
+            showModalBottomSheet(
+              context: context,
+              constraints: BoxConstraints.expand(),
+              builder: (ctx) => ChatModalWidget(profile: profile, event: msg),
+            );
+          }
+        },
+        child: Padding(
+          padding: EdgeInsets.symmetric(horizontal: 2, vertical: 4),
+          child: Column(
+            spacing: 2,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [_chatText(profile), ChatReactions(msg: msg)],
+          ),
+        ),
+      );
+    }, key: Key("chat:${msg.id}:profile"));
+  }
+
+  Widget _chatText(Metadata profile) {
+    return RichText(
+      text: TextSpan(
+        children: [
+          WidgetSpan(
+            child: AvatarWidget(profile: profile, size: 24),
+            alignment: PlaceholderAlignment.middle,
+          ),
+          TextSpan(text: " "),
+          WidgetSpan(
+            alignment: PlaceholderAlignment.middle,
+            child: ProfileNameWidget(
+              profile: profile,
+              style: TextStyle(
+                color: msg.pubKey == stream.info.host ? PRIMARY_1 : SECONDARY_1,
+              ),
+            ),
+          ),
+          TextSpan(text: " "),
+          ...textToSpans(msg.content, msg.tags, msg.pubKey),
+        ],
+      ),
+    );
+  }
+}
+
+class ChatReactions extends StatelessWidget {
+  final Nip01Event msg;
+
+  const ChatReactions({super.key, required this.msg});
+
+  @override
+  Widget build(BuildContext context) {
+    return RxFilter<Nip01Event>(
+      Key("chat:${msg.id}:reactions"),
+      filters: [
+        Filter(kinds: [9735, 7], eTags: [msg.id]),
+      ],
+      builder: (ctx, data) => _chatReactions(ctx, data),
+    );
+  }
+
+  Widget _chatReactions(BuildContext context, List<Nip01Event>? events) {
+    if ((events?.length ?? 0) == 0) return SizedBox.shrink();
+
+    // reactions must have e tag pointing to msg
+    final filteredEvents = events!.where((e) => e.getEId() == msg.id);
+    final zaps = filteredEvents
+        .where((e) => e.kind == 9735)
+        .map((e) => ZapReceipt.fromEvent(e));
+    final reactions = filteredEvents.where((e) => e.kind == 7);
+
+    return Row(
+      spacing: 8,
+      children: [
+        if (zaps.isNotEmpty)
+          Container(
+            padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+            decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
+            child: Row(
+              children: [
+                Icon(Icons.bolt, color: ZAP_1, size: 16),
+                Text(
+                  formatSats(
+                    zaps.fold(0, (acc, v) => acc + (v.amountSats ?? 0)),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        if (reactions.isNotEmpty)
+          ...reactions
+              .fold(<String, Set<Nip01Event>>{}, (acc, v) {
+                // ignore: prefer_collection_literals
+                acc[v.content] ??= Set();
+                acc[v.content]!.add(v);
+                return acc;
+              })
+              .entries
+              .map(
+                (v) => Container(
+                  padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+                  clipBehavior: Clip.antiAlias,
+                  decoration: BoxDecoration(
+                    color: LAYER_2,
+                    borderRadius: DEFAULT_BR,
+                  ),
+                  child: Center(
+                    child: CustomEmoji(emoji: v.key, tags: v.value.first.tags),
+                  ),
+                ),
+              ),
+      ],
+    );
+  }
+}

lib/widgets/chat_modal.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/widgets/button_follow.dart';
+import 'package:zap_stream_flutter/widgets/mute_button.dart';
+import 'package:zap_stream_flutter/widgets/nostr_text.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+import 'package:zap_stream_flutter/widgets/reaction.dart';
+import 'package:zap_stream_flutter/widgets/zap.dart';
+
+class ChatModalWidget extends StatefulWidget {
+  final Metadata profile;
+  final Nip01Event event;
+
+  const ChatModalWidget({
+    super.key,
+    required this.profile,
+    required this.event,
+  });
+
+  @override
+  State<StatefulWidget> createState() => _ChatModalWidget();
+}
+
+class _ChatModalWidget extends State<ChatModalWidget> {
+  bool _showEmojiPicker = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(5, 10, 5, 0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        spacing: 10,
+        children: [
+          ProfileWidget(profile: widget.profile),
+          Container(
+            width: double.maxFinite,
+            decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
+            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+            child: NoteText(event: widget.event, showEmbeds: false),
+          ),
+          Row(
+            spacing: 8,
+            children: [
+              IconButton.filled(
+                color: LAYER_5,
+                style: ButtonStyle(
+                  backgroundColor: WidgetStateColor.resolveWith((_) => LAYER_3),
+                ),
+                onPressed:
+                    () => setState(() {
+                      _showEmojiPicker = !_showEmojiPicker;
+                    }),
+                icon: Icon(Icons.mood),
+              ),
+              if (widget.profile.lud16?.isNotEmpty ?? false)
+                IconButton.filled(
+                  color: ZAP_1,
+                  style: ButtonStyle(
+                    backgroundColor: WidgetStateColor.resolveWith(
+                      (_) => LAYER_3,
+                    ),
+                  ),
+                  onPressed: () {
+                    Navigator.pop(context);
+                    showModalBottomSheet(
+                      context: context,
+                      builder: (ctx) {
+                        return ZapWidget(
+                          pubkey: widget.event.pubKey,
+                          target: widget.event,
+                        );
+                      },
+                    );
+                  },
+                  icon: Icon(Icons.bolt),
+                ),
+            ],
+          ),
+          if (_showEmojiPicker) ReactionWidget(event: widget.event),
+          FollowButton(
+            pubkey: widget.event.pubKey,
+            onTap: () {
+              Navigator.pop(context);
+            },
+          ),
+          MuteButton(
+            pubkey: widget.event.pubKey,
+            onTap: () {
+              Navigator.pop(context);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/chat_raid.dart

@@ -0,0 +1,216 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class ChatRaidMessage extends StatefulWidget {
+  final StreamEvent stream;
+  final Nip01Event event;
+
+  const ChatRaidMessage({super.key, required this.stream, required this.event});
+
+  @override
+  State<StatefulWidget> createState() => __ChatRaidMessage();
+}
+
+class __ChatRaidMessage extends State<ChatRaidMessage>
+    with SingleTickerProviderStateMixin {
+  late final String? _from;
+  late final String? _to;
+  late final bool _isRaiding;
+
+  DateTime? _raidingAt;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _from =
+        widget.event.tags.firstWhereOrNull(
+          (t) => t[0] == "a" && (t[3] == "from" || t[3] == "root"),
+        )?[1];
+    _to =
+        widget.event.tags.firstWhereOrNull(
+          (t) => t[0] == "a" && (t[3] == "to" || t[3] == "mention"),
+        )?[1];
+    _isRaiding = _from == widget.stream.aTag;
+    final isAutoRaid =
+        ((DateTime.now().millisecondsSinceEpoch / 1000) -
+                widget.event.createdAt)
+            .abs() <
+        60;
+    if (isAutoRaid) {
+      final autoRaidDelay = Duration(seconds: 5);
+      _raidingAt = DateTime.now().add(autoRaidDelay);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_from == null || _to == null) return SizedBox.shrink();
+
+    final otherLink = (_isRaiding ? _to : _from).split(":");
+    final otherEvent = ndk.requests.query(
+      filters: [
+        Filter(
+          kinds: [int.parse(otherLink[0])],
+          authors: [otherLink[1]],
+          dTags: [otherLink[2]],
+        ),
+      ],
+    );
+
+    return Container(
+      padding: EdgeInsets.all(8),
+      margin: EdgeInsets.symmetric(vertical: 4),
+      width: double.maxFinite,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(borderRadius: DEFAULT_BR, color: PRIMARY_1),
+      child: FutureBuilder(
+        future: otherEvent.future,
+        builder: (ctx, state) {
+          final otherStream = state.data?.firstWhereOrNull(
+            (e) => e.getDtag() == otherLink[2] && e.pubKey == otherLink[1],
+          );
+          if (otherStream == null) return SizedBox.shrink();
+          final otherStreamEvent = StreamEvent(otherStream);
+          return Column(
+            children: [
+              RichText(
+                text: TextSpan(
+                  style: TextStyle(fontWeight: FontWeight.bold),
+                  children: [
+                    TextSpan(text: _isRaiding ? "RAIDING " : "RAID FROM "),
+                    WidgetSpan(
+                      alignment: PlaceholderAlignment.middle,
+                      child: ProfileLoaderWidget(otherStreamEvent.info.host, (
+                        ctx,
+                        profile,
+                      ) {
+                        return Text(
+                          ProfileNameWidget.nameFromProfile(
+                            profile.data ??
+                                Metadata(pubKey: otherStreamEvent.info.host),
+                          ).toUpperCase(),
+                          style: TextStyle(fontWeight: FontWeight.bold),
+                        );
+                      }),
+                    ),
+                    if (_raidingAt == null)
+                      WidgetSpan(
+                        alignment: PlaceholderAlignment.middle,
+                        child: GestureDetector(
+                          onTap: () {
+                            context.go(
+                              "/e/${otherStreamEvent.link}",
+                              extra: otherStreamEvent,
+                            );
+                          },
+                          child: Padding(
+                            padding: EdgeInsets.symmetric(horizontal: 8),
+                            child: Icon(Icons.open_in_new, size: 15),
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+              if (_raidingAt != null)
+                RichText(
+                  text: TextSpan(
+                    children: [
+                      TextSpan(text: "Raiding in "),
+                      WidgetSpan(
+                        alignment: PlaceholderAlignment.middle,
+                        child: CountdownTimer(
+                          triggerAt: _raidingAt!,
+                          onTrigger: () {
+                            context.go(
+                              "/e/${otherStreamEvent.link}",
+                              extra: otherStreamEvent,
+                            );
+                          },
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}
+
+class CountdownTimer extends StatefulWidget {
+  final void Function() onTrigger;
+  final TextStyle? style;
+  final DateTime triggerAt;
+
+  const CountdownTimer({
+    super.key,
+    required this.onTrigger,
+    this.style,
+    required this.triggerAt,
+  });
+
+  @override
+  createState() => _CountdownTimerState();
+}
+
+class _CountdownTimerState extends State<CountdownTimer>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _animation;
+  bool _actionTriggered = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final now = DateTime.now();
+    final countdown =
+        widget.triggerAt.isBefore(now)
+            ? Duration()
+            : widget.triggerAt.difference(now);
+
+    _controller = AnimationController(vsync: this, duration: countdown);
+
+    // Create animation to track progress from 5 to 0
+    _animation = Tween<double>(
+      begin: countdown.inSeconds.toDouble(),
+      end: 0,
+    ).animate(_controller)..addStatusListener((status) {
+      if (status == AnimationStatus.completed && !_actionTriggered) {
+        setState(() {
+          _actionTriggered = true;
+          widget.onTrigger();
+        });
+      }
+    });
+
+    // Start the countdown immediately when widget is mounted
+    _controller.forward();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose(); // Clean up the controller
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (context, child) {
+        final secondsLeft = _animation.value.ceil();
+        return Text(secondsLeft.toString(), style: widget.style);
+      },
+    );
+  }
+}

lib/widgets/chat_write.dart

@@ -0,0 +1,263 @@
+import 'package:collection/collection.dart';
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:ndk/shared/nips/nip19/nip19.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+import 'package:zap_stream_flutter/widgets/reaction.dart';
+
+class WriteMessageWidget extends StatefulWidget {
+  final StreamEvent stream;
+
+  const WriteMessageWidget({super.key, required this.stream});
+
+  @override
+  State<StatefulWidget> createState() => __WriteMessageWidget();
+}
+
+class __WriteMessageWidget extends State<WriteMessageWidget> {
+  late final TextEditingController _controller;
+  OverlayEntry? _entry;
+  late FocusNode _focusNode;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode = FocusNode();
+    _focusNode.addListener(() {
+      if (!_focusNode.hasFocus && _entry != null) {
+        _entry!.remove();
+        _entry = null;
+      }
+    });
+    _controller = TextEditingController();
+    _controller.addListener(() {
+      if (_controller.text.endsWith("@")) {
+        // start auto-complete
+        _showAutoComplete();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    if (_entry != null) {
+      _entry!.remove();
+    }
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _showAutoComplete() {
+    if (_entry != null) {
+      _entry!.remove();
+      _entry = null;
+    }
+
+    final pos = context.findRenderObject() as RenderBox?;
+    _entry = OverlayEntry(
+      builder: (context) {
+        return ValueListenableBuilder(
+          valueListenable: _controller,
+          builder: (context, v, _) {
+            final selectionStart = v.text.lastIndexOf("@");
+            if (selectionStart == -1) {
+              _entry!.remove();
+              _entry = null;
+              return SizedBox();
+            }
+            final search = v.text.substring(selectionStart + 1, v.text.length);
+            if (search.isEmpty) {
+              return SizedBox();
+            }
+            return Stack(
+              children: [
+                Positioned(
+                  left: 0,
+                  bottom: (pos?.paintBounds.bottom ?? 0),
+                  width: MediaQuery.of(context).size.width,
+                  child: Container(
+                    padding: EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+                    decoration: BoxDecoration(
+                      color: LAYER_2,
+                      borderRadius: DEFAULT_BR,
+                    ),
+                    child: FutureBuilder(
+                      future: ndkCache.searchMetadatas(search, 5),
+                      builder: (context, state) {
+                        if (state.data?.isEmpty ?? true) {
+                          return Text("No user found");
+                        }
+
+                        return Column(
+                          spacing: 4,
+                          children:
+                              (state.data ?? [])
+                                  .groupListsBy((m) => m.pubKey)
+                                  .entries
+                                  .map(
+                                    (m) => GestureDetector(
+                                      onTap: () {
+                                        // replace search string with npub
+                                        _controller
+                                            .text = _controller.text.replaceRange(
+                                          selectionStart,
+                                          _controller.text.length,
+                                          "nostr:${Nip19.encodePubKey(m.value.first.pubKey)}",
+                                        );
+                                        _entry!.remove();
+                                        _entry = null;
+                                      },
+                                      child: Row(
+                                        spacing: 4,
+                                        children: [
+                                          AvatarWidget(
+                                            profile: m.value.first,
+                                            size: 30,
+                                          ),
+                                          Expanded(
+                                            child: Text(
+                                              ProfileNameWidget.nameFromProfile(
+                                                m.value.first,
+                                              ),
+                                            ),
+                                          ),
+                                        ],
+                                      ),
+                                    ),
+                                  )
+                                  .toList(),
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+    Overlay.of(context).insert(_entry!);
+  }
+
+  void _showEmojiPicker() {
+    if (_entry != null) {
+      _entry!.remove();
+      _entry = null;
+    }
+
+    final pos = context.findRenderObject() as RenderBox?;
+    _entry = OverlayEntry(
+      builder: (context) {
+        return Stack(
+          children: [
+            Positioned(
+              left: 0,
+              bottom: (pos?.paintBounds.bottom ?? 0),
+              width: MediaQuery.of(context).size.width,
+              child: Container(
+                padding: EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+                decoration: BoxDecoration(
+                  color: LAYER_2,
+                  borderRadius: DEFAULT_BR,
+                ),
+                child: EmojiPicker(
+                  onEmojiSelected: (category, emoji) {
+                    _controller.text = _controller.text + emoji.emoji;
+                  },
+                  config: emojiPickerConfig,
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+    Overlay.of(context).insert(_entry!);
+  }
+
+  Future<void> _sendMessage(BuildContext context) async {
+    final login = ndk.accounts.getLoggedAccount();
+    if (login == null || _controller.text.isEmpty) return;
+
+    final chatMsg = Nip01Event(
+      pubKey: login.pubkey,
+      kind: 1311,
+      content: _controller.text.toString(),
+      tags: [
+        ["a", widget.stream.aTag],
+      ],
+    );
+    _controller.clear();
+    _focusNode.unfocus();
+    final res = ndk.broadcast.broadcast(nostrEvent: chatMsg);
+    await res.broadcastDoneFuture;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final canSign = ndk.accounts.canSign;
+    final isLogin = ndk.accounts.isLoggedIn;
+
+    return Container(
+      margin: EdgeInsets.fromLTRB(4, 8, 4, 0),
+      padding: EdgeInsets.symmetric(horizontal: 8),
+      decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
+      child:
+          canSign
+              ? Row(
+                children: [
+                  Expanded(
+                    child: TextField(
+                      maxLines: 3,
+                      minLines: 1,
+                      focusNode: _focusNode,
+                      controller: _controller,
+                      onSubmitted: (_) => _sendMessage(context),
+                      decoration: InputDecoration(
+                        labelText: "Write message",
+                        contentPadding: EdgeInsets.symmetric(vertical: 4),
+                        labelStyle: TextStyle(color: LAYER_4, fontSize: 14),
+                        border: InputBorder.none,
+                      ),
+                    ),
+                  ),
+                  IconButton(
+                    onPressed: () {
+                      if (_entry != null) {
+                        _entry!.remove();
+                        _entry = null;
+                      } else {
+                        _showEmojiPicker();
+                      }
+                    },
+                    icon: Icon(Icons.mood),
+                  ),
+                  IconButton(
+                    onPressed: () {
+                      _sendMessage(context);
+                    },
+                    icon: Icon(Icons.send),
+                  ),
+                ],
+              )
+              : Container(
+                padding: EdgeInsets.symmetric(vertical: 12),
+                child: Row(
+                  children: [
+                    Text(
+                      isLogin
+                          ? "Can't write messages with npub login"
+                          : "Please login to send messages",
+                    ),
+                  ],
+                ),
+              ),
+    );
+  }
+}

lib/widgets/chat_zap.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/avatar.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class ChatZapWidget extends StatelessWidget {
+  final StreamEvent stream;
+  final Nip01Event zap;
+
+  const ChatZapWidget({required this.stream, required this.zap, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final parsed = ZapReceipt.fromEvent(zap);
+    return Container(
+      margin: EdgeInsets.symmetric(vertical: 4),
+      padding: EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        border: Border.all(color: ZAP_1),
+        borderRadius: DEFAULT_BR,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _zapperRowZap(parsed),
+          if (parsed.comment?.isNotEmpty ?? false) Text(parsed.comment!),
+        ],
+      ),
+    );
+  }
+
+  Widget _zapperRowZap(ZapReceipt parsed) {
+    if (parsed.sender != null) {
+      return ProfileLoaderWidget(parsed.sender!, (ctx, state) {
+        final name = ProfileNameWidget.nameFromProfile(
+          state.data ?? Metadata(pubKey: parsed.sender!),
+        );
+        return _zapperRow(name, parsed.amountSats ?? 0, state.data);
+      });
+    } else {
+      return _zapperRow("Anon", parsed.amountSats ?? 0, null);
+    }
+  }
+
+  Widget _zapperRow(String name, int amount, Metadata? profile) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        RichText(
+          text: TextSpan(
+            style: TextStyle(color: ZAP_1),
+            children: [
+              WidgetSpan(
+                child: Icon(Icons.bolt, color: ZAP_1),
+                alignment: PlaceholderAlignment.middle,
+              ),
+              if (profile != null)
+                WidgetSpan(
+                  child: Padding(
+                    padding: EdgeInsets.only(right: 8),
+                    child: AvatarWidget(profile: profile, size: 20),
+                  ),
+                  alignment: PlaceholderAlignment.middle,
+                ),
+              TextSpan(text: name),
+              TextSpan(text: " zapped ", style: TextStyle(color: FONT_COLOR)),
+              TextSpan(text: formatSats(amount)),
+              TextSpan(text: " sats", style: TextStyle(color: FONT_COLOR)),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/custom_emoji.dart

@@ -0,0 +1,34 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/widgets.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
+
+class CustomEmoji extends StatelessWidget {
+  final List<List<String>> tags;
+  final String emoji;
+  final double? size;
+
+  const CustomEmoji({
+    super.key,
+    required this.tags,
+    required this.emoji,
+    this.size,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final cleanedEmojiName =
+        emoji.startsWith(":") && emoji.endsWith(":")
+            ? emoji.substring(1, emoji.length - 1)
+            : emoji;
+
+    final customEmoji =
+        tags.firstWhereOrNull(
+          (t) => t[0] == "emoji" && t[1] == cleanedEmojiName,
+        )?[2];
+    if (customEmoji != null) {
+      return ProxyImg(url: customEmoji, width: size ?? 16, height: size ?? 16);
+    } else {
+      return Text(emoji);
+    }
+  }
+}

lib/widgets/game_info.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/widgets.dart';
+import 'package:go_router/go_router.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+
+class GameInfoWidget extends StatelessWidget {
+  final GameInfo info;
+
+  const GameInfoWidget({super.key, required this.info});
+
+  @override
+  Widget build(BuildContext context) {
+    return PillWidget(
+      color: LAYER_2,
+      onTap: () {
+        context.push("/category/${Uri.encodeComponent(info.id)}", extra: info);
+      },
+      child: Text(
+        info.name,
+        style: TextStyle(color: PRIMARY_1, fontWeight: FontWeight.bold),
+      ),
+    );
+  }
+}

lib/widgets/goal.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+
+class GoalWidget extends StatelessWidget {
+  final Nip01Event goal;
+
+  const GoalWidget({super.key, required this.goal});
+
+  static Widget id(String id) {
+    return RxFilter<Nip01Event>(
+      Key("stream:goal:$id"),
+      leaveOpen: false,
+      filters: [
+        Filter(kinds: [9041], ids: [id]),
+      ],
+      builder: (ctx, state) {
+        final goal = state?.firstOrNull;
+        return goal != null ? GoalWidget(goal: goal) : SizedBox.shrink();
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final max = int.parse(goal.getFirstTag("amount") ?? "1");
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4),
+      child: RxFilter<Nip01Event>(
+        Key("goal:$id:zaps"),
+        filters: [
+          Filter(kinds: [9735], eTags: [goal.id]),
+        ],
+        builder: (ctx, state) {
+          final zaps = (state ?? []).map((e) => ZapReceipt.fromEvent(e));
+          final totalZaps =
+              zaps.fold(0, (acc, v) => acc + (v.amountSats ?? 0)) * 1000;
+          final progress = totalZaps / max;
+          final remaining = ((max - totalZaps).clamp(0, max) / 1000).toInt();
+
+          final q = MediaQuery.of(ctx);
+          return Column(
+            spacing: 4,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  Expanded(child: Text(goal.content)),
+                  if (remaining > 0)
+                    Text(
+                      "Remaining: ${formatSats(remaining)}",
+                      style: TextStyle(fontSize: 10, color: LAYER_5),
+                    ),
+                ],
+              ),
+              Stack(
+                children: [
+                  Container(
+                    height: 10,
+                    decoration: BoxDecoration(
+                      color: LAYER_2,
+                      borderRadius: DEFAULT_BR,
+                    ),
+                  ),
+                  Container(
+                    height: 10,
+                    width: (q.size.width * progress).clamp(1, q.size.width),
+                    decoration: BoxDecoration(
+                      color: ZAP_1,
+                      borderRadius: DEFAULT_BR,
+                    ),
+                  ),
+                  if (remaining > 0)
+                    Positioned(
+                      right: 2,
+                      child: Text(
+                        "Goal: ${formatSats((max / 1000).toInt())}",
+                        style: TextStyle(
+                          fontSize: 8,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                  if (remaining == 0)
+                    Center(
+                      child: Text(
+                        "COMPLETE",
+                        style: TextStyle(
+                          color: LAYER_0,
+                          fontSize: 8,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}

lib/widgets/live_timer.dart

@@ -0,0 +1,49 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+
+class LiveTimerWidget extends StatefulWidget {
+  final DateTime started;
+
+  const LiveTimerWidget({super.key, required this.started});
+
+  @override
+  createState() => _LiveTimerWidget();
+}
+
+class _LiveTimerWidget extends State<LiveTimerWidget> {
+  late Timer _timer;
+
+  @override
+  void initState() {
+    super.initState();
+    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
+      setState(() {
+        // tick
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _timer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return PillWidget(
+      color: LAYER_2,
+      child: Text(
+        formatSecondsToHHMMSS(
+          ((DateTime.now().millisecondsSinceEpoch -
+                      widget.started.millisecondsSinceEpoch) /
+                  1000)
+              .toInt(),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/mute_button.dart

@@ -6,8 +6,17 @@ import 'package:zap_stream_flutter/widgets/button.dart';
 
 class MuteButton extends StatelessWidget {
   final String pubkey;
+  final void Function()? onTap;
+  final void Function()? onMute;
+  final void Function()? onUnmute;
 
-  const MuteButton({super.key, required this.pubkey});
+  const MuteButton({
+    super.key,
+    required this.pubkey,
+    this.onTap,
+    this.onMute,
+    this.onUnmute,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -30,8 +39,14 @@ class MuteButton extends StatelessWidget {
             ),
           ),
           padding: EdgeInsets.symmetric(vertical: 4, horizontal: 12),
-          decoration: BoxDecoration(color: WARNING, borderRadius: DEFAULT_BR),
+          decoration: BoxDecoration(
+            color: isMuted ? LAYER_2 : WARNING,
+            borderRadius: DEFAULT_BR,
+          ),
           onTap: () async {
+            if (onTap != null) {
+              onTap!();
+            }
             if (isMuted) {
               await ndk.lists.broadcastRemoveNip51ListElement(
                 Nip51List.kMute,
@@ -39,6 +54,9 @@ class MuteButton extends StatelessWidget {
                 pubkey,
                 null,
               );
+              if (onUnmute != null) {
+                onUnmute!();
+              }
             } else {
               await ndk.lists.broadcastAddNip51ListElement(
                 Nip51List.kMute,
@@ -46,9 +64,10 @@ class MuteButton extends StatelessWidget {
                 pubkey,
                 null,
               );
-            }
+
-            if (ctx.mounted) {
+              if (onMute != null) {
-              Navigator.pop(ctx);
+                onMute!();
+              }
             }
           },
         );

lib/widgets/nostr_text.dart

@@ -1,33 +1,67 @@
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
 import 'package:go_router/go_router.dart';
 import 'package:ndk/ndk.dart';
 import 'package:ndk/shared/nips/nip19/nip19.dart';
 import 'package:url_launcher/url_launcher.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
 import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/custom_emoji.dart';
+import 'package:zap_stream_flutter/widgets/note_embed.dart';
 import 'package:zap_stream_flutter/widgets/profile.dart';
+import 'package:zap_stream_flutter/widgets/video_player.dart';
+
+class NoteText extends StatelessWidget {
+  final Nip01Event event;
+  final bool? embedMedia;
+  final bool? showEmbeds;
+
+  const NoteText({
+    super.key,
+    required this.event,
+    this.embedMedia,
+    this.showEmbeds,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // use markdown rendering for articles
+    if (event.kind == 30_023) {
+      return MarkdownBody(data: event.content);
+    }
+    return RichText(
+      text: TextSpan(
+        children: textToSpans(
+          event.content,
+          event.tags,
+          event.pubKey,
+          showEmbeds: showEmbeds,
+          embedMedia: embedMedia,
+        ),
+      ),
+    );
+  }
+}
 
 /// Converts a nostr note text containing links
 /// and mentions into multiple spans for rendering
+/// /// https://github.com/leo-lox/camelus/blob/f58455a0ac07fcc780bdc69b8f4544fd5ea4a46d/lib/presentation_layer/components/note_card/note_card_build_split_content.dart#L262
 List<InlineSpan> textToSpans(
   String content,
   List<List<String>> tags,
-  String pubkey,
+  String pubkey, {
-) {
+  bool? showEmbeds,
-  return _buildContentSpans(content);
+  bool? embedMedia,
-}
+}) {
-
-/// Content parser from camelus
-/// https://github.com/leo-lox/camelus/blob/f58455a0ac07fcc780bdc69b8f4544fd5ea4a46d/lib/presentation_layer/components/note_card/note_card_build_split_content.dart#L262
-List<InlineSpan> _buildContentSpans(String content) {
   List<InlineSpan> spans = [];
   RegExp exp = RegExp(
     r'nostr:(nprofile|npub)[a-zA-Z0-9]+|'
-    r'nostr:(note|nevent)[a-zA-Z0-9]+|'
+    r'nostr:(note|nevent|naddr)[a-zA-Z0-9]+|'
     r'(#\$\$\s*[0-9]+\s*\$\$)|'
     r'(#\w+)|' // Hashtags
-    r'(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*))', // URLs
+    r'(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,10}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*))', // URLs
     caseSensitive: false,
   );
 
@@ -37,17 +71,33 @@ List<InlineSpan> _buildContentSpans(String content) {
       String? matched = match.group(0);
       if (matched != null) {
         if (matched.startsWith('nostr:')) {
-          spans.add(_buildProfileOrNoteSpan(matched));
+          spans.add(_buildProfileOrNoteSpan(matched, showEmbeds ?? true));
         } else if (matched.startsWith('#')) {
           spans.add(_buildHashtagSpan(matched));
         } else if (matched.startsWith('http')) {
-          spans.add(_buildUrlSpan(matched));
+          spans.add(_buildUrlSpan(matched, embedMedia ?? false));
         }
       }
       return '';
     },
     onNonMatch: (String text) {
-      spans.add(TextSpan(text: text));
+      final textTrim = text.trim();
+      if (textTrim.startsWith(":") &&
+          textTrim.endsWith(":") &&
+          tags.any(
+            (t) =>
+                t[0] == "emoji" &&
+                t[1] == textTrim.substring(1, textTrim.length - 1),
+          )) {
+        spans.add(
+          WidgetSpan(
+            alignment: PlaceholderAlignment.middle,
+            child: CustomEmoji(emoji: textTrim, tags: tags, size: 24),
+          ),
+        );
+      } else {
+        spans.add(TextSpan(text: text));
+      }
       return '';
     },
   );
@@ -55,12 +105,14 @@ List<InlineSpan> _buildContentSpans(String content) {
   return spans;
 }
 
-InlineSpan _buildProfileOrNoteSpan(String word) {
+InlineSpan _buildProfileOrNoteSpan(String word, bool showEmbeds) {
   final cleanedWord = word.replaceAll('nostr:', '');
   final isProfile =
       cleanedWord.startsWith('nprofile') || cleanedWord.startsWith('npub');
   final isNote =
-      cleanedWord.startsWith('note') || cleanedWord.startsWith('nevent');
+      cleanedWord.startsWith('note') ||
+      cleanedWord.startsWith('nevent') ||
+      cleanedWord.startsWith("naddr");
 
   if (isProfile) {
     final hexKey = bech32ToHex(cleanedWord);
@@ -70,11 +122,13 @@ InlineSpan _buildProfileOrNoteSpan(String word) {
       return TextSpan(text: "@$cleanedWord");
     }
   }
-  if (isNote) {
+  if (isNote && showEmbeds) {
-    final eventId = bech32ToHex(cleanedWord);
+    return WidgetSpan(
-    return TextSpan(text: eventId, style: TextStyle(color: PRIMARY_1));
+      child: NoteEmbedWidget(link: cleanedWord),
+      alignment: PlaceholderAlignment.middle,
+    );
   } else {
-    return TextSpan(text: word);
+    return TextSpan(text: word, style: TextStyle(color: PRIMARY_1));
   }
 }
 
@@ -82,7 +136,29 @@ InlineSpan _buildHashtagSpan(String word) {
   return TextSpan(text: word, style: TextStyle(color: PRIMARY_1));
 }
 
-InlineSpan _buildUrlSpan(String url) {
+InlineSpan _buildUrlSpan(String url, bool embedMedia) {
+  if (embedMedia &&
+      (url.endsWith(".jpg") ||
+          url.endsWith(".gif") ||
+          url.endsWith(".jpeg") ||
+          url.endsWith(".webp") ||
+          url.endsWith(".png") ||
+          url.endsWith(".bmp"))) {
+    return WidgetSpan(child: ProxyImg(url: url));
+  }
+  if (embedMedia &&
+      (url.endsWith(".mp4") ||
+          url.endsWith(".mov") ||
+          url.endsWith(".webm") ||
+          url.endsWith(".mkv") ||
+          url.endsWith(".m3u8"))) {
+    return WidgetSpan(
+      child: AspectRatio(
+        aspectRatio: 16 / 9,
+        child: Center(child: VideoPlayerWidget(url: url, autoPlay: false)),
+      ),
+    );
+  }
   return TextSpan(
     text: url,
     style: TextStyle(color: PRIMARY_1),

lib/widgets/note_embed.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/nostr_text.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+
+class NoteEmbedWidget extends StatelessWidget {
+  final String link;
+
+  const NoteEmbedWidget({super.key, required this.link});
+
+  @override
+  Widget build(BuildContext context) {
+    final entity = decodeBech32ToTLVEntity(link);
+
+    return RxFilter<Nip01Event>(
+      Key("embeded-note:$link"),
+      filters: [entity.toFilter()],
+      builder: (context, data) {
+        final note = data != null && data.isNotEmpty ? data.first : null;
+        return PillWidget(
+          onTap: () {
+            if (note != null) {
+              // redirect to the stream if its a live stream link
+              if (note.kind == 30_311) {
+                context.push("/e/$link", extra: StreamEvent(note));
+                return;
+              }
+              showModalBottomSheet(
+                context: context,
+                builder: (context) {
+                  return SingleChildScrollView(child: _NotePreview(note: note));
+                },
+              );
+            }
+          },
+          color: LAYER_3,
+          child: RichText(
+            text: TextSpan(
+              children: [
+                WidgetSpan(child: Icon(Icons.link, size: 16)),
+                TextSpan(
+                  text: switch (entity.kind) {
+                    30_023 => " Article by ",
+                    30_311 => " Live Stream by ",
+                    _ => " Note by ",
+                  },
+                ),
+                if (note?.pubKey != null)
+                  WidgetSpan(
+                    alignment: PlaceholderAlignment.middle,
+                    child: ProfileNameWidget.pubkey(switch (note!.kind) {
+                      30_311 => StreamEvent(note).info.host,
+                      _ => note.pubKey,
+                    }, linkToProfile: false),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _NotePreview extends StatelessWidget {
+  final Nip01Event note;
+
+  const _NotePreview({required this.note});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(10),
+      decoration: BoxDecoration(color: LAYER_1, borderRadius: DEFAULT_BR),
+      child: Column(
+        spacing: 8,
+        children: [
+          ProfileWidget.pubkey(note.pubKey),
+          NoteText(event: note, embedMedia: true),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/pill.dart

@@ -3,12 +3,18 @@ import 'package:flutter/material.dart';
 class PillWidget extends StatelessWidget {
   final Widget child;
   final Color? color;
+  final void Function()? onTap;
 
-  const PillWidget({super.key, required this.child, required this.color});
+  const PillWidget({
+    super.key,
+    required this.child,
+    required this.color,
+    this.onTap,
+  });
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    final inner = Container(
       padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(8)),
@@ -16,5 +22,6 @@ class PillWidget extends StatelessWidget {
       ),
       child: child,
     );
+    return onTap != null ? GestureDetector(onTap: onTap, child: inner) : inner;
   }
 }

lib/widgets/profile.dart

@@ -14,6 +14,7 @@ class ProfileLoaderWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FutureBuilder(
+      key: super.key ?? Key("profile-loader:$pubkey"),
       future: ndk.metadata.loadMetadata(pubkey),
       builder: builder,
     );
@@ -23,21 +24,33 @@ class ProfileLoaderWidget extends StatelessWidget {
 class ProfileNameWidget extends StatelessWidget {
   final Metadata profile;
   final TextStyle? style;
+  final bool? linkToProfile;
 
-  const ProfileNameWidget({super.key, required this.profile, this.style});
+  const ProfileNameWidget({
+    super.key,
+    required this.profile,
+    this.style,
+    this.linkToProfile,
+  });
 
-  static Widget pubkey(String pubkey, {TextStyle? style}) {
+  static Widget pubkey(
-    return FutureBuilder(
+    String pubkey, {
-      future: ndk.metadata.loadMetadata(pubkey),
+    Key? key,
-      builder:
+    TextStyle? style,
-          (ctx, data) => ProfileNameWidget(
+    bool? linkToProfile,
-            profile: data.data ?? Metadata(pubKey: pubkey),
+  }) {
-            style: style,
+    return ProfileLoaderWidget(
-          ),
+      pubkey,
+      (ctx, data) => ProfileNameWidget(
+        profile: data.data ?? Metadata(pubKey: pubkey),
+        style: style,
+        linkToProfile: linkToProfile,
+      ),
+      key: key,
     );
   }
 
-  static nameFromProfile(Metadata profile) {
+  static String nameFromProfile(Metadata profile) {
     if ((profile.displayName?.length ?? 0) > 0) {
       return profile.displayName!;
     }
@@ -49,14 +62,22 @@ class ProfileNameWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
+    final inner = Text(
-      onTap:
+      ProfileNameWidget.nameFromProfile(profile),
-          () => context.push(
+      style: style,
-            "/p/${Nip19.encodePubKey(profile.pubKey)}",
-            extra: profile,
-          ),
-      child: Text(ProfileNameWidget.nameFromProfile(profile), style: style),
     );
+    if (linkToProfile ?? true) {
+      return GestureDetector(
+        onTap:
+            () => context.push(
+              "/p/${Nip19.encodePubKey(profile.pubKey)}",
+              extra: profile,
+            ),
+        child: inner,
+      );
+    } else {
+      return inner;
+    }
   }
 }
 
@@ -67,6 +88,7 @@ class ProfileWidget extends StatelessWidget {
   final List<Widget>? children;
   final bool? showName;
   final double? spacing;
+  final bool? linkToProfile;
 
   const ProfileWidget({
     super.key,
@@ -76,6 +98,7 @@ class ProfileWidget extends StatelessWidget {
     this.children,
     this.showName,
     this.spacing,
+    this.linkToProfile,
   });
 
   static Widget pubkey(
@@ -84,6 +107,8 @@ class ProfileWidget extends StatelessWidget {
     List<Widget>? children,
     bool? showName,
     double? spacing,
+    Key? key,
+    bool? linkToProfile,
   }) {
     return ProfileLoaderWidget(pubkey, (ctx, state) {
       return ProfileWidget(
@@ -91,6 +116,8 @@ class ProfileWidget extends StatelessWidget {
         size: size,
         showName: showName,
         spacing: spacing,
+        key: key,
+        linkToProfile: linkToProfile,
         children: children,
       );
     });
@@ -102,7 +129,12 @@ class ProfileWidget extends StatelessWidget {
       spacing: spacing ?? 8,
       children: [
         AvatarWidget(profile: profile, size: size),
-        if (showName ?? true) ProfileNameWidget(profile: profile),
+        if (showName ?? true)
+          ProfileNameWidget(
+            profile: profile,
+            key: key,
+            linkToProfile: linkToProfile,
+          ),
         ...(children ?? []),
       ],
     );

lib/widgets/profile_modal.dart

@@ -1,85 +0,0 @@
-import 'dart:developer' as developer;
-
-import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
-import 'package:flutter/foundation.dart' as foundation;
-import 'package:flutter/material.dart';
-import 'package:ndk/ndk.dart';
-import 'package:zap_stream_flutter/main.dart';
-import 'package:zap_stream_flutter/theme.dart';
-import 'package:zap_stream_flutter/widgets/button.dart';
-import 'package:zap_stream_flutter/widgets/mute_button.dart';
-import 'package:zap_stream_flutter/widgets/profile.dart';
-import 'package:zap_stream_flutter/widgets/zap.dart';
-
-class ProfileModalWidget extends StatelessWidget {
-  final Metadata profile;
-  final Nip01Event event;
-
-  const ProfileModalWidget({
-    super.key,
-    required this.profile,
-    required this.event,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.fromLTRB(5, 10, 5, 0),
-      child: Column(
-        spacing: 10,
-        children: [
-          ProfileWidget(profile: profile),
-          EmojiPicker(
-            onEmojiSelected: (category, emoji) {
-              developer.log(emoji.emoji);
-              ndk.broadcast.broadcastReaction(
-                eventId: event.id,
-                reaction: emoji.emoji,
-              );
-              Navigator.pop(context);
-            },
-            config: Config(
-              height: 256,
-              checkPlatformCompatibility: true,
-              emojiViewConfig: EmojiViewConfig(
-                emojiSizeMax:
-                    28 *
-                    (foundation.defaultTargetPlatform == TargetPlatform.iOS
-                        ? 1.20
-                        : 1.0),
-                backgroundColor: LAYER_1,
-              ),
-              viewOrderConfig: const ViewOrderConfig(
-                top: EmojiPickerItem.categoryBar,
-                middle: EmojiPickerItem.emojiView,
-                bottom: EmojiPickerItem.searchBar,
-              ),
-              bottomActionBarConfig: BottomActionBarConfig(
-                backgroundColor: LAYER_2,
-                buttonColor: PRIMARY_1,
-              ),
-              categoryViewConfig: CategoryViewConfig(backgroundColor: LAYER_2),
-              searchViewConfig: SearchViewConfig(
-                backgroundColor: LAYER_2,
-                buttonIconColor: PRIMARY_1,
-              ),
-            ),
-          ),
-          BasicButton.text(
-            "Zap",
-            onTap: () {
-              showModalBottomSheet(
-                context: context,
-                constraints: BoxConstraints.expand(),
-                builder: (ctx) {
-                  return ZapWidget(pubkey: event.pubKey, target: event);
-                },
-              );
-            },
-          ),
-          MuteButton(pubkey: event.pubKey),
-        ],
-      ),
-    );
-  }
-}

lib/widgets/reaction.dart

@@ -0,0 +1,52 @@
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/foundation.dart' as foundation;
+import 'package:flutter/widgets.dart';
+import 'package:ndk/entities.dart';
+import 'package:zap_stream_flutter/main.dart';
+import 'package:zap_stream_flutter/theme.dart';
+
+final emojiPickerConfig = Config(
+  height: 256,
+  checkPlatformCompatibility: true,
+  emojiViewConfig: EmojiViewConfig(
+    emojiSizeMax:
+        28 *
+        (foundation.defaultTargetPlatform == TargetPlatform.iOS ? 1.20 : 1.0),
+    backgroundColor: LAYER_1,
+  ),
+  viewOrderConfig: const ViewOrderConfig(
+    top: EmojiPickerItem.categoryBar,
+    middle: EmojiPickerItem.emojiView,
+    bottom: EmojiPickerItem.searchBar,
+  ),
+  bottomActionBarConfig: BottomActionBarConfig(
+    backgroundColor: LAYER_2,
+    buttonColor: PRIMARY_1,
+    showBackspaceButton: false,
+  ),
+  categoryViewConfig: CategoryViewConfig(backgroundColor: LAYER_2),
+  searchViewConfig: SearchViewConfig(
+    backgroundColor: LAYER_2,
+    buttonIconColor: PRIMARY_1,
+  ),
+);
+
+class ReactionWidget extends StatelessWidget {
+  final Nip01Event event;
+
+  const ReactionWidget({super.key, required this.event});
+
+  @override
+  Widget build(BuildContext context) {
+    return EmojiPicker(
+      onEmojiSelected: (category, emoji) {
+        ndk.broadcast.broadcastReaction(
+          eventId: event.id,
+          reaction: emoji.emoji,
+        );
+        Navigator.pop(context);
+      },
+      config: emojiPickerConfig,
+    );
+  }
+}

lib/widgets/stream_cards.dart

@@ -0,0 +1,96 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:ndk/ndk.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
+import 'package:zap_stream_flutter/rx_filter.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/nostr_text.dart';
+
+class StreamCardsWidget extends StatelessWidget {
+  final StreamEvent stream;
+
+  const StreamCardsWidget({super.key, required this.stream});
+
+  @override
+  Widget build(BuildContext context) {
+    return RxFilter<Nip01Event>(
+      Key("stream:cards:${stream.aTag}"),
+      filters: [
+        Filter(kinds: [17_777], authors: [stream.info.host], limit: 1),
+      ],
+      builder: (context, state) {
+        final cardList = state?.firstOrNull;
+        if (cardList == null) return SizedBox();
+
+        final cardIds = cardList.getTags("a");
+        return RxFilter<Nip01Event>(
+          Key("stream:cards:${stream.aTag}:cards"),
+          filters: [
+            Filter(
+              kinds: [37_777],
+              authors: [stream.info.host],
+              dTags: cardIds.map((i) => i.split(":").last).toList(),
+            ),
+          ],
+          builder: (context, state) {
+            final cards = state ?? [];
+
+            return Column(
+              spacing: 8,
+              children: cards.map((c) => _streamCard(context, c)).toList(),
+            );
+          },
+        );
+      },
+    );
+  }
+
+  Widget _streamCard(BuildContext context, Nip01Event card) {
+    final title = card.getFirstTag("title") ?? card.getFirstTag("subject");
+    final image = card.getFirstTag("image");
+    final link = card.getFirstTag("r");
+
+    return Container(
+      padding: EdgeInsets.all(8),
+      width: double.maxFinite,
+      decoration: BoxDecoration(color: LAYER_2, borderRadius: DEFAULT_BR),
+      child: Column(
+        spacing: 8,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (title?.isNotEmpty ?? false)
+            Center(
+              child: Text(
+                title!,
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+              ),
+            ),
+          if (image?.isNotEmpty ?? false)
+            Center(
+              child:
+                  link != null
+                      ? GestureDetector(
+                        onTap: () {
+                          launchUrl(Uri.parse(link));
+                        },
+                        child: ProxyImg(url: link, placeholderSize: 40),
+                      )
+                      : ProxyImg(url: link, placeholderSize: 40),
+            ),
+          MarkdownBody(
+            data: card.content,
+            onTapLink: (text, href, title) {
+              if (href != null) {
+                launchUrl(Uri.parse(href));
+              }
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/stream_grid.dart

@@ -1,6 +1,7 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/widgets.dart';
 import 'package:ndk/ndk.dart';
+import 'package:zap_stream_flutter/main.dart';
 import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
 import 'package:zap_stream_flutter/widgets/stream_tile.dart';
@@ -21,45 +22,92 @@ class StreamGrid extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final streams = events
+    final streams =
-        .map((e) => StreamEvent(e))
+        events
-        .sortedBy((a) => a.info.starts ?? a.event.createdAt)
+            .map((e) => StreamEvent(e))
-        .reversed;
+            .where((e) => e.info.stream?.contains(".m3u8") ?? false)
+            .where(
+              (e) =>
+                  (e.info.starts ?? e.event.createdAt) <=
+                  (DateTime.now().millisecondsSinceEpoch / 1000),
+            )
+            .sortedBy((a) => a.info.starts ?? a.event.createdAt)
+            .reversed;
     final live = streams.where((s) => s.info.status == StreamStatus.live);
     final ended = streams.where((s) => s.info.status == StreamStatus.ended);
     final planned = streams.where((s) => s.info.status == StreamStatus.planned);
-    return Column(
+
+    final followList =
+        ndk.accounts.isLoggedIn
+            ? ndk.follows.getContactList(ndk.accounts.getPublicKey()!)
+            : Future.value(null);
+    return FutureBuilder(
+      future: followList,
+      builder: (context, state) {
+        final follows = state.data?.contacts ?? [];
+        final followsLive = live.where((e) => follows.contains(e.info.host));
+        final liveNotFollowing = live.where(
+          (e) => !follows.contains(e.info.host),
+        );
+
+        return Column(
+          spacing: 16,
+          children: [
+            if (followsLive.isNotEmpty)
+              _streamGroup(context, "Following", followsLive.toList()),
+            if (showLive && liveNotFollowing.isNotEmpty)
+              _streamGroup(context, "Live", liveNotFollowing.toList()),
+            if (showPlanned && planned.isNotEmpty)
+              _streamGroup(context, "Planned", planned.toList()),
+            if (showEnded && ended.isNotEmpty)
+              _streamGroup(context, "Ended", ended.toList()),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _streamTitle(String title) {
+    return Row(
       spacing: 16,
       children: [
-        if (showLive && live.isNotEmpty) _streamGroup("Live", live),
+        Text(
-        if (showPlanned && planned.isNotEmpty) _streamGroup("Planned", planned),
+          title,
-        if (showEnded && ended.isNotEmpty) _streamGroup("Ended", ended),
+          style: TextStyle(fontSize: 21, fontWeight: FontWeight.w500),
+        ),
+        Expanded(
+          child: Container(
+            height: 1,
+            decoration: BoxDecoration(
+              border: Border(bottom: BorderSide(color: LAYER_2)),
+            ),
+          ),
+        ),
       ],
     );
   }
 
-  Widget _streamGroup(String title, Iterable<StreamEvent> events) {
+  Widget _streamGroup(
+    BuildContext context,
+    String title,
+    List<StreamEvent> events,
+  ) {
     return Column(
       spacing: 16,
       children: [
-        Row(
+        _streamTitle(title),
-          spacing: 16,
+        ListView.builder(
-          children: [
+          itemCount: events.length,
-            Text(
+          primary: false,
-              title,
+          shrinkWrap: true,
-              style: TextStyle(fontSize: 21, fontWeight: FontWeight.w500),
+          itemBuilder: (ctx, idx) {
-            ),
+            final stream = events[idx];
-            Expanded(
+            return Padding(
-              child: Container(
+              padding: EdgeInsets.symmetric(vertical: 8),
-                height: 1,
+              child: StreamTileWidget(stream),
-                decoration: BoxDecoration(
+            );
-                  border: Border(bottom: BorderSide(color: LAYER_2)),
+          },
-                ),
-              ),
-            ),
-          ],
         ),
-        ...events.map((e) => StreamTileWidget(e)),
       ],
     );
   }

lib/widgets/stream_info.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+import 'package:zap_stream_flutter/theme.dart';
+import 'package:zap_stream_flutter/utils.dart';
+import 'package:zap_stream_flutter/widgets/button_follow.dart';
+import 'package:zap_stream_flutter/widgets/game_info.dart';
+import 'package:zap_stream_flutter/widgets/live_timer.dart';
+import 'package:zap_stream_flutter/widgets/nostr_text.dart';
+import 'package:zap_stream_flutter/widgets/pill.dart';
+import 'package:zap_stream_flutter/widgets/profile.dart';
+import 'package:zap_stream_flutter/widgets/stream_cards.dart';
+
+class StreamInfoWidget extends StatelessWidget {
+  final StreamEvent stream;
+
+  const StreamInfoWidget({super.key, required this.stream});
+
+  @override
+  Widget build(BuildContext context) {
+    final startedDate =
+        stream.info.starts != null
+            ? DateTime.fromMillisecondsSinceEpoch(stream.info.starts! * 1000)
+            : null;
+    return Padding(
+      padding: EdgeInsets.all(10),
+      child: Column(
+        spacing: 8,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ProfileWidget.pubkey(stream.info.host, linkToProfile: false),
+          FollowButton(
+            pubkey: stream.info.host,
+            onTap: () {
+              Navigator.pop(context);
+            },
+          ),
+          Text(
+            stream.info.title ?? "",
+            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+          ),
+          if (startedDate != null)
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: LAYER_5, fontSize: 14),
+                    children: [
+                      TextSpan(text: "Started "),
+                      TextSpan(text: DateFormat().format(startedDate)),
+                    ],
+                  ),
+                ),
+                LiveTimerWidget(started: startedDate),
+              ],
+            ),
+          if (stream.info.summary?.isNotEmpty ?? false)
+            Text.rich(
+              TextSpan(
+                children: textToSpans(
+                  stream.info.summary!,
+                  [],
+                  stream.info.host,
+                ),
+              ),
+            ),
+
+          if (stream.info.tags.isNotEmpty || stream.info.gameInfo != null)
+            Row(
+              spacing: 2,
+              children: [
+                if (stream.info.gameInfo != null)
+                  GameInfoWidget(info: stream.info.gameInfo!),
+                ...stream.info.tags.map(
+                  (t) => PillWidget(
+                    color: LAYER_2,
+                    onTap: () {
+                      context.push("/t/${Uri.encodeComponent(t)}");
+                    },
+                    child: Text(
+                      t,
+                      style: TextStyle(fontWeight: FontWeight.bold),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          StreamCardsWidget(stream: stream),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/stream_tile.dart

@@ -2,7 +2,6 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:go_router/go_router.dart';
-import 'package:ndk/shared/nips/nip19/nip19.dart';
 import 'package:zap_stream_flutter/imgproxy.dart';
 import 'package:zap_stream_flutter/theme.dart';
 import 'package:zap_stream_flutter/utils.dart';
@@ -19,10 +18,7 @@ class StreamTileWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: () {
-        context.push(
+        context.push("/e/${stream.link}", extra: stream);
-          "/e/${Nip19.encodeNoteId(stream.event.id)}",
-          extra: stream,
-        );
       },
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -35,22 +31,7 @@ class StreamTileWidget extends StatelessWidget {
               aspectRatio: 16 / 9,
               child: Stack(
                 children: [
-                  Center(
+                  Center(child: ProxyImg(url: stream.info.image ?? "", placeholderSize: 100,)),
-                    child: CachedNetworkImage(
-                      imageUrl: proxyImg(context, stream.info.image ?? ""),
-                      fit: BoxFit.cover,
-                      placeholder:
-                          (ctx, url) => SvgPicture.asset(
-                            "assets/svg/logo.svg",
-                            height: 100,
-                          ),
-                      errorWidget:
-                          (context, url, error) => SvgPicture.asset(
-                            "assets/svg/logo.svg",
-                            height: 100,
-                          ),
-                    ),
-                  ),
                   if (stream.info.status != null)
                     Positioned(
                       right: 8,

lib/widgets/video_player.dart

@@ -0,0 +1,60 @@
+import 'package:chewie/chewie.dart';
+import 'package:flutter/widgets.dart';
+import 'package:video_player/video_player.dart';
+import 'package:zap_stream_flutter/imgproxy.dart';
+import 'package:zap_stream_flutter/main.dart';
+
+class VideoPlayerWidget extends StatefulWidget {
+  final String url;
+  final String? placeholder;
+  final double? aspectRatio;
+  final bool? autoPlay;
+
+  const VideoPlayerWidget({
+    super.key,
+    required this.url,
+    this.placeholder,
+    this.aspectRatio,
+    this.autoPlay,
+  });
+
+  @override
+  State<StatefulWidget> createState() => _VideoPlayerWidget();
+}
+
+class _VideoPlayerWidget extends State<VideoPlayerWidget> {
+  late final VideoPlayerController _controller;
+  late final ChewieController _chewieController;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = VideoPlayerController.networkUrl(
+      Uri.parse(widget.url),
+      httpHeaders: Map.from({"user-agent": userAgent}),
+    );
+    _chewieController = ChewieController(
+      videoPlayerController: _controller,
+      autoPlay: widget.autoPlay ?? true,
+      aspectRatio: widget.aspectRatio,
+      autoInitialize: true,
+      placeholder:
+          (widget.placeholder?.isNotEmpty ?? false)
+              ? ProxyImg(url: widget.placeholder!)
+              : null,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _chewieController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Chewie(controller: _chewieController);
+  }
+}

lib/widgets/zap.dart

@@ -1,5 +1,7 @@
 import 'package:clipboard/clipboard.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:ndk/domain_layer/usecases/lnurl/lnurl.dart';
 import 'package:ndk/ndk.dart';
 import 'package:qr_flutter/qr_flutter.dart';
@@ -13,8 +15,16 @@ import 'package:zap_stream_flutter/widgets/profile.dart';
 class ZapWidget extends StatefulWidget {
   final String pubkey;
   final Nip01Event? target;
+  final List<Nip01Event>? otherTargets;
+  final List<List<String>>? zapTags;
 
-  const ZapWidget({super.key, required this.pubkey, this.target});
+  const ZapWidget({
+    super.key,
+    required this.pubkey,
+    this.target,
+    this.zapTags,
+    this.otherTargets,
+  });
 
   @override
   State<StatefulWidget> createState() => _ZapWidget();
@@ -22,6 +32,9 @@ class ZapWidget extends StatefulWidget {
 
 class _ZapWidget extends State<ZapWidget> {
   final TextEditingController _comment = TextEditingController();
+  final TextEditingController _customAmount = TextEditingController();
+  final FocusNode _customAmountFocus = FocusNode();
+  bool _loading = false;
   String? _error;
   String? _pr;
   int? _amount;
@@ -58,8 +71,9 @@ class _ZapWidget extends State<ZapWidget> {
               ),
             ],
           ),
-          if (_pr == null) ..._inputs(),
+          if (_pr == null && !_loading) ..._inputs(),
           if (_pr != null) ..._invoice(),
+          if (_loading) CircularProgressIndicator(),
         ],
       ),
     );
@@ -74,31 +88,78 @@ class _ZapWidget extends State<ZapWidget> {
           crossAxisCount: 5,
           mainAxisSpacing: 5,
           crossAxisSpacing: 5,
-          childAspectRatio: 1.5,
+          childAspectRatio: 1.9,
         ),
         itemBuilder: (ctx, idx) => _zapAmount(_zapAmounts[idx]),
       ),
+      Row(
+        spacing: 8,
+        children: [
+          Expanded(
+            child: TextFormField(
+              controller: _customAmount,
+              focusNode: _customAmountFocus,
+              keyboardType: TextInputType.number,
+              decoration: InputDecoration(labelText: "Custom Amount"),
+            ),
+          ),
+          BasicButton.text(
+            "Confirm",
+            onTap: () {
+              final newAmount = int.tryParse(_customAmount.text);
+              if (newAmount != null) {
+                setState(() {
+                  _error = null;
+                  _amount = newAmount;
+                  _customAmountFocus.unfocus();
+                });
+              } else {
+                setState(() {
+                  _error = "Invalid custom amount";
+                  _amount = null;
+                });
+              }
+            },
+          ),
+        ],
+      ),
       TextFormField(
         controller: _comment,
         decoration: InputDecoration(labelText: "Comment"),
       ),
       BasicButton.text(
-        "Zap",
+        _amount != null ? "Zap ${formatSats(_amount!)} sats" : "Zap",
-        onTap: () {
+        disabled: _amount == null,
+        decoration: BoxDecoration(color: LAYER_3, borderRadius: DEFAULT_BR),
+        onTap: () async {
           try {
-            _loadZap();
+            setState(() {
+              _error = null;
+              _loading = true;
+            });
+            await _loadZap();
           } catch (e) {
             setState(() {
               _error = e.toString();
             });
+          } finally {
+            setState(() {
+              _loading = false;
+            });
           }
         },
       ),
-      if (_error != null) Text(_error!),
+      if (_error != null)
+        Text(
+          _error!,
+          style: TextStyle(color: WARNING, fontWeight: FontWeight.bold),
+        ),
     ];
   }
 
   List<Widget> _invoice() {
+    final prLink = "lightning:${_pr!}";
+
     return [
       QrImageView(
         data: _pr!,
@@ -114,47 +175,100 @@ class _ZapWidget extends State<ZapWidget> {
         onTap: () async {
           await FlutterClipboard.copy(_pr!);
         },
-        child: Text(_pr!, overflow: TextOverflow.ellipsis),
+        child: Container(
+          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+          decoration: BoxDecoration(borderRadius: DEFAULT_BR, color: LAYER_2),
+          child: Row(
+            spacing: 4,
+            children: [
+              Icon(Icons.copy, size: 16),
+              Expanded(child: Text(_pr!, overflow: TextOverflow.ellipsis)),
+            ],
+          ),
+        ),
       ),
-      BasicButton.text(
+      FutureBuilder(
-        "Open in Wallet",
+        future: canLaunchUrlString(prLink),
-        onTap: () async {
+        builder: (context, v) {
-          try {
+          if (!(v.data ?? false)) return SizedBox();
-            await launchUrlString("lightning:${_pr!}");
+          return BasicButton.text(
-          } catch (e) {
+            "Open in Wallet",
-            setState(() {
+            onTap: () async {
-              _error = e is String ? e : e.toString();
+              try {
-            });
+                await launchUrlString(prLink);
-          }
+              } catch (e) {
+                if (e is PlatformException) {
+                  if (e.code == "ACTIVITY_NOT_FOUND") {
+                    setState(() {
+                      _error = "No lightning wallet installed";
+                    });
+                    return;
+                  }
+                }
+                setState(() {
+                  _error = e is String ? e : e.toString();
+                });
+              }
+            },
+          );
         },
       ),
-      if (_error != null) Text(_error!),
+
+      if (_error != null)
+        Text(
+          _error!,
+          style: TextStyle(color: WARNING, fontWeight: FontWeight.bold),
+        ),
     ];
   }
 
+  Future<ZapRequest?> _makeZap() async {
+    final signer = ndk.accounts.getLoggedAccount()?.signer;
+    if (signer == null) return null;
+
+    var relays = defaultRelays;
+    // if target event has relays tag, use that for zap
+    if (widget.target?.tags.any((t) => t[0] == "relays") ?? false) {
+      relays = widget.target!.tags.firstWhere((t) => t[0] == "relays").slice(1);
+    }
+    final amount = _amount! * 1000;
+
+    var tags = [
+      ["relays", ...relays],
+      ["amount", amount.toString()],
+      ["p", widget.pubkey],
+    ];
+
+    // tag targets for zap request
+    for (final t in [
+      ...(widget.target != null ? [widget.target!] : []),
+      ...(widget.otherTargets != null ? widget.otherTargets! : []),
+    ]) {
+      if (t.kind >= 30_000 && t.kind < 40_000) {
+        tags.add(["a", "${t.kind}:${t.pubKey}:${t.getDtag()!}"]);
+      } else {
+        tags.add(["e", t.id]);
+      }
+    }
+    if (widget.zapTags != null) {
+      tags.addAll(widget.zapTags!);
+    }
+    var event = ZapRequest(
+      pubKey: signer.getPublicKey(),
+      tags: tags,
+      content: _comment.text,
+    );
+    await signer.sign(event);
+    return event;
+  }
+
   Future<void> _loadZap() async {
     final profile = await ndk.metadata.loadMetadata(widget.pubkey);
     if (profile?.lud16 == null) {
       throw "No lightning address found";
     }
-    final signer = ndk.accounts.getLoggedAccount()?.signer;
-
-    final zapRequest =
-        signer != null
-            ? await ndk.zaps.createZapRequest(
-              amountSats: _amount!,
-              signer: signer,
-              pubKey: widget.pubkey,
-              eventId: widget.target?.id,
-              addressableId:
-                  widget.target != null && widget.target!.kind >= 30_000 && widget.target!.kind < 40_000
-                      ? "${widget.target!.kind}:${widget.target!.pubKey}:${widget.target!.getDtag()!}"
-                      : null,
-              relays: defaultRelays,
-              comment: _comment.text.isNotEmpty ? _comment.text : null,
-            )
-            : null;
 
+    final zapRequest = await _makeZap();
     final invoice = await ndk.zaps.fetchInvoice(
       lud16Link: Lnurl.getLud16LinkFromLud16(profile!.lud16!)!,
       amountSats: _amount!,
@@ -170,11 +284,14 @@ class _ZapWidget extends State<ZapWidget> {
     return GestureDetector(
       onTap:
           () => setState(() {
+            _error = null;
+            _customAmount.clear();
+            _customAmountFocus.unfocus();
             _amount = n;
           }),
       child: Container(
         decoration: BoxDecoration(
-          color: n == _amount ? LAYER_2 : LAYER_1,
+          color: n == _amount ? LAYER_4 : LAYER_3,
           borderRadius: DEFAULT_BR,
         ),
         alignment: AlignmentDirectional.center,

pubspec.lock

@@ -294,6 +294,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.0.0"
+  flutter_markdown_plus:
+    dependency: "direct main"
+    description:
+      name: flutter_markdown_plus
+      sha256: fe74214c5ac2f850d93efda290dcde3f18006e90a87caa9e3e6c13222a5db4de
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.3"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
@@ -480,6 +488,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.2.1+1"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      sha256: "3df61194eb431efc39c4ceba583b95633a403f46c9fd341e550ce0bfa50e9aa5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.20.2"
   js:
     dependency: transitive
     description:
@@ -536,6 +552,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  markdown:
+    dependency: transitive
+    description:
+      name: markdown
+      sha256: "935e23e1ff3bc02d390bad4d4be001208ee92cc217cb5b5a6c19bc14aaa318c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.3.0"
   matcher:
     dependency: transitive
     description:
@@ -572,26 +596,28 @@ packages:
     dependency: "direct main"
     description:
       path: "packages/ndk"
-      ref: bbf2aa9c2468b2301de65734199649d56bb0fd74
+      ref: "919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a"
-      resolved-ref: bbf2aa9c2468b2301de65734199649d56bb0fd74
+      resolved-ref: "919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a"
       url: "https://github.com/relaystr/ndk"
     source: git
     version: "0.3.2"
   ndk_amber:
     dependency: "direct main"
     description:
-      name: ndk_amber
+      path: "packages/amber"
-      sha256: "6f525e2bcdea08ecdd1815e2fdfc6e53c4bb86335927d8c333c1f4513dc1c099"
+      ref: "919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a"
-      url: "https://pub.dev"
+      resolved-ref: "919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a"
-    source: hosted
+      url: "https://github.com/relaystr/ndk"
+    source: git
     version: "0.3.0"
   ndk_objectbox:
     dependency: "direct main"
     description:
-      name: ndk_objectbox
+      path: "packages/objectbox"
-      sha256: f2bd04299ed34b99a01957c46eb6ff495c0bdcde068d382cbb8b8a222f67e132
+      ref: "919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a"
-      url: "https://pub.dev"
+      resolved-ref: "919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a"
-    source: hosted
+      url: "https://github.com/relaystr/ndk"
+    source: git
     version: "0.2.3"
   ndk_rust_verifier:
     dependency: "direct main"
@@ -1190,6 +1216,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.5.0"
+  xxh3:
+    dependency: transitive
+    description:
+      name: xxh3
+      sha256: "399a0438f5d426785723c99da6b16e136f4953fb1e9db0bf270bd41dd4619916"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
 sdks:
   dart: ">=3.7.2 <4.0.0"
-  flutter: ">=3.27.0"
+  flutter: ">=3.27.1"

pubspec.yaml

@@ -1,7 +1,7 @@
 name: zap_stream_flutter
 description: "zap.stream"
 publish_to: 'none'
-version: 0.2.2+4
+version: 0.6.0+8
 
 environment:
   sdk: ^3.7.2
@@ -31,13 +31,25 @@ dependencies:
   image_picker: ^1.1.2
   emoji_picker_flutter: ^4.3.0
   bech32: ^0.2.2
+  intl: ^0.20.2
+  flutter_markdown_plus: ^1.0.3
 
 dependency_overrides:
   ndk:
     git:
       url: https://github.com/relaystr/ndk
       path: packages/ndk
-      ref: bbf2aa9c2468b2301de65734199649d56bb0fd74
+      ref: 919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a
+  ndk_objectbox:
+    git:
+      url: https://github.com/relaystr/ndk
+      path: packages/objectbox
+      ref: 919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a
+  ndk_amber:
+    git:
+      url: https://github.com/relaystr/ndk
+      path: packages/amber
+      ref: 919f35866f4b9d84565f7f08ebbbcd5fd0ef0b6a
 
 dev_dependencies:
   flutter_test:
@@ -48,4 +60,5 @@ flutter:
   uses-material-design: true
   assets:
     - "assets/svg/"
-    - "assets/logo.png"
+    - "assets/logo.png"
+    - "assets/category/"