feat(v3): add native directory picker for CWD fields via tauri-plugin-dialog

This commit is contained in:
Hibryda 2026-03-08 01:51:16 +01:00
parent 99282e833a
commit a64ab2e55f
6 changed files with 147 additions and 21 deletions

View file

@ -16,6 +16,7 @@
import { getSetting, setSetting } from '../../adapters/settings-bridge';
import { getCurrentTheme, setTheme } from '../../stores/theme.svelte';
import { THEME_LIST, getPalette, type ThemeId } from '../../styles/themes';
import { open as openDialog } from '@tauri-apps/plugin-dialog';
let activeGroupId = $derived(getActiveGroupId());
let activeGroup = $derived(getActiveGroup());
@ -176,6 +177,11 @@
}
}
async function browseDirectory(): Promise<string | null> {
const selected = await openDialog({ directory: true, multiple: false });
return typeof selected === 'string' ? selected : null;
}
// New project form
let newName = $state('');
let newCwd = $state('');
@ -385,12 +391,17 @@
</div>
<div class="setting-field">
<label for="default-cwd" class="setting-label">Working directory</label>
<input
id="default-cwd"
value={defaultCwd}
placeholder="~"
onchange={e => { defaultCwd = (e.target as HTMLInputElement).value; saveGlobalSetting('default_cwd', defaultCwd); }}
/>
<div class="input-with-browse">
<input
id="default-cwd"
value={defaultCwd}
placeholder="~"
onchange={e => { defaultCwd = (e.target as HTMLInputElement).value; saveGlobalSetting('default_cwd', defaultCwd); }}
/>
<button class="browse-btn" title="Browse..." onclick={async () => { const d = await browseDirectory(); if (d) { defaultCwd = d; saveGlobalSetting('default_cwd', d); } }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 7v13h18V7H3zm0-2h7l2 2h9v1H3V5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</div>
</div>
</section>
@ -434,10 +445,15 @@
</label>
<label class="project-field project-field-grow">
<span class="field-label">CWD</span>
<input
value={project.cwd}
onchange={e => updateProject(activeGroupId, project.id, { cwd: (e.target as HTMLInputElement).value })}
/>
<div class="input-with-browse">
<input
value={project.cwd}
onchange={e => updateProject(activeGroupId, project.id, { cwd: (e.target as HTMLInputElement).value })}
/>
<button class="browse-btn" title="Browse..." onclick={async () => { const d = await browseDirectory(); if (d) updateProject(activeGroupId, project.id, { cwd: d }); }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 7v13h18V7H3zm0-2h7l2 2h9v1H3V5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</label>
<label class="project-field">
<span class="field-label">Icon</span>
@ -464,7 +480,12 @@
{#if activeGroup.projects.length < 5}
<div class="add-form">
<input bind:value={newName} placeholder="Project name" />
<input bind:value={newCwd} placeholder="/path/to/project" />
<div class="input-with-browse add-form-path">
<input bind:value={newCwd} placeholder="/path/to/project" />
<button class="browse-btn" title="Browse..." onclick={async () => { const d = await browseDirectory(); if (d) newCwd = d; }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 7v13h18V7H3zm0-2h7l2 2h9v1H3V5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
<button class="btn-primary" onclick={handleAddProject} disabled={!newName.trim() || !newCwd.trim()}>
Add Project
</button>
@ -516,7 +537,8 @@
letter-spacing: 0.03em;
}
.setting-field > input {
.setting-field > input,
.setting-field .input-with-browse input {
padding: 6px 10px;
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
@ -835,4 +857,38 @@
font-size: 0.8rem;
font-style: italic;
}
.input-with-browse {
display: flex;
gap: 4px;
align-items: stretch;
}
.input-with-browse input {
flex: 1;
min-width: 0;
}
.add-form-path {
flex: 1;
min-width: 0;
}
.browse-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: 4px;
color: var(--ctp-subtext0);
cursor: pointer;
flex-shrink: 0;
}
.browse-btn:hover {
color: var(--ctp-text);
background: var(--ctp-surface1);
}
</style>