493 lines
13 KiB
Svelte
493 lines
13 KiB
Svelte
<script>
|
|
import { getGroups, addGroup, updateGroup, deleteGroup, getEntryCountsByGroup, getEntryById, updateEntry as updateEntryDb } from '../lib/storage/db.js'
|
|
import { createGroup, validateGroup } from '../lib/models/schema.js'
|
|
import { search as searchStore } from '../lib/stores/search.svelte.js'
|
|
|
|
let groups = $state([])
|
|
let entryCounts = $state(new Map())
|
|
|
|
// Group management state
|
|
let showGroupForm = $state(false)
|
|
let editingGroupId = $state(null)
|
|
let groupName = $state('')
|
|
let groupColor = $state('#6c63ff')
|
|
let groupError = $state('')
|
|
let showDeleteGroupConfirm = $state(null) // groupId being confirmed for deletion
|
|
let deletingGroup = $derived(groups.find(g => g.id === showDeleteGroupConfirm))
|
|
let dropTargetGroupId = $state(null) // groupId currently being hovered during drag
|
|
|
|
const GROUP_COLORS = [
|
|
'#6c63ff', '#e5484d', '#34d399', '#fbbf24', '#3b82f6',
|
|
'#ec4899', '#8b5cf6', '#14b8a6', '#f97316', '#06b6d4',
|
|
'#a855f7', '#ef4444', '#22c55e', '#eab308', '#6366f1',
|
|
]
|
|
|
|
async function loadData() {
|
|
const [g, counts] = await Promise.all([getGroups(), getEntryCountsByGroup()])
|
|
groups = g
|
|
entryCounts = counts
|
|
}
|
|
|
|
// Initial load + refresh after import/export
|
|
$effect(() => {
|
|
searchStore.refreshTrigger
|
|
loadData()
|
|
})
|
|
|
|
function openGroupForm(group = null) {
|
|
if (group) {
|
|
editingGroupId = group.id
|
|
groupName = group.name
|
|
groupColor = group.color || '#6c63ff'
|
|
} else {
|
|
editingGroupId = null
|
|
groupName = ''
|
|
groupColor = GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)]
|
|
}
|
|
groupError = ''
|
|
showGroupForm = true
|
|
}
|
|
|
|
async function saveGroup() {
|
|
groupError = ''
|
|
const validation = validateGroup(groupName)
|
|
if (!validation.valid) {
|
|
groupError = validation.errors[0]
|
|
return
|
|
}
|
|
|
|
try {
|
|
if (editingGroupId) {
|
|
const existing = groups.find(g => g.id === editingGroupId)
|
|
const updated = { ...existing, name: groupName.trim(), color: groupColor }
|
|
await updateGroup(updated)
|
|
} else {
|
|
const group = createGroup(groupName, groupColor)
|
|
await addGroup(group)
|
|
}
|
|
showGroupForm = false
|
|
await loadData()
|
|
} catch (e) {
|
|
groupError = 'Failed to save group: ' + e.message
|
|
}
|
|
}
|
|
|
|
async function confirmDeleteGroup(groupId) {
|
|
try {
|
|
await deleteGroup(groupId)
|
|
if (searchStore.activeGroupId === groupId) {
|
|
searchStore.activeGroupId = 'all'
|
|
}
|
|
showDeleteGroupConfirm = null
|
|
await loadData()
|
|
} catch (e) {
|
|
groupError = 'Failed to delete group: ' + e.message
|
|
}
|
|
}
|
|
|
|
// Drag-and-drop: move entry to a group
|
|
function onDragOverGroup(e, groupId) {
|
|
e.preventDefault()
|
|
e.dataTransfer.dropEffect = 'move'
|
|
dropTargetGroupId = groupId
|
|
}
|
|
|
|
function onDragLeaveGroup() {
|
|
dropTargetGroupId = null
|
|
}
|
|
|
|
function resetDropTarget() {
|
|
dropTargetGroupId = null
|
|
}
|
|
|
|
async function onDropGroup(groupId, e) {
|
|
e.preventDefault()
|
|
dropTargetGroupId = groupId // signal to onpointerup that a drop occurred here
|
|
const entryId = e.dataTransfer.getData('text/plain')
|
|
if (!entryId) return
|
|
|
|
try {
|
|
const entry = await getEntryById(entryId)
|
|
if (!entry) return
|
|
|
|
// If dropping on "All Entries" (no group), clear the groupId
|
|
const newGroupId = groupId === 'all' ? '' : groupId
|
|
|
|
const updated = {
|
|
...entry,
|
|
groupId: newGroupId,
|
|
updatedAt: new Date().toISOString(),
|
|
}
|
|
await updateEntryDb(updated)
|
|
await loadData()
|
|
resetDropTarget()
|
|
// Force the entry list to re-fetch so the moved entry appears immediately.
|
|
searchStore.refresh()
|
|
} catch (err) {
|
|
console.error('Failed to move entry:', err)
|
|
resetDropTarget()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="sidebar-content">
|
|
<div class="sidebar-header">
|
|
<h2>🔐 Vault</h2>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input
|
|
type="text"
|
|
placeholder="Search entries..."
|
|
value={searchStore.query}
|
|
oninput={(e) => searchStore.query = e.target.value}
|
|
/>
|
|
</div>
|
|
|
|
<nav class="groups-nav">
|
|
<div
|
|
class="group-wrapper {dropTargetGroupId === 'all' ? 'drop-target' : ''}"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Drop here to remove from group"
|
|
ondragover={(e) => onDragOverGroup(e, 'all')}
|
|
ondragleave={onDragLeaveGroup}
|
|
ondrop={(e) => onDropGroup('all', e)}
|
|
>
|
|
<button
|
|
class="group-item {searchStore.activeGroupId === 'all' ? 'active' : ''}"
|
|
onclick={() => {
|
|
if (dropTargetGroupId === 'all') {
|
|
resetDropTarget()
|
|
return
|
|
}
|
|
searchStore.activeGroupId = 'all'
|
|
}}
|
|
>
|
|
<span class="group-icon">📋</span>
|
|
<span class="group-name">All Entries</span>
|
|
</button>
|
|
</div>
|
|
|
|
{#each groups as group}
|
|
<div
|
|
class="group-row {dropTargetGroupId === group.id ? 'drop-target' : ''}"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label={`Drop here to move to ${group.name}`}
|
|
ondragover={(e) => onDragOverGroup(e, group.id)}
|
|
ondragleave={onDragLeaveGroup}
|
|
ondrop={(e) => onDropGroup(group.id, e)}
|
|
>
|
|
<button
|
|
class="group-item {searchStore.activeGroupId === group.id ? 'active' : ''}"
|
|
onclick={() => {
|
|
if (dropTargetGroupId === group.id) {
|
|
resetDropTarget()
|
|
return
|
|
}
|
|
searchStore.activeGroupId = group.id
|
|
}}
|
|
>
|
|
<span class="group-color" style="background-color: {group.color || '#6c63ff'}"></span>
|
|
<span class="group-name">{group.name}</span>
|
|
</button>
|
|
<div class="group-actions">
|
|
<button class="group-action-btn" onclick={() => openGroupForm(group)} title="Edit group">✏️</button>
|
|
<button class="group-action-btn" onclick={() => showDeleteGroupConfirm = group.id} title="Delete group">🗑</button>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<button class="btn btn-ghost btn-sm w-full" onclick={() => openGroupForm(null)}>+ New Group</button>
|
|
</div>
|
|
|
|
<!-- Group form modal -->
|
|
{#if showGroupForm}
|
|
<div class="modal-overlay" role="presentation" onclick={() => showGroupForm = false}>
|
|
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
|
<div class="modal" role="dialog" aria-modal="true" aria-label="Group settings" tabindex="-1" onclick={(e) => e.stopPropagation()}>
|
|
<h3>{editingGroupId ? 'Edit Group' : 'New Group'}</h3>
|
|
|
|
{#if groupError}
|
|
<div class="error-banner">{groupError}</div>
|
|
{/if}
|
|
|
|
<div class="form-group">
|
|
<label for="group-name">Group Name</label>
|
|
<input id="group-name" type="text" bind:value={groupName} placeholder="e.g. Work, Personal" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<span class="field-label">Color</span>
|
|
<div class="color-picker">
|
|
{#each GROUP_COLORS as color}
|
|
<button
|
|
class="color-swatch {groupColor === color ? 'selected' : ''}"
|
|
style="background-color: {color}"
|
|
onclick={() => groupColor = color}
|
|
title={color}
|
|
></button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="btn btn-primary" onclick={saveGroup}>
|
|
{editingGroupId ? 'Update' : 'Create'}
|
|
</button>
|
|
<button class="btn btn-ghost" onclick={() => showGroupForm = false}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Entry moved toast -->
|
|
{#if dropTargetGroupId}
|
|
<div class="drop-indicator">Drop here to move</div>
|
|
{/if}
|
|
|
|
<!-- Delete group confirmation -->
|
|
{#if deletingGroup}
|
|
<div class="modal-overlay" role="presentation" onclick={() => showDeleteGroupConfirm = null}>
|
|
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
|
<div class="modal" role="dialog" aria-modal="true" aria-label="Delete group confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
|
|
<h3>Delete Group</h3>
|
|
<p>Delete "<strong>{deletingGroup.name}</strong>"? Entries in this group will become ungrouped.</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-danger" onclick={() => confirmDeleteGroup(deletingGroup.id)}>Yes, delete</button>
|
|
<button class="btn btn-ghost" onclick={() => showDeleteGroupConfirm = null}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.sidebar-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-box {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.search-box input {
|
|
padding: 8px 10px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.groups-nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
.group-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.group-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: background-color 150ms, color 150ms;
|
|
text-align: left;
|
|
}
|
|
|
|
.group-item:hover {
|
|
background: var(--color-surface-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.group-item.active {
|
|
background: rgba(108, 99, 255, 0.15);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.group-wrapper.drop-target .group-item,
|
|
.group-row.drop-target .group-item {
|
|
background: rgba(108, 99, 255, 0.3);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.group-wrapper.drop-target,
|
|
.group-row.drop-target {
|
|
background: rgba(108, 99, 255, 0.12);
|
|
border: 2px dashed var(--color-primary);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 0 12px rgba(108, 99, 255, 0.3);
|
|
}
|
|
|
|
.group-wrapper {
|
|
border-radius: var(--radius-md);
|
|
transition: background-color 150ms;
|
|
}
|
|
|
|
.group-icon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.group-color {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.group-name {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.group-actions {
|
|
display: flex;
|
|
gap: 2px;
|
|
padding-right: 4px;
|
|
opacity: 0;
|
|
transition: opacity 150ms;
|
|
}
|
|
|
|
.group-row:hover .group-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.group-action-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
padding: 4px;
|
|
border-radius: var(--radius-sm);
|
|
transition: background-color 150ms;
|
|
}
|
|
|
|
.group-action-btn:hover {
|
|
background: var(--color-surface-hover);
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.drop-indicator {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 8px 16px;
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
animation: fadeIn 150ms ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
|
|
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.error-banner {
|
|
padding: 8px 12px;
|
|
background: rgba(229, 72, 77, 0.15);
|
|
border: 1px solid rgba(229, 72, 77, 0.4);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-danger);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Color picker */
|
|
.color-picker {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: transform 150ms, border-color 150ms;
|
|
}
|
|
|
|
.color-swatch:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.color-swatch.selected {
|
|
border-color: #fff;
|
|
transform: scale(1.15);
|
|
}
|
|
</style>
|