Mercurial

view mrjunejune/src/notes/index.html @ 279:b3b547563ec7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add Google connector service and agent wiki Implement the C/Seobeo Google Drive and Gmail connector with encrypted OAuth storage, Zenbu authentication, browser testing, AI tool discovery, chunked HTTP decoding, and Bazel coverage. Consolidate repository guidance into progressive wiki documentation and enforce arena-first allocation for new first-party C code. Co-authored-by: Copilot <[email protected]> Copilot-Session: 84c338fd-0939-4bb3-b7f3-1062eb213e5d
author MrJuneJune <me@mrjunejune.com>
date Mon, 17 Aug 2026 22:22:36 -0700
parents 60a876c4587a
children
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  {{/parts/base_head.html}}
  <title>Notes</title>
  <style>
    .notes-page {
      min-width: 70%;
      margin: 0 auto;
      padding: var(--zenbu-sys-padding-lg);
    }
    .notes-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: var(--zenbu-sys-space-control);
    }
    .notes-header h1 {
      margin: 0;
      display: flex;
      align-items: center;
      gap: var(--zenbu-sys-space-control);
    }
    .note-id-display {
      font-size: var(--zenbu-sys-font-size-sm);
      color: #666;
      background: #f0f0f0;
      padding:
        var(--zenbu-sys-control-padding-block-xs)
        var(--zenbu-sys-control-padding-inline-sm);
      border-radius: var(--zenbu-sys-radius-control-small);
      font-weight: normal;
    }
    .notes-actions {
      display: flex;
      gap: var(--zenbu-sys-space-related);
      align-items: center;
    }
    .notes-actions button, .notes-actions a {
      border: 1px solid #ccc;
      border-radius: var(--zenbu-sys-radius-control-small);
      background: #fff;
      cursor: pointer;
      text-decoration: none;
      color: #333;
    }
    .notes-actions button:hover, .notes-actions a:hover {
      background: #f5f5f5;
    }
    .notes-actions .btn-primary {
      background: #0078ff;
      color: white;
      border-color: #0078ff;
    }
    .notes-actions .btn-primary:hover {
      background: #0066dd;
    }
    .notes-actions .btn-danger {
      color: #d32f2f;
      border-color: #d32f2f;
    }
    .new-note-dialog {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    .new-note-dialog.show {
      display: flex;
    }
    .new-note-form {
      background: white;
      padding: var(--zenbu-sys-padding-lg);
      border-radius: var(--zenbu-sys-radius-control);
      width: 400px;
      max-width: 90%;
    }
    .new-note-form h2 {
      margin: 0 0 16px 0;
    }
    .new-note-form input {
      width: 100%;
      padding: var(--zenbu-sys-padding-sm);
      border: 1px solid #ccc;
      border-radius: var(--zenbu-sys-radius-control-small);
      font-size: var(--zenbu-sys-font-size-md);
      box-sizing: border-box;
      margin-bottom: 16px;
    }
    .new-note-form .form-actions {
      display: flex;
      gap: var(--zenbu-sys-space-related);
      justify-content: flex-end;
    }
    .new-note-form button {
      border-radius: var(--zenbu-sys-radius-control-small);
      cursor: pointer;
    }
    .new-note-form .btn-cancel {
      background: #f5f5f5;
      border: 1px solid #ccc;
    }
    .new-note-form .btn-create {
      background: #0078ff;
      color: white;
      border: none;
    }
    .note-hint {
      font-size: var(--zenbu-sys-font-size-xs);
      color: #666;
      margin-top: -12px;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  {{/parts/header.html}}

  <main class="notes-page">
    <div class="notes-header">
      <h1>
        Notes
        <span class="note-id-display" id="note-id-display">index</span>
      </h1>
      <div class="notes-actions">
        <zen-button appearance="plain" size="sm">
          <button onclick="goHome()"> Home </button>
        </zen-button>
        <zen-button appearance="plain" size="sm">
          <button onclick="logout()" class="btn-danger">Logout</button>
        </zen-button>
      </div>
    </div>

    <div id="editor-container"></div>
  </main>

  <!-- New Note Dialog -->
  <div class="new-note-dialog" id="new-note-dialog">
    <div class="new-note-form">
      <h2>Create New Note</h2>
      <zen-input appearance="plain" size="md">
        <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)">
      </zen-input>
      <p class="note-hint">Use lowercase letters, numbers, and hyphens only</p>
      <div class="form-actions">
        <zen-button appearance="plain" size="sm">
          <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button>
        </zen-button>
        <zen-button appearance="plain" size="sm">
          <button class="btn-create" onclick="createNewNote()">Create & Open</button>
        </zen-button>
      </div>
    </div>
  </div>

  {{/parts/footer.html}}

  <script src="/public/js/rich_editor.js"></script>
  <script src="/public/editor.js"></script>
</body>
</html>