From e5e77508b8e5dc86075f9ff331433948262520d6 Mon Sep 17 00:00:00 2001 From: tapframe Date: Sun, 26 Oct 2025 01:15:33 +0530 Subject: [PATCH] improved library screen layout --- src/screens/LibraryScreen.tsx | 101 ++++++++++++---------------------- 1 file changed, 35 insertions(+), 66 deletions(-) diff --git a/src/screens/LibraryScreen.tsx b/src/screens/LibraryScreen.tsx index 29e0f40..801a6cf 100644 --- a/src/screens/LibraryScreen.tsx +++ b/src/screens/LibraryScreen.tsx @@ -66,22 +66,20 @@ interface TraktFolder { id: string; name: string; icon: keyof typeof MaterialIcons.glyphMap; - description: string; itemCount: number; - gradient: [string, string]; } const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0; // Compute responsive grid layout (more columns on tablets) function getGridLayout(screenWidth: number): { numColumns: number; itemWidth: number } { - const horizontalPadding = 24; // matches listContainer padding (approx) - const gutter = 16; // space between items (via space-between + marginBottom) - let numColumns = 2; + const horizontalPadding = 16; // matches listContainer padding (approx) + const gutter = 12; // space between items (via space-between + marginBottom) + let numColumns = 3; if (screenWidth >= 1200) numColumns = 5; else if (screenWidth >= 1000) numColumns = 4; else if (screenWidth >= 700) numColumns = 3; - else numColumns = 2; + else numColumns = 3; const available = screenWidth - horizontalPadding - (numColumns - 1) * gutter; const itemWidth = Math.floor(available / numColumns); return { numColumns, itemWidth }; @@ -275,14 +273,8 @@ const LibraryScreen = () => { try { const items = await catalogService.getLibraryItems(); - logger.log(`[LibraryScreen] Loaded ${items.length} library items`); - - if (items.length === 0) { - logger.warn('[LibraryScreen] Library is empty - this might indicate a loading issue'); - } - // Sort by date added (most recent first) - const sortedItems = [...items].sort((a, b) => { + const sortedItems = items.sort((a, b) => { const timeA = (a as any).addedToLibraryAt || 0; const timeB = (b as any).addedToLibraryAt || 0; return timeB - timeA; // Descending order (newest first) @@ -315,10 +307,8 @@ const LibraryScreen = () => { // Subscribe to library updates const unsubscribe = catalogService.subscribeToLibraryUpdates(async (items) => { - logger.log(`[LibraryScreen] Library update received with ${items.length} items`); - // Sort by date added (most recent first) - const sortedItems = [...items].sort((a, b) => { + const sortedItems = items.sort((a, b) => { const timeA = (a as any).addedToLibraryAt || 0; const timeB = (b as any).addedToLibraryAt || 0; return timeB - timeA; // Descending order (newest first) @@ -370,41 +360,31 @@ const LibraryScreen = () => { id: 'watched', name: 'Watched', icon: 'visibility', - description: 'Your watched content', itemCount: (watchedMovies?.length || 0) + (watchedShows?.length || 0), - gradient: ['#2C3E50', '#34495E'] }, { id: 'continue-watching', - name: 'Continue Watching', + name: 'Continue', icon: 'play-circle-outline', - description: 'Resume your progress', itemCount: continueWatching?.length || 0, - gradient: ['#2980B9', '#3498DB'] }, { id: 'watchlist', name: 'Watchlist', icon: 'bookmark', - description: 'Want to watch', itemCount: (watchlistMovies?.length || 0) + (watchlistShows?.length || 0), - gradient: ['#6C3483', '#9B59B6'] }, { id: 'collection', name: 'Collection', icon: 'library-add', - description: 'Your collection', itemCount: (collectionMovies?.length || 0) + (collectionShows?.length || 0), - gradient: ['#1B2631', '#283747'] }, { id: 'ratings', name: 'Rated', icon: 'star', - description: 'Your ratings', itemCount: ratedContent?.length || 0, - gradient: ['#5D6D7E', '#85929E'] } ]; @@ -462,16 +442,13 @@ const LibraryScreen = () => { }} activeOpacity={0.7} > - - + + {folder.name} @@ -479,10 +456,7 @@ const LibraryScreen = () => { {folder.itemCount} items - - {folder.description} - - + ); @@ -502,12 +476,9 @@ const LibraryScreen = () => { activeOpacity={0.7} > - - - + + + Trakt @@ -516,12 +487,7 @@ const LibraryScreen = () => { {traktFolders.length} items )} - {!traktAuthenticated && ( - - Tap to connect - - )} - + Trakt collections @@ -736,7 +702,7 @@ const LibraryScreen = () => { } // Sort by last watched/added date (most recent first) using raw timestamps - return [...items].sort((a, b) => { + return items.sort((a, b) => { const dateA = a.lastWatched ? new Date(a.lastWatched).getTime() : 0; const dateB = b.lastWatched ? new Date(b.lastWatched).getTime() : 0; return dateB - dateA; @@ -1111,7 +1077,7 @@ const styles = StyleSheet.create({ headerTitle: { fontSize: 32, fontWeight: '800', - letterSpacing: 0.3, + letterSpacing: 0.5, }, filtersContainer: { flexDirection: 'row', @@ -1143,7 +1109,7 @@ const styles = StyleSheet.create({ fontWeight: '500', }, listContainer: { - paddingHorizontal: 12, + paddingHorizontal: 8, paddingVertical: 16, paddingBottom: 90, }, @@ -1159,7 +1125,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', }, itemContainer: { - marginBottom: 16, + marginBottom: 20, }, posterContainer: { borderRadius: 12, @@ -1221,8 +1187,9 @@ const styles = StyleSheet.create({ letterSpacing: 0.3, }, cardTitle: { - fontSize: 14, - fontWeight: '600', + fontSize: 13, + fontWeight: '500', + lineHeight: 18, marginTop: 8, textAlign: 'center', paddingHorizontal: 4, @@ -1303,27 +1270,29 @@ const styles = StyleSheet.create({ height: '100%', }, folderTitle: { - fontSize: 18, - fontWeight: '700', - marginBottom: 4, - textShadowColor: 'rgba(0, 0, 0, 0.75)', + fontSize: 16, + fontWeight: '600', + marginBottom: 6, + textShadowColor: 'rgba(0, 0, 0, 0.5)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2, - letterSpacing: 0.3, + letterSpacing: 0.5, }, folderCount: { fontSize: 12, - color: 'rgba(255,255,255,0.7)', - textShadowColor: 'rgba(0, 0, 0, 0.75)', + color: 'rgba(255,255,255,0.8)', + textShadowColor: 'rgba(0, 0, 0, 0.4)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2, + marginBottom: 2, }, folderSubtitle: { - fontSize: 12, - color: 'rgba(255,255,255,0.7)', - textShadowColor: 'rgba(0, 0, 0, 0.75)', + fontSize: 11, + color: 'rgba(255,255,255,0.6)', + textShadowColor: 'rgba(0, 0, 0, 0.4)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2, + marginTop: 2, }, backButton: { padding: 8,