From 69752febe89224a1c2292ea3427d59b3a8364340 Mon Sep 17 00:00:00 2001
From: Todd Riley <todd@websbytodd.com>
Date: Wed, 24 Sep 2025 15:59:18 -0400
Subject: [PATCH 1/6] Add tool tips that link to issues.

---
 src/components/Badge.tsx                      | 40 ++++++++++++++-----
 src/components/BadgePreviews/CodePreview.tsx  |  3 ++
 src/components/BadgePreviews/ImagePreview.tsx |  3 ++
 src/components/BadgePreviews/LinkPreview.tsx  |  3 ++
 src/components/BadgePreviews/TextPreview.tsx  |  3 ++
 src/components/BadgePreviews/TimePreview.tsx  |  3 ++
 src/components/design.tsx                     | 14 +++++++
 7 files changed, 59 insertions(+), 10 deletions(-)
 create mode 100644 src/components/BadgePreviews/CodePreview.tsx
 create mode 100644 src/components/BadgePreviews/ImagePreview.tsx
 create mode 100644 src/components/BadgePreviews/LinkPreview.tsx
 create mode 100644 src/components/BadgePreviews/TextPreview.tsx
 create mode 100644 src/components/BadgePreviews/TimePreview.tsx

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 2f64a53..960e0fc 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,6 +1,7 @@
+import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import type { VariantProps } from 'tailwind-variants'
-import { badgeCVA, typeIcons } from '@/components/design'
+import { badgeCVA, typeIcons, typeTooltips } from '@/components/design'
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {
   type: keyof typeof typeIcons
@@ -9,17 +10,36 @@ 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]
   return (
-    <span
-      className={twMerge(
-        badgeCVA({
-          type,
-        }),
-      )}
+    <button
+      type='button'
+      className='relative'
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
     >
-      {type === 'blank' || <Icon className='h-3 w-3' />}
-      {text || type}
-    </span>
+      <span
+        className={twMerge(
+          badgeCVA({
+            clickable: !!typeTooltips[type],
+            type,
+          }),
+        )}
+      >
+        {type === 'blank' || <Icon className='h-3 w-3' />}
+        {text || type}
+      </span>
+      {TooltipComponent && (
+        <div
+          className={
+            'absolute top-full w-max rounded bg-gray-800 px-2 py-1 text-white text-xs shadow-lg z-10'
+          }
+        >
+          <TooltipComponent />
+        </div>
+      )}
+    </button>
   )
 }
 
diff --git a/src/components/BadgePreviews/CodePreview.tsx b/src/components/BadgePreviews/CodePreview.tsx
new file mode 100644
index 0000000..60d4e17
--- /dev/null
+++ b/src/components/BadgePreviews/CodePreview.tsx
@@ -0,0 +1,3 @@
+export function CodePreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/81'>TODO #81</a>
+}
diff --git a/src/components/BadgePreviews/ImagePreview.tsx b/src/components/BadgePreviews/ImagePreview.tsx
new file mode 100644
index 0000000..214c1ff
--- /dev/null
+++ b/src/components/BadgePreviews/ImagePreview.tsx
@@ -0,0 +1,3 @@
+export function ImagePreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/80'>TODO #80</a>
+}
diff --git a/src/components/BadgePreviews/LinkPreview.tsx b/src/components/BadgePreviews/LinkPreview.tsx
new file mode 100644
index 0000000..8770ae6
--- /dev/null
+++ b/src/components/BadgePreviews/LinkPreview.tsx
@@ -0,0 +1,3 @@
+export function LinkPreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/79'>TODO #79</a>
+}
diff --git a/src/components/BadgePreviews/TextPreview.tsx b/src/components/BadgePreviews/TextPreview.tsx
new file mode 100644
index 0000000..fb8a73c
--- /dev/null
+++ b/src/components/BadgePreviews/TextPreview.tsx
@@ -0,0 +1,3 @@
+export function TextPreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/82'>TODO #82</a>
+}
diff --git a/src/components/BadgePreviews/TimePreview.tsx b/src/components/BadgePreviews/TimePreview.tsx
new file mode 100644
index 0000000..6eaaf00
--- /dev/null
+++ b/src/components/BadgePreviews/TimePreview.tsx
@@ -0,0 +1,3 @@
+export function TimePreview() {
+  return <a href='https://github.com/diffplug/gitcasso/issues/83'>TODO #83</a>
+}
diff --git a/src/components/design.tsx b/src/components/design.tsx
index e99ef68..79b30b5 100644
--- a/src/components/design.tsx
+++ b/src/components/design.tsx
@@ -11,7 +11,13 @@ import {
   TextSelect,
   Trash2,
 } from 'lucide-react'
+import type { JSX } from 'react'
 import { tv } from 'tailwind-variants'
+import { CodePreview } from './BadgePreviews/CodePreview'
+import { ImagePreview } from './BadgePreviews/ImagePreview'
+import { LinkPreview } from './BadgePreviews/LinkPreview'
+import { TextPreview } from './BadgePreviews/TextPreview'
+import { TimePreview } from './BadgePreviews/TimePreview'
 
 // TV configuration for stat badges
 export const badgeCVA = tv({
@@ -60,3 +66,11 @@ export const typeIcons = {
   trashed: Trash2,
   unsent: MessageSquareDashed,
 } as const
+
+export const typeTooltips: { [key: string]: () => JSX.Element | undefined } = {
+  code: CodePreview,
+  image: ImagePreview,
+  link: LinkPreview,
+  text: TextPreview,
+  time: TimePreview,
+}

From 69343f88006a2aef1628edc341ae75b4a4c3c35a Mon Sep 17 00:00:00 2001
From: Todd Riley <todd@websbytodd.com>
Date: Wed, 24 Sep 2025 16:07:28 -0400
Subject: [PATCH 2/6] This is "sorted" apparently.

---
 src/components/Badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 960e0fc..75e0890 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -33,7 +33,7 @@ const Badge = ({ text, type }: BadgeProps) => {
       {TooltipComponent && (
         <div
           className={
-            'absolute top-full w-max rounded bg-gray-800 px-2 py-1 text-white text-xs shadow-lg z-10'
+            'absolute top-full z-10 w-max rounded bg-gray-800 px-2 py-1 text-white text-xs shadow-lg'
           }
         >
           <TooltipComponent />

From 15a4050399a7c669e283dcd01595ec25adf84595 Mon Sep 17 00:00:00 2001
From: Ned Twigg <ned.twigg@diffplug.com>
Date: Wed, 24 Sep 2025 14:33:40 -0700
Subject: [PATCH 3/6] extract typeColors out of `badgeCVA` so it can be used
 other places too

---
 src/components/design.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/design.tsx b/src/components/design.tsx
index 79b30b5..f2e6093 100644
--- a/src/components/design.tsx
+++ b/src/components/design.tsx
@@ -19,6 +19,22 @@ import { LinkPreview } from './BadgePreviews/LinkPreview'
 import { TextPreview } from './BadgePreviews/TextPreview'
 import { TimePreview } from './BadgePreviews/TimePreview'
 
+// Type colors definition - single source of truth
+export const typeColors = {
+  blank: 'bg-transparent text-gray-700',
+  code: 'bg-pink-50 text-pink-700',
+  hideTrashed: 'bg-transparent text-gray-700',
+  image: 'bg-purple-50 text-purple-700',
+  link: 'bg-blue-50 text-blue-700',
+  open: 'bg-cyan-50 text-cyan-700',
+  sent: 'bg-green-50 text-green-700',
+  settings: 'bg-gray-50 text-gray-700',
+  text: 'bg-gray-50 text-gray-700',
+  time: 'bg-gray-50 text-gray-700',
+  trashed: 'bg-gray-50 text-yellow-700',
+  unsent: 'bg-amber-100 text-amber-700',
+} as const
+
 // TV configuration for stat badges
 export const badgeCVA = tv({
   base: 'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal h-5',
@@ -34,20 +50,7 @@ export const badgeCVA = tv({
       false: '',
       true: '!border-solid !border-current',
     },
-    type: {
-      blank: 'bg-transparent text-gray-700',
-      code: 'bg-pink-50 text-pink-700',
-      hideTrashed: 'bg-transparent text-gray-700',
-      image: 'bg-purple-50 text-purple-700',
-      link: 'bg-blue-50 text-blue-700',
-      open: 'bg-cyan-50 text-cyan-700',
-      sent: 'bg-green-50 text-green-700',
-      settings: 'bg-gray-50 text-gray-700',
-      text: 'bg-gray-50 text-gray-700',
-      time: 'bg-gray-50 text-gray-700',
-      trashed: 'bg-gray-50 text-yellow-700',
-      unsent: 'bg-amber-100 text-amber-700',
-    },
+    type: typeColors,
   },
 })
 

From 266590be8f906836f6e5ed08d1c650cfe6e52b62 Mon Sep 17 00:00:00 2001
From: Ned Twigg <ned.twigg@diffplug.com>
Date: Wed, 24 Sep 2025 14:45:08 -0700
Subject: [PATCH 4/6] use more typechecking

---
 src/components/Badge.tsx  | 14 ++++++++------
 src/components/design.tsx | 40 +++++++++++++++++++--------------------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 75e0890..ca81f15 100644
--- a/src/components/Badge.tsx
+++ b/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>
diff --git a/src/components/design.tsx b/src/components/design.tsx
index f2e6093..50ab827 100644
--- a/src/components/design.tsx
+++ b/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>>

From 215852b5acd8716dd7879afb45f45ae3da026274 Mon Sep 17 00:00:00 2001
From: Ned Twigg <ned.twigg@diffplug.com>
Date: Wed, 24 Sep 2025 14:47:18 -0700
Subject: [PATCH 5/6] pull preview index out of `design.tsx` and into
 `Badge.tsx`

---
 src/components/Badge.tsx  | 18 ++++++++++++++++--
 src/components/design.tsx | 14 --------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index ca81f15..091fadd 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,7 +1,21 @@
-import { useState } from 'react'
+import { type JSX, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import type { VariantProps } from 'tailwind-variants'
-import { badgeCVA, typeColors, typeIcons, typeTooltips } from '@/components/design'
+import { badgeCVA, typeColors, typeIcons } from '@/components/design'
+
+import { CodePreview } from './BadgePreviews/CodePreview'
+import { ImagePreview } from './BadgePreviews/ImagePreview'
+import { LinkPreview } from './BadgePreviews/LinkPreview'
+import { TextPreview } from './BadgePreviews/TextPreview'
+import { TimePreview } from './BadgePreviews/TimePreview'
+
+const typeTooltips = {
+  code: CodePreview,
+  image: ImagePreview,
+  link: LinkPreview,
+  text: TextPreview,
+  time: TimePreview,
+} satisfies Partial<Record<keyof typeof typeIcons, () => JSX.Element>>
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {
   type: keyof typeof typeIcons
diff --git a/src/components/design.tsx b/src/components/design.tsx
index 50ab827..082a570 100644
--- a/src/components/design.tsx
+++ b/src/components/design.tsx
@@ -11,13 +11,7 @@ import {
   TextSelect,
   Trash2,
 } from 'lucide-react'
-import type { JSX } from 'react'
 import { tv } from 'tailwind-variants'
-import { CodePreview } from './BadgePreviews/CodePreview'
-import { ImagePreview } from './BadgePreviews/ImagePreview'
-import { LinkPreview } from './BadgePreviews/LinkPreview'
-import { TextPreview } from './BadgePreviews/TextPreview'
-import { TimePreview } from './BadgePreviews/TimePreview'
 
 // Map types to their icons - source of truth for badge types
 export const typeIcons = {
@@ -69,11 +63,3 @@ export const badgeCVA = tv({
     type: typeColors,
   },
 })
-
-export const typeTooltips = {
-  code: CodePreview,
-  image: ImagePreview,
-  link: LinkPreview,
-  text: TextPreview,
-  time: TimePreview,
-} satisfies Partial<Record<keyof typeof typeIcons, () => JSX.Element | undefined>>

From 7ac99f44ccac1825e5ddd894de6bf5ee285d29de Mon Sep 17 00:00:00 2001
From: Ned Twigg <ned.twigg@diffplug.com>
Date: Wed, 24 Sep 2025 14:56:49 -0700
Subject: [PATCH 6/6] update TODO popups a bit

---
 src/components/Badge.tsx                      |  2 +-
 src/components/BadgePreviews/CodePreview.tsx  | 10 +++++++++-
 src/components/BadgePreviews/ImagePreview.tsx | 10 +++++++++-
 src/components/BadgePreviews/LinkPreview.tsx  | 10 +++++++++-
 src/components/BadgePreviews/TextPreview.tsx  | 10 +++++++++-
 src/components/BadgePreviews/TimePreview.tsx  | 10 +++++++++-
 6 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 091fadd..6ffb90a 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -48,7 +48,7 @@ const Badge = ({ text, type }: BadgeProps) => {
       {TooltipComponent && (
         <div
           className={twMerge(
-            'absolute top-full z-10 w-50 rounded border px-2 py-1 text-xs shadow-lg',
+            'absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg',
             typeColors[type],
           )}
         >
diff --git a/src/components/BadgePreviews/CodePreview.tsx b/src/components/BadgePreviews/CodePreview.tsx
index 60d4e17..5a929a4 100644
--- a/src/components/BadgePreviews/CodePreview.tsx
+++ b/src/components/BadgePreviews/CodePreview.tsx
@@ -1,3 +1,11 @@
 export function CodePreview() {
-  return <a href='https://github.com/diffplug/gitcasso/issues/81'>TODO #81</a>
+  return (
+    <>
+      TODO{' '}
+      <a href='https://github.com/diffplug/gitcasso/issues/81' className='underline'>
+        #81
+      </a>
+      : show every codeblock in the draft
+    </>
+  )
 }
diff --git a/src/components/BadgePreviews/ImagePreview.tsx b/src/components/BadgePreviews/ImagePreview.tsx
index 214c1ff..b4d7ccd 100644
--- a/src/components/BadgePreviews/ImagePreview.tsx
+++ b/src/components/BadgePreviews/ImagePreview.tsx
@@ -1,3 +1,11 @@
 export function ImagePreview() {
-  return <a href='https://github.com/diffplug/gitcasso/issues/80'>TODO #80</a>
+  return (
+    <>
+      TODO{' '}
+      <a href='https://github.com/diffplug/gitcasso/issues/80' className='underline'>
+        #80
+      </a>
+      : show every image in the draft
+    </>
+  )
 }
diff --git a/src/components/BadgePreviews/LinkPreview.tsx b/src/components/BadgePreviews/LinkPreview.tsx
index 8770ae6..768e97b 100644
--- a/src/components/BadgePreviews/LinkPreview.tsx
+++ b/src/components/BadgePreviews/LinkPreview.tsx
@@ -1,3 +1,11 @@
 export function LinkPreview() {
-  return <a href='https://github.com/diffplug/gitcasso/issues/79'>TODO #79</a>
+  return (
+    <>
+      TODO{' '}
+      <a href='https://github.com/diffplug/gitcasso/issues/79' className='underline'>
+        #79
+      </a>
+      : show text, url, and preview info for every link in the draft
+    </>
+  )
 }
diff --git a/src/components/BadgePreviews/TextPreview.tsx b/src/components/BadgePreviews/TextPreview.tsx
index fb8a73c..266c4ef 100644
--- a/src/components/BadgePreviews/TextPreview.tsx
+++ b/src/components/BadgePreviews/TextPreview.tsx
@@ -1,3 +1,11 @@
 export function TextPreview() {
-  return <a href='https://github.com/diffplug/gitcasso/issues/82'>TODO #82</a>
+  return (
+    <>
+      TODO{' '}
+      <a href='https://github.com/diffplug/gitcasso/issues/82' className='underline'>
+        #82
+      </a>
+      : show the syntax-highlighted markdown of the latest draft
+    </>
+  )
 }
diff --git a/src/components/BadgePreviews/TimePreview.tsx b/src/components/BadgePreviews/TimePreview.tsx
index 6eaaf00..1d13c70 100644
--- a/src/components/BadgePreviews/TimePreview.tsx
+++ b/src/components/BadgePreviews/TimePreview.tsx
@@ -1,3 +1,11 @@
 export function TimePreview() {
-  return <a href='https://github.com/diffplug/gitcasso/issues/83'>TODO #83</a>
+  return (
+    <>
+      TODO{' '}
+      <a href='https://github.com/diffplug/gitcasso/issues/83' className='underline'>
+        #83
+      </a>
+      : show the revision history of the comment
+    </>
+  )
 }