> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tuturuuu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Home and Notifications

> Layout, grouping and state rules for the mobile Home dashboard and the Notifications inbox

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.