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
496
studio-v2/components/spatial-ui/FloatingMessage.tsx
Normal file
496
studio-v2/components/spatial-ui/FloatingMessage.tsx
Normal file
@@ -0,0 +1,496 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import { MOTION, SHADOWS, SHADOWS_DARK, LAYERS } from '@/lib/spatial-ui/depth-system'
|
||||
import { usePerformance } from '@/lib/spatial-ui/PerformanceContext'
|
||||
|
||||
/**
|
||||
* FloatingMessage - Cinematic message notification overlay
|
||||
*
|
||||
* Features:
|
||||
* - Slides in from right with spring animation
|
||||
* - Typewriter effect for message text
|
||||
* - Glassmorphism with depth
|
||||
* - Auto-dismiss with progress indicator
|
||||
* - Quick reply without leaving context
|
||||
* - Queue system for multiple messages
|
||||
*/
|
||||
|
||||
export interface FloatingMessageData {
|
||||
id: string
|
||||
senderName: string
|
||||
senderInitials: string
|
||||
senderAvatar?: string
|
||||
content: string
|
||||
timestamp: Date
|
||||
conversationId: string
|
||||
isGroup?: boolean
|
||||
priority?: 'normal' | 'high' | 'urgent'
|
||||
}
|
||||
|
||||
interface FloatingMessageProps {
|
||||
/** Auto-dismiss after X ms (0 = manual only) */
|
||||
autoDismissMs?: number
|
||||
/** Max messages in queue */
|
||||
maxQueue?: number
|
||||
/** Position on screen */
|
||||
position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
|
||||
/** Offset from edge */
|
||||
offset?: { x: number; y: number }
|
||||
/** Callback when message is opened */
|
||||
onOpen?: (message: FloatingMessageData) => void
|
||||
/** Callback when reply is sent */
|
||||
onReply?: (message: FloatingMessageData, replyText: string) => void
|
||||
/** Callback when dismissed */
|
||||
onDismiss?: (message: FloatingMessageData) => void
|
||||
}
|
||||
|
||||
// Demo messages for testing
|
||||
const DEMO_MESSAGES: Omit<FloatingMessageData, 'id' | 'timestamp'>[] = [
|
||||
{
|
||||
senderName: 'Familie Mueller',
|
||||
senderInitials: 'FM',
|
||||
content: 'Guten Tag! Lisa hatte heute leider Fieber und konnte nicht zur Schule kommen. Koennten Sie uns bitte die Hausaufgaben mitteilen?',
|
||||
conversationId: 'conv1',
|
||||
isGroup: false,
|
||||
priority: 'normal',
|
||||
},
|
||||
{
|
||||
senderName: 'Kollegium 7a',
|
||||
senderInitials: 'K7',
|
||||
content: 'Erinnerung: Morgen findet die Klassenkonferenz um 14:00 Uhr statt. Bitte alle Notenlisten vorbereiten.',
|
||||
conversationId: 'conv2',
|
||||
isGroup: true,
|
||||
priority: 'high',
|
||||
},
|
||||
{
|
||||
senderName: 'Schulleitung',
|
||||
senderInitials: 'SL',
|
||||
content: 'Wichtig: Die Abiturklausuren muessen bis Freitag korrigiert sein. Bei Fragen wenden Sie sich an das Sekretariat.',
|
||||
conversationId: 'conv3',
|
||||
isGroup: false,
|
||||
priority: 'urgent',
|
||||
},
|
||||
]
|
||||
|
||||
export function FloatingMessage({
|
||||
autoDismissMs = 8000,
|
||||
maxQueue = 5,
|
||||
position = 'top-right',
|
||||
offset = { x: 24, y: 80 },
|
||||
onOpen,
|
||||
onReply,
|
||||
onDismiss,
|
||||
}: FloatingMessageProps) {
|
||||
const { isDark } = useTheme()
|
||||
const { settings, reportAnimationStart, reportAnimationEnd } = usePerformance()
|
||||
|
||||
const [messageQueue, setMessageQueue] = useState<FloatingMessageData[]>([])
|
||||
const [currentMessage, setCurrentMessage] = useState<FloatingMessageData | null>(null)
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
const [isExiting, setIsExiting] = useState(false)
|
||||
const [displayedText, setDisplayedText] = useState('')
|
||||
const [isTyping, setIsTyping] = useState(false)
|
||||
const [isReplying, setIsReplying] = useState(false)
|
||||
const [replyText, setReplyText] = useState('')
|
||||
const [dismissProgress, setDismissProgress] = useState(0)
|
||||
|
||||
const typewriterRef = useRef<NodeJS.Timeout | null>(null)
|
||||
const dismissTimerRef = useRef<NodeJS.Timeout | null>(null)
|
||||
const progressRef = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
// Demo: Add messages periodically
|
||||
useEffect(() => {
|
||||
const addDemoMessage = (index: number) => {
|
||||
const demo = DEMO_MESSAGES[index % DEMO_MESSAGES.length]
|
||||
const message: FloatingMessageData = {
|
||||
...demo,
|
||||
id: `msg-${Date.now()}-${index}`,
|
||||
timestamp: new Date(),
|
||||
}
|
||||
addToQueue(message)
|
||||
}
|
||||
|
||||
// First message after 3 seconds
|
||||
const timer1 = setTimeout(() => addDemoMessage(0), 3000)
|
||||
// Second message after 15 seconds
|
||||
const timer2 = setTimeout(() => addDemoMessage(1), 15000)
|
||||
// Third message after 30 seconds
|
||||
const timer3 = setTimeout(() => addDemoMessage(2), 30000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer1)
|
||||
clearTimeout(timer2)
|
||||
clearTimeout(timer3)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Add message to queue
|
||||
const addToQueue = useCallback(
|
||||
(message: FloatingMessageData) => {
|
||||
setMessageQueue((prev) => {
|
||||
if (prev.length >= maxQueue) {
|
||||
return [...prev.slice(1), message]
|
||||
}
|
||||
return [...prev, message]
|
||||
})
|
||||
},
|
||||
[maxQueue]
|
||||
)
|
||||
|
||||
// Process queue
|
||||
useEffect(() => {
|
||||
if (!currentMessage && messageQueue.length > 0 && !isExiting) {
|
||||
const next = messageQueue[0]
|
||||
setMessageQueue((prev) => prev.slice(1))
|
||||
setCurrentMessage(next)
|
||||
setIsVisible(true)
|
||||
setDisplayedText('')
|
||||
setIsTyping(true)
|
||||
setDismissProgress(0)
|
||||
reportAnimationStart()
|
||||
}
|
||||
}, [currentMessage, messageQueue, isExiting, reportAnimationStart])
|
||||
|
||||
// Typewriter effect
|
||||
useEffect(() => {
|
||||
if (!currentMessage || !isTyping) return
|
||||
|
||||
const fullText = currentMessage.content
|
||||
let charIndex = 0
|
||||
|
||||
if (settings.enableTypewriter) {
|
||||
const speed = Math.round(25 * settings.animationSpeed)
|
||||
typewriterRef.current = setInterval(() => {
|
||||
charIndex++
|
||||
setDisplayedText(fullText.slice(0, charIndex))
|
||||
|
||||
if (charIndex >= fullText.length) {
|
||||
if (typewriterRef.current) clearInterval(typewriterRef.current)
|
||||
setIsTyping(false)
|
||||
}
|
||||
}, speed)
|
||||
} else {
|
||||
setDisplayedText(fullText)
|
||||
setIsTyping(false)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (typewriterRef.current) clearInterval(typewriterRef.current)
|
||||
}
|
||||
}, [currentMessage, isTyping, settings.enableTypewriter, settings.animationSpeed])
|
||||
|
||||
// Auto-dismiss timer with progress
|
||||
useEffect(() => {
|
||||
if (!currentMessage || autoDismissMs <= 0 || isTyping || isReplying) return
|
||||
|
||||
const startTime = Date.now()
|
||||
const updateProgress = () => {
|
||||
const elapsed = Date.now() - startTime
|
||||
const progress = Math.min(100, (elapsed / autoDismissMs) * 100)
|
||||
setDismissProgress(progress)
|
||||
|
||||
if (progress >= 100) {
|
||||
handleDismiss()
|
||||
}
|
||||
}
|
||||
|
||||
progressRef.current = setInterval(updateProgress, 50)
|
||||
dismissTimerRef.current = setTimeout(handleDismiss, autoDismissMs)
|
||||
|
||||
return () => {
|
||||
if (progressRef.current) clearInterval(progressRef.current)
|
||||
if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current)
|
||||
}
|
||||
}, [currentMessage, autoDismissMs, isTyping, isReplying])
|
||||
|
||||
// Dismiss handler
|
||||
const handleDismiss = useCallback(() => {
|
||||
if (progressRef.current) clearInterval(progressRef.current)
|
||||
if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current)
|
||||
|
||||
setIsExiting(true)
|
||||
const exitDuration = Math.round(MOTION.accelerate.duration * settings.animationSpeed)
|
||||
|
||||
setTimeout(() => {
|
||||
if (currentMessage) {
|
||||
onDismiss?.(currentMessage)
|
||||
}
|
||||
setCurrentMessage(null)
|
||||
setIsVisible(false)
|
||||
setIsExiting(false)
|
||||
setDisplayedText('')
|
||||
setReplyText('')
|
||||
setIsReplying(false)
|
||||
setDismissProgress(0)
|
||||
reportAnimationEnd()
|
||||
}, exitDuration)
|
||||
}, [currentMessage, onDismiss, reportAnimationEnd, settings.animationSpeed])
|
||||
|
||||
// Open conversation
|
||||
const handleOpen = useCallback(() => {
|
||||
if (currentMessage) {
|
||||
onOpen?.(currentMessage)
|
||||
handleDismiss()
|
||||
}
|
||||
}, [currentMessage, onOpen, handleDismiss])
|
||||
|
||||
// Start reply
|
||||
const handleReplyClick = useCallback(() => {
|
||||
setIsReplying(true)
|
||||
// Cancel auto-dismiss while replying
|
||||
if (progressRef.current) clearInterval(progressRef.current)
|
||||
if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current)
|
||||
}, [])
|
||||
|
||||
// Send reply
|
||||
const handleSendReply = useCallback(() => {
|
||||
if (!replyText.trim() || !currentMessage) return
|
||||
onReply?.(currentMessage, replyText)
|
||||
handleDismiss()
|
||||
}, [replyText, currentMessage, onReply, handleDismiss])
|
||||
|
||||
// Cancel reply
|
||||
const handleCancelReply = useCallback(() => {
|
||||
setIsReplying(false)
|
||||
setReplyText('')
|
||||
}, [])
|
||||
|
||||
// Keyboard handler
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSendReply()
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
if (isReplying) {
|
||||
handleCancelReply()
|
||||
} else {
|
||||
handleDismiss()
|
||||
}
|
||||
}
|
||||
},
|
||||
[handleSendReply, isReplying, handleCancelReply, handleDismiss]
|
||||
)
|
||||
|
||||
if (!isVisible) return null
|
||||
|
||||
// Position styles
|
||||
const positionStyles: React.CSSProperties = {
|
||||
position: 'fixed',
|
||||
zIndex: LAYERS.overlay.zIndex,
|
||||
...(position.includes('top') ? { top: offset.y } : { bottom: offset.y }),
|
||||
...(position.includes('right') ? { right: offset.x } : { left: offset.x }),
|
||||
}
|
||||
|
||||
// Animation styles
|
||||
const animationDuration = Math.round(MOTION.decelerate.duration * settings.animationSpeed)
|
||||
const exitDuration = Math.round(MOTION.accelerate.duration * settings.animationSpeed)
|
||||
|
||||
const transformOrigin = position.includes('right') ? 'right' : 'left'
|
||||
const slideDirection = position.includes('right') ? 'translateX(120%)' : 'translateX(-120%)'
|
||||
|
||||
// Priority color
|
||||
const priorityColor =
|
||||
currentMessage?.priority === 'urgent'
|
||||
? 'from-red-500 to-orange-500'
|
||||
: currentMessage?.priority === 'high'
|
||||
? 'from-amber-500 to-yellow-500'
|
||||
: 'from-purple-500 to-pink-500'
|
||||
|
||||
// Material styles - Ultra transparent for floating effect (4%)
|
||||
const cardBg = isDark
|
||||
? 'rgba(255, 255, 255, 0.04)'
|
||||
: 'rgba(255, 255, 255, 0.08)'
|
||||
|
||||
const shadow = '0 8px 32px rgba(0, 0, 0, 0.3)'
|
||||
const blur = settings.enableBlur ? `blur(${Math.round(24 * settings.blurIntensity)}px) saturate(180%)` : 'none'
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...positionStyles,
|
||||
transform: isExiting ? slideDirection : 'translateX(0)',
|
||||
opacity: isExiting ? 0 : 1,
|
||||
transition: `
|
||||
transform ${isExiting ? exitDuration : animationDuration}ms ${
|
||||
isExiting ? MOTION.accelerate.easing : MOTION.spring.easing
|
||||
},
|
||||
opacity ${isExiting ? exitDuration : animationDuration}ms ${MOTION.standard.easing}
|
||||
`,
|
||||
transformOrigin,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-96 max-w-[calc(100vw-3rem)] rounded-3xl overflow-hidden"
|
||||
style={{
|
||||
background: cardBg,
|
||||
backdropFilter: blur,
|
||||
WebkitBackdropFilter: blur,
|
||||
boxShadow: shadow,
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
}}
|
||||
>
|
||||
{/* Progress bar */}
|
||||
{autoDismissMs > 0 && !isReplying && (
|
||||
<div className="h-1 w-full bg-black/5 dark:bg-white/5">
|
||||
<div
|
||||
className={`h-full bg-gradient-to-r ${priorityColor} transition-all duration-100`}
|
||||
style={{ width: `${100 - dismissProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Avatar */}
|
||||
<div
|
||||
className={`w-12 h-12 rounded-2xl flex items-center justify-center text-lg font-semibold text-white bg-gradient-to-br ${priorityColor}`}
|
||||
style={{
|
||||
boxShadow: isDark
|
||||
? '0 4px 12px rgba(0,0,0,0.3)'
|
||||
: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{currentMessage?.senderInitials}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">
|
||||
{currentMessage?.senderName}
|
||||
</h3>
|
||||
<p className="text-xs text-white/50">
|
||||
{currentMessage?.isGroup ? 'Gruppenchat' : 'Direktnachricht'} • Jetzt
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="p-2 rounded-xl transition-all hover:bg-white/10 text-white/50"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Message content */}
|
||||
<div
|
||||
className="mb-4 p-4 rounded-2xl"
|
||||
style={{ background: 'rgba(255, 255, 255, 0.06)' }}
|
||||
>
|
||||
<p className="text-sm leading-relaxed text-white/90">
|
||||
{displayedText}
|
||||
{isTyping && (
|
||||
<span
|
||||
className={`inline-block w-0.5 h-4 ml-0.5 animate-pulse ${
|
||||
isDark ? 'bg-purple-400' : 'bg-purple-600'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Reply input */}
|
||||
{isReplying && (
|
||||
<div className="mb-4">
|
||||
<textarea
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Antwort schreiben..."
|
||||
autoFocus
|
||||
rows={2}
|
||||
className="w-full px-4 py-3 rounded-xl text-sm resize-none transition-all focus:outline-none focus:ring-2 bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-purple-500/50"
|
||||
/>
|
||||
<p className="text-xs mt-1.5 text-white/40">
|
||||
Enter zum Senden • Esc zum Abbrechen
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{isReplying ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handleSendReply}
|
||||
disabled={!replyText.trim()}
|
||||
className={`flex-1 py-2.5 rounded-xl font-medium transition-all disabled:opacity-50 bg-gradient-to-r ${priorityColor} text-white hover:shadow-lg`}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
||||
/>
|
||||
</svg>
|
||||
Senden
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelReply}
|
||||
className="px-4 py-2.5 rounded-xl font-medium transition-all bg-white/10 text-white/80 hover:bg-white/20"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={handleReplyClick}
|
||||
className={`flex-1 py-2.5 rounded-xl font-medium transition-all bg-gradient-to-r ${priorityColor} text-white hover:shadow-lg`}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
|
||||
/>
|
||||
</svg>
|
||||
Antworten
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleOpen}
|
||||
className="px-4 py-2.5 rounded-xl font-medium transition-all bg-white/10 text-white/80 hover:bg-white/20"
|
||||
>
|
||||
Oeffnen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="px-4 py-2.5 rounded-xl font-medium transition-all bg-white/10 text-white/80 hover:bg-white/20"
|
||||
>
|
||||
Spaeter
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Queue indicator */}
|
||||
{messageQueue.length > 0 && (
|
||||
<div
|
||||
className="px-5 py-3 text-center text-sm font-medium border-t bg-white/5 text-purple-300 border-white/10"
|
||||
>
|
||||
+{messageQueue.length} weitere Nachricht{messageQueue.length > 1 ? 'en' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user