feat: Add Step Library core UI components (Phase 2: B.4-B.6)
Implements browsable step library interface: Task B.4 - StepCard Component: - Card layout displaying step metadata - Step type badge (decision/action/solution) with icons - Category name and tags (max 3 visible + overflow) - Star rating display with count - Author, date, and usage count - Preview and Insert action buttons - Featured badge for highlighted steps Task B.5 - StepDetailModal: - Full-screen modal with scrollable content - Complete step details: title, type, category, tags - Markdown-rendered instructions and help text - Copyable command blocks with visual feedback - Rating breakdown with star display - Top 3 reviews with verified use badges - Author and metadata display - Insert Into Session and Cancel actions Task B.6 - StepLibraryBrowser: - Comprehensive search with debounced full-text query - Filter controls: category, type, min rating, sort by - Popular tags as clickable filter chips - Grouped sections: My Steps, Team Steps, Community - Collapsible sections with counts - Empty states and loading skeletons - Integrated preview modal - Optional Create New Step button - Clear filters functionality All components follow existing design patterns. Dark mode support via Tailwind classes. Build tested successfully. Related: Issue #10 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
326
frontend/src/components/step-library/StepDetailModal.tsx
Normal file
326
frontend/src/components/step-library/StepDetailModal.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X, Star, Copy, Check, HelpCircle, Zap, CheckCircle, User, Calendar } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { MarkdownContent } from '@/components/ui/MarkdownContent'
|
||||
import { stepsApi } from '@/api'
|
||||
import type { Step, Review } from '@/types/step'
|
||||
|
||||
interface StepDetailModalProps {
|
||||
stepId: string
|
||||
onClose: () => void
|
||||
onInsert: (step: Step) => void
|
||||
}
|
||||
|
||||
const stepTypeIcons = {
|
||||
decision: HelpCircle,
|
||||
action: Zap,
|
||||
solution: CheckCircle
|
||||
}
|
||||
|
||||
const stepTypeColors = {
|
||||
decision: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30',
|
||||
action: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400 border-yellow-500/30',
|
||||
solution: 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30'
|
||||
}
|
||||
|
||||
export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalProps) {
|
||||
const [step, setStep] = useState<Step | null>(null)
|
||||
const [reviews, setReviews] = useState<Review[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [copiedCommandIndex, setCopiedCommandIndex] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const loadStepDetails = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const [stepData, reviewsData] = await Promise.all([
|
||||
stepsApi.get(stepId),
|
||||
stepsApi.getReviews(stepId)
|
||||
])
|
||||
setStep(stepData)
|
||||
setReviews(reviewsData)
|
||||
} catch (err) {
|
||||
console.error('Failed to load step details:', err)
|
||||
setError('Failed to load step details')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadStepDetails()
|
||||
}, [stepId])
|
||||
|
||||
const handleCopyCommand = async (command: string, index: number) => {
|
||||
await navigator.clipboard.writeText(command)
|
||||
setCopiedCommandIndex(index)
|
||||
setTimeout(() => setCopiedCommandIndex(null), 2000)
|
||||
}
|
||||
|
||||
const handleInsert = () => {
|
||||
if (step) {
|
||||
onInsert(step)
|
||||
}
|
||||
}
|
||||
|
||||
const Icon = step ? stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] : HelpCircle
|
||||
const hasRating = step && step.rating_count > 0
|
||||
const topReviews = reviews.filter(r => r.review_text).slice(0, 3)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
|
||||
<div className="relative flex h-[90vh] w-full max-w-3xl flex-col rounded-lg border border-border bg-card shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between border-b border-border p-6 pb-4">
|
||||
{isLoading ? (
|
||||
<div className="h-6 w-48 animate-pulse rounded bg-muted" />
|
||||
) : error ? (
|
||||
<h2 className="text-lg font-semibold text-destructive">{error}</h2>
|
||||
) : step ? (
|
||||
<div className="flex-1">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded border px-2 py-0.5 text-xs font-medium',
|
||||
stepTypeColors[step.step_type as keyof typeof stepTypeColors]
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
{step.step_type}
|
||||
</span>
|
||||
{step.category_name && (
|
||||
<span className="text-xs text-muted-foreground">📁 {step.category_name}</span>
|
||||
)}
|
||||
{step.is_featured && (
|
||||
<span className="rounded bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
{step.is_verified && (
|
||||
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-600 dark:text-green-400">
|
||||
✓ Verified
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold">{step.title}</h2>
|
||||
</div>
|
||||
) : null}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-md p-1 hover:bg-accent"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body - Scrollable */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
<div className="h-4 w-full animate-pulse rounded bg-muted" />
|
||||
<div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
|
||||
<div className="h-4 w-5/6 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<p className="text-sm text-muted-foreground">{error}</p>
|
||||
) : step ? (
|
||||
<div className="space-y-6">
|
||||
{/* Rating */}
|
||||
{hasRating && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold">Rating</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
<Star
|
||||
key={i}
|
||||
className={cn(
|
||||
'h-4 w-4',
|
||||
i <= Math.round(step.rating_average)
|
||||
? 'fill-yellow-500 text-yellow-500'
|
||||
: 'text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{step.tags.length > 0 && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold">Tags</h3>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{step.tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className="rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Instructions */}
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold">Instructions</h3>
|
||||
<div className="rounded-lg border border-border bg-muted/30 p-4">
|
||||
<MarkdownContent content={step.content.instructions} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Help Text */}
|
||||
{step.content.help_text && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold">Help Text</h3>
|
||||
<div className="rounded-lg border border-border bg-blue-500/5 p-4 text-sm">
|
||||
<MarkdownContent content={step.content.help_text} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Commands */}
|
||||
{step.content.commands && step.content.commands.length > 0 && (
|
||||
<div>
|
||||
<h3 className="mb-2 text-sm font-semibold">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>
|
||||
<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-green-500/20 text-green-600 dark:text-green-400'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
)}
|
||||
>
|
||||
{copiedCommandIndex === index ? (
|
||||
<>
|
||||
<Check className="h-3 w-3" />
|
||||
Copied
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-3 w-3" />
|
||||
Copy
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="overflow-x-auto rounded bg-muted p-3 text-xs">
|
||||
<code>{cmd.command}</code>
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reviews */}
|
||||
{topReviews.length > 0 && (
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold">Reviews</h3>
|
||||
{reviews.length > 3 && (
|
||||
<button className="text-xs text-primary hover:underline">
|
||||
See all {reviews.length} reviews
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{topReviews.map(review => (
|
||||
<div key={review.id} className="rounded-lg border border-border bg-muted/30 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">{review.user_name || 'Anonymous'}</span>
|
||||
{review.verified_use && (
|
||||
<span className="rounded bg-green-500/20 px-1.5 py-0.5 text-xs text-green-600 dark:text-green-400">
|
||||
✓ Verified Use
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
<Star
|
||||
key={i}
|
||||
className={cn(
|
||||
'h-3 w-3',
|
||||
i <= review.rating
|
||||
? 'fill-yellow-500 text-yellow-500'
|
||||
: 'text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</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">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{new Date(review.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="rounded-lg border border-border bg-muted/30 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">{step.author_name || 'Unknown'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Usage Count:</span>
|
||||
<span className="ml-2 font-medium">{step.usage_count}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Created:</span>
|
||||
<span className="ml-2 font-medium">{new Date(step.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Visibility:</span>
|
||||
<span className="ml-2 font-medium capitalize">{step.visibility}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Footer - Actions */}
|
||||
<div className="flex gap-2 border-t border-border p-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleInsert}
|
||||
disabled={!step}
|
||||
className={cn(
|
||||
'flex-1 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
|
||||
'hover:bg-primary/90 disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
Insert Into Session
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user