394 lines
11 KiB
Svelte
394 lines
11 KiB
Svelte
<script>
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import * as App from '../../../wailsjs/go/api/App';
|
|
import Icon from '../ui/Icon.svelte';
|
|
import { i18n } from '../i18n/index.js';
|
|
|
|
let appSettings = {};
|
|
let recentVaults = [];
|
|
let error = '';
|
|
let loading = true;
|
|
let creating = false;
|
|
let opening = false;
|
|
let newVaultPath = '';
|
|
let openVaultPath = '';
|
|
let locale = i18n.getLocale();
|
|
const unsubscribeLocale = i18n.subscribe((nextLocale) => { locale = nextLocale; });
|
|
$: tr = ((activeLocale) => (key, params, fallback) => {
|
|
void activeLocale;
|
|
return i18n.t(key, params, fallback);
|
|
})(locale);
|
|
|
|
function reportError(key, fallback, details) {
|
|
console.warn('[VaultSelection] operation failed:', details);
|
|
return tr(key, undefined, fallback);
|
|
}
|
|
|
|
onDestroy(unsubscribeLocale);
|
|
|
|
onMount(async () => {
|
|
try {
|
|
appSettings = await App.GetAppSettings() || {};
|
|
recentVaults = appSettings.recentVaults || [];
|
|
} catch (e) {
|
|
console.error('[VaultSelection] load settings:', e);
|
|
}
|
|
loading = false;
|
|
});
|
|
|
|
async function browseNewVault() {
|
|
const path = await App.SelectDirectory();
|
|
if (path) {
|
|
newVaultPath = path;
|
|
}
|
|
}
|
|
|
|
async function browseOpenVault() {
|
|
const path = await App.SelectVaultForOpen();
|
|
if (path) {
|
|
openVaultPath = path;
|
|
}
|
|
}
|
|
|
|
async function createVault() {
|
|
error = '';
|
|
if (!newVaultPath.trim()) {
|
|
error = tr('vaultSelection.chooseNew');
|
|
return;
|
|
}
|
|
creating = true;
|
|
try {
|
|
const createErr = await App.CreateVault(newVaultPath.trim());
|
|
if (createErr) {
|
|
error = reportError('vaultSelection.createError', 'Could not create the vault. Please try again.', createErr);
|
|
creating = false;
|
|
return;
|
|
}
|
|
const openErr = await App.OpenVault(newVaultPath.trim());
|
|
if (openErr) {
|
|
error = reportError('vaultSelection.openError', 'Could not open the vault. Please try again.', openErr);
|
|
creating = false;
|
|
return;
|
|
}
|
|
const setErr = await App.SetCurrentVault(newVaultPath.trim());
|
|
if (setErr) {
|
|
console.warn('[VaultSelection] SetCurrentVault:', setErr);
|
|
}
|
|
window.dispatchEvent(new CustomEvent('verstak:vault-opened'));
|
|
} catch (e) {
|
|
error = reportError('vaultSelection.createError', 'Could not create the vault. Please try again.', e);
|
|
creating = false;
|
|
}
|
|
}
|
|
|
|
async function openExistingVault() {
|
|
error = '';
|
|
if (!openVaultPath.trim()) {
|
|
error = tr('vaultSelection.chooseExisting');
|
|
return;
|
|
}
|
|
opening = true;
|
|
try {
|
|
const openErr = await App.OpenVault(openVaultPath.trim());
|
|
if (openErr) {
|
|
error = reportError('vaultSelection.openError', 'Could not open the vault. Please try again.', openErr);
|
|
opening = false;
|
|
return;
|
|
}
|
|
const setErr = await App.SetCurrentVault(openVaultPath.trim());
|
|
if (setErr) {
|
|
console.warn('[VaultSelection] SetCurrentVault:', setErr);
|
|
}
|
|
window.dispatchEvent(new CustomEvent('verstak:vault-opened'));
|
|
} catch (e) {
|
|
error = reportError('vaultSelection.openError', 'Could not open the vault. Please try again.', e);
|
|
opening = false;
|
|
}
|
|
}
|
|
|
|
async function openRecent(path) {
|
|
error = '';
|
|
opening = true;
|
|
try {
|
|
const openErr = await App.OpenVault(path);
|
|
if (openErr) {
|
|
error = reportError('vaultSelection.openError', 'Could not open the vault. Please try again.', openErr);
|
|
opening = false;
|
|
return;
|
|
}
|
|
const setErr = await App.SetCurrentVault(path);
|
|
if (setErr) {
|
|
console.warn('[VaultSelection] SetCurrentVault:', setErr);
|
|
}
|
|
window.dispatchEvent(new CustomEvent('verstak:vault-opened'));
|
|
} catch (e) {
|
|
error = reportError('vaultSelection.openError', 'Could not open the vault. Please try again.', e);
|
|
opening = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if loading}
|
|
<div class="vault-selection">
|
|
<div class="vault-selection-inner">
|
|
<p class="loading-text">{tr('common.loading')}</p>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="vault-selection">
|
|
<div class="vault-selection-inner">
|
|
<div class="logo">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4ecca3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
<line x1="12" y1="11" x2="12" y2="17"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</svg>
|
|
<h1>Verstak</h1>
|
|
<p class="subtitle">{tr('vaultSelection.subtitle')}</p>
|
|
</div>
|
|
|
|
{#if error}
|
|
<div class="error-box">
|
|
<Icon name="warning" size={14} class="error-icon" />
|
|
<span class="error-text">{error}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="actions">
|
|
<div class="action-card">
|
|
<h3>{tr('vaultSelection.createTitle')}</h3>
|
|
<p class="hint">{tr('vaultSelection.createHint')}</p>
|
|
<div class="input-row">
|
|
<input
|
|
type="text"
|
|
bind:value={newVaultPath}
|
|
placeholder={tr('vaultSelection.pathPlaceholder')}
|
|
disabled={creating}
|
|
/>
|
|
<button class="btn-secondary" on:click={browseNewVault} type="button" disabled={creating}>
|
|
{tr('common.browse')}
|
|
</button>
|
|
</div>
|
|
<div class="button-row">
|
|
<button class="btn-primary" on:click={createVault} type="button" disabled={creating}>
|
|
{creating ? tr('vaultSelection.creating') : tr('vaultSelection.create')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-card">
|
|
<h3>{tr('vaultSelection.openTitle')}</h3>
|
|
<p class="hint">{tr('vaultSelection.openHint')}</p>
|
|
<div class="input-row">
|
|
<input
|
|
type="text"
|
|
bind:value={openVaultPath}
|
|
placeholder={tr('vaultSelection.pathPlaceholder')}
|
|
disabled={opening}
|
|
/>
|
|
<button class="btn-secondary" on:click={browseOpenVault} type="button" disabled={opening}>
|
|
{tr('common.browse')}
|
|
</button>
|
|
</div>
|
|
<div class="button-row">
|
|
<button class="btn-secondary open-existing-btn" on:click={openExistingVault} type="button" disabled={opening}>
|
|
{opening ? tr('vaultSelection.opening') : tr('vaultSelection.open')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if recentVaults.length > 0}
|
|
<div class="recent-section">
|
|
<h3>{tr('vaultSelection.recent')}</h3>
|
|
<ul class="recent-list">
|
|
{#each recentVaults as path}
|
|
<li>
|
|
<button class="recent-item" on:click={() => openRecent(path)} type="button" disabled={opening}>
|
|
<Icon name="vault" size={16} class="recent-icon" />
|
|
<span class="recent-path">{path}</span>
|
|
</button>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.vault-selection {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background: var(--vt-color-background);
|
|
padding: 2rem;
|
|
}
|
|
.vault-selection-inner {
|
|
max-width: 560px;
|
|
width: 100%;
|
|
}
|
|
.loading-text {
|
|
color: var(--vt-color-text-muted);
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
}
|
|
.logo {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.logo h1 {
|
|
color: var(--vt-color-text-primary);
|
|
font-size: 1.8rem;
|
|
margin: 0.5rem 0 0.25rem;
|
|
}
|
|
.subtitle {
|
|
color: var(--vt-color-text-muted);
|
|
font-size: 0.95rem;
|
|
margin: 0;
|
|
}
|
|
.error-box {
|
|
background: var(--vt-color-danger-muted);
|
|
border: 1px solid rgba(233, 69, 96, 0.5);
|
|
border-radius: var(--vt-radius-lg);
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: #ffc6ce;
|
|
}
|
|
:global(.error-icon) { flex-shrink: 0; }
|
|
.error-text { word-break: break-word; }
|
|
.actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.action-card {
|
|
background: var(--vt-color-surface);
|
|
border: 1px solid var(--vt-color-border);
|
|
border-radius: var(--vt-radius-lg);
|
|
padding: 1.25rem;
|
|
}
|
|
.action-card h3 {
|
|
color: var(--vt-color-text-primary);
|
|
font-size: 1rem;
|
|
margin: 0 0 0.25rem;
|
|
}
|
|
.hint {
|
|
color: var(--vt-color-text-muted);
|
|
font-size: 0.8rem;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.input-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.input-row input {
|
|
flex: 1;
|
|
background: #0f1424;
|
|
border: 1px solid var(--vt-color-border-strong);
|
|
color: var(--vt-color-text-primary);
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.input-row input:focus {
|
|
outline: none;
|
|
border-color: var(--vt-color-accent);
|
|
box-shadow: var(--vt-focus-ring);
|
|
}
|
|
.input-row input::placeholder {
|
|
color: var(--vt-color-text-muted);
|
|
}
|
|
.button-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.btn-primary {
|
|
background: var(--vt-color-accent);
|
|
color: #101827;
|
|
border: none;
|
|
padding: 0.5rem 1.25rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #3dbb92;
|
|
}
|
|
.btn-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.btn-secondary {
|
|
background: var(--vt-color-surface-hover);
|
|
color: var(--vt-color-text-secondary);
|
|
border: 1px solid var(--vt-color-border-strong);
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: var(--vt-color-surface-hover);
|
|
color: var(--vt-color-text-primary);
|
|
}
|
|
.btn-secondary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.recent-section {
|
|
background: var(--vt-color-surface);
|
|
border: 1px solid var(--vt-color-border);
|
|
border-radius: var(--vt-radius-lg);
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
.recent-section h3 {
|
|
color: var(--vt-color-text-muted);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
.recent-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.recent-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
color: var(--vt-color-text-primary);
|
|
padding: 0.4rem 0;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font-size: 0.85rem;
|
|
}
|
|
.recent-item:hover {
|
|
color: var(--vt-color-accent);
|
|
}
|
|
.recent-item:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
:global(.recent-icon) { flex-shrink: 0; }
|
|
.recent-path {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|