fix(header): lift avatar out of the stats pill

packages/shared/src/components/profile/ProfileButton.spec.tsx

@@ -54,10 +54,14 @@ it('should show "Profile settings" tooltip on the profile picture', () => {
   ).toBeInTheDocument();
 });
 
-it('should show "Reputation" tooltip on the reputation badge', () => {
+it('should render the reputation reward target inside the profile button', () => {
   renderComponent();
 
-  expect(screen.getByLabelText('Reputation')).toBeInTheDocument();
+  expect(
+    screen
+      .getByRole('button', { name: 'Profile settings' })
+      .querySelector('[data-reward-target="reputation"]'),
+  ).not.toBeNull();
 });
 
 it('should show settings option that opens modal', async () => {

packages/shared/src/components/profile/ProfileButton.tsx

@@ -4,8 +4,10 @@ import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { ProfilePictureWithIndicator } from './ProfilePictureWithIndicator';
+import { ProfileImageSize } from '../ProfilePicture';
 import { CoreIcon, ReputationIcon, SettingsIcon } from '../icons';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { IconSize } from '../Icon';
 import { useInteractivePopup } from '../../hooks/utils/useInteractivePopup';
 import { ReadingStreakButton } from '../streak/ReadingStreakButton';
 import { useReadingStreak } from '../../hooks/streaks';
@@ -48,7 +50,7 @@ export default function ProfileButton({
     Partial<Record<QuestRewardType.Reputation | QuestRewardType.Cores, string>>
   >({});
   const coresCounterRef = useRef<HTMLDivElement | null>(null);
-  const reputationCounterRef = useRef<HTMLDivElement | null>(null);
+  const reputationCounterRef = useRef<HTMLSpanElement | null>(null);
   const displayedBalance =
     typeof animatedCores === 'number'
       ? animatedCores
@@ -195,6 +197,8 @@ export default function ProfileButton({
     return <></>;
   }
 
+  // The pill groups streak / cores / reputation / avatar into one
+  // bordered control with edge-to-edge hover slots.
   return (
     <>
       {settingsIconOnly ? (
@@ -204,12 +208,13 @@ export default function ProfileButton({
           icon={<SettingsIcon />}
         />
       ) : (
-        <div className="flex h-10 items-center rounded-12 bg-surface-float px-1">
+        <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 && (
@@ -233,44 +238,46 @@ export default function ProfileButton({
                     tag="a"
                     variant={ButtonVariant.Tertiary}
                     size={ButtonSize.Small}
-                    className="!px-1.5"
+                    className="!h-full !rounded-none !pl-1.5 !pr-2"
                   >
                     {largeNumberFormat(displayedBalance)}
                   </Button>
                 </Link>
               </div>
             </Tooltip>
           )}
-          <Tooltip content="Reputation">
-            <div
-              ref={reputationCounterRef}
-              className="flex origin-center justify-center will-change-transform"
-            >
-              <Button
-                type="button"
-                data-reward-target={QuestRewardType.Reputation}
-                icon={<ReputationIcon className="text-accent-onion-default" />}
-                variant={ButtonVariant.Tertiary}
-                size={ButtonSize.Small}
-                className="!pl-0.5 !pr-1.5"
-                onClick={wrapHandler(() => onUpdate(!isOpen))}
-              >
-                {largeNumberFormat(displayedReputation ?? 0)}
-              </Button>
-            </div>
-          </Tooltip>
           <Tooltip side="bottom" content="Profile settings">
-            <button
+            <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(
-                'focus-outline cursor-pointer items-center border-none bg-transparent p-0',
-                className ?? 'flex',
+                '!h-full !gap-0 !rounded-none !pl-0.5 !pr-0',
+                className,
               )}
               onClick={wrapHandler(() => onUpdate(!isOpen))}
             >
-              <ProfilePictureWithIndicator user={user} />
-            </button>
+              <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>
       )}

packages/shared/src/components/streak/ReadingStreakButton.tsx

@@ -141,7 +141,7 @@ export function ReadingStreakButton({
               : ButtonVariant.Float
           }
           onClick={handleToggle}
-          className={classnames('gap-1', compact && '!px-1.5', className)}
+          className={classnames('gap-1', className)}
           size={!compact && !isMobile ? ButtonSize.Medium : ButtonSize.Small}
         >
           {streak?.current}