solved issue: error code removed and error page styled and close button added

ftl/core/importing.ftl

@@ -160,7 +160,7 @@ importing-cards-added =
         [one] { $count } card added.
        *[other] { $count } cards added.
     }
-importing-file-empty = The file you selected is empty.
+importing-file-empty = The selected file is empty. Please choose a valid file.
 importing-notes-added =
     { $count ->
         [one] { $count } new note imported.

ts/lib/components/ErrorPage.svelte

@@ -2,17 +2,42 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<script lang="ts">
+<script context="module" lang="ts">
-    export let error: Error;
+    declare function pycmd(cmd: string);
 </script>
 
-<div class="message">
+<script lang="ts">
-    {error.message}
+    export let error: Error;
+
+    function closePage() {
+        try {
+            pycmd("close");
+        } catch {
+            history.back();
+        }
+    }
+</script>
+
+<div class="error-box">
+    <p class="error-text">{error.message}</p>
+    <button class="btn btn-primary" on:click={closePage}>Got it</button>
 </div>
 
 <style lang="scss">
-    .message {
+    .error-box {
-        text-align: center;
+    background-color: var(--window-bg);
-        margin: 50px 0 0;
+    border: 1px solid var(--error-fg);
-    }
+    color: var(--fg);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    max-width: 400px;
+    margin: 1rem auto;
+    text-align: center;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
+  }
+  .error-text {
+    color: var(--error-fg);
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+  }
 </style>

ts/lib/generated/post.ts

@@ -41,7 +41,8 @@ async function postProtoInner(url: string, body: Uint8Array): Promise<Uint8Array
         } catch {
             // ignore
         }
-        throw new Error(`${result.status}: ${msg}`);
+        // it is ugly to show internall server client status to user, we should just show error's to user
+        throw new Error(process.env.NODE_ENV === "production"?`${msg}`:`${result.status}: ${msg}`);
     }
     const blob = await result.blob();
     const respBuf = await new Response(blob).arrayBuffer();

ts/routes/import-csv/[...path]/+page.svelte

@@ -3,10 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import ErrorPage from "$lib/components/ErrorPage.svelte";
     import ImportCsvPage from "../ImportCsvPage.svelte";
     import type { PageData } from "./$types";
 
     export let data: PageData;
 </script>
 
-<ImportCsvPage state={data.state} />
+{#if data.initialError}
+    <ErrorPage error={data.initialError} />
+{:else}
+    <ImportCsvPage state={data.state} />
+{/if}

ts/routes/import-csv/[...path]/+page.ts

@@ -6,14 +6,19 @@ import { ImportCsvState } from "../lib";
 import type { PageLoad } from "./$types";
 
 export const load = (async ({ params }) => {
-    const [notetypes, decks, metadata] = await Promise.all([
+    try {
-        getNotetypeNames({}),
+        const [notetypes, decks, metadata] = await Promise.all([
-        getDeckNames({
+            getNotetypeNames({}),
-            skipEmptyDefault: false,
+            getDeckNames({
-            includeFiltered: false,
+                skipEmptyDefault: false,
-        }),
+                includeFiltered: false,
-        getCsvMetadata({ path: params.path }, { alertOnError: false }),
+            }),
-    ]);
+            getCsvMetadata({ path: params.path }, { alertOnError: false }),
-    const state = new ImportCsvState(params.path, notetypes, decks, metadata);
+        ]);
-    return { state };
+        const state = new ImportCsvState(params.path, notetypes, decks, metadata);
+        return { state };
+    } catch (error: any) {
+        const rawMsg = error?.message ?? String(error ?? "");
+        return { initialError: new Error(rawMsg) };
+    }
 }) satisfies PageLoad;