fix issues with dialogs, and issue with vault rename

ui/bootstrap.js

@@ -9,3 +9,66 @@ export function showVaultManager() {
     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);
+    });
+  });
+}

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>

ui/index.js

@@ -1 +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";

ui/views/VaultManager.svelte

@@ -12,6 +12,7 @@
   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";
@@ -27,6 +28,8 @@
   let activeDialog = null;
   let targetVault = null;
   let dialogValue = "";
+  let errorMessage = "";
+  let pendingReload = false;
 
   const menuItems = [
     { id: "rename", label: "Rename" },
@@ -108,12 +111,11 @@
 
     try {
       vaults = await vaultService.createVault(name);
+      closeDialog();
     } catch (err) {
-      alert("Failed to create vault: " + err.message);
-      return;
+      errorMessage = "Failed to create vault: " + err.message;
+      activeDialog = "error";
     }
-
-    closeDialog();
   }
 
   async function onRenameConfirm(e) {
@@ -128,15 +130,15 @@
 
     try {
       vaults = await vaultService.renameVault(targetVault.id, trimmed);
+      closeDialog();
+
+      if (wasCurrentVault) {
+        currentVaultId = vaultService.getCurrentVaultId();
+        pendingReload = true;
+      }
     } catch (err) {
-      alert("Failed to rename vault: " + err.message);
-      return;
-    }
-
-    closeDialog();
-
-    if (wasCurrentVault) {
-      currentVaultId = vaultService.getCurrentVaultId();
+      errorMessage = "Failed to rename vault: " + err.message;
+      activeDialog = "error";
     }
   }
 
@@ -154,7 +156,14 @@
         vaultService.openVault("");
       }
     } catch (err) {
-      alert("Failed to delete vault: " + err.message);
+      errorMessage = "Failed to delete vault: " + err.message;
+      activeDialog = "error";
+    }
+  }
+
+  function onModalClose() {
+    if (pendingReload) {
+      window.location.reload();
     }
   }
 
@@ -176,6 +185,7 @@
   width="600px"
   bind:this={modalRef}
   on:escape={onEscape}
+  on:close={onModalClose}
   closeOnOverlayClick={false}
 >
   <svelte:fragment slot="icon">
@@ -270,7 +280,7 @@
   <PromptDialog
     title="Rename Item"
     label="New Name:"
-    confirmText="Save Name"
+    confirmText="Save"
     bind:value={dialogValue}
     on:confirm={onRenameConfirm}
     on:cancel={closeDialog}
@@ -303,6 +313,17 @@
   </ConfirmDialog>
 {/if}
 
+{#if activeDialog === "error"}
+  <MessageDialog
+    title="Error"
+    message={errorMessage}
+    on:confirm={() => {
+      activeDialog = null;
+      errorMessage = "";
+    }}
+  />
+{/if}
+
 <style>
   .section-header {
     display: flex;