✨ Add groups

app/app.vue

@@ -3,8 +3,9 @@
         <div class="page">
             <div class="sidebar">
                 <div>
-                    <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath === '/' }" to="/"><UiIcon>home</UiIcon>Home</NuxtLink>
+                    <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath === '/' }" to="/"><UiIcon>house</UiIcon>Home</NuxtLink>
                     <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/artifacts') }" to="/artifacts"><UiIcon>box</UiIcon>Artifacts</NuxtLink>
+                    <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/groups') }" to="/groups"><UiIcon>stacks</UiIcon>Groups</NuxtLink>
                 </div>
                 <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/settings') }" to="/settings"><UiIcon>settings</UiIcon>Settings</NuxtLink>
                 <a class="link left-center" :href="useRuntimeConfig().public.logoutUrl"><UiIcon>logout</UiIcon> Log Out</a>

app/components/group/GroupList.vue

@@ -0,0 +1,31 @@
+<template>
+    <Table columns="1fr">
+        <HeaderRow>
+            <HeaderCell>Group ID</HeaderCell>
+        </HeaderRow>
+        <ContentRow v-for="group in groups">
+            <ContentCell>{{group.groupId}}</ContentCell>
+        </ContentRow>
+    </Table>
+</template>
+
+<script setup lang="ts">
+import Table from "~/components/ui/table/Table.vue";
+import HeaderCell from "~/components/ui/table/HeaderCell.vue";
+import HeaderRow from "~/components/ui/table/HeaderRow.vue";
+import ContentRow from "~/components/ui/table/ContentRow.vue";
+import ContentCell from "~/components/ui/table/ContentCell.vue";
+import {Group} from "~/components/group/Group";
+
+const groups: Ref<Group[] | undefined> = ref(undefined);
+
+onMounted(() => {
+    Group.get((_groups) => {
+        groups.value = _groups;
+    })
+})
+</script>
+
+<style scoped>
+
+</style>

app/pages/groups/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="content-l">
+        <h1>Groups</h1>
+        <GroupList></GroupList>
+    </div>
+</template>
+
+<script setup lang="ts">
+import GroupList from "~/components/group/GroupList.vue";
+</script>
+
+<style scoped>
+
+</style>