Added radio item, replaced menu item on profiles listing screen

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>