From 93d6d3a17461c60c019056785bf6b7c5ccf27cf4 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 2 Dec 2024 03:19:58 +0400
Subject: [PATCH] Groups listing, added link on the main view

---
 src/routes/+page.svelte                 |  1 +
 src/routes/features/groups/+page.svelte | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/routes/features/groups/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7b1fa3a..49cdecb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,6 +22,7 @@
         <hr>
     {/if}
     <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+    <MenuItem href="/features/groups">Tag Groups</MenuItem>
     <hr>
     <MenuItem href="/preferences">Preferences</MenuItem>
     <MenuItem href="/about">About</MenuItem>
diff --git a/src/routes/features/groups/+page.svelte b/src/routes/features/groups/+page.svelte
new file mode 100644
index 0000000..97fc1b7
--- /dev/null
+++ b/src/routes/features/groups/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    /** @type {import('$entities/TagGroup.ts').default[]} */
+    let groups = [];
+
+    $: groups = $tagGroupsStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+</script>
+
+<Menu>
+    <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+    <MenuItem href="/features/groups/new/edit" icon="plus">Create New</MenuItem>
+    {#if groups.length}
+        <hr>
+        {#each groups as group}
+            <MenuItem href="/features/groups/{group.id}">{group.settings.name}</MenuItem>
+        {/each}
+    {/if}
+    <hr>
+    <MenuItem href="/features/groups/import">Import Group</MenuItem>
+</Menu>