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,21 +1768,31 @@ body {
 
         <!-- Center Content -->
         <div class="center-content" id="center-scroll">
-            <!-- Search Bar -->
+            <!-- Search / account bar -->
-            <div class="search-bar">
+            <div class="content-topbar">
-                <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>
+                <div class="search-bar">
-                <input id="search-input" type="text" placeholder="Search artists, releases, tracks..."
+                    <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>
-                       x-model="$store.library.searchQuery"
+                    <input id="search-input" type="text" placeholder="Search artists, releases, tracks..."
-                       @input.debounce.300ms="$store.library.search($store.library.searchQuery)"
+                           x-model="$store.library.searchQuery"
-                       @keydown.escape="$store.library.clearSearch(); $el.blur()">
+                           @input.debounce.300ms="$store.library.search($store.library.searchQuery)"
-                <template x-if="$store.library.searchQuery">
+                           @keydown.escape="$store.library.clearSearch(); $el.blur()">
-                    <button class="search-clear" @click="$store.library.clearSearch()">
+                    <template x-if="$store.library.searchQuery">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                        <button class="search-clear" @click="$store.library.clearSearch()">
-                    </button>
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                </template>
+                        </button>
-                <template x-if="!$store.library.searchQuery">
+                    </template>
-                    <span class="search-shortcut">Ctrl+K</span>
+                    <template x-if="!$store.library.searchQuery">
-                </template>
+                        <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 -->