From eae5016daa8a72b6440e81471e43acff3a93dca4 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 7 Jul 2024 02:43:26 +0400
Subject: [PATCH 1/3] Support links without URLs provided

---
 src/components/ui/menu/Menu.svelte     |  4 ++--
 src/components/ui/menu/MenuLink.svelte | 20 +++++++++-----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index f0f481d..db65581 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -9,11 +9,11 @@
         display: flex;
         flex-direction: column;
 
-        & > :global(a) {
+        & > :global(.menu-link) {
             padding: 5px 24px;
         }
 
-        :global(a) {
+        :global(.menu-link) {
             color: colors.$text;
 
             &:hover {
diff --git a/src/components/ui/menu/MenuLink.svelte b/src/components/ui/menu/MenuLink.svelte
index cd120f7..ca3ac8b 100644
--- a/src/components/ui/menu/MenuLink.svelte
+++ b/src/components/ui/menu/MenuLink.svelte
@@ -1,8 +1,8 @@
 <script>
     /**
-     * @type {string}
+     * @type {string|null}
      */
-    export let href;
+    export let href = null;
 
     /**
      * @type {"tag"|"paint-brush"|"arrow-left"|"info-circle"|"wrench"|"globe"|"plus"|null}
@@ -15,19 +15,17 @@
     export let target = undefined;
 </script>
 
-{#if href}
-    <a {href} {target} on:click>
-        {#if icon}
-            <i class="icon icon-{icon}"></i>
-        {/if}
-        <slot></slot>
-    </a>
-{/if}
+<svelte:element this="{href ? 'a': 'span'}" class="menu-link" {href} {target} on:click role="link" tabindex="0">
+    {#if icon}
+        <i class="icon icon-{icon}"></i>
+    {/if}
+    <slot></slot>
+</svelte:element>
 
 <style lang="scss">
     @use '../../../styles/colors';
 
-    a {
+    .menu-link {
         display: flex;
         align-items: center;
 

From dc27f33231dad0191c26ec71c20a180fbd80f56b Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 7 Jul 2024 02:47:52 +0400
Subject: [PATCH 2/3] Renaming all instances of `MenuLink` to `MenuItem`

---
 src/components/ui/menu/Menu.svelte                   |  4 ++--
 .../ui/menu/{MenuLink.svelte => MenuItem.svelte}     |  4 ++--
 src/routes/+page.svelte                              |  6 +++---
 src/routes/about/+page.svelte                        | 12 ++++++------
 src/routes/settings/+page.svelte                     |  6 +++---
 src/routes/settings/maintenance/+page.svelte         | 12 ++++++------
 src/routes/settings/maintenance/[id]/+page.svelte    | 12 +++++-------
 .../settings/maintenance/[id]/edit/+page.svelte      | 11 +++++------
 8 files changed, 32 insertions(+), 35 deletions(-)
 rename src/components/ui/menu/{MenuLink.svelte => MenuItem.svelte} (90%)

diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index db65581..3a0ce44 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -9,11 +9,11 @@
         display: flex;
         flex-direction: column;
 
-        & > :global(.menu-link) {
+        & > :global(.menu-item) {
             padding: 5px 24px;
         }
 
-        :global(.menu-link) {
+        :global(.menu-item) {
             color: colors.$text;
 
             &:hover {
diff --git a/src/components/ui/menu/MenuLink.svelte b/src/components/ui/menu/MenuItem.svelte
similarity index 90%
rename from src/components/ui/menu/MenuLink.svelte
rename to src/components/ui/menu/MenuItem.svelte
index ca3ac8b..9bb00a4 100644
--- a/src/components/ui/menu/MenuLink.svelte
+++ b/src/components/ui/menu/MenuItem.svelte
@@ -15,7 +15,7 @@
     export let target = undefined;
 </script>
 
-<svelte:element this="{href ? 'a': 'span'}" class="menu-link" {href} {target} on:click role="link" tabindex="0">
+<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} on:click role="link" tabindex="0">
     {#if icon}
         <i class="icon icon-{icon}"></i>
     {/if}
@@ -25,7 +25,7 @@
 <style lang="scss">
     @use '../../../styles/colors';
 
-    .menu-link {
+    .menu-item {
         display: flex;
         align-items: center;
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5d512a2..3b14018 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuLink href="/settings/maintenance">Tagging Profiles</MenuLink>
+    <MenuItem href="/settings/maintenance">Tagging Profiles</MenuItem>
     <hr>
-    <MenuLink href="/about">About</MenuLink>
+    <MenuItem href="/about">About</MenuItem>
 </Menu>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 49a4c34..3054d62 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,10 +1,10 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuLink icon="arrow-left" href="/">Back</MenuLink>
+    <MenuItem icon="arrow-left" href="/">Back</MenuItem>
     <hr>
 </Menu>
 <h1>
@@ -16,10 +16,10 @@
 </p>
 <Menu>
     <hr>
-    <MenuLink icon="globe" href="https://furbooru.org" target="_blank">
+    <MenuItem icon="globe" href="https://furbooru.org" target="_blank">
         Visit Furbooru
-    </MenuLink>
-    <MenuLink icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
+    </MenuItem>
+    <MenuItem icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
         GitHub Repo
-    </MenuLink>
+    </MenuItem>
 </Menu>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 7a7c07e..96fc5e8 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,10 +1,10 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuLink href="/">Back</MenuLink>
+    <MenuItem href="/">Back</MenuItem>
     <hr>
-    <MenuLink href="/settings/maintenance">Tagging Profiles</MenuLink>
+    <MenuItem href="/settings/maintenance">Tagging Profiles</MenuItem>
 </Menu>
diff --git a/src/routes/settings/maintenance/+page.svelte b/src/routes/settings/maintenance/+page.svelte
index 6a606c0..340e0b4 100644
--- a/src/routes/settings/maintenance/+page.svelte
+++ b/src/routes/settings/maintenance/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
 
     /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
@@ -14,17 +14,17 @@
 </script>
 
 <Menu>
-    <MenuLink icon="arrow-left" href="/">Back</MenuLink>
-    <MenuLink icon="plus" href="/settings/maintenance/new/edit">Create New</MenuLink>
+    <MenuItem icon="arrow-left" href="/">Back</MenuItem>
+    <MenuItem icon="plus" href="/settings/maintenance/new/edit">Create New</MenuItem>
     {#if profiles.length}
         <hr>
     {/if}
     {#each profiles as profile}
-        <MenuLink href="/settings/maintenance/{profile.id}"
+        <MenuItem href="/settings/maintenance/{profile.id}"
                   icon="{$activeProfileStore === profile.id ? 'tag' : null}">
             {profile.settings.name}
-        </MenuLink>
+        </MenuItem>
     {/each}
     <hr>
-    <MenuLink href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuLink>
+    <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
 </Menu>
diff --git a/src/routes/settings/maintenance/[id]/+page.svelte b/src/routes/settings/maintenance/[id]/+page.svelte
index 0044d54..b4adccb 100644
--- a/src/routes/settings/maintenance/[id]/+page.svelte
+++ b/src/routes/settings/maintenance/[id]/+page.svelte
@@ -1,10 +1,8 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import {page} from "$app/stores";
     import {goto} from "$app/navigation";
-
-    import {onDestroy} from "svelte";
     import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
 
     const profileId = $page.params.id;
@@ -39,7 +37,7 @@
 </script>
 
 <Menu>
-    <MenuLink href="/settings/maintenance" icon="arrow-left">Back</MenuLink>
+    <MenuItem href="/settings/maintenance" icon="arrow-left">Back</MenuItem>
     <hr>
 </Menu>
 {#if profile}
@@ -58,14 +56,14 @@
 {/if}
 <Menu>
     <hr>
-    <MenuLink icon="wrench" href="/settings/maintenance/{profileId}/edit">Edit Profile</MenuLink>
-    <MenuLink icon="tag" href="#" on:click={activateProfile}>
+    <MenuItem icon="wrench" href="/settings/maintenance/{profileId}/edit">Edit Profile</MenuItem>
+    <MenuItem icon="tag" href="#" on:click={activateProfile}>
         {#if isActiveProfile}
             <span>Profile is Active</span>
         {:else}
             <span>Activate Profile</span>
         {/if}
-    </MenuLink>
+    </MenuItem>
 </Menu>
 
 <style lang="scss">
diff --git a/src/routes/settings/maintenance/[id]/edit/+page.svelte b/src/routes/settings/maintenance/[id]/edit/+page.svelte
index 787cfd0..2214cb3 100644
--- a/src/routes/settings/maintenance/[id]/edit/+page.svelte
+++ b/src/routes/settings/maintenance/[id]/edit/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import TagsEditor from "$components/web-components/TagsEditor.svelte";
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import TextField from "$components/ui/forms/TextField.svelte";
@@ -9,7 +9,6 @@
     import {goto} from "$app/navigation";
     import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
     import MaintenanceProfile from "$entities/MaintenanceProfile.js";
-    import {onDestroy} from "svelte";
 
     /** @type {string} */
     let profileId = $page.params.id;
@@ -60,9 +59,9 @@
 </script>
 
 <Menu>
-    <MenuLink icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
+    <MenuItem icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
         Back
-    </MenuLink>
+    </MenuItem>
     <hr>
 </Menu>
 <FormContainer>
@@ -75,8 +74,8 @@
 </FormContainer>
 <Menu>
     <hr>
-    <MenuLink href="#" on:click={saveProfile}>Save Profile</MenuLink>
+    <MenuItem href="#" on:click={saveProfile}>Save Profile</MenuItem>
     {#if profileId !== 'new'}
-        <MenuLink href="#" on:click={deleteProfile}>Delete Profile</MenuLink>
+        <MenuItem href="#" on:click={deleteProfile}>Delete Profile</MenuItem>
     {/if}
 </Menu>

From 7ee1a72302c00d113d9b8e31bcee6f3441534b0e Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 7 Jul 2024 03:10:50 +0400
Subject: [PATCH 3/3] Added radio item, replaced menu item on profiles listing
 screen

---
 src/components/ui/menu/MenuRadioItem.svelte  | 36 ++++++++++++++++++++
 src/routes/settings/maintenance/+page.svelte | 21 ++++++++++--
 2 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/menu/MenuRadioItem.svelte

diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
new file mode 100644
index 0000000..54bb9a4
--- /dev/null
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -0,0 +1,36 @@
+<script>
+    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}
+     */
+    export let href = null;
+</script>
+
+<MenuLink {href}>
+    <input type="radio" {name} {value} {checked} on:input on:click|stopPropagation>
+    <slot></slot>
+</MenuLink>
+
+<style lang="scss">
+    :global(.menu-item) input {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+    }
+</style>
diff --git a/src/routes/settings/maintenance/+page.svelte b/src/routes/settings/maintenance/+page.svelte
index 340e0b4..e2f2cb5 100644
--- a/src/routes/settings/maintenance/+page.svelte
+++ b/src/routes/settings/maintenance/+page.svelte
@@ -1,6 +1,7 @@
 <script>
     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, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
 
     /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
@@ -11,6 +12,17 @@
     function resetActiveProfile() {
         $activeProfileStore = null;
     }
+
+    /**
+     * @param {Event} event
+     */
+    function enableSelectedProfile(event) {
+        const target = event.target;
+
+        if (target instanceof HTMLInputElement && target.checked) {
+            activeProfileStore.set(target.value);
+        }
+    }
 </script>
 
 <Menu>
@@ -20,10 +32,13 @@
         <hr>
     {/if}
     {#each profiles as profile}
-        <MenuItem href="/settings/maintenance/{profile.id}"
-                  icon="{$activeProfileStore === profile.id ? 'tag' : null}">
+        <MenuRadioItem href="/settings/maintenance/{profile.id}"
+                       name="active-profile"
+                       value="{profile.id}"
+                       checked="{$activeProfileStore === profile.id}"
+                       on:input={enableSelectedProfile}>
             {profile.settings.name}
-        </MenuItem>
+        </MenuRadioItem>
     {/each}
     <hr>
     <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>