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
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