fixed colors

.opencode/plans/fix-queue-panel-colors.md

@@ -0,0 +1,98 @@
+# Fix Queue Panel Colors to Match Application
+
+## Problem
+
+The queue panel (`frontend/src/components/queue-panel/queue-panel.ts`) uses a blue-tinted dark background (`#1a1a2e`) and dimmer secondary text colors that don't match the rest of the application's Bootstrap-inspired neutral dark grey palette.
+
+## Application Color Palette (established)
+
+| Role | Color | Used by |
+|------|-------|---------|
+| Top bar / Bottom bar | `#343a40` | `index.css` |
+| Sidebar / Main panel | `#212529` | `index.css`, `app-sidebar.ts` |
+| Body background | `black` | `index.css` |
+| Secondary text | `#b3b3b3` | `cover-grid.ts` (artist, empty state, loading) |
+| Muted text | `#888` | various components |
+| Accent | `#ffd43b` | all components (active/hover states) |
+
+## Changes
+
+All changes are in `frontend/src/components/queue-panel/queue-panel.ts`:
+
+### 1. Background color (line 27)
+
+```css
+/* Before */
+background-color: #1a1a2e;
+
+/* After */
+background-color: #212529;
+```
+
+**Reason**: `#1a1a2e` is blue-tinted (RGB 26,26,46). Should match sidebar & main panel neutral grey `#212529`.
+
+### 2. `.track-position` color (line 119)
+
+```css
+/* Before */
+color: #666;
+
+/* After */
+color: #888;
+```
+
+**Reason**: Slightly brighter to improve readability and match secondary text conventions.
+
+### 3. `.track-artist` color (line 149)
+
+```css
+/* Before */
+color: #888;
+
+/* After */
+color: #b3b3b3;
+```
+
+**Reason**: Match artist/secondary text color used in `cover-grid.ts`.
+
+### 4. `.remove-button` color (line 158)
+
+```css
+/* Before */
+color: #666;
+
+/* After */
+color: #888;
+```
+
+**Reason**: Slightly brighter for consistency with other muted interactive elements.
+
+### 5. `.empty-state` color (line 181)
+
+```css
+/* Before */
+color: #666;
+
+/* After */
+color: #b3b3b3;
+```
+
+**Reason**: Match empty-state color in `cover-grid.ts`.
+
+## No changes needed
+
+These properties already match the rest of the app:
+- Border colors (`#333`) - used consistently
+- Resize handle hover (`#6c757d`) - matches sidebar
+- Accent color (`#ffd43b`) - consistent across all components
+- Hover background (`rgba(255,255,255,0.05)`) - matches track-list
+- Active background (`rgba(255,212,59,0.1)`) - matches track-list
+- Danger hover (`#ff6b6b`) - standard for destructive actions
+
+## Verification
+
+After making changes, run:
+```bash
+cd frontend && pnpm exec tsc --noEmit
+cd frontend && pnpm build
+```

frontend/src/components/cover-grid/cover-grid.ts

@@ -123,7 +123,7 @@ export class CoverGrid extends LitElement {
         }
 
         .context-menu-panel {
-            background-color: #2a2a3e;
+            background-color: #343a40;
             border: 1px solid #444;
             border-radius: 6px;
             padding: 4px 0;
@@ -135,12 +135,12 @@ export class CoverGrid extends LitElement {
             cursor: pointer;
         }
 
-        .context-menu-panel wa-dropdown-item::part(base) {
-            color: #e0e0e0;
+        .context-menu-panel wa-dropdown-item {
+            --wa-color-text-normal: #fff;
             font-size: 13px;
         }
 
-        .context-menu-panel wa-dropdown-item::part(base):hover {
+        .context-menu-panel wa-dropdown-item:hover {
             background-color: rgba(255, 255, 255, 0.1);
         }
     `;

frontend/src/components/queue-panel/queue-panel.ts

@@ -24,7 +24,7 @@ export class QueuePanel extends LitElement {
       flex-shrink: 0;
       width: 0;
       overflow: hidden;
-      background-color: #1a1a2e;
+      background-color: #212529;
       transition: width 0.25s ease-in-out;
       display: flex;
       flex-direction: row;
@@ -116,7 +116,7 @@ export class QueuePanel extends LitElement {
 
     .track-position {
       font-size: 12px;
-      color: #666;
+      color: #888;
       min-width: 20px;
       text-align: right;
     }
@@ -146,7 +146,7 @@ export class QueuePanel extends LitElement {
 
     .track-artist {
       font-size: 11px;
-      color: #888;
+      color: #b3b3b3;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -155,7 +155,7 @@ export class QueuePanel extends LitElement {
     .remove-button {
       background: none;
       border: none;
-      color: #666;
+      color: #888;
       cursor: pointer;
       padding: 4px;
       display: flex;
@@ -178,7 +178,7 @@ export class QueuePanel extends LitElement {
       align-items: center;
       justify-content: center;
       padding: 40px 20px;
-      color: #666;
+      color: #b3b3b3;
       text-align: center;
       gap: 8px;
     }

frontend/src/components/track-list/track-list.ts

@@ -108,7 +108,7 @@ export class TrackList extends LitElement {
     }
 
     .context-menu-panel {
-      background-color: #2a2a3e;
+      background-color: #343a40;
       border: 1px solid #444;
       border-radius: 6px;
       padding: 4px 0;
@@ -120,12 +120,12 @@ export class TrackList extends LitElement {
       cursor: pointer;
     }
 
-    .context-menu-panel wa-dropdown-item::part(base) {
-      color: #e0e0e0;
+    .context-menu-panel wa-dropdown-item {
+      --wa-color-text-normal: #fff;
       font-size: 13px;
     }
 
-    .context-menu-panel wa-dropdown-item::part(base):hover {
+    .context-menu-panel wa-dropdown-item:hover {
       background-color: rgba(255, 255, 255, 0.1);
     }
   `;