use more typechecking

Author: nedtwigg

src/components/Badge.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import type { VariantProps } from 'tailwind-variants'
-import { badgeCVA, typeIcons, typeTooltips } from '@/components/design'
+import { badgeCVA, typeColors, typeIcons, typeTooltips } from '@/components/design'
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {
   type: keyof typeof typeIcons
@@ -11,7 +11,8 @@ export type BadgeProps = VariantProps<typeof badgeCVA> & {
 const Badge = ({ text, type }: BadgeProps) => {
   const Icon = typeIcons[type]
   const [showTooltip, setShowTooltip] = useState(false)
-  const TooltipComponent = showTooltip && typeTooltips[type]
+  const TooltipComponent =
+    showTooltip && type in typeTooltips && typeTooltips[type as keyof typeof typeTooltips]
   return (
     <button
       type='button'
@@ -22,7 +23,7 @@ const Badge = ({ text, type }: BadgeProps) => {
       <span
         className={twMerge(
           badgeCVA({
-            clickable: !!typeTooltips[type],
+            clickable: type in typeTooltips,
             type,
           }),
         )}
@@ -32,9 +33,10 @@ const Badge = ({ text, type }: BadgeProps) => {
       </span>
       {TooltipComponent && (
         <div
-          className={
-            'absolute top-full z-10 w-max rounded bg-gray-800 px-2 py-1 text-white text-xs shadow-lg'
-          }
+          className={twMerge(
+            'absolute top-full z-10 w-50 rounded border px-2 py-1 text-xs shadow-lg',
+            typeColors[type],
+          )}
         >
           <TooltipComponent />
         </div>

src/components/design.tsx

@@ -19,7 +19,23 @@ import { LinkPreview } from './BadgePreviews/LinkPreview'
 import { TextPreview } from './BadgePreviews/TextPreview'
 import { TimePreview } from './BadgePreviews/TimePreview'
 
-// Type colors definition - single source of truth
+// Map types to their icons - source of truth for badge types
+export const typeIcons = {
+  blank: Code,
+  code: Code,
+  hideTrashed: EyeOff,
+  image: Image,
+  link: Link,
+  open: Monitor,
+  sent: MailCheck,
+  settings: Settings,
+  text: TextSelect,
+  time: Clock,
+  trashed: Trash2,
+  unsent: MessageSquareDashed,
+} as const
+
+// Type colors definition - must be exhaustive with typeIcons
 export const typeColors = {
   blank: 'bg-transparent text-gray-700',
   code: 'bg-pink-50 text-pink-700',
@@ -33,7 +49,7 @@ export const typeColors = {
   time: 'bg-gray-50 text-gray-700',
   trashed: 'bg-gray-50 text-yellow-700',
   unsent: 'bg-amber-100 text-amber-700',
-} as const
+} as const satisfies Record<keyof typeof typeIcons, string>
 
 // TV configuration for stat badges
 export const badgeCVA = tv({
@@ -54,26 +70,10 @@ export const badgeCVA = tv({
   },
 })
 
-// Map types to their icons
-export const typeIcons = {
-  blank: Code,
-  code: Code,
-  hideTrashed: EyeOff,
-  image: Image,
-  link: Link,
-  open: Monitor,
-  sent: MailCheck,
-  settings: Settings,
-  text: TextSelect,
-  time: Clock,
-  trashed: Trash2,
-  unsent: MessageSquareDashed,
-} as const
-
-export const typeTooltips: { [key: string]: () => JSX.Element | undefined } = {
+export const typeTooltips = {
   code: CodePreview,
   image: ImagePreview,
   link: LinkPreview,
   text: TextPreview,
   time: TimePreview,
-}
+} satisfies Partial<Record<keyof typeof typeIcons, () => JSX.Element | undefined>>