Reworked main page content

Cargo.lock

@@ -1141,7 +1141,7 @@ dependencies = [
 
 [[package]]
 name = "furumusic"
-version = "0.1.1"
+version = "0.1.3"
 dependencies = [
  "anyhow",
  "async-trait",

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,7 +1768,8 @@ body {
 
         <!-- Center Content -->
         <div class="center-content" id="center-scroll">
-            <!-- Search Bar -->
+            <!-- Search / account bar -->
+            <div class="content-topbar">
                 <div class="search-bar">
                     <span class="search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
                     <input id="search-input" type="text" placeholder="Search artists, releases, tracks..."
@@ -1717,6 +1785,15 @@ body {
                         <span class="search-shortcut">Ctrl+K</span>
                     </template>
                 </div>
+                <button class="mobile-account-chip"
+                        x-show="$store.user.profile"
+                        x-cloak
+                        @click="$store.user.logout()"
+                        :title="'Log out ' + ($store.user.profile?.name || '')">
+                    <span class="user-avatar" x-text="$store.user.initials()"></span>
+                    <span class="mobile-account-name" x-text="$store.user.profile?.name || ''"></span>
+                </button>
+            </div>
 
             <!-- Search Results -->
             <template x-if="$store.library.view === 'search'">