feat: add first cut at emojis in feed (incomplete because it doesn't detect user's emojis correctly)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.1-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "timesafari",
-      "version": "1.1.0-beta",
+      "version": "1.1.1-beta",
       "dependencies": {
         "@capacitor-community/electron": "^5.0.1",
         "@capacitor-community/sqlite": "6.0.2",
@@ -61,6 +61,7 @@
         "did-resolver": "^4.1.0",
         "dotenv": "^16.0.3",
         "electron-builder": "^26.0.12",
+        "emoji-mart-vue-fast": "^15.0.5",
         "ethereum-cryptography": "^2.1.3",
         "ethereumjs-util": "^7.1.5",
         "jdenticon": "^3.2.0",
@@ -1864,7 +1865,6 @@
       "version": "7.28.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
       "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -14990,6 +14990,16 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz",
+      "integrity": "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.45.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.45.0.tgz",
@@ -16422,6 +16432,18 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-mart-vue-fast": {
+      "version": "15.0.5",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-15.0.5.tgz",
+      "integrity": "sha512-wnxLor8ggpqshoOPwIc33MdOC3A1XFeDLgUwYLPtNPL8VeAtXJAVrnFq1CN5PeCYAFoLo4IufHQZ9CfHD4IZiw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "core-js": "^3.23.5"
+      },
+      "peerDependencies": {
+        "vue": ">2.0.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",

package.json

@@ -190,6 +190,7 @@
     "did-resolver": "^4.1.0",
     "dotenv": "^16.0.3",
     "electron-builder": "^26.0.12",
+    "emoji-mart-vue-fast": "^15.0.5",
     "ethereum-cryptography": "^2.1.3",
     "ethereumjs-util": "^7.1.5",
     "jdenticon": "^3.2.0",

src/components/ActivityListItem.vue

@@ -77,12 +77,66 @@
         </a>
       </div>
 
-      <!-- Description -->
+      <!-- Emoji Section -->
-      <p class="font-medium overflow-hidden">
+      <div
-        <a
+        class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[200px]"
-          class="block cursor-pointer overflow-hidden text-ellipsis"
+      >
-          @click="emitLoadClaim(record.jwtId)"
+        <div class="flex items-center justify-between gap-1">
+          <!-- Existing Emojis Display -->
+          <div v-if="hasEmojis" class="flex flex-wrap gap-1 mr-2">
+            <button
+              v-for="(count, emoji) in record.emojiCount"
+              :key="emoji"
+              class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
+              :class="{ 'bg-blue-50 border-blue-200': isUserEmoji(emoji) }"
+              :title="
+                isUserEmoji(emoji)
+                  ? 'Click to remove your emoji'
+                  : 'Click to add this emoji'
+              "
+              @click="toggleEmoji(emoji)"
+            >
+              <span class="text-sm leading-none">{{ emoji }}</span>
+              <span class="text-xs text-slate-600 font-medium leading-none">{{
+                count
+              }}</span>
+            </button>
+          </div>
+
+          <!-- Add Emoji Button -->
+          <button
+            class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-auto"
+            :title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
+            @click="showEmojiPicker = !showEmojiPicker"
+          >
+            <span class="text-sm leading-none">{{
+              showEmojiPicker ? "x" : "😊"
+            }}</span>
+          </button>
+        </div>
+
+        <!-- Emoji Picker (placeholder for now) -->
+        <div
+          v-if="showEmojiPicker"
+          class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
         >
+          <!-- Temporary emoji buttons for testing -->
+          <div class="flex flex-wrap gap-1 mt-1">
+            <button
+              v-for="emoji in QUICK_EMOJIS"
+              :key="emoji"
+              class="p-0.5 hover:bg-slate-200 rounded text-base"
+              @click="selectEmoji(emoji)"
+            >
+              {{ emoji }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Description -->
+      <p class="font-medium">
+        <a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
           <vue-markdown
             :source="truncatedDescription"
             class="markdown-content"
@@ -91,7 +145,7 @@
       </p>
 
       <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
+        class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
       >
         <!-- Source -->
         <div
@@ -254,17 +308,23 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import { GiveRecordWithContactInfo } from "@/interfaces/give";
+import VueMarkdown from "vue-markdown-render";
+
+import { logger } from "../utils/logger";
+import {
+  createAndSubmitClaim,
+  getHeaders,
+  isHiddenDid,
+} from "../libs/endorserServer";
 import EntityIcon from "./EntityIcon.vue";
-import { isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
-import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
+import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
 import {
   NOTIFY_PERSON_HIDDEN,
   NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
-import { TIMEOUTS } from "@/utils/notify";
+import { GenericVerifiableCredential } from "@/interfaces";
-import VueMarkdown from "vue-markdown-render";
+import { GiveRecordWithContactInfo } from "@/interfaces/give";
 
 @Component({
   components: {
@@ -274,15 +334,23 @@ import VueMarkdown from "vue-markdown-render";
   },
 })
 export default class ActivityListItem extends Vue {
+  readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];
+
   @Prop() record!: GiveRecordWithContactInfo;
   @Prop() lastViewedClaimId?: string;
   @Prop() isRegistered!: boolean;
   @Prop() activeDid!: string;
+  @Prop() apiServer!: string;
 
   isHiddenDid = isHiddenDid;
   notify!: ReturnType<typeof createNotifyHelpers>;
   $notify!: NotifyFunction;
 
+  // Emoji-related data
+  showEmojiPicker = false;
+
+  userEmojis: string[] | null = null; // load this only when needed
+
   created() {
     this.notify = createNotifyHelpers(this.$notify);
   }
@@ -346,5 +414,119 @@ export default class ActivityListItem extends Vue {
       day: "numeric",
     });
   }
+
+  // Emoji-related computed properties and methods
+  get hasEmojis(): boolean {
+    return Object.keys(this.record.emojiCount).length > 0;
+  }
+
+  async loadUserEmojis(): Promise<void> {
+    try {
+      const response = await this.axios.get(
+        `${this.apiServer}/api/v2/emoji/userEmojis?parentHandleId=${this.record.jwtId}`,
+        { headers: await getHeaders(this.activeDid) },
+      );
+      this.userEmojis = response.data;
+    } catch (error) {
+      logger.error(
+        "Error loading all emojis for parent handle id:",
+        this.record.jwtId,
+        error,
+      );
+    }
+  }
+
+  async getUserEmojis(): Promise<string[]> {
+    if (!this.userEmojis) {
+      await this.loadUserEmojis();
+    }
+    return this.userEmojis || [];
+  }
+
+  selectEmoji(emoji: string) {
+    this.showEmojiPicker = false;
+    this.submitEmoji(emoji);
+  }
+
+  isUserEmoji(emoji: string): boolean {
+    return this.userEmojis?.includes(emoji) || false;
+  }
+
+  toggleEmoji(emoji: string) {
+    if (this.isUserEmoji(emoji)) {
+      this.removeEmoji(emoji);
+    } else {
+      this.submitEmoji(emoji);
+    }
+  }
+
+  async submitEmoji(emoji: string) {
+    try {
+      // Temporarily add to user emojis for UI feedback
+      if (!this.isUserEmoji(emoji)) {
+        this.record.emojiCount[emoji] = 0;
+      }
+      // Create an Emoji claim and send to the server
+      const emojiClaim: GenericVerifiableCredential = {
+        "@type": "Emoji",
+        text: emoji,
+        parentItem: { lastClaimId: this.record.jwtId },
+      };
+      const claim = await createAndSubmitClaim(
+        emojiClaim,
+        this.record.issuerDid,
+        this.apiServer,
+        this.axios,
+      );
+      if (
+        claim.success &&
+        !(claim.success as { embeddedRecordError?: string }).embeddedRecordError
+      ) {
+        this.record.emojiCount[emoji] =
+          (this.record.emojiCount[emoji] || 0) + 1;
+        this.userEmojis = [...(this.userEmojis || []), emoji];
+      } else {
+        this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
+      }
+    } catch (error) {
+      logger.error("Error submitting emoji:", error);
+      this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
+    }
+  }
+
+  async removeEmoji(emoji: string) {
+    try {
+      // Create an Emoji claim and send to the server
+      const emojiClaim: GenericVerifiableCredential = {
+        "@type": "Emoji",
+        text: emoji,
+        parentItem: { lastClaimId: this.record.jwtId },
+      };
+      const claim = await createAndSubmitClaim(
+        emojiClaim,
+        this.record.issuerDid,
+        this.apiServer,
+        this.axios,
+      );
+      if (claim.success) {
+        this.record.emojiCount[emoji] =
+          (this.record.emojiCount[emoji] || 0) - 1;
+
+        // Update local emoji count for immediate UI feedback
+        const newCount = Math.max(0, this.record.emojiCount[emoji]);
+        if (newCount === 0) {
+          delete this.record.emojiCount[emoji];
+        } else {
+          this.record.emojiCount[emoji] = newCount;
+        }
+        this.userEmojis = this.userEmojis?.filter(e => e !== emoji) || [];
+      } else {
+        this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
+      }
+    } catch (error) {
+      logger.error("Error removing emoji:", error);
+      this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
+    }
+  }
 }
 </script>

src/interfaces/common.ts

@@ -80,7 +80,7 @@ export interface UserInfo {
 }
 
 export interface CreateAndSubmitClaimResult {
-  success: boolean;
+  success: boolean | { embeddedRecordError?: string; claimId?: string };
   error?: string;
   handleId?: string;
 }

src/interfaces/records.ts

@@ -9,6 +9,7 @@ export interface GiveSummaryRecord {
   amount: number;
   amountConfirmed: number;
   description: string;
+  emojiCount: Record<string, number>; // Map of emoji character to count
   fullClaim: GiveActionClaim;
   fulfillsHandleId: string;
   fulfillsPlanHandleId?: string;

src/views/HomeView.vue

@@ -245,6 +245,7 @@ Raymer * @version 1.0.0 */
             :last-viewed-claim-id="feedLastViewedClaimId"
             :is-registered="isRegistered"
             :active-did="activeDid"
+            :api-server="apiServer"
             @load-claim="onClickLoadClaim"
             @view-image="openImageViewer"
           />
@@ -1234,6 +1235,7 @@ export default class HomeView extends Vue {
     const recipientDid = this.extractRecipientDid(claim);
 
     const fulfillsPlan = await this.getFulfillsPlan(record);
+    const emojiCount = await record.emojiCount;
 
     // Log record details for debugging
     logger.debug("[HomeView] 🔍 Processing record:", {
@@ -1264,6 +1266,7 @@ export default class HomeView extends Vue {
       provider,
       fulfillsPlan,
       providedByPlan,
+      emojiCount,
     );
   }
 
@@ -1487,12 +1490,14 @@ export default class HomeView extends Vue {
     provider: Provider | undefined,
     fulfillsPlan?: FulfillsPlan,
     providedByPlan?: ProvidedByPlan,
+    emojiCount?: Record<string, number>,
   ): GiveRecordWithContactInfo {
     return {
       ...record,
       jwtId: record.jwtId,
       fullClaim: record.fullClaim,
       description: record.description || "",
+      emojiCount: emojiCount || {},
       handleId: record.handleId,
       issuerDid: record.issuerDid,
       fulfillsPlanHandleId: record.fulfillsPlanHandleId,