Convert paste-overlay to paste-dialog

[jdeanwallace]

Resolves #1137

This PR completely removes the old "Paste" frontend code and replaces it with a custom <paste-dialog> element.

Screen.Recording.2023-08-31.at.14.52.44.mov

Notes:

1. Once the paste-dialog is open, you can just press the "Enter" key to actually paste it to the target machine. This is in accordance to our style guide:
   

   tinypilot/app/templates/styleguide.html

   Lines 260 to 262 in 273b200

   	If there is a call-to-action button associated with an input field,
   	then pressing the “Enter”/“Return” key on the keyboard should trigger
   	the call-to-action. The behaviour should be the same as if the button

   
   However, this behavior might be unexpected especially if you're manually typing text into the textarea and want to add a newline character. With this in mind, I made sure that you can still add a newline character using Shift+Enter.

[jdeanwallace]

Automated comment from CodeApprove ➜

⏳ @mtlynch please review this Pull Request

[mtlynch]

Automated comment from CodeApprove ➜

Cool, I didn't realize how much complexity we'd eliminate by getting rid of the legacy overlay.

---

In: Discussion

Once the paste-dialog is open, you can just press the "Enter" key to actually paste it to the target machine. This is in accordance to our style guide:

tinypilot/app/templates/styleguide.html

Lines 260 to 262 in 273b200

	If there is a call-to-action button associated with an input field,
	then pressing the “Enter”/“Return” key on the keyboard should trigger
	the call-to-action. The behaviour should be the same as if the button

However, this behavior might be unexpected especially if you're manually typing text into the textarea and want to add a newline character. With this in mind, I made sure that you can still add a newline character using Shift+Enter.

I think this is the right behavior, but we shouldn't forward the <Enter> keystroke to the target system. Currently, it gets sent after the pasted text. For example, if I type hi<Enter>, the target system sees:

2023-08-31 09:16:22.134 socket_api      DEBUG [SENSITIVE] received keystroke message: {'metaLeft': False, 'metaRight': False, 'altLeft': False, 'altRight': False, 'shiftLeft': False, 'shiftRight': False, 'ctrlLeft': False, 'ctrlRight': False, 'key': 'h', 'code': 'KeyH'} [/SENSITIVE]
2023-08-31 09:16:22.154 socket_api      DEBUG [SENSITIVE] received keystroke message: {'metaLeft': False, 'metaRight': False, 'altLeft': False, 'altRight': False, 'shiftLeft': False, 'shiftRight': False, 'ctrlLeft': False, 'ctrlRight': False, 'key': 'i', 'code': 'KeyI'} [/SENSITIVE]
2023-08-31 09:16:22.174 socket_api      DEBUG [SENSITIVE] received keystroke message: {'metaLeft': False, 'metaRight': False, 'altLeft': False, 'altRight': False, 'shiftLeft': False, 'shiftRight': False, 'ctrlLeft': False, 'ctrlRight': False, 'key': 'Enter', 'code': 'Enter'} [/SENSITIVE]

---

In: Discussion
Can we disable the paste button when the textarea contains an empty string?

---

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

> Line 17
  <h3>Paste Text to the Target System</h3>

Can we simplify this to "Paste Text"?

---

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

> Line 19
    The target system needs to have an <i>en-US</i> or <i>en-GB</i> keyboard

Let's change this to:

<p>
  Note: The target system must have an <span class="monospace">en-US</span> or
  <span class="monospace">en-GB</span> keyboard layout.
</p>

---

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

> Line 50
            pasteArea: this.shadowRoot.querySelector("#paste-area"),

(nit) Suggest reordering either alphabetically or by order of appearance (top to bottom, left to right).

---

👀 @jdeanwallace it's your turn please take a look

[jdeanwallace]

Automated comment from CodeApprove ➜

---

In: Discussion
Sure.

---

In: Discussion
Oh, nice catch. Fixed.

---

In: app/templates/custom-elements/paste-dialog.html:
Done.

---

In: app/templates/custom-elements/paste-dialog.html:
Sure.

---

In: app/templates/custom-elements/paste-dialog.html:
Thanks, I went with order of appearance.

---

👀 @mtlynch it's your turn please take a look

[mtlynch]

Automated comment from CodeApprove ➜

✔️ Approved

LGTM, thanks!

---

👀 @jdeanwallace it's your turn please take a look