add the other activity envisioned on the home page (though not sending data yet)

src/views/HomeView.vue

@@ -46,14 +46,37 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Feed
+      Time Safari
     </h1>
-    <span :class="{ hidden: isHiddenSpinner }">
-      <fa icon="spinner" class="fa-fw"></fa>
-      Loading&hellip;
-    </span>
+
     <div>
-      <!-- Results List -->
+      <h1 class="text-2xl">Quick Action</h1>
+      <p>Choose a contact to whom to show appreciation:</p>
+      <div class="px-4">
+        <button
+          v-for="contact in allContacts"
+          :key="contact.did"
+          @click="openDialog(contact)"
+        >
+          {{ contact.name }},&nbsp;
+        </button>
+        <button @click="openDialog()">or nobody in particular</button>
+      </div>
+    </div>
+
+    <GiftedDialog
+      ref="customDialog"
+      @dialog-result="handleDialogResult"
+      message="Confirm to publish to the world."
+    >
+    </GiftedDialog>
+
+    <div>
+      <h1 class="text-2xl">Latest Activity</h1>
+      <span :class="{ hidden: isHiddenSpinner }">
+        <fa icon="spinner" class="fa-fw"></fa>
+        Loading&hellip;
+      </span>
       <ul class="">
         <li
           class="border-b border-slate-300"
@@ -80,18 +103,19 @@
 </template>
 
 <script lang="ts">
+import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";
 
+import GiftedDialog from "@/components/GiftedDialog.vue";
 import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { didInfo } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import * as R from "ramda";
 
 @Options({
-  components: {},
+  components: { GiftedDialog },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -102,6 +126,7 @@ export default class HomeView extends Vue {
   feedData = [];
   feedPreviousOldestId = null;
   isHiddenSpinner = true;
+  showInput = false;
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -215,6 +240,24 @@ export default class HomeView extends Vue {
     return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
   }
 
+  recordGive(contact) {
+    console.log("recordGive", contact);
+  }
+
+  openDialog(contact) {
+    this.$refs.customDialog.open(contact);
+  }
+  handleDialogResult(result) {
+    if (result.action === "confirm") {
+      return new Promise((resolve) => {
+        console.log("Dialog confirmed: ", result.description);
+        resolve();
+      });
+    } else {
+      // action was "cancel"
+    }
+  }
+
   // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";