Implement History button

proto/anki/frontend.proto

@@ -33,7 +33,7 @@ service FrontendService {
   // Editor
   rpc UpdateEditorNote(notes.UpdateNotesRequest) returns (generic.Empty);
   rpc UpdateEditorNotetype(notetypes.Notetype) returns (generic.Empty);
-  rpc AddEditorNote(notes.AddNoteRequest) returns (generic.Empty);
+  rpc AddEditorNote(notes.AddNoteRequest) returns (notes.AddNoteResponse);
   rpc ConvertPastedImage(ConvertPastedImageRequest)
       returns (ConvertPastedImageResponse);
   rpc RetrieveUrl(generic.String) returns (RetrieveUrlResponse);

qt/aqt/mediasrv.py

@@ -922,6 +922,7 @@ exposed_backend_list = [
     # CardRenderingService
     "encode_iri_paths",
     "decode_iri_paths",
+    "html_to_text_line",
     # ConfigService
     "set_config_json",
     "get_config_bool",

ts/lib/components/icons.ts

@@ -149,6 +149,8 @@ import ArrowLeft_ from "bootstrap-icons/icons/arrow-left.svg?component";
 import arrowLeft_ from "bootstrap-icons/icons/arrow-left.svg?url";
 import ArrowRight_ from "bootstrap-icons/icons/arrow-right.svg?component";
 import arrowRight_ from "bootstrap-icons/icons/arrow-right.svg?url";
+import CaretDownFill_ from "bootstrap-icons/icons/caret-down-fill.svg?component";
+import caretDownFill_ from "bootstrap-icons/icons/caret-down-fill.svg?url";
 import Minus_ from "bootstrap-icons/icons/dash-lg.svg?component";
 import minus_ from "bootstrap-icons/icons/dash-lg.svg?url";
 import Eraser_ from "bootstrap-icons/icons/eraser.svg?component";
@@ -285,3 +287,4 @@ export const mdiUngroup = { url: ungroup_, component: Ungroup_ };
 export const mdiVectorPolygonVariant = { url: vectorPolygonVariant_, component: VectorPolygonVariant_ };
 export const incrementClozeIcon = { url: incrementCloze_, component: IncrementCloze_ };
 export const mdiEarth = { url: earth_, component: Earth_ };
+export const caretDownFill = { url: caretDownFill_, component: CaretDownFill_ };

ts/routes/editor/ActionButton.svelte

@@ -5,7 +5,7 @@ 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();
+    const { children, onClick, tooltip, disabled = false } = $props();
 </script>
 
 <div class="action-button">
@@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {tooltip}
         --border-left-radius="5px"
         --border-right-radius="5px"
+        {disabled}
     >
         <div class="action-text">
             {@render children()}

ts/routes/editor/ActionButtons.svelte

@@ -6,11 +6,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import AddButton from "./AddButton.svelte";
     import CloseButton from "./CloseButton.svelte";
     import HelpButton from "./HelpButton.svelte";
-    import type { EditorMode } from "./types";
+    import HistoryButton from "./HistoryButton.svelte";
+    import type { EditorMode, HistoryEntry } from "./types";
 
     export let mode: EditorMode;
     export let onClose: () => void;
     export let onAdd: () => void;
+    export let onHistory: () => void;
+    export let history: HistoryEntry[] = [];
 </script>
 
 <div class="action-buttons d-flex flex-row-reverse">
@@ -21,6 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <CloseButton {onClose} enableShortcut={mode === "current"} />
     {/if}
     {#if mode === "add"}
+        <HistoryButton {onHistory} {history} />
         <AddButton {onAdd} />
     {/if}
 </div>

ts/routes/editor/HistoryButton.svelte

@@ -0,0 +1,27 @@
+<!--
+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 { getPlatformString } from "@tslib/shortcuts";
+    import Shortcut from "$lib/components/Shortcut.svelte";
+    import ActionButton from "./ActionButton.svelte";
+    import type { HistoryEntry } from "./types";
+    import Icon from "$lib/components/Icon.svelte";
+    import { caretDownFill } from "$lib/components/icons";
+
+    export let onHistory: () => void;
+    export let history: HistoryEntry[] = [];
+    const historyKeyCombination = "Control+H";
+</script>
+
+<ActionButton
+    onClick={onHistory}
+    tooltip={getPlatformString(historyKeyCombination)}
+    disabled={history.length === 0}
+>
+    {tr.addingHistory()}
+    <Icon icon={caretDownFill} />
+    <Shortcut keyCombination={historyKeyCombination} on:action={onHistory} />
+</ActionButton>

ts/routes/editor/HistoryModal.svelte

@@ -0,0 +1,208 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import Modal from "bootstrap/js/dist/modal";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import * as tr from "@generated/ftl";
+
+    import { modalsKey } from "$lib/components/context-keys";
+    import { registerModalClosingHandler } from "$lib/sveltelib/modal-closing";
+    import { pageTheme } from "$lib/sveltelib/theme";
+    import type { HistoryEntry } from "./types";
+    import { searchInBrowser } from "@generated/backend";
+
+    export const modalKey: string = Math.random().toString(36).substring(2);
+    export let history: HistoryEntry[] = [];
+
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+
+    let modalRef: HTMLDivElement;
+    let modal: Modal;
+
+    function onCancelClicked(): void {
+        modal.hide();
+    }
+
+    function onShown(): void {
+        setModalOpen(true);
+    }
+
+    function onHidden() {
+        setModalOpen(false);
+    }
+
+    function onEntryClick(entry: HistoryEntry): void {
+        searchInBrowser({
+            filter: {
+                case: "nids",
+                value: { ids: [entry.noteId] },
+            },
+        });
+        modal.hide();
+    }
+
+    const { set: setModalOpen, remove: removeModalClosingHandler } =
+        registerModalClosingHandler(onCancelClicked);
+
+    onMount(() => {
+        modalRef.addEventListener("shown.bs.modal", onShown);
+        modalRef.addEventListener("hidden.bs.modal", onHidden);
+        modal = new Modal(modalRef, { keyboard: false });
+        modals.set(modalKey, modal);
+    });
+
+    onDestroy(() => {
+        removeModalClosingHandler();
+        modalRef.removeEventListener("shown.bs.modal", onShown);
+        modalRef.removeEventListener("hidden.bs.modal", onHidden);
+    });
+</script>
+
+<div
+    bind:this={modalRef}
+    class="modal fade"
+    class:nightMode={$pageTheme.isDark}
+    tabindex="-1"
+    aria-labelledby="modalLabel"
+    aria-hidden="true"
+>
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modalLabel">{tr.addingHistory()}</h5>
+                <button
+                    type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                ></button>
+            </div>
+            <div class="modal-body">
+                <ul class="history-list">
+                    {#each history as entry}
+                        <li>
+                            <button
+                                type="button"
+                                class="history-entry"
+                                on:click={() => onEntryClick(entry)}
+                            >
+                                {entry.text}
+                            </button>
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+            <div class="modal-footer">
+                <button
+                    type="button"
+                    class="btn btn-secondary"
+                    on:click={onCancelClicked}
+                >
+                    Cancel
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .modal {
+        --link-color: #007bff;
+        --canvas-elevated-hover: rgba(0, 0, 0, 0.05);
+    }
+
+    .nightMode.modal {
+        --link-color: #4dabf7;
+        --canvas-elevated-hover: rgba(255, 255, 255, 0.1): ;
+    }
+
+    .nightMode .modal-content {
+        background-color: var(--canvas);
+        color: var(--fg);
+    }
+
+    .nightMode .btn-close {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+
+    .history-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        max-height: 400px;
+        overflow-y: auto;
+    }
+
+    .history-list li {
+        margin-bottom: 8px;
+    }
+
+    .history-list li:last-child {
+        margin-bottom: 0;
+    }
+
+    .history-entry {
+        display: block;
+        width: 100%;
+        padding: 12px 16px;
+        background-color: var(--canvas-elevated);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        font-size: 14px;
+        line-height: 1.4;
+        word-break: break-word;
+        text-align: left;
+        color: var(--fg);
+        text-decoration: none;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .history-entry::after {
+        content: "";
+        position: absolute;
+        bottom: 8px;
+        left: 16px;
+        right: 16px;
+        height: 1px;
+        background-color: var(--link-color);
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    .history-entry:hover {
+        background-color: var(--canvas-elevated-hover);
+        border-color: var(--border-strong);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        color: var(--link-color);
+    }
+
+    .history-entry:hover::after {
+        opacity: 0.6;
+    }
+
+    .history-entry:active {
+        transform: translateY(0px);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .history-entry:focus {
+        outline: 2px solid var(--link-color);
+        outline-offset: 2px;
+    }
+
+    .nightMode .history-entry {
+        background-color: var(--canvas-elevated);
+        border-color: var(--border, rgba(255, 255, 255, 0.15));
+        color: var(--fg);
+    }
+
+    .nightMode .history-entry:hover {
+        border-color: var(--border-strong, rgba(255, 255, 255, 0.25));
+        color: var(--link-color);
+    }
+</style>

ts/routes/editor/NoteEditor.svelte

@@ -15,6 +15,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import LabelName from "./LabelName.svelte";
     import { EditorState, type EditorMode } from "./types";
     import { ContextMenu, Item } from "$lib/context-menu";
+    import type Modal from "bootstrap/js/dist/modal";
+    import { getContext } from "svelte";
+    import { modalsKey } from "$lib/components/context-keys";
 
     export interface NoteEditorAPI {
         fields: EditorFieldAPI[];
@@ -85,7 +88,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import PlainTextBadge from "./PlainTextBadge.svelte";
     import RichTextInput, { editingInputIsRichText } from "./rich-text-input";
     import RichTextBadge from "./RichTextBadge.svelte";
-    import type { NotetypeIdAndModTime, SessionOptions } from "./types";
+    import type { HistoryEntry, NotetypeIdAndModTime, SessionOptions } from "./types";
 
     let contextMenu: ContextMenu;
     const [onContextMenu, contextMenuItems] = setupContextMenu();
@@ -446,6 +449,34 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         await addCurrentNote(1n);
     }
 
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+    let modalKey: string;
+
+    let history: HistoryEntry[] = [];
+
+    export async function addNoteToHistory(note: Note) {
+        let text = (
+            await htmlToTextLine({
+                text: note.fields.join(", "),
+                preserveMediaFilenames: true,
+            })
+        ).val;
+        if (text.length > 30) {
+            text = `${text.slice(0, 30)}...`;
+        }
+        history = [
+            ...history,
+            {
+                text,
+                noteId: note.id,
+            },
+        ];
+    }
+
+    export function onHistory() {
+        modals.get(modalKey)!.show();
+    }
+
     export function saveOnPageHide() {
         if (document.visibilityState === "hidden") {
             // will fire on session close and minimize
@@ -501,10 +532,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (!(await noteCanBeAdded())) {
             return;
         }
-        await addEditorNote({
-            note: note!,
-            deckId,
-        });
+        const noteId = (
+            await addEditorNote({
+                note: note!,
+                deckId,
+            })
+        ).noteId;
+        note.id = noteId;
+        addNoteToHistory(note!);
         lastAddedNote = note;
         await loadNewNote();
     }
@@ -638,6 +673,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         updateEditorNotetype,
         closeAddCards as closeAddCardsBackend,
         closeEditCurrent as closeEditCurrentBackend,
+        htmlToTextLine,
     } from "@generated/backend";
     import { wrapInternal } from "@tslib/wrap";
     import { getProfileConfig, getMeta, setMeta, getColConfig } from "@tslib/profile";
@@ -662,6 +698,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setupContextMenu } from "./context-menu.svelte";
     import { registerShortcut } from "@tslib/shortcuts";
     import ActionButtons from "./ActionButtons.svelte";
+    import HistoryModal from "./HistoryModal.svelte";
 
     $: isIOImageLoaded = false;
     $: ioImageLoadedStore.set(isIOImageLoaded);
@@ -1309,7 +1346,8 @@ components and functionality for general note editing.
             <TagEditor {tags} on:tagsupdate={saveTags} />
         </Collapsible>
         {#if !isLegacy}
-            <ActionButtons {mode} {onClose} {onAdd} />
+            <ActionButtons {mode} {onClose} {onAdd} {onHistory} {history} />
+            <HistoryModal bind:modalKey {history} />
         {/if}
     {/if}
 

ts/routes/editor/base.ts

@@ -29,6 +29,7 @@ declare global {
     }
 }
 
+import { modalsKey } from "$lib/components/context-keys";
 import { ModuleName } from "@tslib/i18n";
 import { mount } from "svelte";
 import type { EditorMode } from "./types";
@@ -41,6 +42,7 @@ export const editorModules = [
     ModuleName.NOTETYPES,
     ModuleName.IMPORTING,
     ModuleName.UNDO,
+    ModuleName.ADDING,
 ];
 
 export const components = {
@@ -58,6 +60,8 @@ export async function setupEditor(mode: EditorMode, isLegacy = false) {
         alert("unexpected editor type");
         return;
     }
+    const context = new Map();
+    context.set(modalsKey, new Map());
     await setupI18n({ modules: editorModules });
-    mount(NoteEditor, { target: document.body, props: { uiResolve, mode, isLegacy } });
+    mount(NoteEditor, { target: document.body, props: { uiResolve, mode, isLegacy }, context });
 }

ts/routes/editor/types.ts

@@ -29,3 +29,8 @@ export enum EditorState {
 }
 
 export type EditorMode = "add" | "browser" | "current";
+
+export type HistoryEntry = {
+    text: string;
+    noteId: bigint;
+};