From 8aba5abb1e88e1d7532e21b8c367511617b2049d Mon Sep 17 00:00:00 2001
From: Andreas Dinauer <andreas.j.dinauer@gmail.com>
Date: Mon, 13 Apr 2026 19:53:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20groups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                        |  3 ++-
 app/components/group/GroupList.vue | 31 ++++++++++++++++++++++++++++++
 app/pages/groups/index.vue         | 14 ++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 app/components/group/GroupList.vue
 create mode 100644 app/pages/groups/index.vue

diff --git a/app/app.vue b/app/app.vue
index 6f6708d..b140a92 100644
--- a/app/app.vue
+++ b/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>
diff --git a/app/components/group/GroupList.vue b/app/components/group/GroupList.vue
new file mode 100644
index 0000000..792717d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/pages/groups/index.vue b/app/pages/groups/index.vue
new file mode 100644
index 0000000..4bcc97b
--- /dev/null
+++ b/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>
\ No newline at end of file