feat: session sharing frontend (#76)
* feat: add session sharing types, API client, and utilities Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add SessionTimeline and ActionMenu reusable components SessionTimeline extracts timeline/checklist rendering from SessionDetailPage into a reusable component for both authenticated and public session views. ActionMenu provides a dropdown action menu with keyboard/click-outside dismiss. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add ShareSessionModal and integrate into SessionDetailPage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Share Progress popover to TreeNavigationPage Replace the single "Copy for Ticket" button with a "Share Progress" popover that offers three actions: Copy Progress Summary (existing PSA export flow), Copy Share Link (auto-creates account-only share if needed), and Manage Share Links (opens ShareSessionModal). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add public SharedSessionPage with tree preview Add the public-facing shared session page at /share/:shareToken that renders shared sessions without authentication. Includes error handling for 401 (redirect to login), 403 (access denied), 404 (not found), and 410 (expired). The page features a minimal header, session metadata, SessionTimeline component, and a new SharedSessionTreePreview component that renders the decision tree structure with the path taken highlighted. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add My Shares management page with nav link Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: address code review issues in session sharing - Add useCallback for loadShares in ShareSessionModal (React hook deps) - Use TreeStructure type instead of Record<string, unknown> for type safety - Fix login redirect format to match LoginPage's expected state shape Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: add focused tests for session sharing utilities and API Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: resolve tree_structure type compatibility for shared session views - Use TreeStructure & Record<string, unknown> intersection for JSONB flexibility - Add explicit cast in SharedSessionTreePreview for recursive node rendering Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add session sharing learnings to CLAUDE.md Add gotchas #12 (TreeStructure vs Tree types) and #13 (login redirect state format), note about npm run build strictness, and public route pattern to Common Tasks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: procedural editor UX improvements Add URL intake field type, fix variable name editing collapsing fields (index-based keys/updates), auto-generate variable names by field type, add section header as first-class step type, and simplify step editor with "More Options" collapsible for advanced fields. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: allow section_header step type in validation, improve tag input - Add 'section_header' to VALID_STEP_TYPES in backend validation so procedural flows with section headers can be published - Replace procedural editor's inline tag input with TagInput component (supports autocomplete, Tab, comma, semicolon, and paste splitting) - Add semicolon delimiter support to TagInput component Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: add type-aware routing for procedural flows Centralizes tree navigation routing via getTreeNavigatePath helper. Fixes all pages to route procedural sessions to /flows/:id/navigate instead of /trees/:id/navigate. Adds safety redirect in troubleshooting navigator and resume support in procedural navigator. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: remove unused index prop from IntakeFieldEditor Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #76.
This commit is contained in:
chihlasm
@@ -8,6 +8,7 @@ const FIELD_TYPE_OPTIONS: { value: IntakeFieldType; label: string }[] = [
|
||||
{ value: 'number', label: 'Number' },
|
||||
{ value: 'ip_address', label: 'IP Address' },
|
||||
{ value: 'email', label: 'Email' },
|
||||
{ value: 'url', label: 'URL' },
|
||||
{ value: 'select', label: 'Select (Dropdown)' },
|
||||
{ value: 'multi_select', label: 'Multi-Select' },
|
||||
{ value: 'checkbox', label: 'Checkbox' },
|
||||
|
||||
@@ -36,10 +36,10 @@ export function IntakeFormBuilder() {
|
||||
<div className="space-y-2">
|
||||
{intakeForm.map((field, index) => (
|
||||
<IntakeFieldEditor
|
||||
key={field.variable_name + '-' + index}
|
||||
key={`field-${index}-${field.display_order}`}
|
||||
field={field}
|
||||
onUpdate={(updates) => updateField(field.variable_name, updates)}
|
||||
onRemove={() => removeField(field.variable_name)}
|
||||
onUpdate={(updates) => updateField(index, updates)}
|
||||
onRemove={() => removeField(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ChevronUp, AlertTriangle, Clock, ExternalLink, CheckSquare, Terminal, Type } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { ChevronUp, ChevronDown, AlertTriangle, Clock, ExternalLink, CheckSquare, Terminal, Settings2 } from 'lucide-react'
|
||||
import type { ProceduralStep, StepContentType, IntakeFormField } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
@@ -18,6 +19,35 @@ interface StepEditorProps {
|
||||
}
|
||||
|
||||
export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVariables }: StepEditorProps) {
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
|
||||
// Section header steps get a minimal editor
|
||||
if (step.type === 'section_header') {
|
||||
return (
|
||||
<div className="glass-card rounded-xl border border-white/10 p-4">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-white/50">Edit Section Header</span>
|
||||
<button
|
||||
onClick={onCollapse}
|
||||
className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.title}
|
||||
onChange={(e) => onUpdate({ title: e.target.value })}
|
||||
placeholder="Section title"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="glass-card rounded-xl border border-white/10 p-4">
|
||||
{/* Header */}
|
||||
@@ -48,55 +78,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content type + Section header row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Content Type</label>
|
||||
<div className="flex gap-1">
|
||||
{CONTENT_TYPE_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => onUpdate({ content_type: opt.value })}
|
||||
className={cn(
|
||||
'rounded px-2 py-1 text-xs font-medium transition-colors',
|
||||
step.content_type === opt.value
|
||||
? 'bg-white/15 ' + opt.color
|
||||
: 'text-white/40 hover:bg-white/10 hover:text-white/60'
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<Clock className="h-3 w-3" />
|
||||
Est. Minutes
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={step.estimated_minutes || ''}
|
||||
onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
|
||||
placeholder="—"
|
||||
min={1}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Header */}
|
||||
<div>
|
||||
{/* Est. Minutes */}
|
||||
<div className="w-40">
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<Type className="h-3 w-3" />
|
||||
Section Header (optional)
|
||||
<Clock className="h-3 w-3" />
|
||||
Est. Minutes
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.section_header || ''}
|
||||
onChange={(e) => onUpdate({ section_header: e.target.value || undefined })}
|
||||
placeholder="e.g. Phase 2: AD Configuration"
|
||||
type="number"
|
||||
value={step.estimated_minutes || ''}
|
||||
onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
|
||||
placeholder="—"
|
||||
min={1}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
@@ -127,23 +120,6 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Warning text */}
|
||||
{(step.content_type === 'warning' || step.warning_text) && (
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-yellow-400/70">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Warning Text
|
||||
</label>
|
||||
<textarea
|
||||
value={step.warning_text || ''}
|
||||
onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
|
||||
placeholder="Caution: This will restart the service..."
|
||||
rows={2}
|
||||
className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Commands */}
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
@@ -159,74 +135,127 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Expected Outcome (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.expected_outcome || ''}
|
||||
onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
|
||||
placeholder="Server should respond with..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
{/* More Options toggle */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMore(!showMore)}
|
||||
className="flex items-center gap-1.5 text-xs text-white/40 hover:text-white/60"
|
||||
>
|
||||
<Settings2 className="h-3 w-3" />
|
||||
More Options
|
||||
{showMore ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
|
||||
</button>
|
||||
|
||||
{/* Verification */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<CheckSquare className="h-3 w-3" />
|
||||
Verification Prompt (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.verification_prompt || ''}
|
||||
onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
|
||||
placeholder="Confirm the role was installed"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Verification Type</label>
|
||||
<select
|
||||
value={step.verification_type || ''}
|
||||
onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
>
|
||||
<option value="">None</option>
|
||||
<option value="checkbox">Checkbox (confirm done)</option>
|
||||
<option value="text_input">Text input (enter value)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{showMore && (
|
||||
<div className="space-y-4 border-t border-white/[0.06] pt-4">
|
||||
{/* Content Type */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Content Type</label>
|
||||
<div className="flex gap-1">
|
||||
{CONTENT_TYPE_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => onUpdate({ content_type: opt.value })}
|
||||
className={cn(
|
||||
'rounded px-2 py-1 text-xs font-medium transition-colors',
|
||||
step.content_type === opt.value
|
||||
? 'bg-white/15 ' + opt.color
|
||||
: 'text-white/40 hover:bg-white/10 hover:text-white/60'
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reference URL + Notes toggle */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
Reference URL (optional)
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={step.reference_url || ''}
|
||||
onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
|
||||
placeholder="https://learn.microsoft.com/..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<label className="flex items-center gap-2 text-sm text-white/60">
|
||||
{/* Warning text */}
|
||||
{(step.content_type === 'warning' || step.warning_text) && (
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-yellow-400/70">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Warning Text
|
||||
</label>
|
||||
<textarea
|
||||
value={step.warning_text || ''}
|
||||
onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
|
||||
placeholder="Caution: This will restart the service..."
|
||||
rows={2}
|
||||
className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Expected Outcome (optional)</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={step.notes_enabled !== false}
|
||||
onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
|
||||
className="rounded border-white/20"
|
||||
type="text"
|
||||
value={step.expected_outcome || ''}
|
||||
onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
|
||||
placeholder="Server should respond with..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
Allow tech notes
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Verification */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<CheckSquare className="h-3 w-3" />
|
||||
Verification Prompt (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.verification_prompt || ''}
|
||||
onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
|
||||
placeholder="Confirm the role was installed"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Verification Type</label>
|
||||
<select
|
||||
value={step.verification_type || ''}
|
||||
onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
>
|
||||
<option value="">None</option>
|
||||
<option value="checkbox">Checkbox (confirm done)</option>
|
||||
<option value="text_input">Text input (enter value)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reference URL + Notes toggle */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
Reference URL (optional)
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={step.reference_url || ''}
|
||||
onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
|
||||
placeholder="https://learn.microsoft.com/..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<label className="flex items-center gap-2 text-sm text-white/60">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={step.notes_enabled !== false}
|
||||
onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
Allow tech notes
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield } from 'lucide-react'
|
||||
import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield, SeparatorHorizontal } from 'lucide-react'
|
||||
import type { StepContentType } from '@/types'
|
||||
import { StepEditor } from './StepEditor'
|
||||
import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
|
||||
@@ -18,11 +18,13 @@ export function StepList() {
|
||||
expandedStepId,
|
||||
setExpandedStepId,
|
||||
addStep,
|
||||
addSectionHeader,
|
||||
removeStep,
|
||||
updateStep,
|
||||
} = useProceduralEditorStore()
|
||||
|
||||
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
||||
let stepCounter = 0
|
||||
|
||||
return (
|
||||
<div className="glass-card rounded-2xl p-4 sm:p-6">
|
||||
@@ -34,19 +36,27 @@ export function StepList() {
|
||||
({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''})
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => addStep()}
|
||||
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Step
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => addSectionHeader()}
|
||||
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<SeparatorHorizontal className="h-3.5 w-3.5" />
|
||||
Add Section
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addStep()}
|
||||
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Step
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, index) => {
|
||||
{steps.map((step) => {
|
||||
if (step.type === 'procedure_end') {
|
||||
// Render end step as a simple footer
|
||||
return (
|
||||
<div
|
||||
key={step.id}
|
||||
@@ -65,20 +75,57 @@ export function StepList() {
|
||||
)
|
||||
}
|
||||
|
||||
// Section header rendering
|
||||
if (step.type === 'section_header') {
|
||||
const isExpanded = expandedStepId === step.id
|
||||
|
||||
if (isExpanded) {
|
||||
return (
|
||||
<div key={step.id}>
|
||||
<StepEditor
|
||||
step={step}
|
||||
stepNumber={0}
|
||||
onUpdate={(updates) => updateStep(step.id, updates)}
|
||||
onCollapse={() => setExpandedStepId(null)}
|
||||
availableVariables={intakeForm}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={step.id}
|
||||
className="group flex items-center gap-2 border-b border-white/[0.06] pb-1 pt-3"
|
||||
>
|
||||
<GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/20 group-hover:text-white/40" />
|
||||
<span
|
||||
className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-white/40 hover:text-white/60"
|
||||
onClick={() => setExpandedStepId(step.id)}
|
||||
>
|
||||
{step.title || 'Untitled Section'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeStep(step.id)}
|
||||
className="shrink-0 rounded p-1 text-white/30 opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Regular procedure step
|
||||
stepCounter++
|
||||
const stepNumber = stepCounter
|
||||
const isExpanded = expandedStepId === step.id
|
||||
const contentType = step.content_type || 'action'
|
||||
const config = contentTypeConfig[contentType]
|
||||
const Icon = config.icon
|
||||
const stepNumber = index + 1
|
||||
|
||||
if (isExpanded) {
|
||||
return (
|
||||
<div key={step.id}>
|
||||
{step.section_header && (
|
||||
<div className="mb-2 mt-4 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
|
||||
{step.section_header}
|
||||
</div>
|
||||
)}
|
||||
<StepEditor
|
||||
step={step}
|
||||
stepNumber={stepNumber}
|
||||
@@ -92,11 +139,6 @@ export function StepList() {
|
||||
|
||||
return (
|
||||
<div key={step.id}>
|
||||
{step.section_header && (
|
||||
<div className="mb-2 mt-4 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
|
||||
{step.section_header}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'group flex items-center gap-2 rounded-xl border border-white/[0.06] px-3 py-2.5 transition-colors',
|
||||
|
||||
Reference in New Issue
Block a user