fix: Single truth badge with thumbs up/down, fix score display

- Remove duplicate truth vote section (was showing 2 truth scores)
- Add thumbs up/down buttons to existing truth badge
- Fix client.js to use truth_score (final score) instead of user_score (vote effect)
- Both regular and cluster modals have voting in the badge

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sociowire-frontend",
   "private": true,
-  "version": "0.0.64",
+  "version": "0.0.65",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",

src/api/client.js

@@ -424,15 +424,16 @@ export async function votePostTruth(postId, vote) {
     throw new Error(text || "truth vote failed");
   }
   const data = await res.json().catch(() => ({}));
-  // Normalize response - API may return { truth: {...} } or flat object
+  // Normalize response - API returns { ok: true, truth: {...} }
   const truth = data?.truth || data || {};
   const voteCount = truth.vote_count ?? truth.total_votes ?? truth.count ?? 0;
-  const aiScore = truth.ai_score ?? truth.ai ?? truth.truth_score ?? 50;
+  const aiScore = truth.ai_score ?? truth.ai ?? 50;
-  const userScore = truth.user_score ?? truth.user ?? truth.truth_score ?? 50;
+  const truthScore = truth.truth_score ?? truth.TruthScore ?? 50; // Final calculated score
+  const userVoteEffect = truth.user_score ?? 0; // Vote effect (+/- points), not the score
   return {
     ai_score: aiScore,
-    user_score: userScore,
+    user_score: userVoteEffect,
-    truth_score: userScore ?? aiScore, // Main display score
+    truth_score: truthScore, // Main display score - the final calculated value
     total_votes: voteCount,
     vote_count: voteCount,
     user_vote: vote, // The vote that was just cast

src/components/Map/markerManager.js

@@ -1329,7 +1329,7 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
         <div class="sw-cluster-body">
           <div class="sw-cluster-left">
             <div class="sw-cluster-hero">
-              <div class="sw-truth-badge" data-score="${truth}" style="
+              <div class="sw-truth-badge" data-score="${truth}" data-post-id="${postID}" style="
                 position: absolute;
                 top: 12px;
                 left: 12px;
@@ -1337,12 +1337,28 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
-                gap: 4px;
+                gap: 6px;
                 padding: 8px 6px;
                 background: rgba(15, 23, 42, 0.7);
                 border-radius: 12px;
                 backdrop-filter: blur(8px);
               ">
+                <button class="sw-truth-vote-btn sw-truth-upvote" type="button" data-vote="true" style="
+                  width: 28px;
+                  height: 28px;
+                  border-radius: 50%;
+                  border: 1px solid rgba(52, 211, 153, 0.4);
+                  background: rgba(52, 211, 153, 0.15);
+                  color: #34d399;
+                  cursor: pointer;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  transition: all 0.2s ease;
+                  padding: 0;
+                ">
+                  <i class="fa-solid fa-thumbs-up" style="font-size: 11px;"></i>
+                </button>
                 <div class="sw-truth-badge-score" style="
                   width: 42px;
                   height: 42px;
@@ -1356,7 +1372,23 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
                   color: #fff;
                   box-shadow: 0 2px 8px rgba(0,0,0,0.3);
                 ">${truth}</div>
-                <span style="font-size: 9px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px;">Truth</span>
+                <button class="sw-truth-vote-btn sw-truth-downvote" type="button" data-vote="false" style="
+                  width: 28px;
+                  height: 28px;
+                  border-radius: 50%;
+                  border: 1px solid rgba(239, 68, 68, 0.4);
+                  background: rgba(239, 68, 68, 0.15);
+                  color: #f87171;
+                  cursor: pointer;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  transition: all 0.2s ease;
+                  padding: 0;
+                ">
+                  <i class="fa-solid fa-thumbs-down" style="font-size: 11px;"></i>
+                </button>
+                <span style="font-size: 8px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px;">Truth</span>
               </div>
               <div class="sw-cluster-hero-media">
                 ${
@@ -1385,76 +1417,6 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
           </div>
         </div>
 
-        <div class="sw-truth-vote-section" data-post-id="${postID}" style="
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          padding: 12px 16px;
-          background: rgba(15, 23, 42, 0.5);
-          border-radius: 12px;
-          margin: 12px 0;
-        ">
-          <button class="sw-truth-vote-btn sw-truth-downvote" type="button" data-action="truth-vote" data-vote="false" style="
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
-            border: 2px solid rgba(239, 68, 68, 0.4);
-            background: rgba(239, 68, 68, 0.15);
-            color: #f87171;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-          ">
-            <i class="fa-solid fa-thumbs-down" style="font-size: 16px;"></i>
-          </button>
-
-          <div class="sw-truth-rail-container" style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
-            <div style="display: flex; align-items: baseline; gap: 6px;">
-              <span class="sw-truth-score-display" style="
-                font-size: 28px;
-                font-weight: 800;
-                color: ${truth >= 70 ? '#34d399' : truth >= 50 ? '#fbbf24' : '#f87171'};
-                text-shadow: 0 0 20px ${truth >= 70 ? 'rgba(52, 211, 153, 0.5)' : truth >= 50 ? 'rgba(251, 191, 36, 0.5)' : 'rgba(248, 113, 113, 0.5)'};
-              ">${truth}</span>
-              <span style="font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px;">Truth Score</span>
-            </div>
-            <div class="sw-truth-rail" style="
-              height: 6px;
-              background: rgba(255, 255, 255, 0.1);
-              border-radius: 3px;
-              overflow: hidden;
-              position: relative;
-            ">
-              <div class="sw-truth-rail-fill" style="
-                height: 100%;
-                width: ${Math.min(100, Math.max(0, truth))}%;
-                background: ${truth >= 70 ? 'linear-gradient(90deg, #10b981, #34d399)' : truth >= 50 ? 'linear-gradient(90deg, #f59e0b, #fbbf24)' : 'linear-gradient(90deg, #ef4444, #f87171)'};
-                border-radius: 3px;
-                transition: width 0.3s ease, background 0.3s ease;
-                box-shadow: 0 0 8px ${truth >= 70 ? 'rgba(52, 211, 153, 0.6)' : truth >= 50 ? 'rgba(251, 191, 36, 0.6)' : 'rgba(248, 113, 113, 0.6)'};
-              "></div>
-            </div>
-          </div>
-
-          <button class="sw-truth-vote-btn sw-truth-upvote" type="button" data-action="truth-vote" data-vote="true" style="
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
-            border: 2px solid rgba(52, 211, 153, 0.4);
-            background: rgba(52, 211, 153, 0.15);
-            color: #34d399;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-          ">
-            <i class="fa-solid fa-thumbs-up" style="font-size: 16px;"></i>
-          </button>
-        </div>
-
         <div class="sw-stat-row">
           <div class="sw-stat-pill" data-stat="views">👁 <span class="sw-stat-num">${formatCount(viewCount)}</span></div>
           <div class="sw-stat-pill" data-stat="likes">❤️ <span class="sw-stat-num">${formatCount(likeCount)}</span></div>
@@ -1502,16 +1464,32 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
 
         <div class="sw-modal-hero-row">
           ${!isCamera ? `
-          <div class="sw-truth-badge" data-score="${truth}" style="
+          <div class="sw-truth-badge" data-score="${truth}" data-post-id="${postID}" style="
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 4px;
+            gap: 6px;
             padding: 8px 6px;
-            background: rgba(15, 23, 42, 0.6);
+            background: rgba(15, 23, 42, 0.7);
             border-radius: 12px;
             backdrop-filter: blur(8px);
           ">
+            <button class="sw-truth-vote-btn sw-truth-upvote" type="button" data-vote="true" style="
+              width: 28px;
+              height: 28px;
+              border-radius: 50%;
+              border: 1px solid rgba(52, 211, 153, 0.4);
+              background: rgba(52, 211, 153, 0.15);
+              color: #34d399;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              transition: all 0.2s ease;
+              padding: 0;
+            ">
+              <i class="fa-solid fa-thumbs-up" style="font-size: 11px;"></i>
+            </button>
             <div class="sw-truth-badge-score" style="
               width: 42px;
               height: 42px;
@@ -1525,7 +1503,23 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
               color: #fff;
               box-shadow: 0 2px 8px rgba(0,0,0,0.3);
             ">${truth}</div>
-            <span style="font-size: 9px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px;">Truth</span>
+            <button class="sw-truth-vote-btn sw-truth-downvote" type="button" data-vote="false" style="
+              width: 28px;
+              height: 28px;
+              border-radius: 50%;
+              border: 1px solid rgba(239, 68, 68, 0.4);
+              background: rgba(239, 68, 68, 0.15);
+              color: #f87171;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              transition: all 0.2s ease;
+              padding: 0;
+            ">
+              <i class="fa-solid fa-thumbs-down" style="font-size: 11px;"></i>
+            </button>
+            <span style="font-size: 8px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px;">Truth</span>
           </div>
           ` : ''}
           <div class="sw-modal-hero" ${(isCamera || isVideo) ? 'style="flex:1;max-width:100%;"' : ''}>
@@ -1575,76 +1569,6 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
           ${escapeHtml(data?.summary || postData?.snippet || "")}
         </div>
 
-        <div class="sw-truth-vote-section" data-post-id="${postID}" style="
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          padding: 12px 16px;
-          background: rgba(15, 23, 42, 0.5);
-          border-radius: 12px;
-          margin: 12px 0;
-        ">
-          <button class="sw-truth-vote-btn sw-truth-downvote" type="button" data-action="truth-vote" data-vote="false" style="
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
-            border: 2px solid rgba(239, 68, 68, 0.4);
-            background: rgba(239, 68, 68, 0.15);
-            color: #f87171;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-          ">
-            <i class="fa-solid fa-thumbs-down" style="font-size: 16px;"></i>
-          </button>
-
-          <div class="sw-truth-rail-container" style="flex: 1; display: flex; flex-direction: column; gap: 6px;">
-            <div style="display: flex; align-items: baseline; gap: 6px;">
-              <span class="sw-truth-score-display" style="
-                font-size: 28px;
-                font-weight: 800;
-                color: ${truth >= 70 ? '#34d399' : truth >= 50 ? '#fbbf24' : '#f87171'};
-                text-shadow: 0 0 20px ${truth >= 70 ? 'rgba(52, 211, 153, 0.5)' : truth >= 50 ? 'rgba(251, 191, 36, 0.5)' : 'rgba(248, 113, 113, 0.5)'};
-              ">${truth}</span>
-              <span style="font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px;">Truth Score</span>
-            </div>
-            <div class="sw-truth-rail" style="
-              height: 6px;
-              background: rgba(255, 255, 255, 0.1);
-              border-radius: 3px;
-              overflow: hidden;
-              position: relative;
-            ">
-              <div class="sw-truth-rail-fill" style="
-                height: 100%;
-                width: ${Math.min(100, Math.max(0, truth))}%;
-                background: ${truth >= 70 ? 'linear-gradient(90deg, #10b981, #34d399)' : truth >= 50 ? 'linear-gradient(90deg, #f59e0b, #fbbf24)' : 'linear-gradient(90deg, #ef4444, #f87171)'};
-                border-radius: 3px;
-                transition: width 0.3s ease, background 0.3s ease;
-                box-shadow: 0 0 8px ${truth >= 70 ? 'rgba(52, 211, 153, 0.6)' : truth >= 50 ? 'rgba(251, 191, 36, 0.6)' : 'rgba(248, 113, 113, 0.6)'};
-              "></div>
-            </div>
-          </div>
-
-          <button class="sw-truth-vote-btn sw-truth-upvote" type="button" data-action="truth-vote" data-vote="true" style="
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
-            border: 2px solid rgba(52, 211, 153, 0.4);
-            background: rgba(52, 211, 153, 0.15);
-            color: #34d399;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-          ">
-            <i class="fa-solid fa-thumbs-up" style="font-size: 16px;"></i>
-          </button>
-        </div>
-
         <div class="sw-stat-row">
           <div class="sw-stat-pill" data-stat="views">👁 <span class="sw-stat-num">${formatCount(viewCount)}</span></div>
           <div class="sw-stat-pill" data-stat="likes">❤️ <span class="sw-stat-num">${formatCount(likeCount)}</span></div>
@@ -1941,13 +1865,12 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
     });
   }
 
-  // Truth vote handlers (thumbs up/down)
+  // Truth vote handlers (thumbs up/down in truth badge)
-  const truthVoteSection = modalWrap.querySelector('.sw-truth-vote-section');
+  const truthBadgeNew = modalWrap.querySelector('.sw-truth-badge');
-  if (truthVoteSection && postID > 0) {
+  if (truthBadgeNew && postID > 0) {
-    const downvoteBtn = truthVoteSection.querySelector('.sw-truth-downvote');
+    const downvoteBtn = truthBadgeNew.querySelector('.sw-truth-downvote');
-    const upvoteBtn = truthVoteSection.querySelector('.sw-truth-upvote');
+    const upvoteBtn = truthBadgeNew.querySelector('.sw-truth-upvote');
-    const scoreDisplay = truthVoteSection.querySelector('.sw-truth-score-display');
+    const scoreDisplay = truthBadgeNew.querySelector('.sw-truth-badge-score');
-    const railFill = truthVoteSection.querySelector('.sw-truth-rail-fill');
     let currentVote = null;
     let isVoting = false;
 
@@ -1955,18 +1878,7 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
       if (scoreDisplay && Number.isFinite(newScore)) {
         const score = Math.round(newScore);
         scoreDisplay.textContent = String(score);
-        // Update color based on score
+        scoreDisplay.style.background = truthColor(score);
-        const color = score >= 70 ? '#34d399' : score >= 50 ? '#fbbf24' : '#f87171';
-        const glow = score >= 70 ? 'rgba(52, 211, 153, 0.5)' : score >= 50 ? 'rgba(251, 191, 36, 0.5)' : 'rgba(248, 113, 113, 0.5)';
-        scoreDisplay.style.color = color;
-        scoreDisplay.style.textShadow = `0 0 20px ${glow}`;
-        // Update rail
-        if (railFill) {
-          railFill.style.width = `${Math.min(100, Math.max(0, score))}%`;
-          const gradient = score >= 70 ? 'linear-gradient(90deg, #10b981, #34d399)' : score >= 50 ? 'linear-gradient(90deg, #f59e0b, #fbbf24)' : 'linear-gradient(90deg, #ef4444, #f87171)';
-          railFill.style.background = gradient;
-          railFill.style.boxShadow = `0 0 8px ${glow}`;
-        }
       }
     };
 
@@ -1980,11 +1892,11 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
 
       // Visual feedback
       if (vote === 'true' && upvoteBtn) {
-        upvoteBtn.style.transform = 'scale(1.15)';
+        upvoteBtn.style.transform = 'scale(1.2)';
-        upvoteBtn.style.background = 'rgba(52, 211, 153, 0.4)';
+        upvoteBtn.style.background = 'rgba(52, 211, 153, 0.5)';
       } else if (vote === 'false' && downvoteBtn) {
-        downvoteBtn.style.transform = 'scale(1.15)';
+        downvoteBtn.style.transform = 'scale(1.2)';
-        downvoteBtn.style.background = 'rgba(239, 68, 68, 0.4)';
+        downvoteBtn.style.background = 'rgba(239, 68, 68, 0.5)';
       }
 
       try {
@@ -2004,11 +1916,11 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
       setTimeout(() => {
         if (upvoteBtn) {
           upvoteBtn.style.transform = '';
-          upvoteBtn.style.background = currentVote === 'true' ? 'rgba(52, 211, 153, 0.35)' : 'rgba(52, 211, 153, 0.15)';
+          upvoteBtn.style.background = currentVote === 'true' ? 'rgba(52, 211, 153, 0.4)' : 'rgba(52, 211, 153, 0.15)';
         }
         if (downvoteBtn) {
           downvoteBtn.style.transform = '';
-          downvoteBtn.style.background = currentVote === 'false' ? 'rgba(239, 68, 68, 0.35)' : 'rgba(239, 68, 68, 0.15)';
+          downvoteBtn.style.background = currentVote === 'false' ? 'rgba(239, 68, 68, 0.4)' : 'rgba(239, 68, 68, 0.15)';
         }
         isVoting = false;
       }, 200);