jira-pat 1.0.0

package/frontend/src/components/IssueTable.jsx

@@ -0,0 +1,162 @@
+import React, { Inbox } from 'react';
+import { getIssueTypeIcon, getStatusClass, getSeverityIcon, formatSeverity, getInitials, SEVERITY_FIELD } from '../utils/issueHelpers.jsx';
+
+function LoadingSkeleton() {
+  return (
+    <div className="table-container">
+      <table className="issue-table">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Summary</th>
+            <th>Status</th>
+            <th>Assignee</th>
+            <th>Severity</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[...Array(5)].map((_, i) => (
+            <tr key={i} className="skeleton-row">
+              <td><div className="skeleton skeleton-cell" style={{ maxWidth: '100px' }}></div></td>
+              <td><div className="skeleton skeleton-cell"></div></td>
+              <td><div className="skeleton skeleton-cell" style={{ maxWidth: '100px' }}></div></td>
+              <td><div className="skeleton skeleton-avatar"></div></td>
+              <td><div className="skeleton skeleton-cell" style={{ maxWidth: '80px' }}></div></td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="empty-state">
+      <Inbox size={48} className="empty-state-icon" />
+      <h3>No issues found</h3>
+      <p>Try adjusting your filters or create a new issue</p>
+    </div>
+  );
+}
+
+export default React.memo(function IssueTable({ issues, loading, onRowClick, currentPage = 0, pageSize = 25, total, onPageChange }) {
+  const startItem = total > 0 ? currentPage * pageSize + 1 : 0;
+  const endItem = Math.min((currentPage + 1) * pageSize, total);
+
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
+
+  if (!loading && issues.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <div className="table-container">
+      <table className="issue-table" role="grid">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Summary</th>
+            <th>Status</th>
+            <th>Assignee</th>
+            <th>Severity</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[...issues]
+            .sort((a, b) => {
+              const aStatus = a.fields.status?.name?.toLowerCase() || '';
+              const bStatus = b.fields.status?.name?.toLowerCase() || '';
+              if (aStatus === 'backlog' && bStatus !== 'backlog') return 1;
+              if (aStatus !== 'backlog' && bStatus === 'backlog') return -1;
+              return 0;
+            })
+            .map((issue) => (
+            <tr 
+              key={issue.id} 
+              className="clickable-row" 
+              onClick={() => onRowClick(issue.key)}
+              role="row"
+              tabIndex={0}
+              onKeyDown={(e) => e.key === 'Enter' && onRowClick(issue.key)}
+            >
+              <td>
+                <span className="issue-key">
+                  {getIssueTypeIcon(issue.fields.issuetype?.name)}
+                  {issue.key}
+                </span>
+              </td>
+              <td>
+                <span className="issue-summary" title={issue.fields.summary}>
+                  {issue.fields.summary}
+                </span>
+              </td>
+              <td>
+                <span className={`status-badge ${getStatusClass(issue.fields.status?.name)}`}>
+                  {issue.fields.status?.name || 'Unknown'}
+                </span>
+              </td>
+              <td>
+                <div className="assignee-cell">
+                  {issue.fields.assignee ? (
+                    <>
+                      <span className="avatar">
+                        {getInitials(issue.fields.assignee.displayName)}
+                      </span>
+                      <span>{issue.fields.assignee.displayName}</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="avatar placeholder">
+                        {getInitials('Unassigned')}
+                      </span>
+                      <span>Unassigned</span>
+                    </>
+                  )}
+                </div>
+              </td>
+              <td>
+                {issue.fields[SEVERITY_FIELD] ? (
+                  <span className={`severity-badge ${(issue.fields[SEVERITY_FIELD].value || issue.fields[SEVERITY_FIELD].name || '').toLowerCase().replace(/\s+/g, '-')}`}>
+                    {getSeverityIcon(issue.fields[SEVERITY_FIELD].value || issue.fields[SEVERITY_FIELD].name)}
+                    {formatSeverity(issue.fields[SEVERITY_FIELD].value || issue.fields[SEVERITY_FIELD].name)}
+                  </span>
+                ) : (
+                  <span style={{ color: 'var(--text-muted)', fontSize: '13px' }}>—</span>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {total !== undefined && total > 0 && (
+        <div className="pagination-bar">
+          <span className="pagination-info">
+            Showing {startItem}–{endItem} of {total}
+          </span>
+          <div className="pagination-controls">
+            <button
+              className="pagination-btn"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={currentPage === 0}
+            >
+              Previous
+            </button>
+            <span className="pagination-page">Page {currentPage + 1}</span>
+            <button
+              className="pagination-btn"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={endItem >= total}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export { getIssueTypeIcon, getStatusClass, getSeverityIcon, formatSeverity, getInitials, SEVERITY_FIELD } from '../utils/issueHelpers.jsx';

package/frontend/src/components/SkeletonComponents.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export function SkeletonTitle({ width = '60%' }) {
+  return <div className="skeleton skeleton-title" style={{ width }} />;
+}
+
+export function SkeletonText({ lines = 3, lastLineWidth = '60%' }) {
+  return (
+    <>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className="skeleton skeleton-line"
+          style={{ width: i === lines - 1 ? lastLineWidth : '100%' }}
+        />
+      ))}
+    </>
+  );
+}
+
+export function SkeletonAvatar({ size = 32 }) {
+  return (
+    <div
+      className="skeleton skeleton-avatar"
+      style={{ width: size, height: size }}
+    />
+  );
+}
+
+export function SkeletonChip({ width = 80 }) {
+  return (
+    <div
+      className="skeleton skeleton-chip"
+      style={{ width }}
+    />
+  );
+}
+
+export function SkeletonSidebarItem() {
+  return (
+    <div className="skeleton-sidebar-item">
+      <div className="skeleton" style={{ height: 14, width: '30%', marginBottom: 4 }} />
+      <div className="skeleton" style={{ height: 20, width: '50%' }} />
+    </div>
+  );
+}

package/frontend/src/components/StandaloneIssuePage.jsx

@@ -0,0 +1,176 @@
+import { useState, useEffect } from 'react';
+import { useIssueDrawer } from '../hooks/useIssueDrawer';
+import IssueDetailPanel from './IssueDetailPanel';
+import { useToasts } from '../hooks/useToasts';
+import {
+  X, Loader2, AlertCircle, Link2, Calendar, Package,
+  PlusCircle, ArrowLeft
+} from 'lucide-react';
+
+export default function StandaloneIssuePage() {
+  const [issueKey, setIssueKey] = useState(null);
+  const { toasts, addToast, removeToast } = useToasts();
+  const {
+    issueDetail,
+    comments,
+    transitions,
+    assignableUsers,
+    drawerLoading,
+    drawerError,
+    newCommentText,
+    setNewCommentText,
+    isPostingComment,
+    targetTransitionId,
+    setTargetTransitionId,
+    isTransitioning,
+    assigneeSearch,
+    setAssigneeSearch,
+    targetAccountId,
+    setTargetAccountId,
+    isAssigning,
+    projectVersions,
+    isUpdatingVersions,
+    newLabelText,
+    setNewLabelText,
+    labelSuggestions,
+    showLabelSuggestions,
+    setShowLabelSuggestions,
+    isUpdatingLabels,
+    isUploading,
+    uploadMessage,
+    handlePostComment,
+    handleAssignUser,
+    handleFileUpload,
+    handleUpdateVersion,
+    handleAddLabel,
+    handleRemoveLabel,
+    handleUpdateStatus
+  } = useIssueDrawer(issueKey, addToast);
+
+  useEffect(() => {
+    const loadFromHash = () => {
+      const hash = window.location.hash;
+      if (hash.startsWith('#/view/')) {
+        const key = hash.replace('#/view/', '');
+        if (key && key !== issueKey) {
+          setIssueKey(key);
+        }
+      }
+    };
+
+    loadFromHash();
+    window.addEventListener('hashchange', loadFromHash);
+    window.addEventListener('popstate', loadFromHash);
+
+    return () => {
+      window.removeEventListener('hashchange', loadFromHash);
+      window.removeEventListener('popstate', loadFromHash);
+    };
+  }, [issueKey]);
+
+  if (drawerLoading) {
+    return (
+      <div className="standalone-page">
+        <div className="standalone-issue-container">
+          <header className="standalone-header">
+            <a href="/" className="standalone-back-btn">
+              <ArrowLeft size={18} />
+              Back to Dashboard
+            </a>
+          </header>
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Loader2 size={32} style={{ animation: 'spin 1s linear infinite' }} />
+            <span style={{ marginLeft: '12px', fontSize: '16px', color: '#666' }}>Loading issue...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (drawerError || !issueDetail) {
+    return (
+      <div className="standalone-page">
+        <div className="standalone-issue-container">
+          <header className="standalone-header">
+            <a href="/" className="standalone-back-btn">
+              <ArrowLeft size={18} />
+              Back to Dashboard
+            </a>
+          </header>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '16px' }}>
+            <AlertCircle size={48} style={{ color: '#de350b' }} />
+            <h2 style={{ margin: 0, color: 'var(--text-main)' }}>{drawerError || 'Issue not found'}</h2>
+            <a href="/" className="btn-primary" style={{ textDecoration: 'none', padding: '12px 24px' }}>
+              Back to Dashboard
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="standalone-page">
+      <div className="standalone-issue-container">
+        <header className="standalone-header">
+          <a href="/" className="standalone-back-btn">
+            <ArrowLeft size={18} />
+            Back to Dashboard
+          </a>
+          <div className="drawer-header-actions">
+            <button
+              className="action-btn"
+              onClick={() => {
+                navigator.clipboard.writeText(window.location.href);
+                addToast('Link copied to clipboard', 'success');
+              }}
+              aria-label="Copy link"
+            >
+              <Link2 size={18} />
+            </button>
+          </div>
+        </header>
+
+        <div className="drawer-body">
+          <IssueDetailPanel
+            mode="standalone"
+            issueDetail={issueDetail}
+            comments={comments}
+            transitions={transitions}
+            assignableUsers={assignableUsers}
+            projectVersions={projectVersions}
+            drawerLoading={drawerLoading}
+            drawerError={drawerError}
+            newCommentText={newCommentText}
+            setNewCommentText={setNewCommentText}
+            isPostingComment={isPostingComment}
+            targetTransitionId={targetTransitionId}
+            setTargetTransitionId={setTargetTransitionId}
+            isTransitioning={isTransitioning}
+            assigneeSearch={assigneeSearch}
+            setAssigneeSearch={setAssigneeSearch}
+            targetAccountId={targetAccountId}
+            setTargetAccountId={setTargetAccountId}
+            isAssigning={isAssigning}
+            isUpdatingVersions={isUpdatingVersions}
+            newLabelText={newLabelText}
+            setNewLabelText={setNewLabelText}
+            labelSuggestions={labelSuggestions}
+            showLabelSuggestions={showLabelSuggestions}
+            setShowLabelSuggestions={setShowLabelSuggestions}
+            isUpdatingLabels={isUpdatingLabels}
+            isUploading={isUploading}
+            uploadMessage={uploadMessage}
+            handlePostComment={handlePostComment}
+            handleAssignUser={handleAssignUser}
+            handleFileUpload={handleFileUpload}
+            handleUpdateVersion={handleUpdateVersion}
+            handleAddLabel={handleAddLabel}
+            handleRemoveLabel={handleRemoveLabel}
+            handleUpdateStatus={handleUpdateStatus}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/ToastContainer.jsx

@@ -0,0 +1,19 @@
+import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
+
+export default function ToastContainer({ toasts, onRemove }) {
+  return (
+    <div className="toast-container" aria-live="polite">
+      {toasts.map(toast => (
+        <div key={toast.id} className={`toast ${toast.type}`} role="alert">
+          {toast.type === 'success' && <CheckCircle size={18} />}
+          {toast.type === 'error' && <AlertCircle size={18} />}
+          {toast.type === 'info' && <Info size={18} />}
+          <span>{toast.message}</span>
+          <button className="toast-close" onClick={() => onRemove(toast.id)} aria-label="Dismiss">
+            <X size={16} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/frontend/src/hooks/useFocusTrap.js

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+export function useFocusTrap(containerRef, isActive) {
+  const previousActiveElement = useRef(null);
+
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+
+    const container = containerRef.current;
+    previousActiveElement.current = document.activeElement;
+
+    const focusableElements = container.querySelectorAll(FOCUSABLE_SELECTORS);
+    const firstElement = focusableElements[0];
+
+    if (firstElement) {
+      firstElement.focus();
+    }
+
+    const handleKeyDown = (e) => {
+      if (e.key !== 'Tab') return;
+
+      const focusableInTrap = container.querySelectorAll(FOCUSABLE_SELECTORS);
+      if (focusableInTrap.length === 0) return;
+
+      const first = focusableInTrap[0];
+      const last = focusableInTrap[focusableInTrap.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    container.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      container.removeEventListener('keydown', handleKeyDown);
+      if (previousActiveElement.current && previousActiveElement.current.focus) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isActive, containerRef]);
+}