Elysia Notes - Vanilla JS

// Wire up nav + auth buttons
function bindNavButtons() {
  document.getElementById('btn-sign-in').addEventListener('click', signIn);
  document.getElementById('btn-sign-out').addEventListener('click', signOut);

  document.getElementById('btn-admin-login').addEventListener('click', () => {
    // Open modal, store admin key in localStorage, mark body as admin-active, then load admin notes
    openAdminLoginModal();
  });

  document.getElementById('btn-admin-logout').addEventListener('click', () => {
    localStorage.removeItem('adminApiKey');
    document.body.classList.remove('admin-active');
    // Clear admin table UI
    document.getElementById('admin-table-container').innerHTML = '';
  });
}

// React to Clerk auth changes and keep the top bar in sync
onChange(({ user }) => {
  const body = document.body;
  const userNameEl = document.getElementById('user-name');

  if (user) {
    body.classList.add('signed-in');
    body.classList.remove('signed-out');
    userNameEl.textContent =
      user.firstName || user.emailAddresses?.[0]?.emailAddress || 'User';
    // Load private notes after sign-in
    loadPrivateNotes();
  } else {
    body.classList.remove('signed-in');
    body.classList.add('signed-out');
    userNameEl.textContent = '';
    // Clear private notes UI and counts when signed out
    privateNotes = [];
    document.getElementById('private-count').textContent = '0';
    document.getElementById('private-notes-grid').innerHTML = '';
  }
});

// e2e-tests/tests/notes.spec.ts, global-search.spec.ts
test.beforeEach(async ({ page }) => {
  await setupClerkTestingToken({ page });
});
test('page ready', async ({ page }) => {
  await page.goto(appPath, { waitUntil: 'domcontentloaded' });
  const pageReady = page.getByTestId('section-public-notes')
    .or(page.getByRole('heading', { name: /public notes/i }))
    .or(page.getByRole('button', { name: /sign in|create public note/i }));
  await expect(pageReady).toBeVisible({ timeout: 25_000 });
});

All Notes (Admin View)

View and manage all notes in the system

Delete notes whose content or title matches the regex

Loading admin notes...

// Fetch all notes with admin API key
async function loadAdminNotes() {
  const key = localStorage.getItem('adminApiKey');
  const res = await fetch('/api/notes/all', {
    headers: { 'X-API-Key': key },
  });
  const notes = await res.json();
  renderAdminTable(notes);
}

// Delete note via REST API
async function deleteNote(id) {
  const key = localStorage.getItem('adminApiKey');
  await fetch(`/api/notes/${id}/admin`, {
    method: 'DELETE',
    headers: { 'X-API-Key': key },
  });
  await loadAdminNotes();
}

// e2e-tests/tests/notes.spec.ts — Admin cleanup in globalTeardown
// globalTeardown deletes notes matching e2eNotePattern() after all tests complete.

Public Notes

Visible to everyone

Loading public notes...

// In-memory state for this page
let publicNotes = [];

// Fetch public notes (no auth required)
async function loadPublicNotes() {
  const res = await fetch('/api/public-notes');
  publicNotes = await res.json();
  renderPublicNotes();
}

// Render cards + update nav badges
function renderPublicNotes() {
  const grid = document.getElementById('public-notes-grid');
  grid.innerHTML = '';

  if (!publicNotes.length) {
    grid.innerHTML = '<div class="empty-state">No public notes yet. Create one!</div>';
    document.getElementById('public-count').textContent = '0';
    const signedInBadge = document.getElementById('public-count-signed-in');
    if (signedInBadge) signedInBadge.textContent = '0';
    return;
  }

  for (const note of publicNotes) {
    // noteCard(...) returns a DOM element for a single note
    grid.appendChild(noteCard(note));
  }

  document.getElementById('public-count').textContent = String(publicNotes.length);
  const signedInBadge = document.getElementById('public-count-signed-in');
  if (signedInBadge) signedInBadge.textContent = String(publicNotes.length);
}

// Create a public note then refresh the grid
async function createPublicNote(title, content) {
  await fetch('/api/public-notes', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, content, isPublic: true }),
  });
  await loadPublicNotes();
}

// e2e-tests/tests/notes.spec.ts — public note: create, edit, delete
test('public note: create, edit, delete', async ({ page }) => {
  await page.goto(appPath, { waitUntil: 'domcontentloaded' });
  await expect(page.getByTestId('section-public-notes').or(
    page.getByRole('heading', { name: /public notes/i })
  )).toBeVisible({ timeout: 25_000 });
  await createPublicNote(page, appPath, content, title);
  await waitForNoteCardVisible(page, content, 15_000);
  await editNoteByContent(page, content, content + ' edited');
  await waitForNoteCardVisible(page, content + ' edited', 20_000);
  await deleteNoteByContent(page, content + ' edited');
  await waitForNoteCardGone(page, content + ' edited', 10_000);
});

Your Notes

Only you can see these notes

Loading private notes...

// In-memory state for this page
let privateNotes = [];

// Fetch private notes with Bearer token from Clerk
async function loadPrivateNotes(token) {
  const res = await fetch('/api/private-notes', {
    headers: { Authorization: `Bearer ${token}` },
  });
  privateNotes = await res.json();
  renderPrivateNotes();
}

// Render private note cards and update count badge
function renderPrivateNotes() {
  const grid = document.getElementById('private-notes-grid');
  grid.innerHTML = '';

  if (!privateNotes.length) {
    grid.innerHTML = '<div class="empty-state">No private notes yet.</div>';
    document.getElementById('private-count').textContent = '0';
    return;
  }

  for (const note of privateNotes) {
    grid.appendChild(privateNoteCard(note));
  }

  document.getElementById('private-count').textContent = String(privateNotes.length);
}

// Create a private note then refresh the grid
async function createPrivateNote(title, content, token) {
  await fetch('/api/private-notes', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({ title, content, isPublic: false }),
  });
  await loadPrivateNotes(token);
}

// 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 });
});