Persist setting whether to mask paste area (#1765)

Related #1739. Stacked on
#1764.

This PR preserves the “Mask Input” toggle state of the paste dialog by
storing it as frontend setting. That way, it persists across page
refreshs.

This idea was mentioned [by a user in the
ticket](#1739 (comment)),
and it seems to be a sensible UI feature to me here.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1765"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <[email protected]>

app/static/js/settings.js

@@ -9,6 +9,7 @@ const defaults = {
   isKeyHistoryEnabled: true,
   cursor: "default",
   isKeyboardVisible: true,
+  isPasteAreaMasked: false,
 };
 
 // Initialize any undefined settings to their default values.
@@ -56,3 +57,12 @@ export function setKeyboardVisibility(isVisible) {
   settings["isKeyboardVisible"] = isVisible;
   persistSettings();
 }
+
+export function isPasteAreaMasked() {
+  return settings["isPasteAreaMasked"];
+}
+
+export function setPasteAreaMasked(isMasked) {
+  settings["isPasteAreaMasked"] = isMasked;
+  persistSettings();
+}

app/templates/custom-elements/paste-dialog.html

@@ -75,6 +75,7 @@ <h3>Paste Text</h3>
 <script type="module">
   import { DialogClosedEvent, DialogFailedEvent } from "/js/events.js";
   import { pasteText } from "/js/controllers.js";
+  import { isPasteAreaMasked, setPasteAreaMasked } from "/js/settings.js";
 
   (function () {
     const template = document.querySelector("#paste-dialog-template");
@@ -118,8 +119,8 @@ <h3>Paste Text</h3>
         }
 
         initialize() {
-          this.toggleAttribute("mask-input", false);
-          this._elements.maskInputButton.checked = false;
+          this.toggleAttribute("mask-input", isPasteAreaMasked());
+          this._elements.maskInputButton.checked = isPasteAreaMasked();
           this._elements.pasteArea.value = "";
           this._elements.pasteArea.focus();
           this._elements.confirmButton.toggleAttribute("disabled", true);
@@ -152,6 +153,7 @@ <h3>Paste Text</h3>
         }
 
         _onToggleMaskInput(isMasked) {
+          setPasteAreaMasked(isMasked);
           this.toggleAttribute("mask-input", isMasked);
           this._elements.pasteArea.focus();
         }