use sha1 to generate colors constantly

frontend/src/components/FileTreeItem.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeMount, ref } from "vue";
 import { useRouter } from "vue-router";
-import { type FileTreeNode } from "./FileTree.vue";
+
+import { type FileTreeNode } from "@/components/FileTree.vue";
+import { remap, sha1 } from "@/services/utils";
 
 const router = useRouter();
 const props = defineProps<FileTreeNode>();
 
+const randomColor = ref("");
 const hasChildren = computed(() => props.children?.length);
 const label = computed(() => {
   const segment = props.uri.split("/");
   return segment[segment.length - 1];
 });
 
-const randomColor = computed(() => {
-  const hue = Math.random() * 360;
-  return `background-color: hsl(${hue}deg 97 75);`;
-});
-
 function onClick() {
   router.push({
     name: "dashboard",
@@ -25,6 +23,13 @@ function onClick() {
     },
   });
 }
+
+onBeforeMount(async () => {
+  const hash = await sha1(props.uri);
+  const hashAsNumber = Number(`0x${hash.slice(0, 7)}`);
+  const hue = remap(hashAsNumber, 0x0000000, 0xffff, 0, 360);
+  randomColor.value = `background-color: hsl(${hue}deg 97 75);`;
+});
 </script>
 
 <template>

frontend/src/services/utils.ts

@@ -5,3 +5,20 @@ export function sleep(delay: number): Promise<void> {
 export function isString(s: any) {
   return typeof s === "string" || s instanceof String;
 }
+
+export function remap(
+  x: number,
+  fromMin: number,
+  fromMax: number,
+  toMin: number,
+  toMax: number
+): number {
+  return ((x - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;
+}
+
+export async function sha1(message: string) {
+  const msgUint8 = new TextEncoder().encode(message);
+  const hashBuffer = await crypto.subtle.digest("SHA-1", msgUint8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+}