Refactor some helper UI functions into misc.ts.

Author: nedtwigg

browser-extension/src/components/misc.ts

@@ -0,0 +1,31 @@
+export function timeAgo(date: Date | number): string {
+  const timestamp = typeof date === 'number' ? date : date.getTime()
+  const seconds = Math.floor((Date.now() - timestamp) / 1000)
+  const intervals = [
+    { label: 'y', secs: 31536000 },
+    { label: 'mo', secs: 2592000 },
+    { label: 'w', secs: 604800 },
+    { label: 'd', secs: 86400 },
+    { label: 'h', secs: 3600 },
+    { label: 'm', secs: 60 },
+    { label: 's', secs: 1 },
+  ]
+  for (const i of intervals) {
+    const v = Math.floor(seconds / i.secs)
+    if (v >= 1) return `${v}${i.label}`
+  }
+  return 'just now'
+}
+
+/** Returns all leaf values of an arbitrary object as strings. */
+export function* allLeafValues(obj: any, visited = new Set()): Generator<string> {
+  if (visited.has(obj) || obj == null) return
+  if (typeof obj === 'string') yield obj
+  else if (typeof obj === 'number') yield String(obj)
+  else if (typeof obj === 'object') {
+    visited.add(obj)
+    for (const key in obj) {
+      yield* allLeafValues(obj[key], visited)
+    }
+  }
+}

browser-extension/tests/playground/claude.tsx

@@ -4,44 +4,12 @@ import { twMerge } from 'tailwind-merge'
 import Badge from '@/components/Badge'
 import { badgeCVA } from '@/components/design'
 import MultiSegment from '@/components/MultiSegment'
+import { allLeafValues, timeAgo } from '@/components/misc'
 import type { CommentTableRow } from '@/entrypoints/background'
 import type { FilterState } from '@/entrypoints/popup/popup'
 import { EnhancerRegistry } from '@/lib/registries'
 import { generateMockDrafts } from './replicaData'
 
-// Helper function for relative time
-function timeAgo(date: Date | number): string {
-  const timestamp = typeof date === 'number' ? date : date.getTime()
-  const seconds = Math.floor((Date.now() - timestamp) / 1000)
-  const intervals = [
-    { label: 'y', secs: 31536000 },
-    { label: 'mo', secs: 2592000 },
-    { label: 'w', secs: 604800 },
-    { label: 'd', secs: 86400 },
-    { label: 'h', secs: 3600 },
-    { label: 'm', secs: 60 },
-    { label: 's', secs: 1 },
-  ]
-  for (const i of intervals) {
-    const v = Math.floor(seconds / i.secs)
-    if (v >= 1) return `${v}${i.label}`
-  }
-  return 'just now'
-}
-
-/** Returns all leaf values of an arbitrary object as strings. */
-function* allLeafValues(obj: any, visited = new Set()): Generator<string> {
-  if (visited.has(obj) || obj == null) return
-  if (typeof obj === 'string') yield obj
-  else if (typeof obj === 'number') yield String(obj)
-  else if (typeof obj === 'object') {
-    visited.add(obj)
-    for (const key in obj) {
-      yield* allLeafValues(obj[key], visited)
-    }
-  }
-}
-
 export const ClaudePrototype = () => {
   const [drafts] = useState(generateMockDrafts())
   const [selectedIds, setSelectedIds] = useState(new Set())