Improved player

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "furumusic"
-version = "0.2.15"
+version = "0.3.0"
 edition = "2024"
 description = "Reusable web-app boilerplate: auth, OIDC/SSO, admin panel, user management, i18n, PostgreSQL"
 

src/i18n/phrases.rs

@@ -273,6 +273,7 @@ translations! {
     player_library:          "Library"                         , "Библиотека";
     player_artists:          "Artists"                         , "Артисты";
     player_global_library:   "Global"                          , "Global";
+    player_featured_only_artists: "Featured only"               , "Только фиты";
     player_release:          "Release"                         , "Релиз";
     player_releases:         "Releases"                        , "Релизы";
     player_tracks:           "Tracks"                          , "Треки";

templates/player/scripts.html

@@ -2048,6 +2048,17 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        isFeaturedOnlyArtist(artist) {
+            return Number(artist?.release_count || 0) <= 0 && Number(artist?.track_count || 0) > 0;
+        },
+
+        shouldShowFeaturedSeparator(index) {
+            if (!(this.view === 'artists' || this.view === 'my_uploads') || index <= 0) return false;
+            const current = this.artists[index];
+            const previous = this.artists[index - 1];
+            return this.isFeaturedOnlyArtist(current) && !this.isFeaturedOnlyArtist(previous);
+        },
+
         async openArtist(id, options = {}) {
             this._beginNavigation('#artist/' + id, options);
             this.searchQuery = '';

templates/player/shell.html

@@ -523,7 +523,13 @@
                 <div>
                     <h1 class="section-title" x-text="$store.library.view === 'my_uploads' ? '{{ t.player_my_uploads }}' : '{{ t.player_global_library }}'"></h1>
                     <div class="card-grid">
-                        <template x-for="artist in $store.library.artists" :key="artist.id">
+                        <template x-for="(artist, idx) in $store.library.artists" :key="artist.id">
+                            <div class="artist-grid-entry">
+                                <div class="artist-section-divider"
+                                     x-show="$store.library.shouldShowFeaturedSeparator(idx)"
+                                     x-cloak>
+                                    <span>{{ t.player_featured_only_artists }}</span>
+                                </div>
                                 <div class="card" @click="$store.library.openArtist(artist.id)">
                                     <div class="card-img">
                                         <template x-if="artist.image_url">
@@ -547,6 +553,7 @@
                                     <div class="card-title" x-text="artist.name"></div>
                                     <div class="card-subtitle" x-text="artist.release_count + ' {{ t.player_releases_count }} · ' + artist.track_count + ' {{ t.player_tracks_count }}'"></div>
                                 </div>
+                            </div>
                         </template>
                     </div>
                     <template x-if="!$store.library.loading && $store.library.artists.length === 0">

templates/player/styles.html

@@ -513,6 +513,31 @@ button.user-stat:hover {
     gap: 20px;
 }
 
+.artist-grid-entry {
+    display: contents;
+}
+
+.artist-section-divider {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 28px;
+    margin: 2px 0 -2px;
+    color: var(--text-subdued);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.artist-section-divider::before,
+.artist-section-divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border-color);
+}
+
 .card {
     background: var(--bg-secondary);
     border-radius: 8px;