From b0163f6a4d057a580ad741f8d5a2205d37afabf0 Mon Sep 17 00:00:00 2001 From: XShine555 Date: Thu, 24 Sep 2026 14:01:33 +0200 Subject: [PATCH] Split the explore page into genre grid, top result and search results components --- web-player/src/lib/state/pagedList.svelte.ts | 2 + .../src/routes/(app)/explore/+page.svelte | 251 ++---------------- .../src/routes/(app)/explore/GenreGrid.svelte | 30 +++ .../routes/(app)/explore/SearchResults.svelte | 168 ++++++++++++ .../src/routes/(app)/explore/TopResult.svelte | 90 +++++++ 5 files changed, 310 insertions(+), 231 deletions(-) create mode 100644 web-player/src/routes/(app)/explore/GenreGrid.svelte create mode 100644 web-player/src/routes/(app)/explore/SearchResults.svelte create mode 100644 web-player/src/routes/(app)/explore/TopResult.svelte diff --git a/web-player/src/lib/state/pagedList.svelte.ts b/web-player/src/lib/state/pagedList.svelte.ts index b6b9580..992e8d7 100644 --- a/web-player/src/lib/state/pagedList.svelte.ts +++ b/web-player/src/lib/state/pagedList.svelte.ts @@ -48,3 +48,5 @@ export function createPagedList( } }; } + +export type PagedList = ReturnType>; diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte index d778e2e..52457f4 100644 --- a/web-player/src/routes/(app)/explore/+page.svelte +++ b/web-player/src/routes/(app)/explore/+page.svelte @@ -1,23 +1,12 @@ @@ -174,62 +133,7 @@ {#if topResult} - {#snippet topResultBody()} - {#if topResult.kind === 'track'} - - {:else if topResult.kind === 'album'} - - {:else if topResult.kind === 'playlist'} - - {:else} - - {/if} - -
-
- Mejor resultado · {TOP_RESULT_KIND_LABEL[topResult.kind]} -
-
- {topResult.kind === 'track' - ? topResult.track.title - : topResult.kind === 'album' - ? topResult.album.title - : topResult.kind === 'playlist' - ? topResult.playlist.name - : topResult.user.name} -
- {#if topResult.kind === 'track' && topResult.track.artist} -
- {topResult.track.artist} -
- {/if} -
- - - {/snippet} - - - {@render topResultBody()} - + {/if} {/if} @@ -255,137 +159,22 @@ {/if} {#if !data.query && !data.genre} -
- {#each tiles as tile, i (tile.genre)} - -
- {tile.label} -
-
{tile.tagline}
- - {/each} -
- {#if tiles.length === 0} - - {/if} + {/if} {#if (data.query || data.genre) && !nothingFound} -
- {#if showGroup(sfilter, 'tracks')} -
- {#if items.length > 0} - -
    - {#each capped(sfilter, items) as track, i (track.id)} -
  • - player.playOrToggle(items, i)} - oncontextmenu={(e) => trackMenu.open(e, track)} - > - {#snippet overlay()} - {#if player.currentId === track.id} - - {/if} - {/snippet} - {#snippet trailing()} - - {/snippet} - -
    • - {/each} -
- - {#if sfilter === 'tracks' && tracksList.hasMore} - tracksList.loadMore()} - hasMore={tracksList.hasMore} - loading={tracksList.loading} - error={tracksList.error} - /> - {/if} - {:else} - - {/if} -
- {/if} - - {#if hasAlbums && showGroup(sfilter, 'albums')} -
- -
    - {#each capped(sfilter, albums) as album (album.id)} -
  • - albumMenu.open(e, album.id)} - > - {#snippet trailing()} - - {/snippet} - -
    • - {/each} -
-
- {/if} - - {#if hasUsers && showGroup(sfilter, 'users')} -
- -
    - {#each capped(sfilter, users) as u (u.id)} -
  • - -
    • - {/each} -
-
- {/if} - - {#if hasPlaylists && showGroup(sfilter, 'playlists')} -
- -
    - {#each capped(sfilter, playlistMatches) as playlist (playlist.id)} -
  • - -
    • - {/each} -
-
- {/if} -
+ {/if} diff --git a/web-player/src/routes/(app)/explore/GenreGrid.svelte b/web-player/src/routes/(app)/explore/GenreGrid.svelte new file mode 100644 index 0000000..46647c0 --- /dev/null +++ b/web-player/src/routes/(app)/explore/GenreGrid.svelte @@ -0,0 +1,30 @@ + + +
+ {#each tiles as tile, i (tile.genre)} + +
+ {tile.label} +
+
{tile.tagline}
+ + {/each} +
+{#if tiles.length === 0} + +{/if} diff --git a/web-player/src/routes/(app)/explore/SearchResults.svelte b/web-player/src/routes/(app)/explore/SearchResults.svelte new file mode 100644 index 0000000..f9e95ac --- /dev/null +++ b/web-player/src/routes/(app)/explore/SearchResults.svelte @@ -0,0 +1,168 @@ + + +
+ {#if showGroup(filter, 'tracks')} +
+ {#if items.length > 0} + +
    + {#each capped(filter, items) as track, i (track.id)} +
  • + player.playOrToggle(items, i)} + oncontextmenu={(e) => trackMenu.open(e, track)} + > + {#snippet overlay()} + {#if player.currentId === track.id} + + {/if} + {/snippet} + {#snippet trailing()} + + {/snippet} + +
    • + {/each} +
+ + {#if filter === 'tracks' && tracksList.hasMore} + tracksList.loadMore()} + hasMore={tracksList.hasMore} + loading={tracksList.loading} + error={tracksList.error} + /> + {/if} + {:else} + + {/if} +
+ {/if} + + {#if albums.length > 0 && showGroup(filter, 'albums')} +
+ +
    + {#each capped(filter, albums) as album (album.id)} +
  • + albumMenu.open(e, album.id)} + > + {#snippet trailing()} + + {/snippet} + +
    • + {/each} +
+
+ {/if} + + {#if users.length > 0 && showGroup(filter, 'users')} +
+ +
    + {#each capped(filter, users) as u (u.id)} +
  • + +
    • + {/each} +
+
+ {/if} + + {#if playlists.length > 0 && showGroup(filter, 'playlists')} +
+ +
    + {#each capped(filter, playlists) as playlist (playlist.id)} +
  • + +
    • + {/each} +
+
+ {/if} +
diff --git a/web-player/src/routes/(app)/explore/TopResult.svelte b/web-player/src/routes/(app)/explore/TopResult.svelte new file mode 100644 index 0000000..f5166b0 --- /dev/null +++ b/web-player/src/routes/(app)/explore/TopResult.svelte @@ -0,0 +1,90 @@ + + +{#snippet body()} + {#if result.kind === 'track'} + + {:else if result.kind === 'album'} + + {:else if result.kind === 'playlist'} + + {:else} + + {/if} + +
+
+ Mejor resultado · {KIND_LABEL[result.kind]} +
+
+ {result.kind === 'track' + ? result.track.title + : result.kind === 'album' + ? result.album.title + : result.kind === 'playlist' + ? result.playlist.name + : result.user.name} +
+ {#if result.kind === 'track' && result.track.artist} +
+ {result.track.artist} +
+ {/if} +
+ + +{/snippet} + + + {@render body()} +