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

23
frontend/src/pages/TreeLibraryPage.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState, useCallback, useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { X, RotateCcw, Play, FileUp } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { treesApi } from '@/api/trees'
import { categoriesApi } from '@/api/categories'
import { foldersApi } from '@/api/folders'
@@ -283,13 +284,13 @@ export function TreeLibraryPage() {
</div>
{canCreateTrees && (
<div className="flex items-center gap-2">
<button
<Button
variant="secondary"
onClick={() => setShowImportModal(true)}
className="flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
>
<FileUp className="h-4 w-4" />
Import
</button>
</Button>
<CreateFlowDropdown
aiEnabled={aiEnabled}
@@ -315,15 +316,9 @@ export function TreeLibraryPage() {
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
<button
onClick={handleSearch}
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={handleSearch}>
Search
</button>
</Button>
</div>
<select
@@ -436,13 +431,13 @@ export function TreeLibraryPage() {
</p>
</div>
<div className="flex items-center gap-2">
<button
<Button
size="sm"
onClick={() => navigate(getSessionResumePath(s.tree_id, s.tree_snapshot?.tree_type), { state: { sessionId: s.id } })}
className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Play className="h-3.5 w-3.5" />
Resume
</button>
</Button>
<button
onClick={() => dismissSession(s.id)}
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"