Fix some UI bugs; colors etc

.air.toml

@@ -5,16 +5,16 @@ tmp_dir = "tmp"
 [build]
   args_bin = ["--config", "data/"]
   bin = "./tmp/main"
-  cmd = "bash -c 'go build -ldflags \"-X github.com/sirrobot01/decypharr/pkg/version.Version=0.0.0 -X github.com/sirrobot01/decypharr/pkg/version.Channel=dev\" -o ./tmp/main .'"
+  cmd = "bash -c 'npm run build && go build -ldflags \"-X github.com/sirrobot01/decypharr/pkg/version.Version=0.0.0 -X github.com/sirrobot01/decypharr/pkg/version.Channel=dev\" -o ./tmp/main .'"
   delay = 1000
-  exclude_dir = ["tmp", "vendor", "testdata", "data"]
+  exclude_dir = ["tmp", "vendor", "testdata", "data", "logs", "docs", "dist", "node_modules", ".ven"]
   exclude_file = []
   exclude_regex = ["_test.go"]
   exclude_unchanged = false
   follow_symlink = false
   full_bin = ""
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "html", ".json", ".js", ".css", ".scss", ".ts", ".tsx", ".vue"]
+  include_ext = ["go", "tpl", "tmpl", "html", ".json", ".js", ".css"]
   include_file = []
   kill_delay = "0s"
   log = "build-errors.log"

package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "build-css": "tailwindcss -i ./pkg/web/assets/styles.css -o ./pkg/web/assets/build/css/styles.css --minify",
     "minify-js": "node scripts/minify-js.js",
-    "minify-css": "node scripts/minify-css.js",
     "download-assets": "node scripts/download-assets.js",
-    "build": "npm run build-css && npm run minify-js && npm run minify-css && npm run download-assets",
+    "build": "npm run build-css && npm run minify-js",
+    "build-all": "npm run download-assets && npm run build",
     "dev": "npm run build && air"
   },
   "devDependencies": {

pkg/web/assets/images/favicon/site.webmanifest

@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"","short_name":"","icons":[{"src":"/images/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/images/favicon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

pkg/web/assets/styles.css

@@ -1,11 +1,24 @@
+@import './css/bootstrap-icons.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 
-/* Smooth transitions for all interactive elements */
 * {
-    transition: all 0.2s ease-in-out;
+    transition: transform 0.2s ease-in-out,
+    opacity 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
+}
+
+:root {
+    --warning-color: rgb(245 158 11); /* amber-500 */
+}
+
+[data-theme="dark"] {
+    --warning-color: rgb(251 191 36); /* amber-400 - lighter for dark theme */
 }
 
 
@@ -440,6 +453,12 @@
     color: #9ca3af; /* Gray-400 */
 }
 
+.text-warning,
+[data-theme="dark"] .text-warning,
+[data-theme="dark"] .label-text-alt.text-warning {
+    color: var(--warning-color) !important;
+}
+
 /* File input */
 [data-theme="dark"] .file-input {
     color: #ffffff !important;

pkg/web/templates/layout.html

@@ -7,7 +7,6 @@
     <title>Decypharr - {{.Title}}</title>
 
     <link href="{{.URLBase}}assets/css/styles.css" rel="stylesheet" type="text/css" />
-    <link href="{{.URLBase}}assets/css/bootstrap-icons.css" rel="stylesheet" type="text/css" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="{{.URLBase}}images/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="{{.URLBase}}images/favicon/favicon-32x32.png">

scripts/minify-css.js

@@ -1,96 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const CleanCSS = require('clean-css');
-
-const sourceDir = './pkg/web/assets/css';
-const buildDir = './pkg/web/assets/build/css';
-
-// Create build directory
-if (!fs.existsSync(buildDir)) {
-    fs.mkdirSync(buildDir, { recursive: true });
-}
-
-// Create source directory if it doesn't exist
-if (!fs.existsSync(sourceDir)) {
-    fs.mkdirSync(sourceDir, { recursive: true });
-}
-
-const cleanCSS = new CleanCSS({
-    level: 2, // Aggressive optimization
-    returnPromise: false
-});
-
-function minifyFile(inputPath, outputPath) {
-    try {
-        console.log(`🎨 Minifying ${path.basename(inputPath)}...`);
-
-        const css = fs.readFileSync(inputPath, 'utf8');
-        const result = cleanCSS.minify(css);
-
-        if (result.errors.length > 0) {
-            throw new Error(result.errors.join('\n'));
-        }
-
-        fs.writeFileSync(outputPath, result.styles);
-
-        // Show size reduction
-        const originalSize = Buffer.byteLength(css, 'utf8');
-        const minifiedSize = Buffer.byteLength(result.styles, 'utf8');
-        const reduction = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-
-        console.log(`   ✓ ${path.basename(inputPath)}: ${(originalSize/1024).toFixed(1)}KB → ${(minifiedSize/1024).toFixed(1)}KB (${reduction}% reduction)`);
-
-        return { original: originalSize, minified: minifiedSize };
-
-    } catch (error) {
-        console.error(`   ✗ Error minifying ${inputPath}:`, error.message);
-        return null;
-    }
-}
-
-function minifyAllCSS() {
-    console.log('🎨 Minifying additional CSS files...\n');
-
-    try {
-        // Get all CSS files from source directory (excluding the main styles.css which is built by Tailwind)
-        const cssFiles = fs.readdirSync(sourceDir).filter(file =>
-            file.endsWith('.css') && file !== 'styles.css'
-        );
-
-        if (cssFiles.length === 0) {
-            console.log('ℹ️  No additional CSS files found to minify');
-            return;
-        }
-
-        let totalOriginal = 0;
-        let totalMinified = 0;
-        let processedFiles = 0;
-
-        // Minify each file
-        cssFiles.forEach(file => {
-            const inputPath = path.join(sourceDir, file);
-            const outputPath = path.join(buildDir, file);
-            const result = minifyFile(inputPath, outputPath);
-
-            if (result) {
-                totalOriginal += result.original;
-                totalMinified += result.minified;
-                processedFiles++;
-            }
-        });
-
-        if (processedFiles > 0) {
-            const totalReduction = ((totalOriginal - totalMinified) / totalOriginal * 100).toFixed(1);
-            console.log(`\n✅ Successfully minified ${processedFiles}/${cssFiles.length} additional CSS file(s)`);
-            console.log(`📊 Total: ${(totalOriginal/1024).toFixed(1)}KB → ${(totalMinified/1024).toFixed(1)}KB (${totalReduction}% reduction)`);
-        }
-
-    } catch (error) {
-        console.error('💥 Error during CSS minification:', error);
-        process.exit(1);
-    }
-}
-
-minifyAllCSS();