feat: make spinner more standard, show emoji on claim-view page

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",

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 {

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";

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 || "";
   }