From ed523628ff4f4878c4a0123e52c58cf31fced03c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Mon, 18 Dec 2023 18:42:08 +0100
Subject: [PATCH] feat: try typing field in chords section

resolves #68
fix: "No Results" not translated
---
 src/i18n/de/index.ts                  |  2 ++
 src/i18n/en/index.ts                  |  2 ++
 src/routes/config/chords/+page.svelte | 19 ++++++++++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts
index 99d0c72d..f81da39d 100644
--- a/src/i18n/de/index.ts
+++ b/src/i18n/de/index.ts
@@ -111,6 +111,7 @@ const de = {
       DUPLICATE: "Akkord existiert bereits",
       search: {
         PLACEHOLDER: "{0} Akkord{{|e}} durchsuchen",
+        NO_RESULTS: "Keine Ergebnisse",
       },
       conflict: {
         TITLE: "Akkordkonflikt",
@@ -119,6 +120,7 @@ const de = {
         CONFIRM: "Überschreiben",
         ABORT: "Überspringen",
       },
+      TRY_TYPING: "Versuche hier zu tippen",
     },
     layout: {
       TITLE: "Layout",
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index 12ed3927..ea414776 100644
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -107,6 +107,7 @@ const en = {
       DUPLICATE: "Chord already exists",
       search: {
         PLACEHOLDER: "Search {0} chord{{|s}}",
+        NO_RESULTS: "No results",
       },
       conflict: {
         TITLE: "Chord conflict",
@@ -115,6 +116,7 @@ const en = {
         CONFIRM: "Overwrite",
         ABORT: "Skip",
       },
+      TRY_TYPING: "Try typing here",
     },
     layout: {
       TITLE: "Layout",
diff --git a/src/routes/config/chords/+page.svelte b/src/routes/config/chords/+page.svelte
index 2aee9f52..54b356ba 100644
--- a/src/routes/config/chords/+page.svelte
+++ b/src/routes/config/chords/+page.svelte
@@ -125,9 +125,10 @@
         </tr>
       {/each}
     {:else}
-      <caption> No Results </caption>
+      <caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
     {/if}
   </table>
+  <textarea placeholder={$LL.configure.chords.TRY_TYPING()}></textarea>
 </section>
 
 <style lang="scss">
@@ -143,6 +144,20 @@
     min-width: 8ch;
   }
 
+  textarea {
+    transition: border-color 250ms ease;
+    background: none;
+    color: inherit;
+    border: 1px dashed var(--md-sys-color-surface-variant);
+    padding: 8px;
+    border-radius: 4px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--md-sys-color-primary);
+    }
+  }
+
   caption {
     margin-top: 156px;
   }
@@ -175,6 +190,7 @@
 
   section {
     position: relative;
+    display: flex;
 
     overflow: hidden;
 
@@ -185,6 +201,7 @@
   }
 
   table {
+    height: fit-content;
     overflow: hidden;
     min-width: min(90vw, 16.5cm);
     transition: all 1s ease;