diff --git a/Cargo.lock b/Cargo.lock index d3e9ae8..77524d7 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1141,7 +1141,7 @@ dependencies = [ [[package]] name = "furumusic" -version = "0.1.1" +version = "0.1.3" dependencies = [ "anyhow", "async-trait", diff --git a/templates/player.html b/templates/player.html index 38a6d6f..9702949 100644 --- a/templates/player.html +++ b/templates/player.html @@ -937,10 +937,50 @@ body { .empty-state svg { width: 64px; height: 64px; margin-bottom: 16px; } .empty-state p { font-size: 14px; } +.content-topbar { + margin-bottom: 20px; +} + /* Search bar */ .search-bar { position: relative; - margin-bottom: 20px; + min-width: 0; +} + +.mobile-account-chip { + display: none; + align-items: center; + gap: 8px; + min-width: 0; + max-width: 148px; + height: 42px; + padding: 0 10px 0 6px; + border: 1px solid var(--border-color); + border-radius: 8px; + background: var(--bg-elevated); + color: var(--text-primary); + cursor: pointer; +} + +.mobile-account-chip:hover { + background: var(--bg-hover); +} + +.mobile-account-chip .user-avatar { + width: 30px; + height: 30px; + font-size: 13px; + flex-shrink: 0; +} + +.mobile-account-name { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + font-weight: 700; + text-align: left; } .search-bar input { @@ -1281,6 +1321,22 @@ body { padding: 16px; } + .content-topbar { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 16px; + } + + .content-topbar .search-bar { + flex: 1 1 auto; + } + + .mobile-account-chip { + display: flex; + flex: 0 0 auto; + } + .card-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px; @@ -1439,7 +1495,7 @@ body { margin-bottom: 14px; } - .search-bar { + .content-topbar { margin-bottom: 14px; } @@ -1453,6 +1509,17 @@ body { display: none; } + .mobile-account-chip { + max-width: 42px; + width: 42px; + padding: 0; + justify-content: center; + } + + .mobile-account-name { + display: none; + } + .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; @@ -1701,21 +1768,31 @@ body {