tag colors and tag list tracking fix

src/lib/colors.ts

@@ -0,0 +1,79 @@
+/**
+ * Converts a hex color string to HSL.
+ */
+export function hexToHsl(hex: string): { h: number; s: number; l: number } {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0, s = 0, l = (max + min) / 2;
+
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+        h /= 6;
+    }
+
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+
+/**
+ * Converts HSL values to a hex string.
+ */
+export function hslToHex(h: number, s: number, l: number): string {
+    s /= 100;
+    l /= 100;
+
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+    const m = l - c / 2;
+    let r = 0, g = 0, b = 0;
+
+    if (h >= 0 && h < 60) { r = c; g = x; b = 0; }
+    else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }
+    else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }
+    else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }
+    else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }
+    else if (h >= 300 && h < 360) { r = c; g = 0; b = x; }
+
+    const toHex = (n: number) => {
+        const hex = Math.round((n + m) * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Adjusts a color based on the theme change.
+ * If baseTheme matches currentTheme, returns the original color.
+ * Otherwise, inverts the lightness (L = 100 - L).
+ */
+export function getThemeAdjustedColor(
+    color: string | undefined,
+    baseTheme: "light" | "dark" | undefined,
+    currentTheme: "light" | "dark"
+): string | undefined {
+    if (!color || !color.startsWith("#")) return color;
+    if (!baseTheme || baseTheme === currentTheme) return color;
+
+    const { h, s, l } = hexToHsl(color);
+
+    // Invert lightness: 100 -> 0, 0 -> 100
+    // To keep it readable, we might want to clamp it or shift it
+    // But the user asked for "invert brightness", so 100 - L is the most direct implementation.
+    // However, 100-L can make 50% stay 50%.
+    // For tags, we usually want them to be "light" in dark mode (bright on dark)
+    // and "dark" in light mode (dark on light).
+    // If L = 20 (dark blue) in dark mode, it's 80 (light blue) in light mode.
+    const newL = 100 - l;
+
+    return hslToHex(h, s, newL);
+}

src/lib/pocketbase.ts

@@ -3,3 +3,4 @@ import PocketBase from 'pocketbase';
 export const pb = new PocketBase('https://pocketbase.ccllc.pro');
 
 export const TASGRID_COLLECTION = 'TasGrid';
+export const TAGS_COLLECTION = 'TasGrid_Tags';