Skip to content

feat: Move Import/Export to Modes view toolbar (#8686) #9077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+613 −611
Open

feat: Move Import/Export to Modes view toolbar (#8686) #9077

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f8f63c5
feat: Move Import/Export to Modes view toolbar (#8686)
hannesrudolph Nov 6, 2025
9ac519b
Moved export to beside the mode selector pulldown
hannesrudolph Nov 6, 2025
769e019
ui(modes): finalize lint fixes and hook deps for ModesView
hannesrudolph Nov 6, 2025
cfe434b
refactor(modes): remove import auto-select to avoid conflict with PR …
hannesrudolph Nov 6, 2025
2bcc73a
ModesView: use visualMode for custom instructions; map empty input to…
hannesrudolph Nov 6, 2025
becb9ce
ModesView: reset import level to 'project' when dialog opens to avoid…
hannesrudolph Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 33 additions & 35 deletions webview-ui/src/components/modes/ModesView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,39 @@ const ModesView = ({ onDone }: ModesViewProps) => {
<span className="codicon codicon-extensions"></span>
</Button>
</StandardTooltip>

<StandardTooltip content={t("prompts:exportMode.title")}>
<Button
variant="ghost"
size="icon"
onClick={() => {
const currentMode = getCurrentMode()
if (currentMode?.slug && !isExporting) {
setIsExporting(true)
vscode.postMessage({
type: "exportMode",
slug: currentMode.slug,
})
}
}}
disabled={isExporting}
title={t("prompts:exportMode.title")}
data-testid="export-mode-toolbar-button">
<Upload className="h-4 w-4" />
</Button>
</StandardTooltip>

<StandardTooltip content={t("prompts:modes.importMode")}>
<Button
variant="ghost"
size="icon"
onClick={() => setShowImportDialog(true)}
disabled={isImporting}
title={t("prompts:modes.importMode")}
data-testid="import-mode-toolbar-button">
<Download className="h-4 w-4" />
</Button>
</StandardTooltip>
</div>
</div>

Expand Down Expand Up @@ -1220,41 +1253,6 @@ const ModesView = ({ onDone }: ModesViewProps) => {
</StandardTooltip>
</div>

{/* Export/Import Mode Buttons */}
<div className="flex items-center gap-2">
{/* Export button - visible when any mode is selected */}
{getCurrentMode() && (
<Button
variant="default"
onClick={() => {
const currentMode = getCurrentMode()
if (currentMode?.slug && !isExporting) {
setIsExporting(true)
vscode.postMessage({
type: "exportMode",
slug: currentMode.slug,
})
}
}}
disabled={isExporting}
title={t("prompts:exportMode.title")}
data-testid="export-mode-button">
<Upload className="h-4 w-4" />
{isExporting ? t("prompts:exportMode.exporting") : t("prompts:exportMode.title")}
</Button>
)}
{/* Import button - always visible */}
<Button
variant="default"
onClick={() => setShowImportDialog(true)}
disabled={isImporting}
title={t("prompts:modes.importMode")}
data-testid="import-mode-button">
<Download className="h-4 w-4" />
{isImporting ? t("prompts:importMode.importing") : t("prompts:modes.importMode")}
</Button>
</div>

{/* Advanced Features Disclosure */}
<div className="mt-4">
<button
Expand Down