Updated pages to use updates functions and return data.

public/css/main.css

@@ -13,6 +13,8 @@
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-3xl: 48rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -179,9 +181,6 @@
   .absolute {
     position: absolute;
   }
-  .fixed {
-    position: fixed;
-  }
   .z-1 {
     z-index: 1;
   }
@@ -218,9 +217,6 @@
   .flex {
     display: flex;
   }
-  .h-fit {
-    height: fit-content;
-  }
   .h-full {
     height: 100%;
   }
@@ -257,6 +253,13 @@
   .flex-row {
     flex-direction: row;
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -285,13 +288,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-8 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -309,21 +305,12 @@
   .border-accent {
     border-color: var(--color-accent);
   }
-  .bg-accent {
-    background-color: var(--color-accent);
-  }
   .bg-black {
     background-color: var(--color-black);
   }
   .bg-primary {
     background-color: var(--color-primary);
   }
-  .bg-primary\/80 {
-    background-color: color-mix(in srgb, oklch(0.1 0 0) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
-    }
-  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -361,6 +348,10 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
@@ -381,12 +372,6 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-accent\/80 {
-    --tw-ring-color: color-mix(in srgb, oklch(0.6 0.1556 246.71) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-accent) 80%, transparent);
-    }
-  }
   .ring-primary\/80 {
     --tw-ring-color: color-mix(in srgb, oklch(0.1 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

src/components/ListFunctionTags.vue

@@ -7,9 +7,9 @@ import { function_tags_store } from '@/ts/function_tags.ts'
     <div
       class="w-full h-full p-2 bg-primary"
       v-for="function_tag in function_tags_store.function_tags"
-      :key="function_tag"
+      :key="function_tag.name"
     >
-      <p class="drop-shadow-accent drop-shadow-md">> {{ function_tag }}</p>
+      <p class="drop-shadow-accent drop-shadow-md">> {{ function_tag.name }}</p>
     </div>
   </div>
 </template>

src/components/ListGroups.vue

@@ -4,8 +4,8 @@ import { groups_store } from '@/ts/groups.ts'
 
 <template>
   <div class="flex flex-col space-y-2 text-md">
-    <div class="w-full h-full p-2 bg-primary" v-for="group in groups_store.groups" :key="group">
-      <p class="drop-shadow-accent drop-shadow-md">> {{ group }}</p>
+    <div class="w-full h-full p-2 bg-primary" v-for="group in groups_store.groups" :key="group.name">
+      <p class="drop-shadow-accent drop-shadow-md">> {{ group.name }}</p>
     </div>
   </div>
 </template>

src/ts/function_tags.ts

@@ -1,11 +1,13 @@
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 export const function_tags_store = reactive({
-  function_tags: [],
+  function_tags: ref([] as Array<{
+    name: string
+  }>,),
 })
 
 export function update_function_tags() {
-  fetch('http://localhost:31337/get/function-tags', {
+  fetch('http://localhost:31337/get/all/function-tags', {
     credentials: 'include',
   })
     .then((res) => {

src/ts/functions.ts

@@ -23,7 +23,7 @@ export const functions_store = reactive({
 })
 
 export function update_functions() {
-  fetch('http://localhost:31337/get/functions', {
+  fetch('http://localhost:31337/get/all/functions', {
     credentials: 'include',
   })
     .then((res) => {

src/ts/groups.ts

@@ -1,11 +1,15 @@
 import { reactive, ref } from 'vue'
 
 export const groups_store = reactive({
-  groups: ref([]),
+  groups: ref(
+    [] as Array<{
+      name: string
+    }>,
+  ),
 })
 
 export function update_groups() {
-  fetch('http://localhost:31337/get/groups', {
+  fetch('http://localhost:31337/get/all/groups', {
     credentials: 'include',
   })
     .then((res) => {