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

2026-07-09 12:29:22 +02:00
parent 2ed7100f90
commit dec4922171
7 changed files with 824 additions and 780 deletions
@@ -7,8 +7,8 @@
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Mission Control 2.0</title>
-    <script type="module" crossorigin src="/assets/index-P6XXlxiQ.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CunuYLZu.css">
+    <script type="module" crossorigin src="/assets/index-CHmI2uuS.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DHhyicLg.css">
  </head>
  <body>
    <div id="root"></div>
@@ -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">