Dashboard: add Playlist Overview card and compact the sidebar

Restructure the dashboard into a two-column layout: a wide main column
holding the new Playlist Overview card, and a narrow (220px) right
sidebar with the compacted Quick Actions and Workflow Guide cards.

The Overview card answers "which playlist should I add media to, and
who will see it?" without opening each playlist. Per playlist it shows:
  - name, linked to that playlist's content manager
  - item count, total duration and current version
  - "N/M online" coverage, or a "no players" warning
  - one chip per assigned player, with an online/offline dot, linking
    to that player's manage page
  - an explicit empty state when no player is assigned

Players with no playlist are surfaced in a separate warning, since they
silently display nothing.

main.py builds this in a fixed number of queries: players are fetched
once and grouped by playlist_id, rather than calling
Playlist.players per row (which would be one query per playlist).

Layout notes:
- minmax(0, 1fr) on the main column so long names cannot widen the grid
- sidebar is sticky on tall screens and collapses below the main column
  under 900px, where the two small cards sit side by side
- sidebar cards used the global .card hover lift; suppressed for these

Also fixes a corrupted emoji (U+FFFD) in the System Status card.

Verified at 1600/1200/950/850/600px: no overflow, no button label
wrapping, and correct dark-mode colours.

app/blueprints/main.py

@@ -35,13 +35,43 @@ def dashboard():
     
     server_logs = get_recent_logs(20)
 
+    # Per-playlist overview for the dashboard: which playlist holds what, and
+    # which players consume it. This answers "where should I add media / which
+    # playlist needs editing?" without opening each playlist.
+    #
+    # Players are fetched in a single query and grouped in Python rather than
+    # relying on Playlist.players per row, to avoid one query per playlist.
+    playlists = Playlist.query.order_by(Playlist.name).all()
+    players_by_playlist = {}
+    for player in Player.query.order_by(Player.name).all():
+        if player.playlist_id is not None:
+            players_by_playlist.setdefault(player.playlist_id, []).append(player)
+
+    playlist_overview = []
+    for playlist in playlists:
+        assigned = players_by_playlist.get(playlist.id, [])
+        playlist_overview.append({
+            'playlist': playlist,
+            'content_count': playlist.contents.count(),
+            'total_duration': playlist.total_duration,
+            'players': assigned,
+            'player_count': len(assigned),
+            'online_count': sum(1 for p in assigned if p.is_online),
+        })
+
+    # Players with no playlist produce no content on screen, so surface them.
+    unassigned_players = Player.query.filter(Player.playlist_id.is_(None))\
+        .order_by(Player.name).all()
+
     return render_template(
         'dashboard.html',
         total_players=total_players,
         total_playlists=total_playlists,
         total_content=total_content,
         storage_mb=storage_mb,
-        recent_logs=server_logs
+        recent_logs=server_logs,
+        playlist_overview=playlist_overview,
+        unassigned_players=unassigned_players
     )
 
 

app/templates/dashboard.html

@@ -43,73 +43,313 @@
     </div>
 </div>
 
+<div class="dash-grid">
+    <!-- ── Main column: where content actually lives ─────────────────────── -->
+    <div class="dash-main">
         <div class="card">
-    <h2>Quick Actions</h2>
+            <h2 style="display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;">
-    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
+                <span style="display: flex; align-items: center; gap: 0.5rem;">
-        <a href="{{ url_for('players.add_player') }}" class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
+                    <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 24px; height: 24px;">
-            <img src="{{ url_for('static', filename='icons/monitor.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
+                    Playlist Overview
-            Add Player
+                </span>
+                <a href="{{ url_for('content.content_list') }}" class="btn btn-sm btn-primary">Manage</a>
+            </h2>
+            <p class="secondary-text" style="font-size: 0.9rem; margin-top: -0.5rem; margin-bottom: 1rem;">
+                Pick a playlist to add media to or edit. Players listed here are the devices
+                that will show it.
+            </p>
+
+            {% if playlist_overview %}
+                {% for item in playlist_overview %}
+                <div class="playlist-row">
+                    <div class="playlist-row-head">
+                        <div style="min-width: 0;">
+                            <a href="{{ url_for('content.manage_playlist_content', playlist_id=item.playlist.id) }}"
+                               class="playlist-name">{{ item.playlist.name }}</a>
+                            <div class="secondary-text" style="font-size: 0.82rem; margin-top: 2px;">
+                                {{ item.content_count }} item{{ '' if item.content_count == 1 else 's' }}
+                                &middot; {{ item.total_duration }}s
+                                &middot; v{{ item.playlist.version }}
+                                &middot;
+                                {% if item.player_count %}
+                                    <span style="color: #27ae60; font-weight: 600;">
+                                        {{ item.online_count }}/{{ item.player_count }} online
+                                    </span>
+                                {% else %}
+                                    <span style="color: #e67e22; font-weight: 600;">no players</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <a href="{{ url_for('content.manage_playlist_content', playlist_id=item.playlist.id) }}"
+                           class="btn btn-sm">Edit</a>
+                    </div>
+
+                    {% if item.players %}
+                        <div class="player-chips">
+                            {% for player in item.players %}
+                            <a href="{{ url_for('players.manage_player', player_id=player.id) }}"
+                               class="player-chip {{ 'is-online' if player.is_online else 'is-offline' }}"
+                               title="{{ player.name }}{% if player.location %} — {{ player.location }}{% endif %} ({{ 'online' if player.is_online else 'offline' }})">
+                                <span class="status-dot"></span>
+                                <span class="player-chip-name">{{ player.name }}</span>
                             </a>
-        <a href="{{ url_for('content.content_list') }}" class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
+                            {% endfor %}
-            <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
+                        </div>
-            Create Playlist
+                    {% else %}
-        </a>
+                        <p class="empty-hint">
-        <a href="{{ url_for('content.content_list') }}" class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
+                            No players assigned — content here is not shown on any screen yet.
-            <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
+                            <a href="{{ url_for('players.list') }}">Assign a player &rarr;</a>
-            Upload Media
+                        </p>
-        </a>
+                    {% endif %}
-        {% if current_user.is_admin %}
+                </div>
-            <a href="{{ url_for('admin.admin_panel') }}" class="btn">Admin Panel</a>
+                {% endfor %}
+            {% else %}
+                <p class="empty-hint">
+                    No playlists yet.
+                    <a href="{{ url_for('content.content_list') }}">Create your first playlist &rarr;</a>
+                </p>
+            {% endif %}
+
+            {% if unassigned_players %}
+            <div class="unassigned-note">
+                <strong>{{ unassigned_players | length }} player{{ '' if unassigned_players | length == 1 else 's' }}
+                not assigned to any playlist:</strong>
+                {% for player in unassigned_players %}
+                    <a href="{{ url_for('players.manage_player', player_id=player.id) }}">{{ player.name }}</a>{{ ', ' if not loop.last else '' }}
+                {% endfor %}
+                — these will not display content until a playlist is assigned.
+            </div>
             {% endif %}
         </div>
     </div>
 
-<div class="card">
+    <!-- ── Right sidebar: small, fixed-width helper cards ─────────────────── -->
-    <h2 style="display: flex; align-items: center; gap: 0.5rem;">
+    <aside class="dash-side">
-        <img src="{{ url_for('static', filename='icons/info.svg') }}" alt="" style="width: 24px; height: 24px;">
+        <div class="card card-compact">
+            <h3 class="compact-title">Quick Actions</h3>
+            <div class="compact-actions">
+                <a href="{{ url_for('players.add_player') }}" class="btn btn-sm btn-success compact-btn">
+                    <img src="{{ url_for('static', filename='icons/monitor.svg') }}" alt="" class="compact-btn-icon">
+                    Add Player
+                </a>
+                <a href="{{ url_for('content.content_list') }}" class="btn btn-sm btn-success compact-btn">
+                    <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" class="compact-btn-icon">
+                    Create Playlist
+                </a>
+                <a href="{{ url_for('content.upload_media_page') }}" class="btn btn-sm btn-success compact-btn">
+                    <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" class="compact-btn-icon">
+                    Upload Media
+                </a>
+                {% if current_user.is_admin %}
+                    <a href="{{ url_for('admin.admin_panel') }}" class="btn btn-sm compact-btn">
+                        <img src="{{ url_for('static', filename='icons/info.svg') }}" alt="" class="compact-btn-icon">
+                        Admin Panel
+                    </a>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="card card-compact">
+            <h3 class="compact-title">
+                <img src="{{ url_for('static', filename='icons/info.svg') }}" alt="" style="width: 18px; height: 18px;">
                 Workflow Guide
-    </h2>
+            </h3>
             <div class="workflow-guide">
-        <ol style="line-height: 2; margin: 0; padding-left: 1.5rem;">
+                <ol>
-            <li><strong>Create a Playlist</strong> - Group your content into themed collections</li>
+                    <li><strong>Create a Playlist</strong></li>
-            <li><strong>Upload Media</strong> - Add images, videos, or PDFs to your media library</li>
+                    <li><strong>Upload Media</strong></li>
-            <li><strong>Add Content to Playlist</strong> - Build your playlist with drag-and-drop ordering</li>
+                    <li><strong>Add Content</strong></li>
-            <li><strong>Add Player</strong> - Register physical display devices</li>
+                    <li><strong>Add Player</strong></li>
-            <li><strong>Assign Playlist</strong> - Connect players to their playlists</li>
+                    <li><strong>Assign Playlist</strong></li>
-            <li><strong>Players Auto-Download</strong> - Devices fetch and display content automatically</li>
+                    <li><strong>Auto-Download</strong></li>
                 </ol>
             </div>
         </div>
+    </aside>
+</div>
 
 <style>
+/* Dashboard two-column layout: main content + narrow right sidebar.
+   `minmax(0, 1fr)` keeps long playlist/player names from widening the grid. */
+.dash-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 220px;
+    gap: 1.5rem;
+    align-items: start;
+}
+.dash-side {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    /* Stick the sidebar while the playlist card scrolls, on tall screens. */
+    position: sticky;
+    top: 1rem;
+}
+
+/* Compact card used by the sidebar widgets. */
+.card-compact {
+    padding: 0.85rem;
+    margin-bottom: 0;
+}
+.card-compact:hover {
+    /* The global .card lift is distracting on small utility cards. */
+    transform: none;
+}
+.compact-title {
+    margin: 0 0 0.6rem 0;
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.compact-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+}
+.compact-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+    padding: 0.45rem 0.6rem;
+    font-size: 0.82rem;
+    text-align: left;
+    justify-content: flex-start;
+}
+.compact-btn-icon {
+    width: 15px;
+    height: 15px;
+    flex: 0 0 auto;
+    filter: brightness(0) invert(1);
+}
+/* The Admin Panel button keeps the default (non-success) background, so its
+   icon must stay in the button's text colour instead of being forced white. */
+.compact-btn:not(.btn-success) .compact-btn-icon {
+    filter: none;
+}
+body.dark-mode .compact-btn:not(.btn-success) .compact-btn-icon {
+    filter: brightness(0) invert(1);
+}
+
 .workflow-guide {
+    margin-top: 0.4rem;
+    padding: 0.6rem 0.7rem;
+    background: var(--bg-color);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+}
+.workflow-guide ol {
+    margin: 0;
+    padding-left: 1.2rem;
+    line-height: 1.65;
+    font-size: 0.82rem;
+}
+
+/* ── Playlist overview rows ───────────────────────────────────────────── */
+.playlist-row {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border-color);
+}
+.playlist-row:last-of-type {
+    border-bottom: none;
+}
+.playlist-row-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+.playlist-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--primary-color);
+    text-decoration: none;
+    word-break: break-word;
+}
+.playlist-name:hover {
+    text-decoration: underline;
+}
+
+.player-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-top: 0.5rem;
+}
+.player-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.15rem 0.55rem;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    text-decoration: none;
+    border: 1px solid var(--border-color);
+    background: var(--bg-color);
+    color: var(--text-color);
+    max-width: 100%;
+}
+.player-chip:hover {
+    border-color: var(--primary-color);
+}
+.player-chip-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+}
+.player-chip.is-online .status-dot { background: #27ae60; }
+.player-chip.is-offline .status-dot { background: #cbd5e0; }
+body.dark-mode .player-chip.is-offline .status-dot { background: #718096; }
+
+.empty-hint {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+.unassigned-note {
     margin-top: 1rem;
-    padding: 1rem;
+    padding: 0.7rem 0.85rem;
-    background: #f8f9fa;
+    border-radius: 8px;
-    border-radius: 4px;
+    border-left: 4px solid #e67e22;
-    border: 1px solid #e2e8f0;
+    background: rgba(230, 126, 34, 0.1);
+    font-size: 0.85rem;
+}
+.unassigned-note a {
+    color: var(--primary-color);
 }
 
-body.dark-mode .workflow-guide {
+/* Sidebar collapses below the main column when space runs out. */
-    background: #1a202c;
+@media (max-width: 900px) {
-    border: 1px solid #4a5568;
+    .dash-grid {
+        grid-template-columns: 1fr;
+    }
+    .dash-side {
+        position: static;
+        /* Narrow screens: let the small cards sit side by side. */
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .dash-side .card-compact {
+        flex: 1 1 200px;
+    }
 }
 
+/* Shared helpers used by the cards below. */
 .secondary-text {
-    color: #7f8c8d;
+    color: var(--text-secondary);
-}
-
-body.dark-mode .secondary-text {
-    color: #a0aec0;
 }
 
 .log-item {
     padding: 0.5rem;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--border-color);
-}
-
-body.dark-mode .log-item {
-    border-bottom: 1px solid #4a5568;
 }
 </style>
 
@@ -133,7 +373,7 @@ body.dark-mode .log-item {
 <div class="card">
     <h2>System Status</h2>
     <p>✅ All systems operational</p>
-    <p>� Playlist-centric architecture active</p>
+    <p>📋 Playlist-centric architecture active</p>
     <p>🔄 Groups removed - Streamlined workflow</p>
     <p>⚡ DigiServer v2.0</p>
 </div>