A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: fix mobile layout
+72
-94
+4
-24
apps/mobile/app/(tabs)/profile/_layout.tsx
+4
-24
apps/mobile/app/(tabs)/profile/_layout.tsx
···
7
7
return (
8
8
<Stack
9
9
screenOptions={{
10
-
headerStyle: {
11
-
backgroundColor: colors.background,
12
-
},
13
-
headerTintColor: colors.onBackground,
10
+
headerShown: false,
14
11
contentStyle: {
15
12
backgroundColor: colors.background,
16
13
},
17
14
}}
18
15
>
19
-
<Stack.Screen
20
-
name="index"
21
-
options={{
22
-
headerShown: false,
23
-
}}
24
-
/>
25
-
<Stack.Screen
26
-
name="shelf"
27
-
options={{
28
-
title: "My Shelf",
29
-
headerShown: true,
30
-
}}
31
-
/>
32
-
<Stack.Screen
33
-
name="lists"
34
-
options={{
35
-
title: "My Lists",
36
-
headerShown: true,
37
-
}}
38
-
/>
16
+
<Stack.Screen name="index" />
17
+
<Stack.Screen name="shelf" />
18
+
<Stack.Screen name="lists" />
39
19
</Stack>
40
20
);
41
21
}
+13
-3
apps/mobile/app/(tabs)/profile/lists.tsx
+13
-3
apps/mobile/app/(tabs)/profile/lists.tsx
···
5
5
import { FlashList } from "@shopify/flash-list";
6
6
import { useQuery } from "@tanstack/react-query";
7
7
import { router } from "expo-router";
8
-
import { List, ListPlus, Star } from "lucide-react-native";
8
+
import { ArrowLeft, List, ListPlus, Star } from "lucide-react-native";
9
9
import { useCallback, useState } from "react";
10
10
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
11
11
import { SafeAreaView } from "react-native-safe-area-context";
···
63
63
return (
64
64
<SafeAreaView
65
65
style={[styles.container, { backgroundColor: colors.background }]}
66
-
edges={["left", "right", "bottom"]}
66
+
edges={["left", "right", "bottom", "top"]}
67
67
>
68
68
<View style={styles.header}>
69
+
<TouchableOpacity
70
+
onPress={() => router.back()}
71
+
style={styles.backButton}
72
+
>
73
+
<ArrowLeft size={24} color={colors.onBackground} />
74
+
</TouchableOpacity>
69
75
<Text style={[styles.headerTitle, { color: colors.onBackground }]}>
70
76
My Lists
71
77
</Text>
···
212
218
},
213
219
header: {
214
220
flexDirection: "row",
215
-
justifyContent: "space-between",
216
221
alignItems: "center",
217
222
paddingHorizontal: spacing.lg,
218
223
paddingVertical: spacing.md,
224
+
gap: spacing.md,
225
+
},
226
+
backButton: {
227
+
padding: spacing.sm,
219
228
},
220
229
headerTitle: {
221
230
fontSize: 28,
···
228
237
paddingHorizontal: spacing.md,
229
238
paddingVertical: spacing.sm,
230
239
borderRadius: borderRadius.md,
240
+
marginLeft: "auto",
231
241
},
232
242
createButtonText: {
233
243
fontSize: 14,
+27
-2
apps/mobile/app/(tabs)/profile/shelf.tsx
+27
-2
apps/mobile/app/(tabs)/profile/shelf.tsx
···
9
9
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
10
10
import { Image } from "expo-image";
11
11
import { router } from "expo-router";
12
-
import { BookOpen } from "lucide-react-native";
12
+
import { ArrowLeft, BookOpen } from "lucide-react-native";
13
13
import { useCallback, useMemo } from "react";
14
14
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
15
15
import { SafeAreaView } from "react-native-safe-area-context";
···
148
148
return (
149
149
<SafeAreaView
150
150
style={[styles.container, { backgroundColor: colors.background }]}
151
-
edges={["left", "right", "bottom"]}
151
+
edges={["left", "right", "bottom", "top"]}
152
152
>
153
+
<View style={styles.header}>
154
+
<TouchableOpacity
155
+
onPress={() => router.back()}
156
+
style={styles.backButton}
157
+
>
158
+
<ArrowLeft size={24} color={colors.onBackground} />
159
+
</TouchableOpacity>
160
+
<Text style={[styles.headerTitle, { color: colors.onBackground }]}>
161
+
My Shelf
162
+
</Text>
163
+
</View>
153
164
{trackedMovies && trackedMovies.length > 0 && (
154
165
<>
155
166
<Text
···
240
251
const styles = StyleSheet.create({
241
252
container: {
242
253
flex: 1,
254
+
},
255
+
header: {
256
+
flexDirection: "row",
257
+
alignItems: "center",
258
+
paddingHorizontal: spacing.lg,
259
+
paddingVertical: spacing.md,
260
+
gap: spacing.md,
261
+
},
262
+
backButton: {
263
+
padding: spacing.sm,
264
+
},
265
+
headerTitle: {
266
+
fontSize: 28,
267
+
fontWeight: "bold",
243
268
},
244
269
resultsCount: {
245
270
fontSize: 14,
+11
-59
apps/mobile/app/_layout.tsx
+11
-59
apps/mobile/app/_layout.tsx
···
45
45
<M3SnackbarProvider>
46
46
<Stack
47
47
screenOptions={{
48
-
headerStyle: {
49
-
backgroundColor: "#030712",
50
-
},
51
-
headerTintColor: "#f9fafb",
52
-
headerTitleStyle: {
53
-
color: "#f9fafb",
54
-
},
48
+
headerShown: false,
55
49
contentStyle: {
56
50
backgroundColor: "#030712",
57
51
},
58
52
}}
59
53
>
60
-
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
61
-
<Stack.Screen
62
-
name="movie/[id]"
63
-
options={{
64
-
title: "Movie Details",
65
-
headerTransparent: true,
66
-
headerTintColor: "#f9fafb",
67
-
}}
68
-
/>
69
-
<Stack.Screen
70
-
name="show/[id]"
71
-
options={{
72
-
title: "Show Details",
73
-
headerTransparent: true,
74
-
headerTintColor: "#f9fafb",
75
-
}}
76
-
/>
77
-
<Stack.Screen
78
-
name="show/[id]/season/[seasonNumber]/index"
79
-
options={{
80
-
title: "Season",
81
-
headerShown: true,
82
-
}}
83
-
/>
84
-
<Stack.Screen
85
-
name="show/[id]/season/[seasonNumber]/episode/[episodeNumber]/index"
86
-
options={{
87
-
title: "Episode",
88
-
headerShown: true,
89
-
}}
90
-
/>
54
+
<Stack.Screen name="(tabs)" />
55
+
<Stack.Screen name="movie/[id]" />
56
+
<Stack.Screen name="show/[id]" />
57
+
<Stack.Screen name="show/[id]/season/[seasonNumber]/index" />
58
+
<Stack.Screen name="show/[id]/season/[seasonNumber]/episode/[episodeNumber]/index" />
91
59
<Stack.Screen
92
60
name="auth/callback"
93
-
options={{
94
-
presentation: "modal",
95
-
headerShown: false,
96
-
}}
61
+
options={{ presentation: "modal" }}
97
62
/>
98
63
<Stack.Screen
99
64
name="auth/complete"
100
-
options={{
101
-
presentation: "modal",
102
-
headerShown: false,
103
-
}}
65
+
options={{ presentation: "modal" }}
104
66
/>
105
-
<Stack.Screen
106
-
name="settings"
107
-
options={{
108
-
title: "Settings",
109
-
headerShown: true,
110
-
}}
111
-
/>
112
-
<Stack.Screen
113
-
name="list/[slug]"
114
-
options={{
115
-
headerShown: false,
116
-
}}
117
-
/>
67
+
<Stack.Screen name="settings" />
68
+
<Stack.Screen name="list/[slug]" />
69
+
<Stack.Screen name="login" />
118
70
</Stack>
119
71
<StatusBar style="light" />
120
72
</M3SnackbarProvider>
+12
-1
apps/mobile/app/settings.tsx
+12
-1
apps/mobile/app/settings.tsx
···
6
6
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
7
7
import { useRouter } from "expo-router";
8
8
import {
9
+
ArrowLeft,
9
10
ChevronRight,
10
11
Clock,
11
12
Globe,
···
21
22
StyleSheet,
22
23
Text,
23
24
TextInput,
25
+
TouchableOpacity,
24
26
View,
25
27
} from "react-native";
26
28
import { SafeAreaView } from "react-native-safe-area-context";
···
252
254
<SafeAreaView style={styles.container} edges={["top"]}>
253
255
<ScrollView style={styles.scrollView}>
254
256
<View style={styles.header}>
257
+
<TouchableOpacity
258
+
onPress={() => router.back()}
259
+
style={styles.backButton}
260
+
>
261
+
<ArrowLeft size={24} color={colors.onBackground} />
262
+
</TouchableOpacity>
255
263
<View style={styles.headerLeft}>
256
264
<Globe size={28} color={colors.warning} />
257
265
<Text style={styles.title}>Settings</Text>
···
568
576
paddingHorizontal: spacing.lg,
569
577
paddingVertical: spacing.md,
570
578
flexDirection: "row",
571
-
justifyContent: "space-between",
572
579
alignItems: "center",
580
+
gap: spacing.md,
581
+
},
582
+
backButton: {
583
+
padding: spacing.sm,
573
584
},
574
585
headerLeft: {
575
586
flexDirection: "row",
+1
-1
apps/mobile/app/show/[id].tsx
+1
-1
apps/mobile/app/show/[id].tsx
+1
-1
apps/mobile/app/show/[id]/season/[seasonNumber]/episode/[episodeNumber]/index.tsx
+1
-1
apps/mobile/app/show/[id]/season/[seasonNumber]/episode/[episodeNumber]/index.tsx
+2
-2
apps/mobile/app/show/[id]/season/[seasonNumber]/index.tsx
+2
-2
apps/mobile/app/show/[id]/season/[seasonNumber]/index.tsx
···
507
507
},
508
508
backButton: {
509
509
position: "absolute",
510
-
top: 48,
510
+
top: 8,
511
511
left: 16,
512
512
zIndex: 10,
513
513
padding: 8,
···
610
610
},
611
611
episodeThumbnail: {
612
612
width: 120,
613
-
aspectRatio: 16 / 9,
613
+
height: 80,
614
614
backgroundColor: "#111827",
615
615
},
616
616
episodeImage: {
+1
-1
apps/web/src/routes/shows.$showId.$title.seasons.$seasonNumber.tsx
+1
-1
apps/web/src/routes/shows.$showId.$title.seasons.$seasonNumber.tsx
···
233
233
style={{ borderColor: "var(--md-sys-color-outline)" }}
234
234
>
235
235
<div className="grid grid-cols-[120px_1fr] gap-4">
236
-
<div className="aspect-video bg-gray-900">
236
+
<div className="h-full bg-gray-900">
237
237
{episode.still_path ? (
238
238
<img
239
239
src={`https://image.tmdb.org/t/p/w300${episode.still_path}`}