fix: show every password error in its own fixed-height line (closes #493)

The add wallet screen reported a missing, short or mismatched password in
the flash line at the top of the popup, and the private key export,
recovery phrase and delete wallet screens each wrote to a line of their own
above the password field. All four now use showError() and hideError() with
a fixed-height error line below the field, as the send confirmation and
approval screens do. On the add wallet screen the line sits beside the
Import button, which keeps its place at 360x600. The line clears when the
screen is shown again and when the password is tried again. Other add
wallet messages stay in the flash line.

Model: opus-5-5

src/popup/views/showPhrase.js

@@ -21,6 +21,8 @@ const {
     $,
     showView,
     showFlash,
+    showError,
+    hideError,
     flashCopyFeedback,
     goBack,
     onViewLeave,
@@ -52,11 +54,6 @@ function isCurrentReveal(generation) {
     );
 }
 
-function fail(message) {
-    $("show-phrase-flash").textContent = message;
-    $("show-phrase-flash").style.visibility = "visible";
-}
-
 // Wipe every trace of the phrase and drop the wallet selection. Safe to
 // call when nothing was ever revealed, and safe to call twice.
 function clear() {
@@ -66,8 +63,7 @@ function clear() {
     $("show-phrase-password").value = "";
     $("show-phrase-result").classList.add("hidden");
     $("show-phrase-password-section").classList.remove("hidden");
-    $("show-phrase-flash").textContent = "";
-    $("show-phrase-flash").style.visibility = "hidden";
+    hideError("show-phrase-password-error");
 }
 
 function show(walletIdx) {
@@ -90,19 +86,23 @@ function show(walletIdx) {
 async function reveal() {
     const password = $("show-phrase-password").value;
     if (!password) {
-        fail("Please enter your password.");
+        showError("show-phrase-password-error", "Please enter your password.");
         return;
     }
     if (walletIndex === null) {
-        fail("No wallet is selected.");
+        showError("show-phrase-password-error", "No wallet is selected.");
         return;
     }
     const wallet = state.wallets[walletIndex];
     if (!walletHasRecoveryPhrase(wallet)) {
-        fail("This wallet does not have a recovery phrase.");
+        showError(
+            "show-phrase-password-error",
+            "This wallet does not have a recovery phrase.",
+        );
         return;
     }
 
+    hideError("show-phrase-password-error");
     const btn = $("btn-show-phrase-reveal");
     btn.disabled = true;
     btn.classList.add("text-muted");
@@ -120,13 +120,14 @@ async function reveal() {
         $("show-phrase-password-section").classList.add("hidden");
         $("show-phrase-value").textContent = phrase;
         $("show-phrase-result").classList.remove("hidden");
-        $("show-phrase-flash").textContent = "";
-        $("show-phrase-flash").style.visibility = "hidden";
     } catch {
         if (!isCurrentReveal(generation)) return;
         // Deliberately not the caught error: the message is fixed so that
         // nothing derived from the ciphertext or the attempt can surface.
-        fail("That password is incorrect. Please try again.");
+        showError(
+            "show-phrase-password-error",
+            "That password is incorrect. Please try again.",
+        );
     } finally {
         btn.disabled = false;
         btn.classList.remove("text-muted");