🎨(app-impress) different color per user

We generate a color for each user.
This color is used to highlight the
user's cursor and selection.

src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx

@@ -6,6 +6,7 @@ import { useAuthStore } from '@/core/auth';
 
 import { PadStore, usePadStore } from '../store';
 import { Pad } from '../types';
+import { randomColor } from '../utils';
 
 interface BlockNoteEditorProps {
   pad: Pad;
@@ -32,7 +33,7 @@ export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => {
       fragment: provider.doc.getXmlFragment('document-store'),
       user: {
         name: userData?.name || userData?.email || 'Anonymous',
-        color: '#ff0000',
+        color: randomColor(),
       },
     },
   });

src/frontend/apps/impress/src/features/pads/pad/utils.ts

@@ -0,0 +1,24 @@
+export const randomColor = () => {
+  const randomInt = (min: number, max: number) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  };
+
+  const h = randomInt(0, 360); // hue
+  const s = randomInt(42, 98); // saturation
+  const l = randomInt(70, 90); // lightness
+
+  return hslToHex(h, s, l);
+};
+
+function hslToHex(h: number, s: number, l: number) {
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  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)}`;
+}