hale-commenting-system 2.2.97 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hale-commenting-system",
-  "version": "2.2.97",
+  "version": "3.0.0",
   "description": "A commenting system for PatternFly React applications that allows designers and developers to add comments directly on design pages, sync with GitHub Issues, and link Jira tickets.",
   "repository": "https://github.com/patternfly/patternfly-react-seed.git",
   "homepage": "https://www.npmjs.com/package/hale-commenting-system",
@@ -71,19 +71,20 @@
     "webpack-dev-server": "^5.2.1",
     "webpack-merge": "^6.0.1"
   },
+  "peerDependencies": {
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^7.0.0"
+  },
   "dependencies": {
     "@babel/generator": "^7.23.0",
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.23.0",
     "@babel/types": "^7.23.0",
-    "@patternfly/react-core": "^6.4.0",
-    "@patternfly/react-icons": "^6.4.0",
-    "@patternfly/react-styles": "^6.4.0",
     "inquirer": "^8.2.6",
-    "node-fetch": "^2.7.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "sirv-cli": "^3.0.0"
+    "node-fetch": "^2.7.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/scripts/integrate.js

@@ -512,41 +512,6 @@ JIRA_API_TOKEN=
   }
 }
 
-function createCommentsComponent() {
-  const cwd = process.cwd();
-  const commentsDir = path.join(cwd, 'src', 'app', 'Comments');
-  const commentsFile = path.join(commentsDir, 'Comments.tsx');
-
-  // Check if already exists
-  if (fs.existsSync(commentsFile)) {
-    return; // Already exists, skip
-  }
-
-  // Create directory if it doesn't exist
-  if (!fs.existsSync(commentsDir)) {
-    fs.mkdirSync(commentsDir, { recursive: true });
-  }
-
-  // Read the Comments component from the package and modify the import
-  // The file is in the package at src/app/Comments/Comments.tsx
-  const scriptDir = __dirname || path.dirname(require.resolve('./integrate.js'));
-  const packageCommentsFile = path.join(scriptDir, '..', 'src', 'app', 'Comments', 'Comments.tsx');
-  
-  let commentsComponentContent;
-  if (fs.existsSync(packageCommentsFile)) {
-    // Read from package and replace import path
-    commentsComponentContent = fs.readFileSync(packageCommentsFile, 'utf8')
-      .replace(/from ['"]@app\/commenting-system['"]/g, "from 'hale-commenting-system'");
-  } else {
-    // Fallback: create a minimal version (shouldn't happen if package is properly built)
-    console.log('   ⚠️  Comments component not found in package, skipping creation');
-    return;
-  }
-
-  fs.writeFileSync(commentsFile, commentsComponentContent);
-  console.log('   ✅ Created Comments component');
-}
-
 function integrateWebpackMiddleware() {
   const cwd = process.cwd();
   const webpackDevPath = path.join(cwd, 'webpack.dev.js');
@@ -1035,19 +1000,13 @@ function modifyIndexTsx(filePath) {
   }
 }
 
-function modifyRoutesTsx(filePath) {
+function modifyAppLayoutTsx(filePath) {
   const content = fs.readFileSync(filePath, 'utf8');
-  
-  // Check if Comments route already exists with actual routes
-  // Use a more sophisticated check that looks for the route path
-  if (content.includes("label: 'Comments'") || content.includes('label: "Comments"')) {
-    // Check if it has routes with the /comments path
-    if (content.includes("path: '/comments'") || content.includes('path: "/comments"')) {
-      console.log('   ⚠️  Already integrated (Comments route found)');
-      return false;
-    }
-    // If Comments group exists but has no routes, continue to add them
-    console.log('   ℹ️  Comments group exists but has no routes, adding route...');
+
+  // Check if already integrated
+  if (content.includes('CommentPanel') && content.includes('CommentOverlay')) {
+    console.log('   ⚠️  Already integrated (CommentPanel and CommentOverlay found)');
+    return false;
   }
 
   try {
@@ -1056,392 +1015,87 @@ function modifyRoutesTsx(filePath) {
       plugins: ['typescript', 'jsx', 'decorators-legacy', 'classProperties']
     });
 
-    let routesArray = null;
+    let hasCommentingImport = false;
 
+    // Check if commenting system imports exist
     traverse(ast, {
-      VariableDeclarator(path) {
-        if (path.node.id.name === 'routes' && path.node.init.type === 'ArrayExpression') {
-          routesArray = path.node.init;
+      ImportDeclaration(path) {
+        const source = path.node.source.value;
+        if (source.includes('hale-commenting-system')) {
+          hasCommentingImport = true;
         }
       }
     });
 
-    if (routesArray) {
-      // Check if Comments component is imported
-      let hasCommentsImport = false;
-      let commentsImportName = 'Comments';
-      
-      traverse(ast, {
-        ImportDeclaration(path) {
-          const source = path.node.source.value;
-          if (source.includes('Comments') || source.includes('@app/Comments')) {
-            hasCommentsImport = true;
-            // Get the imported name
-            path.node.specifiers.forEach(spec => {
-              if (spec.type === 'ImportSpecifier' && spec.imported.name === 'Comments') {
-                commentsImportName = spec.local.name;
-              }
-            });
-          }
-        }
-      });
-
-      // Add Comments import if missing
-      if (!hasCommentsImport) {
-        let lastImportIndex = -1;
-        for (let i = ast.program.body.length - 1; i >= 0; i--) {
-          if (ast.program.body[i].type === 'ImportDeclaration') {
-            lastImportIndex = i;
-            break;
-          }
-        }
-        const importIndex = lastImportIndex >= 0 ? lastImportIndex + 1 : 0;
-        
-        const commentsImport = types.importDeclaration(
-          [types.importSpecifier(types.identifier('Comments'), types.identifier('Comments'))],
-          types.stringLiteral('@app/Comments/Comments')
-        );
-        
-        ast.program.body.splice(importIndex, 0, commentsImport);
-      }
-
-      // Check if Comments route group already exists
-      let existingCommentsGroup = null;
-      let existingCommentsRoutes = null;
-      
-      for (const element of routesArray.elements) {
-        if (element.type === 'ObjectExpression') {
-          const labelProp = element.properties.find(
-            prop => prop.key && prop.key.name === 'label' && 
-            prop.value && prop.value.value === 'Comments'
-          );
-          if (labelProp) {
-            existingCommentsGroup = element;
-            const routesProp = element.properties.find(
-              prop => prop.key && prop.key.name === 'routes'
-            );
-            if (routesProp && routesProp.value.type === 'ArrayExpression') {
-              existingCommentsRoutes = routesProp.value;
-            }
-            break;
-          }
+    // Add imports if missing
+    if (!hasCommentingImport) {
+      let lastImportIndex = -1;
+      for (let i = ast.program.body.length - 1; i >= 0; i--) {
+        if (ast.program.body[i].type === 'ImportDeclaration') {
+          lastImportIndex = i;
+          break;
         }
       }
+      const importIndex = lastImportIndex >= 0 ? lastImportIndex + 1 : 0;
 
-      // Create the Comments route item
-      const commentsRouteElement = types.jsxElement(
-        types.jsxOpeningElement(types.jsxIdentifier(commentsImportName), [], true),
-        null,
-        []
+      const commentingImport = types.importDeclaration(
+        [
+          types.importSpecifier(types.identifier('CommentPanel'), types.identifier('CommentPanel')),
+          types.importSpecifier(types.identifier('CommentOverlay'), types.identifier('CommentOverlay'))
+        ],
+        types.stringLiteral('hale-commenting-system')
       );
 
-      const commentsRouteItem = types.objectExpression([
-        types.objectProperty(types.identifier('element'), commentsRouteElement),
-        types.objectProperty(types.identifier('exact'), types.booleanLiteral(true)),
-        types.objectProperty(types.identifier('label'), types.stringLiteral('View all')),
-        types.objectProperty(types.identifier('path'), types.stringLiteral('/comments')),
-        types.objectProperty(types.identifier('title'), types.stringLiteral('Hale Commenting System | Comments'))
-      ]);
-
-      if (existingCommentsGroup && existingCommentsRoutes) {
-        // Add route to existing Comments group
-        existingCommentsRoutes.elements.push(commentsRouteItem);
-      } else {
-        // Create new Comments route group
-        const commentsRoute = types.objectExpression([
-          types.objectProperty(types.identifier('label'), types.stringLiteral('Comments')),
-          types.objectProperty(types.identifier('routes'), types.arrayExpression([commentsRouteItem]))
-        ]);
-        routesArray.elements.push(commentsRoute);
-      }
+      ast.program.body.splice(importIndex, 0, commentingImport);
     }
 
-    const output = generate(ast, {
-      retainLines: false,
-      compact: false
-    }, content);
-
-    fs.writeFileSync(filePath, output.code);
-    return true;
-  } catch (error) {
-    console.error(`   ❌ Error modifying ${filePath}:`, error.message);
-    return false;
-  }
-}
-
-function modifyAppLayoutTsx(filePath) {
-  let content = fs.readFileSync(filePath, 'utf8');
-
-  // Check if already integrated - look for the comprehensive integration
-  if (content.includes('useComments') && content.includes('useGitHubAuth') &&
-      content.includes('setCommentsEnabled') && content.includes('setFloatingWidgetMode')) {
-    console.log('   ⚠️  Already integrated (full commenting system controls found)');
-    return false;
-  }
+    // Find Page component and wrap its children
+    let pageComponentFound = false;
+    traverse(ast, {
+      JSXElement(path) {
+        const openingElement = path.node.openingElement;
+        if (openingElement.name && openingElement.name.name === 'Page') {
+          pageComponentFound = true;
+          const children = path.node.children;
+
+          // Check if already wrapped
+          if (children.length > 0 &&
+              children.some(child =>
+                child.type === 'JSXElement' &&
+                child.openingElement.name.name === 'CommentPanel')) {
+            return;
+          }
 
-  try {
-    // Step 1: Add imports using string manipulation (more reliable for complex imports)
-
-    // Check and add PatternFly imports
-    const patternflyImportRegex = /from\s+['"]@patternfly\/react-core['"]/;
-    const patternflyMatch = content.match(patternflyImportRegex);
-
-    if (patternflyMatch) {
-      // Find the import statement
-      const importMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-core['"]/);
-      if (importMatch) {
-        const imports = importMatch[1];
-        // Add Switch if not present
-        if (!imports.includes('Switch')) {
-          const newImports = imports.trim() + ',\n  Switch';
-          content = content.replace(
-            /import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-core['"]/,
-            `import {${newImports}\n} from '@patternfly/react-core'`
+          // Create CommentOverlay element
+          const commentOverlay = types.jsxElement(
+            types.jsxOpeningElement(types.jsxIdentifier('CommentOverlay'), [], true),
+            null,
+            []
           );
-        }
-      }
-    }
 
-    // Check and add PatternFly icons imports
-    const iconsImportRegex = /from\s+['"]@patternfly\/react-icons['"]/;
-    const iconsMatch = content.match(iconsImportRegex);
-
-    if (iconsMatch) {
-      const importMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-icons['"]/);
-      if (importMatch) {
-        const imports = importMatch[1];
-        // Add icons if not present
-        let newImports = imports.trim();
-        if (!imports.includes('ExternalLinkAltIcon')) {
-          newImports += ', ExternalLinkAltIcon';
-        }
-        if (!imports.includes('GithubIcon')) {
-          newImports += ', GithubIcon';
-        }
-        if (newImports !== imports.trim()) {
-          content = content.replace(
-            /import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-icons['"]/,
-            `import { ${newImports} } from '@patternfly/react-icons'`
+          // Create CommentPanel wrapping existing children
+          const commentPanel = types.jsxElement(
+            types.jsxOpeningElement(types.jsxIdentifier('CommentPanel'), []),
+            types.jsxClosingElement(types.jsxIdentifier('CommentPanel')),
+            [commentOverlay, ...children]
           );
-        }
-      }
-    }
 
-    // Add commenting system imports
-    if (!content.includes('hale-commenting-system')) {
-      // Find where to insert (after other imports)
-      const lastImportMatch = content.match(/import[^;]*;(?=\s*(?:interface|const|export|function))/g);
-      if (lastImportMatch) {
-        const lastImport = lastImportMatch[lastImportMatch.length - 1];
-        const insertPos = content.indexOf(lastImport) + lastImport.length;
-        const commentingImport = `\nimport { CommentOverlay, CommentPanel, useComments, useGitHubAuth } from "hale-commenting-system";`;
-        content = content.slice(0, insertPos) + commentingImport + content.slice(insertPos);
-      }
-    } else {
-      // Update existing import to include all needed items
-      const commentingImportMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+["']hale-commenting-system["']/);
-      if (commentingImportMatch) {
-        const imports = commentingImportMatch[1];
-        let newImports = imports.split(',').map(i => i.trim());
-
-        const needed = ['CommentOverlay', 'CommentPanel', 'useComments', 'useGitHubAuth'];
-        needed.forEach(item => {
-          if (!newImports.includes(item)) {
-            newImports.push(item);
-          }
-        });
-
-        content = content.replace(
-          /import\s+\{[^}]+\}\s+from\s+["']hale-commenting-system["']/,
-          `import { ${newImports.join(', ')} } from "hale-commenting-system"`
-        );
-      }
-    }
-
-    // Step 2: Add hooks to the component
-    // Find the AppLayout function/component
-    const componentMatch = content.match(/(const\s+AppLayout[^=]+=\s*\([^)]*\)\s*=>\s*\{)/);
-    if (componentMatch) {
-      const componentStart = content.indexOf(componentMatch[0]);
-      const afterComponentStart = componentStart + componentMatch[0].length;
-
-      // Check if hooks are already added
-      if (!content.includes('const { commentsEnabled, setCommentsEnabled')) {
-        // Find where to insert hooks (after existing useState declarations)
-        const stateMatch = content.slice(afterComponentStart).match(/const\s+\[[^\]]+\]\s*=\s*React\.useState/);
-        let hookInsertPos;
-
-        if (stateMatch) {
-          const statePos = content.indexOf(stateMatch[0], afterComponentStart);
-          const semicolonPos = content.indexOf(';', statePos);
-          hookInsertPos = semicolonPos + 1;
-        } else {
-          hookInsertPos = afterComponentStart;
+          path.node.children = [commentPanel];
         }
-
-        const hooks = `
-  const { commentsEnabled, setCommentsEnabled, drawerPinnedOpen, setDrawerPinnedOpen, floatingWidgetMode, setFloatingWidgetMode } = useComments();
-  const { isAuthenticated, user, login, logout } = useGitHubAuth();
-`;
-        content = content.slice(0, hookInsertPos) + hooks + content.slice(hookInsertPos);
       }
-    }
-
-    // Step 3: Add the special renderNavGroup logic
-    // Replace the simple arrow function with a block function that has special Comments handling
-    if (!content.includes("group.label === 'Comments'")) {
-      // Find the renderNavGroup function - handle both arrow expression () => (...) and block () => {...}
-      const arrowFuncMatch = content.match(/const\s+renderNavGroup\s*=\s*\(([^)]+)\)\s*=>\s*\(/);
-
-      if (arrowFuncMatch) {
-        const params = arrowFuncMatch[1];
-
-        // Find the entire function including the closing parenthesis and semicolon
-        const funcStart = content.indexOf(arrowFuncMatch[0]);
-        const afterArrow = funcStart + arrowFuncMatch[0].length;
-
-        // Find matching closing paren and semicolon
-        let depth = 1;
-        let endPos = afterArrow;
-        for (let i = afterArrow; i < content.length; i++) {
-          if (content.charAt(i) === '(') depth++;
-          if (content.charAt(i) === ')') {
-            depth--;
-            if (depth === 0) {
-              // Found the closing paren, now find the semicolon
-              endPos = i + 1;
-              while (endPos < content.length && content.charAt(endPos).trim() === '') endPos++;
-              if (content.charAt(endPos) === ';') endPos++;
-              break;
-            }
-          }
-        }
-
-        // Extract the original NavExpandable JSX (we'll use it as the default case)
-        const originalBody = content.slice(funcStart + arrowFuncMatch[0].length - 1, endPos - 1); // Remove opening ( and closing );
-
-        // Create the new block function
-        const newFunction = `const renderNavGroup = (${params}) => {
-    // Special handling for Comments group
-    if (group.label === 'Comments') {
-      return (
-        <NavExpandable
-          key={\`\${group.label}-\${groupIndex}\`}
-          id={\`\${group.label}-\${groupIndex}\`}
-          title="Hale Commenting System"
-          isActive={group.routes.some((route) => route.path === location.pathname)}
-        >
-          <NavItem
-            onClick={(e) => {
-              e.stopPropagation();
-              setFloatingWidgetMode(!floatingWidgetMode);
-              if (!floatingWidgetMode) {
-                setDrawerPinnedOpen(false);
-              }
-            }}
-            style={{ cursor: 'pointer' }}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-              <ExternalLinkAltIcon />
-              <span>{floatingWidgetMode ? 'Close widget' : 'Pop out'}</span>
-            </div>
-          </NavItem>
-          <NavItem>
-            <div
-              data-comment-controls
-              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
-            >
-              <span>Enable Comments</span>
-              <Switch
-                id="comments-enabled-switch"
-                isChecked={commentsEnabled}
-                onChange={(_event, checked) => {
-                  setCommentsEnabled(checked);
-                  if (checked) {
-                    setDrawerPinnedOpen(true);
-                  }
-                }}
-                aria-label="Enable or disable comments"
-              />
-            </div>
-          </NavItem>
-          <NavItem>
-            <div
-              data-comment-controls
-              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
-            >
-              <span>Page info drawer</span>
-              <Switch
-                id="page-info-drawer-switch"
-                isChecked={drawerPinnedOpen}
-                onChange={(_event, checked) => setDrawerPinnedOpen(checked)}
-                aria-label="Pin page info drawer open"
-              />
-            </div>
-          </NavItem>
-          <NavItem>
-            <div
-              data-comment-controls
-              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
-            >
-              {isAuthenticated ? (
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
-                    <GithubIcon />
-                    {user?.login ? \`@\${user.login}\` : 'Signed in'}
-                  </span>
-                  <Button variant="link" isInline onClick={logout}>
-                    Sign out
-                  </Button>
-                </div>
-              ) : (
-                <Button variant="link" isInline icon={<GithubIcon />} onClick={login}>
-                  Sign in with GitHub
-                </Button>
-              )}
-            </div>
-          </NavItem>
-          {group.routes.map((route, idx) => route.label && renderNavItem(route, idx))}
-        </NavExpandable>
-      );
-    }
-
-    // Default handling for other groups
-    return ${originalBody};
-  };`;
+    });
 
-        // Replace the old function with the new one
-        content = content.slice(0, funcStart) + newFunction + content.slice(endPos);
-      }
+    if (!pageComponentFound) {
+      console.error('   ❌ Could not find Page component in AppLayout.tsx');
+      return false;
     }
 
-    // Step 4: Wrap Page children if not already done
-    if (!content.includes('<CommentPanel>')) {
-      // Find the return statement with Page
-      const pageMatch = content.match(/<Page[^>]*>/);
-      if (pageMatch) {
-        const pageStart = content.indexOf(pageMatch[0]);
-        const pageEnd = content.indexOf('</Page>', pageStart);
-
-        if (pageEnd > pageStart) {
-          // Extract children between Page tags
-          const pageOpenTagEnd = content.indexOf('>', pageStart) + 1;
-          const children = content.slice(pageOpenTagEnd, pageEnd);
-
-          // Wrap with CommentPanel and add CommentOverlay
-          const wrappedChildren = `
-      <CommentPanel>
-        <CommentOverlay />
-        ${children.trim()}
-      </CommentPanel>
-    `;
-
-          content = content.slice(0, pageOpenTagEnd) + wrappedChildren + content.slice(pageEnd);
-        }
-      }
-    }
+    const output = generate(ast, {
+      retainLines: false,
+      compact: false
+    }, content);
 
-    fs.writeFileSync(filePath, content);
+    fs.writeFileSync(filePath, output.code);
     return true;
   } catch (error) {
     console.error(`   ❌ Error modifying ${filePath}:`, error.message);
@@ -1821,15 +1475,13 @@ async function main() {
 
   // Step 5: Integrate into project
   console.log('\n🔧 Step 5: Integrating into PatternFly Seed project...\n');
-  
+
   console.log('This will modify the following files:');
   console.log('  • src/app/index.tsx');
-  console.log('  • src/app/routes.tsx');
   console.log('  • src/app/AppLayout/AppLayout.tsx');
   console.log('  • webpack.dev.js\n');
 
   const indexPath = findFile('index.tsx');
-  const routesPath = findFile('routes.tsx');
   const appLayoutPath = findFile('AppLayout/AppLayout.tsx') || findFile('AppLayout.tsx');
 
   if (!indexPath) {
@@ -1837,11 +1489,6 @@ async function main() {
     rl.close();
     process.exit(1);
   }
-  if (!routesPath) {
-    console.error('❌ Could not find src/app/routes.tsx');
-    rl.close();
-    process.exit(1);
-  }
   if (!appLayoutPath) {
     console.error('❌ Could not find src/app/AppLayout/AppLayout.tsx');
     rl.close();
@@ -1862,19 +1509,6 @@ async function main() {
     skippedCount++;
   }
 
-  // Create Comments component first (needed for routes)
-  console.log('\n📝 Creating Comments component...');
-  createCommentsComponent();
-
-  // Modify routes.tsx
-  console.log(`\n📝 ${routesPath}`);
-  if (modifyRoutesTsx(routesPath)) {
-    console.log('   ✅ Added Comments route');
-    successCount++;
-  } else {
-    skippedCount++;
-  }
-
   // Modify AppLayout.tsx
   console.log(`\n📝 ${appLayoutPath}`);
   if (modifyAppLayoutTsx(appLayoutPath)) {

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

@@ -16,7 +16,7 @@ export const CommentOverlay: React.FunctionComponent = () => {
   const handlePageClick = (e: MouseEvent) => {
     if (!commentsEnabled) return;
 
-    // Check if clicking on a pin or any interactive element
+    // Check if clicking on a pin or any interactive element (including FloatingWidget)
     const target = e.target as HTMLElement;
     if (
       target.closest('button') ||
@@ -26,9 +26,10 @@ export const CommentOverlay: React.FunctionComponent = () => {
       target.closest('textarea') ||
       target.closest('[role="button"]') ||
       target.closest('[data-comment-controls]') ||
-      target.closest('[data-comment-pin]')
+      target.closest('[data-comment-pin]') ||
+      target.closest('[data-floating-widget]')
     ) {
-      return; // Don't create pin if clicking interactive elements
+      return; // Don't create pin if clicking interactive elements or floating widget
     }
 
     // Get the overlay container dimensions (accounts for drawer being open)

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/src/app/routes.tsx

@@ -58,10 +58,6 @@ const routes: AppRouteConfig[] = [
       },
     ],
   },
-  {
-    label: 'Comments',
-    routes: [],
-  },
 ];
 
 const flattenedRoutes: IAppRoute[] = routes.reduce(

package/tsconfig.json

@@ -30,5 +30,5 @@
     "**/*.jsx",
     "**/*.js"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "scripts/AppLayout.template.tsx"]
 }