# Fitbit App — Home & Feed: Screen Specifications

---

## Today Dashboard (Home)

### Overview
The main landing screen the user sees after logging in, displaying their personalized fitness stats tiles for the current day, along with quick access to premium features and syncing.

### UI Elements

**Header / Top Bar**
- Fitbit logo or user avatar icon (top-left) — tapping opens the user's profile
- Notification bell icon (top-right) — tapping opens the Notifications Center
- Sync indicator: animated icon or text "Syncing…" when a sync is in progress; accessibility label: "In progress"
- "Sync data" button (accessibility label: "Sync data") — triggers a manual data sync with the connected device

**Tiles / Dashboard Cards**
The home screen is composed of a scrollable vertical list of metric tiles. Each tile shows:
- Metric name label (e.g., "Steps", "Active Zone Minutes", "Sleep", "Heart Rate", "Calories", "Water", "Weight")
- Current value for today (numeric, with unit)
- Progress indicator — circular ring or bar showing progress toward the day's goal
- Goal value (e.g., "Goal: 10,000 steps")

Specific tiles visible:
- **Steps tile**: step count (e.g., "7,842"), goal ring, "10,000" goal label
- **Active Zone Minutes tile** — title "Active Zone Minutes", current AZM count, weekly goal progress
- **Active Minutes tile** — title "Active Minutes", count for today
- **Sleep tile** — last night's sleep duration (e.g., "7h 23m"), sleep score if available
- **Heart Rate tile** — current or resting heart rate in bpm (e.g., "62 bpm")
- **Calories tile** — calories burned today
- **Floors tile** — floors climbed count
- **Water tile** — water logged today vs. goal (e.g., "48 fl oz / 64 fl oz")
- **Weight tile** — most recent logged weight
- **Stress Score tile** (if supported by device)
- **Blood Oxygen tile** (if supported by device)

**Tile Action Areas**
- Each tile is tappable — opens the detail screen for that metric
- A "+" or "Log" button on tiles such as Water, Weight, Food allows quick manual logging without leaving home

**Fitbit Premium Upsell Banner** (shown for non-premium users)
- Text: "Get Fitbit Premium"
- Subtext promoting premium benefits
- "Get Fitbit Premium" call-to-action button (coral/pink color)

**Tile Customization**
- An "Edit" or reorder affordance (e.g., pencil icon or a "Customize" link) allowing the user to add, remove, or rearrange dashboard tiles

**Bottom Navigation Bar**
- **Today** (house icon) — currently active tab
- **Coach** (play/guide icon) — opens the Coach/Wellness content section
- **Feed** (community icon) — opens the social feed
- **Discover** (compass/explore icon) — opens the Discover/Explore section
- **Account/Profile** (person icon) — opens profile and settings

### Interactions
- Tapping a tile navigates to the detail screen for that metric (e.g., tapping Steps opens the Steps detail/history screen)
- Pulling down on the list triggers a data sync / refresh
- Tapping the sync button in the toolbar triggers sync with the paired Fitbit device; the "Syncing…" indicator appears while in progress
- Tapping the notification bell opens the Notifications Center (inbox)
- Tapping "Get Fitbit Premium" navigates to the Premium upsell / enrollment screen
- Tapping the user avatar navigates to the Profile screen
- Tapping the bottom nav tabs switches sections without reloading the home content
- Tapping a "Log" shortcut on a tile (e.g., Water) opens a quick-log bottom sheet inline

### Sample Data
- Steps: **7,842** / 10,000 goal — ring at ~78%
- Active Zone Minutes: **24** / 22 goal (goal exceeded, ring full + highlight)
- Sleep: **7h 23m** — Sleep Score: 78
- Resting Heart Rate: **62 bpm**
- Calories: **1,847** burned
- Water: **48 fl oz** / 64 fl oz goal
- Weight: **168.4 lbs** — logged 2 days ago

---

## Social Feed

### Overview
A scrollable social activity feed where the user sees fitness updates, posts, cheers, and comments from friends and joined groups, organized into three tabs: Feed, Friends, and Groups.

### UI Elements

**Header / Top Bar**
- Screen title (no back button — this is a primary tab)
- Compose / Write Post button (pencil icon, top-right) — opens the post composer

**Tab Bar (3 tabs)**
- **Feed** — the default tab; shows the combined activity feed
- **Friends** — shows the leaderboard and friend-specific activity
- **Groups** — shows joined groups and group posts

---

**Feed Tab Content**

Each post card in the feed displays:
- **User avatar** (circular photo) — tapping opens that user's profile
- **Display name** + **timestamp** (e.g., "Sarah K. · 2 hours ago")
- **Post content**: text, activity achievement, badge earned, or exercise logged
  - e.g., "Just completed a 5K run! 🏃" or "Earned the Boat Shoe badge"
- **Activity stat chip** (optional): "3.1 mi · 28:14 · 485 cal"
- **Cheer button** ("👏 Cheer") with count (e.g., "14 cheers")
- **Comment button** ("💬 Comment") with count (e.g., "3 comments")
- **More options** (⋮ menu): Report post, options depend on ownership

Cheered-by summary (if applicable): "You and 13 others cheered this"

Inline comment preview (up to 2 most recent comments shown):
- Commenter avatar + name + comment text + timestamp

**Empty state** (no friends yet):
- Illustration + text encouraging the user to add friends

---

**Friends Tab Content**

- **Weekly Leaderboard card** — ranked list of friends by step count for the current week
  - Each entry: rank number, avatar, display name, step count
  - Current user's row highlighted
  - "Cheer" button next to each friend
  - "Taunt" button next to each friend
- **Friend list** below leaderboard — scrollable list of all friends with their today stats
- **Invite Friends** button — opens the friend invitation flow

---

**Groups Tab Content**

- **Joined Groups** list — each group card shows:
  - Group avatar/cover photo
  - Group name
  - Member count (e.g., "1,243 members")
  - Latest post preview
  - Tapping opens the group's feed
- **Recommended Groups** section — groups the user might want to join
- **Create Group** button (or link) — navigates to the Create Group flow
- **Discover Groups** — link to browse all available groups

### Interactions

**Feed tab:**
- Tapping **Cheer** button toggles cheer state on/off; cheer count increments/decrements immediately (optimistic update); button highlights when cheered
- Tapping **Comment** button opens the Comment sheet — shows all comments and a text input field to type and submit a new comment
- Tapping a **user avatar or name** navigates to that user's profile feed
- Tapping ⋮ menu on someone else's post shows: "Report post" → opens Moderation Report screen; on own post shows: "Delete post"
- Tapping **Compose** button opens the Post Composer screen
- Feed auto-refreshes when the user returns to the tab or pulls down

**Friends tab:**
- Tapping **Cheer** sends a cheer notification to that friend
- Tapping **Taunt** sends a taunt notification to that friend
- Tapping a friend row navigates to that friend's profile feed

**Groups tab:**
- Tapping a group card navigates to the Group Feed screen
- Tapping **Create Group** navigates to the Create Group flow (intro screen)
- Tapping **Discover Groups** shows browseable group recommendations

### Sample Data

**Feed post example:**
> **Marcus T.** · 3 hours ago  
> "Morning run done! Feeling great. 🌅"  
> 🏃 3.2 mi · 32:05 · 412 cal  
> 👏 **8 cheers** · 💬 **2 comments**  
> — "Great job!" — Jamie L.

**Leaderboard example (Friends tab):**
1. 🥇 Jordan M. — 12,430 steps
2. 🥈 **You** — 10,205 steps ← highlighted
3. 🥉 Alex P. — 9,887 steps
4. Casey R. — 7,214 steps

**Groups tab example:**
- 🏋️ **Morning Workout Crew** — 842 members — "Anyone else doing the 5K challenge?"
- 🚶 **Step Challenge Masters** — 2,104 members — "Week 3 leaderboard is up!"

---

## Post Composer

### Overview
A screen where the user writes and publishes a new post to their personal feed or to a specific group.

### UI Elements

**Header / Top Bar**
- Back/Close button (✕) on the left — discards the post and returns to the feed
- Screen title: "Create Post" (or group name if posting to a group)
- **Post** button (top-right, coral/pink) — disabled until text is entered; enabled once the user types content

**Audience Selector**
- Dropdown or tap-to-change selector showing who the post is visible to:
  - "Friends" (default)
  - A specific group name (if entering from a group)

**Text Input Area**
- Large multi-line text field with placeholder: "What's on your mind?"
- User's avatar displayed to the left of the input
- Supports @mentions — typing "@" triggers an inline suggestions list of mentionable friends/members

**Attachment Options Row** (icon buttons below the text field)
- 📷 Photo — opens camera or photo picker
- 📍 Location — adds a location tag (optional)

**Mention Suggestions Dropdown** (appears when typing "@")
- List of friends/group members matching the typed query
- Each entry: avatar + display name
- Tapping a suggestion inserts the @mention into the text

**Character/content indicators**
- No hard character limit shown, but very long posts may be truncated in the feed preview

### Interactions
- Typing in the text field enables the **Post** button
- Tapping **Post** submits the post, returns to the feed, and the new post appears at the top
- Tapping ✕ or back when text has been entered shows a confirmation dialog: "Discard post?" with **Discard** and **Keep Editing** options
- Tapping the audience selector opens a bottom sheet or dropdown with sharing options
- Tapping a photo icon opens the device photo picker; selected photo appears as a preview thumbnail below the text field
- Tapping an @mention suggestion auto-completes the name in the text

### Sample Data
- Placeholder text: "What's on your mind?"
- Audience: "Friends"
- Typed text: "Just hit my step goal for the 7th day in a row! 🎉 Keep it up @Jordan M.!"
- Post button: enabled (coral)

---

## Group Feed

### Overview
The feed and information screen for a specific Fitbit community group, showing group posts, member info, and group management options.

### UI Elements

**Header / Top Bar**
- Back arrow — returns to the Groups tab
- Group name as screen title (e.g., "Morning Workout Crew")
- ⋮ More options button (top-right): Leave Group, Report Group, Share Group

**Group Cover / Banner**
- Full-width group cover photo or gradient banner
- Group avatar (circular) overlaid at the bottom-left of the banner
- Group name displayed in large text
- Member count (e.g., "842 members")
- **Join / Leave** button — "Join" (if not a member) or "Joined" (if already a member, tapping shows confirmation to leave)

**Tabs within Group**
- **Posts** — default; shows the group's post feed
- **Members** — shows member list with search
- **About** — shows group description, creation date, admin(s)

**Posts Tab**
Same card structure as the main Feed:
- User avatar, name, timestamp
- Post text / activity / badge content
- Cheer and Comment counts + buttons
- ⋮ options: Report, Delete (if own post), Pin (if admin)

**Compose Post Bar** (pinned above the post list):
- User avatar (small) + tappable area showing "Write something…" → opens Post Composer scoped to this group

**Members Tab**
- Search bar: "Search members"
- List of members: avatar, display name, member since date
- Admin badge on admins
- "Invite Friends" button to invite Fitbit friends to the group

**About Tab**
- Group description text
- Created by: [admin name] on [date]
- Group type: Public / Private
- Admin list

### Interactions
- Tapping **Join** sends a join request (public groups: instantly joined; private: pending approval); button changes to "Joined ✓"
- Tapping **Joined** → "Leave Group" shows a confirmation sheet; confirming removes the user from the group
- Tapping the Compose bar opens the Post Composer pre-scoped to this group
- Tapping **Cheer** or **Comment** works identically to the main Feed
- Tapping a member's name/avatar opens their profile
- Tapping ⋮ → **Report Group** opens the Moderation Report screen
- Switching tabs scrolls to the relevant content section

### Sample Data
- Group name: **Morning Workout Crew**
- Members: **842**
- Admin: Jordan M.
- Description: "A group for early risers who love getting their workout done before the day starts. Share your morning stats and motivate each other!"
- Latest post: "Alex P. completed a morning yoga session · 45 min · 6:15 AM"

---

## Comment Thread

### Overview
A bottom sheet or full-screen view showing all comments on a specific post, with an input field to add a new comment.

### UI Elements

**Header**
- "Comments" title
- Close / back button (✕ or back arrow)
- Comment count (e.g., "5 Comments")

**Original Post Summary** (pinned at top)
- Compact version of the post: avatar, name, post text
- Cheer count

**Comments List** (scrollable)
Each comment row:
- Commenter avatar (small, circular)
- Commenter display name (bold)
- Comment text
- Timestamp (e.g., "1 hour ago")
- ❤ Like/react icon + count (optional)
- ⋮ Options: Report comment / Delete (if own comment)

**Empty state**: "No comments yet. Be the first!"

**Comment Input Bar** (pinned at bottom, above keyboard)
- User avatar (small)
- Text input field: placeholder "Add a comment…"
- **Send** button (arrow icon, active only when text is present)

### Interactions
- Typing in the input field activates the Send button
- Tapping **Send** posts the comment; it appears immediately at the bottom of the list; input field clears
- Tapping ⋮ on another user's comment → **Report Comment** → opens Moderation Report screen
- Tapping ⋮ on own comment → **Delete** → confirmation → comment removed
- Tapping the commenter's name/avatar navigates to their profile
- Keyboard appears automatically when the screen opens

### Sample Data
**Comments:**
1. **Jamie L.** · 2 hours ago — "Amazing! You're on fire this week! 🔥"
2. **Casey R.** · 1 hour ago — "Keep it going! You're crushing it."
3. **You** · 45 minutes ago — "Thanks everyone, means a lot! 💪"

**Input**: "Add a comment…" (placeholder)
<!-- source-hash:a09e1ec597e6 -->

---

# Devices & Sync — Screen Specifications

---

## Device Details (Tracker Details)

### Overview
The user views detailed information about their paired Fitbit tracker and can initiate a sync, update firmware, or remove the device.

### UI Elements

**Header / Toolbar**
- Back arrow (navigates up)
- Overflow menu with a single action: **"Remove [Device Name]"** (labeled via the unpair option)

**Device Hero Section**
- Device image (photo of the specific tracker model, e.g., Fitbit Charge 6)
- Device name label (e.g., "Charge 6")
- Battery level text: one of **"Full"**, **"Medium"**, **"Low"**, or **"Empty"**
- Firmware version text (e.g., "Firmware version 1.215.35")
- Last synced time label (e.g., "Synced 3 minutes ago" or "Synced Today at 2:34 PM")

**Sync Row**
- Tappable row labeled to trigger a manual sync
- Sync progress bar (spinner/progress indicator shown while sync is in progress)
- Sync icon button (enabled when the device is not syncing; hidden during sync)
- Detailed last-sync timestamp text below the row (e.g., "Today at 2:34 PM")

**Firmware Update Button**
- Labeled **"Update Firmware"** (or equivalent)
- Only enabled when the device is in a ready state (not syncing)
- Disabled and grayed out during sync

**Settings Rows Section** (below a section header)
- One or more tappable setting rows (e.g., "Stride Length", "Swim Settings"), each showing a title and optional subtitle

**Guide/Help Panel**
- Informational section with a title and description text, linking to help content labeled **"Help"**

**Music Control Panel** (conditionally visible for supported devices)
- Shown only if the device supports BLE music control

**Open Denali Button** (conditionally visible)
- "Open [device app]" button for devices that support a dedicated companion UI

**Re-bond Button** (conditionally visible)
- Button to re-initiate Bluetooth bonding for applicable devices

**Snackbar Notifications** (appear at bottom of screen)
- **"Sync in progress"** — if user tries to sync while already syncing
- **"Bluetooth required"** — if Bluetooth is off or disconnected
- **"Location services must be enabled"** with an action button **"Enable"** — if location is off and needed for sync
- **"Syncing…"** status text (in the toolbar area during active sync from another screen)

**Loading State**
- Full-screen progress indicator shown when the screen is first loading device data or when a firmware update launch is pending

### Interactions

| Element | Action |
|---|---|
| Sync row (tap) | Initiates a manual sync; progress bar appears, sync icon hides |
| Firmware Update button | Navigates to the Firmware Update flow |
| Settings row (e.g., Stride Length) | Opens the corresponding settings screen |
| Help panel | Opens in-app help content |
| Open Denali button | Opens companion device experience |
| Re-bond button | Triggers Bluetooth re-bonding flow |
| Overflow → Remove [Device Name] | Shows a confirmation dialog (see below) |
| Location snackbar → "Enable" | Navigates to the Location Permission screen |
| Back arrow | Returns to the previous screen (device list or dashboard) |

**Remove Device Confirmation Dialog**
- Triggered by tapping "Remove" in the overflow menu
- Title: **"Remove [Device Name]?"**
- Body: Consent message about removing the device
- Buttons: **"Remove"** (confirms unpair) and **"Cancel"**
- If the account is a family/child account: an additional **"Parent Notice"** dialog appears first, with primary and secondary title strings before the standard confirmation

**Disk Full Dialog** (triggered if device storage is full before sync/update)
- Title: **"Storage Almost Full"** (from `mobile_disk_full_title`)
- Body: **"Free up space on your phone to continue."** (from `mobile_disk_full_description`)
- Button: **"OK"**

**State Transitions**
- Sync state: sync icon visible ↔ hidden; progress bar visible ↔ hidden; sync row enabled ↔ disabled
- Firmware Update button: enabled only when not syncing
- Last sync time refreshes every minute automatically

### Sample Data

```
Device: Fitbit Charge 6
Battery: Medium
Firmware version 1.215.35
Last synced: Today at 2:34 PM

Settings:
  • Stride Length →
  • Swim Settings →
```

---

## Firmware Update

### Overview
A step-by-step flow guiding the user through updating their Fitbit device's firmware, with multiple sequential screens driven by the device's update phase.

### UI Elements

The Firmware Update screen is a container that hosts different content fragments depending on the current update phase. The toolbar is present throughout with a back/close button.

**Common elements across all phases:**
- Toolbar with back button
- Phase-specific content area (illustrations, instructional text, progress indicators)
- Primary action button (phase-specific label)
- Optional secondary/cancel button

**Key phase screens include:**

**Searching / Connecting Phase**
- Illustration of the device
- Status text: searching for device or connecting over Bluetooth/Wi-Fi
- Progress indicator (spinner)

**Downloading / Installing Phase**
- Progress bar showing download percentage
- Text: e.g., "Updating firmware… Do not move away from your phone."
- Cannot be cancelled during this phase; tapping back shows a toast: **"Can't stop the firmware update"**

**GDPR / Consent Phase** (if required)
- Consent screen with legal text and Accept / Decline options

**Orientation / Tutorial Screens**
- Instructional images and text explaining steps the user must follow on the device
- "Next" button to advance
- Back button skips back to the previous orientation screen; on the first orientation screen, a dialog appears:
  - Title: **"Skip setup screens?"**
  - Body: **"You can set these up later in the app."**
  - Buttons: **"Skip"** / **"Continue"**

**Low Battery Warning**
- Illustration and message explaining the device battery is too low to update
- Button to retry

**Success Phase**
- Confirmation illustration and text indicating the update completed successfully
- "Done" button

**Error / Retry Phase**
- Error illustration and message
- Button labeled either **"Retry over Bluetooth"** or **"Retry over Wi-Fi"** depending on which connection method was attempted

**Wi-Fi Setup Phase** (for Wi-Fi-capable devices)
- Directs to the Wi-Fi Management screen to configure the network before downloading

**Cancel / Exit Dialog** (shown when user presses back during update flow)
- Title: **"Cancel update?"**
- Body: **"Your device needs this update to work properly."** (from `synclair_cancel_updating_description`)
- Buttons: **"Cancel Update"** / **"Continue Updating"**

### Interactions

| Element | Action |
|---|---|
| Back button (during orientation screens) | Goes to previous orientation screen; if on first screen, shows "Skip setup" dialog |
| Back button (during download/install) | Shows toast: **"Can't stop the firmware update"** |
| Back button (other phases) | Shows Cancel Update confirmation dialog |
| "Skip" in dialog | Exits the update flow, returns to Device Details |
| "Continue Updating" in dialog | Dismisses dialog, resumes update |
| "Retry over Bluetooth" / "Retry over Wi-Fi" | Restarts the update with the selected method |
| "Done" / finish | Returns to Device Details with a result; may show a toast with a completion message |
| Wi-Fi button (for supported devices) | Opens Wi-Fi Management screen |
| Bluetooth turned off mid-update | Shows toast: **"Bluetooth must be on to update your device"** and exits |

### Sample Data

```
Phase: Downloading
"Updating your Charge 6…"
Progress: 67%

[████████████░░░░░░░] 67%

Do not move away from your phone.
```

---

## Location Permission Setup

### Overview
The user reviews and grants the location and background location permissions required for Fitbit to sync reliably with their device.

### UI Elements

**Header / Toolbar**
- Back/close button (X)

**Illustration**
- Image: location permission illustration (shows a map/location graphic)
- Alternate image when all permissions are granted: a checkmark / "all set" illustration

**Title Text**
- Before permissions granted: **"Fitbit needs location access to sync"** (or **"Always allow location"** on Android 12+)
- After all permissions granted: **"All set"**

**Body Text**
- Before: Explanation of why location is needed for Bluetooth sync (e.g., **"Fitbit needs location permission to find and sync with your device over Bluetooth."**; on Android 12+: specific Android 12 rationale text)
- After: **"Your Fitbit device is ready to sync."**

**Permission Status List** (three rows, each showing a permission name and its current status)
1. **Location Services** — status: **"Enabled"** (green/success) or **"Tap to fix"** (actionable)
2. **Location Permission** — status: **"Allowed"** or **"Tap to fix"**
3. **Background Location Permission** — status: **"Allowed"**, **"Tap to fix"**, or **"Disabled"** (grayed out if location permission itself is not granted)

Each row is tappable if its status is "Tap to fix".

**Buttons**
- **"Done"** — enabled only when all three permissions are granted; navigates back to the device screen
- **"Continue without location"** — visible before all permissions granted; skips permission setup
- **"Learn more"** — opens a web page or in-app explanation about why location is needed

**Bottom Sheet Dialog** (shown if location permission was previously denied permanently)
- Body: Explanation that location permission was denied
- **"Go to Settings"** button — opens the system App Settings to manually grant the permission
- **"Cancel"** button — dismisses the dialog

### Interactions

| Element | Action |
|---|---|
| "Location Services" row (tap to fix) | Opens system location settings |
| "Location Permission" row (tap to fix) | Triggers system permission request dialog |
| "Background Location" row (tap to fix) | Triggers system background location permission dialog |
| "Done" button (enabled) | Returns to previous screen; device sync can now proceed |
| "Continue without location" | Exits without granting permissions; sync may be limited |
| "Learn more" | Opens help/explanation content |
| System permission denied permanently | Shows bottom sheet with "Go to Settings" |

**State Updates**
- Each permission row updates its status label in real time as the user grants permissions
- The illustration and title/body text switch to the "All set" state as soon as all three permissions are granted
- "Done" button becomes enabled; "Continue without location" and "Learn more" buttons hide

### Sample Data

```
[Location illustration]

Fitbit needs location access to sync
Fitbit needs location permission to find 
and sync with your device over Bluetooth.

● Location Services          Enabled ✓
● Location Permission        Tap to fix ›
● Background Location        Disabled

[Done — grayed out]   [Continue without location]
                      [Learn more]
```

---

## Connected Devices & Account Access

### Overview
The user sees a list of all devices currently signed in to their Fitbit account and can view details or revoke access for each device.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: **"Manage access to account"**

**Loading State**
- Centered progress spinner
- Text below spinner: **"Retrieving device list…"**

**Device List** (shown after loading)
- Pull-to-refresh supported (swipe down to reload the list)
- Each list item shows:
  - Device name or identifier
  - Device type / platform information
  - Tappable row to view details

**Empty State**
- If no devices are connected, an empty view or message is shown

### Interactions

| Element | Action |
|---|---|
| Pull down on list | Refreshes the device list from the server |
| Tap a device row | Navigates to Device Info detail screen for that device |
| Back arrow | Returns to Account Settings |

### Sample Data

```
Manage access to account

These devices are signed in now to your Fitbit account.
Select a device to get details or revoke access to just that device.

● Pixel 7 — Android          Last seen: Today
● iPhone 14 — iOS            Last seen: 3 days ago
● Fitbit Charge 6            Last seen: Today
```

---

## Device Info (Connected Device Detail)

### Overview
The user views details about a specific signed-in device and can revoke that device's access to their Fitbit account.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: device name or "Device Info"

**Device Details Section**
- Device name
- Device type / platform
- Last connection time/date
- IP address or other identifying information (if available)

**Revoke Access Button**
- Labeled to remove this device's access
- Tapping triggers a confirmation step

**Informational Text**
- **"These devices are signed in now to your Fitbit account. Select a device to get details or revoke access to just that device."** (`account_access_text_info`)
- **"Learn more."** link (`account_access_learn_more`)

### Interactions

| Element | Action |
|---|---|
| Revoke access button | Removes the device's authentication; device is removed from the list |
| "Learn more" link | Opens a help/info page about account access management |
| Back arrow | Returns to Connected Devices list |

### Sample Data

```
Device Info

Name:       Pixel 7
Platform:   Android
Last seen:  Today at 11:45 AM

[Revoke Access]

Learn more.
```
<!-- source-hash:16e83a7c5951 -->

---

# Onboarding & Setup — Screen Specifications

---

## Multi-Panel Onboarding Slideshow

### Overview
A full-screen, swipeable slideshow that guides the user through a series of onboarding panels before they complete setup; each panel displays an illustration, heading, body text, and optional action button.

### UI Elements

**Header/Toolbar**
- Top toolbar with an **X (close/dismiss)** button on the left (content description: "Close"). Tapping it exits the entire onboarding flow immediately.
- The toolbar background matches the overall dark background (`neutral_800`).

**Pager Area**
- Full-screen swipeable page view showing one panel at a time.
- Each panel contains:
  - A centered **illustration or image** (device/tracker image relevant to the current step)
  - A **headline** text (large, bold)
  - A **body/description** text (smaller, below headline)
  - An optional **primary action button** (pink/filled style) — e.g., "Next", "Get Started", "Add Alarm"

**Page Indicator (Dot Navigation)**
- A row of small circular dots at the bottom of the screen, centered horizontally.
- The **active dot** is black; **inactive dots** are a semi-transparent black (`black_20_percent_opacity`).
- Dots fade out as the user approaches the last panel — the dot row gradually becomes invisible on the second-to-last page and is fully hidden on the last page.
- If there is only one panel, the dot is hidden entirely.

### Interactions
- **Swipe left/right** to advance or go back between panels.
- **Tapping the X button** closes the entire onboarding flow; no changes are saved.
- **Tapping the primary action button** on a panel either:
  - Advances to the next panel, or
  - On the final panel, completes the onboarding flow and navigates to the appropriate next screen (e.g., the alarm list, or the main app).
- Page transitions send an internal broadcast so other components can react to the current page.

### Sample Data
| Panel | Headline | Body | Button |
|-------|----------|------|--------|
| 1 | "Silent Alarms" | "Your Fitbit will gently wake you with a vibration, without disturbing your partner." | Next |
| 2 | "Add Your First Alarm" | "Tap the button below to set your first silent alarm on your device." | Add Alarm |

---

## Add Child Profile (About the Kid)

### Overview
A form screen where a parent enters their child's personal information — first name, username, gender, birthday, and height — to create a new child account under a family profile.

### UI Elements

**Header/Toolbar**
- Back/up arrow on the left (navigates back to the previous step).
- Title: **"Add Child"** (from `add_child_title_activity`).

**Scrollable Form Body**

- **Label:** "First Name" (small hint-style label above the field)
- **Text field:** First name input — placeholder text: *"e.g. Alex"* (from `hint_child_first_name`); keyboard type is person name.

- **Label:** "Username" (small hint-style label)
- **Text field:** Username input — placeholder text hinting at format (from `hint_child_user_name`); standard text keyboard.
- **Helper text** below the username field: informational note about username rules (from `pick_username_info`), e.g., *"The username will be visible to friends and family. Use letters and numbers only."*

- **Horizontal divider** (thin gray line separating the basic info from the stats section)

- **Section header:** **"Personal Stats"** in teal/bold text (from `header_personal_stats`)

- **Label:** "Gender" (hint-style)
- **Gender selector field:** Read-only tap target — tapping opens a gender picker (Female / Male options).

- **Label:** "Birthday" (hint-style, from `child_birthday`)
- **Birthday field:** Read-only tap target — tapping opens a date picker.

- **Label:** "Height" (hint-style, from `child_height`)
- **Height picker field:** An inline length/height picker control (e.g., scroll wheels or segmented input for feet/inches or cm).

- **Disclaimer text** below the height picker (from `disclaimer_child_personal_stats`), e.g., *"This information is used to calculate your child's activity stats and calorie burn."*

**Bottom Button**
- **"Next"** button (full-width, pink/filled style). Disabled by default until required fields are filled in.

### Interactions
- **First Name field:** User types the child's first name. The "Next" button enables only when required fields are complete.
- **Username field:** User types desired username. If the username is invalid or taken, an inline error message appears below the field.
- **Gender field (tap):** Opens a bottom sheet or dialog with two options — "Female" and "Male". Selecting one closes the dialog and populates the field.
- **Birthday field (tap):** Opens a date picker dialog. The selectable range is restricted (must be a child-appropriate age). Selected date populates the field.
- **Height picker:** User scrolls/selects height using an inline picker (e.g., 4 ft 2 in).
- **"Next" button (tap):** Validates the form and navigates to the next step in child account creation (e.g., photo/avatar selection or confirmation).

### Sample Data
- First Name: *Sofia*
- Username: *sofia_runs2024*
- Helper text: *"Your child's username will be visible to friends and family members."*
- Gender: *Female*
- Birthday: *March 14, 2015*
- Height: *4 ft 6 in*

---

## Connected Devices / Account Access

### Overview
A screen that lists all devices currently signed in to the user's Fitbit account, allowing them to view details or revoke access for individual devices.

### UI Elements

**Header/Toolbar**
- Back arrow on the left (navigates up/back).
- No title displayed in the toolbar itself (title may be shown as a list header).

**Loading State (shown while data is fetching)**
- A centered circular **progress spinner**.
- Text below the spinner: **"Retrieving device list…"** (from `retrieving_device_list`).
- The device list is hidden during this state.

**Loaded State — Device List**
- Pull-to-refresh gesture supported on the list.
- Each list item (device card) shows:
  - **Device name** (e.g., "Fitbit Sense 2 – Sofia's Phone")
  - **Device type or last-seen info** (e.g., "iPhone 14 · Last active: Today")
  - A **chevron/arrow** indicating it is tappable for details.

**Empty State**
- If no devices are listed after loading, the list area shows an empty message (exact copy not specified; likely "No devices found").

### Interactions
- **Pull down on the list:** Refreshes the device list from the server.
- **Tapping a device row:** Navigates to a Device Detail screen where the user can view more information about that device and revoke its access.
- **Back arrow:** Returns the user to the Account Management / Settings screen.

### Sample Data
- *Fitbit Sense 2 · Synced 2 hours ago*
- *Pixel 7 · Last active: Yesterday*
- *iPad Air · Last active: Dec 3, 2024*

---

## Alarm Setup (Help — Step 1)

### Overview
The first of two instructional screens explaining how Fitbit silent alarms work, with an illustration and a "Next" button to advance.

### UI Elements

**Header/Toolbar**
- Toolbar at the top (may include a back arrow or title depending on context; title is empty in this view).

**Body Content**
- **Descriptive text** centered on screen (from `label_alarm_description_1`), e.g.:
  *"Your Fitbit will buzz to wake you up silently, so you won't disturb others."*
- **Illustration image** centered in the middle of the screen (device/tracker image showing vibration or alarm concept).

**Bottom Button**
- **"Next"** button (full-width, pink/filled style, white text, from `label_next`).
- Positioned near the bottom of the screen with margin.

### Interactions
- **"Next" button (tap):** Navigates to the second alarm help screen (Step 2).
- **Back arrow (if shown):** Returns to the previous screen.

### Sample Data
- Body text: *"Your Fitbit buzzes to silently wake you up—so you won't disturb your partner or roommates."*

---

## Alarm Setup (Help — Step 2)

### Overview
The second instructional screen in the alarm onboarding flow, prompting the user to add their first alarm after viewing the how-it-works explanation.

### UI Elements

**Header/Toolbar**
- Toolbar at the top (consistent with Step 1).

**Body Content**
- **Descriptive text** centered on screen (from `label_alarm_description_2`), e.g.:
  *"Set the time and days for your alarm, and your Fitbit will do the rest."*
- **Illustration image** centered (showing a device alarm UI or clock).

**Bottom Button**
- **"Add Alarm"** button (full-width, pink/filled style, from `label_add_alarm`).
- Positioned at the bottom of the screen with margin.

### Interactions
- **"Add Alarm" button (tap):** Closes the help flow and navigates to the alarm creation/editing screen where the user sets the time, repeat days, and label.
- **Back arrow (if shown):** Returns to Step 1 of alarm help.

### Sample Data
- Body text: *"Choose a wake time and which days to repeat your alarm. Your tracker will buzz silently at the right time."*

---

## Wellness / Account Section

### Overview
A settings section screen that presents a grouped list of wellness-related account settings options for the user to configure.

### UI Elements

**Header/Toolbar**
- Back arrow on the left.
- Title: **"Wellness"** (from `activity_wellness`).

**Settings List**
- A scrollable list using a linear layout manager.
- Each row is a tappable item with a label and optional right-side value or chevron.
- Items are grouped by category (separator lines or spacing between groups).

Example items (inferred from app context):
- "Sleep" — navigates to sleep settings
- "Activity Goals" — navigates to activity goal settings
- "Reminders" — configure move/hydration reminders
- "Heart Rate" — heart rate zone settings
- "Privacy" — data privacy settings

**Snackbar Area**
- The screen uses a CoordinatorLayout that supports showing Snackbar notifications (e.g., "Settings saved" confirmation).

### Interactions
- **Tapping any row:** Navigates to the corresponding sub-settings or feature screen.
- **Back arrow:** Returns to the main Settings or Account screen.
- **Snackbar:** Appears briefly after a setting is changed to confirm the update.

### Sample Data
| Row | Sub-label |
|-----|-----------|
| Sleep | Goal: 8 hours |
| Activity Goals | Steps: 10,000/day |
| Reminders to Move | On |
| Heart Rate Zones | Custom zone set |

---

## Achievements

### Overview
A tabbed screen displaying the user's earned badges and achievements, organized into categories such as "Awarded" and "Available."

### UI Elements

**Header/Toolbar**
- Back arrow (or hamburger menu) on the left.
- Title reflects the current screen context (e.g., "Achievements" or "Badges").

**Tab Bar** (below toolbar)
- Two or more tabs, e.g.:
  - **"Earned"** — badges the user has already unlocked
  - **"Available"** — badges the user can still earn
- The active tab is underlined or highlighted.

**Paged Content Area**
- Each tab shows a scrollable grid or list of achievement/badge cards.
- Each badge card shows:
  - **Badge icon/image** (circular trophy or activity icon)
  - **Badge name** (e.g., "Penguin March", "Boat Race", "Daily Showoff")
  - **Badge description or metric** (e.g., "Walk 70 lifetime miles")
  - **Date earned** (for earned badges; shown as "Earned Dec 5, 2024")
  - For unearned badges: **progress** (e.g., "52 of 70 miles")

### Interactions
- **Tapping a tab:** Switches to that tab's content (swipe or tap).
- **Swiping left/right:** Switches between tabs.
- **Tapping a badge card:** Opens a detail sheet or dialog showing full badge info and share options.

### Sample Data
**Earned Badges:**
- 🏆 *Boat Race* — Walk 15 lifetime miles · Earned Jan 12, 2024
- 🏆 *Penguin March* — Walk 70 lifetime miles · Earned Mar 4, 2024
- 🏆 *Happy Hill* — Climb 100 lifetime floors · Earned Apr 18, 2024

**Available Badges:**
- 🎯 *Monarch Migration* — Walk 265 lifetime miles · 142/265 miles
- 🎯 *Africa* — Walk 4,970 lifetime miles · 3,200/4,970 miles
<!-- source-hash:84baf5254892 -->

---

# Exercise & Activity — Screen Specifications

---

## Exercise List (Auto-Track Activities Settings)

### Overview
The user views and configures which activity types Fitbit will automatically detect and track, along with related exercise settings like stride length and swim settings.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Title: "Exercise" (from `exercise` string)

**Stride Length Row** (always visible)
- Tappable list row labeled "Stride length" (from `label_stride_length`)
- Navigates to a stride length configuration screen

**Swim Settings Row** (visible only when a swim-capable device is paired)
- Tappable list row labeled "Swim settings" (from `label_swim_settings`)
- Navigates to swim-specific configuration

**Auto-Track Activity List**
- Scrollable list of recognized exercise/activity types
- Each row shows:
  - Activity name (e.g., "Running", "Walking", "Biking", "Swimming", "Elliptical", "Aerobic Workout")
  - A toggle or selection control to enable/disable auto-recognition for that activity
- Section headers may group activity types (sticky headers disabled in the list)

**Settings Sections** (based on string keys from app strings)
- "Auto-track activities" toggle/description (`activity_settings_auto_track_activities`)
- "Feature settings" section (`activity_settings_feature_settings`)
- "Goals" section (`activity_settings_goals`)
- "Manage notifications" row (`activity_settings_manage_notifications`) with subtext: "Auto Recognised Exercises, Exercise Goal Milestones, Step Goal Milestones"
- "Personalized workouts" row (`activity_settings_personalization`) — subtext varies by device: "Running", "Fitness", or "Running and fitness"
- "Premium scores and assessments" row (`activity_settings_premium_gaia_consents`)
- "Data and privacy" row (`activity_settings_data_and_privacy`)

**Activity Count Indicator**
- Text showing how many activity types are configured, e.g., "5 activity types" (from `activity_settings_activities` with placeholder `{activitiesCount}`)

### Interactions
- Tapping **Stride length** → opens the Stride Length detail/edit screen
- Tapping **Swim settings** → opens Swim Settings screen
- Tapping any **activity type row** → opens configuration for that individual activity (enable/disable auto-track, configure recognition sensitivity, etc.)
- Tapping **Manage notifications** → opens notification preferences for exercise events
- Tapping **Personalized workouts** → opens personalization settings (running/fitness coaching features)
- Tapping **Premium scores and assessments** → opens consent/configuration for premium health metrics
- Tapping **Data and privacy** → opens data & privacy settings scoped to exercise
- Toggling **Auto-track activities** switches on/off the global automatic exercise detection feature; when toggled off, the activity list rows become inactive

### Sample Data
- Stride Length: "2.5 ft (walking) / 4.2 ft (running)"
- Activity list items: Running · Walking · Biking · Elliptical · Sports · Aerobic Workout · Hiking · Martial Arts · Yoga / Pilates · Swimming · Circuit Training
- Activity count badge: "11 activity types"

---

## Activity Goals

### Overview
The user views and edits their daily and weekly activity goals, including steps, Active Zone Minutes, active minutes, calories, distance, and floors.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Activity Goals" (from `activity_goals`)

**Goal Cards / Rows** — each row shows:
- Goal name (e.g., "Active Zone Minutes", "Steps", "Active Minutes", "Calories", "Distance", "Floors")
- Current goal value (e.g., "150 Zone Minutes/day", "10,000 steps/day")
- Tapping opens an edit dialog or picker for that goal

**Active Zone Minutes Row**
- Label: "Active Zone Minutes" (from `active_zone_minutes_goal_label`)
- Current value: e.g., "150"
- Unit: "Zone Minutes per day" (from `accessible_measure_label_active_zone_minutes`)

**Active Minutes Row**
- Label: "Active Minutes" (from `active_minutes_goal_label`)
- Current value: e.g., "30"
- Unit: "minutes"
- Info text beneath: "The American Heart Association (AHA) recommends getting 150 minutes of moderate activity or 75 minutes of vigorous activity a week. Getting 30 active minutes a day at least 5 days a week will help you reach this target." (from `activity_minutes_recommendation`)

**Steps Row**
- Label: "Steps"
- Current value: e.g., "10,000"

**Calories Row**
- Label: "Active calories burned" (from `active_calories_burned_label`)
- Current value: e.g., "500 kcal"

**Distance Row**
- Label: "Distance"
- Current value: e.g., "5 miles/day"

**Floors Row**
- Label: "Floors"
- Current value: e.g., "10 floors/day"

### Interactions
- Tapping any goal row → opens an inline number picker or dialog with:
  - Current goal value pre-populated
  - Increment/decrement controls or direct numeric input
  - "Save" / "Done" button to confirm
  - Validation: e.g., for Active Minutes, if value exceeds 2,880, error message shown: "Value must be less than or equal to 2880" (from `activity_minutes_warning_value_too_high`)
- After saving, the row updates to show the new goal value immediately

### Sample Data
- Active Zone Minutes Goal: 150
- Active Minutes Goal: 30
- Steps Goal: 10,000
- Calories Goal: 500
- Distance Goal: 5.0 mi
- Floors Goal: 10

---

## Exercise Log / Activity History List

### Overview
The user browses their past exercise and activity sessions, seeing a chronological list of logged workouts with key stats for each.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Activities" or current date range

**Date Navigation**
- Left/right arrows to move between weeks or months
- Current period label (e.g., "This Week", "Jun 10 – Jun 16")

**Activity Sessions List** — each card/row shows:
- Activity type icon (e.g., running shoe, bicycle)
- Activity name (e.g., "Run", "Walk", "Bike Ride")
- Date and time (e.g., "Today, 7:14 AM")
- Duration (e.g., "42 min")
- Key metric (distance, calories, steps — depends on activity type)
  - Distance: e.g., "3.2 mi"
  - Calories: e.g., "320 cal"
- Heart rate zone summary if available (e.g., peak/cardio/fat burn minutes)
- Active Zone Minutes earned (e.g., "38 Zone Minutes")

**Empty State** (no logged activities)
- Illustration or icon
- Message encouraging the user to start tracking

**Log Activity Button / Floating Action Button**
- Label: "+" or similar
- Allows manually logging a new exercise

### Interactions
- Tapping any session card → opens the **Exercise Detail** screen for that session
- Tapping the **Log Activity** button → opens the exercise logging/selection flow
- Swiping left on a session → reveals a "Delete" option
- Pulling down on the list → refreshes data from server

### Sample Data
- "Run · Today, 6:32 AM · 28 min · 2.8 mi · 275 cal · 24 Zone Minutes"
- "Walk · Yesterday, 12:05 PM · 45 min · 2.1 mi · 180 cal"
- "Bike Ride · Jun 12, 7:00 PM · 1 hr 10 min · 14.3 mi · 490 cal · 52 Zone Minutes"

---

## Exercise Detail

### Overview
The user views the full breakdown of a single exercise or activity session, including duration, distance, heart rate, zones, map route, and lap splits.

### UI Elements

**Header/Toolbar**
- Back arrow
- Activity name as title (e.g., "Run")
- Overflow menu (⋮) with options: "Edit", "Delete"

**Session Summary Card**
- Activity type name and icon
- Date & time: e.g., "Wednesday, June 12 · 6:32 AM"
- Total duration: e.g., "28 min 14 sec"
- Total distance: e.g., "2.8 mi" (or km depending on unit preference)
- Calories burned: e.g., "275 cal"
- Average pace: e.g., "10:04 /mi"
- Steps (if applicable): e.g., "3,240"
- Elevation gain (if applicable): e.g., "+120 ft"

**Active Zone Minutes Section**
- Total AZM earned: e.g., "24 Zone Minutes"
- Breakdown bar showing minutes in each zone:
  - Fat Burn (light teal)
  - Cardio (orange)
  - Peak (red)
- Time in each zone: e.g., "Fat Burn: 10 min · Cardio: 12 min · Peak: 2 min"

**Heart Rate Graph**
- Line chart of heart rate over time (BPM on Y-axis, time on X-axis)
- Colored zone bands overlaid (fat burn / cardio / peak)
- Average HR: e.g., "152 bpm"
- Max HR: e.g., "178 bpm"

**Map / Route** (if GPS was enabled)
- Map view showing the route traced
- Start point (green dot), end point (checkered flag or red dot)
- Tappable to expand to full-screen map

**Pace / Splits Section**
- List of per-mile (or per-km) splits:
  - Split number, distance label, pace for that split
  - e.g., "Mile 1 — 9:52 /mi", "Mile 2 — 10:18 /mi"

**Cadence / Other Metrics** (device-dependent)
- Average cadence: e.g., "168 spm"
- VO2 max / Cardio Fitness Score if available

### Interactions
- Tapping **Edit** (overflow menu) → opens an edit form allowing the user to change activity type, start time, duration, or notes
- Tapping **Delete** (overflow menu) → shows a confirmation dialog "Delete this activity?" with "Delete" (destructive) and "Cancel" buttons; on confirm, removes the session and returns to the list
- Tapping **map thumbnail** → expands the route map to full screen with zoom/pan controls
- Tapping a **heart rate zone section** → opens the "About heart rate zones" info sheet

### Sample Data
- Activity: Run
- Date: Wed, Jun 12 · 6:32 AM
- Duration: 28 min 14 sec
- Distance: 2.84 mi
- Calories: 275
- Avg Pace: 9:58 /mi
- Steps: 3,412
- Avg HR: 155 bpm · Max HR: 181 bpm
- Zone Minutes: Fat Burn 8 min, Cardio 14 min, Peak 4 min = 26 AZM
- Splits: Mile 1: 9:45, Mile 2: 10:02, 0.84 mi: 8:28

---

## Log an Exercise (Manual Exercise Entry)

### Overview
The user manually logs a past exercise session by selecting an activity type and entering duration, distance, and other relevant metrics.

### UI Elements

**Header/Toolbar**
- Close (✕) or Back arrow
- Title: "Log Exercise" or "Log Activity"
- "Save" button (top right, enabled only when required fields are filled)

**Activity Type Selector**
- Large tappable field showing currently selected activity (e.g., "Run")
- Tapping opens a searchable activity picker list

**Date & Time Pickers**
- Row: "Start time" — shows current time by default (e.g., "Today, 2:30 PM"), tapping opens a time/date picker
- Row: "Duration" — shows e.g., "30 min", tapping opens a duration picker (hours + minutes scroll wheels)

**Distance Field** (shown for distance-based activities)
- Label: "Distance"
- Input: numeric field with unit toggle (mi / km)
- e.g., "3.1 mi"

**Calories Field**
- Label: "Calories"
- Numeric input, auto-estimated based on activity + duration or manually overridden

**Notes / Description Field** (optional)
- Multi-line text input
- Placeholder: "Add a note…"

**Recent / Frequent Activities** (shown before activity is chosen)
- Section header: "Recent" or "Frequent"
- List of recently logged activity types with icons for quick re-selection

### Interactions
- Tapping **Activity Type** field → opens a full-screen activity search/picker:
  - Search bar at top
  - Categorized list: "Recent", "All Activities" (alphabetical)
  - Selecting an activity returns to the log form with that activity pre-filled
- Tapping **Start time** → opens a date-time picker dialog
- Tapping **Duration** → opens a scroll-picker for hours and minutes
- Tapping **Distance** unit toggle (mi/km) → switches units; value converts automatically
- Tapping **Save** → submits the exercise log via the API, shows a success confirmation, and returns to the exercise list
- Tapping **Close/Back** → prompts "Discard changes?" if any field was modified

### Sample Data
- Activity: Yoga / Pilates
- Start time: Today, 7:00 AM
- Duration: 45 min
- Calories: 150 (estimated)
- Note: "Morning flow session"

---

## Active Zone Minutes Overview

### Overview
The user sees their Active Zone Minutes progress for today and over time, with explanations of what the metric means and tips to improve it.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Active Zone Minutes" (from `active_zone_minutes`)

**Today's Progress Section**
- Large circular or ring progress indicator showing today's AZM vs. goal
- Center text: current AZM (e.g., "87") over goal (e.g., "/ 150")
- Colored segments per zone (fat burn / cardio / peak)
- Below ring: breakdown of minutes in each zone today

**Weekly Bar Chart**
- 7-day bar chart (Mon–Sun)
- Each bar colored by zone composition
- Goal line marked across all bars
- Tapping a bar → shows that day's breakdown tooltip

**Zone Breakdown Legend**
- Three colored chips/pills:
  - "Moderate" (fat burn zone) — yellow/orange, 1 point/min
  - "Vigorous" (cardio/peak zone) — red/orange, 2 points/min
- Informational text: "For each minute of activity, you'll earn: [1 Zone Minute] in the moderate zone · [2 Zone Minutes] in the vigorous or peak zones" (from `about_heart_rate_zones_answer_tips_2` and bullets)

**"About Active Zone Minutes" Link / Info Sheet Trigger**
- Tappable row or button: "Learn more about Active Zone Minutes"
- Opens a bottom sheet with educational content

**Bottom Sheet: About Active Zone Minutes**
- Title: "About heart rate zones" (from `about_heart_rate_zones_sheet_title`)
- Sections with expand/collapse:
  - "What heart rate zones mean" (from `about_heart_rate_zones_question_understanding`)
    - Body: zone descriptions for Peak, Vigorous, and Moderate (from `about_heart_rate_zones_answer_understanding_1_bullet_1/2/3`)
  - "Tips to spend time in heart rate zones" (from `about_heart_rate_zones_question_tips`)
    - Body: tips text (from `about_heart_rate_zones_answer_tips_1`)
  - "How Fitbit calculates heart rate zones" (from `about_heart_rate_zones_question_calculation`)
    - Body: calculation explanation (from `about_heart_rate_zones_answer_calculation_1/2`)
  - "Learn more" link → opens `https://support.google.com/fitbit/answer/14237938?hl=en#zippy=%2Cwhat-are-heart-rate-zones`

**Goal Edit Row**
- Label: "Active Zone Minutes Goal"
- Current value: e.g., "150 / day"
- Tapping → opens goal edit screen

### Interactions
- Tapping a **daily bar** in the chart → shows a tooltip with that day's AZM breakdown
- Tapping **Goal row** → opens the Active Zone Minutes goal editor
- Tapping **Learn more** → opens info bottom sheet
- Tapping an **info section header** in the bottom sheet → expands/collapses that section
- Tapping the **external learn more link** → opens the Fitbit Help page in an in-app browser

### Sample Data
- Today: 87 AZM of 150 goal (Fat Burn: 32 min, Cardio: 19 min, Peak: 5 min)
- Weekly: Mon 42, Tue 78, Wed 155 ✓, Thu 90, Fri 112 ✓, Sat 0, Sun 0 (today)

---

## Cardio Fitness Score (VO2 Max)

### Overview
The user views their estimated cardio fitness score (VO2 max estimate), its historical trend, their fitness range classification, and educational content about what it means.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Cardio Fitness Score" (inferred from `about_cardio_fitness_score_sheet_title`)

**Current Score Display**
- Large number: current VO2 max score (e.g., "42") or a range if insufficient data (e.g., "37–41")
- Classification label: e.g., "Good" (color-coded — green, yellow, orange depending on range)
- Subtext: "For your age and sex" or similar demographic context
- Last updated: e.g., "Updated Jun 12"

**Score Range Chart**
- Horizontal segmented bar showing all fitness categories (Poor / Fair / Good / Very Good / Excellent)
- User's score pinned on the bar with an arrow/indicator

**Trend Graph**
- Line chart showing score over the past 30 days or 6 months
- Date range selector: "1M" / "3M" / "6M" / "1Y"
- Y-axis: VO2 max values; X-axis: dates

**How It's Calculated Section**
- Expandable row: "How Fitbit calculates this score" (from `about_cardio_fitness_score_question_calculation`)
  - Body: "Fitbit estimates your cardio fitness score based on your:" (from `about_cardio_fitness_score_answer_calculation_1`)
  - Bullet list:
    - "Resting heart rate"
    - "Age"
    - "Sex"
    - "Height"
    - "Weight"
    - "Running efficiency"
  - Footnote: "If you don't track at least one run live with GPS for three months, Fitbit will estimate a range, instead of a score, based on your demographics and resting heart rate." (from `about_cardio_fitness_score_answer_calculation_2`)

**Understanding the Score Section**
- Expandable row: "What cardio fitness score means" (from `about_cardio_fitness_score_question_understanding`)
  - Body text from `about_cardio_fitness_score_answer_understanding_1` and `_2`

**Tips to Improve Section**
- Expandable row: "Tips to improve your score" (from `about_cardio_fitness_score_question_tips`)
  - Tips from `about_cardio_fitness_score_answer_tips_1`, `_2`, `_3`
  - "Learn more how to improve your score" link → `https://help.fitbit.com/articles/en_US/Help_article/2096.htm` (from `about_cardio_fitness_score_learn_more_tips_byline`)

### Interactions
- Tapping a **section header** → expands/collapses that educational section
- Selecting a **date range tab** (1M / 3M / 6M / 1Y) → updates the trend graph
- Tapping a **data point on the graph** → shows a tooltip with score and date
- Tapping the **learn more link** → opens Fitbit Help article in an in-app browser

### Sample Data
- Current Score: 42 — "Good"
- Age group comparison: "Good for ages 35–39"
- Range bar: Poor 20–31 / Fair 32–37 / Good 38–43 / Very Good 44–50 / Excellent 51+
- Trend: steady increase from 39 (Jan) to 42 (Jun)
<!-- source-hash:d22f0c81c375 -->

---

# Food & Nutrition — UI Screen Specifications

---

## Food Log History (Day List)

### Overview
The user sees a scrollable list of days on which they have food log entries, allowing them to navigate to a specific day's food details or add a new entry for today.

### UI Elements

**Header/Toolbar**
- Title: "Food" (or the section label from the main nav)
- Back/Up navigation arrow on the left

**Day List**
- A vertically scrollable list where each row represents a day with food logged
- Each row shows:
  - Date label (e.g., "Today", "Yesterday", or formatted date like "Nov 12, 2024")
  - Summary of calories logged for that day (e.g., "1,450 cal")
  - Meal entries preview or count (e.g., items logged)
  - A right-facing chevron indicating it's tappable

**Empty State**
- If no food has been logged, a message prompting the user to start logging food

**Floating Action Button or Add Button**
- A button labeled "+" or "Log Food" to add a new food entry for today

### Interactions
- **Tap a past day's row:** Navigates to the Food Logging Day Details screen for that date
- **Tap today's row:** If the entry is a quick-calorie entry, opens the Quick Calorie Add screen in edit mode; otherwise navigates to the food detail/search flow
- **Tap the Add/Log button:** Opens the food logging flow for today (Quick Calorie Add or food search)
- **Pull to refresh:** Refreshes the list to show the latest logged data
- **Swipe down on a log entry:** May reveal a delete option with a confirmation dialog titled something like "Delete food log?" with the food name and a confirm/cancel action

**Delete Dialog**
- Triggered when user taps a delete icon or swipes on a food log entry
- Shows the name of the food item
- Buttons: "Delete" (destructive, removes the log entry) and "Cancel"

### Sample Data
| Date | Calories | Entries |
|------|----------|---------|
| Today | 1,240 cal | 3 items |
| Yesterday | 2,015 cal | 5 items |
| Nov 10, 2024 | 1,785 cal | 4 items |

---

## Food Logging Day Details

### Overview
The user sees a detailed breakdown of all food and drink they logged on a specific past date, organized by meal type.

### UI Elements

**Header/Toolbar**
- Title showing the formatted date (e.g., "Nov 10, 2024")
- Back navigation arrow

**Nutrition Summary Card**
- Total calories consumed vs. calorie goal (e.g., "1,785 / 2,000 cal")
- Macronutrient breakdown (if available): Carbs, Fat, Protein shown as values and percentages
- A progress bar or ring showing calories consumed as a proportion of the goal

**Meal Sections**
Each section is labeled with a meal type:
- **Breakfast**
- **Lunch**
- **Dinner**
- **Snacks**
- **Anytime** (for entries not assigned a meal)

Within each section:
- Each food entry row shows:
  - Food name (e.g., "Greek Yogurt, Plain")
  - Brand name if applicable (e.g., "Chobani")
  - Serving size and unit (e.g., "1 cup (245g)")
  - Calorie count (e.g., "130 cal")
  - Edit/delete icon (pencil or kebab menu)
- Section subtotal: total calories for that meal (e.g., "Breakfast: 320 cal")
- An "+ Add food" link or button at the bottom of each meal section

**Water Intake Row** (if tracked separately)
- Shows water logged for the day (e.g., "48 fl oz")

### Interactions
- **Tap a food entry row:** Opens the food editing screen (Edit Food Log Entry) for that specific entry
- **Tap delete on a food entry:** Shows a confirmation dialog before removing
- **Tap "+ Add food" under a meal:** Navigates to the food search/logging screen with that meal type pre-selected
- **Back navigation:** Returns to the Food Log History screen

### Sample Data
**Date:** Nov 10, 2024

**Breakfast (420 cal)**
- Oatmeal, Instant, Maple & Brown Sugar — Quaker — 1 packet — 190 cal
- Banana, raw — 1 medium — 105 cal
- Black Coffee — 1 cup — 5 cal
- Orange Juice — Tropicana — 8 fl oz — 120 cal

**Lunch (635 cal)**
- Grilled Chicken Sandwich — 1 sandwich — 430 cal
- Side Salad — 1 serving — 120 cal
- Diet Coke — 12 fl oz — 0 cal
- Apple — 1 medium — 85 cal

**Dinner (730 cal)**
- Spaghetti with Meat Sauce — 1.5 cups — 480 cal
- Garlic Bread — 2 slices — 180 cal
- Caesar Salad — 1 serving — 70 cal

**Total:** 1,785 cal / 2,000 cal goal

---

## Quick Calorie Add

### Overview
A focused screen where the user quickly logs a number of calories without searching for a specific food, optionally assigned to a meal type.

### UI Elements

**Header/Toolbar**
- Title: "Add Calories" (when creating) or "Edit Calories" (when editing an existing entry)
- Back/close navigation

**Calorie Input Field**
- A large, centered numeric text input
- Label or hint text indicating the unit (e.g., "Calories" or the user's preferred energy unit such as "kJ")
- Keyboard auto-opens in numeric mode when the screen loads
- Displays the current value if editing an existing entry (e.g., "350")

**Meal Type Selector**
- A dropdown or segmented picker labeled "Meal"
- Options: Breakfast, Lunch, Dinner, Snacks, Anytime
- Pre-selects the appropriate meal type based on time of day or the existing entry's meal type

**Action Buttons**
- **"Log It"** button (primary, pink/coral): Saves the calorie entry and closes the screen
  - In edit mode, the label changes to **"Save"**
- **"Delete"** button (secondary, visible only in edit mode): Removes the log entry after confirmation

**Validation**
- If the user enters 0 or leaves the field empty: A toast or inline error message appears: "Energy must be greater than 0"
- If the user enters more than 6,000 calories: An error message appears such as "Value must be 6,000 calories or less" (unit adapts to user preference)

### Interactions
- **Type in the calorie field:** Updates the displayed value in real time; "Log It" button becomes enabled once a valid number ≥ 1 is entered
- **Change meal type:** Updates which meal the calories will be assigned to
- **Tap "Log It" / "Save":** Validates input, then saves the entry and returns to the previous screen
- **Tap "Delete" (edit mode):** Shows a confirmation dialog; on confirm, deletes the entry and returns to the list
- **Press Enter/Done on keyboard:** Triggers the same action as tapping "Log It" / "Save"
- **Back navigation:** Cancels without saving; returns to previous screen

### Sample Data
**Creating:**
- Field: "450"
- Meal: Lunch
- Button: "Log It"

**Editing:**
- Title: "Edit Calories"
- Field: "350"
- Meal: Breakfast
- Buttons: "Save" + "Delete"
<!-- source-hash:8d1f77798f99 -->

---

# Weight & Goals — UI Screen Specifications

---

## Weight History (Weight Landing Screen)

### Overview
The user sees a scrollable, paginated list of their past weight (and optionally body fat %) log entries, grouped by date, with options to add a new entry, view goals, or share their most recent weight.

### UI Elements

**Header / Toolbar**
- App toolbar with back-navigation arrow (up button)
- Title: (implied "Weight" or the screen's section heading, consistent with the app's pattern)
- Overflow/action menu with:
  - **Add** ("+") icon — logs a new weight entry
  - **Edit weight goals** button — navigates to the weight goals screen
  - **Share** icon — shares the most recent weight entry (visible only when at least one log entry exists and the user is not in child/impersonation mode)

**Weight Log List**
- A sticky-header list grouped by month/time period (e.g., "November 2024", "October 2024")
- Each list item shows:
  - Date (e.g., "Today", "Yesterday", or formatted full date like "November 14, 2024")
  - Weight value with unit (e.g., "172.4 lbs" or "78.2 kg")
  - Body fat % if logged (e.g., "18.5%")
  - Optional: BMI or scale indicator if the entry was from a Bluetooth scale
- Items are tappable (single tap) and long-pressable

**Header Fragment (above list)**
- Summary card or metric header showing current/latest weight and goal progress (a pinned header fragment embedded above the scrolling list)

**Empty / Loading State**
- A loading indicator (progress spinner) is shown while data is being fetched
- Once loaded, the list appears; if no entries exist, an appropriate empty state is shown

**Delete Confirmation Dialog**
- Triggered by long-pressing a list entry
- Title: "Delete item"
- Body: "Are you sure?"
- Buttons: **Delete** | **Cancel**

### Interactions

| Element | Action |
|---|---|
| Tap a list item | Opens Weight Log / Edit screen for that entry (edit mode if entry is editable/today's, read-only mode if historical and from a scale) |
| Long-press a list item | Shows "Delete item — Are you sure?" confirmation dialog |
| Tap "+" (Add) in toolbar | Opens Weight Log screen in create mode |
| Tap "Edit weight goals" | Navigates to Goals screen (weight goals section) |
| Tap Share in toolbar | Opens the share sheet for the most recent weight entry |
| Confirm delete in dialog | Deletes the weight (and/or body fat) log entry; list updates |
| Cancel delete | Dialog dismisses, no change |
| Scroll to bottom | Loads the next page of older entries (infinite scroll) |

### Sample Data
```
─── November 2024 ──────────────────
  Today          172.4 lbs     18.5%
  November 12    171.8 lbs
  November 10    173.0 lbs     18.8%

─── October 2024 ───────────────────
  October 28     174.2 lbs
  October 21     175.5 lbs     19.2%
```

---

## Log Weight (Create / Edit / View Weight Entry)

### Overview
The user logs a new weight measurement or reviews/edits an existing one, optionally entering body fat percentage, with options to save, delete, or share the entry.

### UI Elements

**Header / Toolbar**
- Back-navigation arrow (up button)
- Title: **"Log Weight"** (create mode) or **"Edit Weight"** (edit or read-only mode)
- Action menu items (contextual, shown/hidden based on mode):
  - **Save** (checkmark or "Save" label) — only visible in create/edit mode
  - **Delete** (trash icon, labeled "Delete record") — only visible in edit mode and when deletion is permitted
  - **Share** (share icon) — visible when a saved entry exists and the user is not a child account

**Date Field**
- Tappable text field displaying the date of the log entry
- Shows "Today", "Yesterday", "Tomorrow", or a full date like "November 14, 2024"
- Disabled (non-tappable) in read-only mode

**Weight Picker**
- A scrollable drum/wheel picker for selecting weight
- Reflects the user's preferred unit (lbs, kg, or stone)
- Disabled in read-only mode

**Body Fat Percentage Field**
- Label: (implied "Body fat %")
- Decimal input field with placeholder hint: **"--"**
- Accepts values between 5% and 75%
- Hidden for child accounts
- Disabled in read-only mode

**Privacy Help Text**
- Small informational text below the form explaining data privacy context (visible in create/edit mode)

**Bluetooth Scale Animation Area** *(appears when a Bluetooth scale is actively reading)*
- "Step on" graphic/image
- "Step on" instructional text
- Lottie animation showing a weight reading in progress
- The form inputs are disabled while the scale animation is active
- Once reading is complete, the form animates back into view with the detected weight pre-filled

**Validation Toasts / Error Messages**
- If weight is out of range: "Weight must be between [min][unit] and [max][unit]. You entered [value]."
- If body fat is out of range: "Body fat must be between 5% and 75%. You entered [value]."

**Delete Confirmation Dialog**
- Triggered from the Delete menu item
- Title: "Delete item"
- Body: "Are you sure?"
- Buttons: **Delete** | **Cancel**

### Interactions

| Element | Action |
|---|---|
| Tap date field | Opens a date picker calendar dialog |
| Select date in picker | Date field updates to the chosen date (formatted as "Today", "Yesterday", or full date) |
| Scroll weight picker | Updates the selected weight value |
| Type in body fat field | Validates on save |
| Tap Save | Validates inputs; if valid, saves entry and shows a success animation, then returns to Weight History; if invalid, shows an error toast |
| Tap Share (when entry is new/unsaved) | Saves the entry first, then opens the share sheet |
| Tap Share (when viewing a saved entry) | Opens the share sheet directly with that entry's data |
| Tap Delete | Shows delete confirmation dialog |
| Confirm delete | Deletes entry and returns to Weight History |
| Cancel delete | Dialog dismisses |
| Back navigation | Returns to Weight History; if the user came from Weight History after creating a new log, navigates accordingly |
| Weight unit changed | Picker re-renders in new unit; unit preference is saved when leaving the screen |

### Sample Data

**Create mode:**
- Date: "Today"
- Weight picker: scrolled to 172.4 lbs
- Body fat field: "18.5"

**Edit mode:**
- Title: "Edit Weight"
- Date: "November 10, 2024"
- Weight picker: 173.0 lbs
- Body fat field: "18.8"

**Read-only mode:**
- Title: "Edit Weight"
- All fields disabled/greyed out
- Save and Delete actions hidden; Share visible

---

## Weight Goals

### Overview
The user sets or updates their target weight (and optionally body fat %) goal, accessed from the Weight History screen's action menu.

### UI Elements
*Note: This screen is part of the broader Goals Activity; the weight-specific section is reached via "Edit weight goals" from the Weight History screen.*

**Header / Toolbar**
- Back-navigation arrow
- Title: reflects the goals section (e.g., "Goals")

**Weight Goal Card / Section**
- Label: "Weight"
- Current goal value displayed (e.g., "165 lbs")
- Input or picker to change the target weight
- Unit consistent with user's preference (lbs / kg / stone)

**Body Fat Goal Card / Section** *(if applicable)*
- Label: "Body Fat %"
- Target body fat percentage input

**Save / Confirm Button**
- Saves the updated goal values and returns to the previous screen

**Post-Goal-Set Celebration** *(conditional)*
- After setting a weight goal for the first time or updating it, a celebratory message may appear:
  - Title examples: "Goal get 'em!", "Pound it!", "You're on your way!", "You're ready to go!", "Boom! All set!"
  - Hint: "Remember! Weighing yourself regularly helps you stay on track and in control."

### Interactions

| Element | Action |
|---|---|
| Adjust weight goal value | Updates the target displayed |
| Tap Save / confirm | Saves goal to server (`POST 1/user/-/body/log/weight/goal.json`); returns to Weight History |
| Back button | Returns without saving (or after saving) |

### Sample Data
- Current weight: 172.4 lbs
- Weight goal: 165 lbs
- Body fat goal: 17%
- Celebration title: "You're on your way!"
- Celebration hint: "Remember! Weighing yourself regularly helps you stay focused on your goals. Go get 'em!"
<!-- source-hash:cb7508da0839 -->

---

# Sleep & Wellness Screen Specifications

---

## Sleep Settings

### Overview
The user configures all sleep-related preferences from a single scrollable screen, including sleep sensitivity, sleep goal, bedtime, wake-up time, bedtime reminders, and snore detection settings.

### UI Elements

**Header/Toolbar**
- Back arrow (navigates up)
- Title: "Sleep" (inferred from context; this is the main sleep settings screen)

**Settings List Items (tappable rows with heading + summary text)**

1. **Sleep Sensitivity**
   - Heading: e.g., "Sleep Sensitivity"
   - Summary: current sensitivity level (e.g., "Normal", "Sensitive")
   - Tapping opens a picker/dialog to change sensitivity

2. **Time Asleep Goal**
   - Heading: e.g., "Sleep Goal"
   - Summary: currently set goal duration (e.g., "8h 0min")
   - Tapping opens a time picker dialog

3. **Bedtime**
   - Heading: "Bedtime" (from string `sleep_goal` or similar)
   - Summary: current bedtime (e.g., "10:30 PM")
   - Tapping opens a time picker dialog

4. **Wake-Up Time**
   - Heading: "Wake-Up Time"
   - Summary: current wake-up time (e.g., "6:30 AM")
   - Tapping opens a time picker dialog

**Bedtime Reminder Toggle (Sliding Switch)**
- Heading label: "Bedtime Reminder" (toggle section header)
- Description text (below toggle): either "Get a reminder when it's time to wind down for bed." (without tracker) or a tracker-specific variant when a Fitbit device is paired
- Toggle switch: ON/OFF; when toggled ON, an animated panel slides down to reveal additional options; toggled OFF collapses the panel

**Bedtime Reminder Expanded Panel** (visible only when reminder is ON)
- **Reminder Time** — tappable row showing the configured reminder time (e.g., "9:45 PM"); tapping opens a time picker
- **Day Selector** — a horizontal row of 7 checkboxes labeled with abbreviated day names (S, M, T, W, T, F, S); user checks which days the reminder fires; start day of week matches user locale settings
- **Selected Days Summary** — a read-only text view below the day selector displaying the currently selected days in a condensed format (e.g., "Weekdays" or "Mon, Wed, Fri")

**Snore & Noise Detection Section**
- A fragment container embedded in the screen showing snore/noise detection settings (see "Snore & Noise Detection Settings" screen below for detail)

### Interactions
- **Tapping Sleep Sensitivity** → Opens a selection dialog/bottom sheet with sensitivity options (e.g., Normal, Sensitive, Highly Sensitive)
- **Tapping Sleep Goal** → Opens a time duration picker (hours and minutes); saves on confirmation
- **Tapping Bedtime** → Opens a clock-style or scroll time picker
- **Tapping Wake-Up Time** → Opens a clock-style or scroll time picker
- **Toggling Bedtime Reminder ON** → Animates (slides in from top) the reminder time and day-selector panel; if no valid time is set, shows an error dialog; if no days are selected, shows a warning dialog
- **Toggling Bedtime Reminder OFF** → Animates (slides out to bottom) the expanded panel
- **Tapping a day checkbox** → Toggles that day on/off; summary label updates immediately; if all days are unchecked, the last saved selection is restored
- **Tapping Reminder Time** → Opens a time picker for when the reminder fires
- **Back / Navigate Up** → Saves any changes and returns to the previous screen

### Sample Data
- Sleep Sensitivity: "Normal"
- Sleep Goal: "8h 0min"
- Bedtime: "10:30 PM"
- Wake-Up Time: "6:30 AM"
- Bedtime Reminder: ON
- Reminder Time: "9:45 PM"
- Selected Days: Mon, Tue, Wed, Thu, Fri (Weekdays)

---

## Sleep Sensitivity Picker (Dialog)

### Overview
A dialog that lets the user choose how sensitively Fitbit detects their sleep stages, presented when they tap "Sleep Sensitivity" on the Sleep Settings screen.

### UI Elements
- **Dialog title**: "Sleep Sensitivity" (or similar)
- **Radio-button list** with options such as:
  - "Normal"
  - "Sensitive"
  - "Highly Sensitive"
- Currently selected option is pre-checked
- **Cancel** button — dismisses without saving
- **OK / Save** button — applies the selection and dismisses

### Interactions
- Selecting a radio option highlights it
- Tapping **Cancel** → closes dialog, no change
- Tapping **OK / Save** → saves selection, updates the Sleep Sensitivity summary row, closes dialog

### Sample Data
- Currently selected: "Normal"

---

## Sleep Goal Time Picker (Dialog)

### Overview
A dialog allowing the user to set a target number of hours and minutes they want to sleep each night.

### UI Elements
- **Dialog title**: "Sleep Goal" or "Time Asleep Goal"
- **Duration picker** with two scroll columns:
  - Hours (0–23)
  - Minutes (0, 15, 30, 45 or similar increments)
- **Cancel** button
- **Save / OK** button

### Interactions
- Scrolling the hour or minute column adjusts the value
- Tapping **Cancel** → dismisses without saving
- Tapping **Save / OK** → saves the goal, updates the summary on the Sleep Settings row, dismisses the dialog

### Sample Data
- Hours: 8
- Minutes: 0 ("8 hours 0 minutes")

---

## Bedtime Time Picker (Dialog)

### Overview
A time picker dialog for setting the user's target bedtime.

### UI Elements
- **Dialog title**: "Bedtime"
- **Time picker**: clock face or scroll wheels for hour and minute; AM/PM selector (12-hour) or 24-hour format depending on locale
- **Cancel** button
- **OK** button

### Interactions
- User selects desired bedtime
- Tapping **Cancel** → dismisses, no change
- Tapping **OK** → saves bedtime, updates summary on Sleep Settings, dismisses dialog

### Sample Data
- 10:30 PM

---

## Wake-Up Time Picker (Dialog)

### Overview
A time picker dialog for setting the user's target wake-up time.

### UI Elements
- **Dialog title**: "Wake-Up Time"
- **Time picker**: clock face or scroll wheels for hour and minute; AM/PM or 24-hour
- **Cancel** button
- **OK** button

### Interactions
- Same behavior as Bedtime Time Picker
- Tapping **OK** → saves wake-up time, updates the Wake-Up Time summary row

### Sample Data
- 6:30 AM

---

## Bedtime Reminder Time Picker (Dialog)

### Overview
A time picker dialog for setting when the bedtime reminder notification fires each selected day.

### UI Elements
- **Dialog title**: "Bedtime Reminder"
- **Time picker**: hour and minute scroll wheels or clock face; AM/PM or 24-hour
- **Cancel** button
- **OK** button

### Interactions
- User selects when they want to receive the nightly wind-down reminder
- Tapping **Cancel** → dismisses, no change
- Tapping **OK** → saves time, updates the "Reminder Time" row inside the expanded Bedtime Reminder panel

### Sample Data
- 9:45 PM

---

## Bedtime Reminder — No Days Selected Warning (Dialog)

### Overview
A warning dialog shown when the user attempts to enable the bedtime reminder but has no days of the week selected, or when no valid days remain after de-selecting.

### UI Elements
- **Dialog message**: Informs the user that at least one day must be selected for the reminder to work
- **OK / Got It** button — dismisses and either reverts to the last saved day selection or keeps the reminder off

### Interactions
- Tapping **OK / Got It** → closes dialog; the bedtime reminder toggle reverts to OFF if no days are set, or the previously saved days are restored

### Sample Data
- Message: "Please select at least one day for your bedtime reminder."

---

## Snore & Noise Detection Settings

### Overview
An embedded section within Sleep Settings (and potentially accessible standalone) where the user views information about and configures their snore and ambient noise recording preferences.

### UI Elements
*(This section is rendered as an embedded fragment within the Sleep Settings screen)*

- **Section header / title**: "Snore & Noise Report" (from `about_soundscape`)
- **Description text**: "During sleep, your Fitbit watch will analyze the noises in your room, which may include snoring. Both snoring and ambient noise can disturb your sleep and impact how restorative your rest is." (from `about_soundscape_description`)
- **Auto-Recording toggle** (sliding switch):
  - Heading: e.g., "Auto-Recording"
  - Description: explains that the device will automatically record snore/noise data during sleep
  - Toggle ON/OFF

### Interactions
- **Toggling Auto-Recording ON** → enables nightly snore and noise analysis; may prompt the user to consent to audio recording if not yet done
- **Toggling Auto-Recording OFF** → disables the feature; no audio analysis is performed

### Sample Data
- Auto-Recording: ON
<!-- source-hash:109f74a3d53d -->

---

# Glucose Tracking — Screen Specifications

---

## Glucose Dashboard (Landing Screen)

### Overview
The main hub for glucose tracking where users see their current glucose readings, weekly/daily trends, and quick access to logging and historical data.

### UI Elements

**Header / Toolbar**
- Title: *(no explicit title string — displays the app bar with glucose branding)*
- Overflow menu (three-dot icon) with two items:
  - "Settings" — navigates to Glucose Settings
  - An "About" / intro option — navigates to the Glucose Intro screen
- Up/Back navigation arrow

**Main Content — Scrollable List of Cards**

The screen is built as a vertically scrolling RecyclerView of cards/sections. Based on the code, the following sections appear:

1. **Today's Glucose Summary Card**
   - Label: "Today" (dynamically set from the current date string)
   - Displays the user's most recent glucose reading with value and unit (e.g., "102 mg/dL" or "5.7 mmol/L")
   - Visual indicator showing whether the reading is in range, above, or below target
   - May display an intraday sparkline or mini-chart of readings throughout the day

2. **Weekly Trend / Chart Preview Card**
   - A condensed bar or line chart showing glucose readings for the current week
   - Tappable — navigates to the full History Chart screen (either "column" chart or "annotation" chart view)
   - Week is displayed using locale-aware first-day-of-week logic (e.g., Sunday–Saturday or Monday–Sunday)

3. **Log Reading Button / FAB**
   - A prominent button (likely a floating action button or inline call-to-action) labeled along the lines of "Log glucose" or represented by a "+" icon
   - Tapping it opens the day detail / logging screen for today's date

4. **Connected Services / Integration Card** *(conditionally shown)*
   - Teaser row for connecting third-party glucose services (e.g., CGM devices)
   - Tapping it deep-links to the Glucose Services List screen

5. **Wellness Report Prompt Card** *(conditionally shown)*
   - Promotion for generating a wellness report
   - Tapping it deep-links to the Wellness Reports section

6. **Glucose Settings Prompt Card** *(conditionally shown)*
   - Shortcut to configure glucose goals or units
   - Tapping it navigates to Glucose Settings

7. **Get Started / Intro Prompt Card** *(conditionally shown when not yet onboarded)*
   - Introductory call-to-action
   - Tapping it navigates to Glucose Intro

**Empty / Loading State**
- While data is loading, the list is empty or shows skeleton placeholders
- If the network is unavailable, an error or retry message may be shown inline

### Interactions
- Tapping the weekly chart card → navigates to **Glucose History Chart** (passing chart type: "column" for readings chart)
- Tapping the log button → navigates to **Glucose Day Detail** for today's date
- Tapping the settings icon (overflow) → navigates to **Glucose Settings**
- Tapping the intro overflow item → navigates to **Glucose Intro**
- Tapping the services card → navigates to **Glucose Services List**
- Tapping the wellness card → navigates to Wellness Reports
- Pull-to-refresh (or network reconnect) → refreshes all glucose data
- Each time the screen resumes, the date is checked; if it has changed since the last visit (e.g., midnight rollover), all data is refreshed automatically

### Sample Data
```
Today — Thursday, June 12
Last reading: 98 mg/dL  ✓ In range  •  8:42 AM
[Sparkline showing readings from 6 AM to current time]

This Week
[Bar chart: Mon 104, Tue 97, Wed 110, Thu 98]

[+ Log glucose]

Connected services: Dexcom G7
Wellness Reports — Generate your monthly report
```

---

## Glucose History Chart

### Overview
A detailed chart screen showing historical glucose readings over time, allowing the user to browse past data by week or another period, with two chart-type modes: by reading value or by annotation/meal tag.

### UI Elements

**Header / Toolbar**
- Title changes based on chart type:
  - **Readings view**: uses the string for `glucose_history_column_label` (e.g., "Glucose readings")
  - **Annotations view**: uses the string for `glucose_history_annotation_label` (e.g., "Annotations")
- Back arrow to return to the Dashboard

**Chart Area**
- A bar or column chart rendered at the top of the screen
- X-axis: days of a selected week (e.g., Mon–Sun)
- Y-axis: glucose values in user's preferred unit (mg/dL or mmol/L)
- Each bar/column is tappable to reveal details for that day
- Color coding indicates readings above, in, or below target range

**Weekly Navigation Controls**
- A "Previous week" / "Next week" button pair (or left/right chevrons)
- A date range label in the center showing the currently displayed week (e.g., "Jun 9 – Jun 15")
- The "Next week" button is disabled when viewing the current week

**List Section Below Chart**
- A scrollable list of reading entries for the selected week
- Each row shows:
  - Day label (e.g., "Monday, Jun 9")
  - Number of readings that day (e.g., "4 readings")
  - Average glucose value (e.g., "Avg: 103 mg/dL")
  - Tapping a day row navigates to the **Glucose Day Detail** screen for that date

**Empty State**
- If no readings exist for the selected week: a message like "No glucose data for this week"

### Interactions
- Tapping a bar in the chart → highlights that day and scrolls the list to that day's entry
- Tapping a day row in the list → navigates to **Glucose Day Detail** for that date
- Tapping the week navigation chevrons → loads the previous or next week's data
- Back arrow → returns to the Glucose Dashboard

### Sample Data
```
[Toolbar: "Glucose readings"  ←]

Week of Jun 9 – Jun 15
[Bar chart: Mon 95, Tue 108, Wed 118, Thu 99, Fri 104, Sat —, Sun 101]

─────────────────────────────
Monday, Jun 9            4 readings   Avg 95 mg/dL  >
Tuesday, Jun 10          3 readings   Avg 108 mg/dL >
Wednesday, Jun 11        5 readings   Avg 118 mg/dL ↑ >
Thursday, Jun 12         2 readings   Avg 99 mg/dL  >
Friday, Jun 13           3 readings   Avg 104 mg/dL >
Saturday, Jun 14         No data
Sunday, Jun 15           1 reading    101 mg/dL     >
```

---

## Glucose Intro / About Glucose

### Overview
An educational onboarding-style screen that introduces users to glucose tracking in Fitbit, explaining what it is, how it works, and how to get started.

### UI Elements

**Header / Toolbar**
- Close (X) button in the top-left corner — dismisses the screen and returns to the Dashboard
- No title text (clean header, standard app bar height)

**Scrollable Content — Card-based List**

The content is rendered as a RecyclerView of educational cards. Each card contains:

1. **Hero / Illustration Card**
   - A graphic illustration related to glucose monitoring
   - Bold headline, e.g., "Understand your glucose"
   - Short descriptive subtext, e.g., "Track how food, activity, and sleep affect your blood sugar levels."

2. **How It Works Card**
   - Icon + heading: e.g., "Log your readings"
   - Body text explaining manual logging or connected device syncing

3. **Connect a Device Card** *(if supported)*
   - Icon + heading: e.g., "Connect a glucose monitor"
   - Body text: e.g., "Pair a CGM or glucometer to automatically sync your readings."
   - Tapping may deep-link to the services list

4. **Get Started / Set Up Goals Card**
   - A call-to-action button or tappable card: e.g., "Set up glucose tracking"
   - Tapping this navigates to Glucose Settings or begins the onboarding flow

### Interactions
- Tapping the close (X) button → returns to the previous screen (Dashboard or wherever the user came from)
- Tapping a card or inline link for connecting a device → navigates to **Glucose Services List**
- Tapping the "Set up" call-to-action → navigates to **Glucose Settings**
- Scrolling down reveals all educational cards sequentially

### Sample Data
```
[×]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🩸  Understand your glucose

Track how food, activity, and 
sleep affect your blood sugar.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📋  Log your readings
Enter your glucose values 
manually after testing.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔗  Connect a monitor
Automatically sync readings 
from a compatible CGM device.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[Set up glucose tracking]
```

---

## Glucose Settings

### Overview
A settings screen where users configure their glucose tracking preferences, including target ranges, measurement units, reminders, and connected third-party services.

### UI Elements

**Header / Toolbar**
- Back arrow to return to the previous screen
- Title: *(screen title from app bar, likely "Glucose settings" or similar)*

**Settings List — Grouped Sections**

The list is built using a concatenation adapter with multiple nested sections:

---

**Section: Wellness / Goals**

1. **Glucose goal / target range row**
   - Label: displays user's configured target range (e.g., "Target range: 70–180 mg/dL")
   - Tapping opens a range picker dialog or navigates to a goal-editing flow
   - Shows lower bound and upper bound values

2. **Units row**
   - Label: "Units" with current selection (e.g., "mg/dL" or "mmol/L")
   - Tapping opens a unit selection picker

---

**Section: Reminders**

*This section is conditionally shown and uses a saved state to track whether reminders are enabled.*

- **Section header**: "Reminders" (or similar label)
- **Reminder list**: Each configured reminder appears as a row:
  - Time label (e.g., "8:00 AM")
  - Days active (e.g., "Every day" or "Mon, Wed, Fri")
  - Toggle switch to enable/disable
  - Tapping the row navigates to the **Edit Reminder** screen
- **"Add reminder" button**:
  - A row at the bottom of the reminders list with a "+" icon and label "Add reminder"
  - Tapping opens the **Edit Reminder** screen with a blank/new reminder

---

**Section: Connected Services** *(conditionally shown based on a feature flag)*

- **Row**: "Connected glucose services"
  - Subtitle: e.g., "Dexcom, LibreLink" or "No services connected"
  - Tapping navigates to **Glucose Services List**

---

**Dialogs / Bottom Sheets**

- **Target range picker dialog**: triggered when tapping the goal row. Contains:
  - Min glucose value input (e.g., 70 mg/dL)
  - Max glucose value input (e.g., 180 mg/dL)
  - "Save" / "Cancel" buttons

- **Delete reminder confirmation dialog**: triggered when swiping or long-pressing a reminder row. Contains:
  - Message: "Delete this reminder?"
  - "Delete" (destructive) and "Cancel" buttons

### Interactions
- Tapping target range row → opens range picker dialog
- Tapping unit row → opens unit picker (mg/dL / mmol/L)
- Tapping a reminder row → navigates to **Edit Reminder** screen
- Tapping "Add reminder" → navigates to **Edit Reminder** screen (new)
- Toggling a reminder's switch → enables or disables that reminder without navigating away
- Tapping connected services row → navigates to **Glucose Services List**
- Back arrow → saves any in-progress changes and returns to the Dashboard
- On network reconnect, reminder data is refreshed automatically

### Sample Data
```
[← Glucose settings]

WELLNESS
Target range         70 – 180 mg/dL  >
Units                mg/dL           >

REMINDERS
  8:00 AM   Every day         [●]  >
  12:30 PM  Mon, Wed, Fri     [○]  >
  [+  Add reminder]

CONNECTED SERVICES
  Glucose services    Dexcom G7       >
```

---

## Edit Reminder

### Overview
A screen for creating or editing a single glucose reminder, where the user sets the time and which days of the week the reminder should fire.

### UI Elements

**Header / Toolbar**
- Back / close arrow
- Title: "Edit reminder" (new) or the existing reminder time (edit mode)
- "Save" action button in the top-right corner (or a save button at the bottom)

**Time Picker**
- A large time selector (clock or spinner style) showing hours and minutes
- AM/PM toggle (for 12-hour locales)
- Example: "8:00 AM"

**Day Selector**
- A row of 7 day-of-week toggle chips/buttons:
  - S  M  T  W  T  F  S  (or locale-appropriate order)
  - Each chip is toggleable (selected = filled/colored, deselected = outlined)
  - At least one day must be selected

**Delete Button** *(only in edit mode, not for new reminders)*
- A "Delete reminder" button (text or icon, styled as a destructive action) near the bottom
- Tapping shows a confirmation prompt

**Save Button**
- Full-width primary button at the bottom: "Save"
- Disabled if no days are selected

### Interactions
- Adjusting the time picker → updates the displayed time in real time
- Tapping a day chip → toggles that day on/off
- Tapping "Save" → saves the reminder and returns to Glucose Settings; the reminder appears in the list
- Tapping "Delete reminder" → shows a confirmation dialog; on confirm, deletes the reminder and returns to Glucose Settings
- Back arrow without saving → discards unsaved changes and returns to Glucose Settings

### Sample Data
```
[← Edit reminder]                [Save]

      ┌────────────────────┐
      │      8 : 00  AM    │
      └────────────────────┘

Repeat
  [S]  [●M]  [●T]  [●W]  [●T]  [F]  [S]
   Sun   Mon   Tue   Wed   Thu  Fri  Sat

────────────────────────────────────────
              [Delete reminder]
```

---

## Glucose Day Detail

### Overview
A detailed view of all glucose readings for a single day, with the ability to log a new manual reading and view how each reading relates to meals or activities.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: the selected date (e.g., "Thursday, Jun 12")
- Optional overflow menu with "Edit" or "Delete all" for the day

**Daily Summary Banner**
- Average glucose for the day (e.g., "Avg: 103 mg/dL")
- Time-in-range percentage (e.g., "In range: 82%")
- Visual range bar showing proportion of time below / in / above target

**Intraday Chart**
- A line or scatter chart showing all readings plotted across a 24-hour timeline
- Target range shown as a shaded band (e.g., 70–180 mg/dL)
- Each data point is a dot; tapping a dot shows a tooltip with exact value and time

**Readings List**
- A chronological list of individual readings, each row showing:
  - Time (e.g., "7:45 AM")
  - Glucose value with unit (e.g., "94 mg/dL")
  - Optional annotation tag (e.g., "Before breakfast", "After exercise")
  - An in-range / out-of-range indicator icon (check mark or arrow up/down)
  - Tapping a row allows editing or deleting that reading

**Log Reading Button**
- A floating action button or bottom bar button: "+ Log reading"
- Tapping opens the **Glucose Log Entry** flow

### Interactions
- Tapping a chart dot → shows a tooltip popup with the reading's value, time, and any annotation
- Tapping a list row → opens edit/detail view for that reading (allows changing value, annotation, or deleting)
- Tapping "+ Log reading" → opens the logging entry screen
- Back arrow → returns to the previous screen (Dashboard or History Chart)
- Left/right swipe on the date header → navigates to the previous or next day

### Sample Data
```
[← Thursday, Jun 12]

Avg: 103 mg/dL   In range: 86%
[████████░░░] 86% in range

[Intraday chart: 24-hour axis with dots at 7:45, 12:10, 3:30, 7:00 PM]

─────────────────────────────────
  7:45 AM    94 mg/dL   ✓   Before breakfast  >
  12:10 PM   118 mg/dL  ✓   After lunch       >
  3:30 PM    73 mg/dL   ↓   (no tag)          >
  7:00 PM    127 mg/dL  ✓   After dinner      >

                   [+ Log reading]
```

---

## Glucose Services List

### Overview
A screen showing all available third-party glucose monitoring services (e.g., CGM integrations) that can be connected to Fitbit, allowing users to link or manage these accounts.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: e.g., "Glucose services" or "Connected monitors"

**Services List**
- A list of available integration partners, each displayed as a card or row:
  - **Service logo / icon** (left)
  - **Service name** (bold, e.g., "Dexcom G7", "Abbott LibreLink")
  - **Connection status** subtitle:
    - "Connected" (with a checkmark or green indicator)
    - "Not connected" (grayed out)
  - Right chevron ">" to enter detail

**Empty State**
- If no services are available in the user's region: "No glucose services available in your area."

### Interactions
- Tapping a service row → navigates to **Glucose Service Details** for that service
- Back arrow → returns to the previous screen (Dashboard or Settings)

### Sample Data
```
[← Glucose services]

  [Dexcom logo]  Dexcom G7
                 Connected  ✓            >

  [Libre logo]   Abbott LibreLink
                 Not connected            >

  [Other logo]   OneTouch Reveal
                 Not connected            >
```

---

## Glucose Service Details

### Overview
A detail screen for a single third-party glucose service, showing its description, data sharing terms, and options to connect or disconnect the service.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: the service name (e.g., "Dexcom G7")

**Service Header**
- Large service logo or illustration
- Service name (large heading)
- Short description of what the service does and what data it shares (e.g., "Dexcom automatically syncs your CGM readings to Fitbit throughout the day.")

**Data Sharing Info Section**
- A list of bullet points or paragraphs describing:
  - What data will be shared (e.g., "Your glucose readings, timestamps, and trend arrows")
  - Frequency (e.g., "Synced every 5 minutes when your CGM is active")
  - Privacy note linking to Fitbit's privacy policy

**Connection Status Banner**
- When connected: a green banner or row showing "Connected — [Account email or device name]"
- When not connected: no banner shown

**Primary Action Button**
- When not connected: "Connect [Service Name]" (primary/teal button)
- When connected: "Disconnect" (secondary/outlined or destructive button)

**Footer Note**
- Small text: e.g., "You'll be redirected to Dexcom to authorize access."

### Interactions
- Tapping "Connect" → opens an in-app web view (OAuth) for the third-party service authorization; on success, returns to this screen with "Connected" status
- Tapping "Disconnect" → shows a confirmation dialog: "Disconnect Dexcom? Your synced data will remain in Fitbit." with "Disconnect" and "Cancel" options; on confirm, disconnects and updates the status
- Back arrow → returns to **Glucose Services List**

### Sample Data
```
[← Dexcom G7]

  [Dexcom logo]
  Dexcom G7

  Automatically sync your continuous 
  glucose monitor readings into Fitbit.

  What's shared:
  • Glucose readings every 5 minutes
  • Trend arrows (rising, stable, falling)
  • Calibration events

  ─────────────────────────────────
  ✓ Connected  •  user@example.com

  [Disconnect]

  You can disconnect at any time from 
  this screen or from Dexcom's app.
```
<!-- source-hash:ffdc3ce351fa -->

---

# Body Temperature Screen Specifications

---

## Body Temperature Overview (Main Screen)

### Overview
The user sees their body temperature history and trends, with options to log a manual temperature reading or navigate to settings.

### UI Elements

**Header/Toolbar:**
- Title: "Body Temperature" (from `temperature_base_title` string)
- Back/Up navigation arrow (left side)
- Overflow menu with two action buttons:
  - **Add log** button (pencil/plus icon) — opens the manual log entry screen
  - **Settings** button (gear icon) — opens the temperature settings screen

**Main Content Area:**
- A scrollable view displaying the user's body temperature data, likely including:
  - A chart or graph showing skin temperature deviation over recent days/weeks
  - A summary card showing the most recent temperature reading and the date it was recorded
  - A list or timeline of past temperature entries, each showing:
    - Date (e.g., "Today", "Yesterday", "Nov 14")
    - Temperature value or deviation from baseline (e.g., "+0.3°F from baseline")
    - Source indicator (device-tracked or manually logged)
  - A baseline reference indicator or personal range display

**Empty/Loading State:**
- If no temperature data is available yet, a placeholder or informational message appears encouraging the user to wear their device overnight or log a manual reading

### Interactions
- Tapping the **Add log** button in the top menu opens the Manual Temperature Log screen
- Tapping the **Settings** button opens the Temperature Settings screen
- Tapping on an individual temperature entry or day navigates to the Temperature Day Detail screen
- Pulling down on the list refreshes the data (if applicable)
- The back arrow navigates up to the previous screen (the main Fitbit dashboard)

### Sample Data
- "Today — +0.2°F from baseline" (device-tracked)
- "Yesterday — +0.8°F from baseline" (device-tracked)
- "Nov 12 — 98.2°F" (manually logged)
- "Nov 11 — Baseline: 97.9°F"

---

## Manual Temperature Log

### Overview
The user enters a body temperature reading manually, selecting the value and the date/time it was measured.

### UI Elements

**Header/Toolbar:**
- Back arrow (left) to cancel and return without saving
- Title: (implied from context — e.g., "Log Temperature")
- Save or submit action button (right side or bottom)

**Form Fields:**
- **Temperature value input:** A numeric picker or text field where the user enters their temperature reading (e.g., 98.6). The unit (°F or °C) is shown adjacent to the field, based on the user's unit preference.
- **Date/time selector:** A field (tap to open a date-time picker dialog) showing the date and time the reading was taken (defaults to current date/time).

**Bottom Action:**
- A prominent **Save** or **Log** button (styled in pink/coral per the app's primary button style) — disabled until a valid temperature value is entered.

### Interactions
- Tapping the temperature field opens a numeric keyboard or scroll picker
- Tapping the date/time field opens a date-and-time picker modal
- Tapping **Save** submits the log entry via `POST /v3/temperature/manual`, then returns to the Main screen with the new entry reflected in the list
- Tapping the back arrow discards changes and returns to the Main screen without saving
- After a successful save, the Main screen refreshes to show the newly added entry

### Sample Data
- Temperature: 98.4 °F
- Date: November 15, 2024, 8:30 AM

---

## Temperature Day Detail

### Overview
The user sees a detailed breakdown of their skin temperature readings for a specific day, including intraday data points and how the values compare to their personal baseline.

### UI Elements

**Header/Toolbar:**
- Back arrow to return to the Main screen
- Date shown as the screen title (e.g., "November 14")
- Optional overflow menu (settings shortcut)

**Content Area:**
- **Date heading:** The full date displayed prominently (e.g., "Thursday, November 14")
- **Temperature summary card:**
  - Skin temperature deviation from baseline (e.g., "+0.5°F from your baseline")
  - Absolute temperature value if available (e.g., "98.4°F")
  - A small label indicating whether this is from a wearable device or manually logged
- **Intraday chart:** A line graph or bar chart showing temperature variation across the day/night (e.g., hour-by-hour during sleep), fetched from `GET /v3/temperature/intraday/skin`
- **Baseline reference line:** A horizontal indicator on the chart showing the user's personal baseline temperature
- **Context note:** A brief explanatory text (e.g., "Skin temperature is measured while you sleep. Small changes are normal.")
- **Delete entry option** (for manually logged entries): A "Delete" button or trash icon that removes the manual log

**About section (collapsible or link):**
- "About body temperature" label, which expands to show: "Body temperature refers to the temperature of the body as measured by a thermometer. Your body works to keep your body temperature within a small range."

### Interactions
- Tapping the back arrow returns to the Main temperature screen
- Tapping the chart data points may show a tooltip with the specific time and value (e.g., "2:30 AM — +0.3°F")
- Tapping **Delete** (for manual entries only) shows a confirmation dialog ("Delete this temperature log?") with **Delete** and **Cancel** options; confirming calls `DELETE /v3/temperature/manual` and returns to the Main screen
- Tapping "About body temperature" expands an informational section inline or opens a bottom sheet

### Sample Data
- Date: Thursday, November 14
- Deviation: +0.5°F from baseline
- Baseline: 97.9°F
- Intraday: readings from 10 PM to 7 AM plotted hourly
- Source: Fitbit Sense 2 (tracked during sleep)

---

## Temperature Settings

### Overview
The user configures their body temperature preferences, including units and consent/data options.

### UI Elements

**Header/Toolbar:**
- Back arrow to return to the previous screen
- Title: "Temperature" or "Body Temperature Settings"

**Settings List (scrollable rows):**

- **Temperature unit:** A row labeled (e.g., "Temperature unit") with the current unit shown as a subtitle (e.g., "Fahrenheit" or "Celsius"). Tapping opens a selection dialog.
- **About body temperature:** A row that opens an informational screen explaining how temperature tracking works.
- **Delete temperature logs:** A row (e.g., "Delete temperature data") that, when tapped, leads to the Delete Logs confirmation screen. Calls `DELETE /v3/temperature/skin`.
- **Data and privacy:** A row linking to the broader privacy settings or a consent screen (`TemperatureConsentActivity`) explaining what data is collected and how it is used.

**Section dividers** between logical groupings (e.g., "Preferences" and "Data").

### Interactions
- Tapping **Temperature unit** opens a radio-button dialog with options "Fahrenheit (°F)" and "Celsius (°C)"; selecting one updates the preference immediately
- Tapping **About body temperature** opens the informational detail screen
- Tapping **Delete temperature logs** navigates to a confirmation screen (see Delete Logs screen below)
- Tapping **Data and privacy** navigates to the temperature consent or privacy screen
- Back arrow returns to wherever the settings were launched from (Main screen or app settings)

### Sample Data
- Current unit: Fahrenheit
- Data collection note: "Skin temperature is measured nightly while you wear your Fitbit device."

---

## Delete Temperature Logs

### Overview
The user confirms they want to permanently delete all of their stored skin temperature data.

### UI Elements

**Header/Toolbar:**
- Back arrow to cancel and return to Settings
- Title: (e.g., "Delete Temperature Data")

**Content:**
- A warning icon or illustration
- A headline: (e.g., "Delete your temperature data?")
- Explanatory body text: A message warning the user that this action is permanent and all their skin temperature history will be removed (e.g., "This will permanently delete all your skin temperature data. This action cannot be undone.")
- **Delete** button (styled prominently, possibly in a destructive red or the app's pink) — calls `DELETE /v3/temperature/skin`
- **Cancel** button or link below — returns to Settings without deleting

### Interactions
- Tapping **Delete** sends the deletion request, shows a brief loading indicator, then navigates back to the Main temperature screen (or Settings) with a confirmation snackbar (e.g., "Temperature data deleted")
- Tapping **Cancel** or the back arrow returns to Temperature Settings without making any changes
- If the deletion fails (network error), a snackbar or dialog appears: "A network error occurred. Please try again later."

### Sample Data
- Warning: "This will permanently delete all your skin temperature history recorded by your Fitbit device and any manually logged entries."

---

## Temperature Consent / Privacy

### Overview
The user reviews what body temperature data Fitbit collects, how it is used, and can manage their consent.

### UI Elements

**Header/Toolbar:**
- Back arrow
- Title: (e.g., "Body Temperature & Privacy")

**Content (scrollable):**
- **Section: What we collect**
  - Bullet list describing the data collected (e.g., skin temperature readings from the wearable sensor, manually entered readings, timestamps)
- **Section: How it's used**
  - Description of how temperature data informs health insights (e.g., detecting illness patterns, menstrual cycle insights)
- **Section: Your choices**
  - Toggle or button to turn off temperature tracking (if supported)
  - Link to full Fitbit Privacy Policy
- **Consent acknowledgment:** A note indicating when the user originally agreed to temperature data collection

**Bottom area:**
- A **Done** or **Close** button returning to the previous screen

### Interactions
- Tapping the Privacy Policy link opens an in-app web view to `https://www.fitbit.com` privacy policy page
- Toggling temperature tracking off presents a confirmation dialog before disabling
- Tapping **Done** returns to Temperature Settings

### Sample Data
- "You started tracking body temperature on March 4, 2024."
- "Temperature data is used to provide insights about your sleep quality and overall health trends."
<!-- source-hash:60af9b3ff80e -->

---

# Fitbit Hydration — Screen Specifications

---

## Water History (Days List)

### Overview
The main hydration hub where the user sees a scrollable history of daily water intake, their current daily goal progress, and quick-add buttons for logging water on the spot.

### UI Elements

**Header / Toolbar**
- Title: "Water" (inferred from context; the screen is the water landing/list view)
- Back arrow (up navigation)
- Overflow / action menu with two items:
  - **"Add water"** — opens the Add Water entry form
  - **"Edit water goal"** — navigates to Water Goal settings

**Quick Add Widget** (pinned near the top of the list, above date entries)
- Header label (e.g., "Quick add")
- Three tap targets labeled with preset amounts and their units, formatted as:
  - Small: e.g., **"8 fl oz"**
  - Medium: e.g., **"12 fl oz"**
  - Large: e.g., **"16 fl oz"**
- Each button shows the amount in bold/emphasized text; tapping one immediately logs that amount for today

**Daily Progress Bar / Chart** (appears in the list above the day entries)
- A visual bar or chart showing water consumed vs. goal for recent days
- Rendered inline as part of the scrollable content

**Scrollable Day List**
Each list row (grouped by date, with sticky date headers) shows:
- **Date header** (sticky, e.g., "Monday, Jun 9" or "Today")
- **Daily summary row** containing:
  - Total water consumed for that day (e.g., "48 fl oz")
  - Goal indicator (e.g., progress toward daily goal of 64 fl oz)
- A thin divider between day rows

**Loading / Progress State**
- A progress spinner is shown centered on screen while data is loading; hidden once data is ready

### Interactions
- Tapping a **Quick Add preset button** → immediately logs that amount for today; the progress bar updates in place
- Tapping a **day row** (any date, including Today) → navigates to the Single Day Water Log screen for that date
- Tapping **"Add water"** in the menu → opens the Add/Edit Water Entry form (pre-set to today)
- Tapping **"Edit water goal"** in the menu → opens the Goals screen filtered to Water
- Tapping the **back arrow** → returns to the previous screen
- **Pull-to-refresh** is not explicitly present; the list auto-loads from the server on open

### Sample Data
```
Today
  68 fl oz  ████████████████░░ (Goal: 80 fl oz)

Monday, Jun 9
  48 fl oz  ████████████░░░░░░

Sunday, Jun 8
  80 fl oz  ████████████████████ ✓

Saturday, Jun 7
  32 fl oz  ████████░░░░░░░░░░
```

Quick add buttons: **+8 fl oz** | **+12 fl oz** | **+16 fl oz**

---

## Single Day Water Log

### Overview
A detail view showing every individual water log entry for a specific date, with the ability to add or edit entries for that day.

### UI Elements

**Header / Toolbar**
- Title: either **"Today"** (if viewing the current date) or the full date formatted as a long month name (e.g., **"June 9, 2025"**)
- Back arrow (up navigation)
- Action menu with one item:
  - **"Add water"** icon/button — opens the Add Water entry form for this date

**Day Summary Header** (top of list, non-scrolling sticky header)
- Total water consumed for the day (e.g., **"68 fl oz"**)
- Visual progress bar toward the daily goal
- Goal amount shown (e.g., "Goal: 80 fl oz")

**Individual Log Entries List** (scrollable)
Each entry row shows:
- Amount logged (e.g., **"16 fl oz"**)
- Time of the entry (e.g., **"2:30 PM"**)
- Thin dividers between rows

**Empty State** (shown when no logs exist for the day)
- A placeholder view with a message indicating no water has been logged yet (e.g., "No water logged yet. Tap + to add an entry.")

### Interactions
- Tapping **"Add water"** in the toolbar menu → opens the Add/Edit Water Entry form, with the date pre-filled to this day
- Tapping an **existing entry row** → opens the Add/Edit Water Entry form pre-populated with that entry's data for editing
- Tapping the **back arrow** → returns to the Water History screen

### Sample Data
```
June 9, 2025 — "Today"

Day Total: 68 fl oz  ██████████████████░░ (Goal: 80 fl oz)

─────────────────────────────
  16 fl oz    2:30 PM
─────────────────────────────
  12 fl oz    12:15 PM
─────────────────────────────
  20 fl oz    9:00 AM
─────────────────────────────
  20 fl oz    7:45 AM
─────────────────────────────
```

---

## Add / Edit Water Entry

### Overview
A simple form screen for logging a new water intake entry or editing an existing one, with an amount picker and optional time selection.

### UI Elements

**Header / Toolbar**
- Title: **"Add Water"** (new entry) or **"Edit Water"** (editing existing)
- Back / close arrow
- **"Save"** action in toolbar or as a prominent button

**Amount Input**
- Numeric input or scroll-picker for water amount
- Unit label adjacent to the amount (e.g., **"fl oz"** or **"mL"** depending on user's unit preference)
- Example placeholder: "0 fl oz"

**Unit Selector** (if applicable)
- Dropdown or segmented control to switch between fl oz / mL / cups

**Date/Time Field**
- Displays the date and time for this entry (e.g., "Today, 2:30 PM")
- Tapping opens a date/time picker dialog

**Save / Log Button**
- Full-width primary button labeled **"Log"** or **"Save"**
- Disabled when amount is 0 or empty

**Delete Button** (edit mode only)
- A text link or secondary button labeled **"Delete entry"**
- Triggers a confirmation dialog before deleting

### Interactions
- Adjusting the **amount picker** → updates the displayed amount in real time
- Tapping the **date/time field** → opens a date/time picker; user selects time, field updates
- Tapping **"Log"** / **"Save"** → saves the entry, returns to Single Day Water Log screen, list refreshes with the new/updated entry
- Tapping **"Delete entry"** (edit mode) → shows a confirmation dialog ("Delete this entry?", with **"Delete"** and **"Cancel"**); confirming removes the entry and returns to Single Day Water Log
- Tapping **back arrow** → discards changes and returns to previous screen

### Sample Data
```
Add Water

Amount:  [ 16 ]  fl oz

Date/Time:  Today, 2:30 PM

[ Log ]
```

---

## Water Goal Settings

### Overview
A settings screen (reached from the Water History menu or the Goals section) where the user sets their daily water intake goal.

### UI Elements

**Header / Toolbar**
- Title: **"Water"** (based on `GoalsActivity` case 5: `setTitle(R.string.water)`)
- Back arrow
- Optional: **"Remove goal"** in the overflow menu if a goal is set

**Summary Text** (top of screen)
- A brief explanation label (populated from `goals_water_summary` slot when visible)
- Example: "Stay hydrated! Set a daily water goal to track your intake."

**Water Goal Row**
- Label: **"Daily water goal"** (from `water` text view in Goals)
- Current goal value displayed (e.g., **"64 fl oz"**)
- Tapping the row opens an inline numeric picker or a dialog to enter the desired daily amount

**Unit Display**
- Shows user's preferred water unit (fl oz or mL), consistent with profile settings

**Save / Done Action**
- A **"Save"** button in the toolbar or a checkmark
- Changes are persisted when the user confirms

### Interactions
- Tapping the **water goal row** → opens a number picker dialog or inline spinner to select a new goal amount (in the user's preferred unit)
- Confirming the new value → updates the displayed goal amount on screen
- Tapping **"Save"** or the back arrow after changes → saves the goal via the API (`POST /1/user/-/foods/log/water/goal.json`) and returns to the previous screen
- Tapping **"Remove goal"** from the overflow menu (if shown) → clears the water goal

### Sample Data
```
Water Goal Settings

Stay hydrated! Track your daily water intake.

Daily water goal
  64 fl oz                 >

[ Save ]
```
<!-- source-hash:ddd6c0ab54fb -->

---

# Community & Friends — UI Screen Specifications

---

## Community Hub (Feed, Friends, Groups)

### Overview
The central social hub where the user browses their activity feed, manages friends, and participates in groups — organized into three tabs.

### UI Elements

**Header / Toolbar**
- Title: "Community" (displayed when the full community experience is enabled)
- Close button (X icon) in top-left corner — closes the screen and returns to the previous context

**Tab Bar** (three tabs, displayed horizontally below the toolbar)
- **Feed** — the user's social activity feed
- **Friends** — the user's friends list and friend requests
- **Groups** — community groups the user belongs to or can discover

**Floating Action Button**
- Pink/teal circular button labeled with a "find friends" icon (person with a plus sign)
- Visible on the main community screen
- Used to initiate finding or adding new friends

**Content Area (ViewPager)**
- Swipeable between the three tabs
- Each tab displays its own scrollable content (described below)

**Onboarding Gate**
- If the user has never completed community onboarding, they are automatically redirected to the Feed Onboarding screen before seeing the community hub

### Interactions
- Tapping the **X** (close button) closes the community hub and returns the user to the previous screen
- Swiping left/right or tapping a tab navigates between Feed, Friends, and Groups
- Tapping the **floating action button** opens the Find Friends flow
- If the user is not onboarded to the social feed, the app automatically navigates to the Feed Onboarding screen on start

### Sample Data
- Tab bar: Feed | Friends | Groups
- Active tab indicator under "Feed"
- Floating action button visible over feed content

---

## Activity Feed (Feed Tab)

### Overview
The social feed tab where the user sees activity updates, posts, cheers, and comments from friends and groups they follow.

### UI Elements

**Feed List** (scrollable)
- Each post card shows:
  - User avatar (circular profile photo)
  - Display name (e.g., "Sarah K.")
  - Post timestamp (e.g., "2 hours ago")
  - Post content (e.g., "Just hit 10,000 steps for the 7th day in a row! 🎉")
  - Attached image or activity summary (if any)
  - Cheer count and comment count (e.g., "❤️ 12 cheers · 3 comments")
  - **Cheer** button — tap to react
  - **Comment** button — tap to open post detail and add a comment
  - **Reply** button — appears on comment threads

**Empty State**
- If the feed is empty, a prompt encourages the user to add friends or join groups

**Compose/Post Button**
- May appear as a floating action button or inline prompt (e.g., "Share something with your friends…")

### Interactions
- Tapping a post opens the **Post Detail** screen
- Tapping **Cheer** toggles the cheer reaction on/off and updates the cheer count
- Tapping **Comment** opens the post detail screen focused on the comment input
- Tapping a user's avatar or name opens their **Profile** screen
- Pull-to-refresh reloads the latest feed content
- Scrolling down loads additional older posts (infinite scroll / pagination)

### Sample Data
- Sarah K. — "Just logged a 5k run! Feeling great 💪" — 45 mins ago — ❤️ 8 cheers · 2 comments
- Mike T. — "Hit my floors goal for the week!" — 3 hours ago — ❤️ 3 cheers
- Jessica L. — "New personal best on steps today. Almost at 15,000!" — Yesterday — ❤️ 21 cheers · 5 comments

---

## Friends List (Friends Tab)

### Overview
The Friends tab where the user views their current friends, pending friend requests, and can manage friendships.

### UI Elements

**Tab Header**
- Title: "Friends" (shown in toolbar when the simplified (non-full community) mode is active)

**Sub-tabs or Sections** (if present)
- "Friends" — current friends list
- "Invitations" or "Requests" — pending incoming/outgoing friend requests

**Friends List** (scrollable)
Each friend card shows:
- Circular profile photo
- Display name (e.g., "Alex R.")
- Step count or recent activity (e.g., "8,452 steps today")
- Cheer/Taunt buttons:
  - **Cheer** ("Cheer") — sends encouragement
  - **Taunt** ("Taunt") — sends a playful challenge

**Friend Requests Section** (if invitations are pending)
- Each invitation card shows:
  - Sender's avatar and display name
  - Sub-title: "[Name] wants to be friends"
  - Privacy note: "Friends see the info you choose to share in privacy settings"
  - **Accept Friend** button (labeled "Accept")
  - **Decline** button or dismiss option
- Confirmation dialog on accepting: "Accept friend invite?" with details:
  - "If you accept, they'll see your display name, profile photo, about me info, and the date you joined. They'll also see your step count unless you've changed your privacy settings, and other info you've chosen to share with friends and groups."
  - **Accept** button
  - **Cancel** button

**Empty State**
- If the user has no friends yet, a message encourages them to find friends (links to Find Friends flow)

### Interactions
- Tapping a friend's name or avatar opens their **Profile** screen
- Tapping **Cheer** sends a cheer notification to the friend and shows a brief confirmation
- Tapping **Taunt** sends a taunt notification to the friend
- Tapping **Accept** on a friend request shows the "Accept friend invite?" confirmation dialog; confirming accepts the request and adds them to the friends list
- Declining a request removes it from the list
- Pull-to-refresh reloads the friends list

### Sample Data
- Alex R. — 8,452 steps today — [Cheer] [Taunt]
- Priya M. — 12,310 steps today — [Cheer] [Taunt]
- Pending request from Jordan S. — "Jordan S. wants to be friends" — [Accept] [Decline]

---

## Groups (Groups Tab)

### Overview
The Groups tab where the user can view groups they belong to, discover new groups, and manage group membership.

### UI Elements

**Groups List** (scrollable)
Each group card shows:
- Group cover image or avatar
- Group name (e.g., "Morning Runners Club")
- Member count (e.g., "142 members")
- Brief description or recent activity preview
- Membership indicator (e.g., "Member" badge or "Joined" label)

**Recommended Groups Section** (if user has few or no groups)
- Horizontally or vertically scrollable list of suggested groups
- Each suggestion card shows: group name, member count, short description, and a **Join** button

**Create Group Entry Point**
- "Create a Group" button or link (usually at the top or as a floating action)

**My Groups Section**
- Lists groups the user has already joined
- Each row shows group name, member count, latest post preview, and unread indicator if applicable

### Interactions
- Tapping a group card navigates to the **Group Detail** screen
- Tapping **Join** on a recommended group joins the group and moves it to "My Groups"
- Tapping **Create a Group** opens the **Create Group** flow
- Pull-to-refresh reloads the groups list

### Sample Data
- Morning Runners Club — 142 members — "Weekly group run recap posted" — Member
- Step Challenge HQ — 89 members — "New challenge starts Monday!"
- Yoga & Mindfulness — 57 members — Join

---

## Post Detail

### Overview
A full-screen view of a single post where the user can read all comments, add a comment, and interact with cheers.

### UI Elements

**Header / Toolbar**
- Back arrow (navigate back to feed)
- Title: Post author's name or "Post"

**Post Content Card**
- Author avatar (circular)
- Author display name
- Timestamp (e.g., "Yesterday at 2:34 PM")
- Post body text
- Attached image (if any)
- Cheer count (e.g., "❤️ 12 cheers") — tappable to see who cheered
- Cheer button (filled/active if the user has already cheered)

**Comments Section**
- List of all comments, each showing:
  - Commenter avatar and display name
  - Comment text
  - Timestamp
  - Reply button
  - Delete option (only for the user's own comments)
- "Load more comments" link if there are additional comments

**Comment Input**
- Text input field at the bottom: placeholder "Write a comment…"
- **Post** / **Send** button (activates when text is entered)

**Overflow / More Menu** (top-right, three-dot icon)
- "Report" option — opens report dialog
- "Delete Post" (only shown if the user owns the post)

### Interactions
- Tapping **Cheer** toggles the cheer; the count updates immediately
- Tapping the cheer count opens a list of users who cheered ("Cheers" sheet)
- Typing in the comment field and tapping **Send** adds the comment to the list
- Tapping **Reply** on a comment opens a nested reply thread or pre-fills the comment box with @mention
- Tapping **Delete** on own comment shows a confirmation, then removes it
- Tapping **Report** opens the Report Content flow

### Sample Data
- Sarah K. — Yesterday at 9:12 AM — "Just hit 10,000 steps for the 7th day in a row! 🎉"
- ❤️ 12 cheers
- Comment from Mike T.: "Amazing! Keep it up!" — Yesterday at 9:45 AM
- Comment from Priya M.: "Goals!! 🔥" — Yesterday at 10:02 AM

---

## Cheers List Sheet

### Overview
A bottom sheet or modal that shows which friends have cheered a specific post.

### UI Elements

**Sheet Title**
- "Cheers" or "People who cheered"

**User List**
- Each row shows:
  - Circular avatar
  - Display name
  - Tappable to navigate to their profile

**Close Button**
- "X" or drag handle at the top to dismiss the sheet

### Interactions
- Tapping a user's name navigates to their profile
- Swiping down or tapping outside dismisses the sheet

### Sample Data
- Mike T.
- Priya M.
- Jordan S.
- Alex R.
- (+ 8 others)

---

## Find Friends

### Overview
A screen where the user can search for and add new friends on Fitbit.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Find Friends" or "Add Friends"

**Search Bar**
- Placeholder: "Search…"
- Accepts usernames or display names

**Search Results List**
Each result card shows:
- Circular profile photo
- Display name
- Username (e.g., "@sarah_k")
- **Add Friend** button (or "Pending" if request already sent, or "Friends" if already connected)

**Suggested Friends Section** (shown before search)
- Users with mutual friends or contacts
- Each card shows: avatar, display name, mutual friends count, **Add Friend** button

### Interactions
- Typing in the search bar triggers a live search and updates the results list
- Tapping **Add Friend** sends a friend invitation; button changes to "Pending"
- Tapping a user's name opens their profile

### Sample Data
- Search result: Jordan S. — @jordan_s — [Add Friend]
- Suggested: Taylor W. — 3 mutual friends — [Add Friend]
- Suggested: Casey M. — 1 mutual friend — [Add Friend]

---

## Group Detail

### Overview
A full view of a specific community group showing its description, members, posts, and membership actions.

### UI Elements

**Header / Toolbar**
- Back arrow
- Group name as title (e.g., "Morning Runners Club")
- More/overflow menu (three dots):
  - "Leave Group"
  - "Report Group"

**Group Header Banner**
- Group cover image or placeholder
- Group name (large)
- Member count (e.g., "142 members")
- Brief description (e.g., "A group for early morning running enthusiasts. Share your runs and stay motivated!")
- **Join Group** button (if not yet a member) or **Leave Group** link

**Group Feed / Posts Tab**
- Same structure as the Activity Feed (post cards with cheer and comment options)

**Members Tab** (if present)
- Scrollable list of group members
- Each row: avatar, display name, member role (e.g., "Admin")

**Post to Group Button**
- Floating action button or inline compose prompt: "Share something with the group…"

### Interactions
- Tapping **Join Group** adds the user to the group; button changes to "Leave Group"
- Tapping **Leave Group** shows a confirmation dialog, then removes the user from the group
- Tapping a post opens **Post Detail**
- Tapping **Share** / compose button opens the **Compose Post** screen scoped to the group
- Tapping a member's name opens their profile

### Sample Data
- Group: Morning Runners Club — 142 members
- Description: "A group for early morning running enthusiasts. Share your runs and stay motivated!"
- Recent post: Alex R. — "5K done before sunrise. Best way to start the day 🌅" — 1 hour ago — ❤️ 7 cheers

---

## Compose Post

### Overview
A screen where the user writes and publishes a new post to their feed or to a specific group.

### UI Elements

**Header / Toolbar**
- Cancel button (top-left): discards the post and returns to the previous screen
- Title: "New Post" or the group name (e.g., "Post to Morning Runners Club")
- **Post** button (top-right): publishes the post (grayed out if the text field is empty)

**Author Identity Row**
- User's own circular avatar
- Display name

**Post Text Area**
- Large multi-line text input
- Placeholder: "What's on your mind?"
- Character limit enforced (no explicit counter shown to user unless approaching limit)

**Attach Media Button** (if applicable)
- Camera/photo icon to attach an image

**Group Selector** (if composing from the general feed)
- "Posting to: All Friends" with a dropdown or selector to choose a specific group

### Interactions
- Tapping **Cancel** shows a confirmation if text has been entered ("Discard post?"), then returns to the previous screen
- Tapping **Post** submits the post; the screen closes and the feed refreshes to show the new post
- Tapping the photo icon opens the device's photo picker or camera

### Sample Data
- Placeholder: "What's on your mind?"
- Example text: "Just completed my first 10K race! 🏃‍♀️ So proud of this milestone."
- Posting to: All Friends

---

## Report Content

### Overview
A screen where the user reports inappropriate posts, comments, groups, or profiles for moderation review.

### UI Elements

**Header / Toolbar**
- Back arrow or Cancel
- Title: "Report"

**Content Type Label**
- Describes what is being reported (e.g., "You're reporting this post", "You're reporting this profile")

**Occurrence Location Section**
- Header: "Select all the places this occurred"
- Selectable options (checkboxes):
  - "In a Challenge or Adventure"
  - "Outside the Fitbit app"
  - "In a group"
  - "From a private message"
  - "From a post or comment"
  - "On their profile"

**Reason/Details Text Input** (if applicable)
- Optional text field: "Add any additional context…"

**Submit Button**
- "Submit Report" — sends the report to moderation; grayed out until a reason is selected

### Interactions
- The user selects one or more applicable location checkboxes
- Tapping **Submit Report** sends the report and shows a brief confirmation message (e.g., "Thanks for your report. Our team will review it.")
- After submission, the user is returned to the previous screen

### Sample Data
- "You're reporting this post by Alex R."
- Selected: "From a post or comment"
- Submit Report button becomes active

---

## Feed Onboarding

### Overview
An introductory multi-step onboarding flow that introduces the user to the Fitbit Community (social feed) before they can use it for the first time.

### UI Elements

**Header / Toolbar**
- Close (X) button — skips or exits onboarding

**Page Indicator Dots**
- Row of dots at the bottom showing progress through onboarding steps

**Content Pages** (swipeable)
Each page contains:
- Illustration or animation
- Title text (e.g., "Connect with friends")
- Descriptive body text (e.g., "Cheer each other on, share your progress, and stay motivated together.")
- **Next** button (advances to the next page)
- On the last page: **Get Started** button (completes onboarding and navigates to the Community Hub)

### Interactions
- Swiping left/right or tapping **Next** moves between onboarding pages
- Tapping the close (X) button exits onboarding (user may be prompted to confirm)
- Tapping **Get Started** on the final page marks onboarding as complete and opens the Community Hub at the Feed tab

### Sample Data
- Page 1: "Welcome to Fitbit Community" — "Connect with friends and share your health journey."
- Page 2: "Cheer each other on" — "React to friends' milestones and celebrate their achievements."
- Page 3: "Join groups" — "Find people who share your interests and goals."
- Final page CTA: "Get Started"
<!-- source-hash:631e93ffbee2 -->

---

# Payments & Wallet Onboarding Screens

---

## Payments Onboarding – Screen 1: "Pay with Your Fitbit"

### Overview
The first slide of a multi-step onboarding carousel introducing the Fitbit Pay / Payments feature, showing a full-screen illustration with a title, body text, and navigation options.

### UI Elements

- **Toolbar (top)**
  - Close button ("✕") in the top-left corner — dismisses the onboarding flow entirely
  - No title text in the toolbar

- **Illustration**
  - A large hero image centered on the page (payments onboarding illustration #1 — depicts a wrist/Fitbit device making a contactless payment)

- **Page title**
  - Large text drawn from: `ck_onboarding_1_title`
  - Example: "Pay with your Fitbit"

- **Body text**
  - Descriptive paragraph beneath the title, drawn from: `ck_onboarding_1_body`
  - Example: "Leave your wallet at home. Use your Fitbit to pay at millions of contactless payment terminals."

- **Page indicator dots**
  - Row of 3 (or 4, if Suica is enabled) small circle dots at the bottom, indicating current position
  - Active dot is filled/solid black; inactive dots are semi-transparent black
  - Dots fade out as the user approaches the last page

- **No action buttons on this slide** (the primary "Get Started" and "See Supported Banks" buttons appear only on the last slide)

### Interactions

- **Swiping right** advances to Screen 2
- **Tapping the close (✕) button** dismisses the onboarding and returns the user to wherever they came from (no changes saved)
- **Page dots** are purely visual indicators and are not individually tappable

### Sample Data

| Element | Content |
|---|---|
| Title | "Pay with your Fitbit" |
| Body | "Leave your wallet at home. Use your Fitbit to pay at millions of contactless payment terminals worldwide." |
| Slide number | 1 of 3 |

---

## Payments Onboarding – Screen 2: "Add Your Card"

### Overview
The second slide of the payments onboarding carousel, explaining how to add a payment card to the user's Fitbit device.

### UI Elements

- **Toolbar (top)**
  - Close button ("✕") in the top-left corner

- **Illustration**
  - Large hero image (payments onboarding illustration #2 — depicts adding/entering a card)

- **Page title**
  - Text from: `ck_onboarding_2_title`
  - Example: "Add your card"

- **Body text**
  - Text from: `ck_onboarding_2_body`
  - Example: "Add a credit or debit card to your Fitbit account to start making payments."

- **Page indicator dots**
  - Row of 3 or 4 circles; second dot is now active (solid)

- **No action buttons on this slide**

### Interactions

- **Swiping left** returns to Screen 1
- **Swiping right** advances to Screen 3
- **Tapping the close (✕) button** dismisses onboarding entirely

### Sample Data

| Element | Content |
|---|---|
| Title | "Add your card" |
| Body | "Add a supported credit or debit card from a supported bank to your Fitbit account." |
| Slide number | 2 of 3 |

---

## Payments Onboarding – Screen 3: "Tap to Pay"

### Overview
The third slide of the payments onboarding carousel, explaining how to make a payment at a terminal; this is the last standard slide and includes primary call-to-action buttons.

### UI Elements

- **Toolbar (top)**
  - Close button ("✕") in the top-left corner

- **Illustration**
  - Large hero image (payments onboarding illustration #3 — depicts holding a Fitbit to a payment terminal)

- **Page title**
  - Text from: `ck_onboarding_3_title`
  - Example: "Tap to pay"

- **Body text**
  - Text from: `ck_onboarding_3_body`
  - Example: "Hold your Fitbit near a contactless terminal to pay. It's fast, easy, and secure."

- **Page indicator dots**
  - Row of 3 circles; third/last dot is now active
  - Dots begin fading out as the user arrives at this last page (opacity transitions to 0)

- **Primary action button**
  - Label: "Get Started" (from `ck_onboarding_get_started`)
  - Full-width, pink/coral button
  - Visible when the "hide call to action" flag is not set

- **Secondary action button**
  - Label: "See Supported Banks" (from `ck_onboarding_see_supported_banks`)
  - Appears below the primary button
  - Allows user to view which banks are supported before committing

### Interactions

- **Tapping "Get Started"** completes onboarding and navigates forward — either to the Add Card flow or to whatever destination was configured when launching this screen (e.g., account linking, card provisioning). The screen closes with a success result.
- **Tapping "See Supported Banks"** opens a list or web page showing the banks/card issuers that support Fitbit Pay
- **Swiping left** returns to Screen 2
- **Tapping the close (✕) button** dismisses onboarding without completing it; navigates back

### Sample Data

| Element | Content |
|---|---|
| Title | "Tap to pay" |
| Body | "Just hold your Fitbit near any contactless payment terminal and you're done." |
| Primary button | "Get Started" |
| Secondary button | "See Supported Banks" |
| Slide number | 3 of 3 |

---

## Payments Onboarding – Screen 4 (Suica variant): "Add a Suica Card"

### Overview
An optional fourth onboarding slide shown only when the Suica transit card feature is enabled (Japan-specific), explaining how to add and use a Suica card on a Fitbit device.

### UI Elements

- **Toolbar (top)**
  - Close button ("✕") in the top-left corner

- **Illustration**
  - Large hero image specific to Suica (payments onboarding Suica illustration — depicts a transit gate or IC card reader)

- **Page title**
  - Text from: `ck_onboarding_suica_title`
  - Example: "Add a Suica Card"

- **Body text**
  - Text from: `ck_onboarding_suica_body`
  - Example: "Charge a Suica card and use your Fitbit to ride trains and buses, or pay at stores across Japan."

- **Page indicator dots**
  - Row of 4 circles; fourth dot is now active
  - Dots fade out on this final slide

- **"See Supported Banks" link/button**
  - Shown below content (same as the standard last-slide secondary action)
  - Label: "See Supported Banks" (from `ck_onboarding_see_supported_banks`)

- **No primary "Get Started" button** on this slide (the primary CTA button does not appear on the Suica slide per the code logic — `hideCallToAction` behavior for this panel)

### Interactions

- **Swiping left** returns to Screen 3
- **Tapping "See Supported Banks"** opens supported bank/card information
- **Tapping the close (✕) button** dismisses onboarding

### Sample Data

| Element | Content |
|---|---|
| Title | "Add a Suica Card" |
| Body | "Use your Fitbit to ride trains, buses, and pay at stores. Charge your Suica card anytime from the Fitbit app." |
| Secondary button | "See Supported Banks" |
| Slide number | 4 of 4 |

---

## Payments Onboarding – Dismissed / Loading State

### Overview
A transitional state shown briefly while the onboarding result is being processed — specifically when the onboarding was launched from another screen that needs to receive the result (e.g., device setup, account linking).

### UI Elements

- No visible UI is shown to the user — the screen closes immediately after:
  - The "Get Started" button is tapped (success path), **or**
  - The close button is tapped (cancel path)

- The screen communicates the result (completed or cancelled) back to the calling screen and then closes itself automatically.

### Interactions

- **Success path (Get Started tapped):** Navigates forward to the next step in the calling flow (e.g., Add Card screen or account setup continuation)
- **Cancel path (close button or back navigation):** Returns the user to the previous screen with no changes made
<!-- source-hash:c9aeb2b43929 -->

---

# Profile & Account — Screen Specifications

---

## User Profile (Own Profile)

### Overview
The user views and manages their own Fitbit profile, including their display name, avatar, about me text, stats, badges, and friend connections.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Title: user's display name (e.g., "Jordan M.")
- No overflow menu when viewing own profile (report/block options only appear on other users' profiles)

**Profile Header Section**
- Large circular profile photo (avatar)
- Display name in bold (e.g., "Jordan M.")
- "About me" bio text (e.g., "Running enthusiast. Hitting 10,000 steps daily.")
- Member since date (e.g., "Member since March 2021")
- Friend count (e.g., "12 Friends")

**Stats/Activity Summary**
- Recent step count or featured stat (e.g., today's steps: 8,432)
- Badges section — horizontal scroll or grid of earned badge icons with badge name beneath each (e.g., "10,000 Steps", "Marathoner", "Boat Race")

**Social Actions (own profile)**
- Edit Profile button (navigates to profile editing)

### Interactions
- Tapping profile photo → opens photo selection/edit options (only on own profile)
- Tapping "Friends" count → navigates to Friends list
- Tapping a badge → opens badge detail sheet showing badge name, description, and date earned
- Tapping "Edit Profile" → navigates to Edit Profile screen

### Sample Data
- Name: Sarah K.
- Bio: "Chasing goals one step at a time 🏃‍♀️"
- Member since: January 2020
- Friends: 24
- Recent badges: "Penguin March" (70 lifetime miles), "Happy Hill" (earned Oct 12)

---

## Friend's Profile

### Overview
The user views another Fitbit user's public profile, sees their stats, badges, and can take social actions like sending a friend request or removing a friend.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Title: the friend's display name (e.g., "Alex T.")
- Overflow menu (three-dot) — appears when viewing another user's profile, containing:
  - "Report" (if blocked status applies, options adjust)
  - "Remove Friend" (only shown if already friends)
  - "Block" (label varies: shown as block option for friends or non-friends)

**Profile Header Section**
- Circular profile photo (avatar)
- Display name (bold)
- "About me" bio text
- Member since date
- Friend count

**Shared Stats / Leaderboard**
- Step count comparison or recent activity visible per privacy settings
- Badges earned (grid or list of badge icons)
- "Cheer" and "Taunt" action buttons (labeled "Cheer" and "Taunt") — appear for friends on leaderboard

**Social Action Buttons**
- "Accept Friend" / "Add Friend" button (if not yet friends)
- "Accept" button with supporting text: "Friends see the info you choose to share in privacy settings"

### Interactions
- Tapping overflow menu → reveals report/block/remove options
- Tapping "Remove Friend" → shows confirmation dialog (see Remove Friend Dialog below)
- Tapping "Block" → initiates block flow, navigates away from profile
- Tapping "Report" → launches Report User flow (see Report User screen)
- Tapping "Cheer" → sends cheer to that user's leaderboard entry
- Tapping "Taunt" → sends taunt
- Tapping "Accept Friend" → accepts pending friend invitation; screen updates to show friend status

### Sample Data
- Name: Marcus W.
- Bio: "Weekend warrior. Cyclist & hiker."
- Member since: June 2019
- Friends: 8
- Badges: "Boat Race", "Sneakers", "Trail Shoe"

---

## Remove Friend Confirmation Dialog

### Overview
A dialog asking the user to confirm they want to remove a specific person from their friends list.

### UI Elements
- Dialog title (from `remove_friend_confirmation_dialog_title` string resource)
- Confirmation message body explaining what removing a friend means
- "OK" / "Confirm" button — confirms removal
- "Cancel" button — dismisses without action

### Interactions
- Tapping "Confirm" → removes friend, closes dialog, returns to profile (friend status reflected in UI)
- Tapping "Cancel" → dismisses dialog, no changes

### Sample Data
- Dialog title: "Remove Friend"
- Message: "Are you sure you want to remove Marcus W. from your friends?"

---

## Report User

### Overview
The user reports another Fitbit user for abusive or inappropriate behavior by selecting a reason and optionally providing additional detail.

### UI Elements

**Header/Toolbar**
- Back arrow or close (X) button
- Title: "Report" (inferred from moderation flow)

**Reason Selection**
- Section header: "Select all the places this occurred"
- Checklist of abuse method options (multi-select checkboxes):
  - "In a Challenge or Adventure"
  - "Outside the Fitbit app"
  - "In a group"
  - "From a private message"
  - "From a post or comment"
  - "On their profile"

**Comment / Details Field**
- Text input area labeled something like "Additional details" or "Tell us more"
- Placeholder/hint text prompting the user to describe what happened

**Submit Button**
- Full-width button: "Submit" or "Send Report"
- Enabled once at least one reason is selected

### Interactions
- Tapping a checkbox → selects/deselects that abuse method; multiple can be selected simultaneously
- Typing in the comment field → captures user's free-text description
- Tapping "Submit" → sends the report, closes the screen, returns to the profile
- On successful submission → a confirmation snackbar or dialog appears:
  - Title: "Feedback sent"
  - Body: confirms the report was received
  - "OK" button to dismiss
  - Optional: "Block User" button — tapping blocks the reported user

### Sample Data
- Reported user: Marcus W.
- Selected methods: "On their profile", "From a post or comment"
- Comment: "This user posted offensive content on my activity."

---

## Report Confirmation Dialog

### Overview
After successfully submitting a report, a dialog confirms the report was received and offers the option to block the reported user.

### UI Elements
- Dialog title: "Feedback sent" (`moderation_feedback_sent`)
- Body text: confirmation that the report was submitted (`profile_report_success_confirm`)
- "OK" button — dismisses the dialog
- "Block User" button (`profile_report_success_block_user_button`) — optionally blocks the user

### Interactions
- Tapping "OK" → dismisses dialog, returns to previous screen
- Tapping "Block User" → blocks the reported user and dismisses dialog

### Sample Data
- Title: "Feedback sent"
- Body: "Thanks for letting us know. We'll look into this."
- Buttons: "OK" | "Block User"

---

## Account Section (Wellness / Account Settings Hub)

### Overview
The user sees a grouped list of account-level settings and management options organized as a scrollable menu.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Title: "Wellness" (`activity_wellness` string)

**Settings List (RecyclerView)**
Grouped rows, each tappable, navigating to sub-screens:

*Account Management group:*
- "Manage your account" (section header or entry, `account_management_title`)
- "Change email" (`account_management_change_email`)
- "Change password" (`account_management_change_password`)
- "Two-factor authentication" (`account_management_two_factor_authentication`)
- "Delete account" (`account_management_delete_account`)
- "Move your Fitbit to a Google Account" (`account_management_move_account_title`) with subtext: "Get the industry-leading security and convenience of your Google Account with Fitbit" and "Move Account" call-to-action

*Privacy group:*
- "Privacy" (`account_privacy_settings`) — navigates to Privacy Settings

*Premium group (if eligible):*
- "Get Fitbit Premium" (`account_menu_premium_upsell`)
- "Membership benefits" (`account_menu_premium_membership_benefits`)

### Interactions
- Tapping any row → navigates to the corresponding sub-screen
- Pull-to-refresh (if applicable) → refreshes account state
- Back arrow → returns to previous screen

### Sample Data
- Logged in as: sarah@example.com
- Premium status: active

---

## Manage Account

### Overview
The user manages core account credentials and security options from a single screen.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Manage your account" (`account_management_settings_title`)

**Options List:**
- "Change email" — tappable row, navigates to Change Email screen
- "Change password" — tappable row, navigates to Change Password screen
- "Two-factor authentication" — tappable row, navigates to 2FA settings
- "Delete account" — tappable row (destructive), navigates to Delete Account screen
- "Move your Fitbit to a Google Account" — card or row with:
  - Title: "Move your Fitbit to a Google Account"
  - Subtext: "Get the industry-leading security and convenience of your Google Account with Fitbit"
  - Button: "Move Account"

### Interactions
- Tapping "Change email" → navigates to Change Email flow
- Tapping "Change password" → navigates to Change Password flow
- Tapping "Two-factor authentication" → navigates to 2FA screen
- Tapping "Delete account" → navigates to Delete Account confirmation flow
- Tapping "Move Account" → initiates Google Account migration flow

### Sample Data
- Current email: sarah@example.com
- 2FA status: Disabled

---

## Manage Connected Devices & Apps

### Overview
The user views all devices and third-party apps currently signed in or connected to their Fitbit account and can revoke access.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Manage access to account" (`account_access_management_settings_title`)

**Intro Text**
- "These devices are signed in now to your Fitbit account. Select a device to get details or revoke access to just that device." (`account_access_text_info`)

**Section: Connected Devices**
- Label: "Manage connected devices" (`account_access_management_manage_devices`)
- Scrollable list of connected devices (RecyclerView); each item shows:
  - Device name (e.g., "Fitbit Charge 6")
  - Device type icon
  - Last sync or connected date

**Section: Connected Apps**
- Label: "Manage connected apps" (`account_access_management_manage_apps`)
- List of third-party apps with Fitbit authorization; each item shows:
  - App name
  - Permissions summary

**Loading State**
- Progress spinner centered on screen
- Text below spinner: "Retrieving device list…" (`retrieving_device_list`)

**Empty / Error State**
- Empty message if no connected devices found

### Interactions
- Tapping a device row → navigates to Device Info screen showing details and option to revoke access
- Tapping an app row → navigates to app authorization detail with revoke option
- Pull-to-refresh → refreshes connected device/app list

### Sample Data
- Device 1: Fitbit Versa 4, last synced today at 2:14 PM
- Device 2: Fitbit Charge 6, last synced yesterday at 8:00 AM
- App: MyFitnessPal (read activity, calories)

---

## Privacy Settings

### Overview
The user controls what health and activity data is visible to friends, groups, or the public.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: "Privacy" (from `account_privacy_settings`)

**Settings List**
- Each privacy category appears as a row with:
  - Category name (e.g., "Step Count", "Exercise", "Sleep")
  - Current visibility setting (e.g., "Friends", "Only Me", "Public")
  - Chevron/arrow indicating it's tappable

### Interactions
- Tapping a privacy row → navigates to Edit Privacy Setting screen for that specific category
- Back arrow → saves changes and returns

### Sample Data
- Step Count: Friends
- Sleep: Only Me
- Exercise: Public
- Heart Rate: Only Me

---

## Edit Privacy Setting

### Overview
The user selects who can see a specific piece of health or activity data.

### UI Elements

**Header/Toolbar**
- Back arrow
- Title: name of the data category being edited (e.g., "Step Count")

**Option List (radio buttons / selection list)**
- "Public" — anyone can see this
- "Friends" — only Fitbit friends can see this
- "Only Me" — private, no one else can see

**Currently selected option** is visually indicated (checkmark, filled radio button)

### Interactions
- Tapping an option → immediately selects it (radio behavior, one selection at a time)
- Back arrow → saves selection and returns to Privacy Settings

### Sample Data
- Category: Sleep
- Current setting: Only Me
- Options: Public / Friends / Only Me

---

## Accept Friend Invite

### Overview
The user reviews a pending friend request from another Fitbit user and decides whether to accept.

### UI Elements

**Title:** "Accept friend invite?" (`accept_friend_invite_title`)

**Subtitle/Sender Info:**
- "%1$s wants to be friends" (e.g., "Jordan P. wants to be friends") (`accept_friend_invite_sub_title`)

**Info Text:**
- "If you accept, they'll see your display name, profile photo, about me info, and the date you joined. They'll also see your step count unless you've changed your privacy settings, and other info you've chosen to share with friends and groups." (`accept_friend_invite_description_message`)

**Additional note:**
- "Friends see the info you choose to share in privacy settings" (`accept_friend_request_message`)

**Action Buttons:**
- "Accept" (`accept_friend_request_button_text`) — primary button, teal/pink style
- "Decline" or "Ignore" — secondary button

### Interactions
- Tapping "Accept" → accepts the request; both users become friends; screen closes or confirms
- Tapping "Decline" → declines the invitation; screen closes

### Sample Data
- Sender: Jordan P.
- Profile photo: circular avatar
<!-- source-hash:bd496ea054c4 -->

---

# Family & Kids — Screen Specifications

---

## Family Account (Family Overview)

### Overview
The Family Account screen is the central hub where a family owner or guardian views and manages all family members — guardians, regular members, and children — and can add new members.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Screen title (implied by context; no explicit title string shown, but this is the family management hub)
- Overflow menu with contextual options:
  - **"Leave family"** — visible only to non-owner, non-child members
  - **"Delete family"** — visible only to the family owner (when family has more than 1 member, a warning appears; when only 1 member, the family is deleted directly)

**Member List (scrollable)**
The list is organized into three labeled sections:

1. **Guardians** section header
   - Each guardian row shows: profile avatar, display name, role badge ("Guardian" or "Owner")
   - Long-press on a guardian row opens a context menu

2. **Members** section header
   - Each member row shows: profile avatar, display name
   - Long-press opens a context menu

3. **Children** section header
   - Each child row shows: profile avatar, display name, child indicator
   - Long-press opens a context menu

**Pull-to-Refresh**
- Swipe down on the list to refresh member data (teal/accent spinner)

**Floating Action Button (FAB) — expandable speed dial**
- Main FAB (bottom-right corner, pink/accent): tapping expands to show three sub-options
- When expanded, a semi-transparent overlay covers the list; tapping the overlay collapses the FABs
- Sub-FABs with labels:
  - **"Child"** — add a child account
  - **"Member"** — add a family member
  - **"Guardian"** — add a guardian

**"Switch to Parent View" button**
- A button visible to child accounts or specific roles to switch the app view

**Context Menus (long-press on member row)**

*For a guardian/member:*
- **"Make guardian"** — promotes the member to guardian role
- **"Revoke guardian"** — removes guardian rights (shows confirmation dialog)
- **"Remove"** — removes the member from the family (shows confirmation dialog)

*For a child:*
- **"Remove"** — triggers the Delete Child Account screen (child removal is permanent deletion)

**Confirmation Dialogs**

- **Revoke Guardian dialog:**
  - Title: "Remove [Name]'s rights" (derived from `dialog_member_remove_rights_title`)
  - Message: body text about removing rights
  - Buttons: confirm action / "Cancel"

- **Remove Member dialog:**
  - Title: "Remove [Name]?" (derived from `dialog_member_delete_title`)
  - Message: "[Name] will be removed from your family." (derived from `dialog_member_delete_message`)
  - Confirm button / "Cancel"

- **Confirm Guardian Status dialog:**
  - Title: "Confirm guardian status" (`confirm_guardian_status`)
  - Body: "Confirm password to add child" (`confirm_password_add_child`)
  - Triggered when promoting someone to guardian

- **Send Predefined Message sheet:**
  - When a guardian's age is set to private, the app prompts to send a predefined message to that user instead of proceeding silently

### Interactions

- **Tap a member row** → Opens that member's profile page (passes current user context and whether the tapped user is a child)
- **Long-press a member row** → Opens the context menu for that member
- **Tap main FAB** → Expands the three sub-FABs with labels and shows overlay
- **Tap overlay (when FABs expanded)** → Collapses FABs and hides overlay
- **Tap "Child" FAB / label** → Navigates to the Create Child Account flow
- **Tap "Member" FAB / label** → Navigates to invite a family member flow
- **Tap "Guardian" FAB / label** → Navigates to invite a guardian flow
- **Tap "Make guardian" (context menu)** → Shows confirm guardian status dialog; on confirm, API call promotes member
- **Tap "Revoke guardian" (context menu)** → Shows revoke confirmation dialog; on confirm, API call revokes
- **Tap "Remove" (context menu, regular member)** → Shows remove member confirmation dialog; on confirm, API call removes member
- **Tap "Remove" (context menu, child)** → Navigates to Delete Child Account screen
- **Pull to refresh** → Reloads the family member list from server
- **Overflow → "Leave family"** → API call to leave the family; user is navigated away
- **Overflow → "Delete family"** → If multiple members exist, shows warning. If last member, immediately deletes family via API

### Sample Data

```
GUARDIANS
● Sarah Chen (Owner)
● Mike Chen (Guardian)

MEMBERS
● grandma_rose

CHILDREN
● Lily Chen (age 9)
● Tom Chen (age 12)
```

---

## Add Child Profile (About the Kid)

### Overview
A form screen where a parent or guardian enters their child's profile information — name, username, gender, birthday, and height — to create a child Fitbit account.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Title: "Add a child" (`add_child_title_activity`)

**Scrollable Form**

*Section 1 — Basic Info*

- **Label:** "First name" (`child_first_name`)
- **First Name input field**
  - Placeholder hint: "Enter first name" (`hint_child_first_name`)
  - Keyboard type: person name
  - Focus advances to username field on next

- **Label:** "Username" (`child_user_name`)
- **Username input field**
  - Placeholder hint: "Enter username" (`hint_child_user_name`)
  - Keyboard type: text
  - Focus advances to gender field on next

- **Info text below username:** helper text explaining username rules (`pick_username_info`)

*Divider line*

- **Section header:** "PERSONAL STATS" (`header_personal_stats`) — displayed in bold teal, 14sp

- **Label:** "Gender" (`profile_gender`)
- **Gender selector** — read-only tap-to-open field (no keyboard); tapping opens a gender picker

- **Label:** "Birthday" (`child_birthday`)
- **Birthday selector** — read-only tap-to-open field; tapping opens a date picker

- **Label:** "Height" (`child_height`)
- **Height picker** — an inline custom length/unit picker (feet+inches or cm depending on user locale)

- **Disclaimer text** at bottom: informational note about child personal stats (`disclaimer_child_personal_stats`), padded below height

**Primary Action Button**
- **"Next"** (`next`) — full-width pink button at the bottom of the screen, outside the scroll area
- Initially **disabled** until required fields are filled in
- Becomes enabled when all required fields have valid values

### Interactions

- **Typing in First Name** → enables Next button validation to update in real time
- **Typing in Username** → validates uniqueness/format; info text remains visible below
- **Tap Gender field** → opens a bottom sheet or dialog with gender options (e.g., Male, Female, Non-binary); selection populates the field
- **Tap Birthday field** → opens a date picker dialog; selected date populates the field; age is validated (must be a minor)
- **Adjusting Height picker** → scroll wheels for feet/inches or centimeters update the field value inline
- **Tap "Next" (enabled)** → validates all fields and proceeds to the next step in the child onboarding flow (e.g., setup tracker or account created confirmation)
- **Tap back arrow** → returns to the previous screen without saving

### Sample Data

```
First name: Lily
Username: lily_fitbit_2024
  ℹ️ Usernames can include letters, numbers, and underscores

── PERSONAL STATS ──────────────

Gender: Female
Birthday: March 14, 2015
Height: 4 ft 4 in

[Info: Your child's personal stats help Fitbit calculate more accurate data.]

[Next]
```

---

## Delete Child Account

### Overview
A confirmation screen that warns a parent/guardian about permanently deleting a child's Fitbit account, showing the child's profile details before requiring confirmation.

### UI Elements

**Header/Toolbar**
- Back arrow (navigate up)
- Info icon (top-right) — opens a help article about account deletion

**Profile Card Area**
- Child's **profile photo** (circular avatar)
- **Username / display name** text
- **Email address** text (for adult accounts; may be absent for child accounts)
- **Premium halo ring** around avatar (visible if the account has Fitbit Premium)

**Body Text**
- **Header title:** "Delete child account" (`delete_kid_account_header`)
- **Body message:** "Are you sure you want to delete this child's account? This action cannot be undone." (`delete_kid_account_message`)

**Action Button**
- **"Delete account"** (`delete_kid_account_btn`) — prominent button (typically red/destructive styling)

**Confirmation Dialog** (appears when the delete button is tapped)
- Title: "Delete child account?" (`delete_kid_account_popup_title`)
- Message: "This will permanently delete all data for this child. This cannot be undone." (`delete_kid_account_popup_message`)
- Buttons: **Confirm delete** / **Cancel**

**On confirmation:**
- A loading/progress state is shown while the API call completes
- On success, the user is navigated back to the Family Account screen and the child is removed from the list

### Interactions

- **Tap info icon (toolbar)** → Opens Fitbit Help article #1285 in a web view (about account deletion)
- **Tap "Delete account" button** → Shows the confirmation dialog
- **Tap "Confirm" in dialog** → Initiates deletion API call; shows loading indicator; on success returns to Family Account
- **Tap "Cancel" in dialog** → Dismisses the dialog, no action taken
- **Tap back arrow** → Returns to Family Account screen without any changes

### Sample Data

```
[Profile photo: Lily's avatar]
lily_fitbit_2024

Delete child account

Are you sure you want to delete this child's account?
This action cannot be undone.

[Delete account]
```

---

## Child Account Created (Confirmation)

### Overview
A success screen displayed after a child's Fitbit account has been successfully created, confirming the setup is complete and providing next steps.

### UI Elements

- Success illustration or animation (checkmark / celebratory graphic)
- **Confirmation heading** — e.g., "Account created!" or similar success message
- **Child's name and username** displayed as a summary
- **Body text** — explains what the parent can do next (e.g., set up a tracker for the child, manage parental controls)
- **Primary action button** — "Set up tracker" or "Done" to continue the flow
- **Secondary link/button** — "Do this later" to skip tracker setup

### Interactions

- **Tap "Set up tracker"** → Navigates to the tracker pairing/setup flow for the child's device (`SetupKidTrackerActivity`)
- **Tap "Do this later" / "Done"** → Returns to the Family Account screen where the new child is now visible in the Children section

### Sample Data

```
🎉 Account created!

Lily Chen's Fitbit account is ready.
Username: lily_fitbit_2024

You can now set up a Fitbit device for Lily,
or manage her account from the Family tab.

[Set up tracker]
[Do this later]
```

---

## Setup Kid Tracker (Pair Child's Device)

### Overview
A guided setup screen that walks the parent through pairing a Fitbit tracker to the newly created child account.

### UI Elements

- **Toolbar** with back navigation
- **Step indicator** or progress dots (if multi-step)
- **Illustration** of a supported kids' tracker (e.g., Fitbit Ace)
- **Heading text** — "Set up [Child's Name]'s tracker"
- **Subheading/description** — instructions for putting the device in pairing mode
- **Device selection list** — if multiple tracker types are available, shows compatible devices with name and image
- **Primary button** — "Continue" or "Start pairing"

### Interactions

- **Tap a device from the list** → Selects that device type and advances to Bluetooth pairing
- **Tap "Continue"** → Advances to the next step in the pairing wizard
- **Tap back** → Returns to the Child Account Created screen or Family Account

### Sample Data

```
Set up Lily's tracker

Put the Fitbit Ace 3 in pairing mode by pressing
the button on the side for 3 seconds.

[Image of Fitbit Ace 3]

[Start pairing]
```

---

## Family Account Onboarding (Introduction)

### Overview
A multi-page introductory carousel that introduces the Fitbit Family Account feature to new users before they create or join a family.

### UI Elements

- **Toolbar** with an **X (close)** button to dismiss the onboarding entirely
- **ViewPager carousel** — swipeable pages, each with:
  - Full-screen illustration
  - Headline text
  - Body description text
- **Page indicator dots** at the bottom — filled dot = current page, outlined = other pages
- Active dots styled in black; inactive dots in semi-transparent black

**Typical pages (inferred from the onboarding pattern):**
1. *Welcome to Family Accounts* — intro to the feature
2. *Stay connected* — parents can monitor kids' activity
3. *Manage your family* — add/remove members, set up devices

### Interactions

- **Swipe left/right** on the carousel → navigates between onboarding pages
- **Tap page indicator dot** → jumps to that page
- **Tap X (close)** → dismisses onboarding and returns to the previous screen
- **On last page:** a "Get started" or "Next" button advances to the family creation/joining flow

### Sample Data

```
• • ◉ ← page 3 of 3

[Illustration: parent and child with Fitbit devices]

Stay in sync with your family

Track activity together, set goals, and
stay motivated as a family unit.

[Get started]
```
<!-- source-hash:c3d064f2c97d -->

---

# Settings & Privacy — UI Specification

---

## Privacy Settings

### Overview
The user views and adjusts who can see their profile, personal, and web-related information, organized into labeled sections of tappable rows.

### UI Elements

**Header / Toolbar**
- Back arrow (navigates up/back)
- Title: "Privacy" (from `privacy_title`)

**Loading State**
- While data is fetching: a centered spinner (progress bar) is shown in place of the list
- On fetch failure: an error message reading "There was a problem fetching your notifications" (from `notif_fetch_error`) replaces the list

**Section: Profile** (header label: from `privacy_profile_header`, e.g. "Profile")
- A bold section header row
- List of privacy setting rows, each showing:
  - Setting name (e.g., "Display name", "Profile photo", "About me info", "Date joined")
  - Current visibility value (e.g., "Everyone", "Friends", "Only me") shown as a subtitle or trailing label
  - Chevron/arrow indicating it is tappable

**Section: Personal** (header label: from `privacy_personal_header`, e.g. "Personal Stats")
- A bold section header row
- List of privacy setting rows in the same format as Profile section (e.g., step count, sleep data, exercise logs)

**Section: Web** (header label: from `privacy_web_header`, e.g. "Fitbit.com")
- A bold section header row (only shown for adult accounts; hidden in child/family mode)
- List of privacy setting rows in the same format
- Footer text below this section: a brief informational/disclaimer note (from `privacy_web_footer`) with possible links

**Error / Offline Banner**
- If the device loses connectivity, a Snackbar notification appears at the bottom of the screen informing the user of the network issue

### Interactions
- **Tapping any privacy setting row** → navigates to the Edit Privacy Setting screen for that specific setting
- **Back arrow** → returns to the previous screen (e.g., Account settings)
- **Pull to refresh / re-enter screen** → reloads privacy settings from the server
- **Network restored** → settings automatically reload; spinner reappears during reload

### Sample Data
| Section | Setting Name | Current Value |
|---|---|---|
| Profile | Display name | Everyone |
| Profile | Profile photo | Friends |
| Profile | About me | Friends |
| Personal Stats | Step count | Friends |
| Personal Stats | Sleep | Only me |
| Personal Stats | Weight | Only me |
| Fitbit.com | Profile page | Everyone |
| Fitbit.com | Fitness data | Only me |

---

## Edit Privacy Setting

### Overview
The user selects a new visibility level for a single privacy setting (e.g., who can see their step count).

### UI Elements

**Header / Toolbar**
- Back arrow (saves or cancels, returns to Privacy Settings)
- Title: the name of the setting being edited (e.g., "Step count")

**Visibility Option List**
- A scrollable list of radio-button-style rows, one per visibility option:
  - **Everyone** — anyone on Fitbit can see this
  - **Friends** — only your Fitbit friends can see this
  - **Only me** — only you can see this
- The currently selected option has a filled/highlighted radio button
- Each row shows the option label and a brief description of who that includes

**Save / Confirm Action**
- Changes may be saved automatically on selection (no explicit Save button), or a "Save" or "Done" button in the toolbar

**Error Feedback**
- If saving fails, a Snackbar message appears: "A network error occurred. Please try again later." (from `a_network_error_occurred_please_try_again_later`)

### Interactions
- **Tapping a visibility option** → selects it, highlights the radio button, and triggers an immediate save to the server (or enables a Save button)
- **Back arrow** → returns to the Privacy Settings screen; if auto-save is not used, the user may be asked to confirm discarding unsaved changes
- **Successful save** → the new value is reflected back on the Privacy Settings list

### Sample Data
- Setting being edited: "Step count"
- Options: Everyone (currently selected), Friends, Only me
- After tapping "Only me" → radio moves to "Only me", a brief saving indicator appears, then the screen returns to Privacy Settings showing "Only me" next to "Step count"

---

## Account Settings (Manage Your Account)

### Overview
The user sees a list of account management actions such as changing their email, password, and enabling two-factor authentication.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Manage your account" (from `account_management_settings_title`)

**Setting Rows (scrollable list)**
Each row has a label and a chevron:

| Row Label | String Key |
|---|---|
| Change email | `account_management_change_email` |
| Change password | `account_management_change_password` |
| Two-factor authentication | `account_management_two_factor_authentication` |
| Delete account | `account_management_delete_account` |

**Optional Promotional Banner** (shown to eligible users)
- Title: "Move your Fitbit to a Google Account" (from `account_management_move_account_title`)
- Subtitle: "Get the industry-leading security and convenience of your Google Account with Fitbit" (from `account_management_move_account_subhead`)
- Button: "Move Account" (from `account_management_move_account_call_to_action`)

### Interactions
- **Change email** → navigates to Change Email screen
- **Change password** → navigates to Change Password screen
- **Two-factor authentication** → navigates to Two-Factor Authentication screen
- **Delete account** → navigates to Delete Account confirmation screen
- **Move Account** → begins the account migration flow to Google Account
- **Back arrow** → returns to the previous settings screen

### Sample Data
- User email: sarah.jones@email.com
- Two-factor authentication status: Off
- "Move Account" banner visible for users who have not yet migrated

---

## Manage Access to Account

### Overview
The user views all devices and connected apps currently signed in to their Fitbit account, and can revoke access from any of them.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Manage access to account" (from `account_access_management_settings_title`)

**Informational Text**
- Body: "These devices are signed in now to your Fitbit account. Select a device to get details or revoke access to just that device." (from `account_access_text_info`)

**Two Sections:**

*Section: Connected Devices*
- Label: "Manage connected devices" (from `account_access_management_manage_devices`)
- A list of device rows, each showing:
  - Device name (e.g., "iPhone 14 – Safari")
  - Last access date/location (e.g., "Last active: 2 days ago")
  - Chevron indicating it is tappable

*Section: Connected Apps*
- Label: "Manage connected apps" (from `account_access_management_manage_apps`)
- A list of app rows, each showing:
  - App name (e.g., "MyFitnessPal")
  - Permission level or date connected
  - Chevron

**Loading State**
- While the device/app list loads: a centered spinner with message "Retrieving your connected device list" (from `retrieving_device_list`) is shown
- Once loaded, the list replaces the spinner

**Pull-to-Refresh**
- Swipe down to reload the list from the server

### Interactions
- **Tapping a device row** → opens a Device Info screen with details and a "Revoke access" option for that device
- **Tapping an app row** → opens an App Authorization detail screen with a "Revoke access" option
- **Pull-to-refresh** → reloads the list; spinner reappears during reload
- **Back arrow** → returns to Account Settings

### Sample Data
- Connected devices: "Chrome on Windows · Last active today", "Fitbit Charge 6 · Synced 1 hour ago"
- Connected apps: "MyFitnessPal · Connected Mar 2023", "Strava · Connected Jan 2024"

---

## Two-Factor Authentication

### Overview
The user enables or disables two-factor authentication (TFA) on their account to add an extra layer of login security.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Two-factor authentication" (from `account_management_two_factor_authentication`)

**Status Row**
- Shows current TFA status: "ON" or "OFF" (from `abc_capital_on` / `abc_capital_off`)

**Description Text**
- Explains what two-factor authentication is and why it's recommended

**Enable / Disable Button**
- If TFA is OFF: primary action button labeled "Enable two-factor authentication"
- If TFA is ON: secondary or destructive button labeled "Disable two-factor authentication"

**Phone Number / Authenticator App Section** (when TFA is enabled)
- Shows the registered phone number or authenticator method (partially masked, e.g., "•••-•••-4821")
- Option to change the phone number

### Interactions
- **Enable button** → starts the TFA setup flow (phone number entry → code verification)
- **Disable button** → shows a confirmation dialog before disabling TFA; on confirm, sends a request to disable
- **Change phone number** → opens TFA code entry screen to re-verify with new number
- **Back arrow** → returns to Account Settings

### Sample Data
- Current status: OFF
- After enabling: "ON", phone ending in 4821 shown

---

## Change Email

### Overview
The user enters a new email address to replace the one associated with their Fitbit account.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Change email" (from `account_management_change_email`)

**Form Fields**
- Label: "New email address"
- Text input (email keyboard type), placeholder: e.g., "Enter new email"
- Label: "Confirm new email address"
- Text input (email keyboard type), placeholder: e.g., "Re-enter new email"
- Label: "Account password" (from `account_password`)
- Password text input (masked), placeholder: e.g., "Enter your current password"

**Submit Button**
- Label: "Save" or "Update email"
- Disabled until all fields are filled and valid

**Inline Validation**
- If emails don't match: error text beneath the confirm field
- If password is incorrect: error Snackbar or inline message

**Confirmation Message**
- After success: a dialog or banner: "Account verification email sent" (from `account_verification_popup_title`) with body "Check your email and verify your email address before continuing." (from `account_verification_popup_message`)

### Interactions
- **Typing in fields** → real-time validation; Submit button enables once all fields are valid
- **Tapping Submit** → sends change email request; on success shows verification message; on error shows network error Snackbar
- **Back arrow** → returns to Account Settings; unsaved changes are discarded

### Sample Data
- Current email: sarah.jones@email.com
- New email entered: sarah.jones.new@email.com

---

## Change Password

### Overview
The user enters their current password and a new password to update their account credentials.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Change password" (from `account_management_change_password`)

**Form Fields**
- Label: "Current password"
- Password input (masked)
- Label: "New password"
- Password input (masked)
- Label: "Confirm new password"
- Password input (masked)

**Password Requirements**
- Brief inline text listing password requirements (e.g., minimum 8 characters)

**Submit Button**
- Label: "Save" or "Update password"
- Disabled until all fields are filled

**Inline Validation**
- If new passwords don't match: error text beneath confirm field
- If current password is wrong: error message shown

### Interactions
- **Typing** → validates fields; enables Submit when all are valid and matching
- **Tapping Submit** → sends change password request; on success navigates back with a success Snackbar; on error shows error message
- **Back arrow** → returns to Account Settings; discards changes

### Sample Data
- All fields empty on load
- On success: brief "Password updated" Snackbar shown on Account Settings screen

---

## Delete Account

### Overview
The user initiates permanent deletion of their Fitbit account after reviewing consequences and confirming their intent.

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Delete account" (from `account_management_delete_account`)

**Warning Content**
- Icon: warning or caution icon
- Title: e.g., "Are you sure you want to delete your account?"
- Body text: explains what data will be permanently lost (activity history, profile, connections, etc.)

**Password Confirmation**
- Label: "Account password" (from `account_password`)
- Password input field (masked) to confirm intent

**Delete Button**
- Label: "Delete account"
- Styled as a destructive/red action button
- Disabled until password is entered

**Confirmation Dialog** (on tap of Delete)
- Title: "Delete account?"
- Body: "This action cannot be undone."
- Buttons: "Cancel" and "Delete" (destructive)

### Interactions
- **Typing password** → enables the Delete button
- **Tapping Delete** → shows confirmation dialog
- **Tapping "Delete" in dialog** → submits deletion request; on success logs the user out and navigates to a goodbye/logged-out screen
- **Tapping "Cancel" in dialog** → dismisses dialog, stays on Delete Account screen
- **Back arrow** → returns to Account Settings

### Sample Data
- Warning message explaining that all health data, friends, and achievements will be permanently lost
- After deletion: user is logged out and shown a "Your account has been deleted" screen
<!-- source-hash:e877bebfc327 -->

---

# Notifications & Permissions — Screen Specifications

---

## Notification Configuration (Device Notifications Setup)

### Overview
The user sees and configures which types of notifications (calls, texts, calendar events, and apps) are forwarded from their phone to their Fitbit device, along with how they can reply to those notifications.

### UI Elements

**Header / Toolbar**
- Back arrow (navigates up to previous screen)
- Title: inferred as "Notifications" (standard Fitbit toolbar for device setup screens)

**Loading State**
- While device data is being fetched: a full-screen centered indeterminate progress spinner is shown; the main content area is hidden.

**Main Content Area** (shown once device data loads)

The screen displays a list of toggleable notification categories supported by the connected device. The specific items shown depend on what the paired device supports. Possible rows include:

- **Calls** — Toggle row for incoming call notifications. Shown only if the device supports incoming call notifications.
- **Texts** — Toggle row for SMS/text message notifications. Shown only if the device supports text message notifications.
- **Calendar** — Toggle row for calendar event notifications. Shown only if the device supports calendar notifications.
- **Email / All Apps** — Toggle row(s) for general app notifications (email and all other apps). Shown only if the device supports app notifications.

Each row shows:
- Notification type name (e.g., "Calls", "Texts", "Calendar", "Email", "All Apps")
- On/Off toggle

**Enable Notifications Dialog / Prompt** (conditional)
- Shown when the user has notifications turned on in Fitbit, but the device's system notification listener is not enabled.
- Prompts the user to grant notification access to the Fitbit app.
- Dismissed automatically once notification access is granted.

**Quick Replies Sheet** (accessible from applicable notification type rows)
- Shown when the user taps a notification row that supports replies (e.g., Texts).
- Title: "Quick Replies"
- Displays options for reply types supported by the device:
  - **Text replies** — Shown if device supports text replies
  - **Emoji replies** — Shown if device supports emoji replies
- Allows the user to customize their quick reply options up to the device's maximum allowed count.

### Interactions

- **Toggle a notification type on/off** — Updates that notification type's enabled state on the device. The toggle flips immediately and syncs to the device. If enabling, the app may also attempt a Bluetooth pairing/bonding task with the device.
- **Tap a notification type row that supports replies** (e.g., Texts) — Opens the "Quick Replies" sheet, stacked on top of the current screen. Back navigation from the sheet returns to this screen.
- **Enable Notifications prompt appears** — If the user has notifications enabled but system permission is missing, a dialog prompts them to allow notification access. Once granted (or on resume), the prompt dismisses and the main list is shown.
- **Back button** — If the Quick Replies sheet is open and has unsaved changes pending, changes are finalized before navigating back. Otherwise, navigates to the previous screen and clears any pending notification listener request.

### State Changes
- When notification access is granted: the prompt dismisses and the notification rows appear.
- When a toggle is flipped: the row immediately reflects the new state; a sync to the device is triggered in the background.
- If the device cannot be found or a pairing error occurs: the screen closes automatically and returns to the previous screen.

### Sample Data

| Notification Type | Enabled |
|---|---|
| Calls | ON |
| Texts | ON |
| Calendar | OFF |
| Email | ON |
| All Apps | OFF |

Example Quick Replies sheet for "Texts" on a device that supports both text and emoji:
- **Text replies**: "Yes", "No", "On my way!", "Can't talk now"
- **Emoji replies**: 👍, ❤️, 😊

---

## Quick Replies Editor

### Overview
The user views and customizes the pre-set quick reply messages and/or emoji that will be available to send from their Fitbit device when they receive a supported notification (e.g., a text message).

### UI Elements

**Header / Toolbar**
- Back arrow
- Title: "Quick Replies" (from string `notification_quick_replies_title`)

**Reply Type Tabs or Sections**
Displayed based on device capability — one or both of:
- **Text replies section** — shown if device supports text replies (`supportsTextReplies = true` or `canCustomizeTextReplies = true`)
- **Emoji replies section** — shown if device supports emoji replies (`supportsEmojiReplies = true` or `canCustomizeEmojiReplies = true`)

**Text Replies List** (if supported)
- A list of editable text reply items, up to the device's maximum (`maxNumberOfTextReplies`)
- Each item shows:
  - The reply text (e.g., "Yes", "No", "On my way!")
  - An edit/delete control

**Emoji Replies Grid** (if supported)
- A grid of emoji, up to the device's maximum (`maxNumberOfEmojiReplies`)
- Each slot shows a selected emoji or an "Add" placeholder
- Tapping an emoji opens an emoji picker

**Add Reply Button** (Text section)
- Appears below the text reply list when fewer replies are present than the maximum
- Label: e.g., "Add reply"

**Smart Replies** (if device supports `supportsTextSmartReplies`)
- A toggle or informational row indicating smart/suggested reply support is available

### Interactions

- **Tap a text reply item** — Opens an inline editor or a dialog to edit the reply text; changes are saved on confirmation.
- **Tap delete on a text reply** — Removes that reply from the list.
- **Tap "Add reply"** — Adds a new blank text reply slot; user types a new reply.
- **Tap an emoji slot** — Opens an emoji picker; selected emoji replaces the slot.
- **Back arrow** — Returns to the Notification Configuration screen; any edits made are saved.

### State Changes
- As replies are added, edited, or removed, the list updates immediately.
- When the maximum reply count is reached, the "Add reply" button is hidden.
- If no replies exist, the list shows an empty state with a prompt to add replies.

### Sample Data

**Text Replies (max 5):**
1. Yes
2. No
3. On my way!
4. Can't talk now, will reply later
5. What's up?

**Emoji Replies (max 3):**
👍 ❤️ 😊

---

## Enable Notification Access (System Permission Prompt)

### Overview
The user is informed that the Fitbit app needs notification access permission on their phone in order to forward notifications to their device, and they are guided to grant that access.

### UI Elements

**Toolbar**
- Back arrow

**Informational Content**
- Illustrated graphic (device-specific image showing the tracker receiving a notification)
- Explanatory text: describes why notification access is needed — so the Fitbit app can read notifications on your phone and send them to your device.

**Primary Action Button**
- Label: "Next" or "Go to Settings" — takes the user to Android system notification access settings

**Secondary / Dismiss Action** (optional)
- Allows skipping this step

### Interactions

- **Tap "Next" / "Go to Settings"** — Opens Android's Notification Access settings screen, where the user can toggle the Fitbit app's notification listener permission on.
- **Grant permission in system settings and return** — On resume, the app detects the permission is now granted, dismisses the prompt, and shows the full notification configuration list.
- **Tap Back** — Dismisses the prompt; Fitbit notification forwarding remains off until the permission is granted.

### State Changes
- Once the system permission is granted: this prompt disappears and the main Notification Configuration screen becomes active.
- If the user returns without granting: the prompt is shown again on the next app resume as long as the user has notifications toggled on in the app.

### Sample Data

- Header: "Stay Connected on Your Fitbit"
- Body: "To get calls, texts, and app alerts on your device, allow Fitbit to access your notifications."
- Button: "Go to Settings"

---

## Call Notifications Permission (Calls Permission Rationale)

### Overview
The user is shown an explanation of why Fitbit needs access to phone call information (e.g., caller ID, ability to show incoming calls on the device), and is prompted to grant the relevant system permission.

### UI Elements

**Header / Toolbar**
- Back arrow or close button (×)

**Rationale Content**
- Icon or illustration related to phone calls
- Title: e.g., "See who's calling on your device"
- Body text: explains that to show caller name and number on the device, Fitbit needs permission to access phone call information.

**Primary Button**
- Label: "Allow" or "Continue"
- Tapping opens the system permission dialog for phone/calls access

**Secondary Button**
- Label: "Not now" or "Skip"
- Tapping dismisses the screen without requesting the permission

### Interactions

- **Tap "Allow" / "Continue"** — Triggers the Android system permission request dialog for call/phone access. If granted, call notification forwarding is enabled.
- **Tap "Not now"** — Dismisses the screen; call notifications will not be forwarded until permission is later granted.
- **Grant permission** — On return, call notification toggling is unlocked in the Notification Configuration screen.
- **Deny permission** — The calls toggle on the Notification Configuration screen may be shown as unavailable or grayed out, with a note explaining the permission is needed.

### State Changes
- After granting: the Calls toggle on the Notification Configuration screen becomes active.
- After denying: the Calls row shows a prompt or a "Permission required" subtitle.

### Sample Data

- Title: "See who's calling"
- Body: "Allow Fitbit to access your phone so you can see the caller's name and number on your Fitbit device."
- Primary button: "Allow"
- Secondary button: "Not now"
<!-- source-hash:8cb6255dfae8 -->

---

# Media Player & Playback — UI Screen Specifications

---

## Media Player Screen (Audio)

### Overview
The user sees a full-screen audio/video player with playback controls, title/subtitle metadata, and an optional Cast button for streaming to nearby devices.

### UI Elements

**Top Bar / Header**
- Close button (X icon) in the top-left corner — dismisses the player and returns to the previous screen
- Cast button (cast/route icon) in the top-right corner — visible only when a compatible casting device is detected on the network; hidden otherwise

**Media Info Section**
- Media thumbnail / preview image — displayed as a background or card image loaded from a URL
- Title text — primary title of the media item (e.g., "Morning HIIT Workout" or "Stress Relief Meditation")
- Subtitle text — secondary descriptor (e.g., coach name, category, duration)

**Playback Controls**
- Standard player control bar (ExoPlayer / LegacyPlayerControlView):
  - Seek bar / progress bar — shows current position vs. total duration; scrubable
  - Play / Pause button — toggles between play and pause states
  - Rewind button (if applicable)
  - Fast-forward button (if applicable)
  - Current position timestamp (e.g., "1:23")
  - Total duration timestamp (e.g., "/ 12:45")
  - Playback speed control (e.g., 0.5×, Normal, 1.25×, 1.5×, 2×)

**Live Metrics Overlay (when casting)**
- Heart rate (HR) display — shown if HR data is available from the paired device
- Active Zone Minutes (AZM) display — shown if AZM data is available
- Calories (CALS) display — shown if calorie data is available
- These metrics appear as small overlay tiles or a strip when connected to a Cast session

**Snackbar / Toast**
- Background playback notification snackbar — shown at launch, informing the user that media will continue playing in the background (text from `media_background_snackbar_message`)
- Network error toast — appears if a network error is detected: "Please check your network connection and try again."

### Interactions

- **Close button (X):** Stops playback, releases the player, and navigates back to the previous screen.
- **Back gesture / hardware back:** Same as tapping Close — stops playback and exits.
- **Play / Pause button:** Toggles playback state. The button icon updates to reflect the current state.
- **Seek bar:** Dragging the thumb scrubs to a new position in the media. Timestamps update in real time as the user drags.
- **Cast button:** Opens the system media route / Cast device chooser dialog. Once connected, playback transfers to the chosen device (TV, speaker, etc.). The cast button changes appearance to indicate an active cast session.
- **Orientation change:** Rotating the device to landscape hides the status bar and enters fullscreen immersive mode. Rotating back to portrait restores the status bar. Controls remain visible.
- **Tapping the player area (video mode):** Shows or hides the control overlay (standard video player behavior).

### State Changes
- **Loading state:** A progress indicator (spinner) appears in the center while the media is buffering or loading.
- **Playing state:** Play button becomes a Pause button; seek bar advances automatically.
- **Paused state:** Pause button becomes a Play button; seek bar is frozen at current position.
- **Casting state:** Live metrics overlay (HR, AZM, CALS) becomes visible if the user's Fitbit device is paired and active. Cast button shows an active/connected indicator.
- **Error state:** Network error toast is shown; playback cannot start.

### Sample Data
- Title: "10-Minute Morning Yoga"
- Subtitle: "Mindfulness & Flexibility · Beginner"
- Duration: 10:24
- Current position: 2:15
- Playback speed: Normal
- Live metrics (casting): HR: 72 bpm · AZM: 8 min · Cals: 47

---

## Media Player Screen (Video)

### Overview
The user watches a full-screen video with immersive playback controls; identical in structure to the audio player but locked to landscape orientation and hides system bars automatically.

### UI Elements

**Immersive Full-Screen Layout**
- The entire screen is used for video rendering; the status bar and navigation bar are hidden in landscape orientation.
- All elements from the Audio player are present (close button, cast button, controls, seek bar, timestamps).

**Video Surface**
- Full-bleed video fills the screen.
- Tapping the screen toggles the visibility of the control overlay.

**Control Overlay (auto-hides)**
- Appears on tap; fades out automatically after a few seconds of inactivity.
- Includes: Close (X), play/pause, seek bar, timestamps, cast button, playback speed.

### Interactions

- **Rotation to landscape:** Triggered automatically when the screen opens; system bars are hidden for an immersive experience.
- **Rotation to portrait:** System bars return; video continues playing in a smaller area.
- **Tapping the video:** Shows control overlay if hidden; hides it if already visible.
- All other interactions mirror the Audio player.

### State Changes
- Entering landscape: status bar and navigation bar hide automatically.
- Regaining window focus in landscape: system bars re-hide if they were dismissed.

### Sample Data
- Title: "30-Minute Dance Cardio"
- Subtitle: "High Energy · Intermediate"
- Duration: 30:00
- Current position: 8:47

---

## Cast Device Chooser (Sheet / Dialog)

### Overview
A bottom sheet or dialog appears when the user taps the Cast button, listing available nearby devices to stream media to.

### UI Elements
- **Header:** "Cast to device" or the system media route dialog title
- **Device list:** Each row shows:
  - Device name (e.g., "Living Room TV", "Kitchen Speaker")
  - Device type icon
  - Connection status indicator (connected / available)
- **Cancel / Close button**

### Interactions
- **Tapping a device:** Initiates a Cast session; the media player begins streaming to the selected device. The player screen shows "Casting to [Device Name]" and live metrics become visible if Fitbit device data is available.
- **Tapping an already-connected device:** Disconnects the Cast session and returns playback to the phone.
- **Dismiss / Cancel:** Closes the dialog with no action.

### State Changes
- Once connected, the Cast button in the player changes to an active/blue state.
- Live metrics overlay (HR, AZM, CALS) appears on the player screen.

### Sample Data
- Device list: "Living Room TV · Chromecast", "Bedroom Speaker · Google Nest Mini"
<!-- source-hash:a96e0e993a73 -->

---

# Integrations & Services — Screen Specifications

---

## Alexa Onboarding — Introduction

### Overview
The user sees an introductory screen explaining what Amazon Alexa integration does and is prompted to begin the login/authorization process with Amazon.

### UI Elements
- **Toolbar**: No visible title (empty string). A close (X) button appears on the right when accessed from device pairing flow; a standard back/up arrow appears when accessed from device settings or deep link. Optionally a "Not now" text button in the top-right action area (shown only when entry point is device pairing).
- **Body content area**: Displays the device name, descriptive copy about Alexa functionality, and whether the device has a speaker enabled. Content is loaded into a fragment container that fills the screen.
- **Loading overlay**: A semi-transparent white overlay with a centered circular spinner covers the full screen while auth state is loading. Hidden once loading completes.
- **Primary action button**: A pink/teal-styled button labeled **"Log in with Amazon"** (or equivalent label passed in at launch — corresponds to `login_with_amazon` string). Tapping begins the Amazon Login With Alexa auth flow.

### Interactions
- **Back arrow / close button**: Dismisses the onboarding flow and returns to wherever the user came from (device pairing wizard, device settings, or the originating deep link).
- **"Not now" menu item** (pairing flow only): Dismisses the onboarding and returns to the pairing flow without setting up Alexa.
- **"Log in with Amazon" button**: Launches Amazon's Login With Alexa OAuth flow, showing the Amazon authorization UI. A loading spinner appears while the auth request is in flight.
- After **successful authentication**: The screen transitions to the Alexa Setup Confirmation screen.
- After **auth error**: The loading overlay hides; an error state is surfaced (typically a snackbar or inline error message).

### Sample Data
- Device name: "Fitbit Sense 2"
- Button label: "Log in with Amazon"
- Action menu item: "Not now"

---

## Alexa Onboarding — Connected Confirmation

### Overview
After the user successfully authorizes their Amazon account, this screen confirms that Alexa is now set up on their Fitbit device and provides next steps.

### UI Elements
- **Toolbar**: Title shows **"Connected"** (`connected` string). The back arrow is hidden; the "Not now" menu action is also hidden.
- **Body content area** (fragment container): Displays confirmation messaging indicating Alexa is now connected to the device, with guidance on how to invoke Alexa (e.g., press and hold the microphone button).
- **Alexa utterance examples** (from `alexa_utterances` array):
  - "Set a timer for 20 minutes."
  - "Set an alarm for 6:00 a.m."
  - "Is it going to rain today?"
  - "How much protein is in an egg?"
  - "Remind me to go for a jog at 1:00 p.m."
- **Done / Continue button**: A styled action button to finish the setup and return to the previous screen.

### Interactions
- **Done / Continue button**: Finishes Alexa onboarding with a success result and returns to the originating context (device pairing or device settings).
- **Back gesture**: If the user presses the hardware back button from this confirmation screen, the flow navigates back to the intro screen (not out of the activity).
- **Toolbar back arrow**: Hidden on this screen; user must use the primary action button to proceed.

### Sample Data
- Toolbar title: "Connected"
- Example utterances displayed as a list or carousel:
  - "Set a timer for 20 minutes."
  - "Remind me to go for a jog at 1:00 p.m."

---

## Alexa Onboarding — Error / Retry

### Overview
Displayed when the Amazon authorization flow fails or cannot be initiated, allowing the user to retry or dismiss.

### UI Elements
- **Toolbar**: Empty title string, with close (X) or back arrow depending on entry point.
- **Error message area**: Inline text describing what went wrong (e.g., "A network error occurred. Please try again later." — `a_network_error_occurred_please_try_again_later`).
- **Loading overlay**: Hidden on error state.
- **Retry button** (primary): Labeled **"Log in with Amazon"** — same as intro screen button; retries the auth flow.
- **"Not now" / dismiss option**: Returns user to previous screen without completing setup.

### Interactions
- **Retry button**: Re-initiates the Amazon OAuth flow; loading spinner reappears.
- **"Not now" / back**: Dismisses with a cancelled result code; navigates the user back to their entry point.

### Sample Data
- Error text: "A network error occurred. Please try again later."
- Retry button: "Log in with Amazon"

---

## Assistant Selector

### Overview
The user sees a screen to choose their preferred voice assistant (Amazon Alexa or Google Assistant) to use with their Fitbit device.

### UI Elements
- **Toolbar**: Title is **"Default assistant"** (`default_assistant_selector_title`). Back/up arrow (standard navigation icon).
- **Assistant options list**: A scrollable or full-screen list of available assistant choices, each showing:
  - Assistant icon/logo
  - Assistant name (e.g., **"Amazon Alexa"** — `amazon_alexa`, or **"Google Assistant"** — `ga_title`)
  - Currently selected option may have a checkmark or highlighted state.
- **Selection area / container**: Hosts the assistant option items in a fragment container filling the screen below the toolbar.

### Interactions
- **Tapping an assistant option**: Selects that assistant as the default for the connected device. May trigger a confirmation or directly navigate into that assistant's onboarding flow (Alexa or Google Assistant).
- **Back arrow**: Returns to the previous screen (typically device settings).

### Sample Data
- Option 1: Alexa icon + "Amazon Alexa"
- Option 2: Google Assistant icon + "Google Assistant"
- Current selection: "Amazon Alexa" (highlighted)

---

## Account Access — Connected Devices

### Overview
The user sees a list of all devices and sessions currently signed into their Fitbit account, and can revoke access on a per-device basis.

### UI Elements
- **Toolbar**: Back/up arrow for navigation. No visible title in the toolbar itself (title appears in the content area below or via system action bar behavior).
- **Section header / info text**: The string **"These devices are signed in now to your Fitbit account. Select a device to get details or revoke access to just that device."** (`account_access_text_info`).
- **Device list** (scrollable, pull-to-refresh): Each list item shows:
  - Device or session name / identifier
  - Device type or platform indicator
  - Last active timestamp or status
- **Pull-to-refresh**: Swiping down reloads the list of connected devices from the server.
- **Loading state**: While the device list is initially loading, a centered progress spinner is shown along with the text **"Retrieving device list…"** (`retrieving_device_list`). The list is hidden until data loads.
- **Empty state**: If no additional devices are found, the loading indicator hides and the list is shown empty or with an appropriate message.

### Interactions
- **Selecting a device row**: Opens a detail view for that device, showing more information and an option to revoke that device's access.
- **Pull-to-refresh**: Refreshes the list from the server; spinner animates during the refresh.
- **Back arrow**: Returns to the account management / settings screen.

### Sample Data
- Device 1: "iPhone 15 Pro — iOS" — Last active: Today
- Device 2: "Chrome on Windows" — Last active: 3 days ago
- Device 3: "Fitbit Sense 2" — Last active: Just now

---

## Account Access — Device Detail & Revoke

### Overview
Shows detailed information about a specific signed-in device or session, with an option to revoke its access to the user's Fitbit account.

### UI Elements
- **Toolbar**: Back/up arrow.
- **Device name / identifier**: Prominently displayed at the top.
- **Detail fields**: Shows relevant session or device metadata (platform, last used date, approximate location if available).
- **"Revoke access" action**: A clearly labeled button or row item; tapping prompts the user to confirm before removing this device's access.
- **Confirmation dialog** (triggered by revoke action):
  - Title: Confirmation question (e.g., "Revoke access?")
  - Body: Explains that this device will be signed out and will need to log in again.
  - Buttons: **"Cancel"** and **"Revoke"** (or **"Remove"**).

### Interactions
- **"Revoke access" button**: Shows confirmation dialog.
- **Confirm revoke**: Sends revoke request to server; on success, navigates back to the device list with that device removed.
- **Cancel**: Dismisses dialog; user stays on the detail screen.
- **Back arrow**: Returns to the device list without making changes.

### Sample Data
- Device name: "Chrome on MacBook Pro"
- Platform: "Web Browser"
- Last active: "November 14, 2024 at 2:35 PM"
- Location: "San Francisco, CA"

---

## Account Management — Manage Your Account

### Overview
A settings screen where the user can manage their Fitbit account details, security options, and connected app permissions.

### UI Elements
- **Toolbar**: Title is **"Manage your account"** (`account_management_title`). Back/up arrow.
- **Scrollable list of options** (each is a tappable row):
  - **"Change email"** (`account_management_change_email`)
  - **"Change password"** (`account_management_change_password`)
  - **"Two-factor authentication"** (`account_management_two_factor_authentication`)
  - **"Move your Fitbit to a Google Account"** (`account_management_move_account_title`)
    - Sub-label: "Get the industry-leading security and convenience of your Google Account with Fitbit" (`account_management_move_account_subhead`)
    - Action button inline: **"Move Account"** (`account_management_move_account_call_to_action`)
  - **"Delete account"** (`account_management_delete_account`)
- **Section for app/device access**:
  - **"Manage connected apps"** (`account_access_management_manage_apps`)
  - **"Manage connected devices"** (`account_access_management_manage_devices`)
  - Section header: **"Manage access to account"** (`account_access_management_title`)

### Interactions
- **"Change email"**: Opens the Change Email screen.
- **"Change password"**: Opens the Change Password screen.
- **"Two-factor authentication"**: Opens the two-factor authentication setup/management screen.
- **"Move Account"**: Initiates the Google Account migration flow.
- **"Delete account"**: Opens the Delete Account screen with warnings and confirmation.
- **"Manage connected apps"**: Opens a list of third-party apps with authorized access to the user's Fitbit data.
- **"Manage connected devices"**: Opens the Connected Devices / Account Access screen.
- **Back arrow**: Returns to main settings.

### Sample Data
- Current email: "alex.johnson@gmail.com"
- Two-factor: "Off"
<!-- source-hash:9685d5399451 -->

---

# Fitbit App — Utility & System Screen Specifications

---

## Deep Link Handler (Transparent Routing Screen)

### Overview
An invisible transitional screen that intercepts deep links (URLs opening the Fitbit app) and routes the user to the correct destination or external browser — the user sees this only briefly as a redirect, or as a brief error state.

### UI Elements

**Normal State (no visible UI):**
- The screen has no visible content; it appears as a momentary blank/transparent pass-through while the app resolves where to send the user.

**Error State:**
- A system-level toast notification appears at the bottom of the screen with the message: "Error opening browser" (from `error_opening_browser` string)
- No other visible UI elements

**Browser Chooser Sheet (when multiple apps can handle a link):**
- The standard OS-level app chooser sheet appears, listing installed apps that can handle the URL
- Each item in the chooser shows the app icon and name (e.g., "Chrome", "Firefox", "Samsung Internet")
- The sheet title is blank (no custom title set)
- This is the native Android/OS chooser — not a custom Fitbit UI

### Interactions

**When a deep link is received:**
- The app silently resolves the link type and immediately navigates the user to the correct in-app screen (e.g., a specific activity, profile, or feature)
- The user does not see any loading indicator; the transition is instantaneous

**When the link points to an external URL:**
- If exactly one browser app is installed, that browser opens automatically
- If multiple browsers are installed, the OS chooser sheet appears — the user taps their preferred browser and is taken to that URL
- If no browser is installed, the error toast "Error opening browser" is shown and the user remains in the Fitbit app

**When the user cancels the browser chooser (presses Back):**
- The deep link screen closes and the user is returned to wherever they were previously in the app

**When linking requires sign-in or identity confirmation:**
- The user is redirected to the relevant authentication screen within the app (e.g., sign-in, identity linking)

**When the deep link is for account/identity migration:**
- The user is navigated to the appropriate account upgrade or linking flow

### Sample Data

| Scenario | Result |
|---|---|
| `fitbit://today` | User is taken directly to the Today/Dashboard screen |
| `https://www.fitbit.com/user/profile/apps` | OS browser chooser appears with Chrome, Firefox listed |
| `fitbit://challenges/abc123` | User is taken to the specific challenge detail screen |
| Unrecognized link on a device with no browser | Toast: "Error opening browser" shown for ~2 seconds |

---

## App Launch / Splash Screen

### Overview
The initial screen users see when opening Fitbit — it displays the Fitbit branding while the app initializes all its modules before landing on the main dashboard or login screen.

### UI Elements

**Splash / Loading State:**
- Fitbit logo centered on screen (teal/coral brand colors)
- Solid background color (brand white or dark depending on theme)
- No progress indicator visible to user
- No buttons or interactive elements

**Transition States (not directly visible, but affect what appears next):**
- If the user is already logged in → automatically transitions to the Dashboard / Today screen
- If the user is not logged in → transitions to the Login / Logged Out screen
- If the app was opened via a deep link → transitions through the Deep Link Handler (above)

### Interactions
- No user interaction possible on this screen
- The screen auto-dismisses as soon as app initialization is complete (typically within 1–3 seconds on a normal device)
- Pressing the Back button while on this screen exits the app entirely

### Sample Data
- No dynamic content — branding only
- Typical initialization time: ~1–2 seconds on a mid-range device

---

## Logged Out Screen

### Overview
The landing screen for users who are not signed into their Fitbit account, giving them the option to log in or create a new account.

### UI Elements

**Header / Branding:**
- Fitbit logo prominently displayed
- Tagline or welcome message (brand-level text)

**Action Buttons:**
- Primary button: "Log In" — large, full-width, coral/pink fill (PinkButton style)
- Secondary button: "Sign Up" or "Create Account" — outlined or text style below the primary button

**Footer:**
- Links to Terms of Service and Privacy Policy
- Text: small, gray, below buttons

**Loading Overlay (when signing in):**
- Semi-transparent overlay with a centered circular progress spinner
- Text: "Please wait…" (`account_verification_loading`)

### Interactions

**"Log In" button:**
- Opens the Fitbit/Google login screen (web-based OAuth2 flow)
- After successful login, user is taken to the Dashboard / Today screen
- After failed login, an error message is shown inline

**"Sign Up" / "Create Account" button:**
- Opens the account registration flow in a web view

**"Privacy Policy" link:**
- Opens `https://www.google.com/policies/privacy/` in the in-app browser

**"Terms of Service" link:**
- Opens the relevant Fitbit terms page in the in-app browser

### Sample Data
- No user-specific data — this screen is pre-authentication
- Error example: "A network error occurred. Please try again later." (`a_network_error_occurred_please_try_again_later`)

---

## Permission Explanation Screen

### Overview
A screen that explains to the user why Fitbit needs a specific system permission (e.g., location, Bluetooth, nearby devices) before the OS permission dialog appears.

### UI Elements

**Toolbar:**
- Back/up arrow (navigate up)
- No title (or feature-specific title depending on permission type)

**Body Content (scrollable):**
- Icon: Relevant permission icon (location pin, Bluetooth symbol, etc.)
- Heading: Short permission name (e.g., "Allow location access")
- Description paragraph: Plain-language explanation of why the permission is needed and how it will be used
  - Example for location: "Your location during exercise if enabled in device settings"
  - Example for nearby: Explanation about Bluetooth device pairing
- Bullet list of data uses (from `how_it_works_item_list`):
  - "Your health and wellness data such as activity, sleep, exercise, heart rate"
  - "Your location during exercise if enabled in device settings"
  - "Other device-specific data like device battery level and information from syncing your device with the app"

**Buttons:**
- Primary: "Continue" or "Allow" — full-width, pink/coral fill
- Secondary (optional): "Not Now" or "Skip" — text style

### Interactions

**"Continue" / "Allow" button:**
- Triggers the OS system permission dialog
- If the user grants permission → proceeds to the feature or next onboarding step
- If the user denies → may show a follow-up explanation or return to the previous screen

**"Not Now" / "Skip" button:**
- Dismisses the screen without requesting the permission
- Returns user to previous screen or skips the permission-dependent feature

**Back button:**
- Returns to the previous screen without requesting permission

### Sample Data
- Permission: Location
  - Heading: "Allow location access"
  - Body: "Your location is used during exercise when GPS tracking is enabled on your device. This helps Fitbit accurately track your distance and route."
- Permission: Nearby Devices (Bluetooth)
  - Heading: "Connect to your Fitbit"
  - Body: "Fitbit needs permission to find and connect to nearby Bluetooth devices so you can sync your tracker and receive notifications."

---

## In-App Web View Screen

### Overview
A full-screen web browser embedded within the app, used to display Fitbit web content (help articles, terms, account management pages, OAuth flows) without leaving the app.

### UI Elements

**Toolbar:**
- Close button (✕) in the top-left — dismisses the web view and returns to the previous screen
- Page title (dynamically set to the loaded page's title, e.g., "Fitbit Help")
- Optional: back/forward navigation arrows if the user has navigated within the web view

**Web Content Area:**
- Full-width, full-height web page rendered inline
- Standard web page content (text, images, links, forms)
- Standard web loading behavior (content appears progressively)

**Loading State:**
- A horizontal progress bar at the top of the content area fills from left to right as the page loads
- Or: a centered circular progress spinner on a white background before first content appears

**Error State:**
- If the page fails to load: an error message is shown with a "Retry" button

### Interactions

**Close (✕) button:**
- Dismisses the web view
- Returns the user to the app screen they came from

**Tapping links within the web view:**
- Internal links (same fitbit.com domain) open within the same web view
- External links may open in the system browser (via the Deep Link Handler)

**Back navigation within the web view:**
- If the user has navigated to a secondary page within the web view, the back arrow in the toolbar navigates back within the web history
- If at the first page, the back arrow is disabled (grayed out)

**Forms within the web view (e.g., login, account changes):**
- Standard web form interaction — user types, taps, selects
- On successful form submission, the web view may close and return the user to the app

### Sample Data

| Context | URL Loaded |
|---|---|
| Cardio fitness score help | `https://help.fitbit.com/articles/en_US/Help_article/2096.htm` |
| Heart rate zones help | `https://support.google.com/fitbit/answer/14237938` |
| Legal / Terms | `https://www.fitbit.com/legal/copyright-policy` |
| Account apps management | `https://www.fitbit.com/user/profile/apps` |
| Google support article | `https://support.google.com/fitbit/answer/14506680` |
<!-- source-hash:f02bfe1e2e1b -->

---

# Fitbit App — "Other" Feature Area Screen Specifications

---

## Server Settings (Developer/Debug Tool)

### Overview
A developer-facing configuration screen where backend server URLs can be manually overridden to point the app at different environments (production, staging, integration, or custom).

> **Note:** This screen is only accessible to internal/developer builds and is not shown to regular end users. It is included here because the code contains user-visible UI elements (text fields, buttons, spinners).

### UI Elements

**Header/Toolbar**
- Back navigation arrow (up indicator)
- No visible title in toolbar

**Environment Selector**
- Dropdown spinner (at top of content area) listing available backend environments:
  - Production
  - Staging
  - Integration
  - Custom
- Selecting an environment auto-populates all URL fields below

**URL Input Fields** (each is a labeled text input)
- **Login / Register URL** — e.g., `https://accounts.fitbit.com`
- **API URL** — e.g., `https://android-api.fitbit.com`
- **Client URL** — e.g., `https://android-cdn-client.fitbit.com`
- **CMS URL** — e.g., `https://example_cms`
- **Site URL** — e.g., `https://www.fitbit.com`
- **SSO URL** — e.g., `https://accounts.fitbit.com`
- **Gallery URL** — URL for device app gallery
- **App Settings URL** — URL for app settings backend
- **Clocks URL** — URL for clock faces
- **Apps URL** — URL for apps service
- **Gallery V2 URL** — URL for gallery version 2
- **Hovercraft / CMS URL** — URL for CMS overlay
- **Web URL** — General web URL
- **Debug Bridge URL** — URL for debug bridge endpoint

**Manual Entry Section** (conditionally visible)
- Shown only when "Custom" environment is selected
- Container grouping manually editable URL fields

**Action Buttons**
- **Save** button — saves all entered URLs and applies the configuration
- **RPC** button — triggers an RPC test or connection action

**How To Use Text** (conditionally shown)
- An informational text block; hidden by default

### Interactions
- **Environment dropdown change:** All URL fields are instantly populated with the selected environment's default URLs. If "Custom" is selected, the manual entry section becomes visible so all fields can be edited freely.
- **Editing URL fields (API URL, Apps URL, Client URL, Gallery V2 URL):** Changes are tracked in real time; validation may flag malformed URLs.
- **Tap "Save":** Persists all URL configuration to app storage and applies changes immediately. App may restart network connections.
- **Tap "RPC":** Initiates an RPC connection test to the configured backend endpoints.

### Sample Data
| Field | Example Value |
|---|---|
| Environment | Staging |
| Login URL | `https://accounts.fitbit-stage.com` |
| API URL | `https://android-api.fitbit-stage.com` |
| Client URL | `https://android-cdn-client.fitbit-stage.com` |
| CMS URL | `https://static0.fitbit-stage.com` |
| Site URL | `https://www.fitbit-stage.com` |
| SSO URL | `https://accounts.fitbit-stage.com` |

---

## Scale Details

### Overview
Displays detailed information and settings for a connected Fitbit smart scale (e.g., Aria), including sync status, firmware, battery, and configurable preferences.

### UI Elements

**Header/Toolbar**
- Back navigation arrow
- Page title (scale device name, e.g., "Aria Air")
- Overflow menu (three-dot):
  - **Remove** / **Unpair** menu item (enabled once device data loads; disabled while loading)

**Device Image Area**
- Large image of the scale device (loaded from remote URL)
- Device name label (e.g., "Aria Air")
- Last synced timestamp (e.g., "Last synced: Today at 2:34 PM"); hidden if never synced
- Firmware version (e.g., "Firmware: 1.130.37"); hidden if battery level unavailable

**Battery Indicator**
- Text label showing battery level (e.g., "Battery: Full", "Battery: Medium", "Battery: Low")

**Settings Section**
- Section header: **"General"**
- Row: **"Scale Users"** — subtitle: description of who uses this scale → navigates to user management
- Row: **"Measurements"** — subtitle: description of measurement types → navigates to measurement settings

**Preferences Section**
- Section header: **"Preferences"**
- Row: **Scale name** — shows current name (e.g., "Aria Air") → navigates to rename
- Row: **"Units"** — shows selected unit (e.g., "Pounds", "Kilograms", "Stones") → navigates to unit selection (only shown if last sync date is available)
- Row: **"Language"** — shows current language (e.g., "English") — only shown if language options are available for this model
- Row: **"Decimal Separator"** — shows current separator character (e.g., ".") — only shown if separator options are available for this model
- Row: **"Wi-Fi"** — description of Wi-Fi setup — only shown on supported models that are not already on Wi-Fi

**Help Section** (conditionally shown)
- Section header: **"Help"**
- Row: **"[Device Name] Guide"** — subtitle: "Get step-by-step help for your [Device Name]" → opens external guide URL

**Unpair Confirmation Dialog** (triggered from overflow menu)
- Title: "Remove [Device Name]?"
- Confirm and Cancel buttons

### Interactions
- **Back arrow:** Returns to previous screen (device list)
- **Overflow → Remove/Unpair:** Shows confirmation dialog; on confirm, unpairs scale from account and returns to device list
- **Settings rows:** Each row navigates to the relevant sub-settings screen (users, measurements, unit picker, language picker, decimal separator picker, Wi-Fi setup)
- **Help row:** Opens the device's support/guide URL in browser or web view

### Sample Data
- Device name: **Aria Air**
- Last synced: **Today at 9:15 AM**
- Firmware: **Firmware: 1.130.37**
- Battery: **Full**
- Units: **Pounds**
- Language: **English**
- Decimal Separator: **.**

---

## Tracker Details

### Overview
Displays detailed information and management options for a connected Fitbit tracker (e.g., Charge 6, Versa 4), including sync controls, firmware update, alarms, and device settings.

### UI Elements

**Header/Toolbar**
- Back navigation arrow
- Device name as toolbar title (e.g., "Charge 6")
- Overflow menu:
  - **Remove** menu item — unpairs the tracker

**Loading State**
- Full-screen progress spinner shown while device data is loading
- Content area hidden until data is ready

**Device Hero Area** (visible after data loads)
- Device image (loaded from URL)
- Device name label (e.g., "Charge 6")
- Last synced timestamp (e.g., "Last synced: Today at 9:15 AM")
- Firmware version label (e.g., "Firmware: 1.160.58")
- Battery level indicator (e.g., "Battery: High")

**Sync Panel**
- **Sync button** (icon button) — initiates a manual sync; hidden while syncing
- **Sync progress bar** — shown while sync is in progress
- **Last sync detail text** — shows sync time as clickable/linked text
- Sync panel row (tappable) — triggers sync when tapped

**Firmware Update Button**
- "Update Firmware" button — enabled only when tracker is idle (not syncing); navigates to firmware update flow

**Open on Watch Button** ("Open on Watch" / Denali button) — visible on supported devices only

**Re-bond Button** — visible on supported devices that support re-bonding

**Tracker Settings Section**
- Dynamically populated list of setting rows, each with a title and optional subtitle:
  - **Alarms** — shows next alarm time (e.g., "Next: Monday at 6:00 AM") or "No silent alarms" → navigates to alarms screen
  - **Notifications** — → navigates to notification settings
  - **Exercise shortcuts** — → navigates to exercise shortcut management
  - **Display** — → navigates to display settings
  - **Payment** — shown if payments feature is supported → navigates to payment setup

**Help / Guide Section**
- Section header: **"Help"**
- Row: **"[Device Name] Guide"** with description — opens external support URL

**Location Services Snackbar** (conditional)
- Banner at bottom: "Location services must be enabled"
- Action button: "Enable Now" → opens location permissions settings
- Shown when location is disabled and Bluetooth scanning requires it

**Permission Snackbar** (conditional)
- Banner: "Location permission is required"
- Action button: "Enable Now" → navigates to permission rationale screen

**Error Snackbar** (for errors like sync in progress, Bluetooth busy)
- Inline banner with error message and "Dismiss" action

**Unpair Confirmation Dialog**
- Triggered from overflow menu "Remove"
- Title: "Remove [Device Name]?"
- Body: consent/warning message
- Confirm and Cancel buttons
- For family accounts (child device): additional parent-notice dialog with primary and secondary title text

**Disk Full Dialog** (conditional)
- Title: "Storage Full"
- Body: "Free up space on your phone to sync your device."
- "OK" button

### Interactions
- **Sync button / sync panel row tap:** Starts sync if eligible; shows "Sync in progress" snackbar if already syncing; shows disk full dialog if phone storage is too full
- **Firmware Update button:** Launches firmware update flow; button is only enabled when device is idle
- **Overflow → Remove:** Shows confirmation dialog; on confirm, device is unpaired and screen closes
- **Settings rows:** Navigate to the respective settings screen (Alarms, Notifications, Exercise, Display, Payments)
- **Help row:** Opens external guide in browser
- **Location snackbar "Enable Now":** Opens system location settings or permission rationale screen

### Sample Data
- Device: **Charge 6**
- Last synced: **Today at 11:42 AM**
- Firmware: **1.160.58**
- Battery: **High**
- Next alarm: **Tomorrow at 6:30 AM**
- Sync state: Idle (sync button active)

---

## Group Detail

### Overview
Displays a social community group's feed, header information, member details, and management options — members can post, browse posts, invite friends, and manage group membership.

### UI Elements

**Collapsing Header / App Bar**
- Large cover photo banner image (collapses on scroll)
- Overlay toolbar with:
  - Back navigation arrow (teal when banner visible, white when collapsed)
  - Overflow menu (context-sensitive, see below)
- **Group name** (collapsing title)
- **Fitbit Official badge** (hidden by default; shown for official Fitbit groups)

**Group Header View** (below cover photo)
- Group name (large text)
- Group type badge or membership indicator (e.g., lock icon for private group)
- Member count (e.g., "1,234 members")
- Friends in group bar:
  - Avatar images (up to 2 friend avatars)
  - Text: e.g., "Sarah and Michael and 30 others are in this group" or "Sarah and 5 others are in this group"
  - "View Members" / "Invite Friends" button (shown for members of the group)

**Leaderboard Widget** (conditionally shown)
- Shown for groups with leaderboard feature enabled
- Displays step/activity rankings for group members

**Create Post Bar**
- Input area: "What's on your mind?" prompt
- Behavior varies by membership state:
  - **Member:** Shows full create post input
  - **Non-member (public):** Shows "Join to post" prompt
  - **Non-member (private):** Shows "Request to join" prompt

**Feed Fragment Container**
- For members and public groups: scrollable list of group posts (text, images, cheers, comments)
- For non-members of private groups: Group Rules screen shown instead (text block with group rules)

**Overflow Menu Options** (dynamically populated based on user role):
- **Edit Group** — shown for group admins
- **About** — shown for members of non-private groups
- **Group Info** — shown if group has info text
- **Share Group** — shown if group sharing is enabled
- **Report Group** — shown if group is reportable
- **Leave Group** / **Leave & Delete Group** — shown for members
- **Copy Group Link** — shown in developer/feature-flagged builds

**Invite Prompt Snackbar** (shown after creating a group)
- Message: (group invite prompt)
- Action: "Invite" → opens invite friends flow

### Interactions
- **Back arrow:** Returns to previous screen (feed or community tab)
- **Cover photo / collapsing toolbar:** Toolbar icon colors adapt (white on image, teal on white background) as user scrolls
- **Create post bar:** Opens the post composer screen for the group
- **Invite/Invite Friends button:** Opens invite fragment with friend picker
- **Member count / "View Members":** Opens group members list
- **Leaderboard widget:** Shows group step leaderboard
- **Overflow → Edit Group:** Opens group editing fragment (inline bottom sheet)
- **Overflow → About/Group Info:** Opens group info bottom sheet
- **Overflow → Share Group:** Opens post composer pre-populated for sharing the group
- **Overflow → Report Group:** Opens the report group flow
- **Overflow → Leave Group:** Shows confirmation dialog
  - Last admin: "You can't leave — you're the only admin. Assign another admin first."
  - Ordinary admin: Confirmation dialog with Cancel / OK
  - Last member: Confirmation dialog with Cancel / Delete
  - Regular member: Immediately leaves group
- **Overflow → Copy Group Link:** Copies `fitbit://feed/group/{groupId}` to clipboard; shows snackbar "Link copied" on Android ≤12
- **Post items in feed:** Navigates to post detail, allows cheering/commenting

### Sample Data
- Group name: **Morning Runners Club**
- Members: **1,247 members**
- Friends in group: **Jessica, Mark, and 14 others are in this group**
- Cover image: scenic running trail photo
- Recent post: "Just hit 10,000 steps before 8am! 🎉" — 12 cheers, 3 comments
- Next alarm on device: N/A (social feed screen)
<!-- source-hash:9cf32e90c990 -->