canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Your Name 2026-01-19 20:58:14 +00:00
parent bd6d53f1e8
commit 59019f493f
3 changed files with 91 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

11
src/api/client.js
View File

@ -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 userScore = truth.user_score ?? truth.user ?? truth.truth_score ?? 50;
const aiScore = truth.ai_score ?? truth.ai ?? 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,
truth_score: userScore ?? aiScore, // Main display score
user_score: userVoteEffect,
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

256
src/components/Map/markerManager.js
View File

@ -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)
const truthVoteSection = modalWrap.querySelector('.sw-truth-vote-section');
if (truthVoteSection && postID > 0) {
const downvoteBtn = truthVoteSection.querySelector('.sw-truth-downvote');
const upvoteBtn = truthVoteSection.querySelector('.sw-truth-upvote');
const scoreDisplay = truthVoteSection.querySelector('.sw-truth-score-display');
const railFill = truthVoteSection.querySelector('.sw-truth-rail-fill');
// Truth vote handlers (thumbs up/down in truth badge)
const truthBadgeNew = modalWrap.querySelector('.sw-truth-badge');
if (truthBadgeNew && postID > 0) {
const downvoteBtn = truthBadgeNew.querySelector('.sw-truth-downvote');
const upvoteBtn = truthBadgeNew.querySelector('.sw-truth-upvote');
const scoreDisplay = truthBadgeNew.querySelector('.sw-truth-badge-score');
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
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}`;
}
scoreDisplay.style.background = truthColor(score);
}
};
@ -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.background = 'rgba(52, 211, 153, 0.4)';
upvoteBtn.style.transform = 'scale(1.2)';
upvoteBtn.style.background = 'rgba(52, 211, 153, 0.5)';
} else if (vote === 'false' && downvoteBtn) {
downvoteBtn.style.transform = 'scale(1.15)';
downvoteBtn.style.background = 'rgba(239, 68, 68, 0.4)';
downvoteBtn.style.transform = 'scale(1.2)';
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);