feat: implement My Trees, admin UI, rating modal, and bundle optimization (Issues #15, #18, #19, #31)
Frontend features: - My Trees personal dashboard with fork tracking (Issue #15) - Tree sharing UI with token generation and copy (Issue #16) - Draft tree badges and validation UI (Issue #25) - Save session as tree modal (Issue #17) - Rate/review modal with localStorage tracking (Issue #19) - Admin category management with drag-and-drop (Issue #18) - Bundle size optimization with code splitting (Issue #31) Components created: - MyTreesPage: Personal tree organization - AdminCategoriesPage: Category CRUD with @dnd-kit - ShareTreeModal: Tree sharing interface - SaveSessionAsTreeModal: Session conversion UI - StepRatingModal: Post-session rating with stars - StarRating: Reusable rating component - PageLoader: Loading fallback for lazy routes - CreateCategoryModal, EditCategoryModal: Admin modals Bundle optimization: - Reduced from 892 KB to 221 KB (75% reduction) - Dynamic imports for 9 heavy pages - Vendor chunk splitting for optimal caching - 6 separate vendor chunks (react, markdown, utils, dnd, icons, state) Dependencies added: - @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities API clients: - stepCategories: Full CRUD for admin - Enhanced sessions: saveAsTree endpoint - Enhanced trees: share, fork, canPublish endpoints Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
@@ -1,10 +1,13 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { Copy, Check, Eye } from 'lucide-react'
|
||||
import { sessionsApi } from '@/api'
|
||||
import { Copy, Check, Eye, Save } from 'lucide-react'
|
||||
import { sessionsApi, stepsApi } from '@/api'
|
||||
import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
|
||||
import { SaveSessionAsTreeModal } from '@/components/session/SaveSessionAsTreeModal'
|
||||
import { StepRatingModal } from '@/components/session/StepRatingModal'
|
||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||
import type { Session, SessionExport } from '@/types'
|
||||
import type { Session, SessionExport, SaveAsTreeRequest, Step } from '@/types'
|
||||
import { hasRatedSession, markSessionRated } from '@/lib/sessionRatings'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
|
||||
@@ -20,6 +23,11 @@ export function SessionDetailPage() {
|
||||
const [exportContent, setExportContent] = useState<string | null>(null)
|
||||
const [showPreview, setShowPreview] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [showSaveAsTreeModal, setShowSaveAsTreeModal] = useState(false)
|
||||
const [isSavingTree, setIsSavingTree] = useState(false)
|
||||
const [showRatingModal, setShowRatingModal] = useState(false)
|
||||
const [isSavingRatings, setIsSavingRatings] = useState(false)
|
||||
const [librarySteps, setLibrarySteps] = useState<Step[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
@@ -27,6 +35,36 @@ export function SessionDetailPage() {
|
||||
}
|
||||
}, [id])
|
||||
|
||||
// Auto-show rating modal for completed sessions with library steps
|
||||
useEffect(() => {
|
||||
if (!session || !session.completed_at) return
|
||||
|
||||
// Check if already rated
|
||||
if (hasRatedSession(session.id)) return
|
||||
|
||||
// Extract library steps from custom_steps
|
||||
const stepsFromLibrary = session.custom_steps?.filter(
|
||||
(customStep) => {
|
||||
// Check if step_data is a Step (from library) by checking if it has an id
|
||||
const stepData = customStep.step_data
|
||||
return 'id' in stepData && stepData.id
|
||||
}
|
||||
) || []
|
||||
|
||||
if (stepsFromLibrary.length === 0) return
|
||||
|
||||
// Extract the Step objects
|
||||
const steps = stepsFromLibrary.map((cs) => cs.step_data as Step)
|
||||
setLibrarySteps(steps)
|
||||
|
||||
// Show modal after 1 second delay
|
||||
const timer = setTimeout(() => {
|
||||
setShowRatingModal(true)
|
||||
}, 1000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [session])
|
||||
|
||||
const loadSession = async () => {
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
@@ -104,6 +142,58 @@ export function SessionDetailPage() {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const handleSaveAsTree = async (data: SaveAsTreeRequest) => {
|
||||
if (!session) return
|
||||
setIsSavingTree(true)
|
||||
try {
|
||||
const result = await sessionsApi.saveAsTree(session.id, data)
|
||||
toast.success(result.message)
|
||||
setShowSaveAsTreeModal(false)
|
||||
// Navigate to tree editor with the new tree
|
||||
navigate(`/trees/${result.tree_id}/edit`)
|
||||
} catch (err) {
|
||||
console.error('Failed to save session as tree:', err)
|
||||
toast.error('Failed to save session as tree')
|
||||
} finally {
|
||||
setIsSavingTree(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getDefaultTreeName = () => {
|
||||
if (!session) return ''
|
||||
const treeName = session.tree_snapshot?.name || 'Tree'
|
||||
const ticket = session.ticket_number ? ` - ${session.ticket_number}` : ''
|
||||
return `${treeName}${ticket}`
|
||||
}
|
||||
|
||||
const handleSubmitRatings = async (ratings: Map<string, { rating: number; helpful: boolean | null; review: string }>) => {
|
||||
if (!session) return
|
||||
setIsSavingRatings(true)
|
||||
try {
|
||||
// Submit each rating individually
|
||||
const ratingPromises = Array.from(ratings.entries()).map(([stepId, data]) =>
|
||||
stepsApi.rate(stepId, {
|
||||
rating: data.rating,
|
||||
review_text: data.review || undefined,
|
||||
was_helpful: data.helpful !== null ? data.helpful : undefined,
|
||||
session_id: session.id,
|
||||
is_verified_use: true
|
||||
})
|
||||
)
|
||||
|
||||
await Promise.all(ratingPromises)
|
||||
|
||||
toast.success(`Submitted ${ratings.size} rating${ratings.size > 1 ? 's' : ''}!`)
|
||||
markSessionRated(session.id)
|
||||
setShowRatingModal(false)
|
||||
} catch (err) {
|
||||
console.error('Failed to submit ratings:', err)
|
||||
toast.error('Failed to submit ratings')
|
||||
} finally {
|
||||
setIsSavingRatings(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString()
|
||||
}
|
||||
@@ -166,43 +256,61 @@ export function SessionDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export */}
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={exportFormat}
|
||||
onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
|
||||
aria-label="Export format"
|
||||
className={cn(
|
||||
'w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:w-auto',
|
||||
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
||||
)}
|
||||
>
|
||||
<option value="markdown">Markdown</option>
|
||||
<option value="text">Plain Text</option>
|
||||
<option value="html">HTML</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
disabled={isExporting}
|
||||
title="Copy to clipboard"
|
||||
className={cn(
|
||||
'rounded-md border border-input bg-background p-2 text-muted-foreground',
|
||||
'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
{copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePreview}
|
||||
disabled={isExporting}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
|
||||
'hover:bg-primary/90 disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
{isExporting ? 'Loading...' : 'Preview'}
|
||||
</button>
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
{/* Save as Tree - Only for completed sessions */}
|
||||
{session.completed_at && (
|
||||
<button
|
||||
onClick={() => setShowSaveAsTreeModal(true)}
|
||||
disabled={isSavingTree}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium',
|
||||
'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
Save as Tree
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Export Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={exportFormat}
|
||||
onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
|
||||
aria-label="Export format"
|
||||
className={cn(
|
||||
'w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:w-auto',
|
||||
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
||||
)}
|
||||
>
|
||||
<option value="markdown">Markdown</option>
|
||||
<option value="text">Plain Text</option>
|
||||
<option value="html">HTML</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
disabled={isExporting}
|
||||
title="Copy to clipboard"
|
||||
className={cn(
|
||||
'rounded-md border border-input bg-background p-2 text-muted-foreground',
|
||||
'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
{copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePreview}
|
||||
disabled={isExporting}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
|
||||
'hover:bg-primary/90 disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
{isExporting ? 'Loading...' : 'Preview'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -267,6 +375,24 @@ export function SessionDetailPage() {
|
||||
format={exportFormat}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
|
||||
{/* Save as Tree Modal */}
|
||||
<SaveSessionAsTreeModal
|
||||
isOpen={showSaveAsTreeModal}
|
||||
onClose={() => setShowSaveAsTreeModal(false)}
|
||||
onSave={handleSaveAsTree}
|
||||
defaultTreeName={getDefaultTreeName()}
|
||||
isSaving={isSavingTree}
|
||||
/>
|
||||
|
||||
{/* Step Rating Modal */}
|
||||
<StepRatingModal
|
||||
isOpen={showRatingModal}
|
||||
onClose={() => setShowRatingModal(false)}
|
||||
onSubmit={handleSubmitRatings}
|
||||
librarySteps={librarySteps}
|
||||
isSaving={isSavingRatings}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user