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,102 +55,90 @@ 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 */}
-          {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>
-            </label>
-            <input
-              id="name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={isSaving}
-              maxLength={100}
-              placeholder="e.g., Network Troubleshooting"
-              required
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {name.length}/100 characters
-            </p>
+      }
+    >
+      <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>
+        )}
 
-          {/* Description Field */}
-          <div>
-            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
-              Description <span className="text-muted-foreground">(optional)</span>
-            </label>
-            <textarea
-              id="description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isSaving}
-              rows={3}
-              placeholder="Brief description of this category..."
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-          </div>
+        <div>
+          <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
+            Category Name <span className="text-red-400">*</span>
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isSaving}
+            maxLength={100}
+            placeholder="e.g., Network Troubleshooting"
+            required
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+          <p className="mt-1 text-xs text-muted-foreground">
+            {name.length}/100 characters
+          </p>
+        </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>
+        <div>
+          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+            Description <span className="text-muted-foreground">(optional)</span>
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            disabled={isSaving}
+            rows={3}
+            placeholder="Brief description of this category..."
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+        </div>
+      </form>
+    </Modal>
   )
 }

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,102 +67,90 @@ 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 */}
-          {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>
-            </label>
-            <input
-              id="edit-name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={isSaving}
-              maxLength={100}
-              placeholder="e.g., Network Troubleshooting"
-              required
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {name.length}/100 characters
-            </p>
+      }
+    >
+      <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>
+        )}
 
-          {/* 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>
-            </label>
-            <textarea
-              id="edit-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isSaving}
-              rows={3}
-              placeholder="Brief description of this category..."
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
-            />
-          </div>
+        <div>
+          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
+            Category Name <span className="text-red-400">*</span>
+          </label>
+          <input
+            id="edit-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isSaving}
+            maxLength={100}
+            placeholder="e.g., Network Troubleshooting"
+            required
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+          <p className="mt-1 text-xs text-muted-foreground">
+            {name.length}/100 characters
+          </p>
+        </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>
+        <div>
+          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
+            Description <span className="text-muted-foreground">(optional)</span>
+          </label>
+          <textarea
+            id="edit-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            disabled={isSaving}
+            rows={3}
+            placeholder="Brief description of this category..."
+            className={cn(
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+              'disabled:opacity-50'
+            )}
+          />
+        </div>
+      </form>
+    </Modal>
   )
 }