fix: Restore all files lost during destructive rebase
A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.
This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).
Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
212
studio-v2/components/InfoBox.tsx
Normal file
212
studio-v2/components/InfoBox.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
'use client'
|
||||
|
||||
import { ReactNode } from 'react'
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
|
||||
export type InfoBoxVariant = 'info' | 'tip' | 'warning' | 'success' | 'error'
|
||||
|
||||
interface InfoBoxProps {
|
||||
icon?: string
|
||||
title: string
|
||||
children: ReactNode
|
||||
variant?: InfoBoxVariant
|
||||
className?: string
|
||||
collapsible?: boolean
|
||||
defaultExpanded?: boolean
|
||||
}
|
||||
|
||||
export function InfoBox({
|
||||
icon,
|
||||
title,
|
||||
children,
|
||||
variant = 'info',
|
||||
className = '',
|
||||
collapsible = false,
|
||||
defaultExpanded = true
|
||||
}: InfoBoxProps) {
|
||||
const { isDark } = useTheme()
|
||||
|
||||
// Farben basierend auf Variante und Theme
|
||||
const getColors = () => {
|
||||
const variants = {
|
||||
info: {
|
||||
dark: 'bg-blue-500/10 border-blue-500/30 text-blue-100',
|
||||
light: 'bg-blue-50 border-blue-200 text-blue-800',
|
||||
icon: '💡'
|
||||
},
|
||||
tip: {
|
||||
dark: 'bg-green-500/10 border-green-500/30 text-green-100',
|
||||
light: 'bg-green-50 border-green-200 text-green-800',
|
||||
icon: '✨'
|
||||
},
|
||||
warning: {
|
||||
dark: 'bg-amber-500/10 border-amber-500/30 text-amber-100',
|
||||
light: 'bg-amber-50 border-amber-200 text-amber-800',
|
||||
icon: '⚠️'
|
||||
},
|
||||
success: {
|
||||
dark: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-100',
|
||||
light: 'bg-emerald-50 border-emerald-200 text-emerald-800',
|
||||
icon: '✅'
|
||||
},
|
||||
error: {
|
||||
dark: 'bg-red-500/10 border-red-500/30 text-red-100',
|
||||
light: 'bg-red-50 border-red-200 text-red-800',
|
||||
icon: '❌'
|
||||
}
|
||||
}
|
||||
return variants[variant]
|
||||
}
|
||||
|
||||
const colors = getColors()
|
||||
const displayIcon = icon || colors.icon
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-xl border ${isDark ? colors.dark : colors.light} ${className}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl flex-shrink-0">{displayIcon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium mb-1">{title}</h4>
|
||||
<div className={`text-sm ${isDark ? 'opacity-80' : 'opacity-90'}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Spezielle Varianten als eigene Komponenten für Convenience
|
||||
export function TipBox({ title, children, icon, className }: Omit<InfoBoxProps, 'variant'>) {
|
||||
return <InfoBox variant="tip" title={title} icon={icon} className={className}>{children}</InfoBox>
|
||||
}
|
||||
|
||||
export function WarningBox({ title, children, icon, className }: Omit<InfoBoxProps, 'variant'>) {
|
||||
return <InfoBox variant="warning" title={title} icon={icon} className={className}>{children}</InfoBox>
|
||||
}
|
||||
|
||||
export function SuccessBox({ title, children, icon, className }: Omit<InfoBoxProps, 'variant'>) {
|
||||
return <InfoBox variant="success" title={title} icon={icon} className={className}>{children}</InfoBox>
|
||||
}
|
||||
|
||||
// Step-Anleitung Box für Wizards
|
||||
interface StepBoxProps {
|
||||
step: number
|
||||
title: string
|
||||
children: ReactNode
|
||||
isActive?: boolean
|
||||
isCompleted?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function StepBox({
|
||||
step,
|
||||
title,
|
||||
children,
|
||||
isActive = false,
|
||||
isCompleted = false,
|
||||
className = ''
|
||||
}: StepBoxProps) {
|
||||
const { isDark } = useTheme()
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-xl border transition-all ${
|
||||
isCompleted
|
||||
? isDark
|
||||
? 'bg-green-500/10 border-green-500/30'
|
||||
: 'bg-green-50 border-green-200'
|
||||
: isActive
|
||||
? isDark
|
||||
? 'bg-blue-500/10 border-blue-500/30'
|
||||
: 'bg-blue-50 border-blue-200'
|
||||
: isDark
|
||||
? 'bg-white/5 border-white/10'
|
||||
: 'bg-slate-50 border-slate-200'
|
||||
} ${className}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 ${
|
||||
isCompleted
|
||||
? 'bg-green-500 text-white'
|
||||
: isActive
|
||||
? 'bg-blue-500 text-white'
|
||||
: isDark
|
||||
? 'bg-white/20 text-white/60'
|
||||
: 'bg-slate-200 text-slate-500'
|
||||
}`}>
|
||||
{isCompleted ? '✓' : step}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className={`font-medium mb-1 ${
|
||||
isCompleted || isActive
|
||||
? isDark ? 'text-white' : 'text-slate-900'
|
||||
: isDark ? 'text-white/60' : 'text-slate-500'
|
||||
}`}>
|
||||
{title}
|
||||
</h4>
|
||||
<div className={`text-sm ${
|
||||
isCompleted || isActive
|
||||
? isDark ? 'text-white/70' : 'text-slate-600'
|
||||
: isDark ? 'text-white/40' : 'text-slate-400'
|
||||
}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Feature-Highlight Box
|
||||
interface FeatureBoxProps {
|
||||
icon: string
|
||||
title: string
|
||||
description: string
|
||||
onClick?: () => void
|
||||
isSelected?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function FeatureBox({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
onClick,
|
||||
isSelected = false,
|
||||
className = ''
|
||||
}: FeatureBoxProps) {
|
||||
const { isDark } = useTheme()
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`w-full p-4 rounded-xl border text-left transition-all ${
|
||||
isSelected
|
||||
? isDark
|
||||
? 'bg-purple-500/20 border-purple-500/50 ring-2 ring-purple-500/30'
|
||||
: 'bg-purple-50 border-purple-300 ring-2 ring-purple-200'
|
||||
: isDark
|
||||
? 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
|
||||
: 'bg-white border-slate-200 hover:bg-slate-50 hover:border-slate-300'
|
||||
} ${className}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl">{icon}</span>
|
||||
<div>
|
||||
<h4 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{title}</h4>
|
||||
<p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{description}</p>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="ml-auto">
|
||||
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||||
isDark ? 'bg-purple-500' : 'bg-purple-500'
|
||||
}`}>
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user