<!-- Private notes lazy-loaded after Clerk auth resolves -->
<div
  id="private-notes-container"
  hx-get="/htmx/private-notes"
  hx-trigger="load, refreshPrivateNotes from:body"
  hx-swap="innerHTML"
></div>

// Authorization header injected via htmx:configRequest:
document.body.addEventListener('htmx:configRequest', (evt) => {
  const url = evt.detail.pathInfo?.requestPath ?? '';
  if (url.includes('/htmx/private-notes')) {
    evt.detail.headers['Authorization'] = 'Bearer ' + window.__clerkToken;
  }
});

// e2e-tests/tests/notes.spec.ts — private notes (signed in)
test('private note create, edit, delete', async ({ page }) => {
  await page.goto(appPath, { waitUntil: 'domcontentloaded' });
  await expect(page.getByRole('button', { name: /create private note/i }))
    .toBeVisible({ timeout: 25_000 });
  const yourNotes = page.getByTestId('section-your-notes')
    .or(page.locator('section', { has: page.getByRole('heading', { name: /your notes/i }) }));
  await expect(yourNotes).toBeVisible({ timeout: 10_000 });
  await waitForClerkSessionToken(page, 15_000);
  await createPrivateNote(page, content, title);
  await expect(page.getByText(title).or(page.getByText(content)).first())
    .toBeVisible({ timeout: 10_000 });
});