kyd-shared-badge 0.3.119 → 0.3.120

package/package.json

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

package/src/connect/ConnectAccounts.tsx

@@ -5,7 +5,7 @@ import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
 import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings, Shield, InfoIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle, ProgressCircle } from '../ui';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle, ConnectProgress } from '../ui';
 import Link from 'next/link';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
@@ -222,32 +222,22 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     return setupAction === 'install' || setupAction === 'created';
   }, [githubConnectedAccount]);
   
-  // Progress computation
-  const targetProviderIds = useMemo(() => {
-    const targets = (requiredProviders && requiredProviders.length
-      ? requiredProviders
-      : providers.map(p => p.id))
-      .map(id => id.toLowerCase());
-    return new Set(targets);
-  }, [requiredProviders, providers]);
-  const numConnectedTargets = useMemo(() => {
-    let count = 0;
-    targetProviderIds.forEach(id => { if (connectedIds.has(id)) count += 1; });
-    return count;
-  }, [targetProviderIds, connectedIds]);
-  const progressPercent = useMemo(() => {
-    const total = targetProviderIds.size;
-    if (!total) return 0;
-    return Math.round((numConnectedTargets / total) * 100);
-  }, [numConnectedTargets, targetProviderIds]);
+  // Progress UI is outsourced to ConnectProgress
   
   return (
     <>
+      {/* Mobile: relative summary above content */}
       {providers?.length ? (
-        <div className="fixed sm:bottom-6 sm:right-6 bottom-4 right-4 z-50 pointer-events-none">
-          <ProgressCircle value={progressPercent} size={68} thickness={6} />
+        <div className="sm:hidden px-4 mb-3">
+          <ConnectProgress layout="inline" providers={providers} connectedIds={connectedIds} />
         </div>
       ) : null}
+
+      {/* Desktop: fixed top-right summary */}
+      {providers?.length ? (
+        <ConnectProgress providers={providers} connectedIds={connectedIds} />
+      ) : null}
+
       <AnimatePresence initial={false} mode="wait">
       {showDataHandling ? (
         <motion.div

package/src/ui/connect-progress.tsx

@@ -0,0 +1,97 @@
+'use client'
+import React, { useMemo } from 'react'
+import { Card, CardContent } from './card'
+import { ProgressCircle } from './progress-circle'
+
+export type ConnectProgressProps = {
+  providers: Array<{ id: string; name: string }>
+  connectedIds: Set<string>
+  className?: string
+  layout?: 'fixed-desktop' | 'inline'
+}
+
+export function ConnectProgress(props: ConnectProgressProps) {
+  const { providers, connectedIds, className, layout = 'fixed-desktop' } = props
+
+  const hasGithub = connectedIds.has('github')
+  const hasLinkedIn = connectedIds.has('linkedin')
+  const otherConnectedCount = useMemo(() => {
+    let count = 0
+    connectedIds.forEach(id => { if (id !== 'github' && id !== 'linkedin') count += 1 })
+    return count
+  }, [connectedIds])
+
+  const progressPercent = useMemo(() => {
+    const githubWeight = hasGithub ? 65 : 0
+    const linkedinWeight = hasLinkedIn ? 15 : 0
+    const othersWeight = Math.min(otherConnectedCount, 2) * 10
+    return Math.max(0, Math.min(100, githubWeight + linkedinWeight + othersWeight))
+  }, [hasGithub, hasLinkedIn, otherConnectedCount])
+
+  const progressCopy = useMemo(() => {
+    const score = progressPercent
+    if (score === 0) {
+      return {
+        headline: 'Get started — connect GitHub',
+        body: 'GitHub contributes ~65% of your profile strength. Add LinkedIn (+15%) and 1–2 other platforms (+10% each). 70%+ is strong; 100% is optional.'
+      }
+    }
+    if (hasGithub && score < 70) {
+      return {
+        headline: 'Good base — add more signals',
+        body: 'Add LinkedIn (+15%) and at least one other platform (+10%) to reach 70%+, which is considered strong. 100% is not mandatory.'
+      }
+    }
+    if (!hasGithub && score < 70) {
+      return {
+        headline: 'Add GitHub for a big boost',
+        body: 'Current signals are light. Connecting GitHub adds ~65% weight and significantly improves your profile.'
+      }
+    }
+    if (score >= 70 && score < 90) {
+      return {
+        headline: 'Strong — recommended coverage achieved',
+        body: '70%+ indicates a strong profile. Adding more platforms can further improve verification. 100% is optional but even better.'
+      }
+    }
+    if (score >= 90) {
+      return {
+        headline: 'Excellent — high confidence',
+        body: 'You are near complete coverage. 100% is not required, but additional platforms can further increase confidence.'
+      }
+    }
+    return {
+      headline: 'Keep going',
+      body: 'Connect more platforms to strengthen your profile. 70%+ is strong; 100% is optional.'
+    }
+  }, [progressPercent, hasGithub])
+
+  const content = (
+    <Card className={`border-[var(--icon-button-secondary)] ${className || ''}`} style={{ backgroundColor: 'var(--content-card-background)'}}>
+      <CardContent className="py-3 px-3">
+        <div className="flex items-center gap-3">
+          <ProgressCircle value={progressPercent} size={64} thickness={6} />
+          <div className="min-w-0 max-w-xs">
+            <div className="text-sm font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
+            <div className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)'}}>
+              {progressCopy.body}
+            </div>
+            <div className="text-[10px] mt-1" style={{ color: 'var(--text-secondary)'}}>
+              Weighted score • {progressPercent}%
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+
+  if (layout === 'inline') return content
+
+  return (
+    <div className="hidden sm:block fixed top-6 right-6 z-50">{content}</div>
+  )
+}
+
+export default ConnectProgress
+
+

package/src/ui/index.ts

@@ -4,4 +4,5 @@ export * from './input';
 export * from './textarea';
 export * from './spinner';
 export * from './tooltip';
-export * from './progress-circle';
+export * from './progress-circle';
+export * from './connect-progress';