Implemented the importing procedure for tagging profiles

src/routes/settings/maintenance/+page.svelte

@@ -42,4 +42,5 @@
     {/each}
     <hr>
     <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
+    <MenuItem href="/settings/maintenance/import">Import Profile</MenuItem>
 </Menu>

src/routes/settings/maintenance/import/+page.svelte

@@ -0,0 +1,131 @@
+<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.js";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import ProfileView from "$components/maintenance/ProfileView.svelte";
+    import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
+    import {goto} from "$app/navigation";
+
+    /** @type {string} */
+    let importedString = '';
+    /** @type {string} */
+    let errorMessage = '';
+
+    /** @type {MaintenanceProfile|null} */
+    let candidateProfile = null;
+    /** @type {MaintenanceProfile|null} */
+    let existingProfile = null;
+
+    function tryImportingProfile() {
+        candidateProfile = null;
+        existingProfile = null;
+
+        errorMessage = '';
+        importedString = importedString.trim();
+
+        if (!importedString) {
+            errorMessage = 'Nothing to import.';
+            return;
+        }
+
+        try {
+            if (importedString.trim().startsWith('{')) {
+                candidateProfile = MaintenanceProfile.importFromJSON(importedString);
+            }
+
+            candidateProfile = MaintenanceProfile.importFromCompressedJSON(importedString);
+        } catch (error) {
+            errorMessage = error instanceof Error
+                    ? error.message
+                    : 'Unknown error';
+        }
+
+        if (candidateProfile) {
+            existingProfile = $maintenanceProfilesStore.find(profile => profile.id === candidateProfile?.id) ?? null;
+        }
+    }
+
+    function saveProfile() {
+        if (!candidateProfile) {
+            return;
+        }
+
+        candidateProfile.save().then(() => {
+            goto(`/settings/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(`/settings/maintenance`);
+        });
+    }
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/settings/maintenance">Back</MenuItem>
+    <hr>
+</Menu>
+{#if errorMessage}
+    <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>
+{: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}
+            <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>
+{/if}
+
+<style lang="scss">
+    @use '../../../../styles/colors';
+
+    .error, .warning {
+        padding: 5px 24px;
+        margin: {
+            left: -24px;
+            right: -24px;
+        }
+    }
+
+    .error {
+        background: colors.$error-background;
+    }
+
+    .warning {
+        background: colors.$warning-background;
+        margin-bottom: .5em;
+    }
+</style>