feat: property adding in entrylist

webui/src/components/widgets/EntryList.svelte

@@ -42,9 +42,16 @@
   const VALUE_COL = "value";
 
   // Editing
+  let adding = false;
+  let addHover = false;
+  let addFocus = false;
+  let newAttrSelector: Selector;
   let newEntryAttribute = "";
   let newEntryValue: IValue | undefined;
 
+  $: if (adding && newAttrSelector) newAttrSelector.focus();
+  $: if (!addFocus && !addHover) adding = false;
+
   async function addEntry(attribute: string, value: IValue) {
     dispatch("change", {
       type: "create",
@@ -375,28 +382,54 @@
     {/each}
 
     {#if !attributes?.length}
-      <tr class="add-row">
-        {#if displayColumns.includes(ATTR_COL)}
-          <td>
-            <Selector
-              type="attribute"
-              bind:attribute={newEntryAttribute}
-              attributeOptions={attributeOptions || []}
+      {#if adding}
+        <tr
+          class="add-row"
+          on:mouseenter={() => (addHover = true)}
+          on:mouseleave={() => (addHover = false)}
+        >
+          {#each displayColumns as column}
+            {#if column == ATTR_COL}
+              <td>
+                <Selector
+                  type="attribute"
+                  bind:attribute={newEntryAttribute}
+                  {attributeOptions}
+                  on:focus={(ev) => (addFocus = ev.detail)}
+                  bind:this={newAttrSelector}
+                />
+              </td>
+            {:else if column === VALUE_COL}
+              <td>
+                <Selector
+                  type="value"
+                  bind:value={newEntryValue}
+                  on:focus={(ev) => (addFocus = ev.detail)}
+                />
+              </td>
+            {:else}
+              <td></td>
+            {/if}
+          {/each}
+          <td class="attr-action">
+            <IconButton
+              name="save"
+              on:click={() => addEntry(newEntryAttribute, newEntryValue)}
             />
           </td>
-        {/if}
-        {#if displayColumns.includes(VALUE_COL)}
-          <td>
-            <Selector type="value" bind:value={newEntryValue} />
+        </tr>
+      {:else}
+        <tr>
+          <td class="fullwidth" colspan={displayColumns.length + 1}>
+            <IconButton
+              outline
+              subdued
+              name="plus-circle"
+              on:click={() => (adding = true)}
+            />
           </td>
-        {/if}
-        <td class="attr-action">
-          <IconButton
-            name="plus-circle"
-            on:click={() => addEntry(newEntryAttribute, newEntryValue)}
-          />
-        </td>
-      </tr>
+        </tr>
+      {/if}
     {/if}
   </table>
 </div>
@@ -443,6 +476,10 @@
       width: 33%;
     }
 
+    :global(td.fullwidth > *) {
+      width: 100%;
+    }
+
     .unset {
       opacity: 0.66;
       pointer-events: none;