From 0ba0a62834787fe889bbff991cc979ca8af46bb8 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Fri, 28 Aug 2026 11:55:57 -0700
Subject: [PATCH] fix(mobile): render Discover Weekly as a lineup with a header
 tile

The screen wrapped the artwork header and the entire track list in one
full-height Paper, so it read as a single full-page tile with the lineup
nested inside it. Move the header into the lineup's ListHeaderComponent so
the track tiles render as a normal lineup on the screen background, matching
Trending / Remixes / Listening History.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../DiscoverWeeklyScreen.tsx                  | 82 ++++++++++---------
 1 file changed, 43 insertions(+), 39 deletions(-)

diff --git a/packages/mobile/src/screens/discover-weekly-screen/DiscoverWeeklyScreen.tsx b/packages/mobile/src/screens/discover-weekly-screen/DiscoverWeeklyScreen.tsx
index 8089b005d85..fbd0e33a383 100644
--- a/packages/mobile/src/screens/discover-weekly-screen/DiscoverWeeklyScreen.tsx
+++ b/packages/mobile/src/screens/discover-weekly-screen/DiscoverWeeklyScreen.tsx
@@ -95,48 +95,52 @@ export const DiscoverWeeklyScreen = () => {
     })
   }, [trackIds.length, trackEvent])
 
+  const header = (
+    <Flex ph='l' pt='l'>
+      <Paper row gap='l' alignItems='center' p='l'>
+        <Image
+          source={discoverWeeklyArt}
+          style={{ width: ART_SIZE, height: ART_SIZE, borderRadius: 8 }}
+        />
+        <Flex column gap='xs' style={{ flex: 1 }}>
+          <Text variant='title' size='l'>
+            {exploreMessages.discoverWeekly}
+          </Text>
+          <Text variant='body' size='s' color='subdued'>
+            {exploreMessages.discoverWeeklySubtitle}
+          </Text>
+          {trackIds.length ? (
+            <Text variant='body' size='s' color='subdued'>
+              {exploreMessages.discoverWeeklyTrackCount(trackIds.length)}
+            </Text>
+          ) : null}
+          <Button
+            variant='primary'
+            size='small'
+            iconLeft={isPlaying ? IconPause : IconPlay}
+            onPress={handlePlay}
+            disabled={!trackIds.length}
+          >
+            {isPlaying ? 'Pause' : 'Play'}
+          </Button>
+        </Flex>
+      </Paper>
+    </Flex>
+  )
+
   return (
     <Screen title={messages.title} topbarRight={null} variant='secondary'>
       <ScreenContent>
-        <Paper m='l' gap='l' h='100%'>
-          <Flex row gap='l' alignItems='center' p='l'>
-            <Image
-              source={discoverWeeklyArt}
-              style={{ width: ART_SIZE, height: ART_SIZE, borderRadius: 8 }}
-            />
-            <Flex column gap='xs' style={{ flex: 1 }}>
-              <Text variant='title' size='l'>
-                {exploreMessages.discoverWeekly}
-              </Text>
-              <Text variant='body' size='s' color='subdued'>
-                {exploreMessages.discoverWeeklySubtitle}
-              </Text>
-              {trackIds.length ? (
-                <Text variant='body' size='s' color='subdued'>
-                  {exploreMessages.discoverWeeklyTrackCount(trackIds.length)}
-                </Text>
-              ) : null}
-              <Button
-                variant='primary'
-                size='small'
-                iconLeft={isPlaying ? IconPause : IconPlay}
-                onPress={handlePlay}
-                disabled={!trackIds.length}
-              >
-                {isPlaying ? 'Pause' : 'Play'}
-              </Button>
-            </Flex>
-          </Flex>
-          <TrackLineup
-            trackIds={trackIds}
-            source='DISCOVER_WEEKLY_TRACKS'
-            isPending={isPending}
-            isFetching={isFetching}
-            hasNextPage={false}
-            loadNextPage={() => {}}
-            pageSize={30}
-          />
-        </Paper>
+        <TrackLineup
+          trackIds={trackIds}
+          source={DISCOVER_WEEKLY_SOURCE}
+          isPending={isPending}
+          isFetching={isFetching}
+          hasNextPage={false}
+          loadNextPage={() => {}}
+          pageSize={30}
+          header={header}
+        />
       </ScreenContent>
     </Screen>
   )