Group detail view & editing form

src/routes/features/groups/[id]/+page.svelte

@@ -0,0 +1,38 @@
+<script>
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+    import GroupView from "$components/features/GroupView.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    const groupId = $page.params.id;
+    /** @type {import('$entities/TagGroup.ts').default|null} */
+    let group = null;
+
+    if (groupId==='new') {
+        goto('/features/groups/new/edit');
+    }
+
+    $: {
+        group = $tagGroupsStore.find(group => group.id===groupId) || null;
+
+        if (!group) {
+            console.warn(`Group ${ groupId } not found.`);
+            goto('/features/groups');
+        }
+    }
+</script>
+
+<Menu>
+    <MenuItem href="/features/groups" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+{#if group}
+    <GroupView {group}/>
+{/if}
+<Menu>
+    <hr>
+    <MenuItem href="/features/groups/{groupId}/edit" icon="wrench">Edit Group</MenuItem>
+    <MenuItem href="/features/groups/{groupId}/export" icon="file-export">Export Group</MenuItem>
+</Menu>

src/routes/features/groups/[id]/edit/+page.svelte

@@ -0,0 +1,70 @@
+<script>
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import TextField from "$components/ui/forms/TextField.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import TagsEditor from "$components/web-components/TagsEditor.svelte";
+    import TagGroup from "$entities/TagGroup.ts";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    const groupId = $page.params.id;
+    /** @type {TagGroup|null} */
+    let targetGroup = null;
+
+    let groupName = '';
+    /** @type {string[]} */
+    let tagsList = [];
+    /** @type {string[]} */
+    let prefixesList = [];
+
+    if (groupId==='new') {
+        targetGroup = new TagGroup(crypto.randomUUID(), {});
+    } else {
+        targetGroup = $tagGroupsStore.find(group => group.id===groupId) || null;
+
+        if (targetGroup) {
+            groupName = targetGroup.settings.name;
+            tagsList = [ ...targetGroup.settings.tags ].sort((a, b) => a.localeCompare(b));
+            prefixesList = [ ...targetGroup.settings.prefixes ].sort((a, b) => a.localeCompare(b));
+        } else {
+            goto('/features/groups');
+        }
+    }
+
+    async function saveGroup() {
+        if (!targetGroup) {
+            console.warn('Attempting to save group, but group is not loaded yet.');
+            return;
+        }
+
+        targetGroup.settings.name = groupName;
+        targetGroup.settings.tags = [ ...tagsList ];
+        targetGroup.settings.prefixes = [ ...prefixesList ];
+
+        await targetGroup.save();
+        await goto(`/features/groups/${ targetGroup.id }`);
+    }
+</script>
+
+<Menu>
+    <MenuItem href="/features/groups/${groupId}" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl label="Group Name">
+        <TextField bind:value={groupName} placeholder="Group Name"></TextField>
+    </FormControl>
+    <FormControl label="Tags">
+        <TagsEditor bind:tags={tagsList}/>
+    </FormControl>
+    <FormControl label="Tag Prefixes">
+        <TagsEditor bind:tags={prefixesList}/>
+    </FormControl>
+</FormContainer>
+<Menu>
+    <hr>
+    <MenuItem on:click={saveGroup}>Save Group</MenuItem>
+</Menu>