feat: add header streak indicator (@hunterpaulson)

[hunterpaulson]

Description

Problem being solved:

In order to see your current streak, and whether it was claimed today, you have to click your profile then hover over your streak under your username.

Solution:

Add a streak indicator in the header next to the notification bell that shows your current streak along with a fire icon to indicate whether or not you claimed your streak for today.

Design

• When the streak is not claimed yet today the icon is hollow and its border uses the theme's sub color. matching the rest of the heading
• When the streak is claimed for the day the icon uses the theme's main color with solid fill. matching the monkeytype keyboard logo
• The streak number uses the theme's normal text color and inherits the existing header navigation font size.
  • used tabular numerals to prevent the layout from shifting as the number changes

examples

Logged out. shows no streak indicator (notice nothing next to the bell)

Before streak is claimed. Logged in users see a hollow indicator and the length of the current streak. hinting to them to begin/claim their streak for the day.

After streak is claimed. Indicator becomes solid and uses main color

Timezone streak hour offset tool tip still shows when hovering streak on profile page

When streak is lost it goes back to zero.

Implementation notes

The account page now displays a one-day streak instead of waiting until day two, keeping it consistent with the header indicator. previously it took two days to show streak indicator.

Moved the streak formatting and tooltip logic from the profile component into utils/streak.ts so the header and account page share the same behavior and wording. account-only tooltips like the changing timezone hour offset remain opt-in.

In order to determine whether today's streak was claimed immediately after login, before result history is first loaded I used the existing streak.lastResultTimestamp value from the user response as streakLastResultTimestamp. It is also updated after saving a result so the indicator changes immediately.

Checks

• Check if any open issues are related to this PR; if so, be sure to tag them below.
• Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

related discussion #5799

[fehmer]

hi @hunterpaulson , thank you for your contribution, this is a nice feature.

I think we should create a signal for the StreakSnapshot/StreakIndicatorStateinstates/streak.ts`and update it based on the snapshot + every 60 seconds.

UserDetailsand StreakIndicator can just render based on the signal.

[hunterpaulson]

agreed @fehmer. I moved the streak state into states/streak.ts and updated the header indicator and account profile display to render from the shared state.