feat(import): read the exports of GOG Galaxy, Grouvee, HowLongToBeat and Playnite

src/components/import/ImportInput.jsx

@@ -7,7 +7,8 @@ import {Card} from '@/components/ui/card';
 import {Input} from '@/components/ui/input';
 import {Textarea} from '@/components/ui/textarea';
 import useStartImport from '../../hooks/useStartImport.js';
-import {parseCsv, parseTextList} from '../../utils/imports.js';
+import {readImportFile} from '../../utils/importFormats.js';
+import {parseTextList} from '../../utils/imports.js';
 import {MAX_IMPORT_ROWS} from '../../utils/limits.js';
 
 export default function ImportInput({onCreated}) {
@@ -19,12 +20,13 @@ export default function ImportInput({onCreated}) {
     const rows = source === 'TEXT' ? parseTextList(text) : csv?.rows ?? [];
     const tooMany = rows.length > MAX_IMPORT_ROWS;
 
-    const readFile = async (file) => setCsv(file ? parseCsv(await file.text()) : null);
+    const readFile = async (file) => setCsv(file ? readImportFile(await file.text()) : null);
 
     const startImport = useStartImport();
     const start = async () => {
         setBusy(true);
-        const id = await startImport(source, rows);
+        // An export names its format, so the history shows where the lines came from.
+        const id = await startImport(source === 'CSV' ? csv.format : source, rows);
         setBusy(false);
         if (id) onCreated(id);
     };
@@ -43,10 +45,13 @@ export default function ImportInput({onCreated}) {
                           onChange={(e) => setText(e.target.value)}/>
             ) : (
                 <div className="space-y-2">
-                    <Input type="file" accept=".csv,text/csv" aria-label={t('IMPORT.CSV_LABEL')}
+                    <Input type="file" accept=".csv,.tsv,.txt,text/csv,text/tab-separated-values" aria-label={t('IMPORT.CSV_LABEL')}
                            onChange={(e) => readFile(e.target.files?.[0])}/>
                     <p className="text-xs text-muted-foreground">{t('IMPORT.CSV_HINT')}</p>
                     {csv?.error && <p className="text-sm text-destructive">{t(csv.error)}</p>}
+                    {csv?.rows && csv.format !== 'CSV' && (
+                        <p className="text-sm">{t('IMPORT.FORMAT_READ', {format: t(`IMPORT.SOURCE_${csv.format}`)})}</p>
+                    )}
                     {csv?.rows?.length > 0 && (
                         <ul className="text-sm text-muted-foreground">
                             {csv.rows.slice(0, 5).map((row, index) => (