buttons

Cargo.lock

@@ -2581,7 +2581,7 @@ dependencies = [
 
 [[package]]
 name = "rustpad"
-version = "0.0.32"
+version = "0.0.33"
 dependencies = [
  "argon2",
  "aws-config",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "rustpad"
-version = "0.0.32"
+version = "0.0.33"
 edition = "2024"
 rust-version = "1.94"
 description = "Collaborative Markdown notepad built with Axum, WebSockets and SQLite, PostgreSQL and MySQL"

static/css/styles.css

@@ -4144,3 +4144,71 @@ dialog::backdrop {
 .public-content :is(h1, h2, h3, h4, h5, h6)[id] {
   scroll-margin-top: 88px;
 }
+
+/* Shared semantic action buttons. Keep legacy class names as aliases. */
+.action-button,
+.primary-button,
+.secondary-button,
+.danger-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 16px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  font: inherit;
+  font-weight: 650;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color .15s, border-color .15s, color .15s;
+}
+
+.action-button--primary,
+.primary-button {
+  border-color: #8372ef;
+  background: var(--accent);
+  color: white;
+}
+
+.action-button--primary:hover,
+.primary-button:hover {
+  background: var(--accent-hover);
+}
+
+.action-button--secondary,
+.secondary-button {
+  border-color: var(--border-strong);
+  background: var(--surface-2);
+  color: #d2d8e1;
+}
+
+.action-button--secondary:hover,
+.secondary-button:hover {
+  border-color: #4b5565;
+  background: var(--surface-3);
+}
+
+.action-button--danger,
+.danger-button {
+  border-color: #7f3340;
+  background: #6e2935;
+  color: white;
+}
+
+.action-button--danger:hover,
+.danger-button:hover {
+  background: #7c3040;
+}
+
+.action-button.compact-button {
+  min-height: 36px;
+  padding: 7px 11px;
+}
+
+.file-actions button,
+.file-code button {
+  height: auto;
+}

static/js/home.js

@@ -110,7 +110,7 @@ async function loadResources() {
       const sharedLabel = !item.owned ? `<span class="resource-shared-badge">Shared by ${escapeHtml(item.shared_by || "another user")}</span>` : "";
       const permissionLabel = item.permission === "rw" ? "Read and write" : "Read only";
       row.classList.toggle("resource-row--shared", !Boolean(item.owned));
-      row.innerHTML = `<div class="resource-main"><div class="resource-copy"><div class="resource-title-line"><a href="${item.url}">${escapeHtml(item.title)}</a>${sharedLabel}</div><small>${item.kind === "workspace" ? "Workspace" : "Note"}${item.private ? " · private" : ""}${!item.owned ? ` · ${permissionLabel}` : item.protected ? " · password protected" : ""}</small></div><div class="resource-actions">${item.owned ? `<button type="button" data-privacy>${item.private ? "Make public" : "Make private"}</button><button type="button" data-share>Share</button><button type="button" data-password>Change password</button><button class="danger-button" type="button" data-delete>Delete</button>` : ""}</div></div><div class="resource-inline" data-inline hidden></div>`;
+      row.innerHTML = `<div class="resource-main"><div class="resource-copy"><div class="resource-title-line"><a href="${item.url}">${escapeHtml(item.title)}</a>${sharedLabel}</div><small>${item.kind === "workspace" ? "Workspace" : "Note"}${item.private ? " · private" : ""}${!item.owned ? ` · ${permissionLabel}` : item.protected ? " · password protected" : ""}</small></div><div class="resource-actions">${item.owned ? `<button class="action-button action-button--secondary compact-button" type="button" data-privacy>${item.private ? "Make public" : "Make private"}</button><button class="action-button action-button--primary compact-button" type="button" data-share>Share</button><button class="action-button action-button--secondary compact-button" type="button" data-password>Change password</button><button class="action-button action-button--danger compact-button" type="button" data-delete>Delete</button>` : ""}</div></div><div class="resource-inline" data-inline hidden></div>`;
 
       const inline = row.querySelector("[data-inline]");
       const closeInline = () => { inline.hidden = true; inline.innerHTML = ""; };

static/js/note-files.js

@@ -38,12 +38,11 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, canDelete, to
             <div class="file-meta">${formatBytes(file.size_bytes)} · ${escapeHtml(file.mime_type)}${file.created_at ? ` · ${formatDate(file.created_at)}` : ""} · <span class="file-flag${file.is_attached ? "" : " detached"}">${file.is_attached ? "in note" : "removed from content"}</span></div>
           </div>
           <div class="file-actions">
-            <button data-show-file-code="link" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">Link</button>
+            <button class="action-button action-button--secondary compact-button" data-show-file-code="link" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">Link</button>
-            <button data-show-file-code="markdown" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">Markdown</button>
+            <button class="action-button action-button--primary compact-button" data-show-file-code="markdown" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">Markdown</button>
-            <button data-show-file-code="html" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">HTML</button>
+            ${canDelete() ? `<button class="action-button action-button--danger compact-button" data-delete-file="${file.id}" data-file-name="${escapeHtml(file.filename)}">Delete</button>` : ""}
-            ${canDelete() ? `<button class="file-delete" data-delete-file="${file.id}" data-file-name="${escapeHtml(file.filename)}">Delete</button>` : ""}
           </div>
-          <div class="file-code" hidden><textarea readonly aria-label="Generated file code"></textarea><button data-copy-generated>Copy</button></div>
+          <div class="file-code" hidden><textarea readonly aria-label="Generated file code"></textarea><button class="action-button action-button--primary compact-button" data-copy-generated>Copy</button></div>
         </div>`).join("") : '<p class="dialog-copy">No files uploaded.</p>';
       if (open && !dialog.open) dialog.showModal();
     } catch (error) {
@@ -84,7 +83,6 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, canDelete, to
       const absolute = new URL(showButton.dataset.url, location.origin).href;
       let text = absolute;
       if (showButton.dataset.showFileCode === "markdown") text = showButton.dataset.mime?.startsWith("image/") ? `![${showButton.dataset.name}](${absolute})` : `[${showButton.dataset.name}](${absolute})`;
-      if (showButton.dataset.showFileCode === "html") text = showButton.dataset.mime?.startsWith("image/") ? `<img src="${absolute}" alt="${showButton.dataset.name}">` : `<a href="${absolute}">${showButton.dataset.name}</a>`;
       output.value = text; panel.hidden = false; output.focus(); output.select(); return;
     }
     const copyButton = event.target.closest("[data-copy-generated]");