From 96b0d12bfe7f4f455964c74e40ad961480d0c483 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Thu, 29 Jan 2026 21:36:16 -0600
Subject: [PATCH] style(LocalLibrary): homogenize filter dropdown and artist
 alpha-index

- Reduce filter panel text sizes from 13px to 12px for consistency
- Update artist alpha-index to use same styling as albums/tracks tabs
- Replace boxed buttons with clean text-only alpha letters
---
 .../components/views/LocalLibraryView.svelte  | 62 +++++--------------
 static/filter.svg                             |  4 ++
 2 files changed, 21 insertions(+), 45 deletions(-)
 create mode 100644 static/filter.svg

diff --git a/src/lib/components/views/LocalLibraryView.svelte b/src/lib/components/views/LocalLibraryView.svelte
index 0d48fc627..f4a47c95f 100644
--- a/src/lib/components/views/LocalLibraryView.svelte
+++ b/src/lib/components/views/LocalLibraryView.svelte
@@ -3258,16 +3258,18 @@
 
           <div class="artists-tab-container">
           <!-- Horizontal alphabetical index at the top -->
-          <div class="artist-alpha-index-horizontal">
-            {#each alphaIndexLetters as letter}
-              <button
-                class="alpha-letter-horizontal"
-                class:disabled={!artistAlphaGroups.has(letter)}
-                onclick={() => scrollToArtistGroup(letter, artistAlphaGroups)}
-              >
-                {letter}
-              </button>
-            {/each}
+          <div class="artist-alpha-index-row">
+            <div class="alpha-index-inline">
+              {#each alphaIndexLetters as letter}
+                <button
+                  class="alpha-letter"
+                  class:disabled={!artistAlphaGroups.has(letter)}
+                  onclick={() => scrollToArtistGroup(letter, artistAlphaGroups)}
+                >
+                  {letter}
+                </button>
+              {/each}
+            </div>
           </div>
 
           <!-- Two-column layout: Artists | Albums -->
@@ -4500,7 +4502,7 @@
   }
 
   .filter-panel-header span {
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 600;
     color: var(--text-primary);
   }
@@ -4599,7 +4601,7 @@
   }
 
   .filter-checkbox .label-text {
-    font-size: 13px;
+    font-size: 12px;
     color: var(--text-primary);
   }
 
@@ -5803,40 +5805,10 @@
   }
 
   /* Artist View - Two Column Layout */
-  .artist-alpha-index-horizontal {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-    padding: 8px 0 16px;
+  .artist-alpha-index-row {
+    padding: 8px 0 12px;
     border-bottom: 1px solid var(--bg-tertiary);
-    margin-bottom: 16px;
-  }
-
-  .alpha-letter-horizontal {
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-secondary);
-    background: var(--bg-secondary);
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .alpha-letter-horizontal:hover:not(.disabled) {
-    background: var(--accent-primary);
-    color: white;
-  }
-
-  .alpha-letter-horizontal.disabled {
-    opacity: 0.3;
-    cursor: default;
-    pointer-events: none;
+    margin-bottom: 12px;
   }
 
   .artists-tab-container {
diff --git a/static/filter.svg b/static/filter.svg
new file mode 100644
index 000000000..167e7394f
--- /dev/null
+++ b/static/filter.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.22657 2C2.50087 2 1.58526 4.03892 2.73175 5.32873L8.99972 12.3802V19C8.99972 19.3788 9.21373 19.725 9.55251 19.8944L13.5525 21.8944C13.8625 22.0494 14.2306 22.0329 14.5255 21.8507C14.8203 21.6684 14.9997 21.3466 14.9997 21V12.3802L21.2677 5.32873C22.4142 4.03893 21.4986 2 19.7729 2H4.22657Z" fill="#000000"/>
+</svg>
\ No newline at end of file