feat: try typing field in chords section

resolves #68
fix: "No Results" not translated

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",

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",

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;