From 67d41ecf03d621d3bd224a64579d1e1e633ddd2c Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 16 Feb 2025 18:02:03 +0400
Subject: [PATCH 01/14] Migration to Svelte 5 (using the migration script)

---
 src/components/debugging/StorageViewer.svelte | 36 ++++++++++-------
 src/components/features/GroupView.svelte      | 14 ++++---
 src/components/features/ProfileView.svelte    | 10 ++++-
 src/components/tags/TagsColorContainer.svelte | 33 +++++++++------
 src/components/tags/TagsEditor.svelte         | 25 +++++++-----
 src/components/ui/forms/CheckboxField.svelte  | 17 +++++---
 src/components/ui/forms/FormContainer.svelte  | 10 ++++-
 src/components/ui/forms/FormControl.svelte    | 13 ++++--
 src/components/ui/forms/SelectField.svelte    | 31 +++++++++-----
 .../ui/forms/TagCategorySelectField.svelte    | 14 +++++--
 src/components/ui/forms/TextField.svelte      | 18 ++++++---
 src/components/ui/menu/Menu.svelte            | 10 ++++-
 .../ui/menu/MenuCheckboxItem.svelte           | 40 +++++++++++--------
 src/components/ui/menu/MenuItem.svelte        | 33 +++++++++------
 src/components/ui/menu/MenuRadioItem.svelte   | 40 +++++++++++--------
 src/routes/+layout.svelte                     |  9 ++++-
 src/routes/+page.svelte                       |  4 +-
 src/routes/features/groups/+page.svelte       |  8 +++-
 src/routes/features/groups/[id]/+page.svelte  |  8 ++--
 .../features/groups/[id]/edit/+page.svelte    |  8 ++--
 .../features/groups/[id]/export/+page.svelte  |  6 +--
 .../features/groups/import/+page.svelte       |  8 ++--
 src/routes/features/maintenance/+page.svelte  |  8 +++-
 .../features/maintenance/[id]/+page.svelte    | 14 ++++---
 .../maintenance/[id]/edit/+page.svelte        |  4 +-
 .../maintenance/[id]/export/+page.svelte      |  6 +--
 .../features/maintenance/import/+page.svelte  |  8 ++--
 .../debug/storage/[...path]/+page.svelte      | 12 +++---
 28 files changed, 287 insertions(+), 160 deletions(-)

diff --git a/src/components/debugging/StorageViewer.svelte b/src/components/debugging/StorageViewer.svelte
index 145e16b..b217caf 100644
--- a/src/components/debugging/StorageViewer.svelte
+++ b/src/components/debugging/StorageViewer.svelte
@@ -1,25 +1,33 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { storagesCollection } from "$stores/debug";
     import { goto } from "$app/navigation";
     import { findDeepObject } from "$lib/utils";
 
-    /** @type {string} */
-    export let storage;
+    
 
-    /** @type {string[]} */
-    export let path;
+    
+    /**
+     * @typedef {Object} Props
+     * @property {string} storage
+     * @property {string[]} path
+     */
+
+    /** @type {Props} */
+    let { storage, path } = $props();
 
     /** @type {Object|null} */
-    let targetStorage = null;
+    let targetStorage = $state(null);
     /** @type {[string, string][]} */
-    let breadcrumbs = [];
+    let breadcrumbs = $state([]);
     /** @type {Object<string, any>|null} */
-    let targetObject = null;
-    let targetPathString = '';
+    let targetObject = $state(null);
+    let targetPathString = $state('');
 
-    $: {
+    run(() => {
         /** @type {[string, string][]} */
         const builtBreadcrumbs = [];
 
@@ -40,21 +48,21 @@
         if (targetPathString.length) {
             targetPathString += "/";
         }
-    }
+    });
 
-    $: {
+    run(() => {
         targetStorage = $storagesCollection[storage];
 
         if (!targetStorage) {
             goto("/preferences/debug/storage");
         }
-    }
+    });
 
-    $: {
+    run(() => {
         targetObject = targetStorage
                 ? findDeepObject(targetStorage, path)
                 : null;
-    }
+    });
 
     /**
      * Helper function to resolve type, including the null.
diff --git a/src/components/features/GroupView.svelte b/src/components/features/GroupView.svelte
index 7d912e7..5f17999 100644
--- a/src/components/features/GroupView.svelte
+++ b/src/components/features/GroupView.svelte
@@ -1,15 +1,19 @@
 <script>
     import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
 
+    
     /**
-     * @type {import('$entities/TagGroup').default}
+     * @typedef {Object} Props
+     * @property {import('$entities/TagGroup').default} group
      */
-    export let group;
 
-    let sortedTagsList, sortedPrefixes;
+    /** @type {Props} */
+    let { group } = $props();
 
-    $: sortedTagsList = group.settings.tags.sort((a, b) => a.localeCompare(b));
-    $: sortedPrefixes = group.settings.prefixes.sort((a, b) => a.localeCompare(b));
+    let sortedTagsList = $derived(group.settings.tags.sort((a, b) => a.localeCompare(b))), sortedPrefixes = $derived(group.settings.prefixes.sort((a, b) => a.localeCompare(b)));
+
+    
+    
 </script>
 
 <div class="block">
diff --git a/src/components/features/ProfileView.svelte b/src/components/features/ProfileView.svelte
index 59efe3f..2fb3b64 100644
--- a/src/components/features/ProfileView.svelte
+++ b/src/components/features/ProfileView.svelte
@@ -1,6 +1,12 @@
 <script>
-    /** @type {import('$entities/MaintenanceProfile').default} */
-    export let profile;
+    
+    /**
+     * @typedef {Object} Props
+     * @property {import('$entities/MaintenanceProfile').default} profile
+     */
+
+    /** @type {Props} */
+    let { profile } = $props();
 
     const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
 </script>
diff --git a/src/components/tags/TagsColorContainer.svelte b/src/components/tags/TagsColorContainer.svelte
index 84d1bf4..3c6a237 100644
--- a/src/components/tags/TagsColorContainer.svelte
+++ b/src/components/tags/TagsColorContainer.svelte
@@ -1,61 +1,68 @@
 <script>
-    /** @type {string} */
-    export let targetCategory = '';
+    
+    /**
+     * @typedef {Object} Props
+     * @property {string} [targetCategory]
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { targetCategory = '', children } = $props();
 </script>
 
 <div class="tag-color-container tag-color-container--{targetCategory || 'default'}">
-    <slot></slot>
+    {@render children?.()}
 </div>
 
 <style lang="scss">
     @use '$styles/colors';
 
-    .tag-color-container:is(.tag-color-container--rating) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--rating)) :global(.tag) {
         background-color: colors.$tag-rating-background;
         color: colors.$tag-rating-text;
     }
 
-    .tag-color-container:is(.tag-color-container--spoiler) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--spoiler)) :global(.tag) {
         background-color: colors.$tag-spoiler-background;
         color: colors.$tag-spoiler-text;
     }
 
-    .tag-color-container:is(.tag-color-container--origin) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--origin)) :global(.tag) {
         background-color: colors.$tag-origin-background;
         color: colors.$tag-origin-text;
     }
 
-    .tag-color-container:is(.tag-color-container--oc) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--oc)) :global(.tag) {
         background-color: colors.$tag-oc-background;
         color: colors.$tag-oc-text;
     }
 
-    .tag-color-container:is(.tag-color-container--error) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--error)) :global(.tag) {
         background-color: colors.$tag-error-background;
         color: colors.$tag-error-text;
     }
 
-    .tag-color-container:is(.tag-color-container--character) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--character)) :global(.tag) {
         background-color: colors.$tag-character-background;
         color: colors.$tag-character-text;
     }
 
-    .tag-color-container:is(.tag-color-container--content-official) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--content-official)) :global(.tag) {
         background-color: colors.$tag-content-official-background;
         color: colors.$tag-content-official-text;
     }
 
-    .tag-color-container:is(.tag-color-container--content-fanmade) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--content-fanmade)) :global(.tag) {
         background-color: colors.$tag-content-fanmade-background;
         color: colors.$tag-content-fanmade-text;
     }
 
-    .tag-color-container:is(.tag-color-container--species) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--species)) :global(.tag) {
         background-color: colors.$tag-species-background;
         color: colors.$tag-species-text;
     }
 
-    .tag-color-container:is(.tag-color-container--body-type) :global(.tag) {
+    .tag-color-container:is(:global(.tag-color-container--body-type)) :global(.tag) {
         background-color: colors.$tag-body-type-background;
         color: colors.$tag-body-type-text;
     }
diff --git a/src/components/tags/TagsEditor.svelte b/src/components/tags/TagsEditor.svelte
index 1128683..16c8ab3 100644
--- a/src/components/tags/TagsEditor.svelte
+++ b/src/components/tags/TagsEditor.svelte
@@ -1,17 +1,24 @@
 <script>
+    import { run } from 'svelte/legacy';
+
+    
     /**
-     * List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
-     * @type {string[]}
+     * @typedef {Object} Props
+     * @property {string[]} [tags] - List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
      */
-    export let tags = [];
+
+    /** @type {Props} */
+    let { tags = $bindable([]) } = $props();
 
     /** @type {Set<string>} */
-    let uniqueTags = new Set();
+    let uniqueTags = $state(new Set());
 
-    $: uniqueTags = new Set(tags);
+    run(() => {
+        uniqueTags = new Set(tags);
+    });
 
     /** @type {string} */
-    let addedTagName = '';
+    let addedTagName = $state('');
 
     /**
      * Create a callback function to pass into both mouse & keyboard events for tag removal.
@@ -81,14 +88,14 @@
     {#each uniqueTags.values() as tagName}
         <div class="tag">
             {tagName}
-            <span class="remove" on:click={createTagRemoveHandler(tagName)}
-                  on:keydown={createTagRemoveHandler(tagName)}
+            <span class="remove" onclick={createTagRemoveHandler(tagName)}
+                  onkeydown={createTagRemoveHandler(tagName)}
                   role="button" tabindex="0">x</span>
         </div>
     {/each}
     <input type="text"
            bind:value={addedTagName}
-           on:keydown={handleKeyPresses}
+           onkeydown={handleKeyPresses}
            autocomplete="off"
            autocapitalize="none"/>
 </div>
diff --git a/src/components/ui/forms/CheckboxField.svelte b/src/components/ui/forms/CheckboxField.svelte
index fd42593..a4f7101 100644
--- a/src/components/ui/forms/CheckboxField.svelte
+++ b/src/components/ui/forms/CheckboxField.svelte
@@ -1,12 +1,19 @@
 <script>
-    /** @type {string|undefined} */
-    export let name = undefined;
+    
 
-    /** @type {boolean} */
-    export let checked;
+    
+    /**
+     * @typedef {Object} Props
+     * @property {string|undefined} [name]
+     * @property {boolean} checked
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { name = undefined, checked = $bindable(), children } = $props();
 </script>
 
 <input type="checkbox" {name} bind:checked={checked}>
 <span>
-    <slot></slot>
+    {@render children?.()}
 </span>
diff --git a/src/components/ui/forms/FormContainer.svelte b/src/components/ui/forms/FormContainer.svelte
index 6b26760..394839d 100644
--- a/src/components/ui/forms/FormContainer.svelte
+++ b/src/components/ui/forms/FormContainer.svelte
@@ -1,5 +1,13 @@
+<script lang="ts">
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
+</script>
+
 <form>
-    <slot></slot>
+    {@render children?.()}
 </form>
 
 <style lang="scss">
diff --git a/src/components/ui/forms/FormControl.svelte b/src/components/ui/forms/FormControl.svelte
index 6935307..ed8c5d6 100644
--- a/src/components/ui/forms/FormControl.svelte
+++ b/src/components/ui/forms/FormControl.svelte
@@ -1,14 +1,21 @@
 <script>
 
-    /** @type {string|undefined} */
-    export let label = undefined;
+    
+    /**
+     * @typedef {Object} Props
+     * @property {string|undefined} [label]
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { label = undefined, children } = $props();
 </script>
 
 <label class="control">
     {#if label}
         <div class="label">{label}</div>
     {/if}
-    <slot></slot>
+    {@render children?.()}
 </label>
 
 <style lang="scss">
diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
index f1e78a8..45581db 100644
--- a/src/components/ui/forms/SelectField.svelte
+++ b/src/components/ui/forms/SelectField.svelte
@@ -1,20 +1,29 @@
 <script>
+    
+
+    
+
+    
+
+    
     /**
-     * @type {string[]|Record<string, string>}
+     * @typedef {Object} Props
+     * @property {string[]|Record<string, string>} [options]
+     * @property {string|undefined} [name]
+     * @property {string|undefined} [id]
+     * @property {string|undefined} [value]
      */
-    export let options = [];
 
-    /** @type {string|undefined} */
-    export let name = undefined;
-
-    /** @type {string|undefined} */
-    export let id = undefined;
-
-    /** @type {string|undefined} */
-    export let value = undefined;
+    /** @type {Props} */
+    let {
+        options = [],
+        name = undefined,
+        id = undefined,
+        value = $bindable(undefined)
+    } = $props();
 
     /** @type {Record<string, string>} */
-    const optionPairs = {};
+    const optionPairs = $state({});
 
     if (Array.isArray(options)) {
         for (let option of options) {
diff --git a/src/components/ui/forms/TagCategorySelectField.svelte b/src/components/ui/forms/TagCategorySelectField.svelte
index a33c1fe..1c0413d 100644
--- a/src/components/ui/forms/TagCategorySelectField.svelte
+++ b/src/components/ui/forms/TagCategorySelectField.svelte
@@ -2,13 +2,19 @@
     import SelectField from "$components/ui/forms/SelectField.svelte";
     import { categories } from "$lib/booru/tag-categories";
 
-    /** @type {string} */
-    export let value = '';
+    
+    /**
+     * @typedef {Object} Props
+     * @property {string} [value]
+     */
+
+    /** @type {Props} */
+    let { value = $bindable('') } = $props();
 
     /** @type {Record<string, string>} */
-    let tagCategoriesOptions = {
+    let tagCategoriesOptions = $state({
         '': 'Default'
-    };
+    });
 
     tagCategoriesOptions = categories.reduce((options, category) => {
         options[category] = category
diff --git a/src/components/ui/forms/TextField.svelte b/src/components/ui/forms/TextField.svelte
index 2a2f54b..4af2e0c 100644
--- a/src/components/ui/forms/TextField.svelte
+++ b/src/components/ui/forms/TextField.svelte
@@ -1,12 +1,18 @@
 <script>
-    /** @type {string|undefined} */
-    export let name = undefined;
+    
 
-    /** @type {string|undefined} */
-    export let placeholder = undefined;
+    
 
-    /** @type {string} */
-    export let value = '';
+    
+    /**
+     * @typedef {Object} Props
+     * @property {string|undefined} [name]
+     * @property {string|undefined} [placeholder]
+     * @property {string} [value]
+     */
+
+    /** @type {Props} */
+    let { name = undefined, placeholder = undefined, value = $bindable('') } = $props();
 </script>
 
 <input type="text" {name} {placeholder} bind:value={value}>
diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index 13f0583..2e386c3 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -1,5 +1,13 @@
+<script lang="ts">
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
+</script>
+
 <nav>
-    <slot></slot>
+    {@render children?.()}
 </nav>
 
 <style lang="scss">
diff --git a/src/components/ui/menu/MenuCheckboxItem.svelte b/src/components/ui/menu/MenuCheckboxItem.svelte
index 651bba6..068dcc7 100644
--- a/src/components/ui/menu/MenuCheckboxItem.svelte
+++ b/src/components/ui/menu/MenuCheckboxItem.svelte
@@ -1,30 +1,38 @@
 <script>
+    import { createBubbler, stopPropagation } from 'svelte/legacy';
+
+    const bubble = createBubbler();
     import MenuLink from "$components/ui/menu/MenuItem.svelte";
 
-    /**
-     * @type {boolean}
-     */
-    export let checked;
+    
 
-    /**
-     * @type {string|undefined}
-     */
-    export let name = undefined;
+    
 
-    /**
-     * @type {string|undefined}
-     */
-    export let value = undefined;
+    
 
+    
     /**
-     * @type {string|null}
+     * @typedef {Object} Props
+     * @property {boolean} checked
+     * @property {string|undefined} [name]
+     * @property {string|undefined} [value]
+     * @property {string|null} [href]
+     * @property {import('svelte').Snippet} [children]
      */
-    export let href = null;
+
+    /** @type {Props} */
+    let {
+        checked = $bindable(),
+        name = undefined,
+        value = undefined,
+        href = null,
+        children
+    } = $props();
 </script>
 
 <MenuLink {href}>
-    <input type="checkbox" {name} {value} bind:checked={checked} on:input on:click|stopPropagation>
-    <slot></slot>
+    <input type="checkbox" {name} {value} bind:checked={checked} oninput={bubble('input')} onclick={stopPropagation(bubble('click'))}>
+    {@render children?.()}
 </MenuLink>
 
 <style lang="scss">
diff --git a/src/components/ui/menu/MenuItem.svelte b/src/components/ui/menu/MenuItem.svelte
index 616bfbb..0c19775 100644
--- a/src/components/ui/menu/MenuItem.svelte
+++ b/src/components/ui/menu/MenuItem.svelte
@@ -1,25 +1,34 @@
 <script>
-    /**
-     * @type {string|null}
-     */
-    export let href = null;
+    import { createBubbler } from 'svelte/legacy';
 
-    /**
-     * @type {App.IconName|null}
-     */
-    export let icon = null;
+    const bubble = createBubbler();
+    
 
+    
+
+    
     /**
-     * @type {App.LinkTarget|undefined}
+     * @typedef {Object} Props
+     * @property {string|null} [href]
+     * @property {App.IconName|null} [icon]
+     * @property {App.LinkTarget|undefined} [target]
+     * @property {import('svelte').Snippet} [children]
      */
-    export let target = undefined;
+
+    /** @type {Props} */
+    let {
+        href = null,
+        icon = null,
+        target = undefined,
+        children
+    } = $props();
 </script>
 
-<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} on:click role="link" tabindex="0">
+<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} onclick={bubble('click')} role="link" tabindex="0">
     {#if icon}
         <i class="icon icon-{icon}"></i>
     {/if}
-    <slot></slot>
+    {@render children?.()}
 </svelte:element>
 
 <style lang="scss">
diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
index 1672400..e45b62d 100644
--- a/src/components/ui/menu/MenuRadioItem.svelte
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -1,30 +1,38 @@
 <script>
+    import { createBubbler, stopPropagation } from 'svelte/legacy';
+
+    const bubble = createBubbler();
     import MenuLink from "$components/ui/menu/MenuItem.svelte";
 
-    /**
-     * @type {boolean}
-     */
-    export let checked;
+    
 
-    /**
-     * @type {string}
-     */
-    export let name;
+    
 
-    /**
-     * @type {string}
-     */
-    export let value;
+    
 
+    
     /**
-     * @type {string|null}
+     * @typedef {Object} Props
+     * @property {boolean} checked
+     * @property {string} name
+     * @property {string} value
+     * @property {string|null} [href]
+     * @property {import('svelte').Snippet} [children]
      */
-    export let href = null;
+
+    /** @type {Props} */
+    let {
+        checked,
+        name,
+        value,
+        href = null,
+        children
+    } = $props();
 </script>
 
 <MenuLink {href}>
-    <input type="radio" {name} {value} {checked} on:input on:click|stopPropagation>
-    <slot></slot>
+    <input type="radio" {name} {value} {checked} oninput={bubble('input')} onclick={stopPropagation(bubble('click'))}>
+    {@render children?.()}
 </MenuLink>
 
 <style lang="scss">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4ae27b7..4e9e931 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,12 @@
-<script>
+<script lang="ts">
     import "../styles/popup.scss";
     import Header from "$components/layout/Header.svelte";
     import Footer from "$components/layout/Footer.svelte";
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
 
     // Sort of a hack, detect if we rendered in the browser tab or in the popup.
     // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
@@ -10,7 +15,7 @@
 
 <Header/>
 <main>
-    <slot/>
+    {@render children?.()}
 </main>
 <Footer/>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 514140b..59a1d33 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,9 +5,9 @@
     import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
     /** @type {import('$entities/MaintenanceProfile').default|undefined} */
-    let activeProfile;
+    let activeProfile = $derived($maintenanceProfiles.find(profile => profile.id === $activeProfileStore));
 
-    $: activeProfile = $maintenanceProfiles.find(profile => profile.id === $activeProfileStore);
+    
 
     function turnOffActiveProfile() {
         $activeProfileStore = null;
diff --git a/src/routes/features/groups/+page.svelte b/src/routes/features/groups/+page.svelte
index c4dc03a..464d2b3 100644
--- a/src/routes/features/groups/+page.svelte
+++ b/src/routes/features/groups/+page.svelte
@@ -1,12 +1,16 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { tagGroups } from "$stores/entities/tag-groups";
 
     /** @type {import('$entities/TagGroup').default[]} */
-    let groups = [];
+    let groups = $state([]);
 
-    $: groups = $tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    run(() => {
+        groups = $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 c10af17..69d6e8e 100644
--- a/src/routes/features/groups/[id]/+page.svelte
+++ b/src/routes/features/groups/[id]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import { goto } from "$app/navigation";
     import { page } from "$app/stores";
     import GroupView from "$components/features/GroupView.svelte";
@@ -8,20 +10,20 @@
 
     const groupId = $page.params.id;
     /** @type {import('$entities/TagGroup').default|null} */
-    let group = null;
+    let group = $state(null);
 
     if (groupId === 'new') {
         goto('/features/groups/new/edit');
     }
 
-    $: {
+    run(() => {
         group = $tagGroups.find(group => group.id === groupId) || null;
 
         if (!group) {
             console.warn(`Group ${groupId} not found.`);
             goto('/features/groups');
         }
-    }
+    });
 </script>
 
 <Menu>
diff --git a/src/routes/features/groups/[id]/edit/+page.svelte b/src/routes/features/groups/[id]/edit/+page.svelte
index 85c2077..3244edf 100644
--- a/src/routes/features/groups/[id]/edit/+page.svelte
+++ b/src/routes/features/groups/[id]/edit/+page.svelte
@@ -16,12 +16,12 @@
     /** @type {TagGroup|null} */
     let targetGroup = null;
 
-    let groupName = '';
+    let groupName = $state('');
     /** @type {string[]} */
-    let tagsList = [];
+    let tagsList = $state([]);
     /** @type {string[]} */
-    let prefixesList = [];
-    let tagCategory = '';
+    let prefixesList = $state([]);
+    let tagCategory = $state('');
 
     if (groupId === 'new') {
         targetGroup = new TagGroup(crypto.randomUUID(), {});
diff --git a/src/routes/features/groups/[id]/export/+page.svelte b/src/routes/features/groups/[id]/export/+page.svelte
index c583fa5..d9b5105 100644
--- a/src/routes/features/groups/[id]/export/+page.svelte
+++ b/src/routes/features/groups/[id]/export/+page.svelte
@@ -14,9 +14,9 @@
     const group = $tagGroups.find(group => group.id === groupId);
 
     /** @type {string} */
-    let rawExportedGroup;
+    let rawExportedGroup = $state();
     /** @type {string} */
-    let encodedExportedGroup;
+    let encodedExportedGroup = $state();
 
     if (!group) {
         goto('/features/groups');
@@ -25,7 +25,7 @@
         encodedExportedGroup = groupTransporter.exportToCompressedJSON(group);
     }
 
-    let isEncodedGroupShown = true;
+    let isEncodedGroupShown = $state(true);
 </script>
 
 <Menu>
diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte
index c2cf41b..a29efb3 100644
--- a/src/routes/features/groups/import/+page.svelte
+++ b/src/routes/features/groups/import/+page.svelte
@@ -12,14 +12,14 @@
     const groupTransporter = new EntitiesTransporter(TagGroup);
 
     /** @type {string} */
-    let importedString = '';
+    let importedString = $state('');
     /** @type {string} */
-    let errorMessage = '';
+    let errorMessage = $state('');
 
     /** @type {TagGroup|null} */
-    let candidateGroup = null;
+    let candidateGroup = $state(null);
     /** @type {TagGroup|null} */
-    let existingGroup = null;
+    let existingGroup = $state(null);
 
     function tryImportingGroup() {
         candidateGroup = null;
diff --git a/src/routes/features/maintenance/+page.svelte b/src/routes/features/maintenance/+page.svelte
index 05a4352..f1c9ec4 100644
--- a/src/routes/features/maintenance/+page.svelte
+++ b/src/routes/features/maintenance/+page.svelte
@@ -1,13 +1,17 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
     import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
 
     /** @type {import('$entities/MaintenanceProfile').default[]} */
-    let profiles = [];
+    let profiles = $state([]);
 
-    $: profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    run(() => {
+        profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    });
 
     function resetActiveProfile() {
         $activeProfileStore = null;
diff --git a/src/routes/features/maintenance/[id]/+page.svelte b/src/routes/features/maintenance/[id]/+page.svelte
index c775d46..e091967 100644
--- a/src/routes/features/maintenance/[id]/+page.svelte
+++ b/src/routes/features/maintenance/[id]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { page } from "$app/stores";
@@ -9,13 +11,13 @@
 
     const profileId = $page.params.id;
     /** @type {import('$entities/MaintenanceProfile').default|null} */
-    let profile = null;
+    let profile = $state(null);
 
     if (profileId === 'new') {
         goto('/features/maintenance/new/edit');
     }
 
-    $: {
+    run(() => {
         const resolvedProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
         if (resolvedProfile) {
@@ -24,11 +26,11 @@
             console.warn(`Profile ${profileId} not found.`);
             goto('/features/maintenance');
         }
-    }
+    });
 
-    let isActiveProfile = $activeProfileStore === profileId;
+    let isActiveProfile = $state($activeProfileStore === profileId);
 
-    $: {
+    run(() => {
         if (isActiveProfile && $activeProfileStore !== profileId) {
             $activeProfileStore = profileId;
         }
@@ -36,7 +38,7 @@
         if (!isActiveProfile && $activeProfileStore === profileId) {
             $activeProfileStore = null;
         }
-    }
+    });
 </script>
 
 <Menu>
diff --git a/src/routes/features/maintenance/[id]/edit/+page.svelte b/src/routes/features/maintenance/[id]/edit/+page.svelte
index 021f324..180a64f 100644
--- a/src/routes/features/maintenance/[id]/edit/+page.svelte
+++ b/src/routes/features/maintenance/[id]/edit/+page.svelte
@@ -16,9 +16,9 @@
     let targetProfile = null;
 
     /** @type {string} */
-    let profileName = '';
+    let profileName = $state('');
     /** @type {string[]} */
-    let tagsList = [];
+    let tagsList = $state([]);
 
     if (profileId === 'new') {
         targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
diff --git a/src/routes/features/maintenance/[id]/export/+page.svelte b/src/routes/features/maintenance/[id]/export/+page.svelte
index 028a69b..429dbf5 100644
--- a/src/routes/features/maintenance/[id]/export/+page.svelte
+++ b/src/routes/features/maintenance/[id]/export/+page.svelte
@@ -14,9 +14,9 @@
 
     const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
     /** @type {string} */
-    let exportedProfile = '';
+    let exportedProfile = $state('');
     /** @type {string} */
-    let compressedProfile = '';
+    let compressedProfile = $state('');
 
     if (!profile) {
         goto('/features/maintenance/');
@@ -25,7 +25,7 @@
         compressedProfile = profilesTransporter.exportToCompressedJSON(profile);
     }
 
-    let isCompressedProfileShown = true;
+    let isCompressedProfileShown = $state(true);
 </script>
 
 <Menu>
diff --git a/src/routes/features/maintenance/import/+page.svelte b/src/routes/features/maintenance/import/+page.svelte
index 6b4b31c..d080e0b 100644
--- a/src/routes/features/maintenance/import/+page.svelte
+++ b/src/routes/features/maintenance/import/+page.svelte
@@ -12,14 +12,14 @@
     const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
     /** @type {string} */
-    let importedString = '';
+    let importedString = $state('');
     /** @type {string} */
-    let errorMessage = '';
+    let errorMessage = $state('');
 
     /** @type {MaintenanceProfile|null} */
-    let candidateProfile = null;
+    let candidateProfile = $state(null);
     /** @type {MaintenanceProfile|null} */
-    let existingProfile = null;
+    let existingProfile = $state(null);
 
     function tryImportingProfile() {
         candidateProfile = null;
diff --git a/src/routes/preferences/debug/storage/[...path]/+page.svelte b/src/routes/preferences/debug/storage/[...path]/+page.svelte
index b836071..bc2adb7 100644
--- a/src/routes/preferences/debug/storage/[...path]/+page.svelte
+++ b/src/routes/preferences/debug/storage/[...path]/+page.svelte
@@ -1,15 +1,17 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import StorageViewer from "$components/debugging/StorageViewer.svelte";
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
 
-    let pathString = '';
+    let pathString = $state('');
     /** @type {string[]} */
-    let pathArray = [];
+    let pathArray = $state([]);
     /** @type {string|undefined} */
-    let storageName = void 0;
+    let storageName = $state(void 0);
 
-    $: {
+    run(() => {
         pathString = $page.params.path;
         pathArray = pathString.length ? pathString.split("/") : [];
         storageName = pathArray.shift()
@@ -21,7 +23,7 @@
         if (!storageName) {
             goto("/preferences/debug/storage");
         }
-    }
+    });
 </script>
 
 {#if storageName}

From 762652f7952c88079b69b6f6710a37ab34aef67e Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 02:07:40 +0400
Subject: [PATCH 02/14] Added specific rules for the svelte components
 formatting

---
 .editorconfig | 359 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 359 insertions(+)

diff --git a/.editorconfig b/.editorconfig
index 04a6282..df05337 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -403,6 +403,365 @@ ij_typescript_while_brace_force = never
 ij_typescript_while_on_new_line = false
 ij_typescript_wrap_comments = false
 
+[*.svelte]
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 2
+ij_javascript_align_imports = false
+ij_javascript_align_multiline_array_initializer_expression = false
+ij_javascript_align_multiline_binary_operation = false
+ij_javascript_align_multiline_chained_methods = false
+ij_javascript_align_multiline_extends_list = false
+ij_javascript_align_multiline_for = true
+ij_javascript_align_multiline_parameters = true
+ij_javascript_align_multiline_parameters_in_calls = false
+ij_javascript_align_multiline_ternary_operation = false
+ij_javascript_align_object_properties = 0
+ij_javascript_align_union_types = false
+ij_javascript_align_var_statements = 0
+ij_javascript_array_initializer_new_line_after_left_brace = false
+ij_javascript_array_initializer_right_brace_on_new_line = false
+ij_javascript_array_initializer_wrap = off
+ij_javascript_assignment_wrap = off
+ij_javascript_binary_operation_sign_on_next_line = false
+ij_javascript_binary_operation_wrap = off
+ij_javascript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
+ij_javascript_blank_lines_after_imports = 1
+ij_javascript_blank_lines_around_class = 1
+ij_javascript_blank_lines_around_field = 0
+ij_javascript_blank_lines_around_function = 1
+ij_javascript_blank_lines_around_method = 1
+ij_javascript_block_brace_style = end_of_line
+ij_javascript_block_comment_add_space = false
+ij_javascript_block_comment_at_first_column = true
+ij_javascript_call_parameters_new_line_after_left_paren = false
+ij_javascript_call_parameters_right_paren_on_new_line = false
+ij_javascript_call_parameters_wrap = off
+ij_javascript_catch_on_new_line = false
+ij_javascript_chained_call_dot_on_new_line = true
+ij_javascript_class_brace_style = end_of_line
+ij_javascript_comma_on_new_line = false
+ij_javascript_do_while_brace_force = never
+ij_javascript_else_on_new_line = false
+ij_javascript_enforce_trailing_comma = keep
+ij_javascript_extends_keyword_wrap = off
+ij_javascript_extends_list_wrap = off
+ij_javascript_field_prefix = _
+ij_javascript_file_name_style = relaxed
+ij_javascript_finally_on_new_line = false
+ij_javascript_for_brace_force = never
+ij_javascript_for_statement_new_line_after_left_paren = false
+ij_javascript_for_statement_right_paren_on_new_line = false
+ij_javascript_for_statement_wrap = off
+ij_javascript_force_quote_style = false
+ij_javascript_force_semicolon_style = false
+ij_javascript_function_expression_brace_style = end_of_line
+ij_javascript_if_brace_force = never
+ij_javascript_import_merge_members = global
+ij_javascript_import_prefer_absolute_path = global
+ij_javascript_import_sort_members = true
+ij_javascript_import_sort_module_name = false
+ij_javascript_import_use_node_resolution = true
+ij_javascript_imports_wrap = on_every_item
+ij_javascript_indent_case_from_switch = true
+ij_javascript_indent_chained_calls = true
+ij_javascript_indent_package_children = 0
+ij_javascript_jsx_attribute_value = braces
+ij_javascript_keep_blank_lines_in_code = 2
+ij_javascript_keep_first_column_comment = true
+ij_javascript_keep_indents_on_empty_lines = false
+ij_javascript_keep_line_breaks = true
+ij_javascript_keep_simple_blocks_in_one_line = false
+ij_javascript_keep_simple_methods_in_one_line = false
+ij_javascript_line_comment_add_space = true
+ij_javascript_line_comment_at_first_column = false
+ij_javascript_method_brace_style = end_of_line
+ij_javascript_method_call_chain_wrap = off
+ij_javascript_method_parameters_new_line_after_left_paren = false
+ij_javascript_method_parameters_right_paren_on_new_line = false
+ij_javascript_method_parameters_wrap = off
+ij_javascript_object_literal_wrap = on_every_item
+ij_javascript_object_types_wrap = on_every_item
+ij_javascript_parentheses_expression_new_line_after_left_paren = false
+ij_javascript_parentheses_expression_right_paren_on_new_line = false
+ij_javascript_place_assignment_sign_on_next_line = false
+ij_javascript_prefer_as_type_cast = false
+ij_javascript_prefer_explicit_types_function_expression_returns = false
+ij_javascript_prefer_explicit_types_function_returns = false
+ij_javascript_prefer_explicit_types_vars_fields = false
+ij_javascript_prefer_parameters_wrap = false
+ij_javascript_property_prefix =
+ij_javascript_reformat_c_style_comments = false
+ij_javascript_space_after_colon = true
+ij_javascript_space_after_comma = true
+ij_javascript_space_after_dots_in_rest_parameter = false
+ij_javascript_space_after_generator_mult = true
+ij_javascript_space_after_property_colon = true
+ij_javascript_space_after_quest = true
+ij_javascript_space_after_type_colon = true
+ij_javascript_space_after_unary_not = false
+ij_javascript_space_before_async_arrow_lparen = true
+ij_javascript_space_before_catch_keyword = true
+ij_javascript_space_before_catch_left_brace = true
+ij_javascript_space_before_catch_parentheses = true
+ij_javascript_space_before_class_lbrace = true
+ij_javascript_space_before_class_left_brace = true
+ij_javascript_space_before_colon = true
+ij_javascript_space_before_comma = false
+ij_javascript_space_before_do_left_brace = true
+ij_javascript_space_before_else_keyword = true
+ij_javascript_space_before_else_left_brace = true
+ij_javascript_space_before_finally_keyword = true
+ij_javascript_space_before_finally_left_brace = true
+ij_javascript_space_before_for_left_brace = true
+ij_javascript_space_before_for_parentheses = true
+ij_javascript_space_before_for_semicolon = false
+ij_javascript_space_before_function_left_parenth = true
+ij_javascript_space_before_generator_mult = false
+ij_javascript_space_before_if_left_brace = true
+ij_javascript_space_before_if_parentheses = true
+ij_javascript_space_before_method_call_parentheses = false
+ij_javascript_space_before_method_left_brace = true
+ij_javascript_space_before_method_parentheses = false
+ij_javascript_space_before_property_colon = false
+ij_javascript_space_before_quest = true
+ij_javascript_space_before_switch_left_brace = true
+ij_javascript_space_before_switch_parentheses = true
+ij_javascript_space_before_try_left_brace = true
+ij_javascript_space_before_type_colon = false
+ij_javascript_space_before_unary_not = false
+ij_javascript_space_before_while_keyword = true
+ij_javascript_space_before_while_left_brace = true
+ij_javascript_space_before_while_parentheses = true
+ij_javascript_spaces_around_additive_operators = true
+ij_javascript_spaces_around_arrow_function_operator = true
+ij_javascript_spaces_around_assignment_operators = true
+ij_javascript_spaces_around_bitwise_operators = true
+ij_javascript_spaces_around_equality_operators = true
+ij_javascript_spaces_around_logical_operators = true
+ij_javascript_spaces_around_multiplicative_operators = true
+ij_javascript_spaces_around_relational_operators = true
+ij_javascript_spaces_around_shift_operators = true
+ij_javascript_spaces_around_unary_operator = false
+ij_javascript_spaces_within_array_initializer_brackets = false
+ij_javascript_spaces_within_brackets = false
+ij_javascript_spaces_within_catch_parentheses = false
+ij_javascript_spaces_within_for_parentheses = false
+ij_javascript_spaces_within_if_parentheses = false
+ij_javascript_spaces_within_imports = true
+ij_javascript_spaces_within_interpolation_expressions = false
+ij_javascript_spaces_within_method_call_parentheses = false
+ij_javascript_spaces_within_method_parentheses = false
+ij_javascript_spaces_within_object_literal_braces = true
+ij_javascript_spaces_within_object_type_braces = true
+ij_javascript_spaces_within_parentheses = false
+ij_javascript_spaces_within_switch_parentheses = false
+ij_javascript_spaces_within_type_assertion = false
+ij_javascript_spaces_within_union_types = true
+ij_javascript_spaces_within_while_parentheses = false
+ij_javascript_special_else_if_treatment = true
+ij_javascript_ternary_operation_signs_on_next_line = false
+ij_javascript_ternary_operation_wrap = off
+ij_javascript_union_types_wrap = on_every_item
+ij_javascript_use_chained_calls_group_indents = false
+ij_javascript_use_double_quotes = true
+ij_javascript_use_explicit_js_extension = never
+ij_javascript_use_import_type = auto
+ij_javascript_use_path_mapping = always
+ij_javascript_use_public_modifier = false
+ij_javascript_use_semicolon_after_statement = true
+ij_javascript_var_declaration_wrap = normal
+ij_javascript_while_brace_force = never
+ij_javascript_while_on_new_line = false
+ij_javascript_wrap_comments = false
+ij_scss_align_closing_brace_with_properties = false
+ij_scss_blank_lines_around_nested_selector = 1
+ij_scss_blank_lines_between_blocks = 1
+ij_scss_block_comment_add_space = false
+ij_scss_brace_placement = 0
+ij_scss_enforce_quotes_on_format = false
+ij_scss_hex_color_long_format = false
+ij_scss_hex_color_lower_case = false
+ij_scss_hex_color_short_format = false
+ij_scss_hex_color_upper_case = false
+ij_scss_keep_blank_lines_in_code = 2
+ij_scss_keep_indents_on_empty_lines = false
+ij_scss_keep_single_line_blocks = false
+ij_scss_line_comment_add_space = false
+ij_scss_line_comment_at_first_column = false
+ij_scss_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
+ij_scss_space_after_colon = true
+ij_scss_space_before_opening_brace = true
+ij_scss_use_double_quotes = true
+ij_scss_value_alignment = 0
+ij_typescript_align_imports = false
+ij_typescript_align_multiline_array_initializer_expression = false
+ij_typescript_align_multiline_binary_operation = false
+ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_extends_list = false
+ij_typescript_align_multiline_for = true
+ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters_in_calls = false
+ij_typescript_align_multiline_ternary_operation = false
+ij_typescript_align_object_properties = 0
+ij_typescript_align_union_types = false
+ij_typescript_align_var_statements = 0
+ij_typescript_array_initializer_new_line_after_left_brace = false
+ij_typescript_array_initializer_right_brace_on_new_line = false
+ij_typescript_array_initializer_wrap = off
+ij_typescript_assignment_wrap = off
+ij_typescript_binary_operation_sign_on_next_line = false
+ij_typescript_binary_operation_wrap = off
+ij_typescript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
+ij_typescript_blank_lines_after_imports = 1
+ij_typescript_blank_lines_around_class = 1
+ij_typescript_blank_lines_around_field = 0
+ij_typescript_blank_lines_around_function = 1
+ij_typescript_blank_lines_around_method = 1
+ij_typescript_block_brace_style = end_of_line
+ij_typescript_block_comment_add_space = false
+ij_typescript_block_comment_at_first_column = true
+ij_typescript_call_parameters_new_line_after_left_paren = false
+ij_typescript_call_parameters_right_paren_on_new_line = false
+ij_typescript_call_parameters_wrap = off
+ij_typescript_catch_on_new_line = false
+ij_typescript_chained_call_dot_on_new_line = true
+ij_typescript_class_brace_style = end_of_line
+ij_typescript_comma_on_new_line = false
+ij_typescript_do_while_brace_force = never
+ij_typescript_else_on_new_line = false
+ij_typescript_enforce_trailing_comma = keep
+ij_typescript_extends_keyword_wrap = off
+ij_typescript_extends_list_wrap = off
+ij_typescript_field_prefix = _
+ij_typescript_file_name_style = relaxed
+ij_typescript_finally_on_new_line = false
+ij_typescript_for_brace_force = never
+ij_typescript_for_statement_new_line_after_left_paren = false
+ij_typescript_for_statement_right_paren_on_new_line = false
+ij_typescript_for_statement_wrap = off
+ij_typescript_force_quote_style = false
+ij_typescript_force_semicolon_style = false
+ij_typescript_function_expression_brace_style = end_of_line
+ij_typescript_if_brace_force = never
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = global
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = false
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_indent_case_from_switch = true
+ij_typescript_indent_chained_calls = true
+ij_typescript_indent_package_children = 0
+ij_typescript_jsx_attribute_value = braces
+ij_typescript_keep_blank_lines_in_code = 2
+ij_typescript_keep_first_column_comment = true
+ij_typescript_keep_indents_on_empty_lines = false
+ij_typescript_keep_line_breaks = true
+ij_typescript_keep_simple_blocks_in_one_line = false
+ij_typescript_keep_simple_methods_in_one_line = false
+ij_typescript_line_comment_add_space = true
+ij_typescript_line_comment_at_first_column = false
+ij_typescript_method_brace_style = end_of_line
+ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_parameters_new_line_after_left_paren = false
+ij_typescript_method_parameters_right_paren_on_new_line = false
+ij_typescript_method_parameters_wrap = off
+ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_object_types_wrap = on_every_item
+ij_typescript_parentheses_expression_new_line_after_left_paren = false
+ij_typescript_parentheses_expression_right_paren_on_new_line = false
+ij_typescript_place_assignment_sign_on_next_line = false
+ij_typescript_prefer_as_type_cast = false
+ij_typescript_prefer_explicit_types_function_expression_returns = false
+ij_typescript_prefer_explicit_types_function_returns = false
+ij_typescript_prefer_explicit_types_vars_fields = false
+ij_typescript_prefer_parameters_wrap = false
+ij_typescript_property_prefix =
+ij_typescript_reformat_c_style_comments = false
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_dots_in_rest_parameter = false
+ij_typescript_space_after_generator_mult = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_quest = true
+ij_typescript_space_after_type_colon = true
+ij_typescript_space_after_unary_not = false
+ij_typescript_space_before_async_arrow_lparen = true
+ij_typescript_space_before_catch_keyword = true
+ij_typescript_space_before_catch_left_brace = true
+ij_typescript_space_before_catch_parentheses = true
+ij_typescript_space_before_class_lbrace = true
+ij_typescript_space_before_class_left_brace = true
+ij_typescript_space_before_colon = true
+ij_typescript_space_before_comma = false
+ij_typescript_space_before_do_left_brace = true
+ij_typescript_space_before_else_keyword = true
+ij_typescript_space_before_else_left_brace = true
+ij_typescript_space_before_finally_keyword = true
+ij_typescript_space_before_finally_left_brace = true
+ij_typescript_space_before_for_left_brace = true
+ij_typescript_space_before_for_parentheses = true
+ij_typescript_space_before_for_semicolon = false
+ij_typescript_space_before_function_left_parenth = true
+ij_typescript_space_before_generator_mult = false
+ij_typescript_space_before_if_left_brace = true
+ij_typescript_space_before_if_parentheses = true
+ij_typescript_space_before_method_call_parentheses = false
+ij_typescript_space_before_method_left_brace = true
+ij_typescript_space_before_method_parentheses = false
+ij_typescript_space_before_property_colon = false
+ij_typescript_space_before_quest = true
+ij_typescript_space_before_switch_left_brace = true
+ij_typescript_space_before_switch_parentheses = true
+ij_typescript_space_before_try_left_brace = true
+ij_typescript_space_before_type_colon = false
+ij_typescript_space_before_unary_not = false
+ij_typescript_space_before_while_keyword = true
+ij_typescript_space_before_while_left_brace = true
+ij_typescript_space_before_while_parentheses = true
+ij_typescript_spaces_around_additive_operators = true
+ij_typescript_spaces_around_arrow_function_operator = true
+ij_typescript_spaces_around_assignment_operators = true
+ij_typescript_spaces_around_bitwise_operators = true
+ij_typescript_spaces_around_equality_operators = true
+ij_typescript_spaces_around_logical_operators = true
+ij_typescript_spaces_around_multiplicative_operators = true
+ij_typescript_spaces_around_relational_operators = true
+ij_typescript_spaces_around_shift_operators = true
+ij_typescript_spaces_around_unary_operator = false
+ij_typescript_spaces_within_array_initializer_brackets = false
+ij_typescript_spaces_within_brackets = false
+ij_typescript_spaces_within_catch_parentheses = false
+ij_typescript_spaces_within_for_parentheses = false
+ij_typescript_spaces_within_if_parentheses = false
+ij_typescript_spaces_within_imports = true
+ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_method_call_parentheses = false
+ij_typescript_spaces_within_method_parentheses = false
+ij_typescript_spaces_within_object_literal_braces = true
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_parentheses = false
+ij_typescript_spaces_within_switch_parentheses = false
+ij_typescript_spaces_within_type_assertion = false
+ij_typescript_spaces_within_union_types = true
+ij_typescript_spaces_within_while_parentheses = false
+ij_typescript_special_else_if_treatment = true
+ij_typescript_ternary_operation_signs_on_next_line = false
+ij_typescript_ternary_operation_wrap = off
+ij_typescript_union_types_wrap = on_every_item
+ij_typescript_use_chained_calls_group_indents = false
+ij_typescript_use_double_quotes = true
+ij_typescript_use_explicit_js_extension = never
+ij_typescript_use_import_type = auto
+ij_typescript_use_path_mapping = always
+ij_typescript_use_public_modifier = false
+ij_typescript_use_semicolon_after_statement = true
+ij_typescript_var_declaration_wrap = normal
+ij_typescript_while_brace_force = never
+ij_typescript_while_on_new_line = false
+ij_typescript_wrap_comments = false
+
 [{*.htm,*.html,*.sht,*.shtm,*.shtml}]
 ij_html_add_new_line_before_tags = body, div, p, form, h1, h2, h3
 ij_html_align_attributes = true

From efdd9487ad42ffecffaca664043bc2c62c39d75b Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 02:07:55 +0400
Subject: [PATCH 03/14] Reformatting all svelte templates to use new rules

---
 src/components/debugging/StorageViewer.svelte | 199 +++++++++--------
 src/components/features/GroupView.svelte      |  88 ++++----
 src/components/features/ProfileView.svelte    |  54 ++---
 src/components/layout/Footer.svelte           |  40 ++--
 src/components/layout/Header.svelte           |  38 ++--
 src/components/tags/TagsColorContainer.svelte | 100 ++++-----
 src/components/tags/TagsEditor.svelte         | 182 ++++++++--------
 src/components/ui/forms/CheckboxField.svelte  |  21 +-
 src/components/ui/forms/FormContainer.svelte  |  20 +-
 src/components/ui/forms/FormControl.svelte    |  42 ++--
 src/components/ui/forms/SelectField.svelte    |  67 +++---
 .../ui/forms/TagCategorySelectField.svelte    | 128 +++++------
 src/components/ui/forms/TextField.svelte      |  27 +--
 src/components/ui/menu/Menu.svelte            |  68 +++---
 .../ui/menu/MenuCheckboxItem.svelte           |  62 +++---
 src/components/ui/menu/MenuItem.svelte        |  70 +++---
 src/components/ui/menu/MenuRadioItem.svelte   |  60 +++--
 src/routes/+layout.svelte                     |  31 +--
 src/routes/+page.svelte                       |  39 ++--
 src/routes/about/+page.svelte                 |  28 +--
 src/routes/features/+page.svelte              |  10 +-
 src/routes/features/groups/+page.svelte       |  37 ++--
 src/routes/features/groups/[id]/+page.svelte  |  55 +++--
 .../features/groups/[id]/delete/+page.svelte  |  56 ++---
 .../features/groups/[id]/edit/+page.svelte    | 126 +++++------
 .../features/groups/[id]/export/+page.svelte  |  74 +++----
 .../features/groups/import/+page.svelte       | 206 +++++++++---------
 src/routes/features/maintenance/+page.svelte  |  77 ++++---
 .../features/maintenance/[id]/+page.svelte    |  97 ++++-----
 .../maintenance/[id]/delete/+page.svelte      |  56 ++---
 .../maintenance/[id]/edit/+page.svelte        | 104 ++++-----
 .../maintenance/[id]/export/+page.svelte      |  78 +++----
 .../features/maintenance/import/+page.svelte  | 206 +++++++++---------
 src/routes/preferences/+page.svelte           |  18 +-
 src/routes/preferences/debug/+page.svelte     |  10 +-
 .../preferences/debug/storage/+page.svelte    |  16 +-
 .../debug/storage/[...path]/+page.svelte      |  43 ++--
 src/routes/preferences/misc/+page.svelte      |  26 +--
 src/routes/preferences/search/+page.svelte    |  49 ++---
 src/routes/preferences/tags/+page.svelte      |  26 +--
 40 files changed, 1351 insertions(+), 1383 deletions(-)

diff --git a/src/components/debugging/StorageViewer.svelte b/src/components/debugging/StorageViewer.svelte
index b217caf..1f45705 100644
--- a/src/components/debugging/StorageViewer.svelte
+++ b/src/components/debugging/StorageViewer.svelte
@@ -1,134 +1,131 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { storagesCollection } from "$stores/debug";
+  import { goto } from "$app/navigation";
+  import { findDeepObject } from "$lib/utils";
 
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { storagesCollection } from "$stores/debug";
-    import { goto } from "$app/navigation";
-    import { findDeepObject } from "$lib/utils";
 
-    
+  /**
+   * @typedef {Object} Props
+   * @property {string} storage
+   * @property {string[]} path
+   */
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string} storage
-     * @property {string[]} path
-     */
+  /** @type {Props} */
+  let { storage, path } = $props();
 
-    /** @type {Props} */
-    let { storage, path } = $props();
+  /** @type {Object|null} */
+  let targetStorage = $state(null);
+  /** @type {[string, string][]} */
+  let breadcrumbs = $state([]);
+  /** @type {Object<string, any>|null} */
+  let targetObject = $state(null);
+  let targetPathString = $state('');
 
-    /** @type {Object|null} */
-    let targetStorage = $state(null);
+  run(() => {
     /** @type {[string, string][]} */
-    let breadcrumbs = $state([]);
-    /** @type {Object<string, any>|null} */
-    let targetObject = $state(null);
-    let targetPathString = $state('');
+    const builtBreadcrumbs = [];
 
-    run(() => {
-        /** @type {[string, string][]} */
-        const builtBreadcrumbs = [];
+    breadcrumbs = path.reduce((resultCrumbs, entry) => {
+      let entryPath = entry;
 
-        breadcrumbs = path.reduce((resultCrumbs, entry) => {
-            let entryPath = entry;
+      if (resultCrumbs.length) {
+        entryPath = resultCrumbs[resultCrumbs.length - 1][1] + "/" + entryPath;
+      }
 
-            if (resultCrumbs.length) {
-                entryPath = resultCrumbs[resultCrumbs.length - 1][1] + "/" + entryPath;
-            }
+      resultCrumbs.push([entry, entryPath]);
 
-            resultCrumbs.push([entry, entryPath]);
+      return resultCrumbs;
+    }, builtBreadcrumbs);
 
-            return resultCrumbs;
-        }, builtBreadcrumbs);
+    targetPathString = path.join("/");
 
-        targetPathString = path.join("/");
+    if (targetPathString.length) {
+      targetPathString += "/";
+    }
+  });
 
-        if (targetPathString.length) {
-            targetPathString += "/";
-        }
-    });
+  run(() => {
+    targetStorage = $storagesCollection[storage];
 
-    run(() => {
-        targetStorage = $storagesCollection[storage];
+    if (!targetStorage) {
+      goto("/preferences/debug/storage");
+    }
+  });
 
-        if (!targetStorage) {
-            goto("/preferences/debug/storage");
-        }
-    });
+  run(() => {
+    targetObject = targetStorage
+      ? findDeepObject(targetStorage, path)
+      : null;
+  });
 
-    run(() => {
-        targetObject = targetStorage
-                ? findDeepObject(targetStorage, path)
-                : null;
-    });
+  /**
+   * Helper function to resolve type, including the null.
+   * @param {*} value Value to resolve type from.
+   * @return {string} Type of the value, including "null" for null.
+   */
+  function resolveType(value) {
+    /** @type {string} */
+    let typeName = typeof value;
 
-    /**
-     * Helper function to resolve type, including the null.
-     * @param {*} value Value to resolve type from.
-     * @return {string} Type of the value, including "null" for null.
-     */
-    function resolveType(value) {
-        /** @type {string} */
-        let typeName = typeof value;
-
-        if (typeName === 'object' && value === null) {
-            typeName = 'null';
-        }
-
-        return typeName;
+    if (typeName === 'object' && value === null) {
+      typeName = 'null';
     }
 
-    /**
-     * Helper function to resolve value, including values like null or undefined.
-     * @param {*} value Value to resolve.
-     * @return {string} String representation of the value.
-     */
-    function resolveValue(value) {
-        if (value === null) {
-            return "null";
-        }
+    return typeName;
+  }
 
-        if (value === undefined) {
-            return "undefined";
-        }
-
-        return value?.toString() ?? '';
+  /**
+   * Helper function to resolve value, including values like null or undefined.
+   * @param {*} value Value to resolve.
+   * @return {string} String representation of the value.
+   */
+  function resolveValue(value) {
+    if (value === null) {
+      return "null";
     }
+
+    if (value === undefined) {
+      return "undefined";
+    }
+
+    return value?.toString() ?? '';
+  }
 </script>
 
 <Menu>
-    <MenuItem href="/preferences/debug/storage" icon="arrow-left">Back</MenuItem>
-    <hr>
+  <MenuItem href="/preferences/debug/storage" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 <p class="path">
-    <span>/ <a href="/preferences/debug/storage/{storage}">{storage}</a></span>
-    {#each breadcrumbs as [name, entryPath]}
-        <span>/ <a href="/preferences/debug/storage/{storage}/{entryPath}/">{name}</a></span>
-    {/each}
+  <span>/ <a href="/preferences/debug/storage/{storage}">{storage}</a></span>
+  {#each breadcrumbs as [name, entryPath]}
+    <span>/ <a href="/preferences/debug/storage/{storage}/{entryPath}/">{name}</a></span>
+  {/each}
 </p>
 {#if targetObject}
-    <Menu>
-        <hr>
-        {#each Object.entries(targetObject) as [key, value]}
-            {#if targetObject[key] && typeof targetObject[key] === 'object'}
-                <MenuItem href="/preferences/debug/storage/{storage}/{targetPathString}{key}">
-                    {key}: Object
-                </MenuItem>
-            {:else}
-                <MenuItem>
-                    {key}: {resolveType(targetObject[key])} = {resolveValue(targetObject[key])}
-                </MenuItem>
-            {/if}
-        {/each}
-    </Menu>
+  <Menu>
+    <hr>
+    {#each Object.entries(targetObject) as [key, value]}
+      {#if targetObject[key] && typeof targetObject[key] === 'object'}
+        <MenuItem href="/preferences/debug/storage/{storage}/{targetPathString}{key}">
+          {key}: Object
+        </MenuItem>
+      {:else}
+        <MenuItem>
+          {key}: {resolveType(targetObject[key])} = {resolveValue(targetObject[key])}
+        </MenuItem>
+      {/if}
+    {/each}
+  </Menu>
 {/if}
 
 <style lang="scss">
-    .path {
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: .5em;
-    }
+  .path {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: .5em;
+  }
 </style>
diff --git a/src/components/features/GroupView.svelte b/src/components/features/GroupView.svelte
index 5f17999..ff1a245 100644
--- a/src/components/features/GroupView.svelte
+++ b/src/components/features/GroupView.svelte
@@ -1,63 +1,63 @@
 <script>
-    import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
+  import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {import('$entities/TagGroup').default} group
-     */
 
-    /** @type {Props} */
-    let { group } = $props();
+  /**
+   * @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 sortedTagsList = $derived(group.settings.tags.sort((a, b) => a.localeCompare(b))), sortedPrefixes = $derived(group.settings.prefixes.sort((a, b) => a.localeCompare(b)));
 
-    
-    
 </script>
 
 <div class="block">
-    <strong>Group Name:</strong>
-    <div>{group.settings.name}</div>
+  <strong>Group Name:</strong>
+  <div>{group.settings.name}</div>
 </div>
 {#if sortedTagsList.length}
-    <div class="block">
-        <strong>Tags:</strong>
-        <TagsColorContainer targetCategory="{group.settings.category}">
-            <div class="tags-list">
-                {#each sortedTagsList as tagName}
-                    <span class="tag">{tagName}</span>
-                {/each}
-            </div>
-        </TagsColorContainer>
-    </div>
+  <div class="block">
+    <strong>Tags:</strong>
+    <TagsColorContainer targetCategory="{group.settings.category}">
+      <div class="tags-list">
+        {#each sortedTagsList as tagName}
+          <span class="tag">{tagName}</span>
+        {/each}
+      </div>
+    </TagsColorContainer>
+  </div>
 {/if}
 {#if sortedPrefixes.length}
-    <div class="block">
-        <strong>Prefixes:</strong>
-        <TagsColorContainer targetCategory="{group.settings.category}">
-            <div class="tags-list">
-                {#each sortedPrefixes as prefixName}
-                    <span class="tag">{prefixName}*</span>
-                {/each}
-            </div>
-        </TagsColorContainer>
-    </div>
+  <div class="block">
+    <strong>Prefixes:</strong>
+    <TagsColorContainer targetCategory="{group.settings.category}">
+      <div class="tags-list">
+        {#each sortedPrefixes as prefixName}
+          <span class="tag">{prefixName}*</span>
+        {/each}
+      </div>
+    </TagsColorContainer>
+  </div>
 {/if}
 
 <style lang="scss">
-    .tags-list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px;
-    }
+  .tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
 
-    .block + .block {
-        margin-top: .5em;
+  .block + .block {
+    margin-top: .5em;
 
-        strong {
-            display: block;
-            margin-bottom: .25em;
-        }
+    strong {
+      display: block;
+      margin-bottom: .25em;
     }
+  }
 </style>
diff --git a/src/components/features/ProfileView.svelte b/src/components/features/ProfileView.svelte
index 2fb3b64..20f95a7 100644
--- a/src/components/features/ProfileView.svelte
+++ b/src/components/features/ProfileView.svelte
@@ -1,42 +1,42 @@
 <script>
-    
-    /**
-     * @typedef {Object} Props
-     * @property {import('$entities/MaintenanceProfile').default} profile
-     */
 
-    /** @type {Props} */
-    let { profile } = $props();
+  /**
+   * @typedef {Object} Props
+   * @property {import('$entities/MaintenanceProfile').default} profile
+   */
 
-    const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
+  /** @type {Props} */
+  let { profile } = $props();
+
+  const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
 </script>
 
 <div class="block">
-    <strong>Profile:</strong>
-    <div>{profile.settings.name}</div>
+  <strong>Profile:</strong>
+  <div>{profile.settings.name}</div>
 </div>
 <div class="block">
-    <strong>Tags:</strong>
-    <div class="tags-list">
-        {#each sortedTagsList as tagName}
-            <span class="tag">{tagName}</span>
-        {/each}
-    </div>
+  <strong>Tags:</strong>
+  <div class="tags-list">
+    {#each sortedTagsList as tagName}
+      <span class="tag">{tagName}</span>
+    {/each}
+  </div>
 </div>
 
 <style lang="scss">
-    .tags-list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px;
-    }
+  .tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
 
-    .block + .block {
-        margin-top: .5em;
+  .block + .block {
+    margin-top: .5em;
 
-        strong {
-            display: block;
-            margin-bottom: .25em;
-        }
+    strong {
+      display: block;
+      margin-bottom: .25em;
     }
+  }
 </style>
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index d20e91d..b321b9e 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -1,32 +1,32 @@
 <script>
-    import { version } from "$app/environment";
+  import { version } from "$app/environment";
 </script>
 
 <footer>
-    <a href="https://github.com/koloml/furbooru-tagging-assistant/releases/tag/{version}" target="_blank">
-        v{version}
-    </a>
-    <span>, made with ♥ by KoloMl.</span>
+  <a href="https://github.com/koloml/furbooru-tagging-assistant/releases/tag/{version}" target="_blank">
+    v{version}
+  </a>
+  <span>, made with ♥ by KoloMl.</span>
 </footer>
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    footer {
-        display: flex;
-        width: 100%;
-        background: colors.$footer;
-        color: colors.$footer-text;
-        padding: 0 24px;
-        font-size: 12px;
-        line-height: 36px;
+  footer {
+    display: flex;
+    width: 100%;
+    background: colors.$footer;
+    color: colors.$footer-text;
+    padding: 0 24px;
+    font-size: 12px;
+    line-height: 36px;
 
-        a {
-            color: inherit;
+    a {
+      color: inherit;
 
-            &:hover {
-                text-decoration: underline;
-            }
-        }
+      &:hover {
+        text-decoration: underline;
+      }
     }
+  }
 </style>
diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 032366e..ab23562 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -1,28 +1,28 @@
 <header>
-    <a href="/">Furbooru Tagging Assistant</a>
+  <a href="/">Furbooru Tagging Assistant</a>
 </header>
 
 <style lang="scss">
-    @use "$styles/colors";
+  @use "$styles/colors";
 
-    header {
-        background: colors.$header;
-        padding: 0 24px;
-        display: flex;
-        position: sticky;
-        top: 0;
-        left: 0;
-        right: 0;
+  header {
+    background: colors.$header;
+    padding: 0 24px;
+    display: flex;
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
 
-        a {
-            color: colors.$text;
-            line-height: 36px;
-            padding: 0 12px;
-            margin-left: -12px;
+    a {
+      color: colors.$text;
+      line-height: 36px;
+      padding: 0 12px;
+      margin-left: -12px;
 
-            &:hover {
-                background: colors.$header-hover-background;
-            }
-        }
+      &:hover {
+        background: colors.$header-hover-background;
+      }
     }
+  }
 </style>
diff --git a/src/components/tags/TagsColorContainer.svelte b/src/components/tags/TagsColorContainer.svelte
index 3c6a237..3b743cb 100644
--- a/src/components/tags/TagsColorContainer.svelte
+++ b/src/components/tags/TagsColorContainer.svelte
@@ -1,69 +1,69 @@
 <script>
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string} [targetCategory]
-     * @property {import('svelte').Snippet} [children]
-     */
 
-    /** @type {Props} */
-    let { targetCategory = '', children } = $props();
+  /**
+   * @typedef {Object} Props
+   * @property {string} [targetCategory]
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { targetCategory = '', children } = $props();
 </script>
 
 <div class="tag-color-container tag-color-container--{targetCategory || 'default'}">
-    {@render children?.()}
+  {@render children?.()}
 </div>
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    .tag-color-container:is(:global(.tag-color-container--rating)) :global(.tag) {
-        background-color: colors.$tag-rating-background;
-        color: colors.$tag-rating-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--rating)) :global(.tag) {
+    background-color: colors.$tag-rating-background;
+    color: colors.$tag-rating-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--spoiler)) :global(.tag) {
-        background-color: colors.$tag-spoiler-background;
-        color: colors.$tag-spoiler-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--spoiler)) :global(.tag) {
+    background-color: colors.$tag-spoiler-background;
+    color: colors.$tag-spoiler-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--origin)) :global(.tag) {
-        background-color: colors.$tag-origin-background;
-        color: colors.$tag-origin-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--origin)) :global(.tag) {
+    background-color: colors.$tag-origin-background;
+    color: colors.$tag-origin-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--oc)) :global(.tag) {
-        background-color: colors.$tag-oc-background;
-        color: colors.$tag-oc-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--oc)) :global(.tag) {
+    background-color: colors.$tag-oc-background;
+    color: colors.$tag-oc-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--error)) :global(.tag) {
-        background-color: colors.$tag-error-background;
-        color: colors.$tag-error-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--error)) :global(.tag) {
+    background-color: colors.$tag-error-background;
+    color: colors.$tag-error-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--character)) :global(.tag) {
-        background-color: colors.$tag-character-background;
-        color: colors.$tag-character-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--character)) :global(.tag) {
+    background-color: colors.$tag-character-background;
+    color: colors.$tag-character-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--content-official)) :global(.tag) {
-        background-color: colors.$tag-content-official-background;
-        color: colors.$tag-content-official-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--content-official)) :global(.tag) {
+    background-color: colors.$tag-content-official-background;
+    color: colors.$tag-content-official-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--content-fanmade)) :global(.tag) {
-        background-color: colors.$tag-content-fanmade-background;
-        color: colors.$tag-content-fanmade-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--content-fanmade)) :global(.tag) {
+    background-color: colors.$tag-content-fanmade-background;
+    color: colors.$tag-content-fanmade-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--species)) :global(.tag) {
-        background-color: colors.$tag-species-background;
-        color: colors.$tag-species-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--species)) :global(.tag) {
+    background-color: colors.$tag-species-background;
+    color: colors.$tag-species-text;
+  }
 
-    .tag-color-container:is(:global(.tag-color-container--body-type)) :global(.tag) {
-        background-color: colors.$tag-body-type-background;
-        color: colors.$tag-body-type-text;
-    }
+  .tag-color-container:is(:global(.tag-color-container--body-type)) :global(.tag) {
+    background-color: colors.$tag-body-type-background;
+    color: colors.$tag-body-type-text;
+  }
 </style>
diff --git a/src/components/tags/TagsEditor.svelte b/src/components/tags/TagsEditor.svelte
index 16c8ab3..711ff77 100644
--- a/src/components/tags/TagsEditor.svelte
+++ b/src/components/tags/TagsEditor.svelte
@@ -1,113 +1,113 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string[]} [tags] - List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
-     */
 
-    /** @type {Props} */
-    let { tags = $bindable([]) } = $props();
+  /**
+   * @typedef {Object} Props
+   * @property {string[]} [tags] - List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
+   */
 
-    /** @type {Set<string>} */
-    let uniqueTags = $state(new Set());
+  /** @type {Props} */
+  let { tags = $bindable([]) } = $props();
 
-    run(() => {
-        uniqueTags = new Set(tags);
-    });
+  /** @type {Set<string>} */
+  let uniqueTags = $state(new Set());
 
-    /** @type {string} */
-    let addedTagName = $state('');
+  run(() => {
+    uniqueTags = new Set(tags);
+  });
 
-    /**
-     * Create a callback function to pass into both mouse & keyboard events for tag removal.
-     * @param {string} tagName
-     * @return {function(Event)} Callback to pass as event listener.
-     */
-    function createTagRemoveHandler(tagName) {
-        return event => {
-            if (event.type === 'click') {
-                removeTag(tagName);
-            }
+  /** @type {string} */
+  let addedTagName = $state('');
 
-            if (event instanceof KeyboardEvent && (event.code === 'Enter' || event.code === 'Space')) {
-                // To be more comfortable, automatically focus next available tag's remove button in the list.
-                if (event.currentTarget instanceof HTMLElement) {
-                    const currenTagElement = event.currentTarget.closest('.tag');
-                    const nextTagElement = currenTagElement?.previousElementSibling ?? currenTagElement?.parentElement?.firstElementChild;
-                    const nextRemoveButton = nextTagElement?.querySelector('.remove');
+  /**
+   * Create a callback function to pass into both mouse & keyboard events for tag removal.
+   * @param {string} tagName
+   * @return {function(Event)} Callback to pass as event listener.
+   */
+  function createTagRemoveHandler(tagName) {
+    return event => {
+      if (event.type === 'click') {
+        removeTag(tagName);
+      }
 
-                    if (nextRemoveButton instanceof HTMLElement) {
-                        nextRemoveButton.focus();
-                    }
-                }
+      if (event instanceof KeyboardEvent && (event.code === 'Enter' || event.code === 'Space')) {
+        // To be more comfortable, automatically focus next available tag's remove button in the list.
+        if (event.currentTarget instanceof HTMLElement) {
+          const currenTagElement = event.currentTarget.closest('.tag');
+          const nextTagElement = currenTagElement?.previousElementSibling ?? currenTagElement?.parentElement?.firstElementChild;
+          const nextRemoveButton = nextTagElement?.querySelector('.remove');
 
-                removeTag(tagName);
-            }
-        }
-    }
-
-    /**
-     * @param {string} tagName
-     */
-    function removeTag(tagName) {
-        uniqueTags.delete(tagName);
-        tags = Array.from(uniqueTags);
-    }
-
-    /**
-     * @param {string} tagName
-     */
-    function addTag(tagName) {
-        uniqueTags.add(tagName);
-        tags = Array.from(uniqueTags);
-    }
-
-    /**
-     * Handle adding new tags to the list or removing them when backspace is pressed.
-     *
-     * Additional note: For some reason, mobile Chrome breaks the usual behaviour inside extension. `code` is becoming
-     * empty, while usually it should contain proper button code.
-     *
-     * @param {KeyboardEvent} event
-     */
-    function handleKeyPresses(event) {
-        if ((event.code === 'Enter' || event.key === 'Enter') && addedTagName.length) {
-            addTag(addedTagName)
-            addedTagName = '';
+          if (nextRemoveButton instanceof HTMLElement) {
+            nextRemoveButton.focus();
+          }
         }
 
-        if ((event.code === 'Backspace' || event.key === 'Backspace') && !addedTagName.length && tags?.length) {
-            removeTag(tags[tags.length - 1]);
-        }
+        removeTag(tagName);
+      }
     }
+  }
+
+  /**
+   * @param {string} tagName
+   */
+  function removeTag(tagName) {
+    uniqueTags.delete(tagName);
+    tags = Array.from(uniqueTags);
+  }
+
+  /**
+   * @param {string} tagName
+   */
+  function addTag(tagName) {
+    uniqueTags.add(tagName);
+    tags = Array.from(uniqueTags);
+  }
+
+  /**
+   * Handle adding new tags to the list or removing them when backspace is pressed.
+   *
+   * Additional note: For some reason, mobile Chrome breaks the usual behaviour inside extension. `code` is becoming
+   * empty, while usually it should contain proper button code.
+   *
+   * @param {KeyboardEvent} event
+   */
+  function handleKeyPresses(event) {
+    if ((event.code === 'Enter' || event.key === 'Enter') && addedTagName.length) {
+      addTag(addedTagName)
+      addedTagName = '';
+    }
+
+    if ((event.code === 'Backspace' || event.key === 'Backspace') && !addedTagName.length && tags?.length) {
+      removeTag(tags[tags.length - 1]);
+    }
+  }
 </script>
 
 <div class="tags-editor">
-    {#each uniqueTags.values() as tagName}
-        <div class="tag">
-            {tagName}
-            <span class="remove" onclick={createTagRemoveHandler(tagName)}
-                  onkeydown={createTagRemoveHandler(tagName)}
-                  role="button" tabindex="0">x</span>
-        </div>
-    {/each}
-    <input type="text"
-           bind:value={addedTagName}
-           onkeydown={handleKeyPresses}
-           autocomplete="off"
-           autocapitalize="none"/>
+  {#each uniqueTags.values() as tagName}
+    <div class="tag">
+      {tagName}
+      <span class="remove" onclick={createTagRemoveHandler(tagName)}
+            onkeydown={createTagRemoveHandler(tagName)}
+            role="button" tabindex="0">x</span>
+    </div>
+  {/each}
+  <input autocapitalize="none"
+         autocomplete="off"
+         bind:value={addedTagName}
+         onkeydown={handleKeyPresses}
+         type="text"/>
 </div>
 
 <style lang="scss">
-    .tags-editor {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px;
+  .tags-editor {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
 
-        input {
-            width: 100%;
-        }
+    input {
+      width: 100%;
     }
+  }
 </style>
diff --git a/src/components/ui/forms/CheckboxField.svelte b/src/components/ui/forms/CheckboxField.svelte
index a4f7101..6324a00 100644
--- a/src/components/ui/forms/CheckboxField.svelte
+++ b/src/components/ui/forms/CheckboxField.svelte
@@ -1,19 +1,18 @@
 <script>
-    
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string|undefined} [name]
-     * @property {boolean} checked
-     * @property {import('svelte').Snippet} [children]
-     */
 
-    /** @type {Props} */
-    let { name = undefined, checked = $bindable(), children } = $props();
+  /**
+   * @typedef {Object} Props
+   * @property {string|undefined} [name]
+   * @property {boolean} checked
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { name = undefined, checked = $bindable(), children } = $props();
 </script>
 
-<input type="checkbox" {name} bind:checked={checked}>
+<input bind:checked={checked} {name} type="checkbox">
 <span>
     {@render children?.()}
 </span>
diff --git a/src/components/ui/forms/FormContainer.svelte b/src/components/ui/forms/FormContainer.svelte
index 394839d..6b35146 100644
--- a/src/components/ui/forms/FormContainer.svelte
+++ b/src/components/ui/forms/FormContainer.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-    interface Props {
-        children?: import('svelte').Snippet;
-    }
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
 
-    let { children }: Props = $props();
+  let { children }: Props = $props();
 </script>
 
 <form>
-    {@render children?.()}
+  {@render children?.()}
 </form>
 
 <style lang="scss">
-    form {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 6px;
-    }
+  form {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
 </style>
diff --git a/src/components/ui/forms/FormControl.svelte b/src/components/ui/forms/FormControl.svelte
index ed8c5d6..eb432f8 100644
--- a/src/components/ui/forms/FormControl.svelte
+++ b/src/components/ui/forms/FormControl.svelte
@@ -1,34 +1,34 @@
 <script>
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string|undefined} [label]
-     * @property {import('svelte').Snippet} [children]
-     */
 
-    /** @type {Props} */
-    let { label = undefined, children } = $props();
+  /**
+   * @typedef {Object} Props
+   * @property {string|undefined} [label]
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { label = undefined, children } = $props();
 </script>
 
 <label class="control">
-    {#if label}
-        <div class="label">{label}</div>
-    {/if}
-    {@render children?.()}
+  {#if label}
+    <div class="label">{label}</div>
+  {/if}
+  {@render children?.()}
 </label>
 
 <style lang="scss">
-    .label {
-        margin-bottom: .5em;
-    }
+  .label {
+    margin-bottom: .5em;
+  }
 
-    .control {
-        padding: 5px 0;
+  .control {
+    padding: 5px 0;
 
-        :global(textarea) {
-            width: 100%;
-            resize: vertical;
-        }
+    :global(textarea) {
+      width: 100%;
+      resize: vertical;
     }
+  }
 </style>
diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
index 45581db..dcfb7c0 100644
--- a/src/components/ui/forms/SelectField.svelte
+++ b/src/components/ui/forms/SelectField.svelte
@@ -1,49 +1,44 @@
 <script>
-    
 
-    
 
-    
+  /**
+   * @typedef {Object} Props
+   * @property {string[]|Record<string, string>} [options]
+   * @property {string|undefined} [name]
+   * @property {string|undefined} [id]
+   * @property {string|undefined} [value]
+   */
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string[]|Record<string, string>} [options]
-     * @property {string|undefined} [name]
-     * @property {string|undefined} [id]
-     * @property {string|undefined} [value]
-     */
+  /** @type {Props} */
+  let {
+    options = [],
+    name = undefined,
+    id = undefined,
+    value = $bindable(undefined)
+  } = $props();
 
-    /** @type {Props} */
-    let {
-        options = [],
-        name = undefined,
-        id = undefined,
-        value = $bindable(undefined)
-    } = $props();
+  /** @type {Record<string, string>} */
+  const optionPairs = $state({});
 
-    /** @type {Record<string, string>} */
-    const optionPairs = $state({});
-
-    if (Array.isArray(options)) {
-        for (let option of options) {
-            optionPairs[option] = option;
-        }
-    } else if (options && typeof options === 'object') {
-        Object.keys(options).forEach((key) => {
-            optionPairs[key] = options[key];
-        })
+  if (Array.isArray(options)) {
+    for (let option of options) {
+      optionPairs[option] = option;
     }
+  } else if (options && typeof options === 'object') {
+    Object.keys(options).forEach((key) => {
+      optionPairs[key] = options[key];
+    })
+  }
 </script>
 
-<select {name} {id} bind:value={value}>
-    {#each Object.entries(optionPairs) as [value, label]}
-        <option {value}>{label}</option>
-    {/each}
+<select bind:value={value} {id} {name}>
+  {#each Object.entries(optionPairs) as [value, label]}
+    <option {value}>{label}</option>
+  {/each}
 </select>
 
 <style lang="scss">
-    select {
-        width: 100%;
-    }
+  select {
+    width: 100%;
+  }
 </style>
diff --git a/src/components/ui/forms/TagCategorySelectField.svelte b/src/components/ui/forms/TagCategorySelectField.svelte
index 1c0413d..86088be 100644
--- a/src/components/ui/forms/TagCategorySelectField.svelte
+++ b/src/components/ui/forms/TagCategorySelectField.svelte
@@ -1,86 +1,86 @@
 <script>
-    import SelectField from "$components/ui/forms/SelectField.svelte";
-    import { categories } from "$lib/booru/tag-categories";
+  import SelectField from "$components/ui/forms/SelectField.svelte";
+  import { categories } from "$lib/booru/tag-categories";
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string} [value]
-     */
 
-    /** @type {Props} */
-    let { value = $bindable('') } = $props();
+  /**
+   * @typedef {Object} Props
+   * @property {string} [value]
+   */
 
-    /** @type {Record<string, string>} */
-    let tagCategoriesOptions = $state({
-        '': 'Default'
-    });
+  /** @type {Props} */
+  let { value = $bindable('') } = $props();
 
-    tagCategoriesOptions = categories.reduce((options, category) => {
-        options[category] = category
-                .replace('-', ' ')
-                .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
+  /** @type {Record<string, string>} */
+  let tagCategoriesOptions = $state({
+    '': 'Default'
+  });
 
-        return options;
-    }, tagCategoriesOptions);
+  tagCategoriesOptions = categories.reduce((options, category) => {
+    options[category] = category
+      .replace('-', ' ')
+      .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
+
+    return options;
+  }, tagCategoriesOptions);
 </script>
 
-<SelectField bind:value={value} options={tagCategoriesOptions} name="tag_color"/>
+<SelectField bind:value={value} name="tag_color" options={tagCategoriesOptions}/>
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    :global(select[name=tag_color]) {
-        :global(option) {
-            &:is(:global([value=rating])) {
-                background-color: colors.$tag-rating-background;
-                color: colors.$tag-rating-text;
-            }
+  :global(select[name=tag_color]) {
+    :global(option) {
+      &:is(:global([value=rating])) {
+        background-color: colors.$tag-rating-background;
+        color: colors.$tag-rating-text;
+      }
 
-            &:is(:global([value=spoiler])) {
-                background-color: colors.$tag-spoiler-background;
-                color: colors.$tag-spoiler-text;
-            }
+      &:is(:global([value=spoiler])) {
+        background-color: colors.$tag-spoiler-background;
+        color: colors.$tag-spoiler-text;
+      }
 
-            &:is(:global([value=origin])) {
-                background-color: colors.$tag-origin-background;
-                color: colors.$tag-origin-text;
-            }
+      &:is(:global([value=origin])) {
+        background-color: colors.$tag-origin-background;
+        color: colors.$tag-origin-text;
+      }
 
-            &:is(:global([value=oc])) {
-                background-color: colors.$tag-oc-background;
-                color: colors.$tag-oc-text;
-            }
+      &:is(:global([value=oc])) {
+        background-color: colors.$tag-oc-background;
+        color: colors.$tag-oc-text;
+      }
 
-            &:is(:global([value=error])) {
-                background-color: colors.$tag-error-background;
-                color: colors.$tag-error-text;
-            }
+      &:is(:global([value=error])) {
+        background-color: colors.$tag-error-background;
+        color: colors.$tag-error-text;
+      }
 
-            &:is(:global([value=character])) {
-                background-color: colors.$tag-character-background;
-                color: colors.$tag-character-text;
-            }
+      &:is(:global([value=character])) {
+        background-color: colors.$tag-character-background;
+        color: colors.$tag-character-text;
+      }
 
-            &:is(:global([value=content-official])) {
-                background-color: colors.$tag-content-official-background;
-                color: colors.$tag-content-official-text;
-            }
+      &:is(:global([value=content-official])) {
+        background-color: colors.$tag-content-official-background;
+        color: colors.$tag-content-official-text;
+      }
 
-            &:is(:global([value=content-fanmade])) {
-                background-color: colors.$tag-content-fanmade-background;
-                color: colors.$tag-content-fanmade-text;
-            }
+      &:is(:global([value=content-fanmade])) {
+        background-color: colors.$tag-content-fanmade-background;
+        color: colors.$tag-content-fanmade-text;
+      }
 
-            &:is(:global([value=species])) {
-                background-color: colors.$tag-species-background;
-                color: colors.$tag-species-text;
-            }
+      &:is(:global([value=species])) {
+        background-color: colors.$tag-species-background;
+        color: colors.$tag-species-text;
+      }
 
-            &:is(:global([value=body-type])) {
-                background-color: colors.$tag-body-type-background;
-                color: colors.$tag-body-type-text;
-            }
-        }
+      &:is(:global([value=body-type])) {
+        background-color: colors.$tag-body-type-background;
+        color: colors.$tag-body-type-text;
+      }
     }
+  }
 </style>
diff --git a/src/components/ui/forms/TextField.svelte b/src/components/ui/forms/TextField.svelte
index 4af2e0c..4e10256 100644
--- a/src/components/ui/forms/TextField.svelte
+++ b/src/components/ui/forms/TextField.svelte
@@ -1,24 +1,21 @@
 <script>
-    
 
-    
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string|undefined} [name]
-     * @property {string|undefined} [placeholder]
-     * @property {string} [value]
-     */
+  /**
+   * @typedef {Object} Props
+   * @property {string|undefined} [name]
+   * @property {string|undefined} [placeholder]
+   * @property {string} [value]
+   */
 
-    /** @type {Props} */
-    let { name = undefined, placeholder = undefined, value = $bindable('') } = $props();
+  /** @type {Props} */
+  let { name = undefined, placeholder = undefined, value = $bindable('') } = $props();
 </script>
 
-<input type="text" {name} {placeholder} bind:value={value}>
+<input bind:value={value} {name} {placeholder} type="text">
 
 <style lang="scss">
-    :global(.control) input {
-        width: 100%;
-    }
+  :global(.control) input {
+    width: 100%;
+  }
 </style>
diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index 2e386c3..0889cc2 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
-    interface Props {
-        children?: import('svelte').Snippet;
-    }
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
 
-    let { children }: Props = $props();
+  let { children }: Props = $props();
 </script>
 
 <nav>
-    {@render children?.()}
+  {@render children?.()}
 </nav>
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    nav {
-        display: flex;
-        flex-direction: column;
+  nav {
+    display: flex;
+    flex-direction: column;
 
-        & > :global(.menu-item) {
-            padding: 5px 24px;
-        }
-
-        :global(.menu-item) {
-            color: colors.$text;
-
-            &:hover {
-                background: colors.$header-mobile-link-hover;
-            }
-        }
-
-        :global(hr) {
-            background: colors.$block-border;
-            margin: .5em 24px;
-            border: 0;
-            height: 1px;
-        }
-
-        :global(main) > & {
-            margin: {
-                left: -24px;
-                right: -24px;
-            }
-        }
+    & > :global(.menu-item) {
+      padding: 5px 24px;
     }
+
+    :global(.menu-item) {
+      color: colors.$text;
+
+      &:hover {
+        background: colors.$header-mobile-link-hover;
+      }
+    }
+
+    :global(hr) {
+      background: colors.$block-border;
+      margin: .5em 24px;
+      border: 0;
+      height: 1px;
+    }
+
+    :global(main) > & {
+      margin: {
+        left: -24px;
+        right: -24px;
+      }
+    }
+  }
 </style>
diff --git a/src/components/ui/menu/MenuCheckboxItem.svelte b/src/components/ui/menu/MenuCheckboxItem.svelte
index 068dcc7..278779d 100644
--- a/src/components/ui/menu/MenuCheckboxItem.svelte
+++ b/src/components/ui/menu/MenuCheckboxItem.svelte
@@ -1,45 +1,41 @@
 <script>
-    import { createBubbler, stopPropagation } from 'svelte/legacy';
+  import { createBubbler, stopPropagation } from 'svelte/legacy';
+  import MenuLink from "$components/ui/menu/MenuItem.svelte";
 
-    const bubble = createBubbler();
-    import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  const bubble = createBubbler();
 
-    
 
-    
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} checked
+   * @property {string|undefined} [name]
+   * @property {string|undefined} [value]
+   * @property {string|null} [href]
+   * @property {import('svelte').Snippet} [children]
+   */
 
-    
-
-    
-    /**
-     * @typedef {Object} Props
-     * @property {boolean} checked
-     * @property {string|undefined} [name]
-     * @property {string|undefined} [value]
-     * @property {string|null} [href]
-     * @property {import('svelte').Snippet} [children]
-     */
-
-    /** @type {Props} */
-    let {
-        checked = $bindable(),
-        name = undefined,
-        value = undefined,
-        href = null,
-        children
-    } = $props();
+  /** @type {Props} */
+  let {
+    checked = $bindable(),
+    name = undefined,
+    value = undefined,
+    href = null,
+    children
+  } = $props();
 </script>
 
 <MenuLink {href}>
-    <input type="checkbox" {name} {value} bind:checked={checked} oninput={bubble('input')} onclick={stopPropagation(bubble('click'))}>
-    {@render children?.()}
+  <input bind:checked={checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')}
+         type="checkbox"
+         {value}>
+  {@render children?.()}
 </MenuLink>
 
 <style lang="scss">
-    :global(.menu-item) input {
-        width: 16px;
-        height: 16px;
-        margin-right: 6px;
-        flex-shrink: 0;
-    }
+  :global(.menu-item) input {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    flex-shrink: 0;
+  }
 </style>
diff --git a/src/components/ui/menu/MenuItem.svelte b/src/components/ui/menu/MenuItem.svelte
index 0c19775..aa5a29d 100644
--- a/src/components/ui/menu/MenuItem.svelte
+++ b/src/components/ui/menu/MenuItem.svelte
@@ -1,50 +1,48 @@
 <script>
-    import { createBubbler } from 'svelte/legacy';
+  import { createBubbler } from 'svelte/legacy';
 
-    const bubble = createBubbler();
-    
+  const bubble = createBubbler();
 
-    
 
-    
-    /**
-     * @typedef {Object} Props
-     * @property {string|null} [href]
-     * @property {App.IconName|null} [icon]
-     * @property {App.LinkTarget|undefined} [target]
-     * @property {import('svelte').Snippet} [children]
-     */
+  /**
+   * @typedef {Object} Props
+   * @property {string|null} [href]
+   * @property {App.IconName|null} [icon]
+   * @property {App.LinkTarget|undefined} [target]
+   * @property {import('svelte').Snippet} [children]
+   */
 
-    /** @type {Props} */
-    let {
-        href = null,
-        icon = null,
-        target = undefined,
-        children
-    } = $props();
+  /** @type {Props} */
+  let {
+    href = null,
+    icon = null,
+    target = undefined,
+    children
+  } = $props();
 </script>
 
-<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} onclick={bubble('click')} role="link" tabindex="0">
-    {#if icon}
-        <i class="icon icon-{icon}"></i>
-    {/if}
-    {@render children?.()}
+<svelte:element class="menu-item" {href} onclick={bubble('click')} role="link" tabindex="0" {target}
+                this="{href ? 'a': 'span'}">
+  {#if icon}
+    <i class="icon icon-{icon}"></i>
+  {/if}
+  {@render children?.()}
 </svelte:element>
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    .menu-item {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
+  .menu-item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
 
-        i {
-            width: 16px;
-            height: 16px;
-            background: colors.$text;
-            margin-right: 6px;
-        }
+    i {
+      width: 16px;
+      height: 16px;
+      background: colors.$text;
+      margin-right: 6px;
     }
+  }
 </style>
diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
index e45b62d..f76c0e3 100644
--- a/src/components/ui/menu/MenuRadioItem.svelte
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -1,45 +1,39 @@
 <script>
-    import { createBubbler, stopPropagation } from 'svelte/legacy';
+  import { createBubbler, stopPropagation } from 'svelte/legacy';
+  import MenuLink from "$components/ui/menu/MenuItem.svelte";
 
-    const bubble = createBubbler();
-    import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  const bubble = createBubbler();
 
-    
 
-    
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} checked
+   * @property {string} name
+   * @property {string} value
+   * @property {string|null} [href]
+   * @property {import('svelte').Snippet} [children]
+   */
 
-    
-
-    
-    /**
-     * @typedef {Object} Props
-     * @property {boolean} checked
-     * @property {string} name
-     * @property {string} value
-     * @property {string|null} [href]
-     * @property {import('svelte').Snippet} [children]
-     */
-
-    /** @type {Props} */
-    let {
-        checked,
-        name,
-        value,
-        href = null,
-        children
-    } = $props();
+  /** @type {Props} */
+  let {
+    checked,
+    name,
+    value,
+    href = null,
+    children
+  } = $props();
 </script>
 
 <MenuLink {href}>
-    <input type="radio" {name} {value} {checked} oninput={bubble('input')} onclick={stopPropagation(bubble('click'))}>
-    {@render children?.()}
+  <input {checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')} type="radio" {value}>
+  {@render children?.()}
 </MenuLink>
 
 <style lang="scss">
-    :global(.menu-item) input {
-        width: 16px;
-        height: 16px;
-        margin-right: 6px;
-        flex-shrink: 0;
-    }
+  :global(.menu-item) input {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    flex-shrink: 0;
+  }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4e9e931..9d1f851 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
-    import "../styles/popup.scss";
-    import Header from "$components/layout/Header.svelte";
-    import Footer from "$components/layout/Footer.svelte";
-    interface Props {
-        children?: import('svelte').Snippet;
-    }
+  import "../styles/popup.scss";
+  import Header from "$components/layout/Header.svelte";
+  import Footer from "$components/layout/Footer.svelte";
 
-    let { children }: Props = $props();
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
 
-    // Sort of a hack, detect if we rendered in the browser tab or in the popup.
-    // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
-    document.body.classList.toggle('is-in-tab', window.innerWidth > 320);
+  let { children }: Props = $props();
+
+  // Sort of a hack, detect if we rendered in the browser tab or in the popup.
+  // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
+  document.body.classList.toggle('is-in-tab', window.innerWidth > 320);
 </script>
 
 <Header/>
 <main>
-    {@render children?.()}
+  {@render children?.()}
 </main>
 <Footer/>
 
-<style lang="scss" global>
-    main {
-        padding: .5em 24px;
-    }
+<style global lang="scss">
+  main {
+    padding: .5em 24px;
+  }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 59a1d33..de69206 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,29 +1,28 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-    import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
-    /** @type {import('$entities/MaintenanceProfile').default|undefined} */
-    let activeProfile = $derived($maintenanceProfiles.find(profile => profile.id === $activeProfileStore));
+  /** @type {import('$entities/MaintenanceProfile').default|undefined} */
+  let activeProfile = $derived($maintenanceProfiles.find(profile => profile.id === $activeProfileStore));
 
-    
 
-    function turnOffActiveProfile() {
-        $activeProfileStore = null;
-    }
+  function turnOffActiveProfile() {
+    $activeProfileStore = null;
+  }
 </script>
 
 <Menu>
-    {#if activeProfile}
-        <MenuCheckboxItem checked on:input={turnOffActiveProfile} href="/features/maintenance/{activeProfile.id}">
-            Active Profile: {activeProfile.settings.name}
-        </MenuCheckboxItem>
-        <hr>
-    {/if}
-    <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
-    <MenuItem href="/features/groups">Tag Groups</MenuItem>
+  {#if activeProfile}
+    <MenuCheckboxItem checked on:input={turnOffActiveProfile} href="/features/maintenance/{activeProfile.id}">
+      Active Profile: {activeProfile.settings.name}
+    </MenuCheckboxItem>
     <hr>
-    <MenuItem href="/preferences">Preferences</MenuItem>
-    <MenuItem href="/about">About</MenuItem>
+  {/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>
 </Menu>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 3054d62..9f578eb 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,25 +1,25 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/">Back</MenuItem>
-    <hr>
+  <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 <h1>
-    Furbooru Tagging Assistant
+  Furbooru Tagging Assistant
 </h1>
 <p>
-    This is a tool made to help tag images on Furbooru more efficiently. It is currently in development and is not yet
-    ready for use, but it still can provide some useful functionality.
+  This is a tool made to help tag images on Furbooru more efficiently. It is currently in development and is not yet
+  ready for use, but it still can provide some useful functionality.
 </p>
 <Menu>
-    <hr>
-    <MenuItem icon="globe" href="https://furbooru.org" target="_blank">
-        Visit Furbooru
-    </MenuItem>
-    <MenuItem icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
-        GitHub Repo
-    </MenuItem>
+  <hr>
+  <MenuItem href="https://furbooru.org" icon="globe" target="_blank">
+    Visit Furbooru
+  </MenuItem>
+  <MenuItem href="https://github.com/koloml/furbooru-tagging-assistant" icon="info-circle" target="_blank">
+    GitHub Repo
+  </MenuItem>
 </Menu>
diff --git a/src/routes/features/+page.svelte b/src/routes/features/+page.svelte
index 4954d93..5ae405f 100644
--- a/src/routes/features/+page.svelte
+++ b/src/routes/features/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuItem href="/">Back</MenuItem>
-    <hr>
-    <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+  <MenuItem href="/">Back</MenuItem>
+  <hr>
+  <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
 </Menu>
diff --git a/src/routes/features/groups/+page.svelte b/src/routes/features/groups/+page.svelte
index 464d2b3..af2d731 100644
--- a/src/routes/features/groups/+page.svelte
+++ b/src/routes/features/groups/+page.svelte
@@ -1,27 +1,26 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { tagGroups } from "$stores/entities/tag-groups";
 
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { tagGroups } from "$stores/entities/tag-groups";
+  /** @type {import('$entities/TagGroup').default[]} */
+  let groups = $state([]);
 
-    /** @type {import('$entities/TagGroup').default[]} */
-    let groups = $state([]);
-
-    run(() => {
-        groups = $tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
-    });
+  run(() => {
+    groups = $tagGroups.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}
+  <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+  <MenuItem href="/features/groups/new/edit" icon="plus">Create New</MenuItem>
+  {#if groups.length}
     <hr>
-    <MenuItem href="/features/groups/import">Import Group</MenuItem>
+    {#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>
diff --git a/src/routes/features/groups/[id]/+page.svelte b/src/routes/features/groups/[id]/+page.svelte
index 69d6e8e..b3440f5 100644
--- a/src/routes/features/groups/[id]/+page.svelte
+++ b/src/routes/features/groups/[id]/+page.svelte
@@ -1,41 +1,40 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
+  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 { tagGroups } from "$stores/entities/tag-groups";
 
-    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 { tagGroups } from "$stores/entities/tag-groups";
+  const groupId = $page.params.id;
+  /** @type {import('$entities/TagGroup').default|null} */
+  let group = $state(null);
 
-    const groupId = $page.params.id;
-    /** @type {import('$entities/TagGroup').default|null} */
-    let group = $state(null);
+  if (groupId === 'new') {
+    goto('/features/groups/new/edit');
+  }
 
-    if (groupId === 'new') {
-        goto('/features/groups/new/edit');
+  run(() => {
+    group = $tagGroups.find(group => group.id === groupId) || null;
+
+    if (!group) {
+      console.warn(`Group ${groupId} not found.`);
+      goto('/features/groups');
     }
-
-    run(() => {
-        group = $tagGroups.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>
+  <MenuItem href="/features/groups" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 {#if group}
-    <GroupView {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>
-    <MenuItem href="/features/groups/{groupId}/delete" icon="trash">Delete Group</MenuItem>
+  <hr>
+  <MenuItem href="/features/groups/{groupId}/edit" icon="wrench">Edit Group</MenuItem>
+  <MenuItem href="/features/groups/{groupId}/export" icon="file-export">Export Group</MenuItem>
+  <MenuItem href="/features/groups/{groupId}/delete" icon="trash">Delete Group</MenuItem>
 </Menu>
diff --git a/src/routes/features/groups/[id]/delete/+page.svelte b/src/routes/features/groups/[id]/delete/+page.svelte
index 84a0506..b935061 100644
--- a/src/routes/features/groups/[id]/delete/+page.svelte
+++ b/src/routes/features/groups/[id]/delete/+page.svelte
@@ -1,41 +1,41 @@
 <script>
-    import { goto } from "$app/navigation";
-    import { page } from "$app/stores";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { tagGroups } from "$stores/entities/tag-groups";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { tagGroups } from "$stores/entities/tag-groups";
 
-    const groupId = $page.params.id;
-    const targetGroup = $tagGroups.find(group => group.id === groupId);
+  const groupId = $page.params.id;
+  const targetGroup = $tagGroups.find(group => group.id === groupId);
 
+  if (!targetGroup) {
+    void goto('/features/groups');
+  }
+
+  async function deleteGroup() {
     if (!targetGroup) {
-        void goto('/features/groups');
+      console.warn('Attempting to delete the group, but the group is not loaded yet.');
+      return;
     }
 
-    async function deleteGroup() {
-        if (!targetGroup) {
-            console.warn('Attempting to delete the group, but the group is not loaded yet.');
-            return;
-        }
-
-        await targetGroup.delete();
-        await goto('/features/groups');
-    }
+    await targetGroup.delete();
+    await goto('/features/groups');
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/features/groups/{groupId}">Back</MenuItem>
-    <hr>
+  <MenuItem href="/features/groups/{groupId}" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 {#if targetGroup}
-    <p>
-        Do you want to remove group "{targetGroup.settings.name}"? This action is irreversible.
-    </p>
-    <Menu>
-        <hr>
-        <MenuItem on:click={deleteGroup}>Yes</MenuItem>
-        <MenuItem href="/features/groups/{groupId}">No</MenuItem>
-    </Menu>
+  <p>
+    Do you want to remove group "{targetGroup.settings.name}"? This action is irreversible.
+  </p>
+  <Menu>
+    <hr>
+    <MenuItem on:click={deleteGroup}>Yes</MenuItem>
+    <MenuItem href="/features/groups/{groupId}">No</MenuItem>
+  </Menu>
 {:else}
-    <p>Loading...</p>
+  <p>Loading...</p>
 {/if}
diff --git a/src/routes/features/groups/[id]/edit/+page.svelte b/src/routes/features/groups/[id]/edit/+page.svelte
index 3244edf..e18de7a 100644
--- a/src/routes/features/groups/[id]/edit/+page.svelte
+++ b/src/routes/features/groups/[id]/edit/+page.svelte
@@ -1,82 +1,82 @@
 <script>
-    import { goto } from "$app/navigation";
-    import { page } from "$app/stores";
-    import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import TagCategorySelectField from "$components/ui/forms/TagCategorySelectField.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/tags/TagsEditor.svelte";
-    import TagGroup from "$entities/TagGroup";
-    import { tagGroups } from "$stores/entities/tag-groups";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import TagCategorySelectField from "$components/ui/forms/TagCategorySelectField.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/tags/TagsEditor.svelte";
+  import TagGroup from "$entities/TagGroup";
+  import { tagGroups } from "$stores/entities/tag-groups";
 
-    const groupId = $page.params.id;
-    /** @type {TagGroup|null} */
-    let targetGroup = null;
+  const groupId = $page.params.id;
+  /** @type {TagGroup|null} */
+  let targetGroup = null;
 
-    let groupName = $state('');
-    /** @type {string[]} */
-    let tagsList = $state([]);
-    /** @type {string[]} */
-    let prefixesList = $state([]);
-    let tagCategory = $state('');
+  let groupName = $state('');
+  /** @type {string[]} */
+  let tagsList = $state([]);
+  /** @type {string[]} */
+  let prefixesList = $state([]);
+  let tagCategory = $state('');
 
-    if (groupId === 'new') {
-        targetGroup = new TagGroup(crypto.randomUUID(), {});
+  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 {
-        targetGroup = $tagGroups.find(group => group.id === groupId) || null;
+      goto('/features/groups');
+    }
+  }
 
-        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');
-        }
+  async function saveGroup() {
+    if (!targetGroup) {
+      console.warn('Attempting to save group, but group is not loaded yet.');
+      return;
     }
 
-    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];
+    targetGroup.settings.category = tagCategory;
 
-        targetGroup.settings.name = groupName;
-        targetGroup.settings.tags = [...tagsList];
-        targetGroup.settings.prefixes = [...prefixesList];
-        targetGroup.settings.category = tagCategory;
-
-        await targetGroup.save();
-        await goto(`/features/groups/${targetGroup.id}`);
-    }
+    await targetGroup.save();
+    await goto(`/features/groups/${targetGroup.id}`);
+  }
 </script>
 
 <Menu>
-    <MenuItem href="/features/groups/${groupId}" icon="arrow-left">Back</MenuItem>
-    <hr>
+  <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 label="Group Name">
+    <TextField bind:value={groupName} placeholder="Group Name"></TextField>
+  </FormControl>
+  <FormControl label="Group Color">
+    <TagCategorySelectField bind:value={tagCategory}/>
+  </FormControl>
+  <TagsColorContainer targetCategory="{tagCategory}">
+    <FormControl label="Tags">
+      <TagsEditor bind:tags={tagsList}/>
     </FormControl>
-    <FormControl label="Group Color">
-        <TagCategorySelectField bind:value={tagCategory}/>
+  </TagsColorContainer>
+  <TagsColorContainer targetCategory="{tagCategory}">
+    <FormControl label="Tag Prefixes">
+      <TagsEditor bind:tags={prefixesList}/>
     </FormControl>
-    <TagsColorContainer targetCategory="{tagCategory}">
-        <FormControl label="Tags">
-            <TagsEditor bind:tags={tagsList}/>
-        </FormControl>
-    </TagsColorContainer>
-    <TagsColorContainer targetCategory="{tagCategory}">
-        <FormControl label="Tag Prefixes">
-            <TagsEditor bind:tags={prefixesList}/>
-        </FormControl>
-    </TagsColorContainer>
+  </TagsColorContainer>
 </FormContainer>
 <Menu>
-    <hr>
-    <MenuItem on:click={saveGroup}>Save Group</MenuItem>
+  <hr>
+  <MenuItem on:click={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 d9b5105..d507644 100644
--- a/src/routes/features/groups/[id]/export/+page.svelte
+++ b/src/routes/features/groups/[id]/export/+page.svelte
@@ -1,50 +1,50 @@
 <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 Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import TagGroup from "$entities/TagGroup";
-    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
-    import { tagGroups } from "$stores/entities/tag-groups";
+  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 Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import TagGroup from "$entities/TagGroup";
+  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);
+  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();
+  /** @type {string} */
+  let rawExportedGroup = $state();
+  /** @type {string} */
+  let encodedExportedGroup = $state();
 
-    if (!group) {
-        goto('/features/groups');
-    } else {
-        rawExportedGroup = groupTransporter.exportToJSON(group);
-        encodedExportedGroup = groupTransporter.exportToCompressedJSON(group);
-    }
+  if (!group) {
+    goto('/features/groups');
+  } else {
+    rawExportedGroup = groupTransporter.exportToJSON(group);
+    encodedExportedGroup = groupTransporter.exportToCompressedJSON(group);
+  }
 
-    let isEncodedGroupShown = $state(true);
+  let isEncodedGroupShown = $state(true);
 </script>
 
 <Menu>
-    <MenuItem href="/features/groups/{groupId}" icon="arrow-left">Back</MenuItem>
-    <hr>
+  <MenuItem href="/features/groups/{groupId}" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 <FormContainer>
-    <FormControl label="Export string">
-        <textarea readonly rows="6">{isEncodedGroupShown ? encodedExportedGroup : rawExportedGroup}</textarea>
-    </FormControl>
+  <FormControl label="Export string">
+    <textarea readonly rows="6">{isEncodedGroupShown ? encodedExportedGroup : rawExportedGroup}</textarea>
+  </FormControl>
 </FormContainer>
 <Menu>
-    <hr>
-    <MenuItem on:click={() => isEncodedGroupShown = !isEncodedGroupShown}>
-        Switch Format:
-        {#if isEncodedGroupShown}
-            Base64-Encoded
-        {:else}
-            Raw JSON
-        {/if}
-    </MenuItem>
+  <hr>
+  <MenuItem on:click={() => isEncodedGroupShown = !isEncodedGroupShown}>
+    Switch Format:
+    {#if isEncodedGroupShown}
+      Base64-Encoded
+    {:else}
+      Raw JSON
+    {/if}
+  </MenuItem>
 </Menu>
diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte
index a29efb3..e943918 100644
--- a/src/routes/features/groups/import/+page.svelte
+++ b/src/routes/features/groups/import/+page.svelte
@@ -1,134 +1,134 @@
 <script>
-    import { goto } from "$app/navigation";
-    import GroupView from "$components/features/GroupView.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import TagGroup from "$entities/TagGroup";
-    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
-    import { tagGroups } from "$stores/entities/tag-groups";
+  import { goto } from "$app/navigation";
+  import GroupView from "$components/features/GroupView.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import TagGroup from "$entities/TagGroup";
+  import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+  import { tagGroups } from "$stores/entities/tag-groups";
 
-    const groupTransporter = new EntitiesTransporter(TagGroup);
+  const groupTransporter = new EntitiesTransporter(TagGroup);
 
-    /** @type {string} */
-    let importedString = $state('');
-    /** @type {string} */
-    let errorMessage = $state('');
+  /** @type {string} */
+  let importedString = $state('');
+  /** @type {string} */
+  let errorMessage = $state('');
 
-    /** @type {TagGroup|null} */
-    let candidateGroup = $state(null);
-    /** @type {TagGroup|null} */
-    let existingGroup = $state(null);
+  /** @type {TagGroup|null} */
+  let candidateGroup = $state(null);
+  /** @type {TagGroup|null} */
+  let existingGroup = $state(null);
 
-    function tryImportingGroup() {
-        candidateGroup = null;
-        existingGroup = null;
+  function tryImportingGroup() {
+    candidateGroup = null;
+    existingGroup = null;
 
-        errorMessage = '';
-        importedString = importedString.trim();
+    errorMessage = '';
+    importedString = importedString.trim();
 
-        if (!importedString) {
-            errorMessage = 'Nothing to import.';
-            return;
-        }
-
-        try {
-            if (importedString.trim().startsWith('{')) {
-                candidateGroup = groupTransporter.importFromJSON(importedString);
-            }
-
-            candidateGroup = groupTransporter.importFromCompressedJSON(importedString);
-        } catch (error) {
-            errorMessage = error instanceof Error
-                    ? error.message
-                    : 'Unknown error';
-        }
-
-        if (candidateGroup) {
-            existingGroup = $tagGroups.find(group => group.id === candidateGroup?.id) ?? null;
-        }
+    if (!importedString) {
+      errorMessage = 'Nothing to import.';
+      return;
     }
 
-    function saveGroup() {
-        if (!candidateGroup) {
-            return;
-        }
+    try {
+      if (importedString.trim().startsWith('{')) {
+        candidateGroup = groupTransporter.importFromJSON(importedString);
+      }
 
-        candidateGroup.save().then(() => {
-            goto(`/features/groups`);
-        });
+      candidateGroup = groupTransporter.importFromCompressedJSON(importedString);
+    } catch (error) {
+      errorMessage = error instanceof Error
+        ? error.message
+        : 'Unknown error';
     }
 
-    function cloneAndSaveGroup() {
-        if (!candidateGroup) {
-            return;
-        }
-
-        const clonedProfile = new TagGroup(crypto.randomUUID(), candidateGroup.settings);
-        clonedProfile.settings.name += ` (Clone ${new Date().toISOString()})`;
-        clonedProfile.save().then(() => {
-            goto(`/features/groups`);
-        });
+    if (candidateGroup) {
+      existingGroup = $tagGroups.find(group => group.id === candidateGroup?.id) ?? null;
     }
+  }
+
+  function saveGroup() {
+    if (!candidateGroup) {
+      return;
+    }
+
+    candidateGroup.save().then(() => {
+      goto(`/features/groups`);
+    });
+  }
+
+  function cloneAndSaveGroup() {
+    if (!candidateGroup) {
+      return;
+    }
+
+    const clonedProfile = new TagGroup(crypto.randomUUID(), candidateGroup.settings);
+    clonedProfile.settings.name += ` (Clone ${new Date().toISOString()})`;
+    clonedProfile.save().then(() => {
+      goto(`/features/groups`);
+    });
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/features/groups">Back</MenuItem>
-    <hr>
+  <MenuItem href="/features/groups" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 {#if errorMessage}
-    <p class="error">Failed to import: {errorMessage}</p>
-    <Menu>
-        <hr>
-    </Menu>
+  <p class="error">Failed to import: {errorMessage}</p>
+  <Menu>
+    <hr>
+  </Menu>
 {/if}
 {#if !candidateGroup}
-    <FormContainer>
-        <FormControl label="Import string">
-            <textarea bind:value={importedString} rows="6"></textarea>
-        </FormControl>
-    </FormContainer>
-    <Menu>
-        <hr>
-        <MenuItem on:click={tryImportingGroup}>Import</MenuItem>
-    </Menu>
+  <FormContainer>
+    <FormControl label="Import string">
+      <textarea bind:value={importedString} rows="6"></textarea>
+    </FormControl>
+  </FormContainer>
+  <Menu>
+    <hr>
+    <MenuItem on:click={tryImportingGroup}>Import</MenuItem>
+  </Menu>
 {:else}
+  {#if existingGroup}
+    <p class="warning">
+      This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
+    </p>
+  {/if}
+  <GroupView group="{candidateGroup}"></GroupView>
+  <Menu>
+    <hr>
     {#if existingGroup}
-        <p class="warning">
-            This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
-        </p>
+      <MenuItem on:click={saveGroup}>Replace Existing Group</MenuItem>
+      <MenuItem on:click={cloneAndSaveGroup}>Save as New Group</MenuItem>
+    {:else}
+      <MenuItem on:click={saveGroup}>Import New Group</MenuItem>
     {/if}
-    <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>
-        {:else}
-            <MenuItem on:click={saveGroup}>Import New Group</MenuItem>
-        {/if}
-        <MenuItem on:click={() => candidateGroup = null}>Cancel</MenuItem>
-    </Menu>
+    <MenuItem on:click={() => candidateGroup = null}>Cancel</MenuItem>
+  </Menu>
 {/if}
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    .error, .warning {
-        padding: 5px 24px;
-        margin: {
-            left: -24px;
-            right: -24px;
-        }
+  .error, .warning {
+    padding: 5px 24px;
+    margin: {
+      left: -24px;
+      right: -24px;
     }
+  }
 
-    .error {
-        background: colors.$error-background;
-    }
+  .error {
+    background: colors.$error-background;
+  }
 
-    .warning {
-        background: colors.$warning-background;
-        margin-bottom: .5em;
-    }
+  .warning {
+    background: colors.$warning-background;
+    margin-bottom: .5em;
+  }
 </style>
diff --git a/src/routes/features/maintenance/+page.svelte b/src/routes/features/maintenance/+page.svelte
index f1c9ec4..4807011 100644
--- a/src/routes/features/maintenance/+page.svelte
+++ b/src/routes/features/maintenance/+page.svelte
@@ -1,50 +1,49 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
+  import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
 
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
-    import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  /** @type {import('$entities/MaintenanceProfile').default[]} */
+  let profiles = $state([]);
 
-    /** @type {import('$entities/MaintenanceProfile').default[]} */
-    let profiles = $state([]);
+  run(() => {
+    profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+  });
 
-    run(() => {
-        profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
-    });
+  function resetActiveProfile() {
+    $activeProfileStore = null;
+  }
 
-    function resetActiveProfile() {
-        $activeProfileStore = null;
-    }
-
-    /**
-     * @param {Event} event
-     */
-    function enableSelectedProfile(event) {
-        const target = event.target;
-
-        if (target instanceof HTMLInputElement && target.checked) {
-            activeProfileStore.set(target.value);
-        }
+  /**
+   * @param {Event} event
+   */
+  function enableSelectedProfile(event) {
+    const target = event.target;
+
+    if (target instanceof HTMLInputElement && target.checked) {
+      activeProfileStore.set(target.value);
     }
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/">Back</MenuItem>
-    <MenuItem icon="plus" href="/features/maintenance/new/edit">Create New</MenuItem>
-    {#if profiles.length}
-        <hr>
-    {/if}
-    {#each profiles as profile}
-        <MenuRadioItem href="/features/maintenance/{profile.id}"
-                       name="active-profile"
-                       value="{profile.id}"
-                       checked="{$activeProfileStore === profile.id}"
-                       on:input={enableSelectedProfile}>
-            {profile.settings.name}
-        </MenuRadioItem>
-    {/each}
+  <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+  <MenuItem href="/features/maintenance/new/edit" icon="plus">Create New</MenuItem>
+  {#if profiles.length}
     <hr>
-    <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
-    <MenuItem href="/features/maintenance/import">Import Profile</MenuItem>
+  {/if}
+  {#each profiles as profile}
+    <MenuRadioItem href="/features/maintenance/{profile.id}"
+                   name="active-profile"
+                   value="{profile.id}"
+                   checked="{$activeProfileStore === profile.id}"
+                   on:input={enableSelectedProfile}>
+      {profile.settings.name}
+    </MenuRadioItem>
+  {/each}
+  <hr>
+  <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
+  <MenuItem href="/features/maintenance/import">Import Profile</MenuItem>
 </Menu>
diff --git a/src/routes/features/maintenance/[id]/+page.svelte b/src/routes/features/maintenance/[id]/+page.svelte
index e091967..988c4a2 100644
--- a/src/routes/features/maintenance/[id]/+page.svelte
+++ b/src/routes/features/maintenance/[id]/+page.svelte
@@ -1,65 +1,64 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+  import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import ProfileView from "$components/features/ProfileView.svelte";
+  import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { page } from "$app/stores";
-    import { goto } from "$app/navigation";
-    import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-    import ProfileView from "$components/features/ProfileView.svelte";
-    import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+  const profileId = $page.params.id;
+  /** @type {import('$entities/MaintenanceProfile').default|null} */
+  let profile = $state(null);
 
-    const profileId = $page.params.id;
-    /** @type {import('$entities/MaintenanceProfile').default|null} */
-    let profile = $state(null);
+  if (profileId === 'new') {
+    goto('/features/maintenance/new/edit');
+  }
 
-    if (profileId === 'new') {
-        goto('/features/maintenance/new/edit');
+  run(() => {
+    const resolvedProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
+
+    if (resolvedProfile) {
+      profile = resolvedProfile;
+    } else {
+      console.warn(`Profile ${profileId} not found.`);
+      goto('/features/maintenance');
+    }
+  });
+
+  let isActiveProfile = $state($activeProfileStore === profileId);
+
+  run(() => {
+    if (isActiveProfile && $activeProfileStore !== profileId) {
+      $activeProfileStore = profileId;
     }
 
-    run(() => {
-        const resolvedProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
-
-        if (resolvedProfile) {
-            profile = resolvedProfile;
-        } else {
-            console.warn(`Profile ${profileId} not found.`);
-            goto('/features/maintenance');
-        }
-    });
-
-    let isActiveProfile = $state($activeProfileStore === profileId);
-
-    run(() => {
-        if (isActiveProfile && $activeProfileStore !== profileId) {
-            $activeProfileStore = profileId;
-        }
-
-        if (!isActiveProfile && $activeProfileStore === profileId) {
-            $activeProfileStore = null;
-        }
-    });
+    if (!isActiveProfile && $activeProfileStore === profileId) {
+      $activeProfileStore = null;
+    }
+  });
 </script>
 
 <Menu>
-    <MenuItem href="/features/maintenance" icon="arrow-left">Back</MenuItem>
-    <hr>
+  <MenuItem href="/features/maintenance" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 {#if profile}
-    <ProfileView {profile}/>
+  <ProfileView {profile}/>
 {/if}
 <Menu>
-    <hr>
-    <MenuItem icon="wrench" href="/features/maintenance/{profileId}/edit">Edit Profile</MenuItem>
-    <MenuCheckboxItem bind:checked={isActiveProfile}>
-        Activate Profile
-    </MenuCheckboxItem>
-    <MenuItem icon="file-export" href="/features/maintenance/{profileId}/export">
-        Export Profile
-    </MenuItem>
-    <MenuItem icon="trash" href="/features/maintenance/{profileId}/delete">
-        Delete Profile
-    </MenuItem>
+  <hr>
+  <MenuItem href="/features/maintenance/{profileId}/edit" icon="wrench">Edit Profile</MenuItem>
+  <MenuCheckboxItem bind:checked={isActiveProfile}>
+    Activate Profile
+  </MenuCheckboxItem>
+  <MenuItem href="/features/maintenance/{profileId}/export" icon="file-export">
+    Export Profile
+  </MenuItem>
+  <MenuItem href="/features/maintenance/{profileId}/delete" icon="trash">
+    Delete Profile
+  </MenuItem>
 </Menu>
 
 <style lang="scss">
diff --git a/src/routes/features/maintenance/[id]/delete/+page.svelte b/src/routes/features/maintenance/[id]/delete/+page.svelte
index 683741c..c636659 100644
--- a/src/routes/features/maintenance/[id]/delete/+page.svelte
+++ b/src/routes/features/maintenance/[id]/delete/+page.svelte
@@ -1,41 +1,41 @@
 <script>
-    import { goto } from "$app/navigation";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { page } from "$app/stores";
-    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import { goto } from "$app/navigation";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { page } from "$app/stores";
+  import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
 
-    const profileId = $page.params.id;
-    const targetProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
+  const profileId = $page.params.id;
+  const targetProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
+  if (!targetProfile) {
+    void goto('/features/maintenance');
+  }
+
+  async function deleteProfile() {
     if (!targetProfile) {
-        void goto('/features/maintenance');
+      console.warn('Attempting to delete the profile, but the profile is not loaded yet.');
+      return;
     }
 
-    async function deleteProfile() {
-        if (!targetProfile) {
-            console.warn('Attempting to delete the profile, but the profile is not loaded yet.');
-            return;
-        }
-
-        await targetProfile.delete();
-        await goto('/features/maintenance');
-    }
+    await targetProfile.delete();
+    await goto('/features/maintenance');
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/features/maintenance/{profileId}">Back</MenuItem>
-    <hr>
+  <MenuItem href="/features/maintenance/{profileId}" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 {#if targetProfile}
-    <p>
-        Do you want to remove profile "{targetProfile.settings.name}"? This action is irreversible.
-    </p>
-    <Menu>
-        <hr>
-        <MenuItem on:click={deleteProfile}>Yes</MenuItem>
-        <MenuItem href="/features/maintenance/{profileId}">No</MenuItem>
-    </Menu>
+  <p>
+    Do you want to remove profile "{targetProfile.settings.name}"? This action is irreversible.
+  </p>
+  <Menu>
+    <hr>
+    <MenuItem on:click={deleteProfile}>Yes</MenuItem>
+    <MenuItem href="/features/maintenance/{profileId}">No</MenuItem>
+  </Menu>
 {:else}
-    <p>Loading...</p>
+  <p>Loading...</p>
 {/if}
diff --git a/src/routes/features/maintenance/[id]/edit/+page.svelte b/src/routes/features/maintenance/[id]/edit/+page.svelte
index 180a64f..a018e93 100644
--- a/src/routes/features/maintenance/[id]/edit/+page.svelte
+++ b/src/routes/features/maintenance/[id]/edit/+page.svelte
@@ -1,69 +1,69 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import TagsEditor from "$components/tags/TagsEditor.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import TextField from "$components/ui/forms/TextField.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import { page } from "$app/stores";
-    import { goto } from "$app/navigation";
-    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-    import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import TagsEditor from "$components/tags/TagsEditor.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import TextField from "$components/ui/forms/TextField.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+  import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-    /** @type {string} */
-    let profileId = $page.params.id;
-    /** @type {MaintenanceProfile|null} */
-    let targetProfile = null;
+  /** @type {string} */
+  let profileId = $page.params.id;
+  /** @type {MaintenanceProfile|null} */
+  let targetProfile = null;
 
-    /** @type {string} */
-    let profileName = $state('');
-    /** @type {string[]} */
-    let tagsList = $state([]);
+  /** @type {string} */
+  let profileName = $state('');
+  /** @type {string[]} */
+  let tagsList = $state([]);
 
-    if (profileId === 'new') {
-        targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
+  if (profileId === 'new') {
+    targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
+  } else {
+    const maybeExistingProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
+
+    if (maybeExistingProfile) {
+      targetProfile = maybeExistingProfile;
+      profileName = targetProfile.settings.name;
+      tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
     } else {
-        const maybeExistingProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
+      goto('/features/maintenance');
+    }
+  }
 
-        if (maybeExistingProfile) {
-            targetProfile = maybeExistingProfile;
-            profileName = targetProfile.settings.name;
-            tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
-        } else {
-            goto('/features/maintenance');
-        }
+  async function saveProfile() {
+    if (!targetProfile) {
+      console.warn('Attempting to save the profile, but the profile is not loaded yet.');
+      return;
     }
 
-    async function saveProfile() {
-        if (!targetProfile) {
-            console.warn('Attempting to save the profile, but the profile is not loaded yet.');
-            return;
-        }
+    targetProfile.settings.name = profileName;
+    targetProfile.settings.tags = [...tagsList];
+    targetProfile.settings.temporary = false;
 
-        targetProfile.settings.name = profileName;
-        targetProfile.settings.tags = [...tagsList];
-        targetProfile.settings.temporary = false;
-
-        await targetProfile.save();
-        await goto('/features/maintenance/' + targetProfile.id);
-    }
+    await targetProfile.save();
+    await goto('/features/maintenance/' + targetProfile.id);
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/features/maintenance{profileId === 'new' ? '' : '/' + profileId}">
-        Back
-    </MenuItem>
-    <hr>
+  <MenuItem href="/features/maintenance{profileId === 'new' ? '' : '/' + profileId}" icon="arrow-left">
+    Back
+  </MenuItem>
+  <hr>
 </Menu>
 <FormContainer>
-    <FormControl label="Profile Name">
-        <TextField bind:value={profileName} placeholder="Profile Name"></TextField>
-    </FormControl>
-    <FormControl label="Tags">
-        <TagsEditor bind:tags={tagsList}></TagsEditor>
-    </FormControl>
+  <FormControl label="Profile Name">
+    <TextField bind:value={profileName} placeholder="Profile Name"></TextField>
+  </FormControl>
+  <FormControl label="Tags">
+    <TagsEditor bind:tags={tagsList}></TagsEditor>
+  </FormControl>
 </FormContainer>
 <Menu>
-    <hr>
-    <MenuItem href="#" on:click={saveProfile}>Save Profile</MenuItem>
+  <hr>
+  <MenuItem href="#" on:click={saveProfile}>Save Profile</MenuItem>
 </Menu>
diff --git a/src/routes/features/maintenance/[id]/export/+page.svelte b/src/routes/features/maintenance/[id]/export/+page.svelte
index 429dbf5..f2f3d7e 100644
--- a/src/routes/features/maintenance/[id]/export/+page.svelte
+++ b/src/routes/features/maintenance/[id]/export/+page.svelte
@@ -1,52 +1,52 @@
 <script>
-    import { page } from "$app/stores";
-    import { goto } from "$app/navigation";
-    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
-    import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+  import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-    const profileId = $page.params.id;
-    const profile = $maintenanceProfiles.find(profile => profile.id === profileId);
+  const profileId = $page.params.id;
+  const profile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
-    const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
-    /** @type {string} */
-    let exportedProfile = $state('');
-    /** @type {string} */
-    let compressedProfile = $state('');
+  const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
+  /** @type {string} */
+  let exportedProfile = $state('');
+  /** @type {string} */
+  let compressedProfile = $state('');
 
-    if (!profile) {
-        goto('/features/maintenance/');
-    } else {
-        exportedProfile = profilesTransporter.exportToJSON(profile);
-        compressedProfile = profilesTransporter.exportToCompressedJSON(profile);
-    }
+  if (!profile) {
+    goto('/features/maintenance/');
+  } else {
+    exportedProfile = profilesTransporter.exportToJSON(profile);
+    compressedProfile = profilesTransporter.exportToCompressedJSON(profile);
+  }
 
-    let isCompressedProfileShown = $state(true);
+  let isCompressedProfileShown = $state(true);
 </script>
 
 <Menu>
-    <MenuItem href="/features/maintenance/{profileId}" icon="arrow-left">
-        Back
-    </MenuItem>
-    <hr>
+  <MenuItem href="/features/maintenance/{profileId}" icon="arrow-left">
+    Back
+  </MenuItem>
+  <hr>
 </Menu>
 <FormContainer>
-    <FormControl label="Export string">
-        <textarea readonly rows="6">{isCompressedProfileShown ? compressedProfile : exportedProfile}</textarea>
-    </FormControl>
+  <FormControl label="Export string">
+    <textarea readonly rows="6">{isCompressedProfileShown ? compressedProfile : exportedProfile}</textarea>
+  </FormControl>
 </FormContainer>
 <Menu>
-    <hr>
-    <MenuItem on:click={() => isCompressedProfileShown = !isCompressedProfileShown}>
-        Switch Format:
-        {#if isCompressedProfileShown}
-            Base64-Encoded
-        {:else}
-            Raw JSON
-        {/if}
-    </MenuItem>
+  <hr>
+  <MenuItem on:click={() => isCompressedProfileShown = !isCompressedProfileShown}>
+    Switch Format:
+    {#if isCompressedProfileShown}
+      Base64-Encoded
+    {:else}
+      Raw JSON
+    {/if}
+  </MenuItem>
 </Menu>
diff --git a/src/routes/features/maintenance/import/+page.svelte b/src/routes/features/maintenance/import/+page.svelte
index d080e0b..d77612b 100644
--- a/src/routes/features/maintenance/import/+page.svelte
+++ b/src/routes/features/maintenance/import/+page.svelte
@@ -1,134 +1,134 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import MaintenanceProfile from "$entities/MaintenanceProfile";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import ProfileView from "$components/features/ProfileView.svelte";
-    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-    import { goto } from "$app/navigation";
-    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import ProfileView from "$components/features/ProfileView.svelte";
+  import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import { goto } from "$app/navigation";
+  import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
 
-    const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
+  const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
-    /** @type {string} */
-    let importedString = $state('');
-    /** @type {string} */
-    let errorMessage = $state('');
+  /** @type {string} */
+  let importedString = $state('');
+  /** @type {string} */
+  let errorMessage = $state('');
 
-    /** @type {MaintenanceProfile|null} */
-    let candidateProfile = $state(null);
-    /** @type {MaintenanceProfile|null} */
-    let existingProfile = $state(null);
+  /** @type {MaintenanceProfile|null} */
+  let candidateProfile = $state(null);
+  /** @type {MaintenanceProfile|null} */
+  let existingProfile = $state(null);
 
-    function tryImportingProfile() {
-        candidateProfile = null;
-        existingProfile = null;
+  function tryImportingProfile() {
+    candidateProfile = null;
+    existingProfile = null;
 
-        errorMessage = '';
-        importedString = importedString.trim();
+    errorMessage = '';
+    importedString = importedString.trim();
 
-        if (!importedString) {
-            errorMessage = 'Nothing to import.';
-            return;
-        }
-
-        try {
-            if (importedString.trim().startsWith('{')) {
-                candidateProfile = profilesTransporter.importFromJSON(importedString);
-            }
-
-            candidateProfile = profilesTransporter.importFromCompressedJSON(importedString);
-        } catch (error) {
-            errorMessage = error instanceof Error
-                    ? error.message
-                    : 'Unknown error';
-        }
-
-        if (candidateProfile) {
-            existingProfile = $maintenanceProfiles.find(profile => profile.id === candidateProfile?.id) ?? null;
-        }
+    if (!importedString) {
+      errorMessage = 'Nothing to import.';
+      return;
     }
 
-    function saveProfile() {
-        if (!candidateProfile) {
-            return;
-        }
+    try {
+      if (importedString.trim().startsWith('{')) {
+        candidateProfile = profilesTransporter.importFromJSON(importedString);
+      }
 
-        candidateProfile.save().then(() => {
-            goto(`/features/maintenance`);
-        });
+      candidateProfile = profilesTransporter.importFromCompressedJSON(importedString);
+    } catch (error) {
+      errorMessage = error instanceof Error
+        ? error.message
+        : 'Unknown error';
     }
 
-    function cloneAndSaveProfile() {
-        if (!candidateProfile) {
-            return;
-        }
-
-        const clonedProfile = new MaintenanceProfile(crypto.randomUUID(), candidateProfile.settings);
-        clonedProfile.settings.name += ` (Clone ${new Date().toISOString()})`;
-        clonedProfile.save().then(() => {
-            goto(`/features/maintenance`);
-        });
+    if (candidateProfile) {
+      existingProfile = $maintenanceProfiles.find(profile => profile.id === candidateProfile?.id) ?? null;
     }
+  }
+
+  function saveProfile() {
+    if (!candidateProfile) {
+      return;
+    }
+
+    candidateProfile.save().then(() => {
+      goto(`/features/maintenance`);
+    });
+  }
+
+  function cloneAndSaveProfile() {
+    if (!candidateProfile) {
+      return;
+    }
+
+    const clonedProfile = new MaintenanceProfile(crypto.randomUUID(), candidateProfile.settings);
+    clonedProfile.settings.name += ` (Clone ${new Date().toISOString()})`;
+    clonedProfile.save().then(() => {
+      goto(`/features/maintenance`);
+    });
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/features/maintenance">Back</MenuItem>
-    <hr>
+  <MenuItem href="/features/maintenance" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 {#if errorMessage}
-    <p class="error">Failed to import: {errorMessage}</p>
-    <Menu>
-        <hr>
-    </Menu>
+  <p class="error">Failed to import: {errorMessage}</p>
+  <Menu>
+    <hr>
+  </Menu>
 {/if}
 {#if !candidateProfile}
-    <FormContainer>
-        <FormControl label="Import string">
-            <textarea bind:value={importedString} rows="6"></textarea>
-        </FormControl>
-    </FormContainer>
-    <Menu>
-        <hr>
-        <MenuItem on:click={tryImportingProfile}>Import</MenuItem>
-    </Menu>
+  <FormContainer>
+    <FormControl label="Import string">
+      <textarea bind:value={importedString} rows="6"></textarea>
+    </FormControl>
+  </FormContainer>
+  <Menu>
+    <hr>
+    <MenuItem on:click={tryImportingProfile}>Import</MenuItem>
+  </Menu>
 {:else}
+  {#if existingProfile}
+    <p class="warning">
+      This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
+    </p>
+  {/if}
+  <ProfileView profile="{candidateProfile}"></ProfileView>
+  <Menu>
+    <hr>
     {#if existingProfile}
-        <p class="warning">
-            This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
-        </p>
+      <MenuItem on:click={saveProfile}>Replace Existing Profile</MenuItem>
+      <MenuItem on:click={cloneAndSaveProfile}>Save as New Profile</MenuItem>
+    {:else}
+      <MenuItem on:click={saveProfile}>Import New Profile</MenuItem>
     {/if}
-    <ProfileView profile="{candidateProfile}"></ProfileView>
-    <Menu>
-        <hr>
-        {#if existingProfile}
-            <MenuItem on:click={saveProfile}>Replace Existing Profile</MenuItem>
-            <MenuItem on:click={cloneAndSaveProfile}>Save as New Profile</MenuItem>
-        {:else}
-            <MenuItem on:click={saveProfile}>Import New Profile</MenuItem>
-        {/if}
-        <MenuItem on:click={() => candidateProfile = null}>Cancel</MenuItem>
-    </Menu>
+    <MenuItem on:click={() => candidateProfile = null}>Cancel</MenuItem>
+  </Menu>
 {/if}
 
 <style lang="scss">
-    @use '$styles/colors';
+  @use '$styles/colors';
 
-    .error, .warning {
-        padding: 5px 24px;
-        margin: {
-            left: -24px;
-            right: -24px;
-        }
+  .error, .warning {
+    padding: 5px 24px;
+    margin: {
+      left: -24px;
+      right: -24px;
     }
+  }
 
-    .error {
-        background: colors.$error-background;
-    }
+  .error {
+    background: colors.$error-background;
+  }
 
-    .warning {
-        background: colors.$warning-background;
-        margin-bottom: .5em;
-    }
+  .warning {
+    background: colors.$warning-background;
+    margin-bottom: .5em;
+  }
 </style>
diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte
index f4f4ea3..5937831 100644
--- a/src/routes/preferences/+page.svelte
+++ b/src/routes/preferences/+page.svelte
@@ -1,14 +1,14 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuItem href="/" icon="arrow-left">Back</MenuItem>
-    <hr>
-    <MenuItem href="/preferences/tags">Tagging</MenuItem>
-    <MenuItem href="/preferences/search">Search</MenuItem>
-    <MenuItem href="/preferences/misc">Misc & Tools</MenuItem>
-    <hr>
-    <MenuItem href="/preferences/debug">Debug</MenuItem>
+  <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+  <hr>
+  <MenuItem href="/preferences/tags">Tagging</MenuItem>
+  <MenuItem href="/preferences/search">Search</MenuItem>
+  <MenuItem href="/preferences/misc">Misc & Tools</MenuItem>
+  <hr>
+  <MenuItem href="/preferences/debug">Debug</MenuItem>
 </Menu>
diff --git a/src/routes/preferences/debug/+page.svelte b/src/routes/preferences/debug/+page.svelte
index 31e7210..7e661f6 100644
--- a/src/routes/preferences/debug/+page.svelte
+++ b/src/routes/preferences/debug/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
-    <hr>
-    <MenuItem href="/preferences/debug/storage">Inspect Storages</MenuItem>
+  <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
+  <hr>
+  <MenuItem href="/preferences/debug/storage">Inspect Storages</MenuItem>
 </Menu>
diff --git a/src/routes/preferences/debug/storage/+page.svelte b/src/routes/preferences/debug/storage/+page.svelte
index 2ad0fd0..57e7693 100644
--- a/src/routes/preferences/debug/storage/+page.svelte
+++ b/src/routes/preferences/debug/storage/+page.svelte
@@ -1,13 +1,13 @@
 <script>
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import { storagesCollection } from "$stores/debug";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import { storagesCollection } from "$stores/debug";
 </script>
 
 <Menu>
-    <MenuItem href="/preferences/debug" icon="arrow-left">Back</MenuItem>
-    <hr>
-    {#each Object.keys($storagesCollection) as storageName}
-        <MenuItem href="/preferences/debug/storage/{storageName}/">Storage: {storageName}</MenuItem>
-    {/each}
+  <MenuItem href="/preferences/debug" icon="arrow-left">Back</MenuItem>
+  <hr>
+  {#each Object.keys($storagesCollection) as storageName}
+    <MenuItem href="/preferences/debug/storage/{storageName}/">Storage: {storageName}</MenuItem>
+  {/each}
 </Menu>
diff --git a/src/routes/preferences/debug/storage/[...path]/+page.svelte b/src/routes/preferences/debug/storage/[...path]/+page.svelte
index bc2adb7..2a43979 100644
--- a/src/routes/preferences/debug/storage/[...path]/+page.svelte
+++ b/src/routes/preferences/debug/storage/[...path]/+page.svelte
@@ -1,31 +1,30 @@
 <script>
-    import { run } from 'svelte/legacy';
+  import { run } from 'svelte/legacy';
+  import StorageViewer from "$components/debugging/StorageViewer.svelte";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
 
-    import StorageViewer from "$components/debugging/StorageViewer.svelte";
-    import { page } from "$app/stores";
-    import { goto } from "$app/navigation";
+  let pathString = $state('');
+  /** @type {string[]} */
+  let pathArray = $state([]);
+  /** @type {string|undefined} */
+  let storageName = $state(void 0);
 
-    let pathString = $state('');
-    /** @type {string[]} */
-    let pathArray = $state([]);
-    /** @type {string|undefined} */
-    let storageName = $state(void 0);
+  run(() => {
+    pathString = $page.params.path;
+    pathArray = pathString.length ? pathString.split("/") : [];
+    storageName = pathArray.shift()
 
-    run(() => {
-        pathString = $page.params.path;
-        pathArray = pathString.length ? pathString.split("/") : [];
-        storageName = pathArray.shift()
+    if (pathArray.length && pathArray[pathArray.length - 1] === '') {
+      pathArray.pop();
+    }
 
-        if (pathArray.length && pathArray[pathArray.length - 1] === '') {
-            pathArray.pop();
-        }
-
-        if (!storageName) {
-            goto("/preferences/debug/storage");
-        }
-    });
+    if (!storageName) {
+      goto("/preferences/debug/storage");
+    }
+  });
 </script>
 
 {#if storageName}
-    <StorageViewer storage="{storageName}" path="{pathArray}"></StorageViewer>
+  <StorageViewer storage="{storageName}" path="{pathArray}"></StorageViewer>
 {/if}
diff --git a/src/routes/preferences/misc/+page.svelte b/src/routes/preferences/misc/+page.svelte
index e49ac36..bd16de8 100644
--- a/src/routes/preferences/misc/+page.svelte
+++ b/src/routes/preferences/misc/+page.svelte
@@ -1,20 +1,20 @@
 <script>
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
-    import { fullScreenViewerEnabled } from "$stores/preferences/misc";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+  import { fullScreenViewerEnabled } from "$stores/preferences/misc";
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
-    <hr>
+  <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 <FormContainer>
-    <FormControl>
-        <CheckboxField bind:checked={$fullScreenViewerEnabled}>
-            Enable fullscreen viewer button
-        </CheckboxField>
-    </FormControl>
+  <FormControl>
+    <CheckboxField bind:checked={$fullScreenViewerEnabled}>
+      Enable fullscreen viewer button
+    </CheckboxField>
+  </FormControl>
 </FormContainer>
diff --git a/src/routes/preferences/search/+page.svelte b/src/routes/preferences/search/+page.svelte
index a555450..5e55d90 100644
--- a/src/routes/preferences/search/+page.svelte
+++ b/src/routes/preferences/search/+page.svelte
@@ -1,35 +1,32 @@
 <script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import {
-        searchPropertiesSuggestionsEnabled,
-        searchPropertiesSuggestionsPosition
-    } from "$stores/preferences/search";
-    import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
-    import SelectField from "$components/ui/forms/SelectField.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import { searchPropertiesSuggestionsEnabled, searchPropertiesSuggestionsPosition } from "$stores/preferences/search";
+  import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+  import SelectField from "$components/ui/forms/SelectField.svelte";
 
-    const propertiesPositions = {
-        start: "At the start of the list",
-        end: "At the end of the list",
-    }
+  const propertiesPositions = {
+    start: "At the start of the list",
+    end: "At the end of the list",
+  }
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
-    <hr>
+  <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 <FormContainer>
-    <FormControl>
-        <CheckboxField bind:checked={$searchPropertiesSuggestionsEnabled}>
-            Auto-complete properties
-        </CheckboxField>
+  <FormControl>
+    <CheckboxField bind:checked={$searchPropertiesSuggestionsEnabled}>
+      Auto-complete properties
+    </CheckboxField>
+  </FormControl>
+  {#if $searchPropertiesSuggestionsEnabled}
+    <FormControl label="Show completed properties:">
+      <SelectField bind:value={$searchPropertiesSuggestionsPosition}
+                   options="{propertiesPositions}"></SelectField>
     </FormControl>
-    {#if $searchPropertiesSuggestionsEnabled}
-        <FormControl label="Show completed properties:">
-            <SelectField bind:value={$searchPropertiesSuggestionsPosition}
-                         options="{propertiesPositions}"></SelectField>
-        </FormControl>
-    {/if}
+  {/if}
 </FormContainer>
diff --git a/src/routes/preferences/tags/+page.svelte b/src/routes/preferences/tags/+page.svelte
index 6e9f26a..c5e55ba 100644
--- a/src/routes/preferences/tags/+page.svelte
+++ b/src/routes/preferences/tags/+page.svelte
@@ -1,20 +1,20 @@
 <script>
-    import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
-    import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import FormControl from "$components/ui/forms/FormControl.svelte";
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { stripBlacklistedTagsEnabled } from "$stores/preferences/maintenance";
+  import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+  import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import FormControl from "$components/ui/forms/FormControl.svelte";
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { stripBlacklistedTagsEnabled } from "$stores/preferences/maintenance";
 </script>
 
 <Menu>
-    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
-    <hr>
+  <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
+  <hr>
 </Menu>
 <FormContainer>
-    <FormControl>
-        <CheckboxField bind:checked={$stripBlacklistedTagsEnabled}>
-            Automatically remove black-listed tags from the images
-        </CheckboxField>
-    </FormControl>
+  <FormControl>
+    <CheckboxField bind:checked={$stripBlacklistedTagsEnabled}>
+      Automatically remove black-listed tags from the images
+    </CheckboxField>
+  </FormControl>
 </FormContainer>

From 620af3e62288ae26cc0aea84d89fa4ee27f91dbb Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 03:06:39 +0400
Subject: [PATCH 04/14] Refactoring storage viewer and its route

---
 src/components/debugging/StorageViewer.svelte | 84 +++++++++----------
 .../debug/storage/[...path]/+page.svelte      | 38 +++++----
 2 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/src/components/debugging/StorageViewer.svelte b/src/components/debugging/StorageViewer.svelte
index 1f45705..1201c5b 100644
--- a/src/components/debugging/StorageViewer.svelte
+++ b/src/components/debugging/StorageViewer.svelte
@@ -1,34 +1,21 @@
-<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 { storagesCollection } from "$stores/debug";
   import { goto } from "$app/navigation";
   import { findDeepObject } from "$lib/utils";
 
+  interface StorageViewerProps {
+    storage: string;
+    path: string[];
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string} storage
-   * @property {string[]} path
-   */
+  type BreadcrumbsArray = [string, string][];
 
-  /** @type {Props} */
-  let { storage, path } = $props();
+  let { storage, path }: StorageViewerProps = $props();
 
-  /** @type {Object|null} */
-  let targetStorage = $state(null);
-  /** @type {[string, string][]} */
-  let breadcrumbs = $state([]);
-  /** @type {Object<string, any>|null} */
-  let targetObject = $state(null);
-  let targetPathString = $state('');
-
-  run(() => {
-    /** @type {[string, string][]} */
-    const builtBreadcrumbs = [];
-
-    breadcrumbs = path.reduce((resultCrumbs, entry) => {
+  let breadcrumbs = $derived.by<BreadcrumbsArray>(() => {
+    return path.reduce<BreadcrumbsArray>((resultCrumbs, entry) => {
       let entryPath = entry;
 
       if (resultCrumbs.length) {
@@ -38,37 +25,42 @@
       resultCrumbs.push([entry, entryPath]);
 
       return resultCrumbs;
-    }, builtBreadcrumbs);
-
-    targetPathString = path.join("/");
-
-    if (targetPathString.length) {
-      targetPathString += "/";
-    }
+    }, [])
   });
 
-  run(() => {
-    targetStorage = $storagesCollection[storage];
+  let targetStorage = $derived.by<object|null>(() => {
+    return $storagesCollection[storage];
+  });
 
+  let targetObject = $derived.by<Record<string, any> | null>(() => {
+    return targetStorage
+      ? findDeepObject(targetStorage, path)
+      : null;
+  });
+
+  let targetPathString = $derived.by<string>(() => {
+    let pathString = path.join("/");
+
+    if (pathString.length) {
+      pathString += "/";
+    }
+
+    return pathString;
+  });
+
+  $effect(() => {
     if (!targetStorage) {
       goto("/preferences/debug/storage");
     }
   });
 
-  run(() => {
-    targetObject = targetStorage
-      ? findDeepObject(targetStorage, path)
-      : null;
-  });
-
   /**
    * Helper function to resolve type, including the null.
-   * @param {*} value Value to resolve type from.
-   * @return {string} Type of the value, including "null" for null.
+   * @param value Value to resolve type from.
+   * @return Type of the value, including "null" for null.
    */
-  function resolveType(value) {
-    /** @type {string} */
-    let typeName = typeof value;
+  function resolveType(value: unknown): string {
+    let typeName: string = typeof value;
 
     if (typeName === 'object' && value === null) {
       typeName = 'null';
@@ -79,10 +71,10 @@
 
   /**
    * Helper function to resolve value, including values like null or undefined.
-   * @param {*} value Value to resolve.
-   * @return {string} String representation of the value.
+   * @param value Value to resolve.
+   * @return String representation of the value.
    */
-  function resolveValue(value) {
+  function resolveValue(value: unknown): string {
     if (value === null) {
       return "null";
     }
@@ -108,7 +100,7 @@
 {#if targetObject}
   <Menu>
     <hr>
-    {#each Object.entries(targetObject) as [key, value]}
+    {#each Object.entries(targetObject) as [key, _]}
       {#if targetObject[key] && typeof targetObject[key] === 'object'}
         <MenuItem href="/preferences/debug/storage/{storage}/{targetPathString}{key}">
           {key}: Object
diff --git a/src/routes/preferences/debug/storage/[...path]/+page.svelte b/src/routes/preferences/debug/storage/[...path]/+page.svelte
index 2a43979..3f8d6f5 100644
--- a/src/routes/preferences/debug/storage/[...path]/+page.svelte
+++ b/src/routes/preferences/debug/storage/[...path]/+page.svelte
@@ -1,24 +1,32 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
   import StorageViewer from "$components/debugging/StorageViewer.svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import { goto } from "$app/navigation";
 
-  let pathString = $state('');
-  /** @type {string[]} */
-  let pathArray = $state([]);
-  /** @type {string|undefined} */
-  let storageName = $state(void 0);
+  let pathArray = $derived.by<string[]>(() => {
+    const pathString = page.params.path;
 
-  run(() => {
-    pathString = $page.params.path;
-    pathArray = pathString.length ? pathString.split("/") : [];
-    storageName = pathArray.shift()
+    return pathString.length ? pathString.split('/') : [];
+  });
 
-    if (pathArray.length && pathArray[pathArray.length - 1] === '') {
-      pathArray.pop();
+  let storageName = $derived.by<string | undefined>(() => {
+    return pathArray[0];
+  });
+
+  // Copy of the array without the storage or empty string at the end.
+  let normalizedPathArray = $derived.by<string[]>(() => {
+    // Excludes storage name
+    const resultArray = pathArray.slice(1);
+
+    // Getting rid of trailing empty entry
+    if (resultArray.length && resultArray[resultArray.length - 1] === '') {
+      resultArray.pop();
     }
 
+    return resultArray;
+  });
+
+  $effect(() => {
     if (!storageName) {
       goto("/preferences/debug/storage");
     }
@@ -26,5 +34,5 @@
 </script>
 
 {#if storageName}
-  <StorageViewer storage="{storageName}" path="{pathArray}"></StorageViewer>
+  <StorageViewer storage={storageName} path={normalizedPathArray}></StorageViewer>
 {/if}

From 927fa21d95840e49db220b94212e79755c9e5eb2 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 03:44:48 +0400
Subject: [PATCH 05/14] Fixed the typo in the back link

---
 src/routes/features/groups/[id]/edit/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/features/groups/[id]/edit/+page.svelte b/src/routes/features/groups/[id]/edit/+page.svelte
index e18de7a..d1fbd32 100644
--- a/src/routes/features/groups/[id]/edit/+page.svelte
+++ b/src/routes/features/groups/[id]/edit/+page.svelte
@@ -55,7 +55,7 @@
 </script>
 
 <Menu>
-  <MenuItem href="/features/groups/${groupId}" icon="arrow-left">Back</MenuItem>
+  <MenuItem href="/features/groups/{groupId}" icon="arrow-left">Back</MenuItem>
   <hr>
 </Menu>
 <FormContainer>

From 9f08eb2171d73bf00edb8b41ee4acc0306ef28ef Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 03:46:29 +0400
Subject: [PATCH 06/14] Refactored MenuItem

This change will break a lot of menu items with `on:click`. These cases would be resolved separately.
---
 src/components/ui/menu/MenuItem.svelte | 31 ++++++++++++--------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/menu/MenuItem.svelte b/src/components/ui/menu/MenuItem.svelte
index aa5a29d..eedcad0 100644
--- a/src/components/ui/menu/MenuItem.svelte
+++ b/src/components/ui/menu/MenuItem.svelte
@@ -1,28 +1,25 @@
-<script>
-  import { createBubbler } from 'svelte/legacy';
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuItemProps {
+    href?: string | null;
+    icon?: App.IconName | null;
+    target?: App.LinkTarget | undefined;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {string|null} [href]
-   * @property {App.IconName|null} [icon]
-   * @property {App.LinkTarget|undefined} [target]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     href = null,
     icon = null,
     target = undefined,
-    children
-  } = $props();
+    children,
+    onclick
+  }: MenuItemProps = $props();
 </script>
 
-<svelte:element class="menu-item" {href} onclick={bubble('click')} role="link" tabindex="0" {target}
-                this="{href ? 'a': 'span'}">
+<svelte:element class="menu-item" {href} {onclick} role="link" tabindex="0" {target} this="{href ? 'a': 'span'}">
   {#if icon}
     <i class="icon icon-{icon}"></i>
   {/if}

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 07/14] 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}
 

From 5a07fa3d603a41353d46c8d23c85a2e1bc5843e1 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 04:51:15 +0400
Subject: [PATCH 08/14] Refactored menu & menu items

Once again, breaking change for a lot of components, would be tackled separately
---
 src/components/ui/menu/Menu.svelte            |  4 +-
 .../ui/menu/MenuCheckboxItem.svelte           | 38 +++++++++----------
 src/components/ui/menu/MenuRadioItem.svelte   | 34 ++++++++---------
 3 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index 0889cc2..ffd3ab5 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  interface Props {
+  interface MenuProps {
     children?: import('svelte').Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children }: MenuProps = $props();
 </script>
 
 <nav>
diff --git a/src/components/ui/menu/MenuCheckboxItem.svelte b/src/components/ui/menu/MenuCheckboxItem.svelte
index 278779d..3bae07b 100644
--- a/src/components/ui/menu/MenuCheckboxItem.svelte
+++ b/src/components/ui/menu/MenuCheckboxItem.svelte
@@ -1,33 +1,31 @@
-<script>
-  import { createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">
   import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  import type { Snippet } from "svelte";
+  import type { FormEventHandler, MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuCheckboxItemProps {
+    checked: boolean;
+    name?: string;
+    value?: string;
+    href?: string;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    oninput?: FormEventHandler<HTMLInputElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} checked
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [value]
-   * @property {string|null} [href]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     checked = $bindable(),
     name = undefined,
     value = undefined,
-    href = null,
-    children
-  } = $props();
+    href = undefined,
+    children,
+    onclick,
+    oninput,
+  }: MenuCheckboxItemProps = $props();
 </script>
 
 <MenuLink {href}>
-  <input bind:checked={checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')}
-         type="checkbox"
-         {value}>
+  <input bind:checked={checked} {name} {onclick} {oninput} type="checkbox" {value}>
   {@render children?.()}
 </MenuLink>
 
diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
index f76c0e3..ba8860e 100644
--- a/src/components/ui/menu/MenuRadioItem.svelte
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -1,31 +1,31 @@
-<script>
-  import { createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">
   import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  import type { Snippet } from "svelte";
+  import type { FormEventHandler, MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuRadioItemProps {
+    checked: boolean;
+    name: string;
+    value: string;
+    href?: string | null;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    oninput?: FormEventHandler<HTMLInputElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} checked
-   * @property {string} name
-   * @property {string} value
-   * @property {string|null} [href]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     checked,
     name,
     value,
     href = null,
-    children
-  } = $props();
+    children,
+    onclick,
+    oninput,
+  }: MenuRadioItemProps = $props();
 </script>
 
 <MenuLink {href}>
-  <input {checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')} type="radio" {value}>
+  <input {checked} {name} {onclick} {oninput} type="radio" {value}>
   {@render children?.()}
 </MenuLink>
 

From dff77391b0bd26dcc59de8a575815fcfd449e7c1 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 01:14:44 +0400
Subject: [PATCH 09/14] Making sure radio input is clickable without following
 the link

---
 src/components/ui/menu/MenuRadioItem.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
index ba8860e..bb59d20 100644
--- a/src/components/ui/menu/MenuRadioItem.svelte
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -22,10 +22,15 @@
     onclick,
     oninput,
   }: MenuRadioItemProps = $props();
+
+  function stopPropagationAndPassCallback(originalEvent: MouseEvent) {
+    originalEvent.stopPropagation();
+    onclick?.(originalEvent as MouseEvent & { currentTarget: HTMLInputElement });
+  }
 </script>
 
 <MenuLink {href}>
-  <input {checked} {name} {onclick} {oninput} type="radio" {value}>
+  <input {checked} {name} onclick={stopPropagationAndPassCallback} {oninput} type="radio" {value}>
   {@render children?.()}
 </MenuLink>
 

From 62857d44c2e72a8567162c7c81b8efaa572eb3c8 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 01:17:43 +0400
Subject: [PATCH 10/14] Making sure checkbox input is clickable without
 following the link

---
 src/components/ui/menu/MenuCheckboxItem.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/menu/MenuCheckboxItem.svelte b/src/components/ui/menu/MenuCheckboxItem.svelte
index 3bae07b..9591e8a 100644
--- a/src/components/ui/menu/MenuCheckboxItem.svelte
+++ b/src/components/ui/menu/MenuCheckboxItem.svelte
@@ -22,10 +22,15 @@
     onclick,
     oninput,
   }: MenuCheckboxItemProps = $props();
+
+  function stopPropagationAndPassCallback(originalEvent: MouseEvent) {
+    originalEvent.stopPropagation();
+    onclick?.(originalEvent as MouseEvent & { currentTarget: HTMLInputElement });
+  }
 </script>
 
 <MenuLink {href}>
-  <input bind:checked={checked} {name} {onclick} {oninput} type="checkbox" {value}>
+  <input bind:checked={checked} {name} onclick={stopPropagationAndPassCallback} {oninput} type="checkbox" {value}>
   {@render children?.()}
 </MenuLink>
 

From b31541ddf046595f0b1b92591f603dfa90daa48a Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 01:29:35 +0400
Subject: [PATCH 11/14] Fixed error being displayed incorrectly

---
 src/routes/features/groups/import/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte
index 58e7cbf..8caa9d2 100644
--- a/src/routes/features/groups/import/+page.svelte
+++ b/src/routes/features/groups/import/+page.svelte
@@ -32,9 +32,9 @@
     try {
       if (importedString.trim().startsWith('{')) {
         candidateGroup = groupTransporter.importFromJSON(importedString);
+      } else {
+        candidateGroup = groupTransporter.importFromCompressedJSON(importedString);
       }
-
-      candidateGroup = groupTransporter.importFromCompressedJSON(importedString);
     } catch (error) {
       errorMessage = error instanceof Error
         ? error.message

From 23638b50ae5df17331eb5c1b67d2e0d322f45aed Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 01:39:11 +0400
Subject: [PATCH 12/14] Refactored profiles related routes & components

---
 src/components/features/ProfileView.svelte    | 13 +++--
 src/routes/+page.svelte                       | 11 ++--
 src/routes/features/maintenance/+page.svelte  | 26 ++++------
 .../features/maintenance/[id]/+page.svelte    | 36 +++++++------
 .../maintenance/[id]/delete/+page.svelte      | 21 +++++---
 .../maintenance/[id]/edit/+page.svelte        | 50 ++++++++++---------
 .../maintenance/[id]/export/+page.svelte      | 37 +++++++-------
 .../features/maintenance/import/+page.svelte  | 26 ++++------
 8 files changed, 112 insertions(+), 108 deletions(-)

diff --git a/src/components/features/ProfileView.svelte b/src/components/features/ProfileView.svelte
index 20f95a7..138e8a9 100644
--- a/src/components/features/ProfileView.svelte
+++ b/src/components/features/ProfileView.svelte
@@ -1,12 +1,11 @@
-<script>
+<script lang="ts">
+  import type MaintenanceProfile from "$entities/MaintenanceProfile";
 
-  /**
-   * @typedef {Object} Props
-   * @property {import('$entities/MaintenanceProfile').default} profile
-   */
+  interface ProfileViewProps {
+    profile: MaintenanceProfile;
+  }
 
-  /** @type {Props} */
-  let { profile } = $props();
+  let { profile }: ProfileViewProps = $props();
 
   const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
 </script>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de69206..ac92655 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,13 @@
-<script>
+<script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-  /** @type {import('$entities/MaintenanceProfile').default|undefined} */
-  let activeProfile = $derived($maintenanceProfiles.find(profile => profile.id === $activeProfileStore));
-
+  let activeProfile = $derived<MaintenanceProfile | null>(
+    $maintenanceProfiles.find(profile => profile.id === $activeProfileStore) || null
+  );
 
   function turnOffActiveProfile() {
     $activeProfileStore = null;
@@ -15,7 +16,7 @@
 
 <Menu>
   {#if activeProfile}
-    <MenuCheckboxItem checked on:input={turnOffActiveProfile} href="/features/maintenance/{activeProfile.id}">
+    <MenuCheckboxItem checked oninput={turnOffActiveProfile} href="/features/maintenance/{activeProfile.id}">
       Active Profile: {activeProfile.settings.name}
     </MenuCheckboxItem>
     <hr>
diff --git a/src/routes/features/maintenance/+page.svelte b/src/routes/features/maintenance/+page.svelte
index 4807011..32fa0cc 100644
--- a/src/routes/features/maintenance/+page.svelte
+++ b/src/routes/features/maintenance/+page.svelte
@@ -1,25 +1,19 @@
-<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 MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
   import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-  /** @type {import('$entities/MaintenanceProfile').default[]} */
-  let profiles = $state([]);
-
-  run(() => {
-    profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
-  });
+  let profiles = $derived<MaintenanceProfile[]>(
+    $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name))
+  );
 
   function resetActiveProfile() {
     $activeProfileStore = null;
   }
 
-  /**
-   * @param {Event} event
-   */
-  function enableSelectedProfile(event) {
+  function enableSelectedProfile(event: Event) {
     const target = event.target;
 
     if (target instanceof HTMLInputElement && target.checked) {
@@ -37,13 +31,13 @@
   {#each profiles as profile}
     <MenuRadioItem href="/features/maintenance/{profile.id}"
                    name="active-profile"
-                   value="{profile.id}"
-                   checked="{$activeProfileStore === profile.id}"
-                   on:input={enableSelectedProfile}>
+                   value={profile.id}
+                   checked={$activeProfileStore === profile.id}
+                   oninput={enableSelectedProfile}>
       {profile.settings.name}
     </MenuRadioItem>
   {/each}
   <hr>
-  <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
+  <MenuItem href="#" onclick={resetActiveProfile}>Reset Active Profile</MenuItem>
   <MenuItem href="/features/maintenance/import">Import Profile</MenuItem>
 </Menu>
diff --git a/src/routes/features/maintenance/[id]/+page.svelte b/src/routes/features/maintenance/[id]/+page.svelte
index 988c4a2..941a7ad 100644
--- a/src/routes/features/maintenance/[id]/+page.svelte
+++ b/src/routes/features/maintenance/[id]/+page.svelte
@@ -1,35 +1,39 @@
-<script>
+<script lang="ts">
   import { run } from 'svelte/legacy';
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import { goto } from "$app/navigation";
   import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import ProfileView from "$components/features/ProfileView.svelte";
   import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { onMount } from "svelte";
 
-  const profileId = $page.params.id;
-  /** @type {import('$entities/MaintenanceProfile').default|null} */
-  let profile = $state(null);
+  let profileId = $derived(page.params.id);
+  let profile = $derived<MaintenanceProfile|null>(
+    $maintenanceProfiles.find(profile => profile.id === profileId) || null
+  );
 
-  if (profileId === 'new') {
-    goto('/features/maintenance/new/edit');
-  }
+  $effect(() => {
+    if (profileId === 'new') {
+      goto('/features/maintenance/new/edit');
+      return;
+    }
 
-  run(() => {
-    const resolvedProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
-
-    if (resolvedProfile) {
-      profile = resolvedProfile;
-    } else {
+    if (!profile) {
       console.warn(`Profile ${profileId} not found.`);
       goto('/features/maintenance');
     }
   });
 
-  let isActiveProfile = $state($activeProfileStore === profileId);
+  let isActiveProfile = $state(false);
 
-  run(() => {
+  $effect.pre(() => {
+    isActiveProfile = $activeProfileStore === profileId;
+  });
+
+  $effect(() => {
     if (isActiveProfile && $activeProfileStore !== profileId) {
       $activeProfileStore = profileId;
     }
diff --git a/src/routes/features/maintenance/[id]/delete/+page.svelte b/src/routes/features/maintenance/[id]/delete/+page.svelte
index c636659..1d46850 100644
--- a/src/routes/features/maintenance/[id]/delete/+page.svelte
+++ b/src/routes/features/maintenance/[id]/delete/+page.svelte
@@ -1,16 +1,21 @@
-<script>
+<script lang="ts">
   import { goto } from "$app/navigation";
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-  const profileId = $page.params.id;
-  const targetProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
+  const profileId = $derived(page.params.id);
+  const targetProfile = $derived<MaintenanceProfile | null>(
+    $maintenanceProfiles.find(profile => profile.id === profileId) || null
+  );
 
-  if (!targetProfile) {
-    void goto('/features/maintenance');
-  }
+  $effect(() => {
+    if (!targetProfile) {
+      goto('/features/maintenance');
+    }
+  });
 
   async function deleteProfile() {
     if (!targetProfile) {
@@ -33,7 +38,7 @@
   </p>
   <Menu>
     <hr>
-    <MenuItem on:click={deleteProfile}>Yes</MenuItem>
+    <MenuItem onclick={deleteProfile}>Yes</MenuItem>
     <MenuItem href="/features/maintenance/{profileId}">No</MenuItem>
   </Menu>
 {:else}
diff --git a/src/routes/features/maintenance/[id]/edit/+page.svelte b/src/routes/features/maintenance/[id]/edit/+page.svelte
index a018e93..2ef4e15 100644
--- a/src/routes/features/maintenance/[id]/edit/+page.svelte
+++ b/src/routes/features/maintenance/[id]/edit/+page.svelte
@@ -1,38 +1,42 @@
-<script>
+<script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import TagsEditor from "$components/tags/TagsEditor.svelte";
   import FormControl from "$components/ui/forms/FormControl.svelte";
   import TextField from "$components/ui/forms/TextField.svelte";
   import FormContainer from "$components/ui/forms/FormContainer.svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import { goto } from "$app/navigation";
   import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-  /** @type {string} */
-  let profileId = $page.params.id;
-  /** @type {MaintenanceProfile|null} */
-  let targetProfile = null;
 
-  /** @type {string} */
-  let profileName = $state('');
-  /** @type {string[]} */
-  let tagsList = $state([]);
+  let profileId = $derived(page.params.id);
 
-  if (profileId === 'new') {
-    targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
-  } else {
-    const maybeExistingProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
-
-    if (maybeExistingProfile) {
-      targetProfile = maybeExistingProfile;
-      profileName = targetProfile.settings.name;
-      tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
-    } else {
-      goto('/features/maintenance');
+  let targetProfile = $derived.by<MaintenanceProfile | null>(() => {
+    if (profileId === 'new') {
+      return new MaintenanceProfile(crypto.randomUUID(), {});
     }
-  }
+
+    return $maintenanceProfiles.find(profile => profile.id === profileId) || null;
+  });
+
+  let profileName = $state('');
+  let tagsList = $state<string[]>([]);
+
+  $effect(() => {
+    if (profileId === 'new') {
+      return;
+    }
+
+    if (!targetProfile) {
+      goto('/features/maintenance');
+      return;
+    }
+
+    profileName = targetProfile.settings.name;
+    tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
+  });
 
   async function saveProfile() {
     if (!targetProfile) {
@@ -65,5 +69,5 @@
 </FormContainer>
 <Menu>
   <hr>
-  <MenuItem href="#" on:click={saveProfile}>Save Profile</MenuItem>
+  <MenuItem href="#" onclick={saveProfile}>Save Profile</MenuItem>
 </Menu>
diff --git a/src/routes/features/maintenance/[id]/export/+page.svelte b/src/routes/features/maintenance/[id]/export/+page.svelte
index f2f3d7e..4ccc5a6 100644
--- a/src/routes/features/maintenance/[id]/export/+page.svelte
+++ b/src/routes/features/maintenance/[id]/export/+page.svelte
@@ -1,5 +1,5 @@
-<script>
-  import { page } from "$app/stores";
+<script lang="ts">
+  import { page } from "$app/state";
   import { goto } from "$app/navigation";
   import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import Menu from "$components/ui/menu/Menu.svelte";
@@ -9,23 +9,24 @@
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
 
-  const profileId = $page.params.id;
-  const profile = $maintenanceProfiles.find(profile => profile.id === profileId);
+  let isCompressedProfileShown = $state(true);
+
+  const profileId = $derived(page.params.id);
+  const profile = $derived<MaintenanceProfile | null>(
+    $maintenanceProfiles.find(profile => profile.id === profileId) || null
+  );
+
+  $effect(() => {
+    if (!profile) {
+      goto('/features/maintenance/');
+    }
+  });
 
   const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
-  /** @type {string} */
-  let exportedProfile = $state('');
-  /** @type {string} */
-  let compressedProfile = $state('');
 
-  if (!profile) {
-    goto('/features/maintenance/');
-  } else {
-    exportedProfile = profilesTransporter.exportToJSON(profile);
-    compressedProfile = profilesTransporter.exportToCompressedJSON(profile);
-  }
-
-  let isCompressedProfileShown = $state(true);
+  let rawExportedProfile = $derived(profile ? profilesTransporter.exportToJSON(profile) : '');
+  let compressedExportedProfile = $derived(profile ? profilesTransporter.exportToCompressedJSON(profile) : '');
+  let selectedExportString = $derived(isCompressedProfileShown ? compressedExportedProfile : rawExportedProfile);
 </script>
 
 <Menu>
@@ -36,12 +37,12 @@
 </Menu>
 <FormContainer>
   <FormControl label="Export string">
-    <textarea readonly rows="6">{isCompressedProfileShown ? compressedProfile : exportedProfile}</textarea>
+    <textarea readonly rows="6">{selectedExportString}</textarea>
   </FormControl>
 </FormContainer>
 <Menu>
   <hr>
-  <MenuItem on:click={() => isCompressedProfileShown = !isCompressedProfileShown}>
+  <MenuItem onclick={() => isCompressedProfileShown = !isCompressedProfileShown}>
     Switch Format:
     {#if isCompressedProfileShown}
       Base64-Encoded
diff --git a/src/routes/features/maintenance/import/+page.svelte b/src/routes/features/maintenance/import/+page.svelte
index d77612b..b5a1ec0 100644
--- a/src/routes/features/maintenance/import/+page.svelte
+++ b/src/routes/features/maintenance/import/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import FormContainer from "$components/ui/forms/FormContainer.svelte";
@@ -11,15 +11,11 @@
 
   const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
-  /** @type {string} */
   let importedString = $state('');
-  /** @type {string} */
   let errorMessage = $state('');
 
-  /** @type {MaintenanceProfile|null} */
-  let candidateProfile = $state(null);
-  /** @type {MaintenanceProfile|null} */
-  let existingProfile = $state(null);
+  let candidateProfile = $state<MaintenanceProfile | null>(null);
+  let existingProfile = $state<MaintenanceProfile | null>(null);
 
   function tryImportingProfile() {
     candidateProfile = null;
@@ -36,9 +32,9 @@
     try {
       if (importedString.trim().startsWith('{')) {
         candidateProfile = profilesTransporter.importFromJSON(importedString);
+      } else {
+        candidateProfile = profilesTransporter.importFromCompressedJSON(importedString)
       }
-
-      candidateProfile = profilesTransporter.importFromCompressedJSON(importedString);
     } catch (error) {
       errorMessage = error instanceof Error
         ? error.message
@@ -91,7 +87,7 @@
   </FormContainer>
   <Menu>
     <hr>
-    <MenuItem on:click={tryImportingProfile}>Import</MenuItem>
+    <MenuItem onclick={tryImportingProfile}>Import</MenuItem>
   </Menu>
 {:else}
   {#if existingProfile}
@@ -99,16 +95,16 @@
       This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
     </p>
   {/if}
-  <ProfileView profile="{candidateProfile}"></ProfileView>
+  <ProfileView profile={candidateProfile}></ProfileView>
   <Menu>
     <hr>
     {#if existingProfile}
-      <MenuItem on:click={saveProfile}>Replace Existing Profile</MenuItem>
-      <MenuItem on:click={cloneAndSaveProfile}>Save as New Profile</MenuItem>
+      <MenuItem onclick={saveProfile}>Replace Existing Profile</MenuItem>
+      <MenuItem onclick={cloneAndSaveProfile}>Save as New Profile</MenuItem>
     {:else}
-      <MenuItem on:click={saveProfile}>Import New Profile</MenuItem>
+      <MenuItem onclick={saveProfile}>Import New Profile</MenuItem>
     {/if}
-    <MenuItem on:click={() => candidateProfile = null}>Cancel</MenuItem>
+    <MenuItem onclick={() => candidateProfile = null}>Cancel</MenuItem>
   </Menu>
 {/if}
 

From 12e9054f59e707872c0f6764fe20c99433f87726 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 02:00:48 +0400
Subject: [PATCH 13/14] Refactoring form components

---
 src/components/ui/forms/CheckboxField.svelte  | 22 +++++-----
 src/components/ui/forms/FormContainer.svelte  |  8 ++--
 src/components/ui/forms/FormControl.svelte    | 19 ++++----
 src/components/ui/forms/SelectField.svelte    | 43 ++++++++++---------
 .../ui/forms/TagCategorySelectField.svelte    | 34 +++++++--------
 src/components/ui/forms/TextField.svelte      | 22 +++++-----
 6 files changed, 76 insertions(+), 72 deletions(-)

diff --git a/src/components/ui/forms/CheckboxField.svelte b/src/components/ui/forms/CheckboxField.svelte
index 6324a00..00661eb 100644
--- a/src/components/ui/forms/CheckboxField.svelte
+++ b/src/components/ui/forms/CheckboxField.svelte
@@ -1,15 +1,17 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
+  interface CheckboxFieldProps {
+    name?: string;
+    checked: boolean;
+    children?: Snippet;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [name]
-   * @property {boolean} checked
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let { name = undefined, checked = $bindable(), children } = $props();
+  let {
+    name = undefined,
+    checked = $bindable(),
+    children
+  }: CheckboxFieldProps = $props();
 </script>
 
 <input bind:checked={checked} {name} type="checkbox">
diff --git a/src/components/ui/forms/FormContainer.svelte b/src/components/ui/forms/FormContainer.svelte
index 6b35146..01950b8 100644
--- a/src/components/ui/forms/FormContainer.svelte
+++ b/src/components/ui/forms/FormContainer.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-  interface Props {
-    children?: import('svelte').Snippet;
+  import type { Snippet } from "svelte";
+
+  interface FormContainerProps {
+    children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children }: FormContainerProps = $props();
 </script>
 
 <form>
diff --git a/src/components/ui/forms/FormControl.svelte b/src/components/ui/forms/FormControl.svelte
index eb432f8..5be6e92 100644
--- a/src/components/ui/forms/FormControl.svelte
+++ b/src/components/ui/forms/FormControl.svelte
@@ -1,14 +1,15 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
+  interface FormControlProps {
+    label?: string;
+    children?: Snippet;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [label]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let { label = undefined, children } = $props();
+  let {
+    label = undefined,
+    children
+  }: FormControlProps = $props();
 </script>
 
 <label class="control">
diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
index dcfb7c0..b258179 100644
--- a/src/components/ui/forms/SelectField.svelte
+++ b/src/components/ui/forms/SelectField.svelte
@@ -1,34 +1,35 @@
-<script>
+<script lang="ts">
+  type SelectFieldOptionsObject = Record<string, string>;
 
+  interface SelectFieldProps {
+    options?: string[] | SelectFieldOptionsObject;
+    name?: string;
+    id?: string;
+    value?: string;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string[]|Record<string, string>} [options]
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [id]
-   * @property {string|undefined} [value]
-   */
-
-  /** @type {Props} */
   let {
     options = [],
     name = undefined,
     id = undefined,
     value = $bindable(undefined)
-  } = $props();
+  }: SelectFieldProps = $props();
 
-  /** @type {Record<string, string>} */
-  const optionPairs = $state({});
+  const optionPairs = $derived.by<SelectFieldOptionsObject>(() => {
+    const resultPairs: SelectFieldOptionsObject = {};
 
-  if (Array.isArray(options)) {
-    for (let option of options) {
-      optionPairs[option] = option;
+    if (Array.isArray(options)) {
+      for (let optionName of options) {
+        resultPairs[optionName] = optionName;
+      }
+    } else if (options && typeof options === 'object') {
+      Object.keys(options).forEach(optionKey => {
+        resultPairs[optionKey] = options[optionKey];
+      })
     }
-  } else if (options && typeof options === 'object') {
-    Object.keys(options).forEach((key) => {
-      optionPairs[key] = options[key];
-    })
-  }
+
+    return resultPairs;
+  });
 </script>
 
 <select bind:value={value} {id} {name}>
diff --git a/src/components/ui/forms/TagCategorySelectField.svelte b/src/components/ui/forms/TagCategorySelectField.svelte
index 86088be..956bdc9 100644
--- a/src/components/ui/forms/TagCategorySelectField.svelte
+++ b/src/components/ui/forms/TagCategorySelectField.svelte
@@ -1,28 +1,26 @@
-<script>
+<script lang="ts">
   import SelectField from "$components/ui/forms/SelectField.svelte";
   import { categories } from "$lib/booru/tag-categories";
 
+  interface TagCategorySelectFieldProps {
+    value?: string;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string} [value]
-   */
+  let {
+    value = $bindable('')
+  }: TagCategorySelectFieldProps = $props();
 
-  /** @type {Props} */
-  let { value = $bindable('') } = $props();
+  let tagCategoriesOptions = $derived.by<Record<string, string>>(() => {
+    return categories.reduce<Record<string, string>>((options, category) => {
+      options[category] = category
+        .replace('-', ' ')
+        .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
 
-  /** @type {Record<string, string>} */
-  let tagCategoriesOptions = $state({
-    '': 'Default'
+      return options;
+    }, {
+      '': 'Default'
+    })
   });
-
-  tagCategoriesOptions = categories.reduce((options, category) => {
-    options[category] = category
-      .replace('-', ' ')
-      .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
-
-    return options;
-  }, tagCategoriesOptions);
 </script>
 
 <SelectField bind:value={value} name="tag_color" options={tagCategoriesOptions}/>
diff --git a/src/components/ui/forms/TextField.svelte b/src/components/ui/forms/TextField.svelte
index 4e10256..4264132 100644
--- a/src/components/ui/forms/TextField.svelte
+++ b/src/components/ui/forms/TextField.svelte
@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
+  interface TextFieldProps {
+    name?: string;
+    placeholder?: string;
+    value?: string;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [placeholder]
-   * @property {string} [value]
-   */
-
-  /** @type {Props} */
-  let { name = undefined, placeholder = undefined, value = $bindable('') } = $props();
+  let {
+    name = undefined,
+    placeholder = undefined,
+    value = $bindable('')
+  }: TextFieldProps = $props();
 </script>
 
 <input bind:value={value} {name} {placeholder} type="text">

From c859c5b038f7679cb95268321eb2b92f4e9c091f Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 02:09:41 +0400
Subject: [PATCH 14/14] Refactored tag editor element

---
 src/components/tags/TagsEditor.svelte | 46 +++++++++++++--------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/tags/TagsEditor.svelte b/src/components/tags/TagsEditor.svelte
index 711ff77..83a433f 100644
--- a/src/components/tags/TagsEditor.svelte
+++ b/src/components/tags/TagsEditor.svelte
@@ -1,31 +1,29 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
+  import type { EventHandler } from "svelte/elements";
 
+  interface TagEditorProps {
+    // List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
+    tags?: string[];
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string[]} [tags] - List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
-   */
+  let {
+    tags = $bindable([])
+  }: TagEditorProps = $props();
 
-  /** @type {Props} */
-  let { tags = $bindable([]) } = $props();
+  let uniqueTags = $state<Set<string>>(new Set());
 
-  /** @type {Set<string>} */
-  let uniqueTags = $state(new Set());
-
-  run(() => {
+  $effect.pre(() => {
     uniqueTags = new Set(tags);
   });
 
-  /** @type {string} */
-  let addedTagName = $state('');
+  let addedTagName = $state<string>('');
 
   /**
    * Create a callback function to pass into both mouse & keyboard events for tag removal.
-   * @param {string} tagName
-   * @return {function(Event)} Callback to pass as event listener.
+   * @param tagName Name to remove when clicked.
+   * @return Callback to pass as event listener.
    */
-  function createTagRemoveHandler(tagName) {
+  function createTagRemoveHandler(tagName: string): EventHandler<Event, HTMLElement> {
     return event => {
       if (event.type === 'click') {
         removeTag(tagName);
@@ -49,17 +47,19 @@
   }
 
   /**
-   * @param {string} tagName
+   * Remove the tag from the set.
+   * @param tagName Name of the tag to remove.
    */
-  function removeTag(tagName) {
+  function removeTag(tagName: string) {
     uniqueTags.delete(tagName);
     tags = Array.from(uniqueTags);
   }
 
   /**
-   * @param {string} tagName
+   * Add the tag to the set.
+   * @param tagName Name of the tag to add.
    */
-  function addTag(tagName) {
+  function addTag(tagName: string) {
     uniqueTags.add(tagName);
     tags = Array.from(uniqueTags);
   }
@@ -70,9 +70,9 @@
    * Additional note: For some reason, mobile Chrome breaks the usual behaviour inside extension. `code` is becoming
    * empty, while usually it should contain proper button code.
    *
-   * @param {KeyboardEvent} event
+   * @param event
    */
-  function handleKeyPresses(event) {
+  function handleKeyPresses(event: KeyboardEvent) {
     if ((event.code === 'Enter' || event.key === 'Enter') && addedTagName.length) {
       addTag(addedTagName)
       addedTagName = '';