Add app sidebar

frontend/src/utils/siteColors.ts

@@ -0,0 +1,42 @@
+function hashString(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash * 31 + str.charCodeAt(i)) >>> 0;
+    }
+    return hash;
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+    s /= 100;
+    l /= 100;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n: number) => {
+        const k = (n + h / 30) % 12;
+        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color)
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+export function getSiteColor(name: string): { bg: string; text: string } {
+    const hash = hashString(name.trim().toLowerCase());
+
+    // Hue between 210 and 260 (blue to purple)
+    const hue = 210 + (hash % 50);
+
+    const hash2 = hashString(hash.toString());
+    const saturation = 35 + (hash2 % 30); // 35–65%
+    const lightness = 30 + (hash2 % 30); // 30–60%
+
+    const bg = hslToHex(hue, saturation, lightness);
+
+    const r = parseInt(bg.slice(1, 3), 16);
+    const g = parseInt(bg.slice(3, 5), 16);
+    const b = parseInt(bg.slice(5, 7), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    const text = luminance > 0.5 ? '#1a1a1a' : '#ffffff';
+
+    return { bg, text };
+}