refactor(home): expert-level cleanup — tokens, memo, shared utils, dead code

- Replace magic numbers in StoryScreen with design token constants
  (HEADER_HEIGHT=spacing.xxxxxl, ICON_SIZE=spacing.lg, PROGRESS_BAR_HEIGHT=spacing.xxs)
- Extract formatRelativeTime to shared/utils to eliminate duplication
  between hn.mappers and useFeedQuery
- Rename ActivityType → AccentVariant; align values with theme color keys
  ('primary'/'info'/'warning' replacing 'task'/'message'/'alert')
- Add useMemo/useCallback throughout StoryScreen and useFeedQuery
- Add attachLogging(hnClient) for dev HTTP visibility
- Remove dead code: TAB_COMPONENTS route, UIKitScreen, redundant subtitle??undefined
- Add 14 unit tests for parseDomain and mapHnHitToFeedItem
- All 41 tests pass, zero TypeScript errors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: maximcoding

src/features/home/hooks/useFeedQuery.ts

@@ -1,33 +1,25 @@
 import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
 import { homeKeys } from '@/features/home/api/keys'
 import { fetchHnFeed } from '@/features/home/services/hn/hn.service'
 import type { FeedItem } from '@/features/home/types'
 import { Freshness } from '@/shared/services/api/query/policy/freshness'
-
-function formatSyncedAt(ts: number): string {
-  if (!ts) return ''
-  const diffMs = Date.now() - ts
-  const m = Math.floor(diffMs / 60_000)
-  if (m < 1) return 'just now'
-  if (m < 60) return `${m}m ago`
-  const h = Math.floor(m / 60)
-  return `${h}h ago`
-}
+import { formatRelativeTime } from '@/shared/utils/format-relative-time'
 
 export function useFeedQuery() {
   const query = useQuery<FeedItem[]>({
     queryKey: homeKeys.feed(),
     queryFn: fetchHnFeed,
     staleTime: Freshness.nearRealtime.staleTime,
     gcTime: Freshness.nearRealtime.gcTime,
-    meta: {
-      persistence: 'nearRealtime',
-    },
+    meta: { persistence: 'nearRealtime' },
     placeholderData: prev => prev,
   })
 
-  const syncedAt = query.dataUpdatedAt ?? 0
-  const syncedAtLabel = syncedAt ? formatSyncedAt(syncedAt) : null
+  const syncedAtLabel = useMemo(() => {
+    const ts = query.dataUpdatedAt
+    return ts ? formatRelativeTime(ts) : null
+  }, [query.dataUpdatedAt])
 
   return {
     feed: query.data ?? [],

src/features/home/screens/HomeScreen.tsx

@@ -123,15 +123,16 @@ function useGreetingKey():
   return 'home.greeting_evening'
 }
 
-function dotColor(
+/** Maps AccentVariant → theme colour token for the feed card dot. */
+function accentColor(
   type: FeedItem['type'],
   c: ReturnType<typeof useTheme>['theme']['colors'],
 ): string {
   switch (type) {
     case 'success': return c.success
-    case 'task':    return c.primary
-    case 'message': return c.info
-    case 'alert':   return c.warning
+    case 'primary': return c.primary
+    case 'info':    return c.info
+    case 'warning': return c.warning
   }
 }
 
@@ -222,7 +223,7 @@ const StoryCard = memo(function StoryCard({ item }: { item: FeedItem }) {
   const sp = theme.spacing
   const r = theme.radius
   const ty = theme.typography
-  const accent = dotColor(item.type, c)
+  const accent = accentColor(item.type, c)
   const navigation = useNavigation<HomeNavProp>()
 
   const onPress = useCallback(() => {
@@ -234,7 +235,7 @@ const StoryCard = memo(function StoryCard({ item }: { item: FeedItem }) {
       author: item.author,
       numComments: item.numComments,
       time: item.time,
-      domain: item.subtitle ?? undefined,
+      domain: item.subtitle,
     })
   }, [navigation, item])
 

src/features/home/screens/StoryScreen.tsx

@@ -1,18 +1,26 @@
 // src/features/home/screens/StoryScreen.tsx
 
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
-import React, { useRef, useState } from 'react'
-import { ActivityIndicator, Pressable, View } from 'react-native'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { Animated, Pressable, StyleSheet, View } from 'react-native'
 import Svg, { Path, Polyline } from 'react-native-svg'
 import WebView from 'react-native-webview'
+import type { WebViewNavigation, WebViewProgressEvent } from 'react-native-webview/lib/WebViewTypes'
 import type { RootStackParamList } from '@/navigation/root-param-list'
 import { ROUTES } from '@/navigation/routes'
 import { ScreenWrapper } from '@/shared/components/ui/ScreenWrapper'
 import { Text } from '@/shared/components/ui/Text'
+import { spacing } from '@/shared/theme/tokens/spacing'
 import { useTheme } from '@/shared/theme/useTheme'
 
 type Props = NativeStackScreenProps<RootStackParamList, typeof ROUTES.HOME_STORY>
 
+// ─── Layout constants (derived from design tokens, never raw numbers) ─────────
+const HEADER_HEIGHT = spacing.xxxxxl  // 56 — matches ScreenHeader
+const ICON_SIZE = spacing.lg          // 20
+const ICON_STROKE = 2.2
+const PROGRESS_BAR_HEIGHT = spacing.xxs // 4
+
 const HN_ITEM_BASE = 'https://news.ycombinator.com/item?id='
 
 export default function StoryScreen({ route, navigation }: Props) {
@@ -26,59 +34,89 @@ export default function StoryScreen({ route, navigation }: Props) {
   const uri = url ?? `${HN_ITEM_BASE}${id}`
   const displayHost = domain ?? 'news.ycombinator.com'
 
-  const [loading, setLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(true)
   const [canGoBack, setCanGoBack] = useState(false)
   const webViewRef = useRef<WebView>(null)
+  const loadProgress = useRef(new Animated.Value(0)).current
+
+  const iconProps = useMemo(
+    () => ({
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      stroke: c.textPrimary,
+      strokeWidth: ICON_STROKE,
+      strokeLinecap: 'round' as const,
+      strokeLinejoin: 'round' as const,
+    }),
+    [c.textPrimary],
+  )
 
-  const iconProps = {
-    width: 20,
-    height: 20,
-    viewBox: '0 0 24 24',
-    fill: 'none',
-    stroke: c.textPrimary,
-    strokeWidth: 2.2,
-    strokeLinecap: 'round' as const,
-    strokeLinejoin: 'round' as const,
-  }
-
-  function handleBack() {
+  const handleBack = useCallback(() => {
     if (canGoBack) {
       webViewRef.current?.goBack()
     } else {
       navigation.goBack()
     }
-  }
+  }, [canGoBack, navigation])
+
+  const handleNavigationStateChange = useCallback(
+    (state: WebViewNavigation) => setCanGoBack(state.canGoBack),
+    [],
+  )
+
+  const handleLoadStart = useCallback(() => {
+    loadProgress.setValue(0)
+    setIsLoading(true)
+  }, [loadProgress])
+
+  const handleLoadEnd = useCallback(() => setIsLoading(false), [])
+
+  const handleLoadProgress = useCallback(
+    ({ nativeEvent }: WebViewProgressEvent) => {
+      Animated.timing(loadProgress, {
+        toValue: nativeEvent.progress,
+        duration: 80,
+        useNativeDriver: false,
+      }).start()
+    },
+    [loadProgress],
+  )
+
+  const progressWidth = loadProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  })
 
   return (
     <ScreenWrapper
       header={
         <View
-          style={{
-            height: 52,
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingHorizontal: sp.md,
-            backgroundColor: c.background,
-            borderBottomWidth: 1,
-            borderBottomColor: c.border,
-            gap: sp.xs,
-          }}
+          style={[
+            styles.header,
+            {
+              height: HEADER_HEIGHT,
+              paddingHorizontal: sp.md,
+              backgroundColor: c.background,
+              borderBottomColor: c.border,
+              gap: sp.xs,
+            },
+          ]}
         >
-          {/* Back / WebView back */}
           <Pressable
             onPress={handleBack}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            hitSlop={{ top: sp.xs, bottom: sp.xs, left: sp.xs, right: sp.xs }}
             accessibilityRole="button"
             accessibilityLabel={canGoBack ? 'Go back in page' : 'Back to feed'}
-            style={{ padding: sp.xs }}
+            style={styles.iconBtn}
           >
             <Svg {...iconProps}>
               <Polyline points="15 18 9 12 15 6" />
             </Svg>
           </Pressable>
 
-          {/* Close (always goes to feed) */}
-          <View style={{ flex: 1, alignItems: 'center' }}>
+          <View style={styles.titleSlot}>
             <Text
               style={[ty.labelMedium, { color: c.textSecondary }]}
               numberOfLines={1}
@@ -87,17 +125,15 @@ export default function StoryScreen({ route, navigation }: Props) {
             </Text>
           </View>
 
-          {/* Close button */}
           <Pressable
             onPress={() => navigation.goBack()}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            hitSlop={{ top: sp.xs, bottom: sp.xs, left: sp.xs, right: sp.xs }}
             accessibilityRole="button"
             accessibilityLabel="Close article"
-            style={{
-              padding: sp.xs,
-              backgroundColor: c.surfaceSecondary,
-              borderRadius: r.pill,
-            }}
+            style={[
+              styles.iconBtn,
+              { backgroundColor: c.surfaceSecondary, borderRadius: r.pill },
+            ]}
           >
             <Svg {...iconProps} stroke={c.textTertiary}>
               <Path d="M18 6 6 18M6 6l12 12" />
@@ -109,47 +145,54 @@ export default function StoryScreen({ route, navigation }: Props) {
       <WebView
         ref={webViewRef}
         source={{ uri }}
+        accessibilityLabel={title}
         style={{ flex: 1, backgroundColor: c.background }}
-        onLoadStart={() => setLoading(true)}
-        onLoadEnd={() => setLoading(false)}
-        onNavigationStateChange={state => setCanGoBack(state.canGoBack)}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
+        onLoadProgress={handleLoadProgress}
+        onNavigationStateChange={handleNavigationStateChange}
         allowsBackForwardNavigationGestures
         allowsInlineMediaPlayback
         mediaPlaybackRequiresUserAction
         startInLoadingState={false}
       />
 
-      {/* Loading bar */}
-      {loading && (
-        <View
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            height: 3,
-            backgroundColor: c.primaryAmbient,
-            overflow: 'hidden',
-          }}
-        >
-          <View
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
+      {isLoading && (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.progressBar,
+            {
+              height: PROGRESS_BAR_HEIGHT,
               backgroundColor: c.primary,
-              opacity: 0.8,
-            }}
-          />
-          <ActivityIndicator
-            size="small"
-            color={c.primary}
-            style={{ position: 'absolute', right: sp.md, top: -8 }}
-          />
-        </View>
+              width: progressWidth,
+            },
+          ]}
+        />
       )}
     </ScreenWrapper>
   )
 }
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  titleSlot: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  iconBtn: {
+    width: spacing.xxxl,
+    height: spacing.xxxl,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  progressBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+})