Politur: Vollbild-Maximierungs-Modus (fixed overlay) fuer Gedaechnis-Dashboard hinzugefuegt (deaktiviert Box-Einschraenkung)

This commit is contained in:
Hitonabi
2026-07-09 12:29:22 +02:00
parent 2ed7100f90
commit dec4922171
7 changed files with 824 additions and 780 deletions
+45 -11
View File
@@ -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 &amp; 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 &amp; 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">