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">
-    export let error: Error;
+<script context="module" lang="ts">
+    declare function pycmd(cmd: string);
 </script>
 
-<div class="message">
-    {error.message}
+<script lang="ts">
+    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 {
+    background-color: var(--window-bg);
+    border: 1px solid var(--error-fg);
+    color: var(--fg);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    max-width: 400px;
+    margin: 1rem auto;
     text-align: center;
-        margin: 50px 0 0;
+    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>
 
+{#if data.initialError}
+    <ErrorPage error={data.initialError} />
+{:else}
     <ImportCsvPage state={data.state} />
+{/if}

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

@@ -6,6 +6,7 @@ import { ImportCsvState } from "../lib";
 import type { PageLoad } from "./$types";
 
 export const load = (async ({ params }) => {
+    try {
         const [notetypes, decks, metadata] = await Promise.all([
             getNotetypeNames({}),
             getDeckNames({
@@ -16,4 +17,8 @@ export const load = (async ({ params }) => {
         ]);
         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;