Properly display and add items to database.

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/cli": "^4.1.4",
         "@tailwindcss/vite": "^4.1.4",
+        "rustywind": "^0.24.0",
         "tailwindcss": "^4.1.4",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -2798,6 +2799,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3083,7 +3093,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3844,6 +3853,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/https-proxy-agent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "5",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz",
@@ -4516,7 +4538,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -4947,6 +4968,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5096,6 +5123,21 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rustywind": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/rustywind/-/rustywind-0.24.0.tgz",
+      "integrity": "sha512-NVOuXMO6WSuzZ1M+p2d3tGuSVY0XFJtjCHtK4G2L3tm+DDxfVUUR0RGhfQShoSKttYfc25cCbzhLUfQrlvfY8A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "https-proxy-agent": "^4.0.0",
+        "proxy-from-env": "^1.1.0",
+        "user": "^0.0.0"
+      },
+      "bin": {
+        "rustywind": "bin/rustywind"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -5478,6 +5520,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/user": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/user/-/user-0.0.0.tgz",
+      "integrity": "sha512-eRNM5isOvr6aEFAGi1CqAkmLkYxW2NJ5ThhbD+6IJXYKM1mo7Gtxx4mQIveHz/5K3p/SVnlW9k17ETn+QAu8IQ==",
+      "license": "MIT"
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@tailwindcss/cli": "^4.1.4",
     "@tailwindcss/vite": "^4.1.4",
+    "rustywind": "^0.24.0",
     "tailwindcss": "^4.1.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

public/css/main.css

@@ -23,7 +23,6 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --radius-sm: 0.25rem;
     --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-primary: oklch(0.1 0 0);
@@ -177,6 +176,9 @@
   }
 }
 @layer utilities {
+  .absolute {
+    position: absolute;
+  }
   .fixed {
     position: fixed;
   }
@@ -207,12 +209,18 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .my-auto {
+    margin-block: auto;
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
   .flex {
     display: flex;
   }
+  .h-fit {
+    height: fit-content;
+  }
   .h-full {
     height: 100%;
   }
@@ -225,6 +233,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -260,6 +271,13 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -267,6 +285,13 @@
       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);
   }
@@ -284,25 +309,28 @@
   .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\/50 {
+  .bg-primary\/80 {
-    background-color: color-mix(in srgb, oklch(0.1 0 0) 50%, transparent);
+    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) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
     }
   }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
-  .bg-white\/50 {
+  .bg-secondary\/50 {
-    background-color: color-mix(in srgb, #fff 50%, transparent);
+    background-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
     }
   }
   .bg-white\/75 {
@@ -311,18 +339,6 @@
       background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
     }
   }
-  .bg-white\/80 {
-    background-color: color-mix(in srgb, #fff 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
-    }
-  }
-  .bg-white\/90 {
-    background-color: color-mix(in srgb, #fff 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
-    }
-  }
   .mask-clip-border {
     mask-clip: border-box;
   }
@@ -335,6 +351,9 @@
   .text-center {
     text-align: center;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -346,6 +365,9 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
   .text-accent {
     color: var(--color-accent);
   }
@@ -359,23 +381,30 @@
     --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)) {
       --tw-ring-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
     }
   }
+  .ring-secondary\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
+    }
+  }
   .ring-secondary\/80 {
     --tw-ring-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
     }
   }
-  .drop-shadow-lg {
-    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
-    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .drop-shadow-md {
     --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
     --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));

src/components/AddFunction.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { add_function } from '@/ts/functions.ts'
+const function_name_input = defineModel('name')
+const function_tags_input = defineModel('tags')
+const function_requirements_input = defineModel('requirements')
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Name:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_name_input"
+        type="text"
+      />
+    </div>
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Tags:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_tags_input"
+        type="text"
+      />
+    </div>
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Requirements:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_requirements_input"
+        type="text"
+      />
+    </div>
+    <div
+      class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
+      @click="
+        add_function(
+          String(function_name_input),
+          String(function_tags_input).split(' '),
+          String(function_requirements_input).split(' '),
+        )
+      "
+    >
+      > SUBMIT
+    </div>
+  </div>
+</template>

src/components/AddFunctionTag.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { add_function_tag } from '@/ts/function_tags.ts'
+const function_tag_input = defineModel('name')
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Name:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_tag_input"
+        type="text"
+      />
+    </div>
+    <div
+      class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
+      @click="add_function_tag(String(function_tag_input))"
+    >
+      > SUBMIT
+    </div>
+  </div>
+</template>

src/components/AddGroup.vue

@@ -1,13 +1,21 @@
 <script lang="ts" setup>
 import { add_group } from '@/ts/groups.ts'
+const group_input = defineModel('name')
 </script>
 
 <template>
-  <div class="p-4 bg-primary w-full h-full flex flex-col space-y-4">
+  <div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
-    <input class="p-2 w-full h-full bg-white/75 text-primary" v-model="group_input" type="text" />
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Name:
+      </div>
+      <input class="w-full h-full p-2 bg-white/75 text-primary" v-model="group_input" type="text" />
+    </div>
     <div
-      class="drop-shadow-accent drop-shadow-md p-2 m-auto text-md w-full text-center hover:bg-white/20"
+      class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
-      @click="add_group(group_input)"
+      @click="add_group(String(group_input))"
     >
       > SUBMIT
     </div>

src/components/ListFunctionTags.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { function_tags_store } from '@/ts/function_tags.ts'
+</script>
+
+<template>
+  <div class="flex flex-col space-y-2 text-md">
+    <div
+      class="w-full h-full p-2 bg-primary"
+      v-for="function_tag in function_tags_store.function_tags"
+      :key="function_tag"
+    >
+      <p class="drop-shadow-accent drop-shadow-md">> {{ function_tag }}</p>
+    </div>
+  </div>
+</template>

src/components/ListFunctions.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { functions_store } from '@/ts/functions.ts'
+</script>
+
+<template>
+  <div class="flex flex-col space-y-2 text-md">
+    <div
+      class="flex flex-col w-full h-full p-2 space-y-1 bg-primary"
+      v-for="function_obj in functions_store.functions"
+      :key="function_obj.name"
+    >
+      <p class="text-lg drop-shadow-accent drop-shadow-md">> {{ function_obj.name }}</p>
+      <div class="flex flex-row space-x-2 text-sm">
+        <p>> tags:</p>
+        <p
+          class="drop-shadow-accent drop-shadow-md"
+          v-for="tag_obj in function_obj.tags"
+          :key="tag_obj.name"
+        >
+          {{ tag_obj.name }}
+        </p>
+      </div>
+      <div class="flex flex-row space-x-2 text-sm">
+        <p>> requirements:</p>
+        <p
+          class="drop-shadow-accent drop-shadow-md"
+          v-for="requirement_obj in function_obj.requirements"
+          :key="requirement_obj.name"
+        >
+          {{ requirement_obj.name }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

src/components/ListGroups.vue

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

src/components/TheWelcome.vue

@@ -32,8 +32,9 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
     recommended IDE setup is
     <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
     +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
+    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
-    you need to test your components and web pages, check out
+      >Vue - Official</a
+    >. If you need to test your components and web pages, check out
     <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
     and
     <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>

src/components/UserInfo.vue

@@ -7,7 +7,7 @@ import { user_store } from '@/ts/user_info'
     <div class="flex flex-row w-full h-full p-4 space-x-4 rounded-sm">
       <div class="md:min-w-fit md:min-h-fit md:max-w-fit md:max-h-fit max-w-32 max-h-32">
         <img
-          class="fixed z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
+          class="absolute z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
           :src="user_store.avatar_decoration"
         />
         <img

src/ts/function_tags.ts

@@ -0,0 +1,47 @@
+import { reactive } from 'vue'
+
+export const function_tags_store = reactive({
+  function_tags: [],
+})
+
+export function update_function_tags() {
+  fetch('http://localhost:31337/get/function-tags', {
+    credentials: 'include',
+  })
+    .then((res) => {
+      res
+        .json()
+        .then((functiontagsjson) => {
+          function_tags_store.function_tags = functiontagsjson.function_tags
+        })
+        .catch(() => {})
+    })
+    .catch(() => {})
+}
+
+export function add_function_tag(function_tag_name: string) {
+  const post_url = new URL('http://localhost:31337/post/function-tag')
+  const search_params = new URLSearchParams()
+  search_params.append('name', function_tag_name)
+  post_url.search = search_params.toString()
+  fetch(post_url, {
+    credentials: 'include',
+    method: 'POST',
+    body: JSON.stringify({
+      name: function_tag_name,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((res) => {
+      if (res.status === 400) {
+        console.log('Function Tag submitted is invalid.')
+      } else if (res.status === 401) {
+        console.log("You aren't logged in.")
+      } else {
+        update_function_tags()
+      }
+    })
+    .catch(() => {})
+}

src/ts/functions.ts

@@ -0,0 +1,79 @@
+import { reactive, ref } from 'vue'
+
+export const functions_store = reactive({
+  functions: ref(
+    [] as Array<{
+      name: string
+      tags: {
+        id: string
+        created_at: string
+        updated_at: string
+        deleted_at: string
+        name: string
+      }[]
+      requirements: {
+        id: string
+        created_at: string
+        updated_at: string
+        deleted_at: string
+        name: string
+      }[]
+    }>,
+  ),
+})
+
+export function update_functions() {
+  fetch('http://localhost:31337/get/functions', {
+    credentials: 'include',
+  })
+    .then((res) => {
+      res
+        .json()
+        .then((functionsjson) => {
+          functions_store.functions = functionsjson.functions
+        })
+        .catch(() => {})
+    })
+    .catch(() => {})
+}
+
+export function add_function(
+  function_name: string,
+  function_tags: string[],
+  function_requirements: string[],
+) {
+  const post_url = new URL('http://localhost:31337/post/function')
+  const search_params = new URLSearchParams()
+  search_params.append('name', function_name)
+  function_tags.forEach((tag) => {
+    search_params.append('tags', tag)
+  })
+  if (function_requirements.length > 0 && function_requirements[0] != 'undefined') {
+    function_requirements.forEach((requirement) => {
+      search_params.append('requirements', requirement)
+    })
+  }
+  post_url.search = search_params.toString()
+  fetch(post_url, {
+    credentials: 'include',
+    method: 'POST',
+    body: JSON.stringify({
+      name: function_name,
+      tags: function_tags,
+      requirements: function_requirements,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((res) => {
+      if (res.status === 400) {
+        console.log('Function submitted is invalid.')
+      } else if (res.status === 401) {
+        console.log("You aren't logged in.")
+      } else {
+        update_functions()
+      }
+    })
+    .catch(() => {})
+}

src/ts/groups.ts

@@ -1,7 +1,7 @@
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 export const groups_store = reactive({
-  groups: [],
+  groups: ref([]),
 })
 
 export function update_groups() {

src/views/UserDashboard.vue

@@ -1,13 +1,21 @@
 <script lang="ts" setup>
 import UserInfo from '@/components/UserInfo.vue'
 import ListGroups from '@/components/ListGroups.vue'
+import ListFunctions from '@/components/ListFunctions.vue'
+import ListFunctionTags from '@/components/ListFunctionTags.vue'
 import AddGroup from '@/components/AddGroup.vue'
+import AddFunction from '@/components/AddFunction.vue'
+import AddFunctionTag from '@/components/AddFunctionTag.vue'
 import { onMounted } from 'vue'
 import { update_info } from '@/ts/user_info'
 import { update_groups } from '@/ts/groups'
+import { update_functions } from '@/ts/functions'
+import { update_function_tags } from '@/ts/function_tags'
 
 onMounted(update_info)
 onMounted(update_groups)
+onMounted(update_functions)
+onMounted(update_function_tags)
 </script>
 
 <template>
@@ -19,20 +27,65 @@ onMounted(update_groups)
         <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
           <div class="bg-primary ring-2 ring-primary/80">
             <div
-              class="flex flex-col w-full h-full p-2 space-x-4 rounded-sm space-2 drop-shadow-md drop-shadow-accent"
+              class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
             >
-              <h1 class="text-md md:text-xl">> USER AUTHENTICATED</h1>
+              <h1 class="text-lg md:text-2xl text-accent">> USER AUTHENTICATED</h1>
             </div>
           </div>
         </div>
         <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
           <UserInfo></UserInfo>
         </div>
-        <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+        <div class="flex flex-col p-2 space-y-2 bg-secondary/50 ring-2 ring-secondary/30">
-          <ListGroups></ListGroups>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <div class="bg-primary ring-2 ring-primary/80">
+              <div
+                class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
+              >
+                <h2 class="text-lg md:text-2xl text-accent">> Groups</h2>
+              </div>
+            </div>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <ListGroups></ListGroups>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <AddGroup></AddGroup>
+          </div>
         </div>
-        <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+        <div class="flex flex-col p-2 bg-secondary/50 ring-2 ring-secondary/30">
-          <AddGroup></AddGroup>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <div class="bg-primary ring-2 ring-primary/80">
+              <div
+                class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
+              >
+                <h2 class="text-lg md:text-2xl text-accent">> Functions</h2>
+              </div>
+            </div>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <ListFunctions></ListFunctions>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <AddFunction></AddFunction>
+          </div>
+        </div>
+        <div class="flex flex-col p-2 bg-secondary/50 ring-2 ring-secondary/30">
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <div class="bg-primary ring-2 ring-primary/80">
+              <div
+                class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
+              >
+                <h2 class="text-lg md:text-2xl text-accent">> Function Tags</h2>
+              </div>
+            </div>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <ListFunctionTags></ListFunctionTags>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <AddFunctionTag></AddFunctionTag>
+          </div>
         </div>
         <a
           class="flex w-full p-2 font-mono text-lg md:p-4 md:text-2xl bg-secondary ring-2 ring-secondary/80 h-fit0 hover:bg-secondary/50"