Implement help button

proto/anki/frontend.proto

@@ -43,6 +43,7 @@ service FrontendService {
   rpc RecordAudio(generic.Empty) returns (generic.String);
   rpc CloseAddCards(generic.Bool) returns (generic.Empty);
   rpc CloseEditCurrent(generic.Empty) returns (generic.Empty);
+  rpc OpenLink(generic.String) returns (generic.Empty);
 
   // Profile config
   rpc GetProfileConfigJson(generic.String) returns (generic.Json);

qt/aqt/mediasrv.py

@@ -40,7 +40,7 @@ from aqt.operations import on_op_finished
 from aqt.operations.deck import update_deck_configs as update_deck_configs_op
 from aqt.progress import ProgressUpdate
 from aqt.qt import *
-from aqt.utils import aqt_data_path, show_warning, tr
+from aqt.utils import aqt_data_path, openLink, show_warning, tr
 
 # https://forums.ankiweb.net/t/anki-crash-when-using-a-specific-deck/22266
 waitress.wasyncore._DISCONNECTED = waitress.wasyncore._DISCONNECTED.union({EPROTOTYPE})  # type: ignore
@@ -830,6 +830,14 @@ def close_edit_current() -> bytes:
     return b""
 
 
+def open_link() -> bytes:
+    req = generic_pb2.String()
+    req.ParseFromString(request.data)
+    url = req.val
+    aqt.mw.taskman.run_on_main(lambda: openLink(url))
+    return b""
+
+
 post_handler_list = [
     congrats_info,
     get_deck_configs_for_update,
@@ -863,6 +871,7 @@ post_handler_list = [
     write_clipboard,
     close_add_cards,
     close_edit_current,
+    open_link,
 ]
 
 
@@ -1062,3 +1071,5 @@ def _extract_dynamic_get_request(path: str) -> DynamicRequest | None:
     else:
         return None
         return None
+        return None
+        return None

ts/lib/tslib/help-page.ts

@@ -45,4 +45,7 @@ export const HelpPage = {
         updating: "https://docs.ankiweb.net/importing/text-files.html#duplicates-and-updating",
         html: "https://docs.ankiweb.net/importing/text-files.html#html",
     },
+    Editing: {
+        adding: "https://docs.ankiweb.net/editing.html#adding-cards-and-notes",
+    },
 };

ts/routes/editor/ActionButton.svelte

@@ -0,0 +1,32 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import LabelButton from "$lib/components/LabelButton.svelte";
+
+    const { children, onClick, tooltip } = $props();
+</script>
+
+<div class="action-button">
+    <LabelButton
+        primary
+        on:click={onClick}
+        {tooltip}
+        --border-left-radius="5px"
+        --border-right-radius="5px"
+    >
+        <div class="action-text">
+            {@render children()}
+        </div>
+    </LabelButton>
+</div>
+
+<style lang="scss">
+    .action-button {
+        margin-inline-end: 0.5rem;
+    }
+    .action-text {
+        margin: 0 0.75rem;
+    }
+</style>

ts/routes/editor/ActionButtons.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import CloseButton from "./CloseButton.svelte";
+    import HelpButton from "./HelpButton.svelte";
     import type { EditorMode } from "./types";
 
     export let mode: EditorMode;
@@ -11,6 +12,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div class="action-buttons d-flex flex-row-reverse">
+    {#if mode === "add"}
+        <HelpButton />
+    {/if}
     {#if mode === "add" || mode === "current"}
         <CloseButton {onClose} />
     {/if}

ts/routes/editor/CloseButton.svelte

@@ -5,28 +5,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { getPlatformString } from "@tslib/shortcuts";
-    import LabelButton from "$lib/components/LabelButton.svelte";
     import Shortcut from "$lib/components/Shortcut.svelte";
-
+    import ActionButton from "./ActionButton.svelte";
-    const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
 
     export let onClose: () => void;
     const closeKeyCombination = "Control+Enter";
 </script>
 
-<LabelButton
+<ActionButton onClick={onClose} tooltip={getPlatformString(closeKeyCombination)}>
-    primary
+    {tr.actionsClose()}
-    on:click={onClose}
+    <Shortcut keyCombination={closeKeyCombination} on:action={onClose} />
-    tooltip={getPlatformString(closeKeyCombination)}
+</ActionButton>
-    --border-left-radius={!rtl ? "var(--border-radius)" : "0"}
-    --border-right-radius={rtl ? "var(--border-radius)" : "0"}
->
-    <div class="close">{tr.actionsClose()}</div>
-</LabelButton>
-<Shortcut keyCombination={closeKeyCombination} on:action={onClose} />
-
-<style lang="scss">
-    .close {
-        margin: 0 0.75rem;
-    }
-</style>

ts/routes/editor/HelpButton.svelte

@@ -0,0 +1,23 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "@generated/ftl";
+    import { HelpPage } from "@tslib/help-page";
+    import ActionButton from "./ActionButton.svelte";
+    import { getPlatformString } from "@tslib/shortcuts";
+    import Shortcut from "$lib/components/Shortcut.svelte";
+    import { openLink } from "@generated/backend";
+
+    const helpKeyCombination = "F1";
+
+    function onClick() {
+        openLink({ val: HelpPage.Editing.adding });
+    }
+</script>
+
+<ActionButton tooltip={getPlatformString(helpKeyCombination)} {onClick}>
+    {tr.actionsHelp()}
+    <Shortcut keyCombination={helpKeyCombination} on:action={onClick} />
+</ActionButton>