Update 'project.task.yaml'

* hide no contacts when there are no contacts
* replace contact property with giver (? can you have another contact give you something ?)

project.task.yaml

@@ -1,36 +1,32 @@
 
 tasks:
+- 40 notifications :
+  - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
+
 - 01 add a location for a project via map pin
 - 04 search by a bounding box for local projects (see API by clicking on "Nearby")
-- 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:jose
+- 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:matthew
-- 02 Fix images on projectview - allow choice of image from a pallete of images or a url image.
+- 02 Fix images on projectview - allow choice of image from a pallete of images or a url image (discovery page display also)
+  - SEE: https://github.com/dmester/jdenticon assignee:jose
 
-- 08 Scan QR code to import into contacts.
+- 08 Scan QR code to import into contacts assignee:matthew
+  - SEE: https://github.com/gruhn/vue-qrcode-reader
 
-- 40 notifications :
+- Show pop-up or some message confirming that settings & contacts download has been initiated/finished assignee:matthew
-    - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data
 
-- refactor UI :
+- Ensure each action sent to the server has a confirmation - eg registration (ie a toast something that dismisses after 5-10s)
-  - .5 Alerts show at the top and can be missed if you've scrolled down on the page, eg. account data download
+  - SEE: https://github.com/emmanuelsw/notiwind assignee:jose
-  - .2 Make alerts at the top more visible (because they're currently a similar color and sometimes aren't seen)
-
-- Show pop-up or some message confirming that settings & contacts download has been initiated/finished
-
-- Ensure each action sent to the server has a confirmation - eg registration
 
 - Home Feed & Quick Give screen :
   - 01 save the feed-viewed status in settings storage ("afterQuery")
-  - 01 quick action - send action, maybe choose via canvas tool https://github.com/konvajs/vue-konva
+  - 01 quick action - send action, maybe choose via canvas tool 
+    - SEE: https://github.com/konvajs/vue-konva
 
-- 24 Move to Vite
+- 24 Move to Vite assignee:matthew
 
-- .5 add project ID to the URL, to make a project publicly-accessible
-- .5 remove edit from project page for projects owned by others
 - .5 fix where user 0 sees no txns from user 1 on contacts page but sees them on list page
-- .2 there are three dots at the top of ProjectViewView that refreshes the page but doesn't do anything else
-- 01 fix images on project page, on discovery page
 - .2 on ProjectViewView, show different messages for "to" and "from" sections if none exist
-- .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?)
+- .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?) assignee:jose
 - .2 fix rate limit verbiage (with the new one-per-day allowance) assignee:trent
 
 - Discuss whether the remaining tasks are worthwhile before MVP release.

src/components/GiftedDialog.vue

@@ -2,7 +2,7 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">
-        {{ message }} {{ giver?.name || "somebody not specified" }}
+        {{ message }} {{ giver?.did || "somebody not specified" }}
       </h1>
       <input
         type="text"

src/main.ts

@@ -10,8 +10,6 @@ import "./assets/styles/tailwind.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
-  faArrowLeft,
-  faArrowRight,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -53,8 +51,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
-  faArrowLeft,
-  faArrowRight,
   faBurst,
   faCalendar,
   faChevronLeft,

src/views/ContactAmountsView.vue

@@ -1,78 +1,83 @@
 <template>
   <QuickNav selected="Contacts"></QuickNav>
   <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa
+        ></router-link>
+      </h1>
+    </div>
+
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       Given with {{ contact?.name }}
     </h1>
 
     <!-- Results List -->
-    <table
+    <div>
-      class="table-auto w-full border-t border-slate-300 text-sm sm:text-base text-center"
+      <div class="border-b border-slate-300 flex">
-    >
+        <div class="w-1/4"></div>
-      <thead class="bg-slate-100">
+        <div class="w-1/4">from them</div>
-        <tr class="border-b border-slate-300">
+        <div class="w-1/4"></div>
-          <th></th>
+        <div class="w-1/4">to them</div>
-          <th class="px-1 py-2">From Them</th>
+      </div>
-          <th></th>
+      <div
-          <th class="px-1 py-2">To Them</th>
+        class="border-b border-slate-300 flex"
-        </tr>
-      </thead>
-      <tbody>
-        <tr
         v-for="record in giveRecords"
         :key="record.id"
-          class="border-b border-slate-300"
       >
-          <td class="p-1 text-xs sm:text-sm text-left text-slate-500">
+        <div class="w-1/4">
           {{ new Date(record.issuedAt).toLocaleString() }}
-          </td>
+        </div>
-          <td class="p-1">
+        <div class="w-1/4">
           <span v-if="record.agentDid == contact.did">
             <div class="font-bold">
               {{ record.amount }} {{ record.unit }}
-                <span v-if="record.amountConfirmed" title="Confirmed">
+              <span v-if="record.amountConfirmed" class="tooltip">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
+                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+                <span class="tooltiptext">Confirmed</span>
               </span>
-                <button v-else @click="confirm(record)" title="Unconfirmed">
+              <button v-else class="tooltip" @click="confirm(record)">
-                  <fa icon="circle" class="text-blue-600 fa-fw" />
+                <fa icon="circle" class="text-blue-600 fa-fw ml-1" />
+                <span class="tooltiptext">Unconfirmed</span>
               </button>
             </div>
-              <div class="italic text-xs sm:text-sm text-slate-500">
+            <br />
             {{ record.description }}
-              </div>
           </span>
-          </td>
+        </div>
-          <td class="p-1">
+        <div class="w-1/8">
           <span v-if="record.agentDid == contact.did">
-              <fa icon="arrow-left" class="text-slate-400 fa-fw" />
+            <fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" />
           </span>
           <span v-else>
-              <fa icon="arrow-right" class="text-slate-400 fa-fw" />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
           </span>
-          </td>
+        </div>
-          <td class="p-1">
+        <div class="w-1/4">
           <span v-if="record.agentDid != contact.did">
             <div class="font-bold">
               {{ record.amount }} {{ record.unit }}
-                <span v-if="record.amountConfirmed" title="Confirmed">
+              <span v-if="record.amountConfirmed" class="tooltip">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
+                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+                <span class="tooltiptext">Confirmed</span>
               </span>
-                <button
+              <button v-else class="tooltip" @click="cannotConfirmMessage()">
-                  v-else
+                <fa icon="circle" class="text-slate-600 fa-fw ml-1" />
-                  @click="cannotConfirmMessage()"
+                <span class="tooltiptext">Unconfirmed</span>
-                  title="Unconfirmed"
-                >
-                  <fa icon="circle" class="text-slate-600 fa-fw" />
               </button>
             </div>
-              <div class="italic text-xs sm:text-sm text-slate-500">
+            <br />
             {{ record.description }}
-              </div>
           </span>
-          </td>
+        </div>
-        </tr>
+      </div>
-      </tbody>
+    </div>
-    </table>
     <AlertMessage
       :alertTitle="alertTitle"
       :alertMessage="alertMessage"

src/views/ContactsView.vue

@@ -70,9 +70,9 @@
     </div>
 
     <!-- Results List -->
-    <ul v-if="contacts.length > 0" class="border-t border-slate-300">
+    <ul v-if="contacts.length > 0">
       <li
-        class="border-b border-slate-300 py-4"
+        class="border-b border-slate-300"
         v-for="contact in contacts"
         :key="contact.did"
       >
@@ -85,63 +85,45 @@
             Public Key (base 64): {{ contact.publicKeyBase64 }}
           </div>
 
-          <div id="ContactActions" class="flex gap-1.5 mt-2">
           <button
             v-if="contact.seesMe"
-              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+            class="tooltip"
             @click="setVisibility(contact, false)"
-              title="They can see you"
           >
-              <fa icon="eye" class="fa-fw" />
+            <fa icon="eye" class="text-slate-900 fa-fw ml-1" />
+            <span class="tooltiptext">They can see you</span>
           </button>
-            <button
+          <button v-else class="tooltip" @click="setVisibility(contact, true)">
-              v-else
+            <span class="tooltiptext">They cannot see you</span>
-              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+            <fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" />
-              @click="setVisibility(contact, true)"
-              title="They cannot see you"
-            >
-              <fa icon="eye-slash" class="fa-fw" />
           </button>
 
-            <button
+          <button class="tooltip" @click="checkVisibility(contact)">
-              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+            <span class="tooltiptext">Check Visibility</span>
-              @click="checkVisibility(contact)"
+            <fa icon="rotate" class="text-slate-900 fa-fw ml-1" />
-              title="Check Visibility"
-            >
-              <fa icon="rotate" class="fa-fw" />
           </button>
 
-            <button
+          <button v-if="contact.registered" class="tooltip">
-              v-if="contact.registered"
+            <span class="tooltiptext">Registered</span>
-              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+            <fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" />
-              title="Registered"
-            >
-              <fa icon="person-circle-check" class="fa-fw" />
           </button>
-            <button
+          <button v-else @click="register(contact)" class="tooltip">
-              v-else
+            <span class="tooltiptext">Registration Unknown</span>
-              @click="register(contact)"
+            <fa
-              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              icon="person-circle-question"
-              title="Registration unknown"
+              class="text-slate-900 fa-fw ml-1"
-            >
+            />
-              <fa icon="person-circle-question" class="fa-fw" />
           </button>
 
-            <button
+          <button @click="deleteContact(contact)" class="px-9 tooltip">
-              @click="deleteContact(contact)"
+            <span class="tooltiptext">Delete!</span>
-              class="text-sm uppercase bg-red-600 text-white px-2 py-1.5 rounded-md"
+            <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
-              title="Delete"
-            >
-              <fa icon="trash-can" class="fa-fw" />
           </button>
 
-            <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
+          <div v-if="showGiveNumbers" class="float-right">
-              <button
+            <div class="float-right">
-                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+              <div class="tooltip">
-                @click="onClickAddGive(activeDid, contact.did)"
+                to:
-                title="givenByMeDescriptions[contact.did]"
-              >
-                To:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -152,15 +134,15 @@
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <span
-              </button>
+                  v-if="givenByMeDescriptions[contact.did]"
-
+                  class="tooltiptext-left"
-              <button
-                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
-                @click="onClickAddGive(contact.did, activeDid)"
-                title="givenToMeDescriptions[contact.did]"
                 >
-                From:
+                  {{ givenByMeDescriptions[contact.did] }}
+                </span>
+              </div>
+              <div class="tooltip px-2">
+                from:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -171,18 +153,25 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <span
-              </button>
+                  v-if="givenToMeDescriptions[contact.did]"
-
+                  class="tooltiptext-left"
+                >
+                  {{ givenToMeDescriptions[contact.did] }}
+                </span>
+              </div>
               <router-link
                 :to="{
                   name: 'contact-amounts',
                   query: { contactDid: contact.did },
                 }"
-                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                class="tooltip"
-                title="See all given activity"
               >
-                <fa icon="file-lines" class="fa-fw" />
+                <button>
+                  <fa icon="gift" class="pt-1 pr-2 text-slate-500" />Give
+                </button>
+                <fa icon="file-lines" class="text-slate-600 fa-fw ml-1" />
+                <span class="tooltiptext-left">See All Given Activity</span>
               </router-link>
             </div>
           </div>
@@ -214,12 +203,13 @@ import {
 import { Component, Vue } from "vue-facing-decorator";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import GiftedDialog from "@/components/GiftedDialog.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
 @Component({
-  components: { AlertMessage, QuickNav },
+  components: { AlertMessage, QuickNav, GiftedDialog },
 })
 export default class ContactsView extends Vue {
   activeDid = "";

src/views/HomeView.vue

@@ -22,7 +22,7 @@
           <h3
             class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
           >
-            {{ contact.name || "(no name)" }}
+            {{ contact.name || contact.did }}
           </h3>
         </li>
       </ul>
@@ -39,6 +39,7 @@
       <!-- If there are no contacts, show this instead: -->
       <div
         class="rounded border border-dashed border-slate-300 bg-slate-100 px-4 py-3 text-center italic text-slate-500"
+        v-if="allContacts.length === 0"
       >
         (No contacts to show.)
       </div>
@@ -286,7 +287,7 @@ export default class HomeView extends Vue {
   handleDialogResult(result) {
     if (result.action === "confirm") {
       return new Promise((resolve) => {
-        this.recordGive(result.contact?.did, result.description, result.hours);
+        this.recordGive(result.giver?.did, result.description, result.hours);
         resolve();
       });
     } else {

src/views/ProjectViewView.vue

@@ -12,13 +12,6 @@
         >
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
-        <!-- Context Menu -->
-        <a
-          href=""
-          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
-          ><fa icon="ellipsis-vertical" class="fa-fw"></fa
-        ></a>
-
         View Plan
       </h1>
     </div>
@@ -56,6 +49,7 @@
         </div>
       </div>
       <button
+        v-if="issuer == activeDid"
         type="button"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
         @click="onEditClick()"

src/views/ProjectsView.vue

@@ -8,7 +8,6 @@
 
     <!-- Quick Search -->
 
-    <div id="QuickSearch" class="mb-4 flex">
     <input
       type="text"
       placeholder="Search…"
@@ -19,7 +18,6 @@
     >
       <fa icon="magnifying-glass" class="fa-fw"></fa>
     </button>
-    </div>
 
     <!-- New Project -->
     <button
@@ -39,7 +37,7 @@
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul class="border-t border-slate-300">
+      <ul>
         <li
           class="border-b border-slate-300"
           v-for="project in projects"