phase 3 initial completion

2026-05-07 00:22:45 +02:00
parent 5d8662595c
commit ce2aa2c776
19 changed files with 1216 additions and 37 deletions
@@ -0,0 +1,107 @@
+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>
+    </>
+  )
+}