Jakob Wennberg
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { Reorder, useDragControls, useReducedMotion } from 'framer-motion'
|
|
import { GripVertical } from 'lucide-react'
|
|
import type { ReactNode } from 'react'
|
|
|
|
interface SortableRowProps<T> {
|
|
/** Identity used by Reorder to track this item across reorders. */
|
|
value: T
|
|
/** The row's existing markup: rendered untouched beside the drag handle. */
|
|
children: ReactNode
|
|
/** Localized aria-label for the drag handle. */
|
|
handleLabel: string
|
|
/** Disable dragging (e.g. a single-row list). */
|
|
disabled?: boolean
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* A drag-to-reorder row built on framer-motion's Reorder, with the grip handle
|
|
* on the LEFT edge. The handle owns the drag (dragListener=false +
|
|
* dragControls) so text inputs inside the row stay selectable. The handle is
|
|
* vertically centered against the row so it reads correctly for both compact
|
|
* text rows and tall product rows. Motion collapses to instant when the user
|
|
* prefers reduced motion.
|
|
*
|
|
* Wrap the list in `<Reorder.Group as="div" axis="y" values={...} onReorder={...}>`
|
|
* and render one SortableRow per item; the row's own markup goes in `children`,
|
|
* so callers don't have to restructure existing JSX.
|
|
*/
|
|
export function SortableRow<T>({
|
|
value,
|
|
children,
|
|
handleLabel,
|
|
disabled = false,
|
|
className,
|
|
}: SortableRowProps<T>) {
|
|
const controls = useDragControls()
|
|
const reduceMotion = useReducedMotion()
|
|
|
|
return (
|
|
<Reorder.Item
|
|
value={value}
|
|
as="div"
|
|
dragListener={false}
|
|
dragControls={controls}
|
|
transition={reduceMotion ? { duration: 0 } : undefined}
|
|
className={className}
|
|
>
|
|
<div className="flex items-stretch gap-2">
|
|
<button
|
|
type="button"
|
|
aria-label={handleLabel}
|
|
disabled={disabled}
|
|
onPointerDown={(e) => {
|
|
if (disabled) return
|
|
e.preventDefault()
|
|
controls.start(e)
|
|
}}
|
|
className="flex shrink-0 touch-none cursor-grab items-center px-1 text-muted-foreground transition-colors duration-150 hover:text-foreground active:cursor-grabbing disabled:cursor-default disabled:opacity-30"
|
|
>
|
|
<GripVertical className="h-4 w-4" />
|
|
</button>
|
|
<div className="min-w-0 flex-1">{children}</div>
|
|
</div>
|
|
</Reorder.Item>
|
|
)
|
|
}
|