Refactored groups-related routes and components

2025-12-24 07:12:57 +00:00 · 2025-02-17 04:30:45 +04:00
parent 9f08eb2171
commit 49986ec497
8 changed files with 107 additions and 111 deletions
--- 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>
--- 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>
--- 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}
--- 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>
--- 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
--- 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}