From ff5d768d91dca93c73244f3319684d46bef1a5ac Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 28 May 2026 12:22:09 +0300
Subject: [PATCH 1/2] fix(header): keep profile-completion dot visible inside
 the stats pill

The stats pill uses overflow-hidden so the hover backgrounds round
cleanly at the pill's rounded-12 corners. That same clip was hiding
the bottom half of the yellow profile-completion indicator, which
ProfilePictureWithIndicator positions half outside the avatar via
translate.

Render ProfilePicture directly inside the combined profile Button,
and lift the indicator dot out to a sibling of the pill anchored
to a relative outer wrapper. Positioned at right-[31px] -bottom-1,
the dot lands at the same visual spot as the avatar's bottom-left
corner without being affected by the pill's overflow clip.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/profile/ProfileButton.tsx  | 149 ++++++++++--------
 1 file changed, 79 insertions(+), 70 deletions(-)

diff --git a/packages/shared/src/components/profile/ProfileButton.tsx b/packages/shared/src/components/profile/ProfileButton.tsx
index f51da8086f..15292a0aec 100644
--- a/packages/shared/src/components/profile/ProfileButton.tsx
+++ b/packages/shared/src/components/profile/ProfileButton.tsx
@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import { useAuthContext } from '../../contexts/AuthContext';
-import { ProfilePictureWithIndicator } from './ProfilePictureWithIndicator';
-import { ProfileImageSize } from '../ProfilePicture';
+import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import { useProfileCompletionIndicator } from '../../hooks/profile/useProfileCompletionIndicator';
 import { CoreIcon, ReputationIcon, SettingsIcon } from '../icons';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { IconSize } from '../Icon';
@@ -37,6 +37,7 @@ export default function ProfileButton({
 }: ProfileButtonProps): ReactElement {
   const { isOpen, onUpdate, wrapHandler } = useInteractivePopup();
   const { user, isAuthReady } = useAuthContext();
+  const { showIndicator } = useProfileCompletionIndicator();
   const { streak, isLoading, isStreaksEnabled } = useReadingStreak();
   const hasCoresAccess = useHasAccessToCores();
   const [animatedCores, setAnimatedCores] = useState<number | null>(null);
@@ -208,77 +209,85 @@ export default function ProfileButton({
           icon={<SettingsIcon />}
         />
       ) : (
-        <div className="flex h-10 items-stretch overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-surface-float">
-          {isStreaksEnabled && streak && (
-            <ReadingStreakButton
-              streak={streak}
-              isLoading={isLoading}
-              compact
-              className="!h-full !rounded-none !pl-1.5 !pr-2"
-            />
-          )}
-          {hasCoresAccess && (
-            <Tooltip
-              content={
-                <>
-                  Wallet
-                  <br />
-                  {preciseBalance} Cores
-                </>
-              }
-            >
-              <div
-                ref={coresCounterRef}
-                className="flex origin-center justify-center will-change-transform"
+        <div className="relative">
+          <div className="flex h-10 items-stretch overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-surface-float">
+            {isStreaksEnabled && streak && (
+              <ReadingStreakButton
+                streak={streak}
+                isLoading={isLoading}
+                compact
+                className="!h-full !rounded-none !pl-1.5 !pr-2"
+              />
+            )}
+            {hasCoresAccess && (
+              <Tooltip
+                content={
+                  <>
+                    Wallet
+                    <br />
+                    {preciseBalance} Cores
+                  </>
+                }
               >
-                <Link href={walletUrl} passHref>
-                  <Button
-                    data-reward-target={QuestRewardType.Cores}
-                    icon={<CoreIcon />}
-                    tag="a"
-                    variant={ButtonVariant.Tertiary}
-                    size={ButtonSize.Small}
-                    className="!h-full !rounded-none !pl-1.5 !pr-2"
-                  >
-                    {largeNumberFormat(displayedBalance)}
-                  </Button>
-                </Link>
-              </div>
+                <div
+                  ref={coresCounterRef}
+                  className="flex origin-center justify-center will-change-transform"
+                >
+                  <Link href={walletUrl} passHref>
+                    <Button
+                      data-reward-target={QuestRewardType.Cores}
+                      icon={<CoreIcon />}
+                      tag="a"
+                      variant={ButtonVariant.Tertiary}
+                      size={ButtonSize.Small}
+                      className="!h-full !rounded-none !pl-1.5 !pr-2"
+                    >
+                      {largeNumberFormat(displayedBalance)}
+                    </Button>
+                  </Link>
+                </div>
+              </Tooltip>
+            )}
+            <Tooltip side="bottom" content="Profile settings">
+              <Button
+                type="button"
+                aria-label="Profile settings"
+                icon={
+                  <ReputationIcon
+                    className="text-accent-onion-default"
+                    size={IconSize.Medium}
+                  />
+                }
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.Small}
+                className={classNames(
+                  '!h-full !gap-0 !rounded-none !pl-0.5 !pr-0',
+                  className,
+                )}
+                onClick={wrapHandler(() => onUpdate(!isOpen))}
+              >
+                <span
+                  ref={reputationCounterRef}
+                  data-reward-target={QuestRewardType.Reputation}
+                  className="inline-flex origin-center items-center will-change-transform"
+                >
+                  {largeNumberFormat(displayedReputation ?? 0)}
+                </span>
+                <ProfilePicture
+                  user={user}
+                  size={ProfileImageSize.Large}
+                  className="ml-2 !h-9 !w-9 !rounded-10"
+                  nativeLazyLoading
+                />
+              </Button>
             </Tooltip>
+          </div>
+          {showIndicator && (
+            <div
+              aria-hidden
+              className="pointer-events-none absolute -bottom-1 right-[31px] size-3 rounded-full bg-accent-cheese-default"
+            />
           )}
-          <Tooltip side="bottom" content="Profile settings">
-            <Button
-              type="button"
-              aria-label="Profile settings"
-              icon={
-                <ReputationIcon
-                  className="text-accent-onion-default"
-                  size={IconSize.Medium}
-                />
-              }
-              variant={ButtonVariant.Tertiary}
-              size={ButtonSize.Small}
-              className={classNames(
-                '!h-full !gap-0 !rounded-none !pl-0.5 !pr-0',
-                className,
-              )}
-              onClick={wrapHandler(() => onUpdate(!isOpen))}
-            >
-              <span
-                ref={reputationCounterRef}
-                data-reward-target={QuestRewardType.Reputation}
-                className="inline-flex origin-center items-center will-change-transform"
-              >
-                {largeNumberFormat(displayedReputation ?? 0)}
-              </span>
-              <ProfilePictureWithIndicator
-                user={user}
-                size={ProfileImageSize.Large}
-                className="!h-9 !w-9 !rounded-10"
-                wrapperClassName="relative ml-2"
-              />
-            </Button>
-          </Tooltip>
         </div>
       )}
       {isOpen && <ProfileMenu onClose={() => onUpdate(false)} />}

From dfa47f883fdbd2a742f555e817d946c8b72a9ffa Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 28 May 2026 12:26:04 +0300
Subject: [PATCH 2/2] fix(header): move streak timezone warning to a corner
 badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In compact mode the streak's WarningIcon was rendered as a flex
sibling of the streak icon inside a width-constrained IconWrapper,
so it overflowed the wrapper and appeared on top of the streak
number.

Wrap the streak icon in a relative slot in compact mode and render
the WarningIcon as an absolute size-4 badge anchored at the streak
icon's bottom-left corner — mirroring how the profile-completion
dot sits on the avatar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/streak/ReadingStreakButton.tsx | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/components/streak/ReadingStreakButton.tsx b/packages/shared/src/components/streak/ReadingStreakButton.tsx
index 30dfe8976b..dda43c5790 100644
--- a/packages/shared/src/components/streak/ReadingStreakButton.tsx
+++ b/packages/shared/src/components/streak/ReadingStreakButton.tsx
@@ -122,18 +122,30 @@ export function ReadingStreakButton({
           type="button"
           iconPosition={iconPosition}
           icon={
-            <IconWrapper
-              size={compact ? IconSize.XSmall : undefined}
-              wrapperClassName={classnames(
-                'relative flex items-center gap-2',
-                compact && 'h-6 w-6 justify-center',
-              )}
-            >
-              <ReadingStreakIcon secondary={hasReadToday} />
-              {!isTimezoneOk && (
-                <WarningIcon className="!mr-0 text-raw-cheese-40" secondary />
-              )}
-            </IconWrapper>
+            compact ? (
+              <div className="relative flex h-6 w-6 items-center justify-center">
+                <IconWrapper
+                  size={IconSize.XSmall}
+                  wrapperClassName="flex h-full w-full items-center justify-center"
+                >
+                  <ReadingStreakIcon secondary={hasReadToday} />
+                </IconWrapper>
+                {!isTimezoneOk && (
+                  <WarningIcon
+                    size={IconSize.Size16}
+                    className="!absolute -bottom-1.5 -left-1.5 text-raw-cheese-40"
+                    secondary
+                  />
+                )}
+              </div>
+            ) : (
+              <IconWrapper wrapperClassName="relative flex items-center gap-2">
+                <ReadingStreakIcon secondary={hasReadToday} />
+                {!isTimezoneOk && (
+                  <WarningIcon className="!mr-0 text-raw-cheese-40" secondary />
+                )}
+              </IconWrapper>
+            )
           }
           variant={
             compact || isLaptop || isMobile