kyd-shared-badge 0.3.44 → 0.3.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.44",
+  "version": "0.3.45",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/PrintableBadgeDisplay.tsx

@@ -286,9 +286,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
           {/* Connected Platforms */}
           <Reveal headless={isHeadless}>
-            <div id="appendix-connected">
-              <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
-            </div>
+            <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </Reveal>
 
         

package/src/components/ConnectedPlatforms.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { formatLocalDate } from '../utils/date';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
 import { SiCredly, SiFiverr } from 'react-icons/si';
@@ -35,6 +35,26 @@ const formatProviderName = (name?: string) => {
 
 const ConnectedPlatforms = ({ accounts, authenticity }: { accounts?: ConnectedAccount[]; authenticity?: { label?: string; description?: string; oauth_connected?: string[]; mismatches?: Array<{ provider?: string; detail?: string }> } }) => {
   const list = Array.isArray(accounts) ? accounts : [];
+  useEffect(() => {
+    const flash = () => {
+      const hash = typeof window !== 'undefined' ? window.location.hash : '';
+      if (!hash) return;
+      const id = hash.startsWith('#') ? hash.slice(1) : hash;
+      const el = document.getElementById(id) as HTMLElement | null;
+      if (!el) return;
+      const originalBg = el.style.backgroundColor;
+      el.style.transition = 'background-color 300ms ease';
+      el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
+      // Ensure visibility after tab switch
+      try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch {}
+      setTimeout(() => {
+        el.style.backgroundColor = originalBg || '';
+      }, 1200);
+    };
+    flash();
+    window.addEventListener('hashchange', flash);
+    return () => window.removeEventListener('hashchange', flash);
+  }, []);
   if (list.length === 0) return null;
   return (
     <div className="pt-8">

package/src/components/ReportHeader.tsx

@@ -72,7 +72,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Account Authenticity {isCritical ? 'Warning' : 'Notice'}</div>
               <div className={'mt-1'} style={{ color: 'var(--text-secondary)' }}>{accountAuthenticity?.description || (isCritical ? 'We detected signals that some linked accounts may be inauthentic. Review sources below.' : 'Some inconsistencies were observed across linked accounts. Review sources below.')}</div>
               <div className={'mt-2'}>
-                <a href={'#appendix-connected'} className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
+                <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
               </div>
             </div>
           </div>