consolidate build scripts, reorganize source into src/ directory, fix favicon injection

src/ui/bootstrap.js

@@ -0,0 +1,74 @@
+import { vaultService } from "../services/vault-service.js";
+
+export function showVaultManager() {
+  if (!document.querySelector(".workspace")) return;
+  if (document.querySelector(".vault-manager-overlay")) return;
+
+  new window.IgnisUI.VaultManager({
+    target: document.body,
+    props: { vaultService },
+  });
+}
+
+export function showMessageDialog(title, message) {
+  return new Promise((resolve) => {
+    const dialog = new window.IgnisUI.MessageDialog({
+      target: document.body,
+      props: { title, message },
+    });
+
+    dialog.$on("confirm", () => {
+      dialog.$destroy();
+      resolve();
+    });
+  });
+}
+
+export function showConfirmDialog(
+  title,
+  message,
+  description,
+  confirmText = "OK",
+) {
+  return new Promise((resolve) => {
+    const dialog = new window.IgnisUI.ConfirmDialog({
+      target: document.body,
+      props: { title, message, description, confirmText },
+    });
+
+    dialog.$on("confirm", () => {
+      dialog.$destroy();
+      resolve(true);
+    });
+
+    dialog.$on("cancel", () => {
+      dialog.$destroy();
+      resolve(false);
+    });
+  });
+}
+
+export function showPromptDialog(
+  title,
+  label,
+  placeholder = "",
+  value = "",
+  confirmText = "OK",
+) {
+  return new Promise((resolve) => {
+    const dialog = new window.IgnisUI.PromptDialog({
+      target: document.body,
+      props: { title, label, placeholder, value, confirmText },
+    });
+
+    dialog.$on("confirm", (event) => {
+      dialog.$destroy();
+      resolve(event.detail);
+    });
+
+    dialog.$on("cancel", () => {
+      dialog.$destroy();
+      resolve(null);
+    });
+  });
+}

src/ui/components/display/ListItem.svelte

@@ -0,0 +1,104 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  export let primary = "";
+  export let secondary = "";
+  export let active = false;
+  export let clickable = true;
+
+  const dispatch = createEventDispatcher();
+
+  function onClick() {
+    if (clickable) {
+      dispatch("click");
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="list-item" class:active class:clickable on:click={onClick}>
+  {#if $$slots.icon}
+    <div class="item-icon">
+      <slot name="icon" />
+    </div>
+  {/if}
+
+  <div class="item-content">
+    {#if $$slots.default}
+      <slot />
+    {:else}
+      <span class="item-primary">{primary}</span>
+      {#if secondary}
+        <span class="item-secondary">{secondary}</span>
+      {/if}
+    {/if}
+  </div>
+
+  {#if $$slots.action}
+    <div class="item-action">
+      <slot name="action" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0.4rem 0.5rem 1rem;
+    margin: 0 0.2rem;
+    background: var(--background-primary);
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    transition:
+      background 0.1s,
+      border-color 0.1s;
+  }
+
+  .list-item.clickable {
+    cursor: pointer;
+  }
+
+  .list-item.clickable:hover {
+    background: var(--background-modifier-hover);
+    border-color: var(--background-modifier-border);
+  }
+
+  .item-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--text-muted);
+    opacity: 0.6;
+  }
+
+  .item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .item-primary {
+    font-weight: 600;
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-secondary {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-action {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+</style>

src/ui/components/input/Button.svelte

@@ -0,0 +1,94 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  export let variant = "primary";
+  export let disabled = false;
+  export let title = "";
+  export let type = "button";
+
+  const dispatch = createEventDispatcher();
+
+  function onClick(e) {
+    if (!disabled) {
+      dispatch("click", e);
+    }
+  }
+</script>
+
+<button class="btn {variant}" {type} {disabled} {title} on:click={onClick}>
+  {#if $$slots.icon}
+    <span class="btn-icon">
+      <slot name="icon" />
+    </span>
+  {/if}
+  <slot />
+</button>
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 0.375rem;
+    box-shadow: none;
+    transition: background 0.1s;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .primary {
+    padding: 0.375rem 1rem;
+    border: none;
+    background: var(--interactive-accent);
+    color: var(--text-on-accent);
+  }
+
+  .primary:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .secondary {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--background-modifier-border);
+    background: none;
+    color: var(--text-muted);
+  }
+
+  .secondary:hover:not(:disabled) {
+    color: var(--text-normal);
+    background: var(--background-modifier-hover);
+  }
+
+  .ghost {
+    padding: 0.375rem 0.5rem;
+    border: none;
+    background: none;
+    color: var(--interactive-accent);
+  }
+
+  .ghost:hover:not(:disabled) {
+    background: var(--background-modifier-hover);
+  }
+
+  .danger {
+    padding: 0.375rem 1rem;
+    border: none;
+    background: var(--text-error, #e93147);
+    color: #fff;
+  }
+
+  .danger:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+</style>

src/ui/components/input/SearchInput.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { Search } from "lucide-svelte";
+
+  export let value = "";
+  export let placeholder = "Search";
+
+  const dispatch = createEventDispatcher();
+
+  function onInput(e) {
+    dispatch("input", e.target.value);
+  }
+</script>
+
+<div class="search-input">
+  <span class="search-icon">
+    <Search size="0.875rem" />
+  </span>
+  <input type="text" {placeholder} {value} on:input={onInput} />
+</div>
+
+<style>
+  .search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.625rem;
+    color: var(--text-muted);
+    pointer-events: none;
+    margin-top: 0.2rem;
+  }
+
+  input {
+    width: 100%;
+    padding: 0.375rem 0.625rem 0.375rem 1.875rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--background-primary);
+    background: var(--background-primary);
+    color: var(--text-normal);
+    font-size: 0.8125rem;
+    outline: none;
+    box-shadow: none;
+  }
+
+  input:hover {
+    background: var(--background-modifier-form-field);
+  }
+
+  input::placeholder {
+    color: var(--text-muted);
+  }
+
+  input:focus {
+    border-color: var(--interactive-accent);
+  }
+
+  input:focus:hover {
+    background: var(--background-primary);
+  }
+</style>

src/ui/components/layout/ConfirmDialog.svelte

@@ -0,0 +1,85 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../input/Button.svelte";
+
+  export let title = "";
+  export let message = "";
+  export let description = "";
+  export let confirmText = "Confirm";
+  export let confirmVariant = "primary";
+  export let width = "500px";
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+
+  function onConfirm() {
+    dispatch("confirm");
+  }
+
+  function onCancel() {
+    modalRef.dismiss();
+    dispatch("cancel");
+  }
+
+  function onEscape() {
+    onCancel();
+  }
+
+  export function dismiss() {
+    modalRef.dismiss();
+  }
+</script>
+
+<Modal {title} {width} bind:this={modalRef} on:escape={onEscape} closeOnOverlayClick={false}>
+  <svelte:fragment slot="icon">
+    <slot name="icon" />
+  </svelte:fragment>
+
+  <div class="confirm-body">
+    <p class="confirm-message">{message}</p>
+    {#if description}
+      <p class="confirm-description">{description}</p>
+    {/if}
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="confirm-footer">
+      <Button variant="secondary" on:click={onCancel}>Cancel</Button>
+      <Button variant={confirmVariant} on:click={onConfirm}>
+        <svelte:fragment slot="icon">
+          <slot name="confirmIcon" />
+        </svelte:fragment>
+        {confirmText}
+      </Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .confirm-body {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .confirm-message {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-normal);
+  }
+
+  .confirm-description {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  .confirm-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+</style>

src/ui/components/layout/MessageDialog.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../input/Button.svelte";
+  import { CircleAlert } from "lucide-svelte";
+
+  export let title = "Message";
+  export let message = "";
+  export let width = "500px";
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+
+  function onConfirm() {
+    dispatch("confirm");
+    modalRef.dismiss();
+  }
+
+  function onEscape() {
+    onConfirm();
+  }
+
+  export function dismiss() {
+    modalRef.dismiss();
+  }
+</script>
+
+<Modal
+  {title}
+  {width}
+  bind:this={modalRef}
+  on:escape={onEscape}
+  closeOnOverlayClick={false}
+>
+  <svelte:fragment slot="icon">
+    <CircleAlert size="1.25rem" />
+  </svelte:fragment>
+
+  <div class="message-body">
+    <p class="message-text">{message}</p>
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="message-footer">
+      <Button variant="primary" on:click={onConfirm}>OK</Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .message-body {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .message-text {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--text-normal);
+    line-height: 1.5;
+    white-space: pre-wrap;
+  }
+
+  .message-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

src/ui/components/layout/Modal.svelte

@@ -0,0 +1,130 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { X } from "lucide-svelte";
+
+  export let title = "";
+  export let width = "600px";
+  export let closeOnOverlayClick = true;
+
+  const dispatch = createEventDispatcher();
+
+  let overlayEl;
+
+  function close() {
+    if (overlayEl) {
+      overlayEl.remove();
+    }
+    dispatch("close");
+  }
+
+  function onOverlayClick(e) {
+    if (e.target === overlayEl && closeOnOverlayClick) {
+      close();
+    }
+  }
+
+  function onKeydown(e) {
+    if (e.key === "Escape") {
+      dispatch("escape");
+    }
+  }
+
+  export function dismiss() {
+    close();
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="modal-overlay"
+  bind:this={overlayEl}
+  on:click={onOverlayClick}
+  on:keydown={onKeydown}
+>
+  <div class="modal-shell" style="width: min({width}, 90vw);">
+    <div class="modal-header">
+      <div class="header-left">
+        <slot name="icon" />
+        <span class="header-title">{title}</span>
+      </div>
+      <button class="close-btn" on:click={close} title="Close">
+        <X size="1.125rem" />
+      </button>
+    </div>
+
+    <slot />
+
+    {#if $$slots.footer}
+      <div class="modal-footer">
+        <slot name="footer" />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-interface);
+  }
+
+  .modal-shell {
+    background: var(--background-secondary);
+    color: var(--text-normal);
+    border-radius: 0.75rem;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 0.5rem 1.5rem;
+    background: var(--background-primary);
+    flex-shrink: 0;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    color: var(--text-muted);
+  }
+
+  .header-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-normal);
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .close-btn:hover {
+    color: var(--text-normal);
+  }
+
+  .modal-footer {
+    padding: 0.8rem 1.5rem 0.8rem;
+    flex-shrink: 0;
+  }
+</style>

src/ui/components/layout/PromptDialog.svelte

@@ -0,0 +1,115 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../input/Button.svelte";
+
+  export let title = "";
+  export let label = "";
+  export let value = "";
+  export let placeholder = "";
+  export let confirmText = "Confirm";
+  export let width = "500px";
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+
+  function onConfirm() {
+    dispatch("confirm", value);
+  }
+
+  function onCancel() {
+    modalRef.dismiss();
+    dispatch("cancel");
+  }
+
+  function onEscape() {
+    onCancel();
+  }
+
+  function onKeydown(e) {
+    if (e.key === "Enter") {
+      onConfirm();
+    }
+  }
+
+  export function dismiss() {
+    modalRef.dismiss();
+  }
+</script>
+
+<Modal
+  {title}
+  {width}
+  bind:this={modalRef}
+  on:escape={onEscape}
+  closeOnOverlayClick={false}
+>
+  <svelte:fragment slot="icon">
+    <slot name="icon" />
+  </svelte:fragment>
+
+  <div class="prompt-body">
+    <label class="prompt-label" for="prompt-input">{label}</label>
+    <!-- svelte-ignore a11y-autofocus -->
+    <input
+      id="prompt-input"
+      class="prompt-input"
+      type="text"
+      {placeholder}
+      bind:value
+      on:keydown={onKeydown}
+      autofocus
+    />
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="prompt-footer">
+      <Button variant="secondary" on:click={onCancel}>Cancel</Button>
+      <Button variant="primary" on:click={onConfirm}>
+        <svelte:fragment slot="icon">
+          <slot name="confirmIcon" />
+        </svelte:fragment>
+        {confirmText}
+      </Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .prompt-body {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .prompt-label {
+    display: block;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-normal);
+    margin-bottom: 0.75rem;
+  }
+
+  .prompt-input {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--background-modifier-border);
+    background: var(--background-primary);
+    color: var(--text-normal);
+    font-size: 1rem;
+    outline: none;
+    box-shadow: none;
+    box-sizing: border-box;
+  }
+
+  .prompt-input:focus {
+    border-color: var(--interactive-accent);
+  }
+
+  .prompt-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+</style>

src/ui/components/menu/PopoverMenu.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { EllipsisVertical } from "lucide-svelte";
+
+  export let open = false;
+  export let items = [];
+
+  const dispatch = createEventDispatcher();
+
+  function onTriggerClick(e) {
+    e.stopPropagation();
+    dispatch("toggle");
+  }
+
+  function onItemClick(e, item) {
+    e.stopPropagation();
+    dispatch("select", item);
+  }
+</script>
+
+<div class="popover-wrapper">
+  <button class="popover-trigger" on:click={onTriggerClick} title="Options">
+    <EllipsisVertical size="1rem" />
+  </button>
+
+  {#if open}
+    <div class="popover-panel">
+      {#each items as item}
+        <button
+          class="popover-item"
+          class:danger={item.danger}
+          on:click={(e) => onItemClick(e, item)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .popover-wrapper {
+    position: relative;
+  }
+
+  .popover-trigger {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.375rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .popover-trigger:hover {
+    color: var(--text-normal);
+  }
+
+  .popover-panel {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 10;
+    background: var(--background-primary);
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.375rem;
+    padding: 0.25rem;
+    min-width: 7.5rem;
+    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
+  }
+
+  .popover-item {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    border: none;
+    background: none;
+    box-shadow: none;
+    color: var(--text-normal);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    text-align: left;
+  }
+
+  .popover-item:hover {
+    background: var(--background-modifier-hover);
+  }
+
+  .popover-item.danger {
+    color: var(--text-error, #e93147);
+  }
+
+  .popover-item.danger:hover {
+    background: rgba(233, 49, 71, 0.1);
+  }
+</style>

src/ui/index.js

@@ -0,0 +1,4 @@
+export { default as VaultManager } from "./views/VaultManager.svelte";
+export { default as MessageDialog } from "./components/layout/MessageDialog.svelte";
+export { default as ConfirmDialog } from "./components/layout/ConfirmDialog.svelte";
+export { default as PromptDialog } from "./components/layout/PromptDialog.svelte";

src/ui/views/VaultManager.svelte

@@ -0,0 +1,407 @@
+<script>
+  import { onMount } from "svelte";
+  import {
+    Vault,
+    Folder,
+    Plus,
+    SquarePlus,
+    PenLine,
+    Trash2,
+    Check,
+  } from "lucide-svelte";
+  import Modal from "../components/layout/Modal.svelte";
+  import PromptDialog from "../components/layout/PromptDialog.svelte";
+  import ConfirmDialog from "../components/layout/ConfirmDialog.svelte";
+  import MessageDialog from "../components/layout/MessageDialog.svelte";
+  import SearchInput from "../components/input/SearchInput.svelte";
+  import Button from "../components/input/Button.svelte";
+  import ListItem from "../components/display/ListItem.svelte";
+  import PopoverMenu from "../components/menu/PopoverMenu.svelte";
+
+  export let vaultService;
+
+  let vaults = [];
+  let searchQuery = "";
+  let openMenuId = null;
+  let modalRef;
+
+  let activeDialog = null;
+  let targetVault = null;
+  let dialogValue = "";
+  let errorMessage = "";
+  let pendingReload = false;
+
+  const menuItems = [
+    { id: "rename", label: "Rename" },
+    { id: "delete", label: "Delete", danger: true },
+  ];
+
+  let currentVaultId = vaultService.getCurrentVaultId();
+
+  $: deleteMessage = targetVault
+    ? 'Are you sure you want to delete "' + targetVault.name + '"?'
+    : "";
+  $: filteredVaults = searchQuery
+    ? vaults.filter((v) =>
+        v.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : vaults;
+
+  async function refreshVaults() {
+    try {
+      vaults = await vaultService.listVaults();
+    } catch {
+      vaults = [];
+    }
+  }
+
+  function openVault(vault) {
+    if (vault.id === currentVaultId) {
+      modalRef.dismiss();
+      return;
+    }
+    vaultService.openVault(vault.id);
+  }
+
+  function toggleMenu(vaultId) {
+    if (openMenuId === vaultId) {
+      openMenuId = null;
+    } else {
+      openMenuId = vaultId;
+    }
+  }
+
+  function onMenuSelect(vault, item) {
+    openMenuId = null;
+    if (item.id === "rename") {
+      showRenameDialog(vault);
+    } else if (item.id === "delete") {
+      showDeleteDialog(vault);
+    }
+  }
+
+  function showCreateDialog() {
+    dialogValue = "";
+    activeDialog = "create";
+  }
+
+  function showRenameDialog(vault) {
+    targetVault = vault;
+    dialogValue = vault.name;
+    activeDialog = "rename";
+  }
+
+  function showDeleteDialog(vault) {
+    targetVault = vault;
+    activeDialog = "delete";
+  }
+
+  function closeDialog() {
+    activeDialog = null;
+    targetVault = null;
+    dialogValue = "";
+  }
+
+  async function onCreateConfirm(e) {
+    const name = e.detail.trim();
+
+    if (!name) {
+      return;
+    }
+
+    try {
+      vaults = await vaultService.createVault(name);
+      closeDialog();
+    } catch (err) {
+      errorMessage = "Failed to create vault: " + err.message;
+      activeDialog = "error";
+    }
+  }
+
+  async function onRenameConfirm(e) {
+    const trimmed = e.detail.trim();
+
+    if (!trimmed || trimmed === targetVault.name) {
+      closeDialog();
+      return;
+    }
+
+    const wasCurrentVault = targetVault.id === currentVaultId;
+
+    try {
+      vaults = await vaultService.renameVault(targetVault.id, trimmed);
+      closeDialog();
+
+      if (wasCurrentVault) {
+        currentVaultId = vaultService.getCurrentVaultId();
+        pendingReload = true;
+      }
+    } catch (err) {
+      errorMessage = "Failed to rename vault: " + err.message;
+      activeDialog = "error";
+    }
+  }
+
+  async function onDeleteConfirm() {
+    try {
+      const { wasCurrentVault } = await vaultService.deleteVault(
+        targetVault.id,
+      );
+
+      closeDialog();
+
+      vaults = await vaultService.listVaults();
+
+      if (wasCurrentVault) {
+        vaultService.openVault("");
+      }
+    } catch (err) {
+      errorMessage = "Failed to delete vault: " + err.message;
+      activeDialog = "error";
+    }
+  }
+
+  function onModalClose() {
+    if (pendingReload) {
+      window.location.reload();
+    }
+  }
+
+  function onEscape() {
+    if (openMenuId) {
+      openMenuId = null;
+    } else {
+      modalRef.dismiss();
+    }
+  }
+
+  onMount(() => {
+    refreshVaults();
+  });
+</script>
+
+<Modal
+  title="Vault Manager"
+  width="600px"
+  bind:this={modalRef}
+  on:escape={onEscape}
+  on:close={onModalClose}
+  closeOnOverlayClick={false}
+>
+  <svelte:fragment slot="icon">
+    <Vault size="1.25rem" />
+  </svelte:fragment>
+
+  <div class="section-header">
+    <h3>Vaults</h3>
+    <div class="search-wrapper">
+      <SearchInput
+        value={searchQuery}
+        on:input={(e) => {
+          searchQuery = e.detail;
+        }}
+      />
+    </div>
+  </div>
+
+  <div class="section-body">
+    <div class="vault-list">
+      {#if vaults.length === 0}
+        <div class="empty">No vaults yet. Create one below.</div>
+      {:else if filteredVaults.length === 0}
+        <div class="empty">No vaults match your search.</div>
+      {:else}
+        {#each filteredVaults as vault (vault.id)}
+          <ListItem
+            primary={vault.name}
+            secondary={vault.path}
+            active={vault.id === currentVaultId}
+            on:click={() => openVault(vault)}
+          >
+            <svelte:fragment slot="icon">
+              <Folder size="1.5rem" />
+            </svelte:fragment>
+            <svelte:fragment slot="default">
+              <span class="vault-name">
+                {vault.name}
+                {#if vault.id === currentVaultId}
+                  <span class="active-label">(active)</span>
+                  <span class="active-check">&#10003;</span>
+                {/if}
+              </span>
+              <span class="vault-path">{vault.path}</span>
+            </svelte:fragment>
+            <svelte:fragment slot="action">
+              <PopoverMenu
+                open={openMenuId === vault.id}
+                items={menuItems}
+                on:toggle={() => toggleMenu(vault.id)}
+                on:select={(e) => onMenuSelect(vault, e.detail)}
+              />
+            </svelte:fragment>
+          </ListItem>
+        {/each}
+      {/if}
+    </div>
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="footer-right">
+      <Button variant="ghost" on:click={showCreateDialog}>
+        <svelte:fragment slot="icon">
+          <Plus size="1rem" />
+        </svelte:fragment>
+        Create New Vault
+      </Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+{#if activeDialog === "create"}
+  <PromptDialog
+    title="Create Vault"
+    label="Vault Name:"
+    placeholder="My New Vault"
+    confirmText="Create Vault"
+    bind:value={dialogValue}
+    on:confirm={onCreateConfirm}
+    on:cancel={closeDialog}
+  >
+    <svelte:fragment slot="icon">
+      <SquarePlus size="1.25rem" />
+    </svelte:fragment>
+    <svelte:fragment slot="confirmIcon">
+      <Plus size="0.875rem" />
+    </svelte:fragment>
+  </PromptDialog>
+{/if}
+
+{#if activeDialog === "rename"}
+  <PromptDialog
+    title="Rename Item"
+    label="New Name:"
+    confirmText="Save"
+    bind:value={dialogValue}
+    on:confirm={onRenameConfirm}
+    on:cancel={closeDialog}
+  >
+    <svelte:fragment slot="icon">
+      <PenLine size="1.25rem" />
+    </svelte:fragment>
+    <svelte:fragment slot="confirmIcon">
+      <Check size="0.875rem" />
+    </svelte:fragment>
+  </PromptDialog>
+{/if}
+
+{#if activeDialog === "delete" && targetVault}
+  <ConfirmDialog
+    title="Delete Confirmation"
+    message={deleteMessage}
+    description="This action cannot be undone. All notes and linked files within this vault will be permanently removed from your system."
+    confirmText="Confirm Delete"
+    confirmVariant="danger"
+    on:confirm={onDeleteConfirm}
+    on:cancel={closeDialog}
+  >
+    <svelte:fragment slot="icon">
+      <Trash2 size="1.25rem" />
+    </svelte:fragment>
+    <svelte:fragment slot="confirmIcon">
+      <Check size="0.875rem" />
+    </svelte:fragment>
+  </ConfirmDialog>
+{/if}
+
+{#if activeDialog === "error"}
+  <MessageDialog
+    title="Error"
+    message={errorMessage}
+    on:confirm={() => {
+      activeDialog = null;
+      errorMessage = "";
+    }}
+  />
+{/if}
+
+<style>
+  .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 2rem 0rem 1.5rem;
+    flex-shrink: 0;
+  }
+
+  .section-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-normal);
+  }
+
+  .search-wrapper {
+    width: 11rem;
+  }
+
+  .section-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 1.1rem 0rem 1rem;
+  }
+
+  .vault-list {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    min-height: 300px;
+    max-height: 300px;
+    padding: 0rem 0 1rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .empty {
+    color: var(--text-muted);
+    padding: 2rem 1rem;
+    text-align: center;
+    font-size: 0.875rem;
+  }
+
+  .vault-name {
+    font-weight: 600;
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .active-label {
+    color: var(--interactive-accent);
+    font-weight: 400;
+    font-size: 0.875rem;
+    margin-left: 0.375rem;
+  }
+
+  .active-check {
+    color: var(--interactive-accent);
+    font-size: 0.875rem;
+    margin-left: 0.125rem;
+  }
+
+  .vault-path {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .footer-right {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>