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

69
frontend/src/pages/TreeEditorPage.tsx
View File

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react'
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
import { useStore } from 'zustand'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3, Settings, Download, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { getMonacoEditor } from '@/components/tree-editor/code-mode'
import { treesApi } from '@/api/trees'
import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -508,15 +509,9 @@ export function TreeEditorPage() {
<p className="mb-6 max-w-sm text-sm text-muted-foreground">
The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
</p>
<button
onClick={() => navigate('/trees')}
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'
)}
>
<Button onClick={() => navigate('/trees')}>
Back to Library
</button>
</Button>
</div>
)
}
@@ -535,24 +530,12 @@ export function TreeEditorPage() {
You have an unsaved draft from a previous session. Would you like to restore it?
</p>
<div className="flex gap-2">
<button
onClick={handleRestoreDraft}
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'
)}
>
<Button onClick={handleRestoreDraft} className="flex-1">
Restore Draft
</button>
<button
onClick={handleDiscardDraft}
className={cn(
'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
</Button>
<Button variant="secondary" onClick={handleDiscardDraft} className="flex-1">
Start Fresh
</button>
</Button>
</div>
</div>
</div>
@@ -567,24 +550,12 @@ export function TreeEditorPage() {
You have unsaved changes. Are you sure you want to leave?
</p>
<div className="flex gap-2">
<button
onClick={handleBlockerReset}
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'
)}
>
<Button onClick={handleBlockerReset} className="flex-1">
Stay
</button>
<button
onClick={handleBlockerProceed}
className={cn(
'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-red-400',
'hover:bg-accent'
)}
>
</Button>
<Button variant="destructive" onClick={handleBlockerProceed} className="flex-1">
Leave Without Saving
</button>
</Button>
</div>
</div>
</div>
@@ -787,32 +758,26 @@ export function TreeEditorPage() {
</button>
{/* Save Draft */}
<button
<Button
variant="secondary"
onClick={handleSaveDraft}
disabled={isSaving || !isDirty}
title="Save as draft (Ctrl+S when draft or has errors)"
className={cn(
'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<Save className="h-4 w-4" />
Save Draft
</button>
</Button>
{/* Publish */}
<button
<Button
onClick={handlePublish}
disabled={isSaving || hasBlockingErrors}
loading={isSaving}
title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
className={cn(
'flex items-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'
)}
>
<CheckCircle2 className="h-4 w-4" />
{isSaving ? 'Publishing...' : 'Publish'}
</button>
</Button>
</div>
</div>