From eb0e5ac7be5d5160233713d8a9fd85ab809a6411 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Tue, 21 Jan 2025 23:38:52 -0600
Subject: [PATCH 01/13] Add tagify utils for creating parent and term tag
 tagify controls.

---
 lute/static/js/lute-tagify-utils.js | 198 ++++++++++++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 lute/static/js/lute-tagify-utils.js

diff --git a/lute/static/js/lute-tagify-utils.js b/lute/static/js/lute-tagify-utils.js
new file mode 100644
index 000000000..569be2c11
--- /dev/null
+++ b/lute/static/js/lute-tagify-utils.js
@@ -0,0 +1,198 @@
+/**
+ * Tagify helpers.
+ *
+ * Lute uses Tagify (https://github.com/yairEO/tagify)
+ * for parent terms and term tags.
+ */
+
+
+/**
+ * Build a parent term tagify with autocomplete.
+ *
+ * args:
+ * - input: the input box tagify will control
+ * - language_id_func: zero-arg function that returns the language.
+ *
+ * notes:
+ *
+ * - language_id_func is passed, rather than a language_id, because in
+ * some cases such as bulk term editing the language isn't known at
+ * tagify setup time.  The func delegates the check until it's
+ * actually needed, in _fetch_whitelist.
+ */
+function lute_tagify_utils_setup_parent_tagify(
+  input,
+  language_id_func,  // if returns null, autocomplete does nothing
+  this_term_text = null,  // set to non-null to filter whitelist
+  override_base_settings = {}
+) {
+  if (input._tagify) {
+    // console.log('Tagify already initialized for this input.');
+    return input._tagify;
+  }
+
+  // Do the fetch and build the whitelist.
+  const _fetch_whitelist = function(mytagify, e_detail_value, controller) {
+    const language_id = language_id_func();
+    if (language_id == null) {
+      console.log("language_id not set or not consistent");
+      mytagify.loading(false);
+      return;
+    }
+
+    // Create entry like "cat (a furry thing...)"
+    const _make_dropdown_entry = function(hsh) {
+      const txt = decodeURIComponent(hsh.text);
+      let translation = hsh.translation ?? '';
+      translation = translation.
+        replaceAll("\n", "; ").
+        replaceAll("\r", "").
+        trim();
+      if (translation == '')
+        return txt;
+      const max_translation_len = 40;
+      if (translation.length > max_translation_len)
+        translation = translation.slice(0, max_translation_len) + "...";
+      translation = translation ? `(${translation})` : '';
+      return [txt, translation].join(' ');
+    };
+
+    // Build whitelist from returned ajax data.
+    const _build_whitelist = function(data) {
+      const _make_hash = function(a) {
+        return {
+          "value": a.text,
+          "id": a.id,
+          "suggestion": _make_dropdown_entry(a),
+          "status": a.status,
+        };
+      };
+      return data.map((a) => _make_hash(a));
+    };
+
+    const encoded_value = encodeURIComponent(e_detail_value);
+    const url = `/term/search/${encoded_value}/${language_id ?? -1}`;
+    mytagify.loading(true);
+    fetch(url, {signal:controller.signal})
+      .then(RES => RES.json())
+      .then(function(data) {
+        // Update whitelist and render in place.
+        let whitelist = _build_whitelist(data);
+        whitelist = whitelist.filter(hsh => hsh.value != this_term_text);
+        mytagify.whitelist = whitelist;
+        mytagify.loading(false).dropdown.show(e_detail_value);
+      }).catch(err => {
+        if (err.name === 'AbortError') {
+          // Do nothing, fetch was aborted due to another fetch.
+          // console.log('AbortError: Fetch request aborted');
+        }
+        else {
+          console.log(`error: ${err}`);
+        }
+        mytagify.loading(false);
+      });
+  };
+
+  // Controller to handle cancellations/aborts of calls.
+  // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
+  var controller;
+
+  // Build whitelist in response to user input.
+  function build_autocomplete_dropdown(mytagify, e) {
+    if (e.detail.value == '' || e.detail.value.length < 1) {
+      controller && controller.abort();
+      mytagify.whitelist = [];
+      mytagify.loading(false).dropdown.hide();
+      return;
+    }
+    controller && controller.abort()
+    controller = new AbortController()
+    _fetch_whitelist(mytagify, e.detail.value, controller);
+  }
+
+  const make_Tagify_for = function(input) {
+    const base_settings = {
+      editTags: false,
+      pasteAsTags: false,
+      backspace: true,
+      addTagOnBlur: true,   // note different
+      autoComplete: { enabled: true, rightKey: true, tabKey: true },
+      delimiters: ';;',  // special delimiter to handle parents with commas.
+      enforceWhitelist: false,
+      whitelist: [],
+      dropdown: {
+        enabled: 1,
+        maxItems: 15,
+        mapValueTo: 'suggestion',
+        placeAbove: false,
+      },
+      templates: {
+        dropdownFooter(suggestions) {
+          var hasMore = suggestions.length - this.settings.dropdown.maxItems;
+          if (hasMore <= 0)
+            return '';
+          return `<footer data-selector='tagify-suggestions-footer' class="${this.settings.classNames.dropdownFooter}">
+        (more items available, please refine your search.)</footer>`;
+        }
+      },
+
+      // Use a hook to force build_autocomplete_dropdown.
+      // Pasting from the clipboard doesnt fire the
+      // tagify.on('input') event, so intercept it and handle
+      // it manually.
+      hooks: {
+        beforePaste : function(content) {
+          return new Promise((resolve, reject) => {
+            clipboardData = content.clipboardData || window.clipboardData;
+            pastedData = clipboardData.getData('Text');
+            // console.log("pasting => " + pastedData);
+            let e = { detail: { value: pastedData } };
+            build_autocomplete_dropdown(ret, e);
+            resolve();
+          });
+        }
+      },
+    };
+
+    let settings = { ...base_settings, ...override_base_settings };
+    return new Tagify(input, settings);
+  };
+
+  const tagify = make_Tagify_for(input);
+  tagify.on('input', function (e) {
+    build_autocomplete_dropdown(tagify, e)
+  });
+
+  return tagify;
+} // end lute_tagify_utils_setup_parent_tagify
+
+
+/**
+ * Build a term tag tagify with autocomplete.
+ *
+ * args:
+ * - input: the input box tagify will control
+ * - tags: the tags array
+ * - override_base_settings: {} to override
+ */
+function lute_tagify_utils_setup_term_tag_tagify(
+  input,
+  tags,
+  override_base_settings = {}
+) {
+  if (input._tagify) {
+    return input._tagify;
+  }
+
+  const base_settings = {
+    delimiters: ';;', // special delim to handle tags w/ commas
+    editTags: false,
+    autoComplete: { enabled: true, rightKey: true, tabKey: true },
+    dropdown: { enabled: 1 },
+    enforceWhitelist: false,
+    whitelist: tags,
+  };
+  const settings = { ...base_settings, ...override_base_settings };
+  const tagify = new Tagify(input, settings);
+  return tagify;
+} // end lute_tagify_utils_setup_term_tag_tagify

From 9bc7dead68c20f69502f35c7f55d90e9e97fbcc2 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Tue, 21 Jan 2025 23:41:25 -0600
Subject: [PATCH 02/13] Use tagify utility methods in term form, bulk edit
 form.

---
 lute/templates/read/term_bulk_edit_form.html  |   2 +-
 .../term/_bulk_edit_form_fields.html          | 128 +-------
 lute/templates/term/_form.html                | 291 ++++++------------
 3 files changed, 107 insertions(+), 314 deletions(-)

diff --git a/lute/templates/read/term_bulk_edit_form.html b/lute/templates/read/term_bulk_edit_form.html
index 2c37f00cf..6a9dfe3fa 100644
--- a/lute/templates/read/term_bulk_edit_form.html
+++ b/lute/templates/read/term_bulk_edit_form.html
@@ -40,7 +40,7 @@
       const elements = $(parent.document).find("span.word");
       if (elements.length == 0) {
         console.log("No words on page ...");
-        return -999;  // dummy
+        return null;  // dummy
       }
       const first = elements.first();
       return $(first).data("lang-id");
diff --git a/lute/templates/term/_bulk_edit_form_fields.html b/lute/templates/term/_bulk_edit_form_fields.html
index 7fd1c44a2..06a2155b8 100644
--- a/lute/templates/term/_bulk_edit_form_fields.html
+++ b/lute/templates/term/_bulk_edit_form_fields.html
@@ -39,110 +39,11 @@
   <input id="txtRemoveTags" name="remove_tags" />
 </div>
 
+<script type="text/javascript" src="/static/js/never_cache/lute-tagify-utils.js" charset="utf-8"></script>
+
 <script>
   var TAGS = {{ tags | safe }}
 
-  let setup_parent_tagify = function(input_id) {
-    const input = document.getElementById(input_id);
-    const tagify = new Tagify(input, {
-      placeholder: 'Set parent (limit one)',
-      editTags: false,
-      maxTags: 1,
-      pasteAsTags: false,
-      backspace: true,
-      addTagOnBlur: false,
-      autoComplete: { enabled: true, rightKey: true, tabKey: true },
-      enforceWhitelist: false,
-      whitelist: [],
-      dropdown: {
-        enabled: 1,
-        maxItems: 15,
-        mapValueTo: 'suggestion',  // Field to display
-        placeAbove: false,  // Always put the dropdown below the textbox
-      },
-      templates: {
-        dropdownFooter(suggestions) {
-          var hasMore = suggestions.length - this.settings.dropdown.maxItems;
-          if (hasMore <= 0)
-            return '';
-          return `<footer data-selector='tagify-suggestions-footer' class="${this.settings.classNames.dropdownFooter}">
-            (more items available, please refine your search.)</footer>`;
-        }
-      },
-    });  // end tagify
-
-
-    // Autocomplete
-    var controller;
-    tagify.on('input', onInput);
-    function onInput(e) {
-      const langid = get_lang_id();
-      if (langid == null)
-        return;
-
-      tagify.whitelist = null;  // Reset whitelist.
-      if (e.detail.value == '' || e.detail.value.length < 1) {
-        controller && controller.abort();
-        tagify.whitelist = [];
-        tagify.loading(false).dropdown.hide();
-        return;
-      }
-      const s = encodeURIComponent(e.detail.value);
-      // console.log(s);
-
-      // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
-      controller && controller.abort()
-      controller = new AbortController()
-
-      let make_dropdown = function(hsh) {
-        // console.log(`text: ${hsh.text}`);
-        const txt = decodeURIComponent(hsh.text);
-        let t = hsh.translation ?? '';
-        if (t == '') {
-          return txt;
-        }
-        t = t.replaceAll("\n", "; ").replaceAll("\r", "");
-        const maxlen = 70
-        if (t.length > maxlen) {
-          t = t.substring(0, maxlen) + "...";
-        }
-        return `${txt} (${t})`;
-      };
-
-      // Build whitelist from returned ajax data.  Remove current term
-      // since a term should not be assigned as its own parent.
-      let build_whitelist = function(data) {
-        const this_term_text = $("#original_text").val();
-        const whitelist = data.map((a) => ({
-          "id": a.id,
-          "value": a.text,
-          "suggestion": make_dropdown(a),
-          "status": a.status,
-        })).filter((hsh) => hsh.value != this_term_text);
-        return whitelist;
-      };
-
-      tagify.loading(true);  // spinning animation during fetch.
-      fetch(`/term/search/${s}/${langid}`, {signal:controller.signal})
-        .then(RES => RES.json())
-        .then(function(data) {
-          tagify.whitelist = build_whitelist(data); // update whitelist Array in-place
-          const sdecode = decodeURIComponent(s);
-          tagify.loading(false).dropdown.show(sdecode); // render the suggestions dropdown
-        }).catch(err => {
-          if (err.name === 'AbortError') {
-            // Do nothing, fetch was aborted due to another fetch.
-            // console.log('AbortError: Fetch request aborted');
-          }
-          else {
-            console.log(`error: ${err}`);
-          }
-        });
-    };  // end function onInput
-
-    return tagify;
-  };  // end setup_parent_tagify
-
   // Parents are in the tagify-managed #txtSetParent input box.
   let get_parents = function() {
     // During form load, and in "steady state" (i.e., after the tags
@@ -159,21 +60,17 @@
   };
 
   let setup_tags_tagify = function(input_id, placeholder, enforceWhitelist) {
-    const input = document.getElementById(input_id);
-    const tagify = new Tagify(input, {
+    const override_base_settings = {
       placeholder: placeholder,
-      editTags: false,
-      autoComplete: { enabled: true, rightKey: true, tabKey: true },
-      dropdown: { enabled: 1 },
       enforceWhitelist: enforceWhitelist,
-      whitelist: TAGS
-    });  // end tagify
-    return tagify;
+    };
+    return lute_tagify_utils_setup_term_tag_tagify(
+      document.getElementById(input_id), TAGS, override_base_settings
+    );
   };
 
   let handle_change_status_checkbox_change = function(is_checked) {
     $("input[name='status']").prop('disabled', !is_checked);
-
     if (!is_checked) {
       // unselect all radios so nothing is submitted.
       $('input[name="status"]').prop('checked', false);
@@ -195,7 +92,16 @@
       $('#txtSetParent').prop("disabled", true);
     }
     else {
-      const parents_tagify = setup_parent_tagify('txtSetParent');
+      const input = document.getElementById('txtSetParent');
+      const this_term_text = null;  // bulk edits = no "master term"
+      let override_settings = {
+        placeholder: 'Set parent (limit one)',
+        maxTags: 1,
+        addTagOnBlur: false,
+      };
+      const parents_tagify = lute_tagify_utils_setup_parent_tagify(
+        input, get_lang_id, this_term_text, override_settings
+      );
     }
   });
 </script>
diff --git a/lute/templates/term/_form.html b/lute/templates/term/_form.html
index 1794d9627..22f5f5cc2 100644
--- a/lute/templates/term/_form.html
+++ b/lute/templates/term/_form.html
@@ -3,8 +3,21 @@
 <script type="text/javascript" src="{{ url_for('static', filename='js/dict-tabs.js') }}" charset="utf-8"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/lute-hotkey-utils.js') }}" charset="utf-8"></script>
 <script type="text/javascript">
-  const LUTE_USER_SETTINGS = {{ user_settings | safe }}
-  const LUTE_USER_HOTKEYS = {{ user_hotkeys | safe }}
+  /**
+   * Sometimes this file is included within the context of base.html
+   * which already defines these two global vars, but other times it
+   * is shown standalone.
+   *
+   * The typeof check ensures that we only load the const once,
+   * avoiding "Identifier 'LUTE_USER...' has already been declared'
+   * errors.
+   */
+  if (typeof LUTE_USER_SETTINGS === "undefined") {
+    const LUTE_USER_SETTINGS = {{ user_settings | safe }};
+  }
+  if (typeof LUTE_USER_HOTKEYS === "undefined") {
+    window.LUTE_USER_HOTKEYS = {{ user_hotkeys | safe }};
+  }
 </script>
 
 
@@ -84,6 +97,9 @@
 </div>
 
 
+<script type="text/javascript" src="/static/js/never_cache/lute-tagify-utils.js" charset="utf-8"></script>
+
+
 <script type="text/javascript">
 
   /** TERM IMAGE. ***************/
@@ -108,51 +124,72 @@
       form_changed = true;
   });
 
-  let setup_parent_tagify = function(input) {
-    const tagify = new Tagify(input, {
-      placeholder: 'Parents',
-      editTags: false,
-      pasteAsTags: false,
-      backspace: true,
-      addTagOnBlur: false,
-      autoComplete: { enabled: true, rightKey: true, tabKey: true },
-      enforceWhitelist: false,
-      whitelist: [],
-      dropdown: {
-        enabled: 1,
-        maxItems: 15,
-        mapValueTo: 'suggestion',  // Field to display
-        placeAbove: false,  // Always put the dropdown below the textbox
-      },
-      templates: {
-        dropdownFooter(suggestions) {
-          var hasMore = suggestions.length - this.settings.dropdown.maxItems;
-          if (hasMore <= 0)
-            return '';
-          return `<footer data-selector='tagify-suggestions-footer' class="${this.settings.classNames.dropdownFooter}">
-            (more items available, please refine your search.)</footer>`;
-        }
-      },
-
-      // Use a hook to fire the onInput event!
-      // Pasting from the clipboard doesn't fire the
-      // tagify.on('input') event, so intercept it and handle
-      // it manually.
-      hooks: {
-        beforePaste : function(content) {
-          return new Promise((resolve, reject) => {
-            clipboardData = content.clipboardData || window.clipboardData;
-            pastedData = clipboardData.getData('Text');
-            // console.log("pasting => " + pastedData);
-            let e = { detail: { value: pastedData } };
-            onInput(e);
-            resolve();
-          });
+  // Parents are in the tagify-managed #parentslist input box.
+  let get_parents = function() {
+    // During form load, and in "steady state" (i.e., after the tags
+    // have been added or removed, and the focus has switched to
+    // another control) the #sync_status text box is loaded with the
+    // values.
+    const pdata = $('#parentslist').val();
+    if ((pdata ?? '') == '') {
+      return [];
+    }
+    const j = JSON.parse(pdata);
+    const parents = j.map(e => e.value);
+    return parents;
+  };
+
+  let enable_disable_sync_status_checkbox = function() {
+    const cb = $("#sync_status");
+    if (get_parents().length == 1)
+      cb.removeAttr("disabled");
+    else
+      cb.attr("disabled", true);
+  };
+
+  var TAGS = {{ tags | safe }};
+
+  $(document).ready(function () {
+
+    // "Save" shortcut
+    $(document).keydown(function(event) {
+      if (get_hotkey_name(event) == "hotkey_SaveTerm") {
+        $("#btnsubmit").click();
+      }
+    });
+
+    // Term image events.
+    var term_image = $("#term_image");
+
+    term_image.hover(
+      function(){ $(this).attr("title", "Click and hit Delete to remove, then Save."); },
+      function(){ $(this).removeClass('clickedZoomableImage') }
+    );
+
+    term_image.on("keydown", function(event) {
+      if (term_image.hasClass("clickedZoomableImage")) {
+        const k = event.key;
+        if (k === "Delete" || k === "Backspace") {
+          // Hide image on screen.
+          term_image.attr("src", "");
+          term_image.css("display", "none");
+          // Erase hidden form control value.
+          $("#current_image").val("");
         }
-      },
-    });  // end tagify
+      }
+    });
+
+    var parentslist = document.getElementById('parentslist');
+    const this_term_text = $("#original_text").val();
+    const lang_id_func = () => parseInt($('#language_id').val());
+    let override_settings = {
+      placeholder: 'Parents',
+    };
+    parents_tagify = lute_tagify_utils_setup_parent_tagify(
+      parentslist, lang_id_func, this_term_text, override_settings
+    );
 
-    tagify.on('click', function (e) {
+    parents_tagify.on('click', function (e) {
       // Exit early if language not set - will not handle, too complicated.
       const langid = document.getElementById("language_id").value;
       const clickedTagText = e.detail.data.value;
@@ -181,7 +218,7 @@
       });
     });
 
-    tagify.on('add remove', function (e) {
+    parents_tagify.on('add remove', function (e) {
       // The #parents_list text box isn't changed consistently
       // during events, so we have to check the tagify var
       // itself, which has an accurate list of current tags.
@@ -211,163 +248,13 @@
       }
     });
 
-    // Autocomplete
-    var controller;
-    tagify.on('input', onInput);
-    function onInput(e) {
-      tagify.whitelist = null;  // Reset whitelist.
-      if (e.detail.value == '' || e.detail.value.length < 1) {
-        controller && controller.abort();
-        tagify.whitelist = [];
-        tagify.loading(false).dropdown.hide();
-        return;
-      }
-      const s = encodeURIComponent(e.detail.value);
-      // console.log(s);
-      const langid = parseInt(document.getElementById('language_id').value);
-
-      // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
-      controller && controller.abort()
-      controller = new AbortController()
-
-      let make_dropdown = function(hsh) {
-        // console.log(`text: ${hsh.text}`);
-        const txt = decodeURIComponent(hsh.text);
-        let t = hsh.translation ?? '';
-        if (t == '') {
-          return txt;
-        }
-        t = t.replaceAll("\n", "; ").replaceAll("\r", "");
-        const maxlen = 70
-        if (t.length > maxlen) {
-          t = t.substring(0, maxlen) + "...";
-        }
-        return `${txt} (${t})`;
-      };
-
-      // Build whitelist from returned ajax data.  Remove current term
-      // since a term should not be assigned as its own parent.
-      let build_whitelist = function(data) {
-        const this_term_text = $("#original_text").val();
-        const whitelist = data.map((a) => ({
-          "value": a.text,
-          "suggestion": make_dropdown(a),
-          "status": a.status,
-        })).filter((hsh) => hsh.value != this_term_text);
-        return whitelist;
-      };
-
-      tagify.loading(true);  // spinning animation during fetch.
-      fetch(`/term/search/${s}/${langid}`, {signal:controller.signal})
-        .then(RES => RES.json())
-        .then(function(data) {
-          tagify.whitelist = build_whitelist(data); // update whitelist Array in-place
-          const sdecode = decodeURIComponent(s);
-          tagify.loading(false).dropdown.show(sdecode); // render the suggestions dropdown
-        }).catch(err => {
-          if (err.name === 'AbortError') {
-            // Do nothing, fetch was aborted due to another fetch.
-            // console.log('AbortError: Fetch request aborted');
-          }
-          else {
-            console.log(`error: ${err}`);
-          }
-        });
-    };  // end function onInput
-
-    return tagify;
-  }  // end setup_parent_tagify
-
-  // Parents are in the tagify-managed #parentslist input box.
-  let get_parents = function() {
-    // During form load, and in "steady state" (i.e., after the tags
-    // have been added or removed, and the focus has switched to
-    // another control) the #sync_status text box is loaded with the
-    // values.
-    const pdata = $('#parentslist').val();
-    if ((pdata ?? '') == '') {
-      return [];
-    }
-    const j = JSON.parse(pdata);
-    const parents = j.map(e => e.value);
-    return parents;
-  };
-
-  let enable_disable_sync_status_checkbox = function() {
-    const cb = $("#sync_status");
-    if (get_parents().length == 1)
-      cb.removeAttr("disabled");
-    else
-      cb.attr("disabled", true);
-  };
-
-  var TAGS = {{ tags | safe }};
-
-  let setup_term_tags_tagify = function(input) {
-    const tagify = new Tagify(input, {
-      placeholder: 'Tags',
-      editTags: false,
-      autoComplete: { enabled: true, rightKey: true, tabKey: true },
-      dropdown: { enabled: 1 },
-      enforceWhitelist: false,
-      whitelist: TAGS
-    });  // end tagify
-  };
-
-  $(document).ready(function () {
-
-    // "Save" shortcut
-    $(document).keydown(function(event) {
-      if (get_hotkey_name(event) == "hotkey_SaveTerm") {
-        $("#btnsubmit").click();
-      }
-    });
-
-    /*
-    // Set term form focus
-    // DISABLING THIS: with this change, the term edit form pulls focus,
-    // so the left-and-right arrows don't work within the reading pane.
-    // The reading pane arrows are more important than the focus being set, IMO.
-    // Perhaps this can be changed later to set the focus if the form is opened
-    // from the term listing (i.e. move this to templates/term/form.html).
-    const langId = $("#language_id")
-    const text = $("#text")
-    const translation = $("#translation")
-
-    if(langId.val() == "0"){
-      langId.focus();
-    }else if(text.val() == ""){
-      text.focus();
-    }else{
-      translation.focus();
-    }
-    */
-
-    // Term image events.
-    var term_image = $("#term_image");
-
-    term_image.hover(
-      function(){ $(this).attr("title", "Click and hit Delete to remove, then Save."); },
-      function(){ $(this).removeClass('clickedZoomableImage') }
-    );
-
-    term_image.on("keydown", function(event) {
-      if (term_image.hasClass("clickedZoomableImage")) {
-        const k = event.key;
-        if (k === "Delete" || k === "Backspace") {
-          // Hide image on screen.
-          term_image.attr("src", "");
-          term_image.css("display", "none");
-          // Erase hidden form control value.
-          $("#current_image").val("");
-        }
-      }
-    });
-
-    var parentslist = document.getElementById('parentslist');
-    parents_tagify = setup_parent_tagify(parentslist);
     var termtagslist = document.getElementById('termtagslist');
-    var termtags_tagify = setup_term_tags_tagify(termtagslist);
+    const overrides = {
+      placeholder: 'Tags'
+    };
+    var termtags_tagify = lute_tagify_utils_setup_term_tag_tagify(
+      termtagslist, TAGS, overrides
+    );
     
     // Post message re form opened.
     // Note have to use this rather than the better

From e9c2958da2d8e45a0c46e5bd247101ac0fb4d201 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Tue, 21 Jan 2025 23:44:03 -0600
Subject: [PATCH 03/13] Add term service apply_ajax_update method, route, and
 tests.

---
 lute/term/routes.py                           |  20 +++
 lute/term/service.py                          |  47 ++++++-
 .../term/test_service_apply_ajax_update.py    | 123 ++++++++++++++++++
 ...ervice.py => test_service_bulk_updates.py} |   4 +-
 4 files changed, 190 insertions(+), 4 deletions(-)
 create mode 100644 tests/unit/term/test_service_apply_ajax_update.py
 rename tests/unit/term/{test_service.py => test_service_bulk_updates.py} (99%)

diff --git a/lute/term/routes.py b/lute/term/routes.py
index a96a6ad88..636f537d9 100644
--- a/lute/term/routes.py
+++ b/lute/term/routes.py
@@ -142,6 +142,26 @@ def bulk_edit_from_reading_pane():
     return render_template("/read/updated.html", term_text=None)
 
 
+@bp.route("/ajax_edit_from_index", methods=["POST"])
+def ajax_edit_from_index():
+    "Ajax edit from the term index listing."
+    svc = TermService(db.session)
+    try:
+        data = request.get_json()
+        term_id = int(data.get("term_id", 0))
+        update_type = data.get("update_type", "")
+        values = data.get("values")
+        svc.apply_ajax_update(term_id, update_type, values)
+    except TermServiceException as ex:
+        return jsonify({"error": str(ex)}), 400
+    except ValueError as ex:
+        print(ex, flush=True)
+        return jsonify({"error": f"Invalid input ({ex})"}), 400
+    except Exception as ex:  # pylint: disable=broad-exception-caught
+        return jsonify({"error": f"An unexpected error occurred ({ex})"}), 500
+    return jsonify({"status": "ok"})
+
+
 @bp.route("/export_terms", methods=["POST"])
 def export_terms():
     "Generate export file of terms."
diff --git a/lute/term/service.py b/lute/term/service.py
index 6afab6655..8da8bb343 100644
--- a/lute/term/service.py
+++ b/lute/term/service.py
@@ -4,7 +4,7 @@
 
 from dataclasses import dataclass, field
 from typing import List, Optional
-from lute.models.term import Status
+from lute.models.term import Term, Status
 from lute.models.repositories import TermRepository, TermTagRepository
 from lute.term.model import Repository
 
@@ -96,3 +96,48 @@ def apply_bulk_updates(self, bulk_update_data):
 
             self.session.add(term)
             self.session.commit()
+
+    def apply_ajax_update(self, term_id, update_type, value):
+        "Apply single update from datatables updatable cells interactions."
+
+        repo = TermRepository(self.session)
+        term = repo.find(term_id)
+        if term is None:
+            raise TermServiceException(f"No term with id {term_id}")
+
+        if update_type == "translation":
+            trans = (value or "").strip()
+            if trans == "":
+                trans = None
+            term.translation = trans
+
+        elif update_type == "parents":
+            term.remove_all_parents()
+            for ptext in value:
+                # ptext already has zero-width spaces, if the term was looked
+                # up using the dropdown box.
+                pspec = Term.create_term_no_parsing(term.language, ptext)
+                parent = repo.find_by_spec(pspec)
+                use_parent = parent or pspec
+                term.add_parent(use_parent)
+            if len(value) == 1:
+                term.sync_status = True
+
+        elif update_type == "term_tags":
+            ttrepo = TermTagRepository(self.session)
+            add_tags = [ttrepo.find_or_create_by_text(a) for a in value]
+            term.remove_all_term_tags()
+            for tag in add_tags:
+                term.add_term_tag(tag)
+
+        elif update_type == "status":
+            sval = int(value)
+            if sval not in Status.ALLOWED:
+                raise TermServiceException("Bad status value")
+            term.status = sval
+
+        else:
+            raise TermServiceException("Bad update type")
+
+        self.session.add(term)
+        self.session.commit()
diff --git a/tests/unit/term/test_service_apply_ajax_update.py b/tests/unit/term/test_service_apply_ajax_update.py
new file mode 100644
index 000000000..ef686d96b
--- /dev/null
+++ b/tests/unit/term/test_service_apply_ajax_update.py
@@ -0,0 +1,123 @@
+"""
+Term service apply_ajax_update tests.
+
+Generally smoke tests.
+"""
+
+import pytest
+from lute.models.repositories import TermRepository
+from lute.db import db
+from lute.term.service import Service, TermServiceException
+from tests.utils import add_terms
+from tests.dbasserts import assert_sql_result
+
+# pylint: disable=unbalanced-tuple-unpacking,missing-function-docstring
+
+
+def assert_updated(termid, expected, msg=""):
+    "Return a term as a string for fast asserts."
+    t = TermRepository(db.session).find(termid)
+    bad_keys = [
+        k
+        for k in expected.keys()
+        if k not in ["parents", "status", "tags", "translation"]
+    ]
+    assert len(bad_keys) == 0, "no bad keys " + ", ".join(bad_keys)
+    if "translation" in expected:
+        assert expected["translation"] == t.translation, msg
+    if "parents" in expected:
+        parents = expected["parents"]
+        assert parents == sorted([p.text for p in t.parents]), msg
+        should_by_sync = len(parents) == 1
+        assert t.sync_status == should_by_sync, f"sync status with parents = {parents}"
+    if "status" in expected:
+        assert expected["status"] == t.status, msg
+    if "tags" in expected:
+        assert expected["tags"] == sorted([tag.text for tag in t.term_tags]), msg
+
+
+def _apply_updates(term_id, update_type, values):
+    "Apply updates."
+    svc = Service(db.session)
+    svc.apply_ajax_update(term_id, update_type, values)
+
+
+def test_smoke_test(app_context, spanish):
+    "Smoke test."
+    [t, _] = add_terms(spanish, ["T", "P"])
+    _apply_updates(t.id, "parents", ["P", "X"])
+    _apply_updates(t.id, "status", 4)
+    _apply_updates(t.id, "term_tags", ["tag1", "tag2"])
+    _apply_updates(t.id, "translation", "new_translation")
+    expected = {
+        "translation": "new_translation",
+        "parents": ["P", "X"],
+        "status": 4,
+        "tags": ["tag1", "tag2"],
+    }
+    assert_updated(t.id, expected, "smoke all items")
+
+
+def test_bad_term_id_throws(app_context):
+    svc = Service(db.session)
+    with pytest.raises(TermServiceException, match="No term with id -99"):
+        svc.apply_ajax_update(-99, "status", 99)
+
+
+def test_bad_update_type_throws(app_context, spanish):
+    svc = Service(db.session)
+    [t] = add_terms(spanish, ["T"])
+    with pytest.raises(TermServiceException, match="Bad update type"):
+        svc.apply_ajax_update(t.id, "trash", 99)
+
+
+def test_bad_status_throws(app_context, spanish):
+    svc = Service(db.session)
+    [t] = add_terms(spanish, ["T"])
+    with pytest.raises(TermServiceException, match="Bad status value"):
+        svc.apply_ajax_update(t.id, "status", 42)
+
+
+def test_can_remove_values(app_context, spanish):
+    "Smoke test."
+    [t, _] = add_terms(spanish, ["T", "P"])
+    _apply_updates(t.id, "parents", ["P", "X"])
+    _apply_updates(t.id, "term_tags", ["tag1", "tag2"])
+    _apply_updates(t.id, "translation", "new_translation")
+    expected = {
+        "translation": "new_translation",
+        "parents": ["P", "X"],
+        "tags": ["tag1", "tag2"],
+    }
+    assert_updated(t.id, expected, "smoke all items")
+
+    _apply_updates(t.id, "parents", [])
+    _apply_updates(t.id, "term_tags", [])
+    _apply_updates(t.id, "translation", "")
+    expected = {
+        "translation": None,
+        "parents": [],
+        "tags": [],
+    }
+    assert_updated(t.id, expected, "smoke all items updated back to nothing")
+
+
+def test_parent_created_if_needed(app_context, spanish):
+    [t, _] = add_terms(spanish, ["T", "P"])
+    sql = "select WoText from words order by WoText"
+    assert_sql_result(sql, ["P", "T"], "initial state")
+    _apply_updates(t.id, "parents", ["P", "X"])
+    assert_sql_result(sql, ["P", "T", "X"], "X created")
+
+
+def test_correct_parent_found_if_has_zero_width_spaces(app_context, spanish):
+    [t, _] = add_terms(spanish, ["T", "P Q"])
+    sql = "select WoText from words order by WoText"
+    assert_sql_result(sql, ["P/ /Q", "T"], "initial state")
+
+    zws = "\u200B"
+    parent = f"P{zws} {zws}Q"
+    _apply_updates(t.id, "parents", [parent])
+    expected = {"parents": [parent]}
+    assert_updated(t.id, expected, "correct zws-included parent found")
+    assert_sql_result(sql, ["P/ /Q", "T"], "nothing new created")
diff --git a/tests/unit/term/test_service.py b/tests/unit/term/test_service_bulk_updates.py
similarity index 99%
rename from tests/unit/term/test_service.py
rename to tests/unit/term/test_service_bulk_updates.py
index 9790bce64..7a0d28d91 100644
--- a/tests/unit/term/test_service.py
+++ b/tests/unit/term/test_service_bulk_updates.py
@@ -1,5 +1,5 @@
 """
-Term service tests.
+Term service apply_bulk_updates tests.
 """
 
 import pytest
@@ -10,8 +10,6 @@
 from tests.utils import add_terms
 from tests.dbasserts import assert_sql_result
 
-# Bulk parent update
-
 # pylint: disable=unbalanced-tuple-unpacking
 
 

From bcfb9e6a3070d8101fab42bd04570579d9591bc4 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Tue, 21 Jan 2025 23:45:44 -0600
Subject: [PATCH 04/13] Issue 573: make term listing editable.

---
 lute/models/term.py                           |   1 +
 lute/static/css/styles.css                    |  31 ++-
 .../static/vendor/tagify/tagify_overrides.css |   4 +-
 lute/templates/term/index.html                | 225 ++++++++++++++----
 lute/term/datatables.py                       |   6 +-
 lute/term/routes.py                           |  11 +-
 tests/acceptance/lute_test_client.py          |  29 ++-
 7 files changed, 250 insertions(+), 57 deletions(-)

diff --git a/lute/models/term.py b/lute/models/term.py
index 9aad0cc50..ac89236b6 100644
--- a/lute/models/term.py
+++ b/lute/models/term.py
@@ -322,6 +322,7 @@ class Status(db.Model):  # pylint: disable=too-few-public-methods
     UNKNOWN = 0
     WELLKNOWN = 99
     IGNORED = 98
+    ALLOWED = [UNKNOWN, 1, 2, 3, 4, 5, IGNORED, WELLKNOWN]
 
     __tablename__ = "statuses"
 
diff --git a/lute/static/css/styles.css b/lute/static/css/styles.css
index dfc4d0ece..afeab21f0 100644
--- a/lute/static/css/styles.css
+++ b/lute/static/css/styles.css
@@ -2182,18 +2182,20 @@ input[name='status']:disabled + label {
 
 /** Term listing (/term) action dropdown. ********************/
 
-.term-action-container {
-    display: flex;
+table#termtable .tagify,
+table#termtable .translationDiv {
+    border: 1px solid transparent;  /* Prevent elements pushing others around on hover. */
+    box-sizing: border-box;
 }
 
-/*
-.term-action-dropdown,
-.actionDiv {
+table#termtable .tagify:hover,
+table#termtable .translationDiv:hover {
+    border: 1px solid;
+}
+
+.term-action-container {
     display: flex;
-    align-items: center;
-    margin-right: 10px;
 }
-*/
 
 #bulkEditDiv {
     margin: 0.5rem;
@@ -2254,6 +2256,19 @@ div#termtable_wrapper div.dt-buttons {
     display: none;
 }
 
+.ajax-saved-checkmark {
+    position: absolute;
+    width: 1.5em; /* Define the size of the circle */
+    height: 1.5em; /* Make it a perfect circle */
+    background: green;
+    color: white;
+    border-radius: 50%; /* Turns the square into a circle */
+    font-size: 1em; /* Adjust size of the checkmark */
+    text-align: center;
+    line-height: 1.5em; /* Vertically center the checkmark */
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 2004;
+}
 
 /** Term image search ****************/
 
diff --git a/lute/static/vendor/tagify/tagify_overrides.css b/lute/static/vendor/tagify/tagify_overrides.css
index ccd9cbb11..5c3f35e86 100644
--- a/lute/static/vendor/tagify/tagify_overrides.css
+++ b/lute/static/vendor/tagify/tagify_overrides.css
@@ -61,6 +61,9 @@
 .tagify__dropdown {
     background: white !important;
     color: black !important;
+    min-width: 400px !important;
+    max-width: 600px;
+    text-overflow: ellipsis;
 }
 
 .tagify__tag {
@@ -84,4 +87,3 @@
     padding: 0.1rem !important;
     font-size: 0.8rem;
 }
-
diff --git a/lute/templates/term/index.html b/lute/templates/term/index.html
index 34257be35..77e8b57d4 100644
--- a/lute/templates/term/index.html
+++ b/lute/templates/term/index.html
@@ -38,23 +38,15 @@
       <td>Status range</td>
       <td>
         <select id="filtStatusMin">
-          <option value="0" selected>Unknown</option>
-          <option value="1">New (1)</option>
-          <option value="2">New (2)</option>
-          <option value="3">Learn (3)</option>
-          <option value="4">Learn (4)</option>
-          <option value="5">Learned</option>
-          <option value="99">Well Known</option>
+          {% for s in filter_statuses %}
+          <option value="{{s.id}}" {%if s.id==1 %}selected{% endif %}>{{ s.text }}</option>
+          {% endfor %}
         </select>
         to
         <select id="filtStatusMax">
-          <option value="0">Unknown</option>
-          <option value="1">New (1)</option>
-          <option value="2">New (2)</option>
-          <option value="3">Learn (3)</option>
-          <option value="4">Learn (4)</option>
-          <option value="5">Learned</option>
-          <option value="99" selected>Well Known</option>
+          {% for s in filter_statuses %}
+          <option value="{{s.id}}" {%if s.id==99 %}selected{% endif %}>{{ s.text }}</option>
+          {% endfor %}
         </select>
       </td>
     </tr>
@@ -98,11 +90,11 @@
       <th style="width: 20px;"><input type="checkbox" id="chkAll" onclick="handleChkAll()"></th>
       <!-- adding text-align because sometimes datatables seemed to align them to right. -->
       <th style="text-align: left">Term</th>
-      <th style="text-align: left">Parent</th>
+      <th style="text-align: left">Parents</th>
       <th style="text-align: left">Translation</th>
-      <th style="text-align: left">Language</th>
       <th style="text-align: left">Tags</th>
       <th style="text-align: left">Status</th>
+      <th style="text-align: left">Language</th>
       <th style="text-align: left">Added</th>
       <th style="text-align: left">TermID</th>
       <th style="text-align: left">LanguageID</th>
@@ -110,10 +102,177 @@
   </thead>
 </table>
 
+<script type="text/javascript" src="/static/js/never_cache/lute-tagify-utils.js" charset="utf-8"></script>
+
 <script>
 
   let setup_term_datatable = function(initial_search) {
-    var table = $('#termtable').DataTable({
+
+    // On success, show checkmark near the td where post happened.
+    function _show_saved_checkmark(td) {
+      const tooltip = $('<div class="ajax-saved-checkmark">&#10003;</div>').hide();
+      $('body').append(tooltip);
+      const targetElement = $(td);
+      const offset = targetElement.offset();
+      const offset_left = offset.left + targetElement.outerWidth() - tooltip.outerWidth() + 5;
+      tooltip.css({ top: offset.top + 5, left: offset_left });
+      tooltip.fadeIn(100);
+      setTimeout(() => { tooltip.fadeOut(200, function() { $(this).remove(); }); }, 800);
+    }
+
+    function post_update(td, term_id, update_type, update) {
+      const payload = {
+        term_id: term_id,
+        update_type: update_type,
+        values: update
+      }
+      const url = '/term/ajax_edit_from_index';
+      $.ajax({
+        url: url,
+        type: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify(payload),
+        success: function(response) {
+          // console.log('Success:', response.status);
+          _show_saved_checkmark(td);
+        },
+        error: function(xhr) {
+          if (xhr.responseJSON && xhr.responseJSON.error) {
+            console.error('Error:', xhr.responseJSON.error);
+          } else {
+            console.error('Unexpected error:', xhr.statusText);
+          }
+        }
+      });
+    }
+
+    /**
+     * Self-monitoring cell with a tagify instance that posts on lost
+     * focus, if the state has changed.
+     */
+    const editableTagifyCell = function(
+      word_id, td, tagify, post_tags_as,
+    ) {
+      // tagify loses focus when adding tags or clicking tag removal,
+      // calling the 'blur' event when not wanted; suppress that if needed.
+      let suppressBlur = false;
+
+      $(tagify.DOM.scope).on('mousedown', '.tagify__tag__removeBtn', function () {
+        suppressBlur = true;
+      });
+
+      // After add/remove, set focus on the tagify input span again,
+      // so that tagify.on('blur') is fired when leaving the input box.
+      tagify.on('add remove', function() {
+        suppressBlur = true;
+        setTimeout(function() {
+          const s = $(tagify.DOM.scope);
+          s.find("span.tagify__input").last().focus();
+          suppressBlur = false;
+        }, 0);
+      });
+
+      const add_pending_tags = function() {
+        const s = $(tagify.DOM.scope).find("span.tagify__input").last();
+        const pending_tag = s.text().trim();
+        if (pending_tag != '')
+          tagify.addTags([pending_tag], false, true);
+      };
+
+      // Save tag list state, only post on change.
+      const curr_tags = () => tagify.value.map(e => e.value).filter(e => e.trim() != "");
+      const curr_state = () => curr_tags().sort().join(';;');
+      let old_state = curr_state();
+      const post_if_changed = function() {
+        if (old_state != curr_state())
+          post_update(td, word_id, post_tags_as, curr_tags());
+        old_state = curr_state();
+      }
+
+      tagify.on('blur', function (e) {
+        if (!suppressBlur) {
+          add_pending_tags();
+          post_if_changed();
+        }
+      });
+    };
+
+    const _make_tagify_text_control = function(td, cellData) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = cellData;
+      $(td).empty().append(input);
+      return input;
+    };
+
+    const editableParentsCell = function (td, cellData, rowData, row, col) {
+      const input = _make_tagify_text_control(td, cellData);
+      const lang_id = parseInt(rowData["LgID"]);
+      const lang_id_func = () => lang_id;
+      const tagify = lute_tagify_utils_setup_parent_tagify(
+        input,
+        lang_id_func,
+        rowData["WoText"],
+        {}
+      );
+      editableTagifyCell(rowData["WoID"], td, tagify, 'parents');
+    };
+
+    const editableTranslationCell = function(td, cellData, rowData, row, col) {
+      const div = document.createElement('div');
+      $(div).addClass("translationDiv");
+      div.setAttribute('contenteditable', true);
+      div.innerHTML = (cellData ?? '').replace(/\r\n/g, '<br />');
+      $(td).empty().append(div);
+      const imgsrc = rowData["WiSource"]
+            ? `<img class="term-listing-image" style="margin-top: 5px;" src="${rowData["WiSource"]}" />` 
+            : '';
+      $(td).append(imgsrc);
+
+      let old_state = (cellData ?? '');
+      div.addEventListener('blur', function(e) {
+        // contenteditable puts each line into its own div.
+        const new_content = div.innerHTML
+              .replace(/<div>/g, '\r\n')
+              .replace(/<\/div>/g, '')
+              .replace(/<br\s*\/?>/g, '\r\n')
+              .trim();
+        if (old_state.trim() !== new_content) {
+          const row = table.row(e.target.parentElement);
+          post_update(td, rowData["WoID"], 'translation', new_content);
+          old_state = new_content;  // don't repost if just entering and exiting
+        }
+      });
+    };  // end editableTranslationCell
+
+    var TAGS = {{ tags | safe }};
+    const editableTagsCell = function (td, cellData, rowData, row, col) {
+      const input = _make_tagify_text_control(td, cellData);
+      const tagify = lute_tagify_utils_setup_term_tag_tagify(input, TAGS, {});
+      editableTagifyCell(rowData["WoID"], td, tagify, 'term_tags');
+    };
+
+    const editableStatusCell = function (td, cellData, rowData, row, col) {
+      function makeDropdown(td) {
+        const select = document.createElement('select');
+        select.innerHTML = '';
+        {% for s in update_statuses %}
+          select.innerHTML += '<option value="{{s.id}}">{{ s.text }}</option>';
+        {% endfor %}
+        select.value = parseInt(rowData["StID"]);
+
+        td.innerHTML = '';
+        td.appendChild(select);
+        return select;
+      }
+
+      const select = makeDropdown(td);
+      select.addEventListener('change', function () {
+        post_update(td, rowData["WoID"], 'status', select.value);
+      });
+    };
+
+    table = $('#termtable').DataTable({
       layout: {
         topStart: 'pageLength',
         topEnd: 'search',
@@ -149,11 +308,11 @@
       columns: [
         { searchable: false, orderable: false, render: render_checkbox },
         { name: "WoText", render: render_text },
-        { name: "ParentText", data: "ParentText" },
-        { name: "WoTranslation", width: "40%", searchable: true, render: render_translation },
+        { name: "ParentText", data: "ParentText", createdCell: editableParentsCell },
+        { name: "WoTranslation", width: "40%", searchable: true, data: "WoTranslation", createdCell: editableTranslationCell },
+        { name: "TagList", data: "TagList", createdCell: editableTagsCell },
+        { name: "StID", data: "StID", createdCell: editableStatusCell },
         { name: "LgName", data: "LgName" },
-        { name: "TagList", data: "TagList" },
-        { name: "StID", render: render_status },
         { name: "WoCreated", render: render_date_created },
         { name: "WoID", data: "WoID", visible: false },
         { name: "LgID", data: "LgID", visible: false },
@@ -189,26 +348,10 @@
     return `<a href="/term/edit/${row['WoID']}">${row['WoText']}</a>`;
   };
 
-  // Use the status ID for sorting, so Well Known comes after Learned (5),
-  // but use the status text ("New (1)") for the cell display.
-  let render_status = function ( data, type, row, meta ) {
-    return row["StText"];
-  };
-
   let render_checkbox = function (data, type, row, meta) {
     return `<input type="checkbox" class="chkWord" name="wordids" wordid="${row['WoID']}" langid="${row['LgID']}">`;
   };
 
-  let render_translation = function ( data, type, row, meta ) {
-    let tx = row["WoTranslation"] ?? '';
-    tx = tx.replaceAll("\r\n", "<br />");
-    let imgsrc = row["WiSource"] ?? '';
-    if (imgsrc != '')
-      imgsrc = `<img class="term-listing-image" style="margin-top: 5px;" src="${imgsrc}" />`;
-    let ret = [ tx, imgsrc ].filter((s) => s != '');
-    return ret.join('<br />');
-  };
-
   let render_date_created = function (data, type, row, meta) {
     const dt = row["WoCreated"];
     const datepart = dt.split(' ')[0];
@@ -255,10 +398,12 @@
       langids.push($(this).attr('langid'));
     });
     const unique_langids = [...new Set(langids)];
+    let ret = null;
     if (unique_langids.length == 1) {
-      return unique_langids[0];
+      ret = unique_langids[0];
     }
-    return null;
+    // console.log(`for langids ${langids}, get_lang_id returned ${ret}`);
+    return ret;
   }
 
   let _get_checked_wordids = function() {
@@ -355,7 +500,7 @@
     $('#filtStatusMax').val(parseInt(store.filtStatusMax ?? '99'));
     $('#filtIncludeIgnored').prop('checked', store.filtIncludeIgnored);
   };
-  
+
   let handle_show_hide_filter_click = function() {
     const fc = $('#filterControls');
     const is_hidden = (fc.css('display') == 'none');
diff --git a/lute/term/datatables.py b/lute/term/datatables.py
index 09bc48ed6..8a6ba57ee 100644
--- a/lute/term/datatables.py
+++ b/lute/term/datatables.py
@@ -23,7 +23,8 @@ def get_data_tables_list(parameters, session):
     INNER JOIN languages L on L.LgID = w.WoLgID
     INNER JOIN statuses S on S.StID = w.WoStatus
     LEFT OUTER JOIN (
-      SELECT WpWoID as WoID, GROUP_CONCAT(PText, ', ') AS parentlist
+      /* Special concat used for easy parsing on client. */
+      SELECT WpWoID as WoID, GROUP_CONCAT(PText, ';;') AS parentlist
       FROM
       (
         select WpWoID, WoText as PText
@@ -34,7 +35,8 @@ def get_data_tables_list(parameters, session):
       GROUP BY WpWoID
     ) AS parents on parents.WoID = w.WoID
     LEFT OUTER JOIN (
-      SELECT WtWoID as WoID, GROUP_CONCAT(TgText, ', ') AS taglist
+      /* Special concat used for easy parsing on client. */
+      SELECT WtWoID as WoID, GROUP_CONCAT(TgText, ';;') AS taglist
       FROM
       (
         select WtWoID, TgText
diff --git a/lute/term/routes.py b/lute/term/routes.py
index 636f537d9..320b085c2 100644
--- a/lute/term/routes.py
+++ b/lute/term/routes.py
@@ -46,13 +46,20 @@ def index(search):
     languages = db.session.query(Language).order_by(Language.name).all()
     langopts = [(lang.id, lang.name) for lang in languages]
     langopts = [(0, "(all)")] + langopts
-    statuses = [s for s in db.session.query(Status).all() if s.id != Status.UNKNOWN]
+    all_statuses = db.session.query(Status).all()
+    filter_statuses = [s for s in all_statuses if s.id != Status.IGNORED]
+    # Add ignored to the end of the list ... annoying that the numbers
+    # are "out of order" (i.e., IGNORED comes before WELLKNOWN).
+    update_statuses = filter_statuses + [
+        s for s in all_statuses if s.id == Status.IGNORED
+    ]
     r = Repository(db.session)
     return render_template(
         "term/index.html",
         initial_search=search,
         language_options=langopts,
-        statuses=statuses,
+        filter_statuses=filter_statuses,
+        update_statuses=update_statuses,
         tags=r.get_term_tags(),
         in_term_index_listing=True,
     )
diff --git a/tests/acceptance/lute_test_client.py b/tests/acceptance/lute_test_client.py
index 210e52a63..c8464a4d4 100644
--- a/tests/acceptance/lute_test_client.py
+++ b/tests/acceptance/lute_test_client.py
@@ -311,10 +311,31 @@ def get_term_table_content(self):
         def _to_string(row):
             tds = row.find_by_css("td")
             rowtext = [td.text.strip() for td in tds]
-            ret = "; ".join(rowtext).strip()
-            if ret == "No data available in table":
-                return ret
-            return "; ".join(rowtext[:-1]).strip()
+            check = "; ".join(rowtext).strip()
+            if check == "No data available in table":
+                return check
+
+            rowtext = [""]  # first field is empty checkbox
+            rowtext.append(tds[1].text.strip())  # term
+
+            parenttags = tds[2].text.strip()
+            parenttags = ", ".join(parenttags.split("\n"))
+            rowtext.append(parenttags)
+
+            rowtext.append(tds[3].text.strip())  # translation
+            rowtext.append(tds[6].text.strip())  # language
+
+            termtags = tds[4].text.strip()
+            termtags = ", ".join(termtags.split("\n"))
+            rowtext.append(termtags)
+
+            select_element = row.find_by_css("select")
+            selected_value = select_element.value
+            selected_option = select_element.find_by_css(
+                f'option[value="{selected_value}"]'
+            )
+            rowtext.append(selected_option.text)  # status select
+            return "; ".join(rowtext).strip()
 
         css = "#termtable tbody tr"
         rows = list(self.browser.find_by_css(css))

From 0689de0613243c80710bb07e32754476aba07995 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 14:12:10 -0600
Subject: [PATCH 05/13] Fix tagify hooks for pasting parents.

---
 lute/static/js/lute-tagify-utils.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lute/static/js/lute-tagify-utils.js b/lute/static/js/lute-tagify-utils.js
index 569be2c11..69e5bffe3 100644
--- a/lute/static/js/lute-tagify-utils.js
+++ b/lute/static/js/lute-tagify-utils.js
@@ -110,6 +110,10 @@ function lute_tagify_utils_setup_parent_tagify(
     _fetch_whitelist(mytagify, e.detail.value, controller);
   }
 
+  // Need a global tagify instance here
+  // so that hooks can use it.
+  var tagify_instance = null;
+
   const make_Tagify_for = function(input) {
     const base_settings = {
       editTags: false,
@@ -145,9 +149,8 @@ function lute_tagify_utils_setup_parent_tagify(
           return new Promise((resolve, reject) => {
             clipboardData = content.clipboardData || window.clipboardData;
             pastedData = clipboardData.getData('Text');
-            // console.log("pasting => " + pastedData);
             let e = { detail: { value: pastedData } };
-            build_autocomplete_dropdown(ret, e);
+            build_autocomplete_dropdown(tagify_instance, e);
             resolve();
           });
         }
@@ -155,7 +158,8 @@ function lute_tagify_utils_setup_parent_tagify(
     };
 
     let settings = { ...base_settings, ...override_base_settings };
-    return new Tagify(input, settings);
+    tagify_instance = new Tagify(input, settings);
+    return tagify_instance;
   };
 
   const tagify = make_Tagify_for(input);

From bb34597ebd189ff538711de4f3c786f263a3988b Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 15:35:20 -0600
Subject: [PATCH 06/13] Inherit status from parent in ajax call.

---
 lute/term/service.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lute/term/service.py b/lute/term/service.py
index 8da8bb343..da0971cd0 100644
--- a/lute/term/service.py
+++ b/lute/term/service.py
@@ -113,14 +113,17 @@ def apply_ajax_update(self, term_id, update_type, value):
 
         elif update_type == "parents":
             term.remove_all_parents()
+            last_parent = None
             for ptext in value:
                 # ptext already has zero-width spaces, if the term was looked
                 # up using the dropdown box.
                 pspec = Term.create_term_no_parsing(term.language, ptext)
                 parent = repo.find_by_spec(pspec)
                 use_parent = parent or pspec
+                last_parent = use_parent
                 term.add_parent(use_parent)
             if len(value) == 1:
+                term.status = last_parent.status
                 term.sync_status = True
 
         elif update_type == "term_tags":

From 91f7d8545b415e391cfa37c8d7c04731735128e5 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 15:36:39 -0600
Subject: [PATCH 07/13] Redraw term listing after ajax post.

---
 lute/templates/term/index.html | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/lute/templates/term/index.html b/lute/templates/term/index.html
index 77e8b57d4..a4b8af569 100644
--- a/lute/templates/term/index.html
+++ b/lute/templates/term/index.html
@@ -135,6 +135,7 @@
         success: function(response) {
           // console.log('Success:', response.status);
           _show_saved_checkmark(td);
+          $('#termtable').DataTable().draw();
         },
         error: function(xhr) {
           if (xhr.responseJSON && xhr.responseJSON.error) {
@@ -210,10 +211,7 @@
       const lang_id = parseInt(rowData["LgID"]);
       const lang_id_func = () => lang_id;
       const tagify = lute_tagify_utils_setup_parent_tagify(
-        input,
-        lang_id_func,
-        rowData["WoText"],
-        {}
+        input, lang_id_func, rowData["WoText"], {}
       );
       editableTagifyCell(rowData["WoID"], td, tagify, 'parents');
     };

From e00366cef83446a2e0664a90056f09cddb3e73fb Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 15:38:03 -0600
Subject: [PATCH 08/13] Add filtTermIDs to term datatables query.

---
 lute/term/datatables.py            | 4 ++++
 lute/term/routes.py                | 1 +
 tests/unit/term/test_datatables.py | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/lute/term/datatables.py b/lute/term/datatables.py
index 8a6ba57ee..485dbb64c 100644
--- a/lute/term/datatables.py
+++ b/lute/term/datatables.py
@@ -90,6 +90,10 @@ def get_data_tables_list(parameters, session):
         st_where = f"({st_where} OR StID = 98)"
     wheres.append(st_where)
 
+    termids = parameters["filtTermIDs"].strip()
+    if termids != "":
+        wheres.append(f"w.WoID in ({termids})")
+
     # Phew.
     return DataTablesSqliteQuery.get_data(
         base_sql + " WHERE " + " AND ".join(wheres), parameters, session.connection()
diff --git a/lute/term/routes.py b/lute/term/routes.py
index 320b085c2..733110109 100644
--- a/lute/term/routes.py
+++ b/lute/term/routes.py
@@ -75,6 +75,7 @@ def _load_term_custom_filters(request_form, parameters):
         "filtStatusMin",
         "filtStatusMax",
         "filtIncludeIgnored",
+        "filtTermIDs",
     ]
     request_params = request_form.to_dict(flat=True)
     for p in filter_param_names:
diff --git a/tests/unit/term/test_datatables.py b/tests/unit/term/test_datatables.py
index ea8b07d5f..dd9a6041b 100644
--- a/tests/unit/term/test_datatables.py
+++ b/tests/unit/term/test_datatables.py
@@ -31,6 +31,7 @@ def fixture_dt_params():
         "filtStatusMin": "0",
         "filtStatusMax": "0",
         "filtIncludeIgnored": "false",
+        "filtTermIDs": "",
     }
     return params
 
@@ -54,4 +55,5 @@ def test_smoke_query_with_filter_params_runs(app_context, _dt_params):
     _dt_params["filtStatusMin"] = "2"
     _dt_params["filtStatusMax"] = "4"
     _dt_params["filtIncludeIgnored"] = "true"
+    _dt_params["filtTermIDs"] = "42,43"
     get_data_tables_list(_dt_params, db.session)

From 07ab41a0884d9bc5c8ba57b588012493ccab7db6 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 15:44:58 -0600
Subject: [PATCH 09/13] Handle ?termids=... param in term listing.

---
 lute/templates/term/index.html | 101 ++++++++++++++++++++++++++-------
 1 file changed, 81 insertions(+), 20 deletions(-)

diff --git a/lute/templates/term/index.html b/lute/templates/term/index.html
index a4b8af569..3f2549b35 100644
--- a/lute/templates/term/index.html
+++ b/lute/templates/term/index.html
@@ -56,6 +56,13 @@
         <input id="filtIncludeIgnored" type="checkbox" />
       </td>
     </tr>
+    <tr id="filtTermIDs_row" style="display: none">
+      <td>Term IDs</td>
+      <td>
+        <span id="filtTermIDs_message">(msg here)</span>
+        <input type="hidden" id="filtTermIDs" />
+      </td>
+    </tr>
   </table>
   <button id="clearFilters">Clear all</button>
   <br />
@@ -332,7 +339,8 @@
           filtAgeMax: () => $('#filtAgeMax').val(),
           filtStatusMin: () => $('#filtStatusMin').val(),
           filtStatusMax: () => $('#filtStatusMax').val(),
-          filtIncludeIgnored: () => $('#filtIncludeIgnored').prop('checked')
+          filtIncludeIgnored: () => $('#filtIncludeIgnored').prop('checked'),
+          filtTermIDs: () => $('#filtTermIDs').val(),
         },
 
         dataType: "json"
@@ -462,32 +470,58 @@
   };
 
 
-  let handle_filter_update = function() {
+  let update_filter_storage = function() {
     const store = {
-      filtLanguage: $('#filtLanguage').val(),
       filtDisplay: $('#filterControls').css('display'),
+      filtLanguage: $('#filtLanguage').val(),
       filtParentsOnly: $('#filtParentsOnly').prop('checked'),
       filtAgeMin: $('#filtAgeMin').val(),
       filtAgeMax: $('#filtAgeMax').val(),
       filtStatusMin: $('#filtStatusMin').val(),
       filtStatusMax: $('#filtStatusMax').val(),
-      filtIncludeIgnored: $('#filtIncludeIgnored').prop('checked')
+      filtIncludeIgnored: $('#filtIncludeIgnored').prop('checked'),
+      filtTermIDs: $('#filtTermIDs').val(),
     };
     // console.log('saving: ' + JSON.stringify(store));
     sessionStorage.setItem('termtable_filters', JSON.stringify(store));
+  };
+
+  let wipe_filter_storage = function() {
+    $('#filtLanguage').val(0);
+    $('#filtParentsOnly').prop('checked', false);
+    $('#filtAgeMin').val('');
+    $('#filtAgeMax').val('');
+    $('#filtStatusMin').val(1);
+    $('#filtStatusMax').val(99);
+    $('#filtIncludeIgnored').prop('checked', false);
+    $('#filtTermIDs').val('');
+    $('#filtTermIDs_row').css('display', 'none');
+    update_filter_storage();
+  };
+
+  let handle_filter_update = function() {
+    update_filter_storage();
     $('#termtable').DataTable().draw();
   };
 
 
+  let update_filter_button_src = function(is_hidden) {
+    // console.log(`is_hidden = ${is_hidden}`);
+    const new_src = is_hidden ?
+          "{{ url_for('static', filename='icn/plus-button.png') }}" :
+          "{{ url_for('static', filename='icn/minus-button.png') }}";
+    $('#showHideFilters').prop('src', new_src);
+  }
+
   let load_filters_from_storage = function() {
     fs = sessionStorage.getItem('termtable_filters');
     // console.log(fs);
     if (fs == null)
       return;
     store = JSON.parse(fs);
-    $('#filterControls').css('display', store.filtDisplay);
 
-    $('#showHideFilters').prop('src', "{{ url_for('static', filename='icn/minus-button.png') }}");
+    $('#filterControls').css('display', store.filtDisplay);
+    update_filter_button_src(store.filtDisplay == "none");
     $('#filtLanguage').val(parseInt(store.filtLanguage ?? '0'));
     $('#filtParentsOnly').prop('checked', store.filtParentsOnly ?? false);
     if ((store.filtAgeMin ?? '') != '')
@@ -497,30 +531,45 @@
     $('#filtStatusMin').val(parseInt(store.filtStatusMin ?? '1'));
     $('#filtStatusMax').val(parseInt(store.filtStatusMax ?? '99'));
     $('#filtIncludeIgnored').prop('checked', store.filtIncludeIgnored);
+    if ((store.filtTermIDs ?? '') != '') {
+      $('#filtTermIDs').val(store.filtTermIDs);
+      $('#filtTermIDs_row').css('display', 'table-row');
+      $('#filtTermIDs_message').text('(Filtered from reading pane)');
+    }
   };
 
   let handle_show_hide_filter_click = function() {
     const fc = $('#filterControls');
-    const is_hidden = (fc.css('display') == 'none');
-    const new_src = is_hidden ? "{{ url_for('static', filename='icn/minus-button.png') }}" : "{{ url_for('static', filename='icn/plus-button.png') }}";
-    $('#showHideFilters').prop('src', new_src);
-    handle_clear_filters();
-    fc.css('display', is_hidden ? 'block' : 'none');
-    handle_filter_update();
+    wipe_filter_storage();
+    const new_display = (fc.css('display') == 'none' ? 'block' : 'none');
+    fc.css('display', new_display);
+    update_filter_button_src(new_display == 'none');
+    update_filter_storage();  // to store new display setting.
+    $('#termtable').DataTable().draw();
   };
 
   let handle_clear_filters = function() {
-    $('#filtLanguage').val(0);
-    $('#filtParentsOnly').prop('checked', false);
-    $('#filtAgeMin').val('');
-    $('#filtAgeMax').val('');
-    $('#filtStatusMin').val(1);
-    $('#filtStatusMax').val(99);
-    $('#filtIncludeIgnored').prop('checked', false);
-    handle_filter_update();
+    wipe_filter_storage();
+    $('#termtable').DataTable().draw();
+  };
+
+  // Return the termids if those were passed, else null.
+  let get_termids_from_query_string = function() {
+    const queryString = window.location.search;
+    const params = new URLSearchParams(queryString);
+    if (!params.has('termids'))
+      return null;
+    let termids = params.get('termids');
+    // The termids are passed as "+" separated values,
+    // but the browser might replace them with spaces.
+    // Restore '+' for standard handling.
+    termids = termids.replaceAll(' ', '+');
+    const termidsArray = termids.split('+');
+    return termidsArray;
   };
 
   $(document).ready(function () {
+    // Handlers.
     $('#showHideFilters').click(handle_show_hide_filter_click);
     $('#filtLanguage').change(handle_filter_update);
     $('#filtParentsOnly').change(handle_filter_update);
@@ -529,8 +578,20 @@
     $('#filtStatusMin').change(handle_filter_update);
     $('#filtStatusMax').change(handle_filter_update);
     $('#filtIncludeIgnored').change(handle_filter_update);
+    // filtTermIDs are not interactive, no handler needed.
     $('#clearFilters').click(handle_clear_filters);
 
+    // If term ids were passed in, override any storage values.
+    // Filters are fast to apply, not concerned about this.
+    const termids = get_termids_from_query_string();
+    if (termids != null) {
+      wipe_filter_storage();
+      $('#filterControls').css('display', 'block');
+      $('#filtStatusMin').val(0);
+      $('#filtTermIDs').val(termids.join(','));
+      update_filter_storage();
+    }
+
     load_filters_from_storage();
 
     // Setting up the datatable now, so the filters are

From bf84d7797b1f6e74f95106ae7a44c1a6c9a1aaf6 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 15:45:20 -0600
Subject: [PATCH 10/13] Add reading menu link to show term list.

---
 lute/static/js/lute.js                | 21 +++++++++++++++++++++
 lute/templates/read/reading_menu.html |  5 +++++
 2 files changed, 26 insertions(+)

diff --git a/lute/static/js/lute.js b/lute/static/js/lute.js
index 79fbff1cc..4691c1597 100644
--- a/lute/static/js/lute.js
+++ b/lute/static/js/lute.js
@@ -825,6 +825,27 @@ let show_translation_for_text = function(text) {
 };
 
 
+// Get all the word ids on the current page, open new tab with just those terms.
+function open_term_list_for_current_page() {
+  const ids = new Set();
+  $('span.word').each(function () {
+    ids.add($(this).data("wid"));
+  });
+  if (ids.length == 0)
+    return; // Nothing to do.
+
+  const idarray = Array.from(ids);
+  const idlist = idarray.join('+');
+
+  // console.log('passing ids:');
+  // console.log(idlist);
+  // let msg = idlist;
+  // window.alert(msg);
+  const url = `/term/index?termids=${idlist}`;
+  window.open(url);
+}
+
+
 /** Show the translation using the next dictionary. */
 function handle_translate(span_attribute) {
   const tis = get_textitems_spans(span_attribute);
diff --git a/lute/templates/read/reading_menu.html b/lute/templates/read/reading_menu.html
index b24b545bc..064d4458b 100644
--- a/lute/templates/read/reading_menu.html
+++ b/lute/templates/read/reading_menu.html
@@ -91,6 +91,11 @@
       </ul>
     </div>
   </li>
+  <li>
+    <a id="listTermsOnCurrentPage" class="reading-menu-item" href="" onclick="open_term_list_for_current_page(); return false;">
+      Term list
+    </a>
+  </li>
   <li>
     <!-- mobile users need this link, since they don't have keyboard shortcuts. -->
     <a id="translateSentence" class="reading-menu-item" href="" onclick="handle_translate('sentence-id'); return false;">

From 7b06808e17eaa769725c57a39134cbb1c01a4713 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 16:08:33 -0600
Subject: [PATCH 11/13] Clarify term-parent status updates in ajax updates.

---
 lute/term/service.py                          | 13 ++++----
 .../term/test_service_apply_ajax_update.py    | 31 +++++++++++++++++++
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/lute/term/service.py b/lute/term/service.py
index da0971cd0..6d50bbc3d 100644
--- a/lute/term/service.py
+++ b/lute/term/service.py
@@ -113,17 +113,18 @@ def apply_ajax_update(self, term_id, update_type, value):
 
         elif update_type == "parents":
             term.remove_all_parents()
-            last_parent = None
+            parent = None
             for ptext in value:
                 # ptext already has zero-width spaces, if the term was looked
                 # up using the dropdown box.
                 pspec = Term.create_term_no_parsing(term.language, ptext)
-                parent = repo.find_by_spec(pspec)
-                use_parent = parent or pspec
-                last_parent = use_parent
-                term.add_parent(use_parent)
+                parent = repo.find_by_spec(pspec) or pspec
+                term.add_parent(parent)
             if len(value) == 1:
-                term.status = last_parent.status
+                if parent.status != 0:
+                    term.status = parent.status
+                else:
+                    parent.status = term.status
                 term.sync_status = True
 
         elif update_type == "term_tags":
diff --git a/tests/unit/term/test_service_apply_ajax_update.py b/tests/unit/term/test_service_apply_ajax_update.py
index ef686d96b..9e2d000ab 100644
--- a/tests/unit/term/test_service_apply_ajax_update.py
+++ b/tests/unit/term/test_service_apply_ajax_update.py
@@ -58,6 +58,37 @@ def test_smoke_test(app_context, spanish):
     assert_updated(t.id, expected, "smoke all items")
 
 
+def test_term_gets_parent_status_if_parent_status_set(app_context, spanish):
+    "Smoke test."
+    [t, p] = add_terms(spanish, ["T", "P"])
+    t.status = 1
+    p.status = 4
+    db.session.add(t)
+    db.session.add(p)
+    db.session.commit()
+
+    _apply_updates(t.id, "parents", ["P"])
+    expected = {"status": 4}
+    assert_updated(t.id, expected, "gets parent's status")
+    assert_updated(p.id, expected, "parent keeps status")
+
+
+def test_term_keeps_status_if_parent_status_unknown(app_context, spanish):
+    "Smoke test."
+    [t, p] = add_terms(spanish, ["T", "P"])
+    t.status = 1
+    p.status = 0
+    db.session.add(t)
+    db.session.add(p)
+    db.session.commit()
+
+    _apply_updates(t.id, "parents", ["P"])
+    expected = {"status": 1}
+    assert_updated(t.id, expected, "keeps own status")
+    expected = {"status": 1}
+    assert_updated(p.id, expected, "parent gets child's status!")
+
+
 def test_bad_term_id_throws(app_context):
     svc = Service(db.session)
     with pytest.raises(TermServiceException, match="No term with id -99"):

From 92a28dfdd0e06817d5e881a3c269219109944d09 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 16:14:45 -0600
Subject: [PATCH 12/13] Fix lint.

---
 lute/term/service.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lute/term/service.py b/lute/term/service.py
index 6d50bbc3d..5be2b0353 100644
--- a/lute/term/service.py
+++ b/lute/term/service.py
@@ -99,6 +99,7 @@ def apply_bulk_updates(self, bulk_update_data):
 
     def apply_ajax_update(self, term_id, update_type, value):
         "Apply single update from datatables updatable cells interactions."
+        # pylint: disable=too-many-branches
 
         repo = TermRepository(self.session)
         term = repo.find(term_id)

From 565cbf46c58121a0723ef832ed4706714f2c4efb Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Wed, 22 Jan 2025 16:36:27 -0600
Subject: [PATCH 13/13] Fix playwright ambiguity.

---
 lute/templates/read/reading_menu.html | 2 +-
 tests/playwright/playwright.py        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lute/templates/read/reading_menu.html b/lute/templates/read/reading_menu.html
index 064d4458b..b7cd82027 100644
--- a/lute/templates/read/reading_menu.html
+++ b/lute/templates/read/reading_menu.html
@@ -80,7 +80,7 @@
       <ul>
         <li>
           <a id="readmenu_bookmark_index" class="reading-menu-item" href="/bookmarks/{{ book.id }}" title="Index">
-            List
+            List bookmarks
           </a>
         </li>
         <li>
diff --git a/tests/playwright/playwright.py b/tests/playwright/playwright.py
index 38ed28f8d..e5492bd6c 100644
--- a/tests/playwright/playwright.py
+++ b/tests/playwright/playwright.py
@@ -97,7 +97,7 @@ def _print(s):
     page.get_by_role("link", name="Add bookmark").hover()
     page.get_by_role("link", name="Add bookmark").click()
 
-    page.get_by_role("link", name="List").click()
+    page.get_by_role("link", name="List bookmarks").click()
     page.get_by_text("…").first.hover()
     page.once("dialog", lambda dialog: dialog.accept())
     page.get_by_role("link", name="Delete").click()