Merge branch 'master' into no-accounts-in-memory

package-lock.json

@@ -38,7 +38,6 @@
         "luxon": "^3.3.0",
         "merkletreejs": "^0.3.10",
         "moment": "^2.29.4",
-        "notiwind": "^2.0.2",
         "papaparse": "^5.4.1",
         "pina": "^0.20.2204228",
         "pinia-plugin-persistedstate": "^3.1.0",
@@ -20929,11 +20928,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/mitt": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
-    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -21281,17 +21275,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/notiwind": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/notiwind/-/notiwind-2.0.2.tgz",
-      "integrity": "sha512-wMCf+07E093d0Q78C5UHroT9GQHm4mIGerhg7dGLJ0GN6zONqKj8nTR3clkq/Y44On9k28/0DtDNwOX7FT5p/A==",
-      "dependencies": {
-        "mitt": "^3.0.1"
-      },
-      "peerDependencies": {
-        "vue": "^3.3.4"
-      }
-    },
     "node_modules/npm-package-arg": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-7.0.0.tgz",

package.json

@@ -38,7 +38,6 @@
     "luxon": "^3.3.0",
     "merkletreejs": "^0.3.10",
     "moment": "^2.29.4",
-    "notiwind": "^2.0.2",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
     "pinia-plugin-persistedstate": "^3.1.0",

project.task.yaml

@@ -24,7 +24,6 @@ tasks:
 
 - 24 Move to Vite
 
-- .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

src/App.vue

@@ -1,132 +1,5 @@
 <template>
   <router-view />
-
-  <NotificationGroup group="alert">
-    <div
-      class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
-    >
-      <Notification
-        v-slot="{ notifications, close }"
-        enter="transform ease-out duration-300 transition"
-        enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
-        enter-to="translate-y-0 opacity-100 sm:translate-x-0"
-        leave="transition ease-in duration-500"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-        move="transition duration-500"
-        move-delay="delay-300"
-      >
-        <div
-          v-for="notification in notifications"
-          :key="notification.id"
-          class="w-full"
-          role="alert"
-        >
-          <div
-            v-if="notification.type === 'toast'"
-            class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
-          >
-            <div class="w-full px-4 py-3">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'info'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
-            >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'success'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-emerald-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100"
-            >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'warning'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-amber-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-amber-600 text-amber-100"
-            >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'danger'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-rose-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-rose-600 text-rose-100"
-            >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-        </div>
-      </Notification>
-    </div>
-  </NotificationGroup>
 </template>
 
 <style></style>

src/main.ts

@@ -5,7 +5,6 @@ import "./registerServiceWorker";
 import router from "./router";
 import axios from "axios";
 import VueAxios from "vue-axios";
-import Notifications from "notiwind";
 
 import "./assets/styles/tailwind.css";
 
@@ -17,7 +16,6 @@ import {
   faChevronRight,
   faCircle,
   faCircleCheck,
-  faCircleInfo,
   faCircleQuestion,
   faCircleUser,
   faClock,
@@ -47,7 +45,6 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faTrashCan,
-  faTriangleExclamation,
   faUser,
   faUsers,
   faXmark,
@@ -60,7 +57,6 @@ library.add(
   faChevronRight,
   faCircle,
   faCircleCheck,
-  faCircleInfo,
   faCircleQuestion,
   faCircleUser,
   faClock,
@@ -90,7 +86,6 @@ library.add(
   faSquareCaretDown,
   faSquareCaretUp,
   faTrashCan,
-  faTriangleExclamation,
   faUser,
   faUsers,
   faXmark,
@@ -103,5 +98,4 @@ createApp(App)
   .use(createPinia())
   .use(VueAxios, axios)
   .use(router)
-  .use(Notifications)
   .mount("#app");

src/router/index.ts

@@ -182,14 +182,4 @@ const router = createRouter({
   routes,
 });
 
-const errorHandler = (error, to, from) => {
-  // Handle the error here
-  console.error(error, to, from);
-  console.log("XXXXX");
-
-  // You can also perform additional actions, such as displaying an error message or redirecting the user to a specific page
-};
-
-router.onError(errorHandler); // Assign the error handler to the router instance
-
 export default router;

src/views/AccountViewView.vue

@@ -400,19 +400,13 @@ export default class AccountViewView extends Vue {
         this.limitsMessage = "No identity.";
         this.loadingLimits = false;
       } else {
-        this.$notify(
+        this.alertMessage =
-          {
+          "Clear your cache and start over (after data backup).";
-            group: "alert",
-            type: "danger",
-            title: "Error Creating Account",
-            text: "Clear your cache and start over (after data backup).",
-          },
-          -1,
-        );
         console.error(
           "Telling user to clear cache at page create because:",
           err,
         );
+        this.alertTitle = "Error Creating Account";
       }
     }
   }
@@ -424,19 +418,13 @@ export default class AccountViewView extends Vue {
         showContactGivesInline: this.showContactGives,
       });
     } catch (err) {
-      this.$notify(
+      this.alertMessage =
-        {
+        "Clear your cache and start over (after data backup).";
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Contact Setting",
-          text: "Clear your cache and start over (after data backup).",
-        },
-        -1,
-      );
       console.error(
         "Telling user to clear cache after contact setting update because:",
         err,
       );
+      this.alertTitle = "Error Updating Contact Setting";
     }
   }
 
@@ -452,25 +440,11 @@ export default class AccountViewView extends Vue {
 
       URL.revokeObjectURL(url);
 
-      this.$notify(
+      this.alertTitle = "Download Started";
-        {
+      this.alertMessage = "See your downloads directory for the backup.";
-          group: "alert",
-          type: "toast",
-          title: "Download Started",
-          text: "See your downloads directory for the backup.",
-        },
-        5000,
-      );
     } catch (error) {
-      this.$notify(
+      this.alertTitle = "Export Error";
-        {
+      this.alertMessage = "See console logs for more info.";
-          group: "alert",
-          type: "danger",
-          title: "Export Error",
-          text: "See console logs for more info.",
-        },
-        -1,
-      );
       console.error("Export Error:", error);
     }
   }

src/views/ContactAmountsView.vue

@@ -146,17 +146,10 @@ export default class ContactsView extends Vue {
         this.loadGives(this.activeDid, this.contact);
       }
     } catch (err) {
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage =
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
         err.userMessage ||
-            "There was an error retrieving the latest sweet, sweet action.",
+        "There was an error retrieving the latest sweet, sweet action.";
-        },
-        -1,
-      );
     }
   }
 
@@ -180,15 +173,9 @@ export default class ContactsView extends Vue {
           resp.status,
           resp.data,
         );
-        this.$notify(
+        this.alertTitle = "Error With Server";
-          {
+        this.alertMessage =
-            group: "alert",
+          "Got an error retrieving your given time from the server.";
-            type: "danger",
-            title: "Error With Server",
-            text: "Got an error retrieving your given time from the server.",
-          },
-          -1,
-        );
       }
 
       const url2 =
@@ -207,15 +194,9 @@ export default class ContactsView extends Vue {
           resp2.status,
           resp2.data,
         );
-        this.$notify(
+        this.alertTitle = "Error With Server";
-          {
+        this.alertMessage =
-            group: "alert",
+          "Got an error retrieving your given time from the server.";
-            type: "danger",
-            title: "Error With Server",
-            text: "Got an error retrieving your given time from the server.",
-          },
-          -1,
-        );
       }
 
       const sortedResult: Array<GiveServerRecord> = R.sort(
@@ -225,15 +206,8 @@ export default class ContactsView extends Vue {
       );
       this.giveRecords = sortedResult;
     } catch (error) {
-      this.$notify(
+      this.alertTitle = "Error With Server";
-        {
+      this.alertMessage = error as string;
-          group: "alert",
-          type: "danger",
-          title: "Error With Server",
-          text: error as string,
-        },
-        -1,
-      );
     }
   }
 
@@ -302,29 +276,15 @@ export default class ContactsView extends Vue {
           userMessage = error as string;
         }
         // Now set that error for the user to see.
-        this.$notify(
+        this.alertTitle = "Error With Server";
-          {
+        this.alertMessage = userMessage;
-            group: "alert",
-            type: "danger",
-            title: "Error With Server",
-            text: userMessage,
-          },
-          -1,
-        );
       }
     }
   }
 
   cannotConfirmMessage() {
-    this.$notify(
+    this.alertTitle = "Not Allowed";
-      {
+    this.alertMessage = "Only the recipient can confirm final receipt.";
-        group: "alert",
-        type: "danger",
-        title: "Not Allowed",
-        text: "Only the recipient can confirm final receipt.",
-      },
-      -1,
-    );
   }
 }
 </script>

src/views/ContactGiftingView.vue

@@ -145,17 +145,10 @@ export default class HomeView extends Vue {
       this.feedLastViewedId = settings?.lastViewedClaimId;
       this.updateAllFeed();
     } catch (err) {
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage =
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
         err.userMessage ||
-            "There was an error retrieving the latest sweet, sweet action.",
+        "There was an error retrieving the latest sweet, sweet action.";
-        },
-        -1,
-      );
     }
   }
 
@@ -204,27 +197,17 @@ export default class HomeView extends Vue {
    */
   public async recordGive(giverDid, description, hours) {
     if (!this.activeDid) {
-      this.$notify(
+      this.setAlert(
-        {
+        "Error",
-          group: "alert",
+        "You must select an identity before you can record a give.",
-          type: "danger",
-          title: "Error",
-          text: "You must select an identity before you can record a give.",
-        },
-        -1,
       );
       return;
     }
 
     if (!description && !hours) {
-      this.$notify(
+      this.setAlert(
-        {
+        "Error",
-          group: "alert",
+        "You must enter a description or some number of hours.",
-          type: "danger",
-          title: "Error",
-          text: "You must enter a description or some number of hours.",
-        },
-        -1,
       );
       return;
     }
@@ -244,38 +227,18 @@ export default class HomeView extends Vue {
       if (isGiveCreationError(result)) {
         const errorMessage = getGiveCreationErrorMessage(result);
         console.log("Error with give result:", result);
-        this.$notify(
+        this.setAlert(
-          {
+          "Error",
-            group: "alert",
+          errorMessage || "There was an error recording the give.",
-            type: "danger",
-            title: "Error",
-            text: errorMessage || "There was an error recording the give.",
-          },
-          -1,
         );
       } else {
-        this.$notify(
+        this.setAlert("Success", "That gift was recorded.");
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "That gift was recorded.",
-          },
-          -1,
-        );
       }
     } catch (error) {
       console.log("Error with give caught:", error);
-      this.$notify(
+      this.setAlert(
-        {
+        "Error",
-          group: "alert",
+        getGiveErrorMessage(error) || "There was an error recording the give.",
-          type: "danger",
-          title: "Error",
-          text:
-            getGiveErrorMessage(error) ||
-            "There was an error recording the give.",
-        },
-        -1,
       );
     }
   }

src/views/ContactQRScanShowView.vue

@@ -85,15 +85,7 @@ export default class ContactQRScanShow extends Vue {
     const accounts = await accountsDB.accounts.toArray();
     const account = R.find((acc) => acc.did === this.activeDid, accounts);
     if (!account) {
-      this.$notify(
+      this.alertMessage = "You have no identity yet.";
-        {
-          group: "alert",
-          type: "warning",
-          title: "",
-          text: "You have no identity yet.",
-        },
-        -1,
-      );
     } else {
       const identity = await this.getIdentity(this.activeDid);
       const publicKeyHex = identity.keys[0].publicKeyHex;

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,21 @@
                         : (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>
+                <button
+                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="onClickAddGive(activeDid, contact.did)"
+                >
+                  +
+                </button>
+              </div>
+              <div class="tooltip px-2">
+                from:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -171,18 +159,28 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <span
+                  v-if="givenToMeDescriptions[contact.did]"
+                  class="tooltiptext-left"
+                >
+                  {{ givenToMeDescriptions[contact.did] }}
+                </span>
+                <button
+                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="onClickAddGive(contact.did, activeDid)"
+                >
+                  +
                 </button>
-
+              </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" />
+                <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>
@@ -317,19 +315,12 @@ export default class ContactsView extends Vue {
           resp.status,
           resp.data,
         );
-        this.$notify(
+        this.alertTitle = "Error With Server";
-          {
+        this.alertMessage =
-            group: "alert",
-            type: "danger",
-            title: "Error With Server",
-            text:
           "Got an error retrieving your " +
           resp.config.url.includes("recipientDid")
             ? "received"
-                : "given" + " time from the server.",
+            : "given" + " time from the server.";
-          },
-          -1,
-        );
       }
     };
 
@@ -377,15 +368,8 @@ export default class ContactsView extends Vue {
       this.givenToMeConfirmed = givenToMeConfirmed;
       this.givenToMeUnconfirmed = givenToMeUnconfirmed;
     } catch (error) {
-      this.$notify(
+      this.alertTitle = "Error With Server";
-        {
+      this.alertMessage = error as string;
-          group: "alert",
-          type: "danger",
-          title: "Error With Server",
-          text: error as string,
-        },
-        -1,
-      );
     }
   }
 
@@ -478,32 +462,18 @@ export default class ContactsView extends Vue {
         try {
           const resp = await this.axios.post(url, payload, { headers });
           if (resp.data?.success?.embeddedRecordError) {
+            this.alertTitle = "Registration Still Unknown";
             let message = "There was some problem with the registration.";
             if (typeof resp.data.success.embeddedRecordError == "string") {
               message += " " + resp.data.success.embeddedRecordError;
             }
-            this.$notify(
+            this.alertMessage = message;
-              {
-                group: "alert",
-                type: "danger",
-                title: "Registration Still Unknown",
-                text: message,
-              },
-              -1,
-            );
           } else if (resp.data?.success?.handleId) {
             contact.registered = true;
             db.contacts.update(contact.did, { registered: true });
 
-            this.$notify(
+            this.alertTitle = "Registration Success";
-              {
+            this.alertMessage = contact.name + " has been registered.";
-                group: "alert",
-                type: "info",
-                title: "Registration Success",
-                text: contact.name + " has been registered.",
-              },
-              -1,
-            );
           }
         } catch (error) {
           let userMessage = "There was an error. See logs for more info.";
@@ -518,15 +488,8 @@ export default class ContactsView extends Vue {
             userMessage = error as string;
           }
           // Now set that error for the user to see.
-          this.$notify(
+          this.alertTitle = "Error With Server";
-            {
+          this.alertMessage = userMessage;
-              group: "alert",
-              type: "danger",
-              title: "Error With Server",
-              text: userMessage,
-            },
-            -1,
-          );
         }
       }
     }
@@ -547,39 +510,17 @@ export default class ContactsView extends Vue {
         contact.seesMe = visibility;
         db.contacts.update(contact.did, { seesMe: visibility });
       } else {
+        this.alertTitle = "Error With Server";
         console.error("Bad response setting visibility: ", resp.data);
         if (resp.data.error?.message) {
-          this.$notify(
+          this.alertMessage = resp.data.error?.message;
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error With Server",
-              text: resp.data.error?.message,
-            },
-            -1,
-          );
         } else {
-          this.$notify(
+          this.alertMessage = "Bad server response of " + resp.status;
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error With Server",
-              text: "Bad server response of " + resp.status,
-            },
-            -1,
-          );
         }
       }
     } catch (err) {
-      this.$notify(
+      this.alertTitle = "Error With Server";
-        {
+      this.alertMessage = err as string;
-          group: "alert",
-          type: "danger",
-          title: "Error With Server",
-          text: err as string,
-        },
-        -1,
-      );
     }
   }
 
@@ -596,52 +537,23 @@ export default class ContactsView extends Vue {
         contact.seesMe = visibility;
         db.contacts.update(contact.did, { seesMe: visibility });
 
-        this.$notify(
+        this.alertTitle = "Refreshed";
-          {
+        this.alertMessage =
-            group: "alert",
-            type: "toast",
-            title: "Refreshed",
-            text:
           this.nameForContact(contact, true) +
           " can " +
           (visibility ? "" : "not ") +
-              "see your activity.",
+          "see your activity.";
-          },
-          5000,
-        );
       } else {
+        this.alertTitle = "Error With Server";
         if (resp.data.error?.message) {
-          this.$notify(
+          this.alertMessage = resp.data.error?.message;
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error With Server",
-              text: resp.data.error?.message,
-            },
-            -1,
-          );
         } else {
-          this.$notify(
+          this.alertMessage = "Bad server response of " + resp.status;
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error With Server",
-              text: "Bad server response of " + resp.status,
-            },
-            -1,
-          );
         }
       }
     } catch (err) {
-      this.$notify(
+      this.alertTitle = "Error With Server";
-        {
+      this.alertMessage = err as string;
-          group: "alert",
-          type: "danger",
-          title: "Error With Server",
-          text: err as string,
-        },
-        -1,
-      );
     }
   }
 
@@ -680,35 +592,15 @@ export default class ContactsView extends Vue {
       }
     }
     if (!this.isNumeric(this.hourInput)) {
-      this.$notify(
+      this.alertTitle = "Input Error";
-        {
+      this.alertMessage =
-          group: "alert",
+        "This is not a valid number of hours: " + this.hourInput;
-          type: "danger",
-          title: "Input Error",
-          text: "This is not a valid number of hours: " + this.hourInput,
-        },
-        -1,
-      );
     } else if (!parseFloat(this.hourInput)) {
-      this.$notify(
+      this.alertTitle = "Input Error";
-        {
+      this.alertMessage = "Giving 0 hours does nothing.";
-          group: "alert",
-          type: "danger",
-          title: "Input Error",
-          text: "Giving 0 hours does nothing.",
-        },
-        -1,
-      );
     } else if (!identity) {
-      this.$notify(
+      this.alertTitle = "Status Error";
-        {
+      this.alertMessage = "No identity is available.";
-          group: "alert",
-          type: "danger",
-          title: "Status Error",
-          text: "No identity is available.",
-        },
-        -1,
-      );
     } else {
       // ask to confirm amount
       let toFrom;
@@ -792,15 +684,8 @@ export default class ContactsView extends Vue {
       try {
         const resp = await this.axios.post(url, payload, { headers });
         if (resp.data?.success?.handleId) {
-          this.$notify(
+          this.alertTitle = "Done";
-            {
+          this.alertMessage = "Successfully logged time to the server.";
-              group: "alert",
-              type: "success",
-              title: "Done",
-              text: "Successfully logged time to the server.",
-            },
-            -1,
-          );
 
           if (fromDid === identity.did) {
             const newList = R.clone(this.givenByMeUnconfirmed);
@@ -825,15 +710,8 @@ export default class ContactsView extends Vue {
           userMessage = error as string;
         }
         // Now set that error for the user to see.
-        this.$notify(
+        this.alertTitle = "Error With Server";
-          {
+        this.alertMessage = userMessage;
-            group: "alert",
-            type: "danger",
-            title: "Error With Server",
-            text: userMessage,
-          },
-          -1,
-        );
       }
     }
   }

src/views/DiscoverView.vue

@@ -186,16 +186,6 @@ export default class DiscoverView extends Vue {
 
       if (response.status !== 200) {
         const details = await response.text();
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: `There was a problem accessing the server. Please try again later. (${details})`,
-          },
-          -1,
-        );
-
         throw details;
       }
 
@@ -214,15 +204,9 @@ export default class DiscoverView extends Vue {
       }
     } catch (e) {
       console.log("Error with feed load:", e);
-      this.$notify(
+      this.alertMessage =
-        {
+        e.userMessage || "There was an error retrieving projects.";
-          group: "alert",
+      this.alertTitle = "Error";
-          type: "danger",
-          title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
-        },
-        -1,
-      );
     } finally {
       this.isLoading = false;
     }
@@ -256,16 +240,6 @@ export default class DiscoverView extends Vue {
       );
 
       if (response.status !== 200) {
-        const details = await response.text();
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: `There was a problem accessing the server. Please try again later. (${details})`,
-          },
-          -1,
-        );
         throw await response.text();
       }
 
@@ -289,15 +263,9 @@ export default class DiscoverView extends Vue {
       }
     } catch (e) {
       console.log("Error with feed load:", e);
-      this.$notify(
+      this.alertMessage =
-        {
+        e.userMessage || "There was an error retrieving projects.";
-          group: "alert",
+      this.alertTitle = "Error";
-          type: "danger",
-          title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
-        },
-        -1,
-      );
     } finally {
       this.isLoading = false;
     }

src/views/HomeView.vue

@@ -6,94 +6,6 @@
       Time Safari
     </h1>
 
-    <div class="mb-8">
-      <h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'toast',
-              text: 'I\'m a toast. Don\'t mind me.',
-            },
-            5000,
-          )
-        "
-        class="font-bold uppercase bg-slate-400 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Toast (self-dismiss)
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'info',
-              title: 'Information Alert',
-              text: 'Just wanted you to know.',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Info
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'success',
-              title: 'Success Alert',
-              text: 'Congratulations!',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Success
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'warning',
-              title: 'Warning Alert',
-              text: 'You might wanna look at this.',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Warning
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'danger',
-              title: 'Danger Alert',
-              text: 'Something terrible has happened!',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Danger
-      </button>
-    </div>
-
     <div class="mb-8">
       <h2 class="text-xl font-bold">Quick Action</h2>
       <p class="mb-4">Show appreciation to a contact:</p>
@@ -245,17 +157,10 @@ export default class HomeView extends Vue {
       this.feedLastViewedId = settings?.lastViewedClaimId;
       this.updateAllFeed();
     } catch (err) {
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage =
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
         err.userMessage ||
-            "There was an error retrieving the latest sweet, sweet action.",
+        "There was an error retrieving the latest sweet, sweet action.";
-        },
-        -1,
-      );
     }
   }
 
@@ -304,15 +209,9 @@ export default class HomeView extends Vue {
       })
       .catch((e) => {
         console.log("Error with feed load:", e);
-        this.$notify(
+        this.alertMessage =
-          {
+          e.userMessage || "There was an error retrieving feed data.";
-            group: "alert",
+        this.alertTitle = "Error";
-            type: "danger",
-            title: "Export Error",
-            text: e.userMessage || "There was an error retrieving feed data.",
-          },
-          -1,
-        );
       });
 
     this.isHiddenSpinner = true;
@@ -403,27 +302,17 @@ export default class HomeView extends Vue {
    */
   public async recordGive(giverDid, description, hours) {
     if (!this.activeDid) {
-      this.$notify(
+      this.setAlert(
-        {
+        "Error",
-          group: "alert",
+        "You must select an identity before you can record a give.",
-          type: "danger",
-          title: "Error",
-          text: "You must select an identity before you can record a give.",
-        },
-        -1,
       );
       return;
     }
 
     if (!description && !hours) {
-      this.$notify(
+      this.setAlert(
-        {
+        "Error",
-          group: "alert",
+        "You must enter a description or some number of hours.",
-          type: "danger",
-          title: "Error",
-          text: "You must enter a description or some number of hours.",
-        },
-        -1,
       );
       return;
     }
@@ -443,38 +332,19 @@ export default class HomeView extends Vue {
       if (this.isGiveCreationError(result)) {
         const errorMessage = this.getGiveCreationErrorMessage(result);
         console.log("Error with give result:", result);
-        this.$notify(
+        this.setAlert(
-          {
+          "Error",
-            group: "alert",
+          errorMessage || "There was an error recording the give.",
-            type: "danger",
-            title: "Error",
-            text: errorMessage || "There was an error recording the give.",
-          },
-          -1,
         );
       } else {
-        this.$notify(
+        this.setAlert("Success", "That gift was recorded.");
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "That gift was recorded.",
-          },
-          -1,
-        );
       }
     } catch (error) {
       console.log("Error with give caught:", error);
-      this.$notify(
+      this.setAlert(
-        {
+        "Error",
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
         this.getGiveErrorMessage(error) ||
           "There was an error recording the give.",
-        },
-        -1,
       );
     }
   }

src/views/IdentitySwitcherView.vue

@@ -133,19 +133,13 @@ export default class IdentitySwitcherView extends Vue {
         this.limitsMessage = "No identity.";
         this.loadingLimits = false;
       } else {
-        this.$notify(
+        this.alertMessage =
-          {
+          "Clear your cache and start over (after data backup).";
-            group: "alert",
-            type: "danger",
-            title: "Error Creating Account",
-            text: "Clear your cache and start over (after data backup).",
-          },
-          -1,
-        );
         console.error(
           "Telling user to clear cache at page create because:",
           err,
         );
+        this.alertTitle = "Error Creating Account";
       }
     }
   }

src/views/NewEditProjectView.vue

@@ -245,41 +245,20 @@ export default class NewEditProjectView extends Vue {
         if (serverError) {
           if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
             console.log(serverError);
+            this.alertTitle = "User Message";
             userMessage = serverError.response.data.error.message; // This is info for the user.
-            this.$notify(
+            this.alertMessage = userMessage;
-              {
-                group: "alert",
-                type: "danger",
-                title: "User Message",
-                text: userMessage,
-              },
-              -1,
-            );
           } else {
-            this.$notify(
+            this.alertTitle = "Server Message";
-              {
+            this.alertMessage = JSON.stringify(serverError.toJSON());
-                group: "alert",
-                type: "danger",
-                title: "Server Message",
-                text: JSON.stringify(serverError.toJSON()),
-              },
-              -1,
-            );
           }
         } else {
           console.error(
             "Here's the full error trying to save the claim:",
             error,
           );
-          this.$notify(
+          this.alertTitle = "Claim Error";
-            {
+          this.alertMessage = error as string;
-              group: "alert",
-              type: "danger",
-              title: "Claim Error",
-              text: error as string,
-            },
-            -1,
-          );
         }
         // Now set that error for the user to see.
         this.errorMessage = userMessage;

src/views/ProjectViewView.vue

@@ -285,38 +285,16 @@ export default class ProjectViewView extends Vue {
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
       } else if (resp.status === 404) {
         // actually, axios throws an error so we never get here
-        this.$notify(
+        this.alertMessage = "That project does not exist.";
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "That project does not exist.",
-          },
-          -1,
-        );
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
       if (serverError.response?.status === 404) {
-        this.$notify(
+        this.alertMessage = "That project does not exist.";
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "That project does not exist.",
-          },
-          -1,
-        );
       } else {
-        this.$notify(
+        this.alertMessage =
-          {
+          "Something went wrong retrieving that project." +
-            group: "alert",
+          " See logs for more info.";
-            type: "danger",
-            title: "Error",
-            text: "Something went wrong retrieving that project. See logs for more info.",
-          },
-          -1,
-        );
         console.error("Error retrieving project:", serverError.message);
       }
     }
@@ -330,27 +308,12 @@ export default class ProjectViewView extends Vue {
       if (resp.status === 200 && resp.data.data) {
         this.givesToThis = resp.data.data;
       } else {
-        this.$notify(
+        this.alertMessage = "Failed to retrieve gives to this project.";
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve gives to this project.",
-          },
-          -1,
-        );
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
-      this.$notify(
+      this.alertMessage =
-        {
+        "Something went wrong retrieving gives to this project.";
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving gives to this project.",
-        },
-        -1,
-      );
       console.error(
         "Error retrieving gives to this project:",
         serverError.message,
@@ -366,27 +329,11 @@ export default class ProjectViewView extends Vue {
       if (resp.status === 200 && resp.data.data) {
         this.givesByThis = resp.data.data;
       } else {
-        this.$notify(
+        this.alertMessage = "Failed to retrieve gives by this project.";
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve gives by this project.",
-          },
-          -1,
-        );
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
-      this.$notify(
+      this.alertMessage = "Something went wrong retrieving gives by project.";
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving gives by project.",
-        },
-        -1,
-      );
       console.error(
         "Error retrieving gives by this project:",
         serverError.message,
@@ -417,28 +364,16 @@ export default class ProjectViewView extends Vue {
    */
   async recordGive(giverDid, description, hours) {
     if (!this.activeDid) {
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage =
-          group: "alert",
+        "You must select an identity before you can record a give.";
-          type: "danger",
-          title: "Error",
-          text: "You must select an identity before you can record a give.",
-        },
-        -1,
-      );
       return;
     }
 
     if (!description && !hours) {
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage =
-          group: "alert",
+        "You must enter a description or some number of hours.";
-          type: "danger",
-          title: "Error",
-          text: "You must enter a description or some number of hours.",
-        },
-        -1,
-      );
       return;
     }
 
@@ -457,42 +392,21 @@ export default class ProjectViewView extends Vue {
 
       if (result.status !== 201 || result.data?.error) {
         console.log("Error with give result:", result);
-        this.$notify(
+        this.alertTitle = "Error";
-          {
+        this.alertMessage =
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text:
           result.data?.error?.message ||
-              "There was an error recording the give.",
+          "There was an error recording the give.";
-          },
-          -1,
-        );
       } else {
-        this.$notify(
+        this.alertTitle = "Success";
-          {
+        this.alertMessage = "That gift was recorded.";
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "That gift was recorded.",
-          },
-          -1,
-        );
       }
     } catch (e) {
       console.log("Error with give caught:", e);
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage =
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
         e.userMessage ||
         e.response?.data?.error?.message ||
-            "There was an error recording the give.",
+        "There was an error recording the give.";
-        },
-        -1,
-      );
     }
   }
 }

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"
@@ -126,15 +124,8 @@ export default class ProjectsView extends Vue {
       }
     } catch (error) {
       console.error("Got error loading projects:", error.message);
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage = "Got an error loading projects:" + error.message;
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Got an error loading projects: " + error.message,
-        },
-        -1,
-      );
     } finally {
       this.isLoading = false;
     }
@@ -203,15 +194,8 @@ export default class ProjectsView extends Vue {
 
       if (this.numAccounts === 0) {
         console.error("No accounts found.");
-        this.$notify(
+        this.alertTitle = "Error";
-          {
+        this.alertMessage = "You need an identity to load your projects.";
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "You need an identity to load your projects.",
-          },
-          -1,
-        );
       } else {
         const identity = await this.getIdentity(activeDid);
         this.current = identity;
@@ -219,15 +203,8 @@ export default class ProjectsView extends Vue {
       }
     } catch (err) {
       console.log("Error initializing:", err);
-      this.$notify(
+      this.alertTitle = "Error";
-        {
+      this.alertMessage = "Something went wrong loading your projects.";
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong loading your projects.",
-        },
-        -1,
-      );
     }
   }
 

src/views/SeedBackupView.vue

@@ -72,15 +72,8 @@ export default class SeedBackupView extends Vue {
       this.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
     } catch (err) {
       console.error("Got an error loading an identity:", err);
-      this.$notify(
+      this.alertTitle = "Error Loading Account";
-        {
+      this.alertMessage = "Got an error loading your seed data.";
-          group: "alert",
-          type: "danger",
-          title: "Error Loading Account",
-          text: "Got an error loading your seed data.",
-        },
-        -1,
-      );
     }
   }
 

src/views/StatisticsView.vue

@@ -62,15 +62,8 @@ export default class StatisticsView extends Vue {
       this.world = newWorld;
     } catch (err) {
       console.log(err);
-      this.$notify(
+      this.alertTitle = "Mounting error";
-        {
+      this.alertMessage = err.message;
-          group: "alert",
-          type: "danger",
-          title: "Mounting Error",
-          text: err.message,
-        },
-        -1,
-      );
     }
   }