web/TransferSettings: friendlier error messages

web/i18n/en/error.json

@@ -0,0 +1,5 @@
+{
+    "import.no_data": "there's nothing to load from the file. are you sure it's the right one?",
+    "import.invalid": "your file doesn't have valid cobalt settings to import. are you sure it's the right one?",
+    "import.unknown": "couldn't load data from the file. it may be corrupted or of wrong format. here's the error i got:\n{{ value }}"
+}

web/i18n/en/settings.json

@@ -103,7 +103,5 @@
     "advanced.data": "settings data",
     "advanced.reset": "reset all settings",
     "advanced.import": "import",
-    "advanced.import.no_data": "failed loading setting data from file",
-    "advanced.import.invalid": "file does not contain valid cobalt settings",
     "advanced.export": "export"
 }

web/src/components/settings/TransferSettings.svelte

@@ -4,7 +4,7 @@
     import {
         storedSettings,
         updateSetting,
-        loadFromString
+        loadFromString,
     } from "$lib/state/settings";
     import { validateSettings } from "$lib/settings/validate";
 
@@ -16,12 +16,11 @@
     const updateSettings = (reader: FileReader) => {
         try {
             const data = reader.result?.toString();
-            if (!data)
+            if (!data) throw $t("error.import.no_data");
-                throw $t('settings.advanced.import.no_data');
 
             const loadedSettings = loadFromString(data);
             if (!validateSettings(loadedSettings))
-                throw $t('settings.advanced.import.invalid');
+                throw $t("error.import.invalid");
 
             createDialog({
                 id: "import-confirm",
@@ -40,19 +39,19 @@
                         color: "red",
                         main: true,
                         timeout: 5000,
-                        action: () => updateSetting(loadFromString(data))
+                        action: () => updateSetting(loadFromString(data)),
                     },
                 ],
             });
         } catch (e) {
-            let message;
+            let message = $t("error.import.no_data");
 
-            if (e instanceof Error)
+            if (e instanceof Error) {
-                message = e.message;
+                console.error("settings import error:", e);
-            else if (typeof e === 'string')
+                message = $t("error.import.unknown", { value: e.message });
+            } else if (typeof e === "string") {
                 message = e;
-            else
+            }
-                message = $t('settings.advanced.import.no_data');
 
             createDialog({
                 id: "settings-import-error",
@@ -88,10 +87,9 @@
     };
 
     const exportSettings = () => {
-        const blob = new Blob(
+        const blob = new Blob([JSON.stringify($storedSettings, null, 2)], {
-            [ JSON.stringify($storedSettings, null, 2) ],
+            type: "application/json",
-            { type: "application/json" }
+        });
-        );
 
         const pseudolink = document.createElement("a");
         pseudolink.href = URL.createObjectURL(blob);
@@ -102,11 +100,13 @@
 
 <div class="button-row" id="settings-data-transfer">
     <ActionButton id="import-settings" click={importSettings}>
-        <IconFileImport /> {$t("settings.advanced.import")}
+        <IconFileImport />
+        {$t("settings.advanced.import")}
     </ActionButton>
     {#if $storedSettings.schemaVersion}
         <ActionButton id="export-settings" click={exportSettings}>
-            <IconFileExport /> {$t("settings.advanced.export")}
+            <IconFileExport />
+            {$t("settings.advanced.export")}
         </ActionButton>
     {/if}
 </div>