From 86caf793aa47311c6e30f5bbd333c4ee93a0502a Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 19 Oct 2025 18:43:21 -0600
Subject: [PATCH] feat: make spinner more standard, show emoji on claim-view
 page

---
 src/components/ActivityListItem.vue |  5 +++--
 src/interfaces/claims.ts            |  7 +++++++
 src/interfaces/index.ts             |  7 ++++---
 src/views/ClaimView.vue             | 12 ++++++++----
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue
index 93caeba8..2c59d569 100644
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -106,7 +106,9 @@
               @click="toggleThisEmoji(emoji)"
             >
               <!-- Show spinner when loading -->
-              <div v-if="loadingEmojis" class="animate-spin text-xs">⟳</div>
+              <div v-if="loadingEmojis" class="animate-spin text-xs">
+                <font-awesome icon="spinner" class="fa-spin" />
+              </div>
               <span v-else class="text-sm leading-none">{{ emoji }}</span>
               <span class="text-xs text-slate-600 font-medium leading-none">{{
                 count
@@ -504,7 +506,6 @@ export default class ActivityListItem extends Vue {
       );
 
       if (userHasEmoji) {
-
         this.$notify(
           {
             group: "modal",
diff --git a/src/interfaces/claims.ts b/src/interfaces/claims.ts
index 1fc03529..49e2b4a8 100644
--- a/src/interfaces/claims.ts
+++ b/src/interfaces/claims.ts
@@ -14,6 +14,13 @@ export interface AgreeActionClaim extends ClaimObject {
   object: Record<string, unknown>;
 }
 
+export interface EmojiClaim extends ClaimObject {
+  // default context is "https://endorser.ch"
+  "@type": "Emoji";
+  text: string;
+  parentItem: { lastClaimId: string };
+}
+
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
 export interface GiveActionClaim extends ClaimObject {
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 9cea2165..c4b12191 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,5 +1,6 @@
-export * from "./limits";
-export * from "./deepLinks";
-export * from "./common";
+export * from "./claims";
 export * from "./claims-result";
+export * from "./common";
+export * from "./deepLinks";
+export * from "./limits";
 export * from "./records";
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 3d09ac42..d32a10ff 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -91,12 +91,12 @@
           <div class="text-sm overflow-hidden">
             <div
               data-testId="description"
-              class="overflow-hidden text-ellipsis"
+              class="flex items-start gap-2 overflow-hidden"
             >
-              <font-awesome icon="message" class="fa-fw text-slate-400" />
+              <font-awesome icon="message" class="fa-fw text-slate-400 flex-shrink-0 mt-1" />
               <vue-markdown
                 :source="claimDescription"
-                class="markdown-content"
+                class="markdown-content flex-1 min-w-0"
               />
             </div>
             <div class="overflow-hidden text-ellipsis">
@@ -551,7 +551,7 @@ import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
 
-import { GenericVerifiableCredential } from "../interfaces";
+import { EmojiClaim, GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import { NotificationIface } from "../constants/app";
@@ -667,6 +667,10 @@ export default class ClaimView extends Vue {
       return giveClaim.description || "";
     }
 
+    if (this.veriClaim.claimType === "Emoji") {
+      return (claim as EmojiClaim).text || "";
+    }
+
     // Fallback for other claim types
     return (claim as { description?: string })?.description || "";
   }