chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add dark mode, export preview, and keyboard navigation

Browse Source 
- Add theme store with light/dark/system modes and ThemeToggle component
- Prevent flash of wrong theme on initial load via inline script
- Add ExportPreviewModal for previewing session exports before download
- Add copy-to-clipboard functionality to session export
- Implement keyboard shortcuts for tree navigation (1-9 options, Esc back, Enter continue)
- Display keyboard hints in tree navigation UI
- Fix findNode to safely handle undefined structure parameter
- Update page title to "Apoklisis"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-01-28 21:19:57 -05:00
parent 4cee013733
commit 5a0dff1da9
9 changed files with 455 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/pages/SessionDetailPage.tsx
View File

@@ -1,6 +1,8 @@
import { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Copy, Check, Eye } from 'lucide-react'
import { sessionsApi } from '@/api'
import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
import type { Session, SessionExport } from '@/types'
import { cn } from '@/lib/utils'
@@ -12,6 +14,9 @@ export function SessionDetailPage() {
const [error, setError] = useState<string | null>(null)
const [isExporting, setIsExporting] = useState(false)
const [exportFormat, setExportFormat] = useState<'markdown' | 'text' | 'html'>('markdown')
const [exportContent, setExportContent] = useState<string | null>(null)
const [showPreview, setShowPreview] = useState(false)
const [copied, setCopied] = useState(false)
useEffect(() => {
if (id) {
@@ -33,27 +38,30 @@ export function SessionDetailPage() {
}
}
const handleExport = async () => {
if (!session) return
const getFilename = () => {
if (!session) return 'export.txt'
const ext = exportFormat === 'markdown' ? 'md' : exportFormat === 'html' ? 'html' : 'txt'
return `session-${session.ticket_number || session.id}.${ext}`
}
const fetchExportContent = async () => {
if (!session) return null
const options: SessionExport = {
format: exportFormat,
include_timestamps: true,
include_tree_info: true,
}
return await sessionsApi.export(session.id, options)
}
const handlePreview = async () => {
setIsExporting(true)
try {
const options: SessionExport = {
format: exportFormat,
include_timestamps: true,
include_tree_info: true,
const content = await fetchExportContent()
if (content) {
setExportContent(content)
setShowPreview(true)
}
const content = await sessionsApi.export(session.id, options)
// Create download
const blob = new Blob([content], { type: 'text/plain' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `session-${session.ticket_number || session.id}.${exportFormat === 'markdown' ? 'md' : exportFormat === 'html' ? 'html' : 'txt'}`
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
} catch (err) {
console.error('Export failed:', err)
} finally {
@@ -61,6 +69,35 @@ export function SessionDetailPage() {
}
}
const handleCopy = async () => {
setIsExporting(true)
try {
const content = await fetchExportContent()
if (content) {
await navigator.clipboard.writeText(content)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
} catch (err) {
console.error('Copy failed:', err)
} finally {
setIsExporting(false)
}
}
const handleDownload = () => {
if (!exportContent || !session) return
const blob = new Blob([exportContent], { type: 'text/plain' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = getFilename()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleString()
}
@@ -127,6 +164,7 @@ export function SessionDetailPage() {
<select
value={exportFormat}
onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
aria-label="Export format"
className={cn(
'rounded-md border border-input bg-background px-3 py-2 text-sm',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
@@ -137,14 +175,26 @@ export function SessionDetailPage() {
<option value="html">HTML</option>
</select>
<button
onClick={handleExport}
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(
'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
'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'
)}
>
{isExporting ? 'Exporting...' : 'Export'}
<Eye className="h-4 w-4" />
{isExporting ? 'Loading...' : 'Preview'}
</button>
</div>
</div>
@@ -199,6 +249,16 @@ export function SessionDetailPage() {
)}
</div>
</div>
{/* Export Preview Modal */}
<ExportPreviewModal
isOpen={showPreview}
onClose={() => setShowPreview(false)}
content={exportContent || ''}
filename={getFilename()}
format={exportFormat}
onDownload={handleDownload}
/>
</div>
)
}

80
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { useParams, useNavigate, useLocation } from 'react-router-dom'
import { treesApi, sessionsApi } from '@/api'
import { useTreeNavigationShortcuts } from '@/hooks/useKeyboardShortcuts'
import type { Tree, Session, DecisionRecord, TreeStructure } from '@/types'
import { cn } from '@/lib/utils'
@@ -80,7 +81,8 @@ export function TreeNavigationPage() {
}
}
const findNode = (nodeId: string, structure: TreeStructure = tree?.tree_structure!): TreeStructure | null => {
const findNode = (nodeId: string, structure?: TreeStructure): TreeStructure | null => {
if (!structure) return null
if (structure.id === nodeId) return structure
if (structure.children) {
for (const child of structure.children) {
@@ -91,15 +93,16 @@ export function TreeNavigationPage() {
return null
}
// Handler functions - defined before hook call to avoid temporal dead zone
const handleSelectOption = async (_optionId: string, optionLabel: string, nextNodeId: string) => {
if (!session || !tree) return
const currentNode = findNode(currentNodeId)
if (!currentNode) return
const node = findNode(currentNodeId, tree.tree_structure)
if (!node) return
const newDecision: DecisionRecord = {
node_id: currentNodeId,
question: currentNode.question || null,
question: node.question || null,
answer: optionLabel,
action_performed: null,
notes: notes || null,
@@ -130,26 +133,26 @@ export function TreeNavigationPage() {
const handleContinue = async (actionPerformed?: string) => {
if (!session || !tree) return
const currentNode = findNode(currentNodeId)
if (!currentNode || !currentNode.next_node_id) return
const node = findNode(currentNodeId, tree.tree_structure)
if (!node || !node.next_node_id) return
const newDecision: DecisionRecord = {
node_id: currentNodeId,
question: null,
answer: null,
action_performed: actionPerformed || currentNode.title || 'Action completed',
action_performed: actionPerformed || node.title || 'Action completed',
notes: notes || null,
automation_used: false,
timestamp: new Date().toISOString(),
attachments: [],
}
const newPath = [...pathTaken, currentNode.next_node_id]
const newPath = [...pathTaken, node.next_node_id]
const newDecisions = [...decisions, newDecision]
setPathTaken(newPath)
setDecisions(newDecisions)
setCurrentNodeId(currentNode.next_node_id)
setCurrentNodeId(node.next_node_id)
setNotes('')
try {
@@ -163,18 +166,18 @@ export function TreeNavigationPage() {
}
const handleComplete = async () => {
if (!session) return
if (!session || !tree) return
setIsCompleting(true)
setError(null)
try {
// Add final decision
const currentNode = findNode(currentNodeId)
if (currentNode) {
const node = findNode(currentNodeId, tree.tree_structure)
if (node) {
const finalDecision: DecisionRecord = {
node_id: currentNodeId,
question: null,
answer: null,
action_performed: currentNode.title || 'Session completed',
action_performed: node.title || 'Session completed',
notes: notes || null,
automation_used: false,
timestamp: new Date().toISOString(),
@@ -204,6 +207,31 @@ export function TreeNavigationPage() {
setCurrentNodeId(newPath[newPath.length - 1])
}
// Compute current node for keyboard shortcuts (must be before any returns for hooks rules)
const currentNode = tree ? findNode(currentNodeId, tree.tree_structure) : null
const currentOptions = currentNode?.options || []
// Keyboard shortcuts - must be called unconditionally (React hooks rules)
useTreeNavigationShortcuts({
onSelectOption: (index) => {
const option = currentOptions[index]
if (option && session && tree) {
handleSelectOption(option.id, option.label, option.next_node_id)
}
},
onGoBack: handleGoBack,
onContinue: () => {
if (currentNode?.type === 'action' && currentNode.next_node_id) {
handleContinue()
} else if (currentNode?.type === 'solution') {
handleComplete()
}
},
optionCount: currentOptions.length,
canGoBack: pathTaken.length > 1 && !showMetadataForm && !isLoading,
canContinue: !showMetadataForm && !isLoading && (currentNode?.type === 'action' || currentNode?.type === 'solution'),
})
if (isLoading) {
return (
<div className="flex h-64 items-center justify-center">
@@ -289,8 +317,6 @@ export function TreeNavigationPage() {
)
}
const currentNode = findNode(currentNodeId)
if (!currentNode) {
return (
<div className="container mx-auto px-4 py-8">
@@ -357,16 +383,22 @@ export function TreeNavigationPage() {
<p className="mb-4 text-sm text-muted-foreground">{currentNode.help_text}</p>
)}
<div className="mb-4 space-y-2">
{currentNode.options?.map((option) => (
{currentNode.options?.map((option, index) => (
<button
key={option.id}
onClick={() => handleSelectOption(option.id, option.label, option.next_node_id)}
className={cn(
'w-full rounded-md border border-input p-3 text-left transition-colors',
'hover:border-primary hover:bg-accent'
'hover:border-primary hover:bg-accent',
'flex items-center gap-3'
)}
>
{option.label}
{index < 9 && (
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-xs font-medium text-muted-foreground">
{index + 1}
</span>
)}
<span>{option.label}</span>
</button>
))}
</div>
@@ -476,6 +508,18 @@ export function TreeNavigationPage() {
← Go back
</button>
)}
{/* Keyboard Shortcuts Hint */}
<div className="mt-4 border-t border-border pt-3 text-xs text-muted-foreground">
<span className="font-medium">Keyboard:</span>{' '}
{currentNode.type === 'decision' && currentOptions.length > 0 && (
<span>1-{Math.min(currentOptions.length, 9)} select option</span>
)}
{pathTaken.length > 1 && <span>, Esc go back</span>}
{(currentNode.type === 'action' || currentNode.type === 'solution') && (
<span>, Enter {currentNode.type === 'solution' ? 'complete' : 'continue'}</span>
)}
</div>
</div>
</div>
)