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
144
frontend/src/components/step-library/StepCard.tsx
Normal file
144
frontend/src/components/step-library/StepCard.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { StepListItem } from '@/types/step'
|
||||
|
||||
interface StepCardProps {
|
||||
step: StepListItem
|
||||
onPreview: (step: StepListItem) => void
|
||||
onInsert: (step: StepListItem) => 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 StepCard({ step, onPreview, onInsert }: StepCardProps) {
|
||||
const Icon = stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] || HelpCircle
|
||||
const hasRating = step.rating_count > 0
|
||||
const visibleTags = step.tags.slice(0, 3)
|
||||
const remainingTags = step.tags.length - 3
|
||||
|
||||
return (
|
||||
<div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
|
||||
{/* Header */}
|
||||
<div className="mb-3 flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<div className="mb-1.5 flex items-center gap-2">
|
||||
{/* Step Type Badge */}
|
||||
<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>
|
||||
|
||||
{/* Featured Badge */}
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
|
||||
{/* Category */}
|
||||
{step.category_name && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs">📁</span>
|
||||
<span className="truncate">{step.category_name}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Star className="h-3.5 w-3.5" />
|
||||
{hasRating ? (
|
||||
<span>
|
||||
{step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
|
||||
</span>
|
||||
) : (
|
||||
<span className="italic">Not rated</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Usage Count */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<TrendingUp className="h-3.5 w-3.5" />
|
||||
<span>Used {step.usage_count} {step.usage_count === 1 ? 'time' : 'times'}</span>
|
||||
</div>
|
||||
|
||||
{/* Author & Date */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<User className="h-3.5 w-3.5" />
|
||||
<span className="truncate">{step.author_name || 'Unknown'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Calendar className="h-3.5 w-3.5" />
|
||||
<span>{new Date(step.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{step.tags.length > 0 && (
|
||||
<div className="mb-3 flex flex-wrap gap-1.5">
|
||||
{visibleTags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{remainingTags > 0 && (
|
||||
<span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
|
||||
+{remainingTags} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => onPreview(step)}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium',
|
||||
'hover:bg-accent hover:text-accent-foreground transition-colors'
|
||||
)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onInsert(step)}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground',
|
||||
'hover:bg-primary/90 transition-colors'
|
||||
)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Insert
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
364
frontend/src/components/step-library/StepLibraryBrowser.tsx
Normal file
364
frontend/src/components/step-library/StepLibraryBrowser.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { stepsApi, stepCategoriesApi } from '@/api'
|
||||
import { StepCard } from './StepCard'
|
||||
import { StepDetailModal } from './StepDetailModal'
|
||||
import type { Step, StepListItem, StepCategory, PopularTag, StepListParams } from '@/types/step'
|
||||
|
||||
interface StepLibraryBrowserProps {
|
||||
onInsert: (step: Step) => void
|
||||
onCreateNew?: () => void
|
||||
showCreateButton?: boolean
|
||||
}
|
||||
|
||||
export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false }: StepLibraryBrowserProps) {
|
||||
// State
|
||||
const [steps, setSteps] = useState<StepListItem[]>([])
|
||||
const [categories, setCategories] = useState<StepCategory[]>([])
|
||||
const [popularTags, setPopularTags] = useState<PopularTag[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Filters
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<string | undefined>()
|
||||
const [selectedStepType, setSelectedStepType] = useState<'decision' | 'action' | 'solution' | undefined>()
|
||||
const [minRating, setMinRating] = useState<number | undefined>()
|
||||
const [sortBy, setSortBy] = useState<'recent' | 'popular' | 'highest_rated' | 'most_used'>('recent')
|
||||
const [selectedTag, setSelectedTag] = useState<string | undefined>()
|
||||
|
||||
// UI state
|
||||
const [previewStepId, setPreviewStepId] = useState<string | null>(null)
|
||||
const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({})
|
||||
|
||||
// Load initial data
|
||||
useEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const [categoriesData, tagsData] = await Promise.all([
|
||||
stepCategoriesApi.list(),
|
||||
stepsApi.getPopularTags()
|
||||
])
|
||||
setCategories(categoriesData.filter(c => c.is_active))
|
||||
setPopularTags(tagsData.slice(0, 10)) // Show top 10 tags
|
||||
} catch (err) {
|
||||
console.error('Failed to load initial data:', err)
|
||||
setError('Failed to load categories and tags')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadInitialData()
|
||||
}, [])
|
||||
|
||||
// Load steps when filters change
|
||||
useEffect(() => {
|
||||
const loadSteps = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const params: StepListParams = {
|
||||
category_id: selectedCategoryId,
|
||||
step_type: selectedStepType,
|
||||
min_rating: minRating,
|
||||
sort_by: sortBy,
|
||||
tags: selectedTag ? [selectedTag] : undefined
|
||||
}
|
||||
|
||||
let stepsData: StepListItem[]
|
||||
if (searchQuery.trim()) {
|
||||
stepsData = await stepsApi.search(searchQuery)
|
||||
} else {
|
||||
stepsData = await stepsApi.list(params)
|
||||
}
|
||||
|
||||
setSteps(stepsData)
|
||||
} catch (err) {
|
||||
console.error('Failed to load steps:', err)
|
||||
setError('Failed to load steps')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadSteps()
|
||||
}, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag])
|
||||
|
||||
// Group steps by visibility
|
||||
const groupedSteps = useMemo(() => {
|
||||
return {
|
||||
private: steps.filter(s => s.visibility === 'private'),
|
||||
team: steps.filter(s => s.visibility === 'team'),
|
||||
public: steps.filter(s => s.visibility === 'public')
|
||||
}
|
||||
}, [steps])
|
||||
|
||||
const toggleSection = (section: string) => {
|
||||
setCollapsedSections(prev => ({ ...prev, [section]: !prev[section] }))
|
||||
}
|
||||
|
||||
const handlePreview = (step: StepListItem) => {
|
||||
setPreviewStepId(step.id)
|
||||
}
|
||||
|
||||
const handleInsertFromPreview = (step: Step) => {
|
||||
setPreviewStepId(null)
|
||||
onInsert(step)
|
||||
}
|
||||
|
||||
const handleInsertFromCard = (stepItem: StepListItem) => {
|
||||
// Need to fetch full step details for insert
|
||||
stepsApi.get(stepItem.id).then(onInsert)
|
||||
}
|
||||
|
||||
const handleTagClick = (tag: string) => {
|
||||
setSelectedTag(selectedTag === tag ? undefined : tag)
|
||||
}
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery('')
|
||||
setSelectedCategoryId(undefined)
|
||||
setSelectedStepType(undefined)
|
||||
setMinRating(undefined)
|
||||
setSelectedTag(undefined)
|
||||
}
|
||||
|
||||
const hasActiveFilters = searchQuery || selectedCategoryId || selectedStepType || minRating || selectedTag
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header - Filters */}
|
||||
<div className="space-y-4 border-b border-border 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" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search steps..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full rounded-md border border-input bg-background py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Row */}
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{/* Category Filter */}
|
||||
<select
|
||||
value={selectedCategoryId || ''}
|
||||
onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
|
||||
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">All Categories</option>
|
||||
{categories.map(cat => (
|
||||
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Type Filter */}
|
||||
<select
|
||||
value={selectedStepType || ''}
|
||||
onChange={(e) => setSelectedStepType((e.target.value as any) || undefined)}
|
||||
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="decision">Decision</option>
|
||||
<option value="action">Action</option>
|
||||
<option value="solution">Solution</option>
|
||||
</select>
|
||||
|
||||
{/* Min Rating Filter */}
|
||||
<select
|
||||
value={minRating?.toString() || ''}
|
||||
onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
|
||||
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">Any Rating</option>
|
||||
<option value="4">4+ Stars</option>
|
||||
<option value="3">3+ Stars</option>
|
||||
<option value="2">2+ Stars</option>
|
||||
</select>
|
||||
|
||||
{/* Sort By */}
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as any)}
|
||||
className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="recent">Most Recent</option>
|
||||
<option value="popular">Most Popular</option>
|
||||
<option value="highest_rated">Highest Rated</option>
|
||||
<option value="most_used">Most Used</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Popular Tags */}
|
||||
{popularTags.length > 0 && (
|
||||
<div>
|
||||
<div className="mb-2 text-xs font-medium text-muted-foreground">Popular Tags:</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{popularTags.map(tag => (
|
||||
<button
|
||||
key={tag.tag}
|
||||
onClick={() => handleTagClick(tag.tag)}
|
||||
className={cn(
|
||||
'rounded-full px-2.5 py-1 text-xs transition-colors',
|
||||
selectedTag === tag.tag
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
)}
|
||||
>
|
||||
{tag.tag} ({tag.count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Clear Filters */}
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="text-sm text-primary hover:underline"
|
||||
>
|
||||
Clear all filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Body - Step List */}
|
||||
<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" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
) : steps.length === 0 ? (
|
||||
<div className="rounded-lg border border-border bg-muted/30 p-12 text-center">
|
||||
<p className="mb-2 text-lg font-medium">No steps found</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{hasActiveFilters ? 'Try adjusting your filters' : 'Create your first step to get started!'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* My Steps */}
|
||||
{groupedSteps.private.length > 0 && (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggleSection('private')}
|
||||
className="mb-3 flex w-full items-center justify-between"
|
||||
>
|
||||
<h3 className="text-sm font-semibold">My Steps ({groupedSteps.private.length})</h3>
|
||||
{collapsedSections.private ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{!collapsedSections.private && (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{groupedSteps.private.map(step => (
|
||||
<StepCard
|
||||
key={step.id}
|
||||
step={step}
|
||||
onPreview={handlePreview}
|
||||
onInsert={handleInsertFromCard}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team Steps */}
|
||||
{groupedSteps.team.length > 0 && (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggleSection('team')}
|
||||
className="mb-3 flex w-full items-center justify-between"
|
||||
>
|
||||
<h3 className="text-sm font-semibold">Team Steps ({groupedSteps.team.length})</h3>
|
||||
{collapsedSections.team ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{!collapsedSections.team && (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{groupedSteps.team.map(step => (
|
||||
<StepCard
|
||||
key={step.id}
|
||||
step={step}
|
||||
onPreview={handlePreview}
|
||||
onInsert={handleInsertFromCard}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Community Steps */}
|
||||
{groupedSteps.public.length > 0 && (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggleSection('public')}
|
||||
className="mb-3 flex w-full items-center justify-between"
|
||||
>
|
||||
<h3 className="text-sm font-semibold">Community ({groupedSteps.public.length})</h3>
|
||||
{collapsedSections.public ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{!collapsedSections.public && (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{groupedSteps.public.map(step => (
|
||||
<StepCard
|
||||
key={step.id}
|
||||
step={step}
|
||||
onPreview={handlePreview}
|
||||
onInsert={handleInsertFromCard}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer - Optional Create Button */}
|
||||
{showCreateButton && onCreateNew && (
|
||||
<div className="border-t border-border p-4">
|
||||
<button
|
||||
onClick={onCreateNew}
|
||||
className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
+ Create New Step
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Preview Modal */}
|
||||
{previewStepId && (
|
||||
<StepDetailModal
|
||||
stepId={previewStepId}
|
||||
onClose={() => setPreviewStepId(null)}
|
||||
onInsert={handleInsertFromPreview}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user