fix: convert IDE setup popover in Model Manager to viewport overlay modal to prevent clipping
This commit is contained in:
Hitonabi
@@ -611,102 +611,101 @@ function Cockpit() {
|
||||
)
|
||||
})}
|
||||
|
||||
{/* FLOATING CLIENT SETUP POPOVER WINDOW */}
|
||||
{/* CLIENT SETUP MODAL WINDOW */}
|
||||
{activeClient && connectData && (
|
||||
<div
|
||||
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"
|
||||
style={{
|
||||
left: "22%",
|
||||
top: activeClient === "roocode" ? "5%"
|
||||
: activeClient === "cursor" ? "20%"
|
||||
: activeClient === "opencode" ? "40%"
|
||||
: activeClient === "zed" ? "55%"
|
||||
: "65%"
|
||||
}}
|
||||
>
|
||||
{/* Popover Header */}
|
||||
<div className="flex items-center justify-between border-b border-border/20 pb-2">
|
||||
<span className="text-[11px] font-bold uppercase tracking-wider text-primary">
|
||||
{activeClient === "roocode" && "Roo Code Setup"}
|
||||
{activeClient === "cursor" && "Cursor Setup"}
|
||||
{activeClient === "opencode" && "OpenCode Setup"}
|
||||
{activeClient === "zed" && "Zed Setup"}
|
||||
{activeClient === "continue" && "Continue Setup"}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setActiveClient(null)}
|
||||
className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<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">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between border-b border-border/20 pb-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-primary">
|
||||
{activeClient === "roocode" && "Roo Code Setup"}
|
||||
{activeClient === "cursor" && "Cursor Setup"}
|
||||
{activeClient === "opencode" && "OpenCode Setup"}
|
||||
{activeClient === "zed" && "Zed Setup"}
|
||||
{activeClient === "continue" && "Continue Setup"}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setActiveClient(null)}
|
||||
className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Guide Steps */}
|
||||
<div className="text-xs 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-[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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user