refactor: migrate remaining components to Design System v4
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
@@ -76,10 +76,10 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
const visibleReviews = showAllReviews ? allTextReviews : allTextReviews.slice(0, 3)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
|
||||
<div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-card border border-border rounded-2xl shadow-lg">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
|
||||
<div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between border-b border-border p-6 pb-4">
|
||||
<div className="flex items-start justify-between border-b border-[#1e2130] p-6 pb-4">
|
||||
{isLoading ? (
|
||||
<div className="h-6 w-48 animate-pulse rounded bg-accent" />
|
||||
) : error ? (
|
||||
@@ -97,7 +97,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
{step.step_type}
|
||||
</span>
|
||||
{step.category_name && (
|
||||
<span className="text-xs text-muted-foreground">{step.category_name}</span>
|
||||
<span className="text-xs text-[#848b9b]">{step.category_name}</span>
|
||||
)}
|
||||
{step.is_featured && (
|
||||
<span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
|
||||
@@ -110,12 +110,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-foreground">{step.title}</h2>
|
||||
<h2 className="text-xl font-semibold text-[#e2e5eb]">{step.title}</h2>
|
||||
</div>
|
||||
) : null}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
@@ -131,13 +131,13 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
<div className="h-4 w-5/6 animate-pulse rounded bg-accent" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className="text-sm text-muted-foreground">{error}</p>
|
||||
<p className="text-sm text-[#848b9b]">{error}</p>
|
||||
) : step ? (
|
||||
<div className="space-y-6">
|
||||
{/* Rating */}
|
||||
{hasRating && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold text-foreground">Rating</h3>
|
||||
<h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Rating</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
@@ -147,12 +147,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
'h-4 w-4',
|
||||
i <= Math.round(step.rating_average)
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-muted-foreground'
|
||||
: 'text-[#848b9b]'
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
<span className="text-sm text-[#848b9b]">
|
||||
{step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
|
||||
</span>
|
||||
</div>
|
||||
@@ -162,12 +162,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
{/* Tags */}
|
||||
{step.tags.length > 0 && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold text-foreground">Tags</h3>
|
||||
<h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Tags</h3>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{step.tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className="rounded-full bg-accent px-2 py-1 text-xs text-muted-foreground"
|
||||
className="rounded-full bg-accent px-2 py-1 text-xs text-[#848b9b]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -179,7 +179,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
{/* Instructions */}
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold">Instructions</h3>
|
||||
<div className="rounded-lg border border-border bg-accent/50 p-4">
|
||||
<div className="rounded-lg border border-[#1e2130] bg-accent/50 p-4">
|
||||
<MarkdownContent content={step.content.instructions} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,8 +187,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
{/* Help Text */}
|
||||
{step.content.help_text && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold text-foreground">Help Text</h3>
|
||||
<div className="rounded-lg border border-border bg-blue-400/5 p-4 text-sm">
|
||||
<h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Help Text</h3>
|
||||
<div className="rounded-lg border border-[#1e2130] bg-blue-400/5 p-4 text-sm">
|
||||
<MarkdownContent content={step.content.help_text} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,19 +197,19 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
{/* Commands */}
|
||||
{step.content.commands && step.content.commands.length > 0 && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold text-foreground">Commands</h3>
|
||||
<h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Commands</h3>
|
||||
<div className="space-y-2">
|
||||
{step.content.commands.map((cmd, index) => (
|
||||
<div key={index} className="group relative">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">{cmd.label}</span>
|
||||
<span className="text-xs font-medium text-[#848b9b]">{cmd.label}</span>
|
||||
<button
|
||||
onClick={() => handleCopyCommand(cmd.command, index)}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
|
||||
copiedCommandIndex === index
|
||||
? 'bg-emerald-400/10 text-emerald-400'
|
||||
: 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||
: 'bg-accent text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
|
||||
)}
|
||||
>
|
||||
{copiedCommandIndex === index ? (
|
||||
@@ -225,7 +225,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="overflow-x-auto rounded bg-card p-3 text-xs text-foreground">
|
||||
<pre className="overflow-x-auto rounded bg-[#14161d] p-3 text-xs text-[#e2e5eb]">
|
||||
<code>{cmd.command}</code>
|
||||
</pre>
|
||||
</div>
|
||||
@@ -238,11 +238,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
{visibleReviews.length > 0 && (
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-foreground">Reviews</h3>
|
||||
<h3 className="text-sm font-semibold text-[#e2e5eb]">Reviews</h3>
|
||||
{allTextReviews.length > 3 && (
|
||||
<button
|
||||
onClick={() => setShowAllReviews(v => !v)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground hover:underline"
|
||||
className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
|
||||
>
|
||||
{showAllReviews ? 'Show less' : `See all ${allTextReviews.length} reviews`}
|
||||
</button>
|
||||
@@ -250,11 +250,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{visibleReviews.map(review => (
|
||||
<div key={review.id} className="rounded-lg border border-border bg-accent/50 p-3">
|
||||
<div key={review.id} className="rounded-lg border border-[#1e2130] bg-accent/50 p-3">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<User className="h-3.5 w-3.5" />
|
||||
<span className="font-medium text-foreground">{review.user_name || 'Anonymous'}</span>
|
||||
<span className="font-medium text-[#e2e5eb]">{review.user_name || 'Anonymous'}</span>
|
||||
{review.verified_use && (
|
||||
<span className="rounded bg-emerald-400/10 px-1.5 py-0.5 text-xs text-emerald-400">
|
||||
Verified Use
|
||||
@@ -269,14 +269,14 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
'h-3 w-3',
|
||||
i <= review.rating
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-muted-foreground'
|
||||
: 'text-[#848b9b]'
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{review.review_text}</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<p className="text-sm text-[#848b9b]">{review.review_text}</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-[#848b9b]">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{new Date(review.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
@@ -287,28 +287,28 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="rounded-lg border border-border bg-accent/50 p-4">
|
||||
<div className="rounded-lg border border-[#1e2130] bg-accent/50 p-4">
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Author:</span>
|
||||
<span className="ml-2 font-medium text-foreground">{step.author_name || 'Unknown'}</span>
|
||||
<span className="text-[#848b9b]">Author:</span>
|
||||
<span className="ml-2 font-medium text-[#e2e5eb]">{step.author_name || 'Unknown'}</span>
|
||||
</div>
|
||||
{step.is_flow_synced && step.source_tree_name && (
|
||||
<div className="col-span-2 flex items-center gap-1.5 text-muted-foreground">
|
||||
<div className="col-span-2 flex items-center gap-1.5 text-[#848b9b]">
|
||||
<GitBranch className="h-3.5 w-3.5 shrink-0" />
|
||||
<span>Sourced from <span className="font-medium text-foreground">{step.source_tree_name}</span></span>
|
||||
<span>Sourced from <span className="font-medium text-[#e2e5eb]">{step.source_tree_name}</span></span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="text-muted-foreground">Usage Count:</span>
|
||||
<span className="ml-2 font-medium text-foreground">{step.usage_count}</span>
|
||||
<span className="text-[#848b9b]">Usage Count:</span>
|
||||
<span className="ml-2 font-medium text-[#e2e5eb]">{step.usage_count}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Created:</span>
|
||||
<span className="ml-2 font-medium text-foreground">{new Date(step.created_at).toLocaleDateString()}</span>
|
||||
<span className="text-[#848b9b]">Created:</span>
|
||||
<span className="ml-2 font-medium text-[#e2e5eb]">{new Date(step.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Visibility:</span>
|
||||
<span className="text-[#848b9b]">Visibility:</span>
|
||||
<span className="ml-2 font-medium capitalize">{step.visibility}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -318,7 +318,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
</div>
|
||||
|
||||
{/* Footer - Actions */}
|
||||
<div className="flex gap-2 border-t border-border p-4">
|
||||
<div className="flex gap-2 border-t border-[#1e2130] p-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onClose}
|
||||
|
||||
Reference in New Issue
Block a user