Cap preview cols to prevent stall when csv is parsed with the wrong delimiter (#3786)

* cap csv import preview table at 1000 columns

* add fluent message

* show warning when preview table columns have been truncated

* simplify fluent message ($count will almost always be a big num)

* _tr -> tr

ftl/core/importing.ftl

@@ -67,6 +67,12 @@ importing-packaged-anki-deckcollection-apkg-colpkg-zip = Packaged Anki Deck/Coll
 importing-pauker-18-lesson-paugz = Pauker 1.8 Lesson (*.pau.gz)
 # the '|' character
 importing-pipe = Pipe
+# Warning displayed when the csv import preview table is clipped (some columns were hidden)
+# $count is intended to be a large number (1000 and above)
+importing-preview-truncated =
+    { $count ->
+        *[other] Only the first { $count } columns are shown. If this doesn't seem right, try changing the field separator.
+    }
 importing-rows-had-num1d-fields-expected-num2d = '{ $row }' had { $found } fields, expected { $expected }
 importing-selected-file-was-not-in-utf8 = Selected file was not in UTF-8 format. Please see the importing section of the manual.
 importing-semicolon = Semicolon

ts/routes/import-csv/Preview.svelte

@@ -3,12 +3,34 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import Warning from "../deck-options/Warning.svelte";
     import { type ImportCsvState } from "./lib";
+    import * as tr from "@generated/ftl";
 
     export let state: ImportCsvState;
+    export let maxColumns = 1000;
 
     const metadata = state.metadata;
     const columnOptions = state.columnOptions;
+
+    let rows: string[][];
+    let truncated = false;
+
+    function sanitisePreview(preview: typeof $metadata.preview) {
+        let truncated = false;
+        const rows = preview.map((x) => {
+            if (x.vals.length > maxColumns) {
+                truncated = true;
+                return x.vals.slice(0, maxColumns);
+            }
+            return x.vals;
+        });
+        return { rows, truncated };
+    }
+
+    $: ({ rows, truncated } = sanitisePreview($metadata.preview));
+
+    $: warning = truncated ? tr.importingPreviewTruncated({ count: maxColumns }) : "";
 </script>
 
 <div class="outer">
@@ -23,9 +45,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </tr>
         </thead>
         <tbody>
-            {#each $metadata.preview as row}
+            {#each rows as row}
                 <tr>
-                    {#each row.vals as cell}
+                    {#each row as cell}
                         <td>{cell}</td>
                     {/each}
                 </tr>
@@ -33,10 +55,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </tbody>
     </table>
 </div>
+<Warning {warning} />
 
 <style lang="scss">
     .outer {
         overflow: auto;
+        margin-bottom: 0.5rem;
     }
 
     .preview {