sllow quick gifting all the way to the server, maybe with hours

src/components/GiftedDialog.vue

@@ -1,17 +1,41 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1>Received from {{ contact?.name || "nobody in particular" }}</h1>
-      <p>{{ message }}</p>
+      <h1 class="text-lg text-center">
+        Received from {{ contact?.name || "nobody in particular" }}
+      </h1>
+      <p class="py-2">{{ message }}</p>
       <input
         type="text"
         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
         placeholder="What you received"
         v-model="description"
       />
-      <button @click="confirm">Confirm</button>
-      &nbsp;
-      <button @click="cancel">Cancel</button>
+      <div class="flex flex-row">
+        <span class="py-4">Hours</span>
+        <input
+          type="text"
+          class="block w-8 rounded border border-slate-400 ml-4 text-center"
+          v-model="hours"
+        />
+        <div class="flex flex-col px-1">
+          <div>
+            <fa icon="square-caret-up" size="2xl" @click="increment()" />
+          </div>
+          <div>
+            <fa icon="square-caret-down" size="2xl" @click="decrement()" />
+          </div>
+        </div>
+      </div>
+      <div class="text-right">
+        <button class="rounded border border-slate-400" @click="confirm">
+          <span class="m-2">Confirm</span>
+        </button>
+        &nbsp;
+        <button class="rounded border border-slate-400" @click="cancel">
+          <span class="m-2">Cancel</span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -23,6 +47,7 @@ export default {
     return {
       contact: null,
       description: "",
+      hours: "0",
       visible: false,
     };
   },
@@ -34,11 +59,18 @@ export default {
     close() {
       this.visible = false;
     },
+    increment() {
+      this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
+    },
+    decrement() {
+      this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
+    },
     confirm() {
       this.close();
       this.$emit("dialog-result", {
         action: "confirm",
         contact: this.contact,
+        hours: parseFloat(this.hours),
         description: this.description,
       });
     },