f931091b57
Page-split now creates independent sessions (no parent_session_id), parent marked as status='split' and hidden from list. Navigation uses useSearchParams for URL-based step tracking (browser back/forward works). page.tsx reduced from 684 to 443 lines via usePipelineNavigation hook. Box sub-sessions (column detection) remain unchanged. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import type { SubSession } from '@/app/(admin)/ai/ocr-pipeline/types'
|
|
|
|
interface BoxSessionTabsProps {
|
|
parentSessionId: string
|
|
subSessions: SubSession[]
|
|
activeSessionId: string
|
|
onSessionChange: (sessionId: string) => void
|
|
}
|
|
|
|
const STATUS_ICONS: Record<string, string> = {
|
|
pending: '\u23F3', // hourglass
|
|
processing: '\uD83D\uDD04', // arrows
|
|
completed: '\u2713', // checkmark
|
|
}
|
|
|
|
function getStatusIcon(sub: SubSession): string {
|
|
if (sub.status === 'completed' || (sub.current_step && sub.current_step >= 9)) return STATUS_ICONS.completed
|
|
if (sub.current_step && sub.current_step > 1) return STATUS_ICONS.processing
|
|
return STATUS_ICONS.pending
|
|
}
|
|
|
|
/** Tabs for box sub-sessions (from column detection zone_type='box'). */
|
|
export function BoxSessionTabs({ parentSessionId, subSessions, activeSessionId, onSessionChange }: BoxSessionTabsProps) {
|
|
if (subSessions.length === 0) return null
|
|
|
|
const isParentActive = activeSessionId === parentSessionId
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 px-1 py-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
|
|
<button
|
|
onClick={() => onSessionChange(parentSessionId)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
|
isParentActive
|
|
? 'bg-white dark:bg-gray-700 text-teal-700 dark:text-teal-400 shadow-sm ring-1 ring-teal-300 dark:ring-teal-600'
|
|
: 'text-gray-500 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50'
|
|
}`}
|
|
>
|
|
Hauptseite
|
|
</button>
|
|
|
|
<div className="w-px h-5 bg-gray-200 dark:bg-gray-700" />
|
|
|
|
{subSessions.map((sub) => {
|
|
const isActive = activeSessionId === sub.id
|
|
const icon = getStatusIcon(sub)
|
|
|
|
return (
|
|
<button
|
|
key={sub.id}
|
|
onClick={() => onSessionChange(sub.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-white dark:bg-gray-700 text-teal-700 dark:text-teal-400 shadow-sm ring-1 ring-teal-300 dark:ring-teal-600'
|
|
: 'text-gray-500 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50'
|
|
}`}
|
|
title={sub.name}
|
|
>
|
|
<span className="mr-1">{icon}</span>
|
|
Box {sub.box_index + 1}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|