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

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,16 +145,16 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
return (
<div className="flex h-full flex-col">
{/* Header - Filters */}
<div className="space-y-4 border-b border-border p-4">
<div className="space-y-4 border-b border-[#1e2130] p-4">
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
<input
type="text"
placeholder="Search steps..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full rounded-md border border-border bg-card py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-[#1e2130] bg-[#14161d] py-2 pl-10 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
/>
</div>
@@ -165,7 +165,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
aria-label="Filter by category"
value={selectedCategoryId || ''}
onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
>
<option value="">All Categories</option>
{categories.map(cat => (
@@ -178,7 +178,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
aria-label="Filter by step type"
value={selectedStepType || ''}
onChange={(e) => setSelectedStepType((e.target.value as 'decision' | 'action' | 'solution') || undefined)}
className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
>
<option value="">All Types</option>
<option value="decision">Decision</option>
@@ -191,7 +191,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
aria-label="Filter by minimum rating"
value={minRating?.toString() || ''}
onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
>
<option value="">Any Rating</option>
<option value="4">4+ Stars</option>
@@ -204,7 +204,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
aria-label="Sort steps by"
value={sortBy}
onChange={(e) => setSortBy(e.target.value as 'recent' | 'popular' | 'highest_rated' | 'most_used')}
className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
>
<option value="recent">Most Recent</option>
<option value="popular">Most Popular</option>
@@ -216,7 +216,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Popular Tags */}
{popularTags.length > 0 && (
<div>
<div className="mb-2 text-xs font-medium text-muted-foreground">Popular Tags:</div>
<div className="mb-2 text-xs font-medium text-[#848b9b]">Popular Tags:</div>
<div className="flex flex-wrap gap-1.5">
{popularTags.map(tag => (
<button
@@ -225,8 +225,8 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
className={cn(
'rounded-full px-2.5 py-1 text-xs transition-colors',
selectedTag === tag.tag
? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
: 'bg-accent text-muted-foreground hover:bg-accent'
? 'bg-[#22d3ee] text-white'
: 'bg-accent text-[#848b9b] hover:bg-accent'
)}
>
{tag.tag} ({tag.count})
@@ -240,7 +240,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{hasActiveFilters && (
<button
onClick={clearFilters}
className="text-sm text-muted-foreground hover:text-foreground hover:underline"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
>
Clear all filters
</button>
@@ -251,7 +251,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
<div className="flex-1 overflow-y-auto p-4">
{isLoading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
</div>
) : error ? (
<div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center">
@@ -262,9 +262,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
</div>
) : steps.length === 0 ? (
hasActiveFilters ? (
<div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
<p className="mb-2 text-lg font-medium text-foreground">No steps found</p>
<p className="text-sm text-muted-foreground">Try adjusting your filters</p>
<div className="rounded-lg border border-[#1e2130] bg-accent/50 p-12 text-center">
<p className="mb-2 text-lg font-medium text-[#e2e5eb]">No steps found</p>
<p className="text-sm text-[#848b9b]">Try adjusting your filters</p>
</div>
) : (
<EmptyState
@@ -288,7 +288,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
onClick={() => toggleSection('private')}
className="mb-3 flex w-full items-center justify-between"
>
<h3 className="text-sm font-semibold text-foreground">My Steps ({groupedSteps.private.length})</h3>
<h3 className="text-sm font-semibold text-[#e2e5eb]">My Steps ({groupedSteps.private.length})</h3>
{collapsedSections.private ? (
<ChevronDown className="h-4 w-4" />
) : (
@@ -321,7 +321,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
onClick={() => toggleSection('team')}
className="mb-3 flex w-full items-center justify-between"
>
<h3 className="text-sm font-semibold text-foreground">Team Steps ({groupedSteps.team.length})</h3>
<h3 className="text-sm font-semibold text-[#e2e5eb]">Team Steps ({groupedSteps.team.length})</h3>
{collapsedSections.team ? (
<ChevronDown className="h-4 w-4" />
) : (
@@ -354,7 +354,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
onClick={() => toggleSection('public')}
className="mb-3 flex w-full items-center justify-between"
>
<h3 className="text-sm font-semibold text-foreground">Community ({groupedSteps.public.length})</h3>
<h3 className="text-sm font-semibold text-[#e2e5eb]">Community ({groupedSteps.public.length})</h3>
{collapsedSections.public ? (
<ChevronDown className="h-4 w-4" />
) : (
@@ -385,7 +385,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Footer - Optional Create Button */}
{showCreateButton && onCreateNew && (
<div className="border-t border-border p-4">
<div className="border-t border-[#1e2130] p-4">
<Button onClick={onCreateNew} className="w-full">
+ Create New Step
</Button>