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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -7,8 +7,8 @@
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title> <title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-P6XXlxiQ.js"></script> <script type="module" crossorigin src="/assets/index-CHmI2uuS.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CunuYLZu.css"> <link rel="stylesheet" crossorigin href="/assets/index-DHhyicLg.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
+45 -11
View File
@@ -1,7 +1,8 @@
import { useState, useMemo, lazy, Suspense } from "react" import { useState, useMemo, lazy, Suspense, useEffect } from "react"
import { import {
Trash2, Sparkles, User, Scroll, Shield, Clock, Search, Plus, BookOpen, Trash2, Sparkles, User, Scroll, Shield, Clock, Search, Plus, BookOpen,
Share2, List, MessagesSquare, X, Copy, Check, Terminal as TerminalIcon, Send, Share2, List, MessagesSquare, X, Copy, Check, Terminal as TerminalIcon, Send,
Maximize2, Minimize2
} from "lucide-react" } from "lucide-react"
import { api, type DedupeResult } from "@/lib/api" import { api, type DedupeResult } from "@/lib/api"
import { useMemory, useMemoryGraph, useQueryClient } from "@/lib/queries" import { useMemory, useMemoryGraph, useQueryClient } from "@/lib/queries"
@@ -49,6 +50,7 @@ export function MemoryView() {
const [view, setView] = useState<"liste" | "graph">("liste") const [view, setView] = useState<"liste" | "graph">("liste")
const [showAdd, setShowAdd] = useState(false) const [showAdd, setShowAdd] = useState(false)
const [selected, setSelected] = useState<string | null>(null) const [selected, setSelected] = useState<string | null>(null)
const [isExpanded, setIsExpanded] = useState(false)
const qc = useQueryClient() const qc = useQueryClient()
const { showAlert, showConfirm, dialogElement } = useDialog() const { showAlert, showConfirm, dialogElement } = useDialog()
@@ -57,6 +59,18 @@ export function MemoryView() {
const { data: graph } = useMemoryGraph(true) const { data: graph } = useMemoryGraph(true)
const error = itemsErr ? String(itemsErr) : "" 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 = () => { const reloadMemory = () => {
qc.invalidateQueries({ queryKey: ["memory"] }) qc.invalidateQueries({ queryKey: ["memory"] })
qc.invalidateQueries({ queryKey: ["memory-graph"] }) qc.invalidateQueries({ queryKey: ["memory-graph"] })
@@ -201,7 +215,12 @@ export function MemoryView() {
</div> </div>
) : ( ) : (
/* Der voll integrierte, schwebende Wissens-Hub */ /* 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 */} {/* 1. GraphView nimmt auf Desktop 100% des Hintergrunds ein */}
<div className="absolute inset-0 z-0 hidden lg:block"> <div className="absolute inset-0 z-0 hidden lg:block">
@@ -215,19 +234,32 @@ export function MemoryView() {
{/* 2. Schwebendes linkes Panel (Wissens-Liste) */} {/* 2. Schwebendes linkes Panel (Wissens-Liste) */}
<div className={cn( <div className={cn(
"z-10 flex flex-col transition-all duration-300", "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", "w-full h-full p-4 flex-1 lg:flex-none",
view === "graph" && "hidden lg:flex" view === "graph" && "hidden lg:flex"
)}> )}>
{/* Header & Steuerung direkt im Panel */} {/* Header & Steuerung direkt im Panel */}
<div className="space-y-3 mb-3 shrink-0"> <div className="space-y-3 mb-3 shrink-0">
<div> <div className="flex items-center justify-between">
<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"> <div>
Gedächtnis-Pool <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">
</h1> Gedächtnis-Pool
<p className="text-[11px] text-muted-foreground leading-relaxed mt-0.5"> </h1>
IDEs &amp; Gateway lesen und lernen hier per MCP. <p className="text-[11px] text-muted-foreground leading-relaxed mt-0.5">
</p> 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> </div>
{/* Statistiken (Chips) */} {/* Statistiken (Chips) */}
@@ -376,7 +408,9 @@ export function MemoryView() {
{sel && ( {sel && (
<div className={cn( <div className={cn(
"z-10 flex flex-col transition-all duration-300", "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" "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"> <div className="flex items-center gap-2 mb-3 shrink-0">