Import should refresh the password list.

This commit is contained in:
Timothy Farrell 2026-05-12 18:29:47 +00:00
parent 0c908e8919
commit 289e8c9e34
4 changed files with 25 additions and 11 deletions

View File

@ -35,10 +35,11 @@
loading = false loading = false
} }
// Reload when search query or active group filter changes // Reload when search query, active group filter, or refresh trigger changes
$effect(() => { $effect(() => {
searchStore.query searchStore.query
searchStore.activeGroupId searchStore.activeGroupId
searchStore.refreshTrigger
loadEntries() loadEntries()
}) })
</script> </script>

View File

@ -1,5 +1,6 @@
<script> <script>
import { exportAll, importAll } from '../lib/storage/db.js' import { exportAll, importAll } from '../lib/storage/db.js'
import { search as searchStore } from '../lib/stores/search.svelte.js'
let showExport = $state(false) let showExport = $state(false)
let showImport = $state(false) let showImport = $state(false)
@ -49,6 +50,7 @@
const result = await importAll(data, importMode) const result = await importAll(data, importMode)
importResult = result importResult = result
searchStore.refresh()
} catch (e) { } catch (e) {
importError = 'Import failed: ' + e.message importError = 'Import failed: ' + e.message
} }

View File

@ -1,7 +1,7 @@
<script> <script>
import { getGroups, addGroup, updateGroup, deleteGroup, getEntryCountsByGroup } from '../lib/storage/db.js' import { getGroups, addGroup, updateGroup, deleteGroup, getEntryCountsByGroup } from '../lib/storage/db.js'
import { createGroup, validateGroup } from '../lib/models/schema.js' import { createGroup, validateGroup } from '../lib/models/schema.js'
import { search } from '../lib/stores/search.svelte.js' import { search as searchStore } from '../lib/stores/search.svelte.js'
let groups = $state([]) let groups = $state([])
let entryCounts = $state(new Map()) let entryCounts = $state(new Map())
@ -26,7 +26,12 @@
groups = g groups = g
entryCounts = counts entryCounts = counts
} }
loadData()
// Initial load + refresh after import/export
$effect(() => {
searchStore.refreshTrigger
loadData()
})
function openGroupForm(group = null) { function openGroupForm(group = null) {
if (group) { if (group) {
@ -69,8 +74,8 @@
async function confirmDeleteGroup(groupId) { async function confirmDeleteGroup(groupId) {
try { try {
await deleteGroup(groupId) await deleteGroup(groupId)
if (search.activeGroupId === groupId) { if (searchStore.activeGroupId === groupId) {
search.activeGroupId = 'all' searchStore.activeGroupId = 'all'
} }
showDeleteGroupConfirm = null showDeleteGroupConfirm = null
await loadData() await loadData()
@ -89,15 +94,15 @@
<input <input
type="text" type="text"
placeholder="Search entries..." placeholder="Search entries..."
value={search.query} value={searchStore.query}
onInput={(e) => search.query = e.target.value} onInput={(e) => searchStore.query = e.target.value}
/> />
</div> </div>
<nav class="groups-nav"> <nav class="groups-nav">
<button <button
class="group-item {search.activeGroupId === 'all' ? 'active' : ''}" class="group-item {searchStore.activeGroupId === 'all' ? 'active' : ''}"
onclick={() => search.activeGroupId = 'all'} onclick={() => searchStore.activeGroupId = 'all'}
> >
<span class="group-icon">📋</span> <span class="group-icon">📋</span>
<span class="group-name">All Entries</span> <span class="group-name">All Entries</span>
@ -106,8 +111,8 @@
{#each groups as group} {#each groups as group}
<div class="group-row"> <div class="group-row">
<button <button
class="group-item {search.activeGroupId === group.id ? 'active' : ''}" class="group-item {searchStore.activeGroupId === group.id ? 'active' : ''}"
onclick={() => search.activeGroupId = group.id} onclick={() => searchStore.activeGroupId = group.id}
> >
<span class="group-color" style="background-color: {group.color || '#6c63ff'}"></span> <span class="group-color" style="background-color: {group.color || '#6c63ff'}"></span>
<span class="group-name">{group.name}</span> <span class="group-name">{group.name}</span>

View File

@ -6,11 +6,17 @@
export class SearchStore { export class SearchStore {
query = $state('') query = $state('')
activeGroupId = $state('all') // 'all' or a group id activeGroupId = $state('all') // 'all' or a group id
refreshTrigger = $state(0) // incremented to force a re-fetch
clear() { clear() {
this.query = '' this.query = ''
this.activeGroupId = 'all' this.activeGroupId = 'all'
} }
/** Force subscribed components to re-fetch data. */
refresh() {
this.refreshTrigger++
}
} }
export const search = new SearchStore() export const search = new SearchStore()