hale-commenting-system 3.5.2 → 3.7.0

package/src/app/commenting-system/components/CommentPanel.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { findElementBySelector } from '../utils/selectorUtils';
 import { useLocation } from 'react-router-dom';
 import {
   ActionList,
@@ -121,7 +122,11 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
     }
   };
 
-  const handleRemovePin = () => {
+  const handleRemovePin = (e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     if (!selectedThread) return;
     removePin(selectedThread.id);
   };
@@ -211,13 +216,67 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
                 </EmptyState>
               ) : (
                 <>
-                  {/* Thread summary header (scaffold) */}
+                  {/* Thread summary header with component information */}
                   <Card style={{ marginBottom: '1rem' }}>
                     <CardBody>
-                      <div style={{ display: 'grid', gap: '0.5rem' }}>
-                        <div style={{ fontSize: '0.875rem' }}>
-                          <strong>Location:</strong> ({selectedThread.xPercent.toFixed(1)}%, {selectedThread.yPercent.toFixed(1)}%)
-                        </div>
+                      <div style={{ display: 'grid', gap: '0.75rem' }}>
+                        {/* Component Information (Component-Based) */}
+                        {selectedThread.componentMetadata ? (
+                          <div style={{ display: 'grid', gap: '0.5rem', padding: '0.75rem', backgroundColor: 'var(--pf-t--global--background--color--secondary--default)', borderRadius: 'var(--pf-t--global--border--radius--small)' }}>
+                            <div style={{ fontSize: '0.875rem', fontWeight: 'bold' }}>
+                              React Component
+                            </div>
+                            <div style={{ fontSize: '0.875rem' }}>
+                              <strong>Name:</strong> {selectedThread.componentMetadata.componentName || selectedThread.componentMetadata.displayName || 'Unknown'}
+                              {selectedThread.componentMetadata.componentType && selectedThread.componentMetadata.componentType !== 'native' && (
+                                <span style={{ color: 'var(--pf-t--global--text--color--subtle)', marginLeft: '0.5rem' }}>
+                                  ({selectedThread.componentMetadata.componentType})
+                                </span>
+                              )}
+                            </div>
+                            {selectedThread.componentMetadata.componentPath && selectedThread.componentMetadata.componentPath.length > 0 && (
+                              <div style={{ fontSize: '0.875rem' }}>
+                                <strong>Path:</strong>{' '}
+                                <span style={{ fontFamily: 'monospace', color: 'var(--pf-t--global--text--color--subtle)' }}>
+                                  {selectedThread.componentMetadata.componentPath.join(' > ')}
+                                </span>
+                              </div>
+                            )}
+                            {selectedThread.componentMetadata.props && Object.keys(selectedThread.componentMetadata.props).length > 0 && (
+                              <details style={{ fontSize: '0.875rem' }}>
+                                <summary style={{ cursor: 'pointer', marginBottom: '0.25rem' }}>
+                                  <strong>Props</strong> ({Object.keys(selectedThread.componentMetadata.props).length})
+                                </summary>
+                                <pre
+                                  style={{
+                                    marginTop: '0.5rem',
+                                    padding: '0.5rem',
+                                    backgroundColor: 'var(--pf-t--global--background--color--default)',
+                                    borderRadius: 'var(--pf-t--global--border--radius--small)',
+                                    fontSize: '0.75rem',
+                                    overflow: 'auto',
+                                    maxHeight: '200px',
+                                  }}
+                                >
+                                  {JSON.stringify(selectedThread.componentMetadata.props, null, 2)}
+                                </pre>
+                              </details>
+                            )}
+                            {selectedThread.cssSelector && !findElementBySelector(selectedThread.cssSelector) && (
+                              <div style={{ fontSize: '0.875rem', color: 'var(--pf-t--global--color--status--danger--default)' }}>
+                                ⚠️ Component element not found in DOM
+                              </div>
+                            )}
+                          </div>
+                        ) : (
+                          <div style={{ fontSize: '0.875rem' }}>
+                            <strong>Element:</strong> {selectedThread.elementDescription || 'unknown'}
+                            {selectedThread.cssSelector && !findElementBySelector(selectedThread.cssSelector) && (
+                              <span style={{ color: 'var(--pf-t--global--color--status--danger--default)' }}> [deleted]</span>
+                            )}
+                          </div>
+                        )}
+
                         <div style={{ fontSize: '0.875rem' }}>
                           <strong>Comments:</strong> {selectedThread.comments.length}
                         </div>
@@ -245,10 +304,6 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
                             </span>
                           )}
                         </div>
-
-                        <div>
-                          {/* AI summarize removed for now */}
-                        </div>
                       </div>
                     </CardBody>
                   </Card>
@@ -431,7 +486,7 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
                            <Button variant="primary" onClick={handleReopenThread}>
                              Reopen Thread
                            </Button>
-                           <Button variant="link" isDanger onClick={handleRemovePin}>
+                           <Button variant="link" isDanger onClick={handleRemovePin} aria-label="Remove pin">
                              Remove pin
                            </Button>
                          </div>
@@ -455,7 +510,7 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
                           <Button variant="secondary" onClick={handleCloseThread}>
                             Close Thread
                           </Button>
-                           <Button variant="link" isDanger onClick={handleRemovePin}>
+                           <Button variant="link" isDanger onClick={handleRemovePin} aria-label="Remove pin">
                              Remove pin
                            </Button>
                         </div>

package/src/app/commenting-system/components/CommentPin.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { CommentIcon } from '@patternfly/react-icons';
+import { findElementBySelector } from '../utils/selectorUtils';
 
 interface CommentPinProps {
+  cssSelector?: string;
   xPercent: number;
   yPercent: number;
   commentCount: number;
@@ -12,6 +14,7 @@ interface CommentPinProps {
 }
 
 export const CommentPin: React.FunctionComponent<CommentPinProps> = ({
+  cssSelector,
   xPercent,
   yPercent,
   commentCount,
@@ -19,15 +22,90 @@ export const CommentPin: React.FunctionComponent<CommentPinProps> = ({
   isSelected,
   onClick,
 }) => {
+  const [position, setPosition] = React.useState({ left: `${xPercent}%`, top: `${yPercent}%` });
+  const [elementExists, setElementExists] = React.useState(true);
+
+  const updatePosition = React.useCallback(() => {
+    if (!cssSelector) {
+      // No selector - use fallback coordinates
+      setPosition({ left: `${xPercent}%`, top: `${yPercent}%` });
+      setElementExists(true);
+      return;
+    }
+
+    const element = findElementBySelector(cssSelector);
+    if (element) {
+      // Element found - position pin at top-left of element
+      const rect = element.getBoundingClientRect();
+      
+      // Find the overlay container - it should be a parent with data-comment-overlay
+      // or find the CommentPanel's relative container
+      let overlayContainer: Element | null = null;
+      let current: Element | null = element;
+      
+      // Walk up the DOM to find the overlay or its parent container
+      while (current && current !== document.body) {
+        if (current.hasAttribute('data-comment-overlay')) {
+          overlayContainer = current;
+          break;
+        }
+        // Also check if parent has position relative (likely the CommentPanel wrapper)
+        const parent = current.parentElement;
+        if (parent) {
+          const style = window.getComputedStyle(parent);
+          if (style.position === 'relative') {
+            overlayContainer = parent;
+            break;
+          }
+        }
+        current = parent;
+      }
+      
+      // If no overlay found, use the element's offsetParent or body
+      if (!overlayContainer) {
+        overlayContainer = (element as HTMLElement).offsetParent as Element || document.body;
+      }
+      
+      const overlayRect = overlayContainer.getBoundingClientRect();
+      
+      // Position at top-left of element, offset by 4px (just outside the element border)
+      // Use absolute pixel positioning relative to the overlay container
+      const leftPx = rect.left - overlayRect.left + 4;
+      const topPx = rect.top - overlayRect.top + 4;
+
+      setPosition({ left: `${leftPx}px`, top: `${topPx}px` });
+      setElementExists(true);
+    } else {
+      // Element not found - fall back to stored coordinates and fade
+      setPosition({ left: `${xPercent}%`, top: `${yPercent}%` });
+      setElementExists(false);
+    }
+  }, [cssSelector, xPercent, yPercent]);
+
+  React.useEffect(() => {
+    updatePosition();
+
+    // Update position on scroll and resize
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [updatePosition]);
+
+  const opacity = elementExists ? 1.0 : 0.4;
+
   return (
     <Button
       variant="plain"
       data-comment-pin
       style={{
         position: 'absolute',
-        left: `${xPercent}%`,
-        top: `${yPercent}%`,
-        transform: 'translate(-50%, -50%)',
+        left: position.left,
+        top: position.top,
+        transform: 'translate(0, 0)',
         width: '32px',
         height: '32px',
         borderRadius: '50%',
@@ -44,9 +122,13 @@ export const CommentPin: React.FunctionComponent<CommentPinProps> = ({
         justifyContent: 'center',
         transition: 'all 0.2s ease',
         pointerEvents: 'auto',
+        opacity,
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
       }}
-      onClick={onClick}
-      aria-label={`${isClosed ? 'Closed ' : ''}comment thread with ${commentCount} comment${commentCount !== 1 ? 's' : ''}`}
+      aria-label={`${isClosed ? 'Closed ' : ''}comment thread with ${commentCount} comment${commentCount !== 1 ? 's' : ''}${!elementExists ? ' (element deleted)' : ''}`}
     >
       {commentCount === 0 ? (
         <CommentIcon style={{ fontSize: '16px' }} />

package/src/app/commenting-system/components/FloatingWidget.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { Button, Switch, Title } from '@patternfly/react-core';
-import { GripVerticalIcon, WindowMinimizeIcon, GithubIcon } from '@patternfly/react-icons';
+import { GripVerticalIcon, WindowMinimizeIcon, GithubIcon, ArrowsAltVIcon } from '@patternfly/react-icons';
 import { useComments } from '../contexts/CommentContext';
 import { useGitHubAuth } from '../contexts/GitHubAuthContext';
 
@@ -16,9 +16,13 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
   const [isMinimized, setIsMinimized] = React.useState(false);
   const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight);
+  const [widgetSize, setWidgetSize] = React.useState({ width: 500, height: window.innerHeight * 0.8 });
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [resizeStart, setResizeStart] = React.useState({ x: 0, y: 0, width: 0, height: 0 });
   const widgetRef = React.useRef<HTMLDivElement>(null);
+  const resizeHandleRef = React.useRef<HTMLDivElement>(null);
 
-  const { commentsEnabled, setCommentsEnabled } = useComments();
+  const { commentsEnabled, setCommentsEnabled, showPinsEnabled, setShowPinsEnabled } = useComments();
   const { isAuthenticated, user, login, logout } = useGitHubAuth();
 
   const handleMouseDown = (e: React.MouseEvent) => {
@@ -64,11 +68,52 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  // Handle resize
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!widgetRef.current) return;
+    const rect = widgetRef.current.getBoundingClientRect();
+    setIsResizing(true);
+    setResizeStart({
+      x: e.clientX,
+      y: e.clientY,
+      width: rect.width,
+      height: rect.height,
+    });
+  };
+
+  React.useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaX = e.clientX - resizeStart.x;
+      const deltaY = e.clientY - resizeStart.y;
+      
+      setWidgetSize({
+        width: Math.max(300, Math.min(800, resizeStart.width + deltaX)),
+        height: Math.max(200, Math.min(viewportHeight - 100, resizeStart.height + deltaY)),
+      });
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, resizeStart, viewportHeight]);
+
   // Constrain to viewport but allow moving into topbar area (just keep drag handle accessible)
   const constrainedPosition = React.useMemo(() => {
-    const widgetWidth = 500;
-    // Calculate actual widget height: 80vh when expanded, or estimate ~120px when minimized
-    const widgetHeight = isMinimized ? 120 : viewportHeight * 0.8;
+    const widgetWidth = widgetSize.width;
+    // Calculate actual widget height
+    const widgetHeight = isMinimized ? 120 : widgetSize.height;
     const maxX = window.innerWidth - 50; // Allow 50px of widget to be visible for dragging
     const maxY = viewportHeight - 50;
     // Allow widget to move into topbar, but keep at least 60px of drag handle visible
@@ -77,7 +122,7 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
       x: Math.max(-widgetWidth + 50, Math.min(position.x, maxX)),
       y: Math.max(minY, Math.min(position.y, maxY)),
     };
-  }, [position, isMinimized, viewportHeight]);
+  }, [position, isMinimized, viewportHeight, widgetSize]);
 
   const widgetContent = (
     <div
@@ -87,9 +132,9 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
         position: 'fixed',
         left: `${constrainedPosition.x}px`,
         top: `${constrainedPosition.y}px`,
-        width: '500px',
-        height: isMinimized ? 'fit-content' : '80vh',
-        maxHeight: '80vh',
+        width: `${widgetSize.width}px`,
+        height: isMinimized ? 'fit-content' : `${widgetSize.height}px`,
+        maxHeight: `${viewportHeight - 100}px`,
         zIndex: 99999,
         boxShadow: '0 4px 16px rgba(0, 0, 0, 0.2)',
         borderRadius: 'var(--pf-t--global--border--radius--medium)',
@@ -155,6 +200,13 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
               onChange={(_event, checked) => setCommentsEnabled(checked)}
               aria-label="Enable or disable comments"
             />
+            <Switch
+              id="floating-show-pins-switch"
+              label="Show pins"
+              isChecked={showPinsEnabled}
+              onChange={(_event, checked) => setShowPinsEnabled(checked)}
+              aria-label="Show or hide comment pins"
+            />
             <div style={{ flex: 1 }} />
             {isAuthenticated ? (
               <>
@@ -188,6 +240,24 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
           {children}
         </div>
       )}
+      {/* Resize handle */}
+      {!isMinimized && (
+        <div
+          ref={resizeHandleRef}
+          onMouseDown={handleResizeStart}
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            width: '20px',
+            height: '20px',
+            cursor: 'nwse-resize',
+            background: 'linear-gradient(135deg, transparent 0%, transparent 40%, var(--pf-t--global--border--color--default) 40%, var(--pf-t--global--border--color--default) 45%, transparent 45%, transparent 55%, var(--pf-t--global--border--color--default) 55%, var(--pf-t--global--border--color--default) 60%, transparent 60%)',
+            borderRadius: '0 0 var(--pf-t--global--border--radius--medium) 0',
+          }}
+          aria-label="Resize widget"
+        />
+      )}
     </div>
   );