web/settings/advanced: improve settings management buttons

also removed duplicate localization strings

web/i18n/en/button.json

@@ -12,5 +12,6 @@
     "continue": "continue",
     "star": "star",
     "follow": "follow",
-    "save": "save"
+    "save": "save",
+    "export": "export"
 }

web/i18n/en/settings.json

@@ -110,9 +110,6 @@
     "advanced.debug.description": "gives you access to a page with various info that can be useful for debugging.",
 
     "advanced.data": "settings data",
-    "advanced.reset": "reset all settings",
-    "advanced.import": "import",
-    "advanced.export": "export",
 
     "processing.override": "default instance override",
     "processing.override.title": "use the instance-provided processing server",

web/src/components/settings/ManageSettings.svelte

@@ -9,6 +9,7 @@
     import { validateSettings } from "$lib/settings/validate";
 
     import ActionButton from "$components/buttons/ActionButton.svelte";
+    import ResetSettingsButton from "$components/settings/ResetSettingsButton.svelte";
 
     import IconFileExport from "@tabler/icons-svelte/IconFileExport.svelte";
     import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
@@ -102,14 +103,19 @@
 <div class="button-row" id="settings-data-transfer">
     <ActionButton id="import-settings" click={importSettings}>
         <IconFileImport />
-        {$t("settings.advanced.import")}
+        {$t("button.import")}
     </ActionButton>
+
     {#if $storedSettings.schemaVersion}
         <ActionButton id="export-settings" click={exportSettings}>
             <IconFileExport />
-            {$t("settings.advanced.export")}
+            {$t("button.export")}
         </ActionButton>
     {/if}
+
+    {#if $storedSettings.schemaVersion}
+        <ResetSettingsButton />
+    {/if}
 </div>
 
 <style>

web/src/components/settings/ResetSettingsButton.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
+    import { createDialog } from "$lib/dialogs";
     import { resetSettings } from "$lib/state/settings";
 
     import IconTrash from "@tabler/icons-svelte/IconTrash.svelte";
 
-    import { createDialog } from "$lib/dialogs";
-
     const resetDialog = () => {
         createDialog({
             id: "wipe-confirm",
@@ -33,7 +32,7 @@
 
 <button id="setting-button-reset" class="button" on:click={resetDialog}>
     <IconTrash />
-    {$t("settings.advanced.reset")}
+    {$t("button.reset")}
 </button>
 
 <style>

web/src/routes/settings/advanced/+page.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
-    import { storedSettings } from "$lib/state/settings";
-
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
-    import TransferSettings from "$components/settings/TransferSettings.svelte";
+    import ManageSettings from "$components/settings/ManageSettings.svelte";
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
-    import ResetSettingsButton from "$components/settings/ResetSettingsButton.svelte";
 </script>
 
 <SettingsCategory sectionId="debug" title={$t("settings.advanced.debug")}>
@@ -19,8 +16,5 @@
 </SettingsCategory>
 
 <SettingsCategory sectionId="data" title={$t("settings.advanced.data")}>
-    <TransferSettings />
-    {#if $storedSettings.schemaVersion}
-        <ResetSettingsButton />
-    {/if}
+    <ManageSettings />
 </SettingsCategory>