fix: convert IDE setup popover in Model Manager to viewport overlay modal to prevent clipping
This commit is contained in:
Hitonabi
+1
-1
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -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-2FQWjU7Q.js"></script>
|
<script type="module" crossorigin src="/assets/index-BUUZ5n0A.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-ChiXEUW1.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-Cs_NgMMZ.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -611,102 +611,101 @@ function Cockpit() {
|
|||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{/* FLOATING CLIENT SETUP POPOVER WINDOW */}
|
{/* CLIENT SETUP MODAL WINDOW */}
|
||||||
{activeClient && connectData && (
|
{activeClient && connectData && (
|
||||||
<div
|
<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
|
||||||
className="absolute z-30 md:w-96 w-[90%] rounded-2xl border border-border/80 bg-card/95 backdrop-blur-xl p-4 shadow-2xl space-y-3 flex flex-col justify-between"
|
<div className="w-full max-w-md rounded-2xl border border-border/80 bg-card p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-200 flex flex-col justify-between">
|
||||||
style={{
|
{/* Modal Header */}
|
||||||
left: "22%",
|
<div className="flex items-center justify-between border-b border-border/20 pb-2">
|
||||||
top: activeClient === "roocode" ? "5%"
|
<span className="text-xs font-bold uppercase tracking-wider text-primary">
|
||||||
: activeClient === "cursor" ? "20%"
|
{activeClient === "roocode" && "Roo Code Setup"}
|
||||||
: activeClient === "opencode" ? "40%"
|
{activeClient === "cursor" && "Cursor Setup"}
|
||||||
: activeClient === "zed" ? "55%"
|
{activeClient === "opencode" && "OpenCode Setup"}
|
||||||
: "65%"
|
{activeClient === "zed" && "Zed Setup"}
|
||||||
}}
|
{activeClient === "continue" && "Continue Setup"}
|
||||||
>
|
</span>
|
||||||
{/* Popover Header */}
|
<button
|
||||||
<div className="flex items-center justify-between border-b border-border/20 pb-2">
|
onClick={() => setActiveClient(null)}
|
||||||
<span className="text-[11px] font-bold uppercase tracking-wider text-primary">
|
className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer"
|
||||||
{activeClient === "roocode" && "Roo Code Setup"}
|
>
|
||||||
{activeClient === "cursor" && "Cursor Setup"}
|
<X className="h-4 w-4" />
|
||||||
{activeClient === "opencode" && "OpenCode Setup"}
|
</button>
|
||||||
{activeClient === "zed" && "Zed Setup"}
|
</div>
|
||||||
{activeClient === "continue" && "Continue Setup"}
|
|
||||||
</span>
|
{/* Modal Guide Steps */}
|
||||||
<button
|
<div className="text-xs text-muted-foreground leading-relaxed space-y-2">
|
||||||
onClick={() => setActiveClient(null)}
|
{activeClient === "roocode" && (
|
||||||
className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer"
|
<ul className="list-decimal pl-4 space-y-1">
|
||||||
|
<li>Suche in VS Code nach der Erweiterung <strong>Roo Code</strong> und installiere sie.</li>
|
||||||
|
<li>Wähle in den Roo Code Einstellungen: Provider: <strong>OpenAI Compatible</strong>.</li>
|
||||||
|
<li>Füge das untenstehende JSON-Snippet in die <code>settings.json</code> ein.</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
{activeClient === "cursor" && (
|
||||||
|
<ul className="list-decimal pl-4 space-y-1">
|
||||||
|
<li>Öffne Cursor Settings ➔ <strong>Models</strong>.</li>
|
||||||
|
<li>Deaktiviere Cloud-Modelle, klappe <strong>OpenAI API</strong> auf.</li>
|
||||||
|
<li>Trage die Base URL unten ein und aktiviere das Modell <strong>auto</strong>.</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
{activeClient === "opencode" && (
|
||||||
|
<ul className="list-decimal pl-4 space-y-1">
|
||||||
|
<li>Öffne die <code>opencode.jsonc</code> Konfigurationsdatei.</li>
|
||||||
|
<li>Ersetze den Provider-Eintrag unter <code>provider</code> mit dem Snippet unten.</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
{activeClient === "zed" && (
|
||||||
|
<ul className="list-decimal pl-4 space-y-1">
|
||||||
|
<li>Öffne die Zed Settings (<code>ctrl+,</code>).</li>
|
||||||
|
<li>Füge das untenstehende JSON-Segment unter <code>language_models</code> ein.</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
{activeClient === "continue" && (
|
||||||
|
<ul className="list-decimal pl-4 space-y-1">
|
||||||
|
<li>Klicke auf das Zahnrad-Symbol in der Continue-Erweiterung.</li>
|
||||||
|
<li>Füge den Gateway-Eintrag zum <code>models</code>-Array hinzu.</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Snippet box */}
|
||||||
|
{connectData.tools && (
|
||||||
|
<div className="relative rounded-xl border border-border/40 bg-black/40 overflow-hidden mt-1 shrink-0">
|
||||||
|
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border/20 bg-black/20">
|
||||||
|
<span className="text-[10px] font-mono text-muted-foreground">JSON Config</span>
|
||||||
|
<button
|
||||||
|
onClick={() => copySnippet(
|
||||||
|
activeClient === "roocode" ? connectData.tools.cline?.snippet :
|
||||||
|
activeClient === "cursor" ? connectData.tools.cursor?.snippet :
|
||||||
|
activeClient === "opencode" ? connectData.tools.opencode?.snippet :
|
||||||
|
activeClient === "zed" ? connectData.tools.zed?.snippet :
|
||||||
|
connectData.tools.continue?.snippet
|
||||||
|
)}
|
||||||
|
className="text-xs font-semibold text-primary hover:text-primary-foreground flex items-center gap-1 cursor-pointer"
|
||||||
|
>
|
||||||
|
{copied ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
|
||||||
|
<span>{copied ? "Kopiert" : "Kopieren"}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<pre className="p-3 max-h-48 overflow-y-auto text-xs font-mono text-cyan-200/90 whitespace-pre scrollbar-thin select-text">
|
||||||
|
<code>
|
||||||
|
{activeClient === "roocode" && connectData.tools.cline?.snippet}
|
||||||
|
{activeClient === "cursor" && connectData.tools.cursor?.snippet}
|
||||||
|
{activeClient === "opencode" && connectData.tools.opencode?.snippet}
|
||||||
|
{activeClient === "zed" && connectData.tools.zed?.snippet}
|
||||||
|
{activeClient === "continue" && connectData.tools.continue?.snippet}
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveClient(null)}
|
||||||
|
className="w-full h-9 rounded-lg bg-primary text-primary-foreground hover:opacity-90 font-semibold text-xs transition-opacity cursor-pointer mt-2"
|
||||||
>
|
>
|
||||||
<X className="h-3.5 w-3.5" />
|
Schließen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Popover Guide Steps */}
|
|
||||||
<div className="text-[10px] text-muted-foreground leading-relaxed space-y-2">
|
|
||||||
{activeClient === "roocode" && (
|
|
||||||
<ul className="list-decimal pl-4 space-y-1">
|
|
||||||
<li>Suche in VS Code nach der Erweiterung <strong>Roo Code</strong> und installiere sie.</li>
|
|
||||||
<li>Wähle in den Roo Code Einstellungen: Provider: <strong>OpenAI Compatible</strong>.</li>
|
|
||||||
<li>Füge das untenstehende JSON-Snippet in die <code>settings.json</code> ein.</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
{activeClient === "cursor" && (
|
|
||||||
<ul className="list-decimal pl-4 space-y-1">
|
|
||||||
<li>Öffne Cursor Settings ➔ <strong>Models</strong>.</li>
|
|
||||||
<li>Deaktiviere Cloud-Modelle, klappe <strong>OpenAI API</strong> auf.</li>
|
|
||||||
<li>Trage die Base URL unten ein und aktiviere das Modell <strong>auto</strong>.</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
{activeClient === "opencode" && (
|
|
||||||
<ul className="list-decimal pl-4 space-y-1">
|
|
||||||
<li>Öffne die <code>opencode.jsonc</code> Konfigurationsdatei.</li>
|
|
||||||
<li>Ersetze den Provider-Eintrag unter <code>provider</code> mit dem Snippet unten.</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
{activeClient === "zed" && (
|
|
||||||
<ul className="list-decimal pl-4 space-y-1">
|
|
||||||
<li>Öffne die Zed Settings (<code>ctrl+,</code>).</li>
|
|
||||||
<li>Füge das untenstehende JSON-Segment unter <code>language_models</code> ein.</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
{activeClient === "continue" && (
|
|
||||||
<ul className="list-decimal pl-4 space-y-1">
|
|
||||||
<li>Klicke auf das Zahnrad-Symbol in der Continue-Erweiterung.</li>
|
|
||||||
<li>Füge den Gateway-Eintrag zum <code>models</code>-Array hinzu.</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Snippet box */}
|
|
||||||
{connectData.tools && (
|
|
||||||
<div className="relative rounded-xl border border-border/40 bg-black/40 overflow-hidden mt-1 shrink-0">
|
|
||||||
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border/20 bg-black/20">
|
|
||||||
<span className="text-[8px] font-mono text-muted-foreground">JSON Config</span>
|
|
||||||
<button
|
|
||||||
onClick={() => copySnippet(
|
|
||||||
activeClient === "roocode" ? connectData.tools.cline?.snippet :
|
|
||||||
activeClient === "cursor" ? connectData.tools.cursor?.snippet :
|
|
||||||
activeClient === "opencode" ? connectData.tools.opencode?.snippet :
|
|
||||||
activeClient === "zed" ? connectData.tools.zed?.snippet :
|
|
||||||
connectData.tools.continue?.snippet
|
|
||||||
)}
|
|
||||||
className="text-[9px] font-semibold text-primary hover:text-primary-foreground flex items-center gap-1 cursor-pointer"
|
|
||||||
>
|
|
||||||
{copied ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
|
|
||||||
<span>{copied ? "Kopiert" : "Kopieren"}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<pre className="p-3 max-h-36 overflow-y-auto text-[9px] font-mono text-cyan-200/90 whitespace-pre scrollbar-thin select-text">
|
|
||||||
<code>
|
|
||||||
{activeClient === "roocode" && connectData.tools.cline?.snippet}
|
|
||||||
{activeClient === "cursor" && connectData.tools.cursor?.snippet}
|
|
||||||
{activeClient === "opencode" && connectData.tools.opencode?.snippet}
|
|
||||||
{activeClient === "zed" && connectData.tools.zed?.snippet}
|
|
||||||
{activeClient === "continue" && connectData.tools.continue?.snippet}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user