refactor: enforce shared Modal component (#100)

* 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> * refactor: adopt shared Button component in 18 modal components Replace raw <button> elements with <Button> from ui/Button.tsx: - Primary buttons (bg-gradient-brand) → <Button variant="primary"> - Secondary buttons (border-border) → <Button variant="secondary"> - Ghost buttons → <Button variant="ghost"> - Loading states use loading prop instead of manual Loader2 spinner Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: adopt shared Button component in 20 page/component files Replace raw <button> elements with <Button> across pages and remaining components. 38 total files now use the shared Button component consistently. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 00:25:50 -05:00
parent d365c38b61
commit 94b428d168
38 changed files with 705 additions and 1067 deletions
--- a/frontend/src/components/library/ExportFlowModal.tsx
+++ b/frontend/src/components/library/ExportFlowModal.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { Download, X } from 'lucide-react'
 import { flowTransferApi } from '@/api/flowTransfer'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'

 interface ExportFlowModalProps {
  treeId: string
@@ -79,20 +80,16 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr

        {/* Footer */}
        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
            Cancel
-          </button>
-          <button
+          </Button>
+          <Button
            onClick={handleExport}
-            disabled={isExporting}
-            className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+            loading={isExporting}
          >
            <Download className="h-4 w-4" />
-            {isExporting ? 'Exporting…' : 'Download .rfflow'}
-          </button>
+            Download .rfflow
+          </Button>
        </div>
      </div>
    </div>
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -4,6 +4,7 @@ import { foldersApi } from '@/api/folders'
 import type { FolderListItem, FolderCreate, FolderUpdate } from '@/types'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'

 // Predefined color options
 const FOLDER_COLORS = [
@@ -259,24 +260,19 @@ export function FolderEditModal({

          {/* Actions */}
          <div className="flex justify-end gap-3">
-            <button
+            <Button
              type="button"
+              variant="secondary"
              onClick={onClose}
-              className={cn('rounded-md border border-border px-4 py-2 text-sm text-muted-foreground', 'hover:bg-accent hover:text-foreground')}
            >
              Cancel
-            </button>
-            <button
+            </Button>
+            <Button
              type="submit"
-              disabled={isSubmitting}
-              className={cn(
-                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                'hover:opacity-90',
-                'disabled:opacity-50'
-              )}
+              loading={isSubmitting}
            >
-              {isSubmitting ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Folder'}
-            </button>
+              {isEditMode ? 'Save Changes' : 'Create Folder'}
+            </Button>
          </div>
        </form>
      </div>
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -4,6 +4,7 @@ import { treesApi } from '@/api/trees'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/ui/Button'

 interface ForkModalProps {
  treeId: string
@@ -116,20 +117,20 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {

          {/* Footer */}
          <div className="flex justify-end gap-2 pt-1">
-            <button
+            <Button
              type="button"
+              variant="secondary"
              onClick={onClose}
-              className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Cancel
-            </button>
-            <button
+            </Button>
+            <Button
              type="submit"
-              disabled={isSubmitting || !name.trim()}
-              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={!name.trim()}
+              loading={isSubmitting}
            >
-              {isSubmitting ? 'Forking…' : 'Fork Flow'}
-            </button>
+              Fork Flow
+            </Button>
          </div>
        </form>
      </div>
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -7,6 +7,7 @@ import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { useNavigate } from 'react-router-dom'
 import { getTreeEditorPath } from '@/lib/routing'
+import { Button } from '@/components/ui/Button'

 interface ImportFlowModalProps {
  onClose: () => void
@@ -227,28 +228,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
        {/* Footer */}
        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
          {step === 'preview' && (
-            <button
+            <Button
+              variant="secondary"
              onClick={() => { setStep('pick'); setParsed(null); setParseError(null) }}
-              className="mr-auto rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="mr-auto"
            >
              Back
-            </button>
+            </Button>
          )}
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
+          <Button variant="secondary" onClick={onClose}>
            Cancel
-          </button>
+          </Button>
          {step === 'preview' && (
-            <button
+            <Button
              onClick={handleImport}
-              disabled={isImporting || !nameOverride.trim()}
-              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={!nameOverride.trim()}
+              loading={isImporting}
            >
              <FileUp className="h-4 w-4" />
-              {isImporting ? 'Importing…' : 'Import as Draft'}
-            </button>
+              Import as Draft
+            </Button>
          )}
        </div>
      </div>
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -4,6 +4,7 @@ import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
 import { treesApi } from '@/api/trees'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Button } from '@/components/ui/Button'

 interface ShareTreeModalProps {
  tree: TreeListItem
@@ -201,16 +202,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {

              {/* Generate Button */}
              {!activeShare && (
-                <button
+                <Button
                  onClick={handleGenerateLink}
-                  disabled={isGenerating}
-                  className={cn(
-                    'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                    'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
-                  )}
+                  loading={isGenerating}
+                  className="w-full"
                >
-                  {isGenerating ? 'Generating...' : 'Generate Share Link'}
-                </button>
+                  Generate Share Link
+                </Button>
              )}

              {/* Active Share Link */}
@@ -263,15 +261,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {

        {/* 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'
-            )}
-          >
+          <Button variant="secondary" onClick={onClose}>
            Close
-          </button>
+          </Button>
        </div>
      </div>
    </div>