design: Use IconButton instead of listTile for first story

lib/pages/chat_list/chat_list_view.dart

@@ -14,6 +14,7 @@ import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
 import 'package:fluffychat/pages/chat_list/client_chooser_button.dart';
 import 'package:fluffychat/pages/chat_list/spaces_bottom_bar.dart';
 import 'package:fluffychat/pages/chat_list/stories_header.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions.dart/client_stories_extension.dart';
 import 'package:fluffychat/widgets/connection_status_header.dart';
 import '../../utils/stream_extension.dart';
 import '../../widgets/matrix.dart';
@@ -99,6 +100,14 @@ class ChatListView extends StatelessWidget {
                               onPressed: () =>
                                   VRouter.of(context).to('/search'),
                             ),
+                            if (selectMode == SelectMode.normal &&
+                                Matrix.of(context).client.storiesRooms.isEmpty)
+                              IconButton(
+                                icon: const Icon(Icons.camera_alt_outlined),
+                                tooltip: L10n.of(context)!.addToStory,
+                                onPressed: () =>
+                                    VRouter.of(context).to('/stories/create'),
+                              ),
                             PopupMenuButton<PopupMenuAction>(
                               onSelected: controller.onPopupMenuSelect,
                               itemBuilder: (_) => [

lib/pages/chat_list/stories_header.dart

@@ -87,61 +87,63 @@ class StoriesHeader extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final client = Matrix.of(context).client;
-    return StreamBuilder<Object>(
-        stream: client.onSync.stream
-            .where((syncUpdate) => syncUpdate.hasRoomUpdate),
-        builder: (context, snapshot) {
-          if (client.storiesRooms.isEmpty && client.contacts.isEmpty) {
-            return Container();
-          }
-          if (client.storiesRooms.isEmpty ||
-              Matrix.of(context).shareContent != null) {
-            return ListTile(
-              leading: CircleAvatar(
-                radius: Avatar.defaultSize / 2,
-                backgroundColor: Theme.of(context).colorScheme.surface,
-                foregroundColor: Theme.of(context).textTheme.bodyText1?.color,
-                child: const Icon(Icons.add),
-              ),
-              title: Text(L10n.of(context)!.addToStory),
-              onTap: () => _addToStoryAction(context),
-            );
-          }
-          return SizedBox(
-            height: 98,
-            child: ListView(
-              padding: const EdgeInsets.symmetric(horizontal: 2),
-              scrollDirection: Axis.horizontal,
-              children: [
-                _StoryButton(
-                  label: L10n.of(context)!.yourStory,
-                  onPressed: () => _addToStoryAction(context),
+    return StreamBuilder(
+      stream: Matrix.of(context).onShareContentChanged.stream,
+      builder: (context, _) => StreamBuilder<Object>(
+          stream: client.onSync.stream
+              .where((syncUpdate) => syncUpdate.hasRoomUpdate),
+          builder: (context, snapshot) {
+            if (Matrix.of(context).shareContent != null) {
+              return ListTile(
+                leading: CircleAvatar(
+                  radius: Avatar.defaultSize / 2,
+                  backgroundColor: Theme.of(context).colorScheme.surface,
+                  foregroundColor: Theme.of(context).textTheme.bodyText1?.color,
                   child: const Icon(Icons.add),
                 ),
-                ...client.storiesRooms.map(
-                  (room) => Opacity(
-                    opacity: room.hasPosts ? 1 : 0.5,
-                    child: _StoryButton(
-                      label: room.creatorDisplayname,
-                      child: Avatar(
-                        mxContent: room
-                            .getState(EventTypes.RoomCreate)!
-                            .sender
-                            .avatarUrl,
-                        name: room.creatorDisplayname,
-                        size: 100,
+                title: Text(L10n.of(context)!.addToStory),
+                onTap: () => _addToStoryAction(context),
+              );
+            }
+            if (client.storiesRooms.isEmpty) {
+              return Container();
+            }
+            return SizedBox(
+              height: 98,
+              child: ListView(
+                padding: const EdgeInsets.symmetric(horizontal: 2),
+                scrollDirection: Axis.horizontal,
+                children: [
+                  _StoryButton(
+                    label: L10n.of(context)!.yourStory,
+                    onPressed: () => _addToStoryAction(context),
+                    child: const Icon(Icons.add),
+                  ),
+                  ...client.storiesRooms.map(
+                    (room) => Opacity(
+                      opacity: room.hasPosts ? 1 : 0.5,
+                      child: _StoryButton(
+                        label: room.creatorDisplayname,
+                        child: Avatar(
+                          mxContent: room
+                              .getState(EventTypes.RoomCreate)!
+                              .sender
+                              .avatarUrl,
+                          name: room.creatorDisplayname,
+                          size: 100,
+                        ),
+                        unread: room.notificationCount > 0 ||
+                            room.membership == Membership.invite,
+                        onPressed: () => _goToStoryAction(context, room.id),
+                        onLongPressed: () => _contextualActions(context, room),
                       ),
-                      unread: room.notificationCount > 0 ||
-                          room.membership == Membership.invite,
-                      onPressed: () => _goToStoryAction(context, room.id),
-                      onLongPressed: () => _contextualActions(context, room),
                     ),
                   ),
-                ),
-              ],
-            ),
-          );
-        });
+                ],
+              ),
+            );
+          }),
+    );
   }
 }