Reworked admin

templates/player.html

@@ -312,6 +312,61 @@ button.user-stat:hover {
     color: var(--text-subdued);
 }
 
+.playlist-public-section {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--border-color);
+}
+
+.playlist-subtitle {
+    padding-top: 2px;
+    padding-bottom: 8px;
+}
+
+.playlist-title-line,
+.playlist-meta-line {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.playlist-title-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.playlist-item-public {
+    white-space: normal;
+}
+
+.playlist-meta-line {
+    margin-top: 2px;
+    font-size: 11px;
+    color: var(--text-subdued);
+    white-space: nowrap;
+}
+
+.playlist-owner {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.playlist-public-badge {
+    flex-shrink: 0;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: rgba(52, 211, 153, 0.12);
+    color: #6ee7b7;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
 .sidebar-bottom {
     padding: 12px 16px;
     border-top: 1px solid var(--border-color);
@@ -348,6 +403,15 @@ button.user-stat:hover {
     margin-bottom: 20px;
 }
 
+.playlist-detail-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: -12px 0 18px;
+    color: var(--text-subdued);
+    font-size: 13px;
+}
+
 .breadcrumb {
     display: flex;
     align-items: center;
@@ -2339,7 +2403,7 @@ button.user-stat:hover {
                 </div>
             </div>
             <div class="playlist-list">
-                <template x-for="pl in $store.playlists.list" :key="pl.id">
+                <template x-for="pl in $store.playlists.regularList()" :key="pl.id">
                     <div class="playlist-item-row">
                         <div class="playlist-item" @click="$store.library.openPlaylist(pl.id)">
                             <template x-if="pl.kind === 'likes'">
@@ -2369,6 +2433,26 @@ button.user-stat:hover {
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                     New Playlist
                 </button>
+                <template x-if="$store.playlists.publishedList().length > 0">
+                    <div class="playlist-public-section">
+                        <div class="sidebar-section-title playlist-subtitle">Published Playlists</div>
+                        <template x-for="pl in $store.playlists.publishedList()" :key="'published-' + pl.id">
+                            <div class="playlist-item-row">
+                                <div class="playlist-item playlist-item-public" @click="$store.library.openPlaylist(pl.id)">
+                                    <div class="playlist-title-line">
+                                        <span class="playlist-title-text" x-text="pl.title"></span>
+                                        <span class="playlist-public-badge">Public</span>
+                                    </div>
+                                    <div class="playlist-meta-line">
+                                        <span class="playlist-owner" x-show="pl.owner_name" x-text="'by ' + pl.owner_name"></span>
+                                        <span x-show="pl.owner_name">&middot;</span>
+                                        <span x-text="pl.track_count + ' tracks'"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
             </div>
             <div class="sidebar-bottom">
                 <a href="/admin/">Admin Panel</a>
@@ -2869,6 +2953,14 @@ button.user-stat:hover {
                         <span x-text="$store.library.currentPlaylist.title"></span>
                     </div>
                     <h1 class="section-title" x-text="$store.library.currentPlaylist.title"></h1>
+                    <div class="playlist-detail-meta"
+                         x-show="$store.library.currentPlaylist.owner_name || $store.library.currentPlaylist.is_public">
+                        <span x-show="$store.library.currentPlaylist.owner_name"
+                              x-text="'by ' + $store.library.currentPlaylist.owner_name"></span>
+                        <span x-show="$store.library.currentPlaylist.owner_name && $store.library.currentPlaylist.is_public">&middot;</span>
+                        <span class="playlist-public-badge"
+                              x-show="$store.library.currentPlaylist.is_public">Published</span>
+                    </div>
                     <template x-if="$store.library.currentPlaylist.description">
                         <p style="color:var(--text-subdued);margin-bottom:16px" x-text="$store.library.currentPlaylist.description"></p>
                     </template>
@@ -4553,6 +4645,22 @@ document.addEventListener('alpine:init', () => {
             } catch {}
         },
 
+        regularList() {
+            return this.list.filter(pl => (
+                pl.kind === 'likes' ||
+                pl.is_own ||
+                !pl.is_public
+            ));
+        },
+
+        publishedList() {
+            return this.list.filter(pl => (
+                pl.kind === 'user' &&
+                !pl.is_own &&
+                pl.is_public
+            ));
+        },
+
         showCreate() {
             this.modal = { mode: 'create', title: '' };
         },