zulip / zulip-flutter

Upcoming Zulip mobile apps for Android and iOS, using Flutter
Apache License 2.0
196 stars 189 forks source link

"Whole channel" button from topic narrows #1040

Open gnprice opened 2 weeks ago

gnprice commented 2 weeks ago

When viewing the message list for a topic narrow, we should have a quick way to get to the enclosing stream/channel narrow.

In the legacy zulip-mobile app, this is just a button in the app bar, with an "up" icon. In a future with a fancier app bar for these message lists (as in #1039), we may do something fancier; but for now, let's just follow the legacy app and have a button.

One update from the legacy app, though: instead of an "up" icon, let's use the "all messages" / "combined feed" icon. That's the same one that web now uses in the channel menu in the left sidebar, for the new "Go to channel feed" option.

I'm giving this the near-term "Beta 4" milestone, because when I was demoing Zulip in person a lot earlier this week, I repeatedly found the lack of it awkward. (Specifically the use case was that I was viewing one conversation and wanted to start a new one. There are other ways we could serve that use case; but any deeper re-imagining of that UX is a post-launch issue.)

Dhanesh-Sawant commented 1 week ago

Hi @gnprice @chrisbobbe

I've implemented the "Whole channel" button within the MessageListAppBarTitle for the TopicNarrow. Here's a brief overview of the approach I've taken:

In the TopicNarrow case of the MessageListAppBarTitle component, I'm currently returning a Row that includes: The _buildStreamRow method to display the stream and topic names.

An IconButton (currently with an "up" arrow icon) to navigate to the enclosing channel view. The IconButton triggers Navigator.pushReplacement to navigate to the MessageListPage with a ChannelNarrow for the given streamId. This way, it directly takes the user back to the channel view without adding a new route to the navigation stack.

      case TopicNarrow(:var streamId, :var topic):
        final store = PerAccountStoreWidget.of(context);
        final stream = store.streams[streamId];
        final streamName = stream?.name ?? '(unknown channel)';
        return Row(
          children: [
            Expanded(
              child: _buildStreamRow(
                context,
                stream: stream,
                text: "$streamName > $topic",
              ),
            ),
            IconButton(
              icon: Icon(Icons.arrow_upward),
              tooltip: 'Go to channel feed',
              onPressed: () => Navigator.pushReplacement(
                context,
                MessageListPage.buildRoute(
                  context: context,
                  narrow: ChannelNarrow(streamId),
                ),
              ),
            ),
          ],
        );

output:- https://github.com/user-attachments/assets/83ac306b-62bd-454e-b66f-4e2a4e2db57b

Could you confirm if this approach aligns with the design intent for navigating to the enclosing stream/channel narrow?

Dhanesh-Sawant commented 1 week ago

@gnprice @chrisbobbe can u please go through the above approach?

PIG208 commented 1 week ago

@Dhanesh-Sawant If you want to share more details of what you're doing, please start a PR thread or a chat thread in #mobile-dev-help. Let's keep this issue thread clear so it's readable for discussion of the issue itself.