remove badges; polish up colours

Author: themisvaltinos

vscode/react/src/components/tablediff/ColumnStatsSection.tsx

@@ -102,13 +102,6 @@ export function ColumnStatsSection({
     <SectionToggle
       id="columnStats"
       title="Column Statistics"
-      badge={`${Object.keys(columnStats).length} columns`}
-      badgeClassName={twMerge(
-        'px-2 py-1 text-xs rounded border',
-        twColors.bgInput,
-        'text-[var(--vscode-symbolIcon-classForeground,#9b59b6)]',
-        'border-[var(--vscode-symbolIcon-classForeground,#9b59b6)]',
-      )}
       expanded={expanded}
       onToggle={onToggle}
     >

vscode/react/src/components/tablediff/RowStatsSection.tsx

@@ -28,13 +28,6 @@ export function RowStatsSection({
     <SectionToggle
       id="rows"
       title="Row Statistics"
-      badge={`${formatPercentage(fullMatchPct)} match rate`}
-      badgeClassName={twMerge(
-        'px-2 py-1 text-xs rounded border',
-        twColors.bgInput,
-        twColors.textInfo,
-        twColors.borderInfo,
-      )}
       expanded={expanded}
       onToggle={onToggle}
     >

vscode/react/src/components/tablediff/SampleDataSection.tsx

@@ -255,8 +255,8 @@ export function SampleDataSection({ rowDiff }: SampleDataSectionProps) {
     <div className="px-8 py-3 space-y-6">
       {/* COMMON ROWS diff */}
       <div>
-        <h4 className={twMerge('text-sm font-medium mb-3', twColors.textClass)}>
-          COMMON ROWS Data Differences:
+        <h4 className={twMerge('text-sm font-medium mb-3', twColors.textInfo)}>
+          Common Rows Data Differences:
         </h4>
         {Object.keys(groupedDifferences).length > 0 ? (
           <div className="space-y-4">
@@ -285,7 +285,7 @@ export function SampleDataSection({ rowDiff }: SampleDataSectionProps) {
               twColors.textWarning,
             )}
           >
-            SOURCE ONLY Rows:
+            Source Only Rows:
           </h4>
           <div
             className={twMerge(
@@ -343,7 +343,7 @@ export function SampleDataSection({ rowDiff }: SampleDataSectionProps) {
               twColors.textSuccess,
             )}
           >
-            TARGET ONLY Rows:
+            Target Only Rows:
           </h4>
           <div
             className={twMerge(

vscode/react/src/components/tablediff/SchemaDiffSection.tsx

@@ -84,30 +84,10 @@ export function SchemaDiffSection({
     )
   }, [schemaDiff])
 
-  const totalChanges =
-    Object.keys(schemaDiff.added).length +
-    Object.keys(schemaDiff.removed).length +
-    Object.keys(schemaDiff.modified).length
-
   return (
     <SectionToggle
       id="schema"
       title="Schema Changes"
-      badge={schemaHasChanges ? `${totalChanges} changes` : 'No changes'}
-      badgeClassName={twMerge(
-        'px-2 py-1 text-xs rounded border',
-        schemaHasChanges
-          ? twColors.bgModified +
-              ' ' +
-              twColors.textModified +
-              ' ' +
-              twColors.borderModified
-          : twColors.bgAdded +
-              ' ' +
-              twColors.textAdded +
-              ' ' +
-              twColors.borderAdded,
-      )}
       expanded={expanded}
       onToggle={onToggle}
     >

vscode/react/src/components/tablediff/SectionToggle.tsx

@@ -6,19 +6,13 @@ import { twColors, twMerge } from './tailwind-utils'
 interface SectionToggleProps {
   id: keyof ExpandedSections
   title: string
-  badge?: string
-  badgeStyle?: React.CSSProperties
-  badgeClassName?: string
   expanded: boolean
   onToggle(): void
   children: ReactNode
 }
 
 export function SectionToggle({
   title,
-  badge,
-  badgeStyle,
-  badgeClassName,
   expanded,
   onToggle,
   children,
@@ -39,16 +33,6 @@ export function SectionToggle({
           <ChevronRightIcon className="w-4 h-4 mr-2 shrink-0 transition-transform" />
         )}
         <span className="font-medium flex-1">{title}</span>
-        {badge && (
-          <span
-            className={
-              badgeClassName || 'text-xs px-2 py-0.5 rounded ml-2 border'
-            }
-            style={badgeStyle}
-          >
-            {badge}
-          </span>
-        )}
       </button>
       <div
         className={twMerge(

vscode/react/src/components/tablediff/TableDiffResults.tsx

@@ -38,7 +38,7 @@ export function TableDiffResults({ data }: Props) {
     }))
   }
 
-  const formatPercentage = (v: number) => `${(v).toFixed(1)}%`
+  const formatPercentage = (v: number) => `${v.toFixed(1)}%`
   const formatCount = (v: number) => v.toLocaleString()
 
   return (
@@ -72,10 +72,7 @@ export function TableDiffResults({ data }: Props) {
             {schema_diff.source}
           </code>
           <span
-            className={twMerge(
-              'text-sm font-medium ml-4',
-              twColors.textTarget,
-            )}
+            className={twMerge('text-sm font-medium ml-4', twColors.textTarget)}
           >
             Target:
           </span>
@@ -148,13 +145,6 @@ export function TableDiffResults({ data }: Props) {
           <SectionToggle
             id="sampleData"
             title="Sample Data"
-            badge={`${(row_diff.processed_sample_data.column_differences?.length || 0) + (row_diff.processed_sample_data.source_only?.length || 0) + (row_diff.processed_sample_data.target_only?.length || 0)} rows`}
-            badgeClassName={twMerge(
-              'px-2 py-1 text-xs rounded border',
-              twColors.bgInput,
-              twColors.textAccent,
-              'border-[var(--vscode-textLink-foreground)]',
-            )}
             expanded={expanded.sampleData}
             onToggle={() => toggle('sampleData')}
           >