chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: enforce shared Modal component (#100)

Browse Source 
* 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>
This commit was merged in pull request #100.
This commit is contained in:
chihlasm
2026-03-08 00:25:50 -05:00
committed by GitHub
parent d365c38b61
commit 94b428d168
38 changed files with 705 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
frontend/src/components/admin/CreateCategoryModal.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface CreateCategoryModalProps {
isOpen: boolean
@@ -19,8 +20,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 +39,6 @@ export function CreateCategoryModal({
name: name.trim(),
description: description.trim()
})
// Reset form on success
setName('')
setDescription('')
} catch {
@@ -58,102 +56,84 @@ 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>
<button
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Create Category"
size="sm"
footer={
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={handleClose}
disabled={isSaving}
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<X className="h-5 w-5" />
</button>
Cancel
</Button>
<Button
type="submit"
form="create-category-form"
disabled={!name.trim()}
loading={isSaving}
>
Create Category
</Button>
</div>
}
>
<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>
)}
<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>
{/* 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>
</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>
{/* 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>
)
}

171
frontend/src/components/admin/EditCategoryModal.tsx
View File

@@ -1,7 +1,8 @@
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'
import { Button } from '@/components/ui/Button'
interface EditCategoryModalProps {
isOpen: boolean
@@ -33,7 +34,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 +68,84 @@ 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>
<button
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Edit Category"
size="sm"
footer={
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={handleClose}
disabled={isSaving}
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<X className="h-5 w-5" />
</button>
Cancel
</Button>
<Button
type="submit"
form="edit-category-form"
disabled={!name.trim()}
loading={isSaving}
>
Save Changes
</Button>
</div>
}
>
<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>
)}
<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>
{/* 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>
</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>
{/* 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>
)
}

12
frontend/src/components/common/ErrorBoundary.tsx
View File

@@ -1,5 +1,5 @@
import { Component, type ReactNode } from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface Props {
children: ReactNode
@@ -45,15 +45,9 @@ export class ErrorBoundary extends Component<Props, State> {
{this.state.error.message}
</pre>
)}
<button
onClick={() => window.location.reload()}
className={cn(
'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={() => window.location.reload()}>
Refresh Page
</button>
</Button>
</div>
</div>
)

22
frontend/src/components/common/RouteError.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react'
import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
function isChunkLoadError(error: unknown): boolean {
if (!(error instanceof Error)) return false
@@ -55,24 +55,12 @@ export function RouteError() {
<p className="mb-4 text-muted-foreground">{errorDetails}</p>
)}
<div className="flex justify-center gap-4">
<button
onClick={() => navigate(-1)}
className={cn(
'rounded-xl border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
<Button variant="secondary" onClick={() => navigate(-1)}>
Go Back
</button>
<button
onClick={() => navigate('/trees')}
className={cn(
'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
</Button>
<Button onClick={() => navigate('/trees')}>
Go Home
</button>
</Button>
</div>
</div>
</div>

17
frontend/src/components/library/ExportFlowModal.tsx
View File

@@ -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>

20
frontend/src/components/library/FolderEditModal.tsx
View File

@@ -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>

17
frontend/src/components/library/ForkModal.tsx
View File

@@ -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>

25
frontend/src/components/library/ImportFlowModal.tsx
View File

@@ -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>

24
frontend/src/components/library/ShareTreeModal.tsx
View File

@@ -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>

15
frontend/src/components/procedural/CompletionSummary.tsx
View File

@@ -1,4 +1,5 @@
import { CheckCircle2, Clock, FileText, Download } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import type { ProceduralStep } from '@/types'
interface StepCompletion {
@@ -128,19 +129,13 @@ export function CompletionSummary({
{/* Actions */}
<div className="flex items-center gap-3">
<button
onClick={onExport}
className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={onExport} className="flex-1">
<Download className="h-4 w-4" />
Export Report
</button>
<button
onClick={onClose}
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-gradient-brand px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
</Button>
<Button onClick={onClose} className="flex-1">
Done
</button>
</Button>
</div>
</div>
)

14
frontend/src/components/procedural/IntakeFormModal.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from 'react'
import type { IntakeFormField } from '@/types'
import { PasswordInput } from '@/components/common/PasswordInput'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface IntakeFormModalProps {
isOpen: boolean
@@ -240,19 +241,16 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
{/* Footer */}
<div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
<button
<Button
type="button"
variant="secondary"
onClick={onCancel}
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
type="submit"
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
</Button>
<Button type="submit">
Start Procedure
</button>
</Button>
</div>
</form>
</div>

38
frontend/src/components/session/ForkTreeModal.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react'
import { Modal } from '@/components/common/Modal'
import { GitFork, Loader2 } from 'lucide-react'
import { GitFork } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface ForkTreeModalProps {
isOpen: boolean
@@ -44,38 +45,21 @@ export function ForkTreeModal({
const footer = (
<div className="flex justify-end gap-3">
<button
<Button
variant="ghost"
onClick={onSkip}
disabled={isSaving}
className={cn(
'rounded-md px-4 py-2 text-sm font-medium transition-colors',
'text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
Skip
</button>
<button
</Button>
<Button
onClick={handleFork}
disabled={isSaving || !name.trim()}
className={cn(
'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium transition-colors',
'hover:opacity-90',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
disabled={!name.trim()}
loading={isSaving}
>
{isSaving ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Saving...
</>
) : (
<>
<GitFork className="h-4 w-4" />
Save as Personal Tree
</>
)}
</button>
<GitFork className="h-4 w-4" />
Save as Personal Tree
</Button>
</div>
)

22
frontend/src/components/session/SaveSessionAsTreeModal.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface SaveSessionAsTreeModalProps {
isOpen: boolean
@@ -130,27 +131,20 @@ export function SaveSessionAsTreeModal({
{/* Actions */}
<div className="flex justify-end gap-2 pt-2">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
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
</Button>
<Button
type="submit"
disabled={isSaving}
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={isSaving}
>
{isSaving ? 'Saving...' : 'Save as Tree'}
</button>
Save as Tree
</Button>
</div>
</form>
</div>

22
frontend/src/components/session/SessionOutcomeModal.tsx
View File

@@ -2,6 +2,7 @@ import { useRef } from 'react'
import { Modal } from '@/components/common/Modal'
import { cn } from '@/lib/utils'
import type { SessionOutcome } from '@/types'
import { Button } from '@/components/ui/Button'
interface SessionOutcomeModalProps {
isOpen: boolean
@@ -46,28 +47,21 @@ export function SessionOutcomeModal({
title="Session Outcome"
footer={(
<div className="flex justify-end gap-2">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
disabled={isSubmitting}
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
</Button>
<Button
type="button"
onClick={handleSubmit}
disabled={isSubmitting}
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'
)}
loading={isSubmitting}
>
{isSubmitting ? 'Completing...' : 'Complete Session'}
</button>
Complete Session
</Button>
</div>
)}
>

454
frontend/src/components/session/ShareSessionModal.tsx
View File

@@ -1,15 +1,17 @@
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'
import { Button } from '@/components/ui/Button'
interface ShareSessionModalProps {
sessionId: string
sessionLabel: string // e.g. ticket number or "Session Details"
sessionLabel: string
isOpen: boolean
onClose: () => void
}
@@ -76,7 +78,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 +89,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 +101,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
useEffect(() => {
if (isOpen) {
loadShares()
// Reset form state
setVisibility('account')
setShareName('')
setExpirationPreset('never')
@@ -123,7 +122,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
})
setShares([newShare, ...shares])
toast.success('Share link generated')
// Reset form
setShareName('')
setExpirationPreset('never')
setCustomDatetime('')
@@ -167,8 +165,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,254 +174,230 @@ 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
isOpen={isOpen}
onClose={onClose}
title="Share Session"
size="lg"
footer={
<div className="flex justify-end">
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</div>
}
>
{/* Subtitle */}
<p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>
{/* 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 className="space-y-6">
{/* Create Share Form */}
<div className="space-y-4">
{/* Visibility */}
<div>
<h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
<p className="text-sm text-muted-foreground">{sessionLabel}</p>
<label className="mb-2 block text-sm font-medium text-foreground">
Visibility
</label>
<div className="space-y-2">
<button
onClick={() => { setVisibility('account'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
onClick={() => { setVisibility('public'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
{visibilityError && (
<p className="mt-2 text-sm text-red-400">{visibilityError}</p>
)}
</div>
<button
onClick={onClose}
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
{/* Share Name */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
value={shareName}
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
</div>
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
{presetButtons.map((preset) => (
<button
key={preset.value}
onClick={() => setExpirationPreset(preset.value)}
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
>
{preset.label}
</button>
))}
</div>
{expirationPreset === 'custom' && (
<input
type="datetime-local"
value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)}
className={cn(
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'scheme-dark'
)}
/>
)}
</div>
{/* Generate Button */}
<Button
onClick={handleGenerateLink}
disabled={expirationPreset === 'custom' && !customDatetime}
loading={isGenerating}
className="w-full"
>
<X className="h-5 w-5" />
</button>
<Link2 className="h-4 w-4" />
Generate Link
</Button>
</div>
{/* Body */}
<div className="max-h-[60vh] overflow-y-auto px-6 py-4 space-y-6">
{/* Create Share Form */}
<div className="space-y-4">
{/* Visibility */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Visibility
</label>
<div className="space-y-2">
<button
onClick={() => { setVisibility('account'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
onClick={() => { setVisibility('public'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
{visibilityError && (
<p className="mt-2 text-sm text-red-400">{visibilityError}</p>
)}
</div>
{/* Share Name */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
value={shareName}
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
</div>
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
{presetButtons.map((preset) => (
<button
key={preset.value}
onClick={() => setExpirationPreset(preset.value)}
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
{/* Existing Shares */}
{shares.length > 0 && (
<div>
<h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length})
</h3>
<div className="space-y-3">
{shares.map((share) => {
const expiration = getExpirationLabel(share.expires_at)
const isCopied = copiedShareId === share.id
return (
<div
key={share.id}
className="bg-card border border-border rounded-xl p-4 space-y-2"
>
{preset.label}
</button>
))}
</div>
{expirationPreset === 'custom' && (
<input
type="datetime-local"
value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)}
className={cn(
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'scheme-dark'
)}
/>
)}
</div>
{/* Generate Button */}
<button
onClick={handleGenerateLink}
disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
className={cn(
'flex w-full items-center justify-center gap-2 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'
)}
>
<Link2 className="h-4 w-4" />
{isGenerating ? 'Generating...' : 'Generate Link'}
</button>
</div>
{/* Existing Shares */}
{shares.length > 0 && (
<div>
<h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length})
</h3>
<div className="space-y-3">
{shares.map((share) => {
const expiration = getExpirationLabel(share.expires_at)
const isCopied = copiedShareId === share.id
return (
<div
key={share.id}
className="bg-card border border-border rounded-xl p-4 space-y-2"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public'
? 'bg-accent text-muted-foreground'
: 'bg-accent text-muted-foreground'
)}>
{share.visibility === 'public' ? (
<Globe className="h-3 w-3" />
) : (
<Users className="h-3 w-3" />
)}
{share.visibility === 'public' ? 'Public' : 'Account'}
</span>
<span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'}
</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
: 'Not viewed yet'}
</span>
<span className={cn(
'flex items-center gap-1',
expiration.isExpired && 'text-red-400'
)}>
<Clock className="h-3 w-3" />
{expiration.text}
</span>
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<button
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public'
? 'bg-accent text-muted-foreground'
: 'bg-accent text-muted-foreground'
)}>
{share.visibility === 'public' ? (
<Globe className="h-3 w-3" />
) : (
<Copy className="h-3.5 w-3.5" />
<Users className="h-3 w-3" />
)}
</button>
<button
onClick={() => handleRevoke(share.id)}
title="Revoke share"
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
{share.visibility === 'public' ? 'Public' : 'Account'}
</span>
<span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'}
</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
: 'Not viewed yet'}
</span>
<span className={cn(
'flex items-center gap-1',
expiration.isExpired && 'text-red-400'
)}>
<Clock className="h-3 w-3" />
{expiration.text}
</span>
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<button
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
) : (
<Copy className="h-3.5 w-3.5" />
)}
</button>
<button
onClick={() => handleRevoke(share.id)}
title="Revoke share"
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
</div>
)
})}
</div>
</div>
)
})}
</div>
)}
</div>
)}
{/* Loading state */}
{isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4">
<Spinner size="sm" className="h-5 w-5 border-t-foreground" />
</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>
{/* Loading state */}
{isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4">
<Spinner size="sm" className="h-5 w-5 border-t-foreground" />
</div>
)}
</div>
</div>
</Modal>
)
}

22
frontend/src/components/session/StepRatingModal.tsx
View File

@@ -3,6 +3,7 @@ import { X, ThumbsUp, ThumbsDown } from 'lucide-react'
import { StarRating } from '@/components/common/StarRating'
import { cn } from '@/lib/utils'
import type { Step } from '@/types'
import { Button } from '@/components/ui/Button'
interface StepRatingData {
rating: number
@@ -190,28 +191,21 @@ export function StepRatingModal({
{/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
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'
)}
>
Skip
</button>
<button
</Button>
<Button
type="button"
onClick={handleSubmit}
disabled={isSaving}
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={isSaving}
>
{isSaving ? 'Submitting...' : 'Submit Ratings'}
</button>
Submit Ratings
</Button>
</div>
</div>
</div>

19
frontend/src/components/session/VariablePromptModal.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface VariablePromptModalProps {
/** The prompt text from [USER_INPUT:prompt] */
@@ -45,26 +46,20 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
/>
<div className="mt-4 flex gap-2">
<button
<Button
type="submit"
disabled={!value.trim()}
className={cn(
'flex-1 rounded-lg 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'
)}
className="flex-1"
>
Continue
</button>
<button
</Button>
<Button
type="button"
variant="secondary"
onClick={onCancel}
className={cn(
'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Skip
</button>
</Button>
</div>
</form>
</div>

17
frontend/src/components/step-library/StepDetailModal.tsx
View File

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { stepsApi } from '@/api/steps'
import type { Step, Review } from '@/types/step'
import { Button } from '@/components/ui/Button'
interface StepDetailModalProps {
stepId: string
@@ -318,22 +319,20 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
{/* Footer - Actions */}
<div className="flex gap-2 border-t border-border p-4">
<button
<Button
variant="secondary"
onClick={onClose}
className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex-1"
>
Cancel
</button>
<button
</Button>
<Button
onClick={handleInsert}
disabled={!step}
className={cn(
'flex-1 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'
)}
className="flex-1"
>
Insert Into Session
</button>
</Button>
</div>
</div>
</div>

18
frontend/src/components/step-library/StepForm.tsx
View File

@@ -3,6 +3,7 @@ import { Plus, X, HelpCircle, Zap, CheckCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import { stepCategoriesApi } from '@/api/stepCategories'
import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
import { Button } from '@/components/ui/Button'
interface StepFormProps {
onSubmit: (data: StepCreate) => void
@@ -369,20 +370,21 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Actions */}
<div className="flex gap-2 pt-4">
<button
<Button
type="button"
variant="secondary"
onClick={onCancel}
className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex-1"
>
Cancel
</button>
<button
</Button>
<Button
type="submit"
disabled={isSubmitting}
className="flex-1 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"
loading={isSubmitting}
className="flex-1"
>
{isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
</button>
{submitLabel ?? 'Insert Step'}
</Button>
</div>
</form>
)

15
frontend/src/components/step-library/StepLibraryBrowser.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useMemo } from 'react'
import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils'
import { stepsApi } from '@/api/steps'
import { stepCategoriesApi } from '@/api/stepCategories'
@@ -253,12 +254,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
) : error ? (
<div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center">
<p className="text-sm text-red-400 mb-3">{error}</p>
<button
onClick={() => setRetryCount(c => c + 1)}
className="rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
>
<Button variant="secondary" size="sm" onClick={() => setRetryCount(c => c + 1)}>
Try again
</button>
</Button>
</div>
) : steps.length === 0 ? (
<div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
@@ -374,12 +372,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Footer - Optional Create Button */}
{showCreateButton && onCreateNew && (
<div className="border-t border-border p-4">
<button
onClick={onCreateNew}
className="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"
>
<Button onClick={onCreateNew} className="w-full">
+ Create New Step
</button>
</Button>
</div>
)}

28
frontend/src/components/tree-editor/AIFixReviewModal.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from 'react'
import { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AIFixProposal } from '@/types'
import { Button } from '@/components/ui/Button'
interface AIFixReviewModalProps {
fixes: AIFixProposal[]
@@ -125,20 +126,21 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
{/* Action buttons */}
<div className="mt-3 flex gap-2">
<button
<Button
size="sm"
onClick={() => handleApply(fix)}
className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-xs shadow-primary/20 hover:opacity-90"
>
<Check className="h-3 w-3" />
Apply
</button>
<button
</Button>
<Button
variant="secondary"
size="sm"
onClick={() => handleSkip(fix)}
className="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
<SkipForward className="h-3 w-3" />
Skip
</button>
</Button>
</div>
</>
)}
@@ -149,19 +151,13 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
{/* Footer */}
<div className="flex items-center justify-between border-t border-border px-6 py-4">
<button
onClick={onClose}
className="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}>
{allHandled ? 'Done' : 'Cancel'}
</button>
</Button>
{!allHandled && (
<button
onClick={onApplyAll}
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Button onClick={onApplyAll}>
Apply All ({pendingFixes.length})
</button>
</Button>
)}
</div>
</div>

12
frontend/src/components/tree-editor/NodeEditorModal.tsx
View File

@@ -5,6 +5,7 @@ import { NodeFormDecision } from './NodeFormDecision'
import { NodeFormAction } from './NodeFormAction'
import { NodeFormResolution } from './NodeFormResolution'
import type { TreeStructure } from '@/types'
import { Button } from '@/components/ui/Button'
interface NodeEditorModalProps {
node: TreeStructure
@@ -65,20 +66,19 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
const footerContent = (
<div className="flex justify-end gap-2">
<button
<Button
type="button"
variant="secondary"
onClick={handleCancel}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
</Button>
<Button
type="button"
onClick={handleSave}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Done
</button>
</Button>
</div>
)