Refactored groups-related routes and components

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>

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'}">