From 96fa3fe388e18f5bd273722735f11e8a55ba0aa3 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Mon, 23 Mar 2026 21:24:39 -0700
Subject: [PATCH] Add SoulSync logo to sidebar header next to app name

---
 webui/index.html       |  9 +++++++--
 webui/static/style.css | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 46a7ee36..8dea6c5d 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -126,8 +126,13 @@
         <div class="sidebar">
             <!-- Header Section -->
             <div class="sidebar-header">
-                <h1 class="app-name">SoulSync</h1>
-                <p class="app-subtitle">Music Sync & Manager</p>
+                <div class="sidebar-brand">
+                    <img src="/static/trans2.png" alt="SoulSync" class="sidebar-logo">
+                    <div class="sidebar-brand-text">
+                        <h1 class="app-name">SoulSync</h1>
+                        <p class="app-subtitle">Music Sync & Manager</p>
+                    </div>
+                </div>
                 <div id="profile-indicator" class="profile-indicator" style="display: none;" title="Switch profile">
                     <div id="profile-indicator-avatar" class="profile-indicator-avatar"></div>
                     <span id="profile-indicator-name" class="profile-indicator-name"></span>
diff --git a/webui/static/style.css b/webui/static/style.css
index 97f31f7b..90b17ec0 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -233,6 +233,26 @@ body {
 }
 
 /* Sidebar Header */
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.sidebar-logo {
+    width: 38px;
+    height: 38px;
+    object-fit: contain;
+    filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
+    flex-shrink: 0;
+}
+
+.sidebar-brand-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
 .sidebar-header {
     min-height: 115px;
     background: linear-gradient(180deg,