Release 0.66.0

[tudddorrr]

No description provided.

[claude]

Code Review - PR #443

🔴 Code Quality and Best Practices

Invalid Tailwind CSS class name

In src/components/saves/SaveDataNode.tsx:115, the class wrap-break-word is not a valid Tailwind CSS class. This will not apply any styling.

// Current (incorrect):
className={clsx('text-sm text-white font-mono wrap-break-word', {

// Should be one of:
className={clsx('text-sm text-white font-mono break-words', {  // breaks on word boundaries
// or
className={clsx('text-sm text-white font-mono break-all', {   // breaks anywhere

---

🟡 Potential Bugs or Issues

Missing null check in clipboard operation

In src/components/saves/SaveDataNode.tsx:91-97, the copyValue function attempts to use navigator.clipboard.writeText() without checking if the Clipboard API is available. This could fail in non-HTTPS contexts or older browsers.

const copyValue = useCallback(() => {
  if (valueRow) {
    const value = valueRow.item.split(': ')[1] || ''
    navigator.clipboard.writeText(value)  // Could throw in non-HTTPS
    toast.trigger('Value copied to clipboard')
  }
}, [valueRow, toast])

Consider adding error handling:

const copyValue = useCallback(() => {
  if (valueRow) {
    const value = valueRow.item.split(': ')[1] || ''
    navigator.clipboard.writeText(value)
      .catch(() => toast.trigger('Failed to copy to clipboard', 'error'))
      .then(() => toast.trigger('Value copied to clipboard'))
  }
}, [valueRow, toast])

Inconsistent Tailwind class syntax

In src/components/RecoveryCodes.tsx:57, the class uses the new Tailwind v4 arbitrary variant syntax items-start\!, but this is inconsistent with the rest of the codebase which uses the older \!items-start syntax. While both may work, consistency is important.

// Line 57:
className='items-start\!'

// Should be (to match existing patterns):
className='\!items-start'

---

🔵 Performance Considerations

Unnecessary re-computation on every render

In src/pages/PlayerSaveContent.tsx:51-53, both graph hooks are called unconditionally even though only one is used based on the mode. While the enabled flag prevents computation, the hooks still execute and maintain state.

const treeGraph = useNodeGraph(save, search, mode === 'tree')
const linearGraph = useLinearNodeGraph(save, search, mode === 'linear')
const { nodes, edges } = mode === 'tree' ? treeGraph : linearGraph

This is a minor performance consideration but could be optimized by conditionally calling only the needed hook.

---

Security Concerns

No issues found.