Visual polish: Linear-tactical craft lift across web + mobile (#117)

apps/mobile/__tests__/components/goals/goal-detail-drawer.test.tsx

@@ -37,6 +37,12 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
+vi.mock('expo-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}))
+
 vi.mock('react-native-safe-area-context', () => ({
   useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
 }))
@@ -97,7 +103,7 @@ vi.mock('lucide-react-native', () => {
     Flame: createIcon('Flame'),
     PencilLine: createIcon('PencilLine'),
     RotateCw: createIcon('RotateCw'),
-    Sparkles: createIcon('Sparkles'),
+    Orbit: createIcon('Orbit'),
     Trash2: createIcon('Trash2'),
   }
 })

apps/mobile/__tests__/components/habits/habit-detail-sections.test.tsx

@@ -1,18 +1,10 @@
 import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
-import {
-  HabitDetailStatsGrid,
-} from '@/components/habits/habit-detail-sections'
+import { HabitDetailStatsRow } from '@/components/habits/habit-detail-sections'
 import { createTokensV2 } from '@/lib/theme'
 const TestRenderer = require('react-test-renderer')
 
-vi.mock('lucide-react-native', () => ({
-  BarChart3: () => null,
-  Flame: () => null,
-  Trophy: () => null,
-}))
-
 function findTextNodes(tree: ReturnType<typeof TestRenderer.create>, text: string) {
   return tree.root.findAll((node: { props: { children?: unknown } }) => {
     const props = node.props
@@ -23,40 +15,44 @@ function findTextNodes(tree: ReturnType<typeof TestRenderer.create>, text: strin
   })
 }
 
-describe('habit detail sections', () => {
-  it('renders the stats grid', () => {
+describe('HabitDetailStatsRow', () => {
+  it('renders current streak, longest streak, and monthly rate', () => {
     let tree: ReturnType<typeof TestRenderer.create> | null = null
     TestRenderer.act(() => {
       tree = TestRenderer.create(
-        <HabitDetailStatsGrid
+        <HabitDetailStatsRow
           metrics={{
             currentStreak: 5,
             longestStreak: 14,
             monthlyCompletionRate: 85.5,
           }}
           loading={false}
-          t={(key, params) =>
-            params ? `${key}(${JSON.stringify(params)})` : key
-          }
+          t={(key) => key}
           tokens={createTokensV2('purple', 'dark')}
-          styles={{
-            statsGrid: { flexDirection: 'row' },
-            statCard: { padding: 8 },
-            statLabel: { fontSize: 10 },
-            statValue: { fontSize: 18 },
-            skeletonIcon: { width: 20, height: 20 },
-            skeletonLabel: { width: 40, height: 10 },
-            skeletonValue: { width: 32, height: 20 },
-            sectionTitle: { fontSize: 14 },
-            noDataText: { fontSize: 14 },
-          }}
         />,
       )
     })
 
     expect(tree).not.toBeNull()
     expect(findTextNodes(tree!, 'habits.detail.currentStreak').length).toBeGreaterThanOrEqual(1)
-    expect(findTextNodes(tree!, 'habits.detail.streakDays({"n":5})').length).toBeGreaterThanOrEqual(1)
-    expect(findTextNodes(tree!, 'habits.detail.monthlyRate').length).toBeGreaterThanOrEqual(1)
+    expect(findTextNodes(tree!, '5').length).toBeGreaterThanOrEqual(1)
+    expect(findTextNodes(tree!, '14').length).toBeGreaterThanOrEqual(1)
+    expect(findTextNodes(tree!, '86%').length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('renders the empty state when there are no metrics', () => {
+    let tree: ReturnType<typeof TestRenderer.create> | null = null
+    TestRenderer.act(() => {
+      tree = TestRenderer.create(
+        <HabitDetailStatsRow
+          metrics={null}
+          loading={false}
+          t={(key) => key}
+          tokens={createTokensV2('purple', 'dark')}
+        />,
+      )
+    })
+
+    expect(findTextNodes(tree!, 'habits.detail.noDataYet').length).toBeGreaterThanOrEqual(1)
   })
 })

apps/mobile/__tests__/components/habits/habit-list.test.tsx

@@ -1262,7 +1262,7 @@ describe('HabitList', () => {
     expect(futureNodes.length).toBeGreaterThan(0)
   })
 
-  it('renders the status dot read-only for a non-loggable row and interactive for a loggable one', () => {
+  it('renders the status dot disabled for a non-loggable row and interactive for a loggable one', () => {
     const nonLoggable = createMockHabit({
       id: 'non-loggable',
       title: 'Daily yoga',
@@ -1300,10 +1300,11 @@ describe('HabitList', () => {
     expect(nonLoggableDot.props.disabled).toBe(true)
     expect(loggableDot.props.disabled).toBe(false)
 
-    const nonLoggablePressables = nonLoggableDot.findAll(
-      (node: any) => typeof node.props?.onPress === 'function',
+    const nonLoggableButton = nonLoggableDot.find(
+      (node: any) => node.props?.accessibilityRole === 'button',
     )
-    expect(nonLoggablePressables).toHaveLength(0)
+    expect(nonLoggableButton.props.disabled).toBe(true)
+    expect(nonLoggableButton.props.accessibilityState).toEqual({ disabled: true })
     expect(onLog).not.toHaveBeenCalled()
 
     const loggablePressables = loggableDot.findAll(

apps/mobile/__tests__/components/message-bubble.test.tsx

@@ -59,7 +59,7 @@ vi.mock('lucide-react-native', () => {
 
   const React = require('react')
   return {
-    Sparkles: (props: Record<string, unknown>) => React.createElement('Sparkles', props),
+    Orbit: (props: Record<string, unknown>) => React.createElement('Orbit', props),
     User: (props: Record<string, unknown>) => React.createElement('User', props),
     ArrowUpRight: (props: Record<string, unknown>) =>
       React.createElement('ArrowUpRight', props),

apps/mobile/__tests__/screens/intentional-offline-ux.test.tsx

@@ -322,6 +322,7 @@ vi.mock('lucide-react-native', () => {
     RotateCcw: createIcon('RotateCcw'),
     Settings: createIcon('Settings'),
     ShieldCheck: createIcon('ShieldCheck'),
+    Orbit: createIcon('Orbit'),
     Sparkles: createIcon('Sparkles'),
     Play: createIcon('Play'),
     Send: createIcon('Send'),

apps/mobile/__tests__/screens/profile-screen.test.tsx

@@ -98,10 +98,6 @@ vi.mock('@/lib/theme', () => ({
     shadow2: {},
     shadow3: {},
   },
-  gradients: {
-    surfaceSheen: ['transparent', 'transparent'],
-    surfaceSheenLocations: [0, 0.4],
-  },
 }))
 
 vi.mock('@/lib/api-client', () => ({
@@ -204,7 +200,7 @@ vi.mock('lucide-react-native', () => {
     ChevronRight: createIcon('ChevronRight'),
     Clock: createIcon('Clock'),
     BadgeCheck: createIcon('BadgeCheck'),
-    Sparkles: createIcon('Sparkles'),
+    Orbit: createIcon('Orbit'),
     X: createIcon('X'),
     Check: createIcon('Check'),
     Compass: createIcon('Compass'),

apps/mobile/__tests__/screens/today-screen.test.tsx

@@ -66,8 +66,6 @@ const createSurfaceLayer = () => ({
 const surfacesMock = {
   screen: {
     backgroundColor: "#111111",
-    ambientStart: "#111111",
-    ambientEnd: "transparent",
   },
   ground: createSurfaceLayer(),
   card: createSurfaceLayer(),
@@ -302,6 +300,11 @@ vi.mock("@/lib/habit-selection-state", () => ({
 vi.mock("@/lib/theme", () => ({
   createColors: () => colorProxy,
   createTokensV2: () => colorProxy,
+  easings: {
+    spring: [0.34, 1.56, 0.64, 1],
+    out: [0.16, 1, 0.3, 1],
+    smooth: [0.2, 0, 0, 1],
+  },
   radius: {
     full: 999,
     lg: 16,

apps/mobile/__tests__/screens/upgrade-guard-redirects.test.tsx

@@ -148,6 +148,7 @@ vi.mock("lucide-react-native", () => {
     ChevronRight: createIcon("ChevronRight"),
     Lock: createIcon("Lock"),
     BarChart3: createIcon("BarChart3"),
+    Orbit: createIcon("Orbit"),
     Sparkles: createIcon("Sparkles"),
     Check: createIcon("Check"),
   };

apps/mobile/app/(tabs)/calendar.tsx

@@ -59,16 +59,16 @@ interface GridDay {
 }
 
 type Tokens = ReturnType<typeof createTokensV2>;
-type DayStatus = "none" | "full" | "partial" | "upcoming";
+type DayStatus = "empty" | "full" | "partial" | "missed";
 
 function dayStatus(cell: GridDay): DayStatus {
-  if (!cell.isCurrentMonth || cell.totalCount === 0) return "none";
+  if (!cell.isCurrentMonth || cell.totalCount === 0) return "empty";
   if (cell.completedCount === cell.totalCount) return "full";
   const hasMissed = cell.entries.some(
     (entry: CalendarDayEntry) => entry.status === "missed",
   );
-  if (hasMissed) return "partial";
-  return "upcoming";
+  if (hasMissed) return "missed";
+  return "partial";
 }
 
 function entryDotState(entry: CalendarDayEntry): StatusDotState {
@@ -223,6 +223,29 @@ export default function CalendarScreen() {
     (entry: CalendarDayEntry) => entry.status === "completed",
   ).length;
 
+  const monthSummary = useMemo(() => {
+    if (isLoading || dayMap.size === 0) return null;
+    let daysWithActivity = 0;
+    let daysCompleted = 0;
+    dayMap.forEach((entries: CalendarDayEntry[]) => {
+      if (entries.length === 0) return;
+      daysWithActivity++;
+      const allDone = entries.every(
+        (entry: CalendarDayEntry) => entry.status === "completed",
+      );
+      if (allDone) daysCompleted++;
+    });
+    if (daysWithActivity === 0) return null;
+    const pct = Math.round((daysCompleted / daysWithActivity) * 100);
+    return `${daysCompleted}/${daysWithActivity} ${plural(t("calendar.summary.days"), daysCompleted)} (${pct}%)`;
+  }, [dayMap, isLoading, t]);
+
+  const goToSelectedDay = () => {
+    if (!selectedDay) return;
+    setShowDayDetail(false);
+    router.push(`/?date=${selectedDay}`);
+  };
+
   const monthStats = useMemo(() => {
     const monthDays = gridDays.filter((d) => d.isCurrentMonth);
     const totalLogs = monthDays.reduce(
@@ -253,6 +276,7 @@ export default function CalendarScreen() {
       <CalendarHeader
         title={t("nav.calendar")}
         monthLabel={monthLabel}
+        subtitle={monthSummary}
         previousMonthLabel={t("common.previousMonth")}
         nextMonthLabel={t("common.nextMonth")}
         onPreviousMonth={prevMonth}
@@ -307,7 +331,7 @@ export default function CalendarScreen() {
                       styles.dayText,
                       {
                         color:
-                          status === "none" && !cell.isToday
+                          status === "empty" && !cell.isToday
                             ? tokens.fg3
                             : cell.isCurrentMonth
                               ? tokens.fg1
@@ -330,9 +354,10 @@ export default function CalendarScreen() {
         </View>
 
         <CalendarLegend
-          fullLabel={t("calendar.legend.done")}
-          partialLabel={t("calendar.legend.upcoming")}
-          noneLabel={t("calendar.legend.missed")}
+          todayLabel={t("calendar.legend.today")}
+          doneLabel={t("calendar.legend.done")}
+          partialLabel={t("calendar.legend.partial")}
+          missedLabel={t("calendar.legend.missed")}
           tokens={tokens}
         />
 
@@ -370,6 +395,12 @@ export default function CalendarScreen() {
             <Text style={[styles.emptyDayText, { color: tokens.fg3 }]}>
               {t("calendar.noHabitsScheduled")}
             </Text>
+            <GoToDayButton
+              label={t("calendar.goToDay")}
+              tokens={tokens}
+              styles={styles}
+              onPress={goToSelectedDay}
+            />
           </View>
         ) : (
           <ScrollView
@@ -427,25 +458,12 @@ export default function CalendarScreen() {
               );
             })}
 
-            <Pressable
-              onPress={() => {
-                if (!selectedDay) return;
-                setShowDayDetail(false);
-                router.push(`/?date=${selectedDay}`);
-              }}
-              style={({ pressed }) => [
-                styles.goToDayButton,
-                {
-                  backgroundColor: pressed ? tokens.primaryPressed : tokens.primary,
-                },
-              ]}
-              accessibilityRole="button"
-              accessibilityLabel={t("calendar.goToDay")}
-            >
-              <Text style={[styles.goToDayButtonText, { color: tokens.fgOnPrimary }]}>
-                {t("calendar.goToDay")}
-              </Text>
-            </Pressable>
+            <GoToDayButton
+              label={t("calendar.goToDay")}
+              tokens={tokens}
+              styles={styles}
+              onPress={goToSelectedDay}
+            />
           </ScrollView>
         )}
       </BottomSheetModal>
@@ -486,7 +504,7 @@ function DayDot({
       />
     );
   }
-  if (status === "partial") {
+  if (status === "missed") {
     return (
       <View
         style={{
@@ -498,7 +516,7 @@ function DayDot({
       />
     );
   }
-  if (status === "upcoming") {
+  if (status === "partial") {
     return (
       <View
         style={{
@@ -514,6 +532,36 @@ function DayDot({
   return <View style={{ width: 5, height: 5 }} />;
 }
 
+function GoToDayButton({
+  label,
+  tokens,
+  styles,
+  onPress,
+}: Readonly<{
+  label: string;
+  tokens: Tokens;
+  styles: ReturnType<typeof createStyles>;
+  onPress: () => void;
+}>) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.goToDayButton,
+        {
+          backgroundColor: pressed ? tokens.primaryPressed : tokens.primary,
+        },
+      ]}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      <Text style={[styles.goToDayButtonText, { color: tokens.fgOnPrimary }]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
 function createStyles(tokens: Tokens) {
   return StyleSheet.create({
     safeArea: { flex: 1 },