Politur: Vollbild-Maximierungs-Modus (fixed overlay) fuer Gedaechnis-Dashboard hinzugefuegt (deaktiviert Box-Einschraenkung)
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import { useState, useMemo, lazy, Suspense } from "react"
|
||||
import { useState, useMemo, lazy, Suspense, useEffect } from "react"
|
||||
import {
|
||||
Trash2, Sparkles, User, Scroll, Shield, Clock, Search, Plus, BookOpen,
|
||||
Share2, List, MessagesSquare, X, Copy, Check, Terminal as TerminalIcon, Send,
|
||||
Maximize2, Minimize2
|
||||
} from "lucide-react"
|
||||
import { api, type DedupeResult } from "@/lib/api"
|
||||
import { useMemory, useMemoryGraph, useQueryClient } from "@/lib/queries"
|
||||
@@ -49,6 +50,7 @@ export function MemoryView() {
|
||||
const [view, setView] = useState<"liste" | "graph">("liste")
|
||||
const [showAdd, setShowAdd] = useState(false)
|
||||
const [selected, setSelected] = useState<string | null>(null)
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
|
||||
const qc = useQueryClient()
|
||||
const { showAlert, showConfirm, dialogElement } = useDialog()
|
||||
@@ -57,6 +59,18 @@ export function MemoryView() {
|
||||
const { data: graph } = useMemoryGraph(true)
|
||||
const error = itemsErr ? String(itemsErr) : ""
|
||||
|
||||
// Escape-Taste schließt den Vollbildmodus
|
||||
useEffect(() => {
|
||||
if (!isExpanded) return
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
setIsExpanded(false)
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [isExpanded])
|
||||
|
||||
const reloadMemory = () => {
|
||||
qc.invalidateQueries({ queryKey: ["memory"] })
|
||||
qc.invalidateQueries({ queryKey: ["memory-graph"] })
|
||||
@@ -201,7 +215,12 @@ export function MemoryView() {
|
||||
</div>
|
||||
) : (
|
||||
/* Der voll integrierte, schwebende Wissens-Hub */
|
||||
<div className="relative w-full h-[calc(100vh-8.5rem)] min-h-[620px] rounded-2xl border border-border/60 bg-[#030712] overflow-hidden flex flex-col lg:block">
|
||||
<div className={cn(
|
||||
"bg-[#030712] overflow-hidden transition-all duration-300 ease-in-out",
|
||||
isExpanded
|
||||
? "fixed inset-0 z-50 w-screen h-screen"
|
||||
: "relative w-full h-[calc(100vh-8.5rem)] min-h-[620px] rounded-2xl border border-border/60 flex flex-col lg:block"
|
||||
)}>
|
||||
|
||||
{/* 1. GraphView nimmt auf Desktop 100% des Hintergrunds ein */}
|
||||
<div className="absolute inset-0 z-0 hidden lg:block">
|
||||
@@ -215,19 +234,32 @@ export function MemoryView() {
|
||||
{/* 2. Schwebendes linkes Panel (Wissens-Liste) */}
|
||||
<div className={cn(
|
||||
"z-10 flex flex-col transition-all duration-300",
|
||||
"lg:absolute lg:left-4 lg:top-4 lg:bottom-4 lg:w-96 lg:rounded-xl lg:border lg:border-border/40 lg:bg-background/65 lg:backdrop-blur-md lg:p-4 lg:shadow-2xl lg:shadow-black/50 lg:h-[calc(100%-2rem)]",
|
||||
isExpanded
|
||||
? "lg:absolute lg:left-6 lg:top-6 lg:bottom-6 lg:w-96 lg:rounded-xl lg:border lg:border-border/40 lg:bg-background/65 lg:backdrop-blur-md lg:p-4 lg:shadow-2xl lg:shadow-black/50 lg:h-[calc(100%-3rem)]"
|
||||
: "lg:absolute lg:left-4 lg:top-4 lg:bottom-4 lg:w-96 lg:rounded-xl lg:border lg:border-border/40 lg:bg-background/65 lg:backdrop-blur-md lg:p-4 lg:shadow-2xl lg:shadow-black/50 lg:h-[calc(100%-2rem)]",
|
||||
"w-full h-full p-4 flex-1 lg:flex-none",
|
||||
view === "graph" && "hidden lg:flex"
|
||||
)}>
|
||||
{/* Header & Steuerung direkt im Panel */}
|
||||
<div className="space-y-3 mb-3 shrink-0">
|
||||
<div>
|
||||
<h1 className="text-xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
|
||||
Gedächtnis-Pool
|
||||
</h1>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed mt-0.5">
|
||||
IDEs & Gateway lesen und lernen hier per MCP.
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
|
||||
Gedächtnis-Pool
|
||||
</h1>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed mt-0.5">
|
||||
IDEs & Gateway lesen und lernen hier per MCP.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Maximize/Minimize Button für Desktop */}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1.5 rounded-lg border border-border/40 bg-card/45 hover:border-primary/50 text-muted-foreground hover:text-foreground transition-all cursor-pointer hidden lg:block"
|
||||
title={isExpanded ? "Vollbild verlassen (Esc)" : "In Vollbild maximieren"}
|
||||
>
|
||||
{isExpanded ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Statistiken (Chips) */}
|
||||
@@ -376,7 +408,9 @@ export function MemoryView() {
|
||||
{sel && (
|
||||
<div className={cn(
|
||||
"z-10 flex flex-col transition-all duration-300",
|
||||
"lg:absolute lg:right-4 lg:top-4 lg:bottom-4 lg:w-80 lg:rounded-xl lg:border lg:border-border/40 lg:bg-background/65 lg:backdrop-blur-md lg:p-4 lg:shadow-2xl lg:shadow-black/50 lg:h-[calc(100%-2rem)]",
|
||||
isExpanded
|
||||
? "lg:absolute lg:right-6 lg:top-6 lg:bottom-6 lg:w-80 lg:rounded-xl lg:border lg:border-border/40 lg:bg-background/65 lg:backdrop-blur-md lg:p-4 lg:shadow-2xl lg:shadow-black/50 lg:h-[calc(100%-3rem)]"
|
||||
: "lg:absolute lg:right-4 lg:top-4 lg:bottom-4 lg:w-80 lg:rounded-xl lg:border lg:border-border/40 lg:bg-background/65 lg:backdrop-blur-md lg:p-4 lg:shadow-2xl lg:shadow-black/50 lg:h-[calc(100%-2rem)]",
|
||||
"w-full p-4 border-t border-border/60 bg-card/45 shrink-0 flex flex-col"
|
||||
)}>
|
||||
<div className="flex items-center gap-2 mb-3 shrink-0">
|
||||
|
||||
Reference in New Issue
Block a user