hale-commenting-system 2.2.97 → 3.1.0

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

@@ -6,14 +6,6 @@ import {
   Button,
   Card,
   CardBody,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
   EmptyState,
   EmptyStateBody,
   Label,
@@ -40,10 +32,6 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
     getThreadsForRoute,
     selectedThreadId,
     setSelectedThreadId,
-    drawerPinnedOpen,
-    setDrawerPinnedOpen,
-    floatingWidgetMode,
-    setFloatingWidgetMode,
     addReply,
     updateComment,
     deleteComment,
@@ -59,28 +47,18 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
   const [replyTextByCommentId, setReplyTextByCommentId] = React.useState<Record<string, string>>({});
   const [editingCommentId, setEditingCommentId] = React.useState<string | null>(null);
   const [editText, setEditText] = React.useState('');
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>('comments');
 
   const currentThreads = getThreadsForRoute(location.pathname, detectedVersion);
   const selectedThread = currentThreads.find((t) => t.id === selectedThreadId);
-  const isExpanded = !!selectedThreadId || drawerPinnedOpen || floatingWidgetMode;
-
-  const onExpand = () => {
-    drawerRef.current && drawerRef.current.focus();
-  };
 
   React.useEffect(() => {
     if (selectedThreadId) {
       setActiveTabKey('comments');
-    }
-  }, [selectedThreadId]);
-
-  React.useEffect(() => {
-    if (drawerPinnedOpen && !selectedThreadId) {
+    } else {
       setActiveTabKey('details');
     }
-  }, [drawerPinnedOpen, selectedThreadId]);
+  }, [selectedThreadId]);
 
   const handleAddComment = () => {
     if (newCommentText.trim() && selectedThread) {
@@ -150,11 +128,6 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
 
   const handleClose = () => {
     setSelectedThreadId(null);
-    if (floatingWidgetMode) {
-      setFloatingWidgetMode(false);
-    } else {
-      setDrawerPinnedOpen(false);
-    }
     setEditingCommentId(null);
     setEditText('');
     setNewCommentText('');
@@ -221,17 +194,17 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
           aria-label="Hale Commenting System drawer tabs"
         >
           <Tab eventKey="details" title={<TabTitleText>Details</TabTitleText>}>
-            <div style={{ paddingTop: '1rem' }}>
+            <div style={{ padding: '1rem' }}>
               <DetailsTab />
             </div>
           </Tab>
           <Tab eventKey="jira" title={<TabTitleText>Jira</TabTitleText>}>
-            <div style={{ paddingTop: '1rem' }}>
+            <div style={{ padding: '1rem' }}>
               <JiraTab />
             </div>
           </Tab>
           <Tab eventKey="comments" title={<TabTitleText>Comments</TabTitleText>}>
-            <div style={{ paddingTop: '1rem' }}>
+            <div style={{ padding: '1rem' }}>
               {!selectedThread ? (
                 <EmptyState icon={InfoCircleIcon} titleText="No pin selected" headingLevel="h3">
                   <EmptyStateBody>Select or create a comment pin to start a thread.</EmptyStateBody>
@@ -497,38 +470,12 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
     </>
   );
 
-  if (floatingWidgetMode && isExpanded) {
-    return (
-      <>
-        <FloatingWidget onClose={handleClose} title="Hale Commenting System">
-          <div style={{ padding: '1rem' }}>{panelContent}</div>
-        </FloatingWidget>
-        <div style={{ position: 'relative' }}>{children}</div>
-      </>
-    );
-  }
-
-  const drawerPanelContent = isExpanded ? (
-    <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'300px'}>
-      <DrawerHead>
-        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          <Title headingLevel="h2" size="lg">
-            Hale Commenting System
-          </Title>
-        </span>
-        <DrawerActions>
-          <DrawerCloseButton onClick={handleClose} />
-        </DrawerActions>
-      </DrawerHead>
-      <DrawerPanelBody>{panelContent}</DrawerPanelBody>
-    </DrawerPanelContent>
-  ) : null;
-
   return (
-    <Drawer isExpanded={isExpanded} isInline onExpand={onExpand}>
-      <DrawerContent panelContent={drawerPanelContent}>
-        <DrawerContentBody style={{ position: 'relative' }}>{children}</DrawerContentBody>
-      </DrawerContent>
-    </Drawer>
+    <>
+      <FloatingWidget title="Hale Commenting System">
+        {panelContent}
+      </FloatingWidget>
+      <div style={{ position: 'relative' }}>{children}</div>
+    </>
   );
 };

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

@@ -1,20 +1,26 @@
 import * as React from 'react';
-import { Button, Card, CardBody, Title } from '@patternfly/react-core';
-import { GripVerticalIcon, TimesIcon, WindowMinimizeIcon } from '@patternfly/react-icons';
+import { createPortal } from 'react-dom';
+import { Button, Switch, Title } from '@patternfly/react-core';
+import { GripVerticalIcon, WindowMinimizeIcon, GithubIcon } from '@patternfly/react-icons';
+import { useComments } from '../contexts/CommentContext';
+import { useGitHubAuth } from '../contexts/GitHubAuthContext';
 
 interface FloatingWidgetProps {
   children: React.ReactNode;
-  onClose: () => void;
   title?: string;
 }
 
-export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ children, onClose, title = 'Hale Commenting System' }) => {
-  const [position, setPosition] = React.useState({ x: window.innerWidth - 520, y: 100 });
+export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ children, title = 'Hale Commenting System' }) => {
+  const [position, setPosition] = React.useState({ x: window.innerWidth - 520, y: 20 });
   const [isDragging, setIsDragging] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
   const [isMinimized, setIsMinimized] = React.useState(false);
+  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight);
   const widgetRef = React.useRef<HTMLDivElement>(null);
 
+  const { commentsEnabled, setCommentsEnabled } = useComments();
+  const { isAuthenticated, user, login, logout } = useGitHubAuth();
+
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!widgetRef.current) return;
     const rect = widgetRef.current.getBoundingClientRect();
@@ -48,29 +54,43 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
     };
   }, [isDragging, dragOffset]);
 
-  // Constrain to viewport but allow dragging header even when partially off-screen
+  // Update viewport height on resize to recalculate constraints
+  React.useEffect(() => {
+    const handleResize = () => {
+      setViewportHeight(window.innerHeight);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Constrain to viewport but allow moving into topbar area (just keep drag handle accessible)
   const constrainedPosition = React.useMemo(() => {
     const widgetWidth = 500;
-    const widgetHeight = isMinimized ? 60 : 400;
+    // Calculate actual widget height: 80vh when expanded, or estimate ~120px when minimized
+    const widgetHeight = isMinimized ? 120 : viewportHeight * 0.8;
     const maxX = window.innerWidth - 50; // Allow 50px of widget to be visible for dragging
-    const maxY = window.innerHeight - 50;
+    const maxY = viewportHeight - 50;
+    // Allow widget to move into topbar, but keep at least 60px of drag handle visible
+    const minY = -widgetHeight + 60;
     return {
       x: Math.max(-widgetWidth + 50, Math.min(position.x, maxX)),
-      y: Math.max(-widgetHeight + 50, Math.min(position.y, maxY)),
+      y: Math.max(minY, Math.min(position.y, maxY)),
     };
-  }, [position, isMinimized]);
+  }, [position, isMinimized, viewportHeight]);
 
-  return (
+  const widgetContent = (
     <div
       ref={widgetRef}
+      data-floating-widget
       style={{
         position: 'fixed',
         left: `${constrainedPosition.x}px`,
         top: `${constrainedPosition.y}px`,
         width: '500px',
-        height: isMinimized ? '60px' : '80vh',
+        height: isMinimized ? 'fit-content' : '80vh',
         maxHeight: '80vh',
-        zIndex: 10000,
+        zIndex: 99999,
         boxShadow: '0 4px 16px rgba(0, 0, 0, 0.2)',
         borderRadius: 'var(--pf-t--global--border--radius--medium)',
         backgroundColor: '#ffffff',
@@ -80,43 +100,87 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
       }}
     >
       <div
-        onMouseDown={handleMouseDown}
         style={{
-          padding: '1rem',
           borderBottom: isMinimized ? 'none' : '1px solid var(--pf-t--global--border--color--default)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          cursor: 'grab',
-          userSelect: 'none',
           backgroundColor: '#ffffff',
           borderRadius: isMinimized ? 'var(--pf-t--global--border--radius--medium)' : 'var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1 }}>
-          <GripVerticalIcon style={{ color: 'var(--pf-t--global--text--color--subtle)' }} />
-          <Title headingLevel="h2" size="lg">
-            {title}
-          </Title>
+        {/* Title bar with drag handle */}
+        <div
+          onMouseDown={handleMouseDown}
+          style={{
+            padding: '1rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'grab',
+            userSelect: 'none',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1 }}>
+            <GripVerticalIcon style={{ color: 'var(--pf-t--global--text--color--subtle)' }} />
+            <Title headingLevel="h2" size="lg">
+              {title}
+            </Title>
+          </div>
+          <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button
+              variant="plain"
+              icon={<WindowMinimizeIcon />}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsMinimized(!isMinimized);
+              }}
+              aria-label={isMinimized ? 'Maximize widget' : 'Minimize widget'}
+            />
+          </div>
         </div>
-        <div style={{ display: 'flex', gap: '0.25rem' }}>
-          <Button
-            variant="plain"
-            icon={<WindowMinimizeIcon />}
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsMinimized(!isMinimized);
+
+        {/* Controls row */}
+        {!isMinimized && (
+          <div
+            style={{
+              padding: '0 1rem 0.75rem 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '1rem',
+              borderBottom: '1px solid var(--pf-t--global--border--color--default)',
             }}
-            aria-label={isMinimized ? 'Maximize widget' : 'Minimize widget'}
-          />
-          <Button variant="plain" icon={<TimesIcon />} onClick={onClose} aria-label="Close widget" />
-        </div>
+          >
+            <Switch
+              id="floating-comments-enabled-switch"
+              label="Enable Comments"
+              isChecked={commentsEnabled}
+              onChange={(_event, checked) => setCommentsEnabled(checked)}
+              aria-label="Enable or disable comments"
+            />
+            <div style={{ flex: 1 }} />
+            {isAuthenticated ? (
+              <>
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', fontSize: 'var(--pf-t--global--font--size--sm)' }}>
+                  <GithubIcon />
+                  {user?.login ? `@${user.login}` : 'Signed in'}
+                </span>
+                <Button variant="link" isInline onClick={logout} style={{ fontSize: 'var(--pf-t--global--font--size--sm)' }}>
+                  Sign out
+                </Button>
+              </>
+            ) : (
+              <Button variant="link" isInline icon={<GithubIcon />} onClick={login} style={{ fontSize: 'var(--pf-t--global--font--size--sm)' }}>
+                Sign in with GitHub
+              </Button>
+            )}
+          </div>
+        )}
       </div>
       {!isMinimized && (
         <div
           style={{
-            overflow: 'auto',
-            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            flex: '1 1 0',
+            minHeight: 0,
             backgroundColor: '#ffffff',
             borderRadius: '0 0 var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium)',
           }}
@@ -126,5 +190,7 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
       )}
     </div>
   );
-};
 
+  // Render widget in a portal to document.body so it floats above ALL page elements
+  return typeof document !== 'undefined' ? createPortal(widgetContent, document.body) : null;
+};

package/src/app/commenting-system/contexts/CommentContext.tsx

@@ -204,7 +204,9 @@ export const CommentProvider: React.FunctionComponent<{ children: React.ReactNod
   React.useEffect(() => {
     if (typeof window === 'undefined') return;
     try {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(threads));
+      // Filter out temporary threads before saving to localStorage
+      const persistedThreads = threads.filter(t => !t.isTemporary);
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(persistedThreads));
     } catch {
       // ignore quota/serialization errors
     }
@@ -255,14 +257,17 @@ export const CommentProvider: React.FunctionComponent<{ children: React.ReactNod
       version,
       comments: [],
       provider: 'github',
-      syncStatus: isConfigured ? 'syncing' : 'local',
+      syncStatus: 'local',
       status: 'open',
+      isTemporary: true, // Mark as temporary until first comment is added
     };
     setThreads((prev) => [...prev, newThread]);
 
-    console.log(`📌 Thread created locally with syncStatus: ${newThread.syncStatus}`);
+    console.log(`📌 Thread created as temporary (will persist when first comment is added)`);
 
-    // Background sync to GitHub (optimistic UI)
+    // Don't sync to GitHub yet - wait for first comment
+    // This prevents creating empty GitHub issues
+    /* Commented out - only sync when comment is added
     if (isConfigured) {
       console.log(`🔵 Creating GitHub issue for thread ${threadId}...`);
 
@@ -319,6 +324,7 @@ export const CommentProvider: React.FunctionComponent<{ children: React.ReactNod
           console.log(`📌 Thread ${threadId} syncStatus updated to: error (exception caught)`);
         });
     }
+    */
 
     return threadId;
   };
@@ -521,6 +527,7 @@ export const CommentProvider: React.FunctionComponent<{ children: React.ReactNod
         return {
           ...thread,
           comments: [...thread.comments, newComment],
+          isTemporary: undefined, // Remove temporary flag - thread now persists
         };
       }),
     );

package/src/app/commenting-system/types/index.ts

@@ -24,4 +24,5 @@ export interface Thread {
   syncStatus?: SyncStatus;
   syncError?: string;
   status?: ThreadStatus; // open or closed (mirrors GitHub issue state)
+  isTemporary?: boolean; // If true, thread is not persisted until first comment is added
 }

package/.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm run type-check:*)"
-    ]
-  }
-}

package/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.snap]
-max_line_length = off
-trim_trailing_whitespace = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.eslintrc.js

@@ -1,75 +0,0 @@
-module.exports = {
-  // tells eslint to use the TypeScript parser
-  "parser": "@typescript-eslint/parser",
-  // tell the TypeScript parser that we want to use JSX syntax
-  "parserOptions": {
-    "tsx": true,
-    "jsx": true,
-    "js": true,
-    "useJSXTextNode": true,
-    "project": "./tsconfig.json",
-    "tsconfigRootDir": "."
-  },
-  // we want to use the recommended rules provided from the typescript plugin
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "globals": {
-    "window": "readonly",
-    "describe": "readonly",
-    "test": "readonly",
-    "expect": "readonly",
-    "it": "readonly",
-    "process": "readonly",
-    "document": "readonly",
-    "insights": "readonly",
-    "shallow": "readonly",
-    "render": "readonly",
-    "mount": "readonly"
-  },
-  "overrides": [
-    {
-      "files": ["src/**/*.ts", "src/**/*.tsx"],
-      "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint"],
-      "extends": ["plugin:@typescript-eslint/recommended"],
-      "rules": {
-        "react/prop-types": "off",
-        "@typescript-eslint/no-unused-vars": "error"
-      },
-    },
-  ],
-  "settings": {
-    "react": {
-      "version": "^16.11.0"
-    }
-  },
-  // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
-  "plugins": [
-    "@typescript-eslint",
-    "react-hooks",
-    "eslint-plugin-react-hooks"
-  ],
-  "rules": {
-    "sort-imports": [
-      "error",
-      {
-        "ignoreDeclarationSort": true
-      }
-    ],
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "@typescript-eslint/interface-name-prefix": "off",
-    "prettier/prettier": "off",
-    "import/no-unresolved": "off",
-    "import/extensions": "off",
-    "react/prop-types": "off"
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  }
-}

package/.prettierignore

@@ -1 +0,0 @@
-package.json

package/.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "printWidth": 120
-}