From fa8b0fb43b02df7e18e3a4e541a7a11b2ac46172 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 2 Feb 2026 10:28:01 -0500
Subject: [PATCH] Remove custom CSS from queue template

Remove <style> tags with status and priority badge classes.
Move badge styles to input.css as component utilities for
TailwindCSS compliance.
---
 templates/queue.templ | 46 +++++++++----------------------------------
 1 file changed, 9 insertions(+), 37 deletions(-)
diff --git a/templates/queue.templ b/templates/queue.templ
index 0765455..66dc516 100644
--- a/templates/queue.templ
+++ b/templates/queue.templ
@@ -13,34 +13,6 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 			<script src="/static/toast.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 			<script src="/static/theme.js"></script>
-			<style>
-            .status-badge {
-                display: inline-block;
-                padding: 2px 8px;
-                border-radius: 4px;
-                font-size: 11px;
-                font-weight: 600;
-                text-transform: uppercase;
-            }
-            .status-pending { background-color: #f59e0b; color: white; }
-            .status-processing { background-color: #3b82f6; color: white; }
-            .status-completed { background-color: #10b981; color: white; }
-            .status-failed { background-color: #ef4444; color: white; }
-
-            .priority-badge {
-                display: inline-block;
-                padding: 2px 8px;
-                border-radius: 4px;
-                font-size: 10px;
-                font-weight: 600;
-            }
-            .priority-1 { background-color: #ef4444; color: white; }
-            .priority-2 { background-color: #f97316; color: white; }
-            .priority-3 { background-color: #f59e0b; color: white; }
-            .priority-5 { background-color: #10b981; color: white; }
-            .priority-7 { background-color: #6b7280; color: white; }
-            .priority-10 { background-color: #9ca3af; color: white; }
-        </style>
 		</head>
 		<body class="theme-{ user.Theme }">
 			@Header(user, "/queue")
@@ -148,15 +120,15 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 							<p>No items in the sync queue</p>
 						</div>
 					}
-					for _, item := range queueItems {
-						<div class="card p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="flex justify-between items-start mb-2">
-								<div class="flex items-center space-x-3">
-									<span class="status-badge status-{ item.Status }">{ item.Status }</span>
-									<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
-								</div>
-								<span class="priority-badge priority-{ item.Priority }">P{ item.Priority }</span>
-							</div>
+ 					for _, item := range queueItems {
+ 						<div class="card p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+ 							<div class="flex justify-between items-start mb-2">
+ 								<div class="flex items-center space-x-3">
+ 									<span class="inline-block px-2 py-0.5 rounded text-[11px] font-semibold uppercase status-{ item.Status }">{ item.Status }</span>
+ 									<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
+ 								</div>
+ 								<span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold priority-{ item.Priority }">P{ item.Priority }</span>
+ 							</div>
 							<div class="text-sm mb-2" style="color: var(--text-secondary)">
 								Device ID: { item.DeviceID }
 								if item.MediaTitle != nil {
