Feature: notify on click why entity is disabled

src/components/SpecialEntityCard.vue

@@ -13,6 +13,7 @@ conflict detection and selection capability. * * @author Matthew Raymer */
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-facing-decorator";
 import { Emit } from "vue-facing-decorator";
+import { NotificationIface } from "../constants/app";
 
 /**
  * SpecialEntityCard - Displays special entities with selection capability
@@ -23,6 +24,7 @@ import { Emit } from "vue-facing-decorator";
  * - Handles conflict states and selection
  * - Emits selection events with entity data
  * - Configurable styling based on entity type
+ * - Warning notifications for conflicted entities
  */
 @Component({
   emits: ["entity-selected"],
@@ -52,6 +54,14 @@ export default class SpecialEntityCard extends Vue {
   @Prop({ required: true })
   entityData!: { did?: string; name: string };
 
+  /** Notification function from parent component */
+  @Prop()
+  notify?: (notification: NotificationIface, timeout?: number) => void;
+
+  /** Context for conflict messages (e.g., "giver", "recipient") */
+  @Prop({ default: "other party" })
+  conflictContext!: string;
+
   /**
    * Computed CSS classes for the card container
    */
@@ -109,7 +119,7 @@ export default class SpecialEntityCard extends Vue {
   }
 
   /**
-   * Handle card click - only emit if selectable and not conflicted
+   * Handle card click - emit if selectable and not conflicted, show warning if conflicted
    */
   handleClick(): void {
     if (this.selectable && !this.conflicted) {
@@ -118,13 +128,32 @@ export default class SpecialEntityCard extends Vue {
         entityType: this.entityType,
         data: this.entityData,
       });
+    } else if (this.conflicted && this.notify) {
+      // Show warning notification for conflicted entity
+      this.notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Cannot Select",
+          text: `You cannot select "${this.label}" because you are already selected as the ${this.conflictContext}.`,
+        },
+        3000,
+      );
     }
   }
 
   // Emit methods using @Emit decorator
 
   @Emit("entity-selected")
-  emitEntitySelected(data: any): any {
+  emitEntitySelected(data: {
+    type: string;
+    entityType: string;
+    data: { did?: string; name: string };
+  }): {
+    type: string;
+    entityType: string;
+    data: { did?: string; name: string };
+  } {
     return data;
   }
 }