A11y: move buttons into fields

src/UI/Popup/Notes/AddNoteComment.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import type { SpecialVisualizationState } from "../../SpecialVisualization"
+  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
+  import { placeholder } from "../../../Utils/placeholder"
+  import Translations from "../../i18n/Translations"
+  import Speech_bubble from "../../../assets/svg/Speech_bubble.svelte"
+  import Tr from "../../Base/Tr.svelte"
+  import NoteCommentElement from "./NoteCommentElement"
+  import Resolved from "../../../assets/svg/Resolved.svelte"
+  import Note from "../../../assets/svg/Note.svelte"
+  import LoginToggle from "../../Base/LoginToggle.svelte"
+
+  export let state: SpecialVisualizationState
+  export let tags: UIEventSource<Record<string, string>>
+  let id = tags.data.id
+  $: {
+    id = $tags.id
+  }
+
+  let txt = new UIEventSource(undefined)
+  let _txt: string = undefined
+  txt.addCallbackD(t => {
+    _txt = t
+  })
+  $: {
+    txt.setData(_txt)
+  }
+  const t = Translations.t.notes
+
+  let isClosed: Store<boolean> = tags.map((tags) => (tags?.["closed_at"] ?? "") !== "")
+
+  async function addComment() {
+    if ((txt.data ?? "") == "") {
+      return
+    }
+
+    if (isClosed.data) {
+      await state.osmConnection.reopenNote(id, txt.data)
+      await state.osmConnection.closeNote(id)
+    } else {
+      await state.osmConnection.addCommentToNote(id, txt.data)
+    }
+    NoteCommentElement.addCommentTo(txt.data, tags, state)
+    txt.setData("")
+  }
+
+  async function closeNote() {
+    await state.osmConnection.closeNote(id, txt.data)
+    tags.data["closed_at"] = new Date().toISOString()
+    tags.ping()
+  }
+
+  async function reopenNote() {
+    await state.osmConnection.reopenNote(id, txt.data)
+    tags.data["closed_at"] = undefined
+    tags.ping()
+  }
+</script>
+
+<LoginToggle ignoreLoading={true} {state}>
+  <Tr slot="not-logged-in" t={t.loginToAddComment} />
+
+  <form class="m-0 px-2 py-1 flex flex-col border-2 border-black rounded-xl interactive border-interactive" on:submit|preventDefault={() => addComment()}>
+    <label class="neutral-label font-bold">
+      <Tr t={t.addAComment} />
+      <textarea bind:value={_txt} class="w-full h-24 rounded-l border border-grey" rows="3"
+                use:placeholder={t.addCommentPlaceholder} />
+    </label>
+
+    <div class="flex flex-col">
+
+      {#if $txt?.length > 0}
+        <button class="primary flex" on:click={() => addComment()}>
+          <!-- Add a comment -->
+          <Speech_bubble class="h-7 w-7 pr-2" />
+          <Tr t={t.addCommentPlaceholder} />
+        </button>
+      {:else}
+        <div class="alert w-full">
+          <Tr t={t.typeText} />
+        </div>
+      {/if}
+
+
+      {#if !$isClosed}
+        <button class="flex items-center" on:click={() => closeNote()}>
+          <Resolved class="h-8 w-8 pr-2" />
+          <!-- Close note -->
+          {#if $txt === undefined || $txt === ""}
+            <Tr t={t.closeNote} />
+          {:else}
+            <Tr t={t.addCommentAndClose} />
+          {/if}
+        </button>
+      {:else}
+        <button class="flex items-center" on:click={() => reopenNote()}>
+          <!-- Reopen -->
+          <Note class="h-7 w-7 pr-2" />
+          {#if $txt === undefined || $txt === ""}
+            <Tr t={t.reopenNote} />
+          {:else}
+            <Tr t={t.reopenNoteAndComment} />
+          {/if}
+        </button>
+
+      {/if}
+    </div>
+
+  </form>
+
+</LoginToggle>