Set user status #1701

sm-sayedi · 2025-07-10T01:13:11Z

Support for setting the user status.

Rebased on top of #1702, starting from: fd7320f button: Add ZulipMenuItemButton.subLabel

Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5000-52611&t=ZkYDTwsnzsgZJRYr-0

TODOs:

Tests

Profile Page

No status set	Full status set

Only emoji set	Only text set

Set Status Page

No status set - Light	No status set - Dark

Full status set - Light	Full status set - Dark

Screen recordings

Set status - Success

Set.status.-.Success.mov

Set status - Failure

Set.status.-.Error.mov

Fixes: #198

gnprice · 2025-07-10T01:15:45Z

Great!

Let's make this two PRs: one for the remaining portion of #1629 (i.e. same commits as #1699), and one for setting status. That will help keep the reviews more organized and will help us merge the first part earlier.

sm-sayedi · 2025-07-10T01:20:38Z

Sure, on it.

alya · 2025-07-10T06:49:38Z

assets/l10n/app_en.arb

+  "@setStatus": {
+    "description": "The status button label in self-user profile page when status is not set."
+  },
+  "noStatusText": "Not status text",


Suggested change

"noStatusText": "Not status text",

"noStatusText": "No status text",

alya · 2025-07-10T06:52:50Z

The screenshots look good to me, other than the small note above!

gnprice

Thanks for building this! Comments below; and I see your PR description has a TODO for tests, which I believe is the only reason this is currently marked as a draft.

I've read through the first 5 commits:
a604e22 button: Add ZulipMenuItemButton.subLabel
e3b091a profile: Add button for setting/showing user status in self-user profile
a90f83e model [nfc]: Add UserStatusChange.copyWith method
0104cd1 content: Add emoji property to UserStatusEmoji widget
649232a emoji: Make emoji picker return the selected emoji, for reuse

and part of the 6th:
1ca2ceb user-status: Add page for setting own user status

gnprice · 2025-07-16T22:22:16Z

lib/widgets/button.dart

+          children: [
+            Text(label,
+              style: const TextStyle(fontSize: 20, height: 24 / 20)
+                .merge(weightVariableTextStyle(context, wght: _labelWght()))),
+            if (subLabel != null)
+              Text.rich(subLabel!,


What happens when there isn't room for both of these? (Always a question with a Row.)

Thanks for catching. They would overflow. Fixed in the new revision, with both of them taking half the space and ellipsized.

gnprice · 2025-07-16T22:26:44Z

lib/widgets/profile.dart

+class _SetStatusButton extends StatelessWidget {
+  const _SetStatusButton({required this.userId});
+
+  final int userId;


This is always the self-user ID, right? (Otherwise, it wouldn't make sense to set status.)

Seems clearest to not take it as a parameter, then; this widget's build method can look it up for itself.

gnprice · 2025-07-16T22:31:02Z

assets/l10n/app_en.arb

@@ -809,6 +809,62 @@
  "@userRoleUnknown": {
    "description": "Label for UserRole.unknown"
  },
+  "status": "Status",


This key is too general — there could easily be several places where we use the same string "Status" in English, and then the right translations might not be the same in some languages.

Instead, can say:

Suggested change

"status": "Status",

"statusButton": "Status",

gnprice · 2025-07-16T22:33:17Z

assets/l10n/app_en.arb

+  "setStatus": "Set status",
+  "@setStatus": {
+    "description": "The status button label in self-user profile page when status is not set. Also, title for the page where user status is set."


This "also" is a good sign that this should be two separate strings 🙂 even though they happen to have the same value in English.

For the first… perhaps statusButtonAction.

For the second, setStatusPageTitle. (See examples of other "…PageTitle" strings.)

gnprice · 2025-07-16T22:36:47Z

assets/l10n/app_en.arb

+  "userStatusBusy": "Busy",
+  "@userStatusBusy": {
+    "description": "Label for one of the suggested user statuses with status text 'Busy', in setting user status page."


This isn't so much a label as a suggested actual value for the status. (If the user chooses it, it'll set their status text to the value of this string, right? Not to the English "Busy".)

So:

Suggested change

"userStatusBusy": "Busy",

"@userStatusBusy": {

"description": "Label for one of the suggested user statuses with status text 'Busy', in setting user status page."

"userStatusBusy": "Busy",

"@userStatusBusy": {

"description": "A suggested user status text, 'Busy'."

gnprice · 2025-07-16T23:10:22Z

lib/widgets/set_status.dart

+class _SetStatusPageState extends State<SetStatusPage> {
+  List<UserStatus> _statusSuggestions(ZulipLocalizations localizations) => [


nit: put this method down below the state fields and the lifecycle methods; it's basically part of the work of the build method, so put it next to that

gnprice · 2025-07-16T23:14:56Z

lib/widgets/set_status.dart

+          padding: const EdgeInsets.only(
+            // In Figma design, this is 16px, but we compensate for that in
+            // the icon button below.
+            left: 8,
+            top: 8, right: 10,


left/right should be start/end (so it works correctly in RTL locales)

gnprice · 2025-07-16T23:20:21Z

lib/widgets/set_status.dart

+                        : icon!;
+                    },
+                    child: Icon(ZulipIcons.smile, size: 24)),


This icon doesn't really play the role of "child", since it commonly won't even appear at all.

The small optimization that comes from using ValueListenableBuilder.child here can be matched (and exceeded) by using const:

Suggested change

: icon!;

},

child: Icon(ZulipIcons.smile, size: 24)),

: const Icon(ZulipIcons.smile, size: 24);

}),

gnprice · 2025-07-16T23:22:07Z

lib/widgets/set_status.dart

+              Expanded(child: TextField(
+                controller: statusTextController,
+                minLines: 1,
+                maxLines: 2,


Is this different from omitting minLines?

Omitting minLines will make the field take maxLines height.

https://github.com/flutter/flutter/blob/e2441683275879df1ac0311e02ff868410599ab1/packages/flutter/lib/src/widgets/editable_text.dart#L1225-L1228

https://github.com/flutter/flutter/blob/e2441683275879df1ac0311e02ff868410599ab1/packages/flutter/lib/src/widgets/editable_text.dart#L1246-L1250

I see, interesting. I looked at the doc on minLines before making my comment, and it seemed pretty unclear on this point, but didn't see those bits of the doc on maxLines.

It looks like the key logic in the implementation is this:
https://github.com/flutter/flutter/blob/e2441683275879df1ac0311e02ff868410599ab1/packages/flutter/lib/src/rendering/editable.dart#L2425-L2433

final double preferredHeight = switch (maxLines) { null => math.max(_textPainter.height, preferredLineHeight * (minLines ?? 0)), 1 => _textPainter.height, final int maxLines => clampDouble( _textPainter.height, preferredLineHeight * (minLines ?? maxLines), preferredLineHeight * maxLines, ), };

So when maxLines is non-null, the effective default for minLines is that it equals maxLines. When maxLines is null, though, the effective default for minLines is 0.

Interesting piece of code. However, I think that, at least for me, it didn't make sense the first time to know that I had to specify minLines, for maxLines to work as the maximum number of lines.😀

Yeah agreed — the behavior is a bit nonintuitive, and the docs aren't super clear about it.

gnprice · 2025-07-16T23:26:21Z

lib/widgets/set_status.dart

+                      final emoji = switch(change.emoji) {
+                        OptionNone<StatusEmoji?>()           => oldStatus.emoji,
+                        OptionSome<StatusEmoji?>(:var value) => value,
+                      };


nit:

Suggested change

final emoji = switch(change.emoji) {

OptionNone<StatusEmoji?>() => oldStatus.emoji,

OptionSome<StatusEmoji?>(:var value) => value,

};

final emoji = change.emoji.or(oldStatus.emoji);

That's equivalent, right?

Ahh, indeed; thanks!

sm-sayedi · 2025-07-17T23:33:45Z

Thanks @gnprice for the review. New revision pushed. Please have a look.

gnprice

Thanks for the revision! Comments below.

Like in the previous round above, I've read the first N-1 commits:
88f8299 button: Add ZulipMenuItemButton.subLabel
03d3999 button [nfc]: Make ZulipMenuItemButton.onPressed optional
f65ee25 profile: Add button for setting/showing user status in self-user profile
5d50ee5 model [nfc]: Add UserStatusChange.copyWith method
c9b5972 content: Add emoji property to UserStatusEmoji widget
4feb05b emoji [nfc]: Make emoji picker return the selected emoji, for reuse

and part of the last:
ea1d711 user-status: Add page for setting own user status

gnprice · 2025-07-18T04:55:34Z

lib/widgets/button.dart

@@ -393,13 +395,29 @@ class ZulipMenuItemButton extends StatelessWidget {
        foregroundColor: _labelColor(designVariables),
        splashFactory: NoSplash.splashFactory,
      ).copyWith(backgroundColor: _backgroundColor(designVariables)),
+      overflowAxis: Axis.vertical,


Hmm interesting. What's the effect of this? I'm finding its doc a bit opaque 🙂

Normally, the child widget of MenuItemButton would overflow horizontally, even if it's a simple widget like Text with a longer string. Setting overflowAxis: Axis.vertical wraps the child in an Expanded widget internally, thus preventing the overflow.

https://github.com/flutter/flutter/blob/440713c3b2878048be2661a6705b219c51f72c95/packages/flutter/lib/src/material/menu_anchor.dart#L2821-L2858

What would "overflow horizontally" mean concretely?

I guess the other part I'm trying to understand is: the argument sounds like it means the button now overflows vertically, instead of horizontally. What does that look like?

By "overflow horizontally", I meant that it shows that striped pattern:

And when overflowAxis: Axis.vertical is set, it will expand vertically:

Now Text.overflow will also work:

For more context, here's the upstream PR that added MenuItemButton.overflowAxis: flutter/flutter#143932

gnprice · 2025-07-18T04:56:44Z

lib/widgets/set_status.dart

+              Expanded(child: TextField(
+                controller: statusTextController,
+                minLines: 1,
+                maxLines: 2,


Yeah agreed — the behavior is a bit nonintuitive, and the docs aren't super clear about it.

gnprice · 2025-07-18T05:11:43Z

lib/widgets/set_status.dart

+    final values = [
+      (localizations.userStatusBusy,            '1f6e0', 'working_on_it'),


If the data we have from the server is missing one of these emoji, I think better to leave it out from the suggestions than to try to fall back to a hard-coded name. It's likely in that case that the hard-coded name won't work either.

(continuing from #1701 (comment))

gnprice · 2025-07-18T05:15:39Z

lib/widgets/set_status.dart

+            emojiName: store.allEmojiCandidates()
+                         .firstWhereOrNull((e) => e.emojiCode == emojiCode)


Hmm, this iterates through the whole list of all known emoji, repeatedly for each of the suggestions we want to offer. Let's avoid doing that. 🙂

Instead, have a prep commit add a little method to EmojiStore to offer the API we need in order to do this efficiently. I think that can look like String? getUnicodeEmojiNameByCode(String emojiCode).

gnprice · 2025-07-18T05:17:45Z

lib/widgets/set_status.dart

+                controller: statusTextController,
+                minLines: 1,
+                maxLines: 2,
+                maxLength: 60,


Ah interesting. Where does this max length come from?

Note: The limit on the size of the message is 60 characters.

It's in the updateStatus API docs, and I forgot to include it in the previous revisions.😀

Aha, I see. I guess let's have a short comment here with that link. That way it's clear why that's there and has the value it has; and, crucially, it's easy for someone reading in the future to check whether 60 is still the right answer then.

gnprice · 2025-07-18T05:19:51Z

lib/widgets/set_status.dart

+                textCapitalization: TextCapitalization.sentences,
+                style: TextStyle(fontSize: 19, height: 24 / 19),
+                decoration: InputDecoration(
+                  counterText: '', // TODO: should we show counter?


Sounds like a question for #mobile-design :-)

Asked: #mobile-design > Set user status @ 💬.

Cool, thanks. This comment can link to that, then.

gnprice · 2025-07-18T05:22:05Z

lib/widgets/set_status.dart

+            physics: AlwaysScrollableScrollPhysics(), // TODO: necessary?
+            padding: EdgeInsets.symmetric(vertical: 6),
+            child: Column(children: [
+              for (final status in statusSuggestions(context))


Let's pull this out as a local variable: final suggestions = statusSuggestions(context);, and then this iterates through that local.

That way the call to this helper method is a bit more visible when reading this build method's logic.

gnprice · 2025-07-18T05:24:41Z

lib/api/route/users.dart

+/// https://zulip.com/api/update-status
+Future<void> updateStatus(ApiConnection connection, {


nit: add API bindings in a separate commit

gnprice · 2025-07-18T05:26:48Z

lib/api/route/users.dart

+/// https://zulip.com/api/update-status
+Future<void> updateStatus(ApiConnection connection, {
+  required UserStatus status,
+}) {


In the server API, both the text and the emoji are optional — either can be omitted and then only the other one will be set. So UserStatusChange seems like a closer fit for that.

Status emojis are only shown for self-1:1 and 1:1 conversation items. They're ignored for group conversations as that's what the Web does.

Fixes: zulip#197

In self-user profile page, this also removes the user status information where shown in regular (non-self-user) profile page, as the newly-added button already shows the same information.

This is useful when we want to show a status emoji that we already know about, instead of relying on `userId` to get the emoji for the user. For example in the next commits, in setting user status page, where a list of status suggestions are shown.

Instead of using the selected emoji deep down the widget tree, simply return it where the emoji picker sheet is opened, to use it for different purposes.

sm-sayedi · 2025-07-19T19:49:34Z

Thanks @gnprice for the review. New revision pushed.

Figma link: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=7729-49342&t=PIXU2xFWUWq88zLE-0

Fixes: zulip#198

sm-sayedi force-pushed the 198-set-user-status branch from 0d852c1 to 242f877 Compare July 10, 2025 01:15

sm-sayedi force-pushed the 198-set-user-status branch 3 times, most recently from 23cdd3a to f67c992 Compare July 10, 2025 02:42

alya reviewed Jul 10, 2025

View reviewed changes

sm-sayedi marked this pull request as draft July 10, 2025 14:01

sm-sayedi force-pushed the 198-set-user-status branch 4 times, most recently from 1405501 to 1ca2ceb Compare July 16, 2025 18:00

gnprice reviewed Jul 16, 2025

View reviewed changes

sm-sayedi force-pushed the 198-set-user-status branch 2 times, most recently from 764b856 to ea1d711 Compare July 17, 2025 23:24

sm-sayedi requested a review from gnprice July 17, 2025 23:34

gnprice reviewed Jul 18, 2025

View reviewed changes

sm-sayedi added 11 commits July 19, 2025 10:36

test store [nfc]: Make changeUserStatuses take a Map instead of a Record

c46fbaa

msglist: Show user status emoji

00088db

recent-dms: Show user status emoji in recent DMs page

8cf7bf7

Status emojis are only shown for self-1:1 and 1:1 conversation items. They're ignored for group conversations as that's what the Web does.

new-dm: Show user status emoji

a38b10b

autocomplete [nfc]: Make MentionAutocompleteItem visibleForTesting

d5cfe41

autocomplete: Show user status emoji in user-mention autocomplete

f825b40

profile: Show user status

032110b

Fixes: zulip#197

button: Add ZulipMenuItemButton.subLabel

0cea52f

button [nfc]: Make ZulipMenuItemButton.onPressed optional

1c1d9e6

profile: Add button for setting/showing user status in self-user profile

d13fa2d

In self-user profile page, this also removes the user status information where shown in regular (non-self-user) profile page, as the newly-added button already shows the same information.

model [nfc]: Add UserStatusChange.copyWith method

3636b0e

sm-sayedi added 2 commits July 19, 2025 19:07

emoji [nfc]: Make emoji picker return the selected emoji, for reuse

8363bef

Instead of using the selected emoji deep down the widget tree, simply return it where the emoji picker sheet is opened, to use it for different purposes.

sm-sayedi force-pushed the 198-set-user-status branch from ea1d711 to 60c9baf Compare July 19, 2025 19:46

sm-sayedi requested a review from gnprice July 19, 2025 19:49

sm-sayedi added 4 commits July 20, 2025 00:23

api: Add updateStatus

065ba9b

emoji: Add EmojiStore.getUnicodeEmojiNameByCode method

1705c88

icons: Add chevron_down, from Figma

921955e

Figma link: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=7729-49342&t=PIXU2xFWUWq88zLE-0

user-status: Add page for setting own user status

bef6e76

Fixes: zulip#198

sm-sayedi force-pushed the 198-set-user-status branch from 60c9baf to bef6e76 Compare July 19, 2025 19:56

	"noStatusText": "Not status text",
	"noStatusText": "No status text",

		class _SetStatusPageState extends State<SetStatusPage> {
		List<UserStatus> _statusSuggestions(ZulipLocalizations localizations) => [

		final values = [
		(localizations.userStatusBusy, '1f6e0', 'working_on_it'),

		emojiName: store.allEmojiCandidates()
		.firstWhereOrNull((e) => e.emojiCode == emojiCode)

		/// https://zulip.com/api/update-status
		Future<void> updateStatus(ApiConnection connection, {

Set user status #1701

Are you sure you want to change the base?

Set user status #1701

Conversation

sm-sayedi commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Profile Page

Set Status Page

Screen recordings

Uh oh!

gnprice commented Jul 10, 2025

Uh oh!

sm-sayedi commented Jul 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alya commented Jul 10, 2025

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sm-sayedi commented Jul 17, 2025

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sm-sayedi Jul 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sm-sayedi commented Jul 10, 2025 •

edited

Loading

sm-sayedi Jul 19, 2025 •

edited

Loading