feat(layout-v2): sidebar iteration fixes — logo/home combo, streak states, dnd fixes

packages/shared/src/components/notifications/NotificationsBell.tsx

@@ -16,6 +16,12 @@ import Link from '../utilities/Link';
 import { IconSize } from '../Icon';
 import { railTabClass, railTabLabelClass } from '../sidebar/common';
 
+// Unread-count badge: a 20px rounded square (8px radius) with a bold 13px
+// number — small enough not to overpower the bell glyph it notches. Shared by
+// both bell variants so the header and the v2 rail stay identical.
+const notificationBubbleClass =
+  '!min-h-5 !min-w-5 !rounded-8 !font-bold !typo-footnote tabular-nums';
+
 function NotificationsBell({
   compact,
   rail,
@@ -70,6 +76,11 @@ function NotificationsBell({
             // we only own the active text color).
             role="tab"
             aria-selected={atNotificationsPage}
+            // Every other rail tab is a <button>; this one is an anchor, which
+            // browsers drag natively. That native link-drag ran alongside the
+            // rail's dnd-kit reorder and navigated on drop — reloading
+            // /notifications. Only dnd-kit should drive this drag.
+            draggable={false}
             className={classNames(
               railTabClass,
               atNotificationsPage && '!text-text-primary',
@@ -84,14 +95,21 @@ function NotificationsBell({
                 className="pointer-events-none"
               />
               {hasNotification && (
-                // Compact corner badge: the rail bell is only `size-6` (24px),
-                // so the full-size shared `Bubble` (min 20px) blankets the
-                // glyph. A smaller pill notched into the top-right corner reads
-                // as a badge instead of covering the icon. `border-background-
-                // default` matches the sidebar surface for the cutout effect.
-                <span className="pointer-events-none absolute -right-2 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full border-2 border-background-default bg-accent-cabbage-default px-1 leading-none text-white typo-caption2">
+                // The shared square Bubble is the design-system badge (see the
+                // Bell Storybook "Count bubble" reference); offset outward so
+                // it notches the corner without blanketing the 24px glyph.
+                <Bubble
+                  className={classNames(
+                    // Anchored by its LEFT edge (the bell box is 24px, so 14px
+                    // puts it just past centre): multi-digit counts then grow
+                    // rightward into the rail's padding instead of creeping
+                    // left across the bell glyph.
+                    'pointer-events-none !right-auto -top-2 left-[0.875rem] px-1',
+                    notificationBubbleClass,
+                  )}
+                >
                   {getUnreadText(unreadCount)}
-                </span>
+                </Bubble>
               )}
             </span>
             {!railHideLabel && (
@@ -130,6 +148,7 @@ function NotificationsBell({
               <Bubble
                 className={classNames(
                   '-right-1.5 -top-1.5 cursor-pointer px-1',
+                  notificationBubbleClass,
                   compact && 'right-0 top-0',
                 )}
               >

packages/shared/src/components/quest/CompactQuestList.tsx

@@ -16,6 +16,7 @@ import type { QuestReward, UserQuest } from '../../graphql/quests';
 import { QuestRewardType, QuestStatus } from '../../graphql/quests';
 import { useQuestDashboard } from '../../hooks/useQuestDashboard';
 import { useClaimQuestReward } from '../../hooks/useClaimQuestReward';
+import { getQuestDestination } from './questDestinations';
 
 const rewardColorByType: Record<QuestRewardType, string> = {
   // XP reads as plain white, normal weight (de-emphasized); Cores/Reputation
@@ -66,6 +67,22 @@ const CompactQuestRow = ({
   const isClaimed =
     quest.status === QuestStatus.Claimed || Boolean(quest.claimedAt);
   const canClaim = quest.claimable && !!quest.userQuestId && !isClaimed;
+  // Route each quest to the surface where it can actually be completed (same
+  // mapping the quest dashboard uses); quests with no mapped surface — and
+  // claimable/claimed rows, where navigating away is not the point — fall back
+  // to Game Center.
+  const destination =
+    canClaim || isClaimed ? null : getQuestDestination(quest.quest);
+  const href = (() => {
+    if (destination?.path) {
+      return `${webappUrl}${destination.path.replace(/^\//, '')}`;
+    }
+    if (destination?.href) {
+      return destination.href;
+    }
+    return `${webappUrl}game-center`;
+  })();
+  const destinationLabel = destination?.label ?? 'Game Center';
 
   return (
     // Rounded hover pill + `hover:bg-surface-hover`, matching every other v2
@@ -74,13 +91,15 @@ const CompactQuestRow = ({
       {/* Title row: title takes the full width with the open-details chevron in
           the top-right corner. */}
       <div className="flex items-start justify-between gap-1">
-        <Link href={`${webappUrl}game-center`} passHref>
+        <Link href={href} passHref>
           {/* Stretched link — its `before` covers the whole row (the row is
-              `relative`), so clicking anywhere on the quest opens the Game
-              Center. The Claim button opts out via `relative z-1`; the
+              `relative`), so clicking anywhere on the quest goes to the quest's
+              own surface. The Claim button opts out via `relative z-1`; the
               chevron/progress sit under the link so they navigate too. */}
           <a
-            aria-label={`${quest.quest.name} — open Game Center`}
+            aria-label={`${quest.quest.name} — go to ${destinationLabel}`}
+            target={destination?.openInNewTab ? '_blank' : undefined}
+            rel={destination?.openInNewTab ? 'noopener noreferrer' : undefined}
             className="focus-outline min-w-0 flex-1 rounded-6 before:absolute before:inset-0 before:content-['']"
           >
             <Typography

packages/shared/src/components/quest/QuestButton.tsx

@@ -30,7 +30,7 @@ import { useAuthContext } from '../../contexts/AuthContext';
 import { useLogContext } from '../../contexts/LogContext';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { plusUrl, webappUrl } from '../../lib/constants';
-import { agentsHighlightsPath } from '../../lib/links';
+import { getQuestDestination } from './questDestinations';
 import Link from '../utilities/Link';
 import { AuthTriggers } from '../../lib/auth';
 import { LogEvent, TargetId, TargetType } from '../../lib/log';
@@ -96,54 +96,6 @@ type QuestLevelFireworkParticle = {
   hue: number;
 };
 
-const HOT_TAKES_MODAL_PATH = '/?openModal=hottakes';
-
-const getQuestDestination = (
-  quest: UserQuest['quest'],
-): QuestDestination | null => {
-  if (quest.eventType === 'post_share') {
-    if (quest.description === 'Create a shared link post') {
-      return { label: 'Create post', path: '/squads/create' };
-    }
-
-    return { label: 'Feed', path: '/' };
-  }
-
-  switch (quest.eventType) {
-    case 'read_post':
-    case 'post_upvote':
-    case 'award_given':
-    case 'share_post_click':
-    case 'comment_upvote':
-    case 'comment_create':
-    case 'bookmark_post':
-      return { label: 'Feed', path: '/' };
-    case 'brief_read':
-      return { label: 'Briefs', path: '/briefing' };
-    case 'hot_take_vote':
-    case 'hot_take_create':
-      return { label: 'Hot takes', path: HOT_TAKES_MODAL_PATH };
-    case 'user_follow':
-      return { label: 'Leaderboards', path: '/users' };
-    case 'view_user_profile':
-      return { label: 'Profiles', path: '/users' };
-    case 'visit_arena':
-      return { label: 'Happening Now', path: agentsHighlightsPath };
-    case 'visit_explore_page':
-      return { label: 'Explore', path: '/posts' };
-    case 'visit_discussions_page':
-      return { label: 'Discuss', path: '/discussed' };
-    case 'visit_read_it_later_page':
-      return { label: 'Later', path: '/bookmarks/later' };
-    case 'feedback_submit':
-      return { label: 'Feedback', path: '/settings/feedback' };
-    case 'squad_join':
-      return { label: 'Squads', path: '/squads/discover' };
-    default:
-      return null;
-  }
-};
-
 export const QuestSection = ({
   title,
   quests,

packages/shared/src/components/quest/questDestinations.ts

@@ -0,0 +1,51 @@
+import type { UserQuest } from '../../graphql/quests';
+import { agentsHighlightsPath } from '../../lib/links';
+import type { QuestDestination } from './QuestCard';
+
+export const HOT_TAKES_MODAL_PATH = '/?openModal=hottakes';
+
+export const getQuestDestination = (
+  quest: UserQuest['quest'],
+): QuestDestination | null => {
+  if (quest.eventType === 'post_share') {
+    if (quest.description === 'Create a shared link post') {
+      return { label: 'Create post', path: '/squads/create' };
+    }
+
+    return { label: 'Feed', path: '/' };
+  }
+
+  switch (quest.eventType) {
+    case 'read_post':
+    case 'post_upvote':
+    case 'award_given':
+    case 'share_post_click':
+    case 'comment_upvote':
+    case 'comment_create':
+    case 'bookmark_post':
+      return { label: 'Feed', path: '/' };
+    case 'brief_read':
+      return { label: 'Briefs', path: '/briefing' };
+    case 'hot_take_vote':
+    case 'hot_take_create':
+      return { label: 'Hot takes', path: HOT_TAKES_MODAL_PATH };
+    case 'user_follow':
+      return { label: 'Leaderboards', path: '/users' };
+    case 'view_user_profile':
+      return { label: 'Profiles', path: '/users' };
+    case 'visit_arena':
+      return { label: 'Happening Now', path: agentsHighlightsPath };
+    case 'visit_explore_page':
+      return { label: 'Explore', path: '/posts' };
+    case 'visit_discussions_page':
+      return { label: 'Discuss', path: '/discussed' };
+    case 'visit_read_it_later_page':
+      return { label: 'Later', path: '/bookmarks/later' };
+    case 'feedback_submit':
+      return { label: 'Feedback', path: '/settings/feedback' };
+    case 'squad_join':
+      return { label: 'Squads', path: '/squads/discover' };
+    default:
+      return null;
+  }
+};