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>

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">
+    <Modal
-      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
+      isOpen={isOpen}
-        {/* Header */}
+      onClose={handleClose}
-        <div className="mb-4 flex items-center justify-between">
+      title="Create Category"
-          <h2 className="text-lg font-semibold text-foreground">Create Category</h2>
+      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">
+      <form id="create-category-form" onSubmit={handleSubmit} className="space-y-4">
-          {/* Error Message */}
         {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>
+    </Modal>
-    </div>
   )
 }

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">
+    <Modal
-      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
+      isOpen={isOpen}
-        {/* Header */}
+      onClose={handleClose}
-        <div className="mb-4 flex items-center justify-between">
+      title="Edit Category"
-          <h2 className="text-lg font-semibold text-foreground">Edit Category</h2>
+      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">
+      <form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
-          {/* Error Message */}
         {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>
+    </Modal>
-    </div>
   )
 }

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">
+    <Modal
-      {/* Backdrop */}
+      isOpen={isOpen}
-      <div
+      onClose={onClose}
-        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
+      title="Share Session"
-        onClick={onClose}
+      size="lg"
-      />
+      footer={
-
+        <div className="flex justify-end">
-      {/* 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>
           <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="space-y-6">
-        <div className="max-h-[60vh] overflow-y-auto px-6 py-4 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>
-
+    </Modal>
-        {/* 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>
   )
 }