From 9d3356508199d857a1908e0c9503dbafedc4ece7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Wed, 1 Nov 2023 16:24:16 +0100
Subject: [PATCH] fix: search page pagination

---
 src/routes/EditActions.svelte         | 137 ++++++++++++++++++++++++++
 src/routes/config/chords/+page.svelte |  86 +++++++++-------
 2 files changed, 185 insertions(+), 38 deletions(-)

diff --git a/src/routes/EditActions.svelte b/src/routes/EditActions.svelte
index d1fbc903..90b15741 100644
--- a/src/routes/EditActions.svelte
+++ b/src/routes/EditActions.svelte
@@ -25,6 +25,75 @@
   }
 </script>
 
+<!-- <svg viewBox="0 0 36 36" style="width: 48px">
+  <defs>
+    <rect
+      id="mouth"
+      x="13"
+      y="13"
+      width="512"
+      height="10"
+      rx="5"
+      style="transform-origin: center; animation-direction: alternate-reverse"
+    >
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="scale"
+        values="1; 0.25; 1"
+        keyTimes="0; 0.33; 1"
+        dur="0.4"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <mask id="inner-mask">
+      <rect x="0" y="0" width="36" height="36" />
+      <use fill="white" href="#mouth" />
+    </mask>
+    <mask id="clip">
+      <rect x="0" y="0" width="36" height="36" fill="white" />
+      <use fill="black" href="#mouth" />
+    </mask>
+  </defs>
+
+  <g mask="url(#clip)" style="transform-origin: center">
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="scale"
+      values="1 1;0.9 0.8; 1 1"
+      keyTimes="0; 0.33; 1"
+      dur="0.4"
+      repeatCount="indefinite"
+    />
+    <circle cx="18" cy="18" r="14" stroke="currentcolor" fill="none" stroke-width="5" />
+    <circle cx="18" cy="18" r="10" fill="currentcolor" stroke-width="6" />
+  </g>
+  <g mask="url(#inner-mask)">
+    <text
+      mask="url(#inner-mask)"
+      x="18"
+      y="17.2"
+      fill="currentcolor"
+      text-anchor="start"
+      dominant-baseline="central"
+      font-size="8"
+      font-weight="bold"
+    >
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="translate"
+        from="0"
+        to="-76.8"
+        dur="1.6"
+        repeatCount="indefinite"
+      />
+      c&nbsp;&nbsp;&nbsp;c&nbsp;&nbsp;&nbsp;o&nbsp;&nbsp;&nbsp;s&nbsp;&nbsp;&nbsp;c&nbsp;&nbsp;&nbsp;c&nbsp;&nbsp;&nbsp;o&nbsp;&nbsp;&nbsp;s
+    </text>
+  </g>
+</svg> -->
+
 <button
   use:action={{title: $LL.saveActions.UNDO(), shortcut: "ctrl+z"}}
   class="icon"
@@ -52,11 +121,79 @@
 {/if}
 
 <style lang="scss">
+  .pacman {
+    position: relative;
+
+    aspect-ratio: 1;
+    height: 32px;
+
+    background: currentcolor;
+    border: 8px solid currentcolor;
+    border-radius: 100%;
+    outline: 6px solid currentcolor;
+    outline-offset: 2px;
+
+    animation: pacman 0.2s linear infinite alternate-reverse;
+
+    &::before {
+      content: "";
+
+      position: absolute;
+      top: 0;
+      left: 25%;
+
+      width: 200%;
+      height: 100%;
+
+      background: var(--md-sys-color-background);
+      animation: squish 0.2s linear infinite alternate-reverse;
+      border-radius: 16px;
+    }
+
+    &::after {
+      content: "c c o s";
+      position: absolute;
+      display: flex;
+      width: 500%;
+      animation: go 1s linear infinite;
+    }
+  }
+
+  @keyframes go {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: -100% 0;
+    }
+  }
+
+  @keyframes squish {
+    from {
+      scale: 1;
+    }
+
+    to {
+      scale: 1 0.5;
+    }
+  }
+
+  @keyframes pacman {
+    to {
+      scale: 1;
+    }
+
+    to {
+      scale: 0.9;
+    }
+  }
+
   .click-me {
     display: flex;
     align-items: center;
     justify-content: center;
 
+    height: fit-content;
     margin-inline: 8px;
     padding-block: 2px;
     padding-inline-start: 4px;
diff --git a/src/routes/config/chords/+page.svelte b/src/routes/config/chords/+page.svelte
index bd3da764..5cb14378 100644
--- a/src/routes/config/chords/+page.svelte
+++ b/src/routes/config/chords/+page.svelte
@@ -46,19 +46,29 @@
   $: lastPage = Math.ceil(items.length / pageSize) - 1
 
   let page = 0
+  $: {
+    items
+    page = 0
+  }
 </script>
 
 <svelte:head>
   <title>Chord Manager</title>
 </svelte:head>
 
-<div>
+<div class="search-container">
   <input
     type="search"
     placeholder={$LL.configure.chords.search.PLACEHOLDER($chords.length)}
     on:input={search}
   />
-  <span>{page + 1} / {lastPage + 1}</span>
+  <div class="paginator">
+    {#if lastPage !== -1}
+      {page + 1} / {lastPage + 1}
+    {:else}
+      - / -
+    {/if}
+  </div>
   <button class="icon" on:click={() => (page = Math.max(page - 1, 0))} use:action={{shortcut: "ctrl+left"}}
     >navigate_before</button
   >
@@ -71,26 +81,46 @@
 
 <section bind:this={results}>
   <table>
-    {#each items.slice(page * pageSize, (page + 1) * pageSize) as [chord]}
-      <tr>
-        <th>
-          <ActionStringEdit actions={chord.phrase} />
-        </th>
-        <td>
-          <ActionStringEdit actions={chord.actions} />
-        </td>
-        <td class="table-buttons">
-          <button class="icon compact">share</button>
-          <button class="icon compact" on:click={() => $changes.push({chords: [{delete: chord}]})}
-            >delete</button
-          >
-        </td>
-      </tr>
-    {/each}
+    {#if lastPage !== -1}
+      {#each items.slice(page * pageSize, (page + 1) * pageSize) as [chord]}
+        <tr>
+          <th>
+            <ActionStringEdit actions={chord.phrase} />
+          </th>
+          <td>
+            <ActionStringEdit actions={chord.actions} />
+          </td>
+          <td class="table-buttons">
+            <button class="icon compact">share</button>
+            <button class="icon compact" on:click={() => $changes.push({chords: [{delete: chord}]})}
+              >delete</button
+            >
+          </td>
+        </tr>
+      {/each}
+    {:else}
+      <caption> No Results </caption>
+    {/if}
   </table>
 </section>
 
 <style lang="scss">
+  .search-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .paginator {
+    display: flex;
+    justify-content: flex-end;
+    min-width: 8ch;
+  }
+
+  caption {
+    margin-top: 156px;
+  }
+
   input[type="search"] {
     width: 512px;
     margin-block-start: 16px;
@@ -134,26 +164,6 @@
     transition: all 1s ease;
   }
 
-  table abbr {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding-block: 4px;
-    padding-inline: 8px;
-
-    font-size: 16px;
-    font-style: normal;
-    text-decoration: none;
-
-    border: 1px solid var(--md-sys-color-outline);
-    border-radius: 8px;
-
-    &.icon {
-      font-size: 20px;
-    }
-  }
-
   th {
     text-align: start;
   }