client/notes/web view: create a web view setup form

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

@@ -1070,10 +1070,12 @@
     "note_detail_render_help_1": "This help note is shown because this note of type Render HTML doesn't have required relation to function properly.",
     "note_detail_render_help_2": "Render HTML note type is used for <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. In short, you have a HTML code note (optionally with some JavaScript) and this note will render it. To make it work, you need to define a <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relation</a> called \"renderNote\" pointing to the HTML note to render."
   },
-  "web_view": {
-    "web_view": "Web View",
-    "embed_websites": "Note of type Web View allows you to embed websites into Trilium.",
-    "create_label": "To start, please create a label with a URL address you want to embed, e.g. #webViewSrc=\"https://www.google.com\""
+  "web_view_setup": {
+    "title": "Create a live view of a webpage directly into Trilium",
+    "url_placeholder": "Enter or paste the website address, for example https://triliumnotes.org",
+    "create_button": "Create Web View",
+    "invalid_url_title": "Invalid address",
+    "invalid_url_message": "Insert a valid web address, for example https://triliumnotes.org."
   },
   "backend_log": {
     "refresh": "Refresh"

apps/client/src/widgets/type_widgets/WebView.css

@@ -16,3 +16,20 @@
     width: 100%;
     height: 100%;
 }
+
+.web-view-setup-form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-inline: 40px;
+
+    .form-icon {
+        margin-bottom: 12px;
+    }
+
+    .form-group {
+        width: 100%;
+        max-width: 600px;
+    }
+}

apps/client/src/widgets/type_widgets/WebView.tsx

@@ -1,9 +1,13 @@
+import { useCallback, useState } from "preact/hooks";
+import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import utils from "../../services/utils";
-import Alert from "../react/Alert";
 import { useNoteLabel } from "../react/hooks";
 import { TypeWidgetProps } from "./type_widget";
 import "./WebView.css";
+import FormGroup from "../react/FormGroup";
+import toast from "../../services/toast";
+import Button from "../react/Button";
 
 const isElectron = utils.isElectron();
 
@@ -12,7 +16,7 @@ export default function WebView({ note }: TypeWidgetProps) {
 
     return (webViewSrc
         ? <WebViewContent src={webViewSrc} />
-        : <WebViewHelp />
+        : <SetupWebView note={note} />
     );
 }
 
@@ -24,12 +28,41 @@ function WebViewContent({ src }: { src: string }) {
     }
 }
 
-function WebViewHelp() {
-    return (
-        <Alert className="note-detail-web-view-help" type="warning">
-            <h4>{t("web_view.web_view")}</h4>
-            <p>{t("web_view.embed_websites")}</p>
-            <p>{t("web_view.create_label")}</p>
-        </Alert>
-    )
+function SetupWebView({note}: {note: FNote}) {
+    const [srcLabel, setSrcLabel] = useNoteLabel(note, "webViewSrc");
+    const [src, setSrc] = useState("");
+
+    const submit = useCallback((url: string) => {
+        try {
+            // Validate URL
+            new URL(url);
+        } catch (ex) {
+            toast.showErrorTitleAndMessage(t("web_view_setup.invalid_url_title"),
+                                           t("web_view_setup.invalid_url_message"));
+            return;
+        }
+
+        setSrcLabel(url);
+    }, [note]);
+
+    return <div class="web-view-setup-form">
+            <form class="tn-centered-form" onSubmit={() => submit(src)}>
+                <span className="bx bx-world form-icon" />
+
+                <FormGroup name="web-view-src-detail" label={t("web_view_setup.title")}>
+                    <input className="form-control"
+                        type="text"
+                        value={src}
+                        placeholder={t("web_view_setup.url_placeholder")}
+                        onChange={(e) => {setSrc((e.target as HTMLInputElement)?.value)}}
+                    />
+                </FormGroup>
+
+                <Button
+                    text={t("web_view_setup.create_button")}
+                    primary
+                    keyboardShortcut="Enter"
+                />
+            </form>
+    </div>
 }