From 5006a0360376f127f80ac0b98ad5bfb88f94880a Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Sun, 12 Apr 2026 21:51:42 -0700
Subject: [PATCH] feat(community): TrustFeedbackButtons + useTrustFeedback --
 trust signal UI on ListingCard [MIT]

Files: web/src/composables/useTrustFeedback.ts, web/src/components/TrustFeedbackButtons.vue, web/src/components/ListingCard.vue

- useTrustFeedback composable: FeedbackState machine (idle/sending/confirmed/disputed), fail-soft fetch, always confirms regardless of network outcome
- TrustFeedbackButtons.vue: "This score looks right / This score is wrong" button pair with calm "Thanks, noted." confirmation; uses --trust-high/--trust-low theme CSS vars; aria-live="polite", aria-busy, focus-visible, prefers-reduced-motion, no countdown timers
- ListingCard.vue: TrustFeedbackButtons slotted after trust badge inside .card__score-col
---
 web/src/components/ListingCard.vue          |  7 ++
 web/src/components/TrustFeedbackButtons.vue | 91 +++++++++++++++++++++
 web/src/composables/useTrustFeedback.ts     | 28 +++++++
 3 files changed, 126 insertions(+)
 create mode 100644 web/src/components/TrustFeedbackButtons.vue
 create mode 100644 web/src/composables/useTrustFeedback.ts

diff --git a/web/src/components/ListingCard.vue b/web/src/components/ListingCard.vue
index 2dbf3e7..1244224 100644
--- a/web/src/components/ListingCard.vue
+++ b/web/src/components/ListingCard.vue
@@ -128,6 +128,12 @@
         >⚑</button>
       </div>
 
+      <!-- Trust feedback: calm "looks right / wrong" signal buttons -->
+      <TrustFeedbackButtons
+        :seller-id="`ebay::${listing.seller_platform_id}`"
+        :trust="trust"
+      />
+
       <!-- Price -->
       <div class="card__price-wrap">
         <span
@@ -152,6 +158,7 @@ import { computed, ref } from 'vue'
 import type { Listing, TrustScore, Seller } from '../stores/search'
 import { useSearchStore } from '../stores/search'
 import { useBlocklistStore } from '../stores/blocklist'
+import TrustFeedbackButtons from './TrustFeedbackButtons.vue'
 
 const props = defineProps<{
   listing: Listing
diff --git a/web/src/components/TrustFeedbackButtons.vue b/web/src/components/TrustFeedbackButtons.vue
new file mode 100644
index 0000000..c00cf63
--- /dev/null
+++ b/web/src/components/TrustFeedbackButtons.vue
@@ -0,0 +1,91 @@
+<!-- web/src/components/TrustFeedbackButtons.vue -->
+<!-- MIT -- component layer -->
+<template>
+  <div class="trust-feedback" v-if="trust">
+    <template v-if="state === 'idle' || state === 'sending'">
+      <button
+        type="button"
+        class="trust-feedback__btn trust-feedback__btn--confirm"
+        :disabled="state === 'sending'"
+        :aria-busy="state === 'sending'"
+        @click="submitFeedback(true)"
+      >
+        This score looks right
+      </button>
+      <button
+        type="button"
+        class="trust-feedback__btn trust-feedback__btn--dispute"
+        :disabled="state === 'sending'"
+        :aria-busy="state === 'sending'"
+        @click="submitFeedback(false)"
+      >
+        This score is wrong
+      </button>
+    </template>
+
+    <!-- Confirmation -- persistent, no countdown, no urgency -->
+    <p
+      v-else
+      class="trust-feedback__confirmation"
+      role="status"
+      aria-live="polite"
+    >
+      Thanks, noted.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TrustScore } from '../stores/search'
+import { useTrustFeedback } from '../composables/useTrustFeedback'
+
+const props = defineProps<{
+  sellerId: string
+  trust: TrustScore | null
+}>()
+
+const { state, submitFeedback } = useTrustFeedback(props.sellerId)
+</script>
+
+<style scoped>
+.trust-feedback {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.trust-feedback__btn {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: 4px;
+  border: 1px solid currentColor;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .trust-feedback__btn { transition: none; }
+}
+
+.trust-feedback__btn:hover:not(:disabled),
+.trust-feedback__btn:focus-visible {
+  opacity: 1;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.trust-feedback__btn:disabled { cursor: default; }
+.trust-feedback__btn--confirm { border-color: var(--trust-high, #3fb950); }
+.trust-feedback__btn--dispute { border-color: var(--trust-low, #f85149); }
+
+.trust-feedback__confirmation {
+  font-size: 0.75rem;
+  opacity: 0.8;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+</style>
diff --git a/web/src/composables/useTrustFeedback.ts b/web/src/composables/useTrustFeedback.ts
new file mode 100644
index 0000000..66a0e77
--- /dev/null
+++ b/web/src/composables/useTrustFeedback.ts
@@ -0,0 +1,28 @@
+// web/src/composables/useTrustFeedback.ts
+// MIT -- component layer; the API call routes to a BSL endpoint.
+import { ref } from 'vue'
+
+export type FeedbackState = 'idle' | 'sending' | 'confirmed' | 'disputed'
+
+export function useTrustFeedback(sellerId: string) {
+  const state = ref<FeedbackState>('idle')
+
+  async function submitFeedback(confirmed: boolean): Promise<void> {
+    if (state.value !== 'idle') return
+    state.value = 'sending'
+    try {
+      await fetch('/api/community/signal', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ seller_id: sellerId, confirmed }),
+      })
+      // Always confirm regardless of response -- fail-soft contract.
+    } catch {
+      // Network unreachable -- still confirm to the user. Signal is best-effort.
+    } finally {
+      state.value = confirmed ? 'confirmed' : 'disputed'
+    }
+  }
+
+  return { state, submitFeedback }
+}