From 49986ec497babe8162fa9188b747ed7180407459 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 04:30:45 +0400
Subject: [PATCH] Refactored groups-related routes and components

---
 src/components/features/GroupView.svelte      | 23 +++----
 src/components/tags/TagsColorContainer.svelte | 15 +++--
 src/routes/features/groups/+page.svelte       | 11 +---
 src/routes/features/groups/[id]/+page.svelte  | 24 ++++----
 .../features/groups/[id]/delete/+page.svelte  | 19 +++---
 .../features/groups/[id]/edit/+page.svelte    | 61 ++++++++++---------
 .../features/groups/[id]/export/+page.svelte  | 43 +++++++------
 .../features/groups/import/+page.svelte       | 22 +++----
 8 files changed, 107 insertions(+), 111 deletions(-)

diff --git a/src/components/features/GroupView.svelte b/src/components/features/GroupView.svelte
index ff1a245..e2a0da4 100644
--- a/src/components/features/GroupView.svelte
+++ b/src/components/features/GroupView.svelte
@@ -1,18 +1,15 @@
-<script>
+<script lang="ts">
   import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
+  import type TagGroup from "$entities/TagGroup";
 
+  interface GroupViewProps {
+    group: TagGroup;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {import('$entities/TagGroup').default} group
-   */
-
-  /** @type {Props} */
-  let { group } = $props();
-
-  let sortedTagsList = $derived(group.settings.tags.sort((a, b) => a.localeCompare(b))),
-    sortedPrefixes = $derived(group.settings.prefixes.sort((a, b) => a.localeCompare(b)));
+  let { group }: GroupViewProps = $props();
 
+  let sortedTagsList = $derived<string[]>(group.settings.tags.sort((a, b) => a.localeCompare(b))),
+    sortedPrefixes = $derived<string[]>(group.settings.prefixes.sort((a, b) => a.localeCompare(b)));
 
 </script>
 
@@ -23,7 +20,7 @@
 {#if sortedTagsList.length}
   <div class="block">
     <strong>Tags:</strong>
-    <TagsColorContainer targetCategory="{group.settings.category}">
+    <TagsColorContainer targetCategory={group.settings.category}>
       <div class="tags-list">
         {#each sortedTagsList as tagName}
           <span class="tag">{tagName}</span>
@@ -35,7 +32,7 @@
 {#if sortedPrefixes.length}
   <div class="block">
     <strong>Prefixes:</strong>
-    <TagsColorContainer targetCategory="{group.settings.category}">
+    <TagsColorContainer targetCategory={group.settings.category}>
       <div class="tags-list">
         {#each sortedPrefixes as prefixName}
           <span class="tag">{prefixName}*</span>
diff --git a/src/components/tags/TagsColorContainer.svelte b/src/components/tags/TagsColorContainer.svelte
index 3b743cb..2a1e9e4 100644
--- a/src/components/tags/TagsColorContainer.svelte
+++ b/src/components/tags/TagsColorContainer.svelte
@@ -1,13 +1,12 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
-  /**
-   * @typedef {Object} Props
-   * @property {string} [targetCategory]
-   * @property {import('svelte').Snippet} [children]
-   */
+  interface TagColorContainerProps {
+    targetCategory?: string;
+    children?: Snippet;
+  }
 
-  /** @type {Props} */
-  let { targetCategory = '', children } = $props();
+  let { targetCategory = '', children }: TagColorContainerProps = $props();
 </script>
 
 <div class="tag-color-container tag-color-container--{targetCategory || 'default'}">
diff --git a/src/routes/features/groups/+page.svelte b/src/routes/features/groups/+page.svelte
index af2d731..d2283e3 100644
--- a/src/routes/features/groups/+page.svelte
+++ b/src/routes/features/groups/+page.svelte
@@ -1,15 +1,10 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { tagGroups } from "$stores/entities/tag-groups";
+  import TagGroup from "$entities/TagGroup";
 
-  /** @type {import('$entities/TagGroup').default[]} */
-  let groups = $state([]);
-
-  run(() => {
-    groups = $tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
-  });
+  let groups = $derived<TagGroup[]>($tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name)));
 </script>
 
 <Menu>
diff --git a/src/routes/features/groups/[id]/+page.svelte b/src/routes/features/groups/[id]/+page.svelte
index b3440f5..00c44fc 100644
--- a/src/routes/features/groups/[id]/+page.svelte
+++ b/src/routes/features/groups/[id]/+page.svelte
@@ -1,28 +1,26 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
   import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import GroupView from "$components/features/GroupView.svelte";
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { tagGroups } from "$stores/entities/tag-groups";
+  import TagGroup from "$entities/TagGroup";
 
-  const groupId = $page.params.id;
-  /** @type {import('$entities/TagGroup').default|null} */
-  let group = $state(null);
+  let groupId = $derived<string>(page.params.id);
+  let group = $derived<TagGroup | null>($tagGroups.find(group => group.id === groupId) || null);
 
-  if (groupId === 'new') {
-    goto('/features/groups/new/edit');
-  }
-
-  run(() => {
-    group = $tagGroups.find(group => group.id === groupId) || null;
+  $effect(() => {
+    if (groupId === 'new') {
+      goto('/features/groups/new/edit');
+      return;
+    }
 
     if (!group) {
       console.warn(`Group ${groupId} not found.`);
       goto('/features/groups');
     }
-  });
+  })
 </script>
 
 <Menu>
diff --git a/src/routes/features/groups/[id]/delete/+page.svelte b/src/routes/features/groups/[id]/delete/+page.svelte
index b935061..febfe54 100644
--- a/src/routes/features/groups/[id]/delete/+page.svelte
+++ b/src/routes/features/groups/[id]/delete/+page.svelte
@@ -1,16 +1,19 @@
-<script>
+<script lang="ts">
   import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { tagGroups } from "$stores/entities/tag-groups";
+  import type TagGroup from "$entities/TagGroup";
 
-  const groupId = $page.params.id;
-  const targetGroup = $tagGroups.find(group => group.id === groupId);
+  const groupId = $derived<string>(page.params.id);
+  const targetGroup = $derived<TagGroup | undefined>($tagGroups.find(group => group.id === groupId));
 
-  if (!targetGroup) {
-    void goto('/features/groups');
-  }
+  $effect(() => {
+    if (!targetGroup) {
+      goto('/features/groups');
+    }
+  })
 
   async function deleteGroup() {
     if (!targetGroup) {
@@ -33,7 +36,7 @@
   </p>
   <Menu>
     <hr>
-    <MenuItem on:click={deleteGroup}>Yes</MenuItem>
+    <MenuItem onclick={deleteGroup}>Yes</MenuItem>
     <MenuItem href="/features/groups/{groupId}">No</MenuItem>
   </Menu>
 {:else}
diff --git a/src/routes/features/groups/[id]/edit/+page.svelte b/src/routes/features/groups/[id]/edit/+page.svelte
index d1fbd32..3aac580 100644
--- a/src/routes/features/groups/[id]/edit/+page.svelte
+++ b/src/routes/features/groups/[id]/edit/+page.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
   import FormContainer from "$components/ui/forms/FormContainer.svelte";
   import FormControl from "$components/ui/forms/FormControl.svelte";
@@ -12,31 +12,36 @@
   import TagGroup from "$entities/TagGroup";
   import { tagGroups } from "$stores/entities/tag-groups";
 
-  const groupId = $page.params.id;
-  /** @type {TagGroup|null} */
-  let targetGroup = null;
+  let groupId = $derived(page.params.id);
 
-  let groupName = $state('');
-  /** @type {string[]} */
-  let tagsList = $state([]);
-  /** @type {string[]} */
-  let prefixesList = $state([]);
-  let tagCategory = $state('');
-
-  if (groupId === 'new') {
-    targetGroup = new TagGroup(crypto.randomUUID(), {});
-  } else {
-    targetGroup = $tagGroups.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));
-      tagCategory = targetGroup.settings.category;
-    } else {
-      goto('/features/groups');
+  let targetGroup = $derived.by<TagGroup | null>(() => {
+    if (groupId === 'new') {
+      return new TagGroup(crypto.randomUUID(), {});
     }
-  }
+
+    return $tagGroups.find(group => group.id === groupId) || null;
+  });
+
+  let groupName = $state<string>('');
+  let tagsList = $state<string[]>([]);
+  let prefixesList = $state<string[]>([]);
+  let tagCategory = $state<string>('');
+
+  $effect(() => {
+    if (groupId === 'new') {
+      return;
+    }
+
+    if (!targetGroup) {
+      goto('/features/groups');
+      return;
+    }
+
+    groupName = targetGroup.settings.name;
+    tagsList = [...targetGroup.settings.tags].sort((a, b) => a.localeCompare(b));
+    prefixesList = [...targetGroup.settings.prefixes].sort((a, b) => a.localeCompare(b));
+    tagCategory = targetGroup.settings.category;
+  });
 
   async function saveGroup() {
     if (!targetGroup) {
@@ -65,12 +70,12 @@
   <FormControl label="Group Color">
     <TagCategorySelectField bind:value={tagCategory}/>
   </FormControl>
-  <TagsColorContainer targetCategory="{tagCategory}">
+  <TagsColorContainer targetCategory={tagCategory}>
     <FormControl label="Tags">
       <TagsEditor bind:tags={tagsList}/>
     </FormControl>
   </TagsColorContainer>
-  <TagsColorContainer targetCategory="{tagCategory}">
+  <TagsColorContainer targetCategory={tagCategory}>
     <FormControl label="Tag Prefixes">
       <TagsEditor bind:tags={prefixesList}/>
     </FormControl>
@@ -78,5 +83,5 @@
 </FormContainer>
 <Menu>
   <hr>
-  <MenuItem on:click={saveGroup}>Save Group</MenuItem>
+  <MenuItem onclick={saveGroup}>Save Group</MenuItem>
 </Menu>
diff --git a/src/routes/features/groups/[id]/export/+page.svelte b/src/routes/features/groups/[id]/export/+page.svelte
index d507644..e4067a4 100644
--- a/src/routes/features/groups/[id]/export/+page.svelte
+++ b/src/routes/features/groups/[id]/export/+page.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import FormContainer from "$components/ui/forms/FormContainer.svelte";
   import FormControl from "$components/ui/forms/FormControl.svelte";
   import Menu from "$components/ui/menu/Menu.svelte";
@@ -9,23 +9,26 @@
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { tagGroups } from "$stores/entities/tag-groups";
 
-  const groupId = $page.params.id;
-  const groupTransporter = new EntitiesTransporter(TagGroup);
-  const group = $tagGroups.find(group => group.id === groupId);
-
-  /** @type {string} */
-  let rawExportedGroup = $state();
-  /** @type {string} */
-  let encodedExportedGroup = $state();
-
-  if (!group) {
-    goto('/features/groups');
-  } else {
-    rawExportedGroup = groupTransporter.exportToJSON(group);
-    encodedExportedGroup = groupTransporter.exportToCompressedJSON(group);
-  }
-
   let isEncodedGroupShown = $state(true);
+
+  const groupId = $derived<string>(page.params.id);
+  const group = $derived<TagGroup | undefined>($tagGroups.find(group => group.id === groupId));
+
+  $effect(() => {
+    if (!group) {
+      goto('/features/groups');
+    }
+  });
+
+  const groupTransporter = new EntitiesTransporter(TagGroup);
+
+  let rawExportedGroup = $derived<string>(group ? groupTransporter.exportToJSON(group) : '');
+  let encodedExportedGroup = $derived<string>(group ? groupTransporter.exportToCompressedJSON(group) : '');
+  let selectedExportString = $derived<string>(isEncodedGroupShown ? encodedExportedGroup : rawExportedGroup);
+
+  function toggleEncoding() {
+    isEncodedGroupShown = !isEncodedGroupShown;
+  }
 </script>
 
 <Menu>
@@ -34,12 +37,12 @@
 </Menu>
 <FormContainer>
   <FormControl label="Export string">
-    <textarea readonly rows="6">{isEncodedGroupShown ? encodedExportedGroup : rawExportedGroup}</textarea>
+    <textarea readonly rows="6">{selectedExportString}</textarea>
   </FormControl>
 </FormContainer>
 <Menu>
   <hr>
-  <MenuItem on:click={() => isEncodedGroupShown = !isEncodedGroupShown}>
+  <MenuItem onclick={toggleEncoding}>
     Switch Format:
     {#if isEncodedGroupShown}
       Base64-Encoded
diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte
index e943918..58e7cbf 100644
--- a/src/routes/features/groups/import/+page.svelte
+++ b/src/routes/features/groups/import/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from "$app/navigation";
   import GroupView from "$components/features/GroupView.svelte";
   import FormContainer from "$components/ui/forms/FormContainer.svelte";
@@ -11,15 +11,11 @@
 
   const groupTransporter = new EntitiesTransporter(TagGroup);
 
-  /** @type {string} */
   let importedString = $state('');
-  /** @type {string} */
   let errorMessage = $state('');
 
-  /** @type {TagGroup|null} */
-  let candidateGroup = $state(null);
-  /** @type {TagGroup|null} */
-  let existingGroup = $state(null);
+  let candidateGroup = $state<TagGroup | null>(null);
+  let existingGroup = $state<TagGroup | null>(null);
 
   function tryImportingGroup() {
     candidateGroup = null;
@@ -91,7 +87,7 @@
   </FormContainer>
   <Menu>
     <hr>
-    <MenuItem on:click={tryImportingGroup}>Import</MenuItem>
+    <MenuItem onclick={tryImportingGroup}>Import</MenuItem>
   </Menu>
 {:else}
   {#if existingGroup}
@@ -99,16 +95,16 @@
       This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
     </p>
   {/if}
-  <GroupView group="{candidateGroup}"></GroupView>
+  <GroupView group={candidateGroup}></GroupView>
   <Menu>
     <hr>
     {#if existingGroup}
-      <MenuItem on:click={saveGroup}>Replace Existing Group</MenuItem>
-      <MenuItem on:click={cloneAndSaveGroup}>Save as New Group</MenuItem>
+      <MenuItem onclick={saveGroup}>Replace Existing Group</MenuItem>
+      <MenuItem onclick={cloneAndSaveGroup}>Save as New Group</MenuItem>
     {:else}
-      <MenuItem on:click={saveGroup}>Import New Group</MenuItem>
+      <MenuItem onclick={saveGroup}>Import New Group</MenuItem>
     {/if}
-    <MenuItem on:click={() => candidateGroup = null}>Cancel</MenuItem>
+    <MenuItem onclick={() => candidateGroup = null}>Cancel</MenuItem>
   </Menu>
 {/if}