Skip to content

Show current organization's name and logo atop main menu #1937

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Show current organization's name and logo atop main menu #1937

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87ddd72
store: Make `realmName` and `realmIcon` getters non-nullable
rajveermalviya Oct 22, 2025
c40a8d9
store [nfc]: Rename _tryResolveUrl to _tryResolveUrlStr
rajveermalviya Oct 28, 2025
83f3f9e
store: Add resolveRealmIconUrl
rajveermalviya Oct 28, 2025
c9c67d6
home: Show current organization's name and logo atop main menu
rajveermalviya Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions assets/l10n/app_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@
"@settingsPageTitle": {
"description": "Title for the settings page."
},
"switchAccountButton": "Switch account",
"@switchAccountButton": {
"description": "Label for main-menu button leading to the choose-account page."
},
"tryAnotherAccountMessage": "Your account at {url} is taking a while to load.",
"@tryAnotherAccountMessage": {
"description": "Message that appears on the loading screen after waiting for some time.",
Expand Down
6 changes: 0 additions & 6 deletions lib/generated/l10n/zulip_localizations.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,12 +199,6 @@ abstract class ZulipLocalizations {
/// **'Settings'**
String get settingsPageTitle;

/// Label for main-menu button leading to the choose-account page.
///
/// In en, this message translates to:
/// **'Switch account'**
String get switchAccountButton;

/// Message that appears on the loading screen after waiting for some time.
///
/// In en, this message translates to:
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_ar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
@override
String get settingsPageTitle => 'الإعدادات';

@override
String get switchAccountButton => 'تبديل الحساب';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_de.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Einstellungen';

@override
String get switchAccountButton => 'Konto wechseln';

@override
String tryAnotherAccountMessage(Object url) {
return 'Dein Account bei $url benötigt einige Zeit zum Laden.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_el.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsEl extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_en.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_es.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsEs extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_fr.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ class ZulipLocalizationsFr extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Paramètres';

@override
String get switchAccountButton => 'Changer de compte';

@override
String tryAnotherAccountMessage(Object url) {
return 'Votre compte à $url prend du temps à se charger.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_he.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsHe extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_hu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsHu extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_it.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Impostazioni';

@override
String get switchAccountButton => 'Cambia account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Il caricamento dell\'account su $url sta richiedendo un po\' di tempo.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_ja.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
@override
String get settingsPageTitle => '設定';

@override
String get switchAccountButton => 'アカウントを切り替える';

@override
String tryAnotherAccountMessage(Object url) {
return '$url のアカウントの読み込みに時間がかかっています。';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_nb.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_pl.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Ustawienia';

@override
String get switchAccountButton => 'Przełącz konto';

@override
String tryAnotherAccountMessage(Object url) {
return 'Twoje konto na $url wymaga jeszcze chwili na załadowanie.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_ru.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Настройки';

@override
String get switchAccountButton => 'Сменить учетную запись';

@override
String tryAnotherAccountMessage(Object url) {
return 'Ваша учетная запись на $url загружается медленно.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_sk.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Zmeniť účet';

@override
String tryAnotherAccountMessage(Object url) {
return 'Načítavanie vášho konta na adrese $url chvílu trvá.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_sl.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Nastavitve';

@override
String get switchAccountButton => 'Preklopi račun';

@override
String tryAnotherAccountMessage(Object url) {
return 'Nalaganje vašega računa iz $url traja dlje kot običajno.';
Expand Down
3 changes: 0 additions & 3 deletions lib/generated/l10n/zulip_localizations_uk.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Налаштування';

@override
String get switchAccountButton => 'Змінити обліковий запис';

@override
String tryAnotherAccountMessage(Object url) {
return 'Ваш обліковий запис на $url завантажується деякий час.';
Expand Down
9 changes: 0 additions & 9 deletions lib/generated/l10n/zulip_localizations_zh.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
@override
String get settingsPageTitle => 'Settings';

@override
String get switchAccountButton => 'Switch account';

@override
String tryAnotherAccountMessage(Object url) {
return 'Your account at $url is taking a while to load.';
Expand Down Expand Up @@ -1200,9 +1197,6 @@ class ZulipLocalizationsZhHansCn extends ZulipLocalizationsZh {
@override
String get settingsPageTitle => '设置';

@override
String get switchAccountButton => '切换账号';

@override
String tryAnotherAccountMessage(Object url) {
return '您在 $url 的账号加载时间过长。';
Expand Down Expand Up @@ -2305,9 +2299,6 @@ class ZulipLocalizationsZhHantTw extends ZulipLocalizationsZh {
@override
String get settingsPageTitle => '設定';

@override
String get switchAccountButton => '切換帳號';

@override
String tryAnotherAccountMessage(Object url) {
return '您在 $url 的帳號載入的比較久。';
Expand Down
143 changes: 105 additions & 38 deletions lib/widgets/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import 'app.dart';
import 'app_bar.dart';
import 'button.dart';
import 'color.dart';
import 'content.dart';
import 'icons.dart';
import 'inbox.dart';
import 'inset_shadow.dart';
Expand Down Expand Up @@ -279,7 +280,6 @@ void _showMainMenu(BuildContext context, {
_DirectMessagesButton(tabNotifier: tabNotifier),
// TODO(#1094): Users
const _MyProfileButton(),
const _SwitchAccountButton(),
// TODO(#198): Set my status
// const SizedBox(height: 8),
const _SettingsButton(),
Expand Down Expand Up @@ -307,29 +307,113 @@ void _showMainMenu(BuildContext context, {
builder: (BuildContext _) {
return PerAccountStoreWidget(
accountId: accountId,
child: SafeArea(
minimum: const EdgeInsets.only(bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(child: InsetShadowBox(
top: 8, bottom: 8,
color: designVariables.bgBotBar,
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Column(children: menuItems)))),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: AnimatedScaleOnTap(
scaleEnd: 0.95,
duration: Duration(milliseconds: 100),
child: BottomSheetDismissButton(
style: BottomSheetDismissButtonStyle.close))),
])));
child: _MainMenu(menuItems: menuItems));
});
}

/// The main-menu sheet.
///
/// Figma link:
/// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=143-10939&t=s7AS3nEgNgjyqHck-4
class _MainMenu extends StatelessWidget {
const _MainMenu({
required this.menuItems,
});

final List<Widget> menuItems;

@override
Widget build(BuildContext context) {
final designVariables = DesignVariables.of(context);

return SafeArea(
minimum: const EdgeInsets.only(bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
_MainMenuHeader(),
Flexible(child: InsetShadowBox(
top: 8, bottom: 8,
color: designVariables.bgBotBar,
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Column(children: menuItems)))),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: AnimatedScaleOnTap(
scaleEnd: 0.95,
duration: Duration(milliseconds: 100),
child: BottomSheetDismissButton(
style: BottomSheetDismissButtonStyle.close))),
]));
}
}

class _MainMenuHeader extends StatelessWidget {
const _MainMenuHeader();

@override
Widget build(BuildContext context) {
final designVariables = DesignVariables.of(context);
final store = PerAccountStoreWidget.of(context);

final realmIconUrl = store.resolveRealmIconUrl();

final placeholder = ColoredBox(color: designVariables.avatarPlaceholderBg);
final logo = realmIconUrl != null
? RealmContentNetworkImage(
realmIconUrl,
frameBuilder: (_, child, frame, _) {
if (frame == null) return placeholder;
return child;
},
errorBuilder: (_, _, _) => placeholder)
: placeholder;

return Padding(
padding: const EdgeInsets.only(top: 6),
child: AnimatedScaleOnTap(
Copy link
Collaborator

@chrisbobbe chrisbobbe Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would look better without the AnimatedScaleOnTap effect. It looks like two things that are moving, rather than one thing that's resizing.

Nov-03-2025 16-51-44

I think we should reserve this effect for buttons that are a rounded-rectangle surface:

Nov-03-2025 16-54-11

Thoughts @alya?

Copy link
Collaborator

@chrisbobbe chrisbobbe Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For touch feedback here, how about opacity? Per Vlad's suggestion at #mobile-design > all channels view design @ 💬:

we could use opacity by default to indicate touch if its not provided

Copy link
Collaborator

@alya alya Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed that the effect in that screen capture isn't working. Trying Vlad's suggestion sounds good to me.

duration: const Duration(milliseconds: 100),
scaleEnd: 0.95,
child: TextButton(
onPressed: () {
Navigator.pop(context); // Close the main menu.
Navigator.push(context,
MaterialWidgetRoute(page: const ChooseAccountPage()));
},
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
shape: LinearBorder.none,
backgroundColor: Colors.transparent,
overlayColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
tapTargetSize: MaterialTapTargetSize.shrinkWrap),
child: Row(children: [
Flexible(child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(12, 6, 4, 6),
child: Row(spacing: 8, children: [
AvatarShape(
size: 28,
borderRadius: 4,
child: logo),
Flexible(child: Text(store.realmName,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: designVariables.title,
fontSize: 20,
height: 24 / 20,
).merge(weightVariableTextStyle(context, wght: 600)))),
]))),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(8, 7, 14, 7),
Copy link
Collaborator

@chrisbobbe chrisbobbe Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the end padding should be 12px, to match the padding before the org icon?

This 14px value comes from the Figma, but the Figma uses end-aligned text, and I think the 14px value might be tailored to that case. Also maybe the 7px vertical padding? Seems like it would be simpler, and logical, if we just wrapped the whole row with 12px horizontal padding and 6px vertical padding, and said spacing: 12 (or some other appropriate value) on the Row.

child: Icon(ZulipIcons.arrow_left_right,
size: 19,
color: designVariables.icon)),
Comment on lines +410 to +412
Copy link
Collaborator

@chrisbobbe chrisbobbe Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this would be a good place to use ZulipIconButton.

]))));
}
}

abstract class _MenuButton extends StatelessWidget {
const _MenuButton();

Expand Down Expand Up @@ -575,23 +659,6 @@ class _MyProfileButton extends _MenuButton {
}
}

class _SwitchAccountButton extends _MenuButton {
const _SwitchAccountButton();

@override
IconData? get icon => ZulipIcons.arrow_left_right;

@override
String label(ZulipLocalizations zulipLocalizations) {
return zulipLocalizations.switchAccountButton;
}

@override
void onPressed(BuildContext context) {
Navigator.of(context).push(MaterialWidgetRoute(page: const ChooseAccountPage()));
}
}

class _SettingsButton extends _MenuButton {
const _SettingsButton();

Expand Down
Loading