feat(client): render import preview as card

apps/client/src/translations/en/translation.json

@@ -2283,5 +2283,10 @@
   },
   "bookmark_buttons": {
     "bookmarks": "Bookmarks"
+  },
+  "import_preview": {
+    "title": "Import preview",
+    "notes_count_one": "{{count}} notes",
+    "notes_count_other": "{{count}} note"
   }
 }

apps/client/src/widgets/dialogs/help.tsx

@@ -1,11 +1,12 @@
-import Modal from "../react/Modal.jsx";
-import { t } from "../../services/i18n.js";
-import { ComponentChildren } from "preact";
-import appContext, { CommandNames } from "../../components/app_context.js";
-import RawHtml from "../react/RawHtml.jsx";
 import { useEffect, useState } from "preact/hooks";
+
+import appContext, { CommandNames } from "../../components/app_context.js";
+import { t } from "../../services/i18n.js";
 import keyboard_actions from "../../services/keyboard_actions.js";
+import { Card } from "../react/Card.jsx";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import Modal from "../react/Modal.jsx";
+import RawHtml from "../react/RawHtml.jsx";
 
 export default function HelpDialog() {
     const [ shown, setShown ] = useState(false);
@@ -110,7 +111,7 @@ export default function HelpDialog() {
 
 function KeyboardShortcut({ commands, description }: { commands: CommandNames | CommandNames[], description: string }) {
     const [ shortcuts, setShortcuts ] = useState<string[]>([]);
-    
+
     useEffect(() => {
         (async () => {
             const shortcuts: string[] = [];
@@ -148,20 +149,6 @@ function FixedKeyboardShortcut({ keys, description }: { keys?: string[], descrip
     );
 }
 
-function Card({ title, children }: { title: string, children: ComponentChildren }) {
-    return (
-        <div className="card">
-            <div className="card-body">
-                <h5 className="card-title">{title}</h5>
-
-                <p className="card-text">
-                    {children}
-                </p>
-            </div>
-        </div>
-    )
-}
-
 function editShortcuts() {
     appContext.tabManager.openContextWithNote("_optionsShortcuts", { activate: true });
-}
+}

apps/client/src/widgets/dialogs/import_preview.tsx

@@ -1,6 +1,8 @@
 import { ImportPreviewResponse } from "@triliumnext/commons";
 import { useState } from "preact/hooks";
 
+import { t } from "../../services/i18n";
+import { Card } from "../react/Card";
 import { useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
 
@@ -9,7 +11,11 @@ export interface ImportPreviewData {
 }
 
 export default function ImportPreviewDialog() {
-    const [ data, setData ] = useState<ImportPreviewData | null>(JSON.parse(`{"isDangerous":true,"dangerousAttributes":["iconPack"],"dangerousAttributeCategories":["iconPack"],"numNotes":1,"id":"llpCPOmcBGhW5.trilium"}`));
+    const [ data, setData ] = useState<ImportPreviewData | null>({
+        previews: [
+            JSON.parse(`{"isDangerous":true,"dangerousAttributes":["iconPack"],"dangerousAttributeCategories":["iconPack"],"numNotes":1,"id":"llpCPOmcBGhW5.trilium"}`)
+        ]
+    });
     const [ shown, setShown ] = useState(true);
 
     useTriliumEvent("showImportPreviewDialog", (data) => {
@@ -21,14 +27,22 @@ export default function ImportPreviewDialog() {
         <Modal
             className="import-preview-dialog"
             size="lg"
-            title="Import preview"
+            title={t("import_preview.title")}
             show={shown}
             onHidden={() => {
                 setShown(false);
                 setData(null);
             }}
         >
-            <p>Preview goes here.</p>
+            {data?.previews.map(preview => <SinglePreview key={preview.id} preview={preview} />)}
         </Modal>
     );
 }
+
+function SinglePreview({ preview }: { preview: ImportPreviewResponse }) {
+    return (
+        <Card title={preview.id}>
+            <span>{t("import_preview.notes_count", { count: preview.numNotes })}</span>
+        </Card>
+    );
+}

apps/client/src/widgets/react/Card.tsx

@@ -0,0 +1,15 @@
+import type { ComponentChildren } from "preact";
+
+export function Card({ title, children }: { title: string, children: ComponentChildren }) {
+    return (
+        <div className="card">
+            <div className="card-body">
+                <h5 className="card-title">{title}</h5>
+
+                <p className="card-text">
+                    {children}
+                </p>
+            </div>
+        </div>
+    );
+}