Skip to main content
Home and Notifications use the grouped design language of mobile Settings: muted captions above rounded grouped cards, Lucide line icons in tone-tinted tiles, and theme tokens only. Data sources, actions and routes did not change with the redesign.

​
Home

  • Header. Today’s date, a time-of-day greeting with the profile display name when one is set (“Good morning, Linh”), and a workspace switcher pill that opens the existing workspace picker. The shell navbar keeps the “Home” title, so the greeting is not a second page title.
  • Widgets. The existing widgets keep their order, visibility and Customize Home editor: assigned tasks, upcoming events, mail, meetings, finance, notes and the Today summary. Each widget is a caption with an Open link above one grouped card.
  • Task rows show the due state first: Overdue (destructive tone), Today (warning), Tomorrow (primary) or the localized date, then board and list. Event rows show a calendar-leaf date tile, weekday and time.
  • States. First loads show placeholder rows inside the card. Failed loads show an inline “Something went wrong / Pull down to try again.” row. Empty widgets show an inline message with the widget’s icon.
  • Responsive. Page kind root. Widgets flow in content-sized columns of at least 340dp: one column on phones, two on portrait tablets and up to three on laptops and desktops. The header puts the switcher beside the greeting from 560dp of content width.

​
Notifications

  • Grouping. The inbox and archive are grouped by device-local calendar day: Today, Yesterday, Last 7 days and Earlier. Groups keep the server’s newest-first order; an out-of-order item starts a new group instead of being moved.
  • Rows. Each row has a type tile (invites warning, security and rejections destructive, completions and approvals success, mentions and mail info), a primary unread dot on the tile, a semibold title while unread, the body (up to three lines), then the workspace and relative age. Open invites show Decline and Accept; answered invites show a status badge. A 48dp read toggle sits at the trailing edge.
  • States. First loads show placeholder rows; load failures and empty tabs show a centred message, with Retry on failures. Raw error text is never shown.
  • Responsive. Page kind detail: full width on phones and a centred readable column (600dp on tablets, 720dp on desktops). A notification opens its destination route, so the list does not use a list-detail split.

​
Regression coverage

  • test/features/shell/view/appearance_root_tabs_render_test.dart (parts home_render_cases.dart and notifications_render_cases.dart) renders both screens in the real shell with fixture data at 390x844, 820x1180 and 1440x900 in Classic light/dark, a gradient and a blob theme. It asserts the phone gutter, the column count, the 44dp targets, the four group captions, and the loading, error and empty states. Set SETTINGS_RENDER_DIR (plus SETTINGS_MATERIAL_FONT pointing at a Roboto TTF, and optionally SETTINGS_RENDER_PIXEL_RATIO) to write PNG captures.
  • test/features/notifications/widgets/notification_day_groups_test.dart covers calendar-day bucketing and feed-order preservation.
  • test/core/layout/grouped_rows_test.dart covers tones, row targets and state actions.