refactor(shared): promote SectionHeader and useShimmer to shared layer

- Extract useShimmer() → src/shared/hooks/useShimmer.ts
  Pure Animated.Value pulse hook, no feature coupling
- Extract SectionHeader → src/shared/components/ui/SectionHeader.tsx
  Label row + optional offline/synced status pill; reusable by any list screen
- HomeScreen imports both from shared; removes ~70 lines of inline code

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

Author: maximcoding

src/features/home/screens/HomeScreen.tsx

@@ -3,7 +3,7 @@
 import { useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { FlashList } from '@shopify/flash-list'
-import React, { memo, useCallback, useEffect, useRef } from 'react'
+import React, { memo, useCallback } from 'react'
 import { Animated, Platform, Pressable, ScrollView, View } from 'react-native'
 import { useFeedQuery } from '@/features/home/hooks/useFeedQuery'
 import type { FeedItem } from '@/features/home/types'
@@ -12,38 +12,17 @@ import type { RootStackParamList } from '@/navigation/root-param-list'
 import { ROUTES } from '@/navigation/routes'
 import { ScreenHeader } from '@/shared/components/ui/ScreenHeader'
 import { ScreenWrapper } from '@/shared/components/ui/ScreenWrapper'
+import { SectionHeader } from '@/shared/components/ui/SectionHeader'
 import { Text } from '@/shared/components/ui/Text'
 import { useOnlineStatus } from '@/shared/hooks/useOnlineStatus'
+import { useShimmer } from '@/shared/hooks/useShimmer'
 import { useTheme } from '@/shared/theme/useTheme'
 
 type HomeNavProp = NativeStackNavigationProp<RootStackParamList>
 
 const TAB_BAR_CLEARANCE = 88
 
 // ─── Shimmer skeleton ─────────────────────────────────────────────────────────
-function useShimmer() {
-  const anim = useRef(new Animated.Value(0.4)).current
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(anim, {
-          toValue: 1,
-          duration: 750,
-          useNativeDriver: true,
-        }),
-        Animated.timing(anim, {
-          toValue: 0.4,
-          duration: 750,
-          useNativeDriver: true,
-        }),
-      ]),
-    )
-    loop.start()
-    return () => loop.stop()
-  }, [anim])
-  return anim
-}
-
 function SkeletonCard({ shimmer }: { shimmer: Animated.Value }) {
   const { theme } = useTheme()
   const c = theme.colors
@@ -220,68 +199,6 @@ function GreetingSection({
   )
 }
 
-// ─── Section header with optional sync status ─────────────────────────────────
-function SectionHeader({
-  label,
-  sublabel,
-  sublabelIsOffline,
-}: {
-  label: string
-  sublabel?: string | null
-  sublabelIsOffline?: boolean
-}) {
-  const { theme } = useTheme()
-  const c = theme.colors
-  const sp = theme.spacing
-  const r = theme.radius
-  const ty = theme.typography
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: sp.lg,
-        paddingBottom: sp.xs,
-        gap: sp.xs,
-      }}
-    >
-      <Text style={[ty.caps, { color: c.textTertiary, flex: 1 }]}>{label}</Text>
-      {sublabel ? (
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: sublabelIsOffline
-              ? c.warning + '22'
-              : c.success + '22',
-            borderRadius: r.pill,
-            paddingHorizontal: sp.xs,
-            paddingVertical: 2,
-            gap: 4,
-          }}
-        >
-          <View
-            style={{
-              width: 6,
-              height: 6,
-              borderRadius: 3,
-              backgroundColor: sublabelIsOffline ? c.warning : c.success,
-            }}
-          />
-          <Text
-            style={[
-              ty.labelSmall,
-              { color: sublabelIsOffline ? c.warning : c.success },
-            ]}
-          >
-            {sublabel}
-          </Text>
-        </View>
-      ) : null}
-    </View>
-  )
-}
-
 // ─── News story card ──────────────────────────────────────────────────────────
 const StoryCard = memo(function StoryCard({ item }: { item: FeedItem }) {
   const { theme } = useTheme()

src/shared/components/ui/SectionHeader.tsx

@@ -0,0 +1,68 @@
+// src/shared/components/ui/SectionHeader.tsx
+
+import React from 'react'
+import { View } from 'react-native'
+import { Text } from '@/shared/components/ui/Text'
+import { useTheme } from '@/shared/theme/useTheme'
+
+interface Props {
+  label: string
+  /** Optional badge shown on the right. */
+  sublabel?: string | null
+  /** When true the badge renders in warning colour; otherwise success. */
+  sublabelIsOffline?: boolean
+}
+
+export function SectionHeader({ label, sublabel, sublabelIsOffline }: Props) {
+  const { theme } = useTheme()
+  const c = theme.colors
+  const sp = theme.spacing
+  const r = theme.radius
+  const ty = theme.typography
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: sp.lg,
+        paddingBottom: sp.xs,
+        gap: sp.xs,
+      }}
+    >
+      <Text style={[ty.caps, { color: c.textTertiary, flex: 1 }]}>{label}</Text>
+      {sublabel ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: sublabelIsOffline
+              ? c.warning + '22'
+              : c.success + '22',
+            borderRadius: r.pill,
+            paddingHorizontal: sp.xs,
+            paddingVertical: 2,
+            gap: 4,
+          }}
+        >
+          <View
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: sublabelIsOffline ? c.warning : c.success,
+            }}
+          />
+          <Text
+            style={[
+              ty.labelSmall,
+              { color: sublabelIsOffline ? c.warning : c.success },
+            ]}
+          >
+            {sublabel}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  )
+}

src/shared/hooks/useShimmer.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react'
+import { Animated } from 'react-native'
+
+/**
+ * Returns an Animated.Value that pulses between 0.4 and 1 opacity —
+ * use it to drive shimmer/skeleton placeholder animations.
+ */
+export function useShimmer(): Animated.Value {
+  const anim = useRef(new Animated.Value(0.4)).current
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(anim, {
+          toValue: 1,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+        Animated.timing(anim, {
+          toValue: 0.4,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+      ]),
+    )
+    loop.start()
+    return () => loop.stop()
+  }, [anim])
+  return anim
+}