108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { cn } from '../../lib/utils'
|
|
|
|
interface MobileCommentProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
filePath: string
|
|
lineNumber: number
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function MobileComment({ open, onClose, filePath, lineNumber, children }: MobileCommentProps) {
|
|
const sheetRef = useRef<HTMLDivElement>(null)
|
|
|
|
// Close on backdrop click
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const handler = (e: MouseEvent) => {
|
|
if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
|
|
onClose()
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handler)
|
|
return () => document.removeEventListener('mousedown', handler)
|
|
}, [open, onClose])
|
|
|
|
// Prevent body scroll while open
|
|
useEffect(() => {
|
|
if (open) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
}
|
|
return () => { document.body.style.overflow = '' }
|
|
}, [open])
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className={cn(
|
|
'fixed inset-0 bg-black/40 z-40 transition-opacity duration-200',
|
|
open ? 'opacity-100' : 'opacity-0 pointer-events-none',
|
|
)}
|
|
/>
|
|
|
|
{/* Bottom sheet */}
|
|
<div
|
|
ref={sheetRef}
|
|
className={cn(
|
|
'fixed bottom-0 left-0 right-0 z-50 bg-white rounded-t-2xl shadow-xl',
|
|
'transition-transform duration-300 ease-out',
|
|
'pb-[env(safe-area-inset-bottom)]',
|
|
open ? 'translate-y-0' : 'translate-y-full',
|
|
)}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Line comment"
|
|
>
|
|
{/* Handle */}
|
|
<div className="flex justify-center pt-3 pb-1">
|
|
<div className="w-10 h-1 rounded-full bg-[#DFE1E6]" />
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-[#DFE1E6]">
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-semibold text-[#172B4D] truncate">{filePath}</p>
|
|
<p className="text-xs text-[#5E6C84]">Line {lineNumber}</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="flex items-center justify-center w-8 h-8 rounded hover:bg-[#F4F5F7] text-[#5E6C84]"
|
|
aria-label="Close"
|
|
>
|
|
<svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-4 max-h-[60vh] overflow-y-auto">
|
|
{children ?? (
|
|
<textarea
|
|
autoFocus
|
|
rows={4}
|
|
placeholder="Leave a comment on this line…"
|
|
className="w-full border border-[#DFE1E6] rounded p-3 text-sm resize-none focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
|
|
/>
|
|
)}
|
|
<div className="flex justify-end gap-2 mt-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm rounded border border-[#DFE1E6] text-[#172B4D] hover:bg-[#F4F5F7] min-h-[44px]"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button className="px-4 py-2 text-sm rounded bg-[#0052CC] text-white hover:bg-[#0065FF] min-h-[44px]">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|