Save queries

frontend/src/components/grid-items.svelte

@@ -96,9 +96,12 @@
     contextMenu.show(evt, item.menu);
   }
 
-  function removeItem(index) {
-    items.splice(index, 1);
-    items = items;
+  function removeItem(index, itemKey) {
+    if (Array.isArray(items)) {
+      items.splice(index, 1);
+      items = items;
+    }
+    dispatch('removeItem', itemKey);
   }
 
   function formatValue(value) {
@@ -167,7 +170,7 @@
 
     {#if canRemoveItems}
       <td class="has-button">
-        <button class="btn-sm" type="button" on:click={() => removeItem(index)}>
+        <button class="btn-sm" type="button" on:click|stopPropagation={() => removeItem(index, item[key])} on:dblclick|stopPropagation>
           <Icon name="x" />
         </button>
       </td>

frontend/src/components/grid.svelte

@@ -62,6 +62,7 @@
         bind:inputsValid
         on:select
         on:trigger
+        on:removeItem
       />
     </tbody>
   </table>
@@ -87,6 +88,7 @@
     border-collapse: collapse;
     width: 100%;
     background-color: #fff;
+    table-layout: fixed;
   }
 
   table thead {

frontend/src/components/hint.svelte

@@ -9,7 +9,7 @@
 
 <style>
   .hint {
-    padding: 1rem;
+    padding: 0.5rem;
     margin-bottom: 0.5rem;
     display: grid;
     gap: 1rem;
@@ -17,9 +17,14 @@
     background-color: rgba(255, 214, 64, 0.5);
     border: 1px solid #c5a42e;
     border-radius: 10px;
+    align-items: center;
   }
 
   .content {
     align-self: center;
+    line-height: 1.3;
+  }
+  .content :global(strong) {
+    font-weight: 700;
   }
 </style>

frontend/src/components/icon.svelte

@@ -81,5 +81,11 @@
     <circle cx="12" cy="12" r="10"/>
   {:else if name === 'info'}
     <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
+  {:else if name === 'play'}
+    <path d="m5 3 14 9-14 9V3z"/>
+  {:else if name === 'upload'}
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
+  {:else if name === 'save'}
+    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/>
   {/if}
 </svg>