journal/Journal.App/src/routes/account/+page.svelte

<script lang="ts">
  import { goto } from "$app/navigation";
  import AppModal from "$lib/components/AppModal.svelte";
  import Navbar from "$lib/components/Navbar.svelte";

  const activeSection = "account";

  let modalOpen = false;
  let modalTitle = "";
  let modalMessage = "";
  let modalConfirmText = "OK";
  let modalCancelText = "Cancel";
  let modalShowCancel = false;
  let modalTone: "default" | "danger" = "default";
  let modalAction: "logout-confirm" | "logout-info" | null = null;

  function showModal(options: {
    action: "logout-confirm" | "logout-info";
    title: string;
    message: string;
    confirmText?: string;
    cancelText?: string;
    showCancel?: boolean;
    tone?: "default" | "danger";
  }) {
    modalAction = options.action;
    modalTitle = options.title;
    modalMessage = options.message;
    modalConfirmText = options.confirmText ?? "OK";
    modalCancelText = options.cancelText ?? "Cancel";
    modalShowCancel = options.showCancel ?? false;
    modalTone = options.tone ?? "default";
    modalOpen = true;
  }

  function closeModal() {
    modalOpen = false;
    modalAction = null;
  }

  function handleModalConfirm() {
    if (modalAction === "logout-confirm") {
      showModal({
        action: "logout-info",
        title: "Logout Requested",
        message: "You have been logged out.",
        confirmText: "Close"
      });
      return;
    }

    closeModal();
  }

  function handleSelect(id: string) {
    if (id === "logout") {
      showModal({
        action: "logout-confirm",
        title: "Confirm Logout",
        message: "Are you sure you want to log out?",
        confirmText: "Log Out",
        cancelText: "Cancel",
        showCancel: true,
        tone: "danger"
      });
      return;
    }

    if (id === "account") {
      return;
    }

    if (id === "settings") {
      goto("/settings");
      return;
    }

    goto("/");
  }
</script>

<div class="app-shell panel-closed">
  <Navbar {activeSection} onSelect={handleSelect} />

  <main class="route-view">
    <header class="route-header">
      <h1>Account</h1>
      <p>Manage your profile and account preferences.</p>
    </header>

    <section class="route-card">
      <label>
        Display Name
        <input type="text" value="John Doe" />
      </label>

      <label>
        Email
        <input type="email" value="john@example.com" />
      </label>

      <button type="button">Save Changes</button>
    </section>
  </main>
</div>

<AppModal
  open={modalOpen}
  title={modalTitle}
  message={modalMessage}
  confirmText={modalConfirmText}
  cancelText={modalCancelText}
  showCancel={modalShowCancel}
  tone={modalTone}
  onConfirm={handleModalConfirm}
  onCancel={closeModal}
/>

<style>
  .route-view {
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-editor) 100%);
    color: var(--text-primary);
  }

  .route-header h1 {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .route-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .route-card {
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
  }

  .route-card label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
  }

  .route-card input {
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--bg-app);
    color: var(--text-primary);
    padding: 8px 10px;
  }

  .route-card button {
    width: fit-content;
    padding: 7px 11px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--text-primary);
    cursor: pointer;
  }
</style>