refactor: enforce shared Modal component in remaining custom modals

- ShareSessionModal: replaced custom modal markup with <Modal> - CreateCategoryModal: replaced custom modal markup with <Modal> - EditCategoryModal: replaced custom modal markup with <Modal> - All now get focus trapping, Escape close, body scroll lock for free Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 22:32:56 -05:00
parent d365c38b61
commit 0ec3d62ace
3 changed files with 379 additions and 427 deletions
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Modal } from '@/components/common/Modal'

 interface CreateCategoryModalProps {
  isOpen: boolean
@@ -19,8 +19,6 @@ export function CreateCategoryModal({
  const [description, setDescription] = useState('')
  const [error, setError] = useState('')

-  if (!isOpen) return null
-
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
@@ -40,7 +38,6 @@ export function CreateCategoryModal({
        name: name.trim(),
        description: description.trim()
      })
-      // Reset form on success
      setName('')
      setDescription('')
    } catch {
@@ -58,30 +55,45 @@ export function CreateCategoryModal({
  }

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
-        {/* Header */}
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground">Create Category</h2>
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Create Category"
+      size="sm"
+      footer={
+        <div className="flex justify-end gap-2">
          <button
+            type="button"
            onClick={handleClose}
            disabled={isSaving}
-            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+            className={cn(
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
+            )}
          >
-            <X className="h-5 w-5" />
+            Cancel
+          </button>
+          <button
+            type="submit"
+            form="create-category-form"
+            disabled={isSaving || !name.trim()}
+            className={cn(
+              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+              'hover:opacity-90 disabled:opacity-50'
+            )}
+          >
+            {isSaving ? 'Creating...' : 'Create Category'}
          </button>
        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Error Message */}
+      }
+    >
+      <form id="create-category-form" onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
            {error}
          </div>
        )}

-          {/* Name Field */}
        <div>
          <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
            Category Name <span className="text-red-400">*</span>
@@ -107,7 +119,6 @@ export function CreateCategoryModal({
          </p>
        </div>

-          {/* Description Field */}
        <div>
          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
            Description <span className="text-muted-foreground">(optional)</span>
@@ -127,33 +138,7 @@ export function CreateCategoryModal({
            )}
          />
        </div>
-
-          {/* Actions */}
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={handleClose}
-              disabled={isSaving}
-              className={cn(
-                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-                'hover:bg-accent hover:text-foreground disabled:opacity-50'
-              )}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isSaving || !name.trim()}
-              className={cn(
-                'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
-                'hover:opacity-90 disabled:opacity-50'
-              )}
-            >
-              {isSaving ? 'Creating...' : 'Create Category'}
-            </button>
-          </div>
      </form>
-      </div>
-    </div>
+    </Modal>
  )
 }
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { StepCategoryListItem } from '@/types'
+import { Modal } from '@/components/common/Modal'

 interface EditCategoryModalProps {
  isOpen: boolean
@@ -33,7 +33,7 @@ export function EditCategoryModal({
    setPrevCategoryId(null)
  }

-  if (!isOpen || !category) return null
+  if (!category) return null

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
@@ -67,30 +67,45 @@ export function EditCategoryModal({
  }

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
-        {/* Header */}
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground">Edit Category</h2>
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Edit Category"
+      size="sm"
+      footer={
+        <div className="flex justify-end gap-2">
          <button
+            type="button"
            onClick={handleClose}
            disabled={isSaving}
-            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+            className={cn(
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
+            )}
          >
-            <X className="h-5 w-5" />
+            Cancel
+          </button>
+          <button
+            type="submit"
+            form="edit-category-form"
+            disabled={isSaving || !name.trim()}
+            className={cn(
+              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+              'hover:opacity-90 disabled:opacity-50'
+            )}
+          >
+            {isSaving ? 'Saving...' : 'Save Changes'}
          </button>
        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Error Message */}
+      }
+    >
+      <form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
            {error}
          </div>
        )}

-          {/* Name Field */}
        <div>
          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
            Category Name <span className="text-red-400">*</span>
@@ -116,7 +131,6 @@ export function EditCategoryModal({
          </p>
        </div>

-          {/* Description Field */}
        <div>
          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
            Description <span className="text-muted-foreground">(optional)</span>
@@ -136,33 +150,7 @@ export function EditCategoryModal({
            )}
          />
        </div>
-
-          {/* Actions */}
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={handleClose}
-              disabled={isSaving}
-              className={cn(
-                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-                'hover:bg-accent hover:text-foreground disabled:opacity-50'
-              )}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isSaving || !name.trim()}
-              className={cn(
-                'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
-                'hover:opacity-90 disabled:opacity-50'
-              )}
-            >
-              {isSaving ? 'Saving...' : 'Save Changes'}
-            </button>
-          </div>
      </form>
-      </div>
-    </div>
+    </Modal>
  )
 }
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -1,15 +1,16 @@
 import { useState, useEffect, useCallback } from 'react'
-import { X, Copy, Check, Globe, Users, Clock, Trash2, Link2 } from 'lucide-react'
+import { Copy, Check, Globe, Users, Clock, Trash2, Link2 } from 'lucide-react'
 import type { SessionShare, SessionShareVisibility } from '@/types'
 import { sessionsApi } from '@/api/sessions'
 import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Spinner } from '@/components/common/Spinner'
+import { Modal } from '@/components/common/Modal'

 interface ShareSessionModalProps {
  sessionId: string
-  sessionLabel: string // e.g. ticket number or "Session Details"
+  sessionLabel: string
  isOpen: boolean
  onClose: () => void
 }
@@ -76,7 +77,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
  const [isGenerating, setIsGenerating] = useState(false)
  const [copiedShareId, setCopiedShareId] = useState<string | null>(null)

-  // Form state
  const [visibility, setVisibility] = useState<SessionShareVisibility>('account')
  const [shareName, setShareName] = useState('')
  const [expirationPreset, setExpirationPreset] = useState<ExpirationPreset>('never')
@@ -88,7 +88,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
    try {
      const allShares = await sessionsApi.listMyShares()
      const sessionShares = filterSharesForSession(allShares, sessionId)
-      // Sort newest first
      sessionShares.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
      setShares(sessionShares)
    } catch (err) {
@@ -101,7 +100,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
  useEffect(() => {
    if (isOpen) {
      loadShares()
-      // Reset form state
      setVisibility('account')
      setShareName('')
      setExpirationPreset('never')
@@ -123,7 +121,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
      })
      setShares([newShare, ...shares])
      toast.success('Share link generated')
-      // Reset form
      setShareName('')
      setExpirationPreset('never')
      setCustomDatetime('')
@@ -167,8 +164,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
    }
  }

-  if (!isOpen) return null
-
  const presetButtons: { value: ExpirationPreset; label: string }[] = [
    { value: 'never', label: 'Never' },
    { value: '1day', label: '1 day' },
@@ -178,31 +173,29 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
  ]

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
-        onClick={onClose}
-      />
-
-      {/* Modal */}
-      <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-6 py-4">
-          <div>
-            <h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
-            <p className="text-sm text-muted-foreground">{sessionLabel}</p>
-          </div>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Share Session"
+      size="lg"
+      footer={
+        <div className="flex justify-end">
          <button
            onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className={cn(
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
+            )}
          >
-            <X className="h-5 w-5" />
+            Close
          </button>
        </div>
+      }
+    >
+      {/* Subtitle */}
+      <p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>

-        {/* Body */}
-        <div className="max-h-[60vh] overflow-y-auto px-6 py-4 space-y-6">
+      <div className="space-y-6">
        {/* Create Share Form */}
        <div className="space-y-4">
          {/* Visibility */}
@@ -411,21 +404,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
          </div>
        )}
      </div>
-
-        {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
-          <button
-            onClick={onClose}
-            className={cn(
-              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
-            )}
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
+    </Modal>
  )
 }