329 lines
7.9 KiB
Svelte
329 lines
7.9 KiB
Svelte
<script>
|
|
import { app } from '../lib/stores/app.svelte.js'
|
|
import { search as searchStore } from '../lib/stores/search.svelte.js'
|
|
import { TRASH_GROUP_NAME } from '../lib/models/schema.js'
|
|
import { emptyTrash } from '../lib/storage/db.js'
|
|
import Sidebar from './Sidebar.svelte'
|
|
import EntryList from './EntryList.svelte'
|
|
import EntryDetail from './EntryDetail.svelte'
|
|
import EntryForm from './EntryForm.svelte'
|
|
import ImportExport from './ImportExport.svelte'
|
|
import SettingsDialog from './SettingsDialog.svelte'
|
|
|
|
let sidebarOpen = $state(false)
|
|
let viewMode = $state('list') // 'list' | 'detail' | 'form' | 'settings'
|
|
let selectedEntryId = $state(null)
|
|
let showEmptyTrashConfirm = $state(false)
|
|
let emptyingTrash = $state(false)
|
|
|
|
const isTrashView = $derived(searchStore.activeGroupId === 'trash')
|
|
|
|
function goList() {
|
|
viewMode = 'list'
|
|
selectedEntryId = null
|
|
sidebarOpen = false
|
|
}
|
|
|
|
function goDetail(entryId) {
|
|
selectedEntryId = entryId
|
|
viewMode = 'detail'
|
|
sidebarOpen = false
|
|
}
|
|
|
|
function goForm(entryId = null) {
|
|
selectedEntryId = entryId
|
|
viewMode = 'form'
|
|
sidebarOpen = false
|
|
}
|
|
|
|
function goSettings() {
|
|
viewMode = 'settings'
|
|
sidebarOpen = false
|
|
}
|
|
|
|
function handleBack() {
|
|
if (viewMode === 'form' || viewMode === 'settings') {
|
|
goList()
|
|
} else {
|
|
goList()
|
|
}
|
|
}
|
|
|
|
async function handleEmptyTrash() {
|
|
emptyingTrash = true
|
|
try {
|
|
await emptyTrash()
|
|
searchStore.activeGroupId = 'all'
|
|
showEmptyTrashConfirm = false
|
|
} catch (e) {
|
|
console.error('Failed to empty trash:', e)
|
|
}
|
|
emptyingTrash = false
|
|
}
|
|
|
|
function handleLock() {
|
|
app.lockVault()
|
|
}
|
|
</script>
|
|
|
|
<div class="app-shell">
|
|
<!-- Mobile header -->
|
|
<div class="mobile-header">
|
|
<button class="btn btn-ghost btn-sm" onclick={() => sidebarOpen = !sidebarOpen}>
|
|
☰ Menu
|
|
</button>
|
|
<span class="mobile-title">Password Vault</span>
|
|
<button class="btn btn-ghost btn-sm" onclick={handleLock} title="Lock">🔒</button>
|
|
</div>
|
|
|
|
<!-- Sidebar overlay for mobile -->
|
|
{#if sidebarOpen}
|
|
<button class="sidebar-overlay" onclick={() => sidebarOpen = false} aria-label="Close menu"></button>
|
|
{/if}
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar {sidebarOpen ? 'open' : ''}">
|
|
<Sidebar />
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main class="main-content">
|
|
<!-- Top bar -->
|
|
<div class="top-bar">
|
|
{#if viewMode !== 'list'}
|
|
<button class="btn btn-ghost btn-sm" onclick={handleBack}>← Back</button>
|
|
{/if}
|
|
<div class="top-bar-title">
|
|
{#if viewMode === 'list'}
|
|
<h1>{searchStore.activeGroupId === 'trash' ? TRASH_GROUP_NAME : 'All Entries'}</h1>
|
|
{:else if viewMode === 'detail'}
|
|
<h1>Entry Details</h1>
|
|
{:else if viewMode === 'form'}
|
|
<h1>{selectedEntryId ? 'Edit Entry' : 'New Entry'}</h1>
|
|
{:else if viewMode === 'settings'}
|
|
<h1>Settings</h1>
|
|
{/if}
|
|
</div>
|
|
<div class="top-bar-actions">
|
|
{#if viewMode === 'list' && isTrashView}
|
|
<button class="btn btn-danger btn-sm" onclick={() => showEmptyTrashConfirm = true} disabled={emptyingTrash}>
|
|
{emptyingTrash ? 'Emptying...' : '🗑 Empty Trash'}
|
|
</button>
|
|
{/if}
|
|
{#if viewMode === 'list' && !isTrashView}
|
|
<button class="btn btn-primary btn-sm" onclick={() => goForm(null)}>+ New Entry</button>
|
|
{/if}
|
|
<ImportExport />
|
|
<button class="btn btn-ghost btn-sm" onclick={goSettings} title="Settings">⚙️</button>
|
|
<button class="btn btn-ghost btn-sm" onclick={handleLock} title="Lock vault">🔒</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="content-area">
|
|
{#if viewMode === 'list'}
|
|
<EntryList onSelect={goDetail} onAdd={() => goForm(null)} />
|
|
{:else if viewMode === 'detail' && selectedEntryId}
|
|
<EntryDetail
|
|
entryId={selectedEntryId}
|
|
onEdit={() => goForm(selectedEntryId)}
|
|
onBack={goList}
|
|
/>
|
|
{:else if viewMode === 'form'}
|
|
<EntryForm
|
|
entryId={selectedEntryId}
|
|
onSave={goList}
|
|
onCancel={handleBack}
|
|
/>
|
|
{:else if viewMode === 'settings'}
|
|
<SettingsDialog onBack={goList} />
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Empty trash confirmation -->
|
|
{#if showEmptyTrashConfirm}
|
|
<div class="modal-overlay" role="presentation" onclick={() => showEmptyTrashConfirm = false}>
|
|
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
|
<div class="modal" role="dialog" aria-modal="true" aria-label="Empty trash confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
|
|
<h3>Empty Trash</h3>
|
|
<p>Permanently delete all entries from the trash? This cannot be undone.</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-danger" onclick={handleEmptyTrash} disabled={emptyingTrash}>
|
|
{emptyingTrash ? 'Emptying...' : 'Yes, empty trash'}
|
|
</button>
|
|
<button class="btn btn-ghost" onclick={() => showEmptyTrashConfirm = false}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.app-shell {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Mobile header */
|
|
.mobile-header {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.mobile-title {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 260px;
|
|
min-width: 260px;
|
|
background: var(--color-sidebar);
|
|
border-right: 1px solid var(--color-border);
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Main content */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 20px;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.top-bar-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.top-bar-title h1 {
|
|
font-size: 1.1rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.top-bar-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Sidebar overlay (mobile) */
|
|
.sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 49;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
max-width: 380px;
|
|
width: 100%;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.modal h3 {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.modal p {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.mobile-header {
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 50;
|
|
transform: translateX(-100%);
|
|
transition: transform 200ms ease;
|
|
}
|
|
|
|
.sidebar.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
display: block;
|
|
}
|
|
|
|
.content-area {
|
|
padding: 12px;
|
|
}
|
|
|
|
.top-bar {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
</style>
|