kanbanqube 1.0.9 → 1.0.11

package/README.md

@@ -23,7 +23,7 @@ The app provides lanes, cards, labels, checklists, comments, card covers, file a
 - [Vaults](#vaults)
 - [Board Workflow](#board-workflow)
 - [Git Sync](#git-sync)
-- [Import](#import)
+- [Trello Import](#trello-import)
 - [Demo Board](#demo-board)
 - [Identity](#identity)
 - [Attachments And Covers](#attachments-and-covers)
@@ -125,7 +125,7 @@ vault/
   uploads/
 ```
 
-If `board/` does not exist, KanbanQube creates it automatically. If an older `board.json` exists, KanbanQube imports it into the split `board/` layout the first time it starts. The original `board.json` is left in place but is no longer the active storage file. If `uploads/` does not exist, it is created when the first file is uploaded.
+If `board/` does not exist, KanbanQube creates it automatically. If `uploads/` does not exist, it is created when the first file is uploaded.
 
 Uploaded filenames are made unique while preserving the original name in the UI. For example:
 
@@ -180,9 +180,9 @@ git commit -m "Initialize KanbanQube board"
 git push -u origin main
 ```
 
-## Import
+## Trello Import
 
-KanbanQube can import a board export JSON from Settings. Import is only enabled when the current board has no cards. This keeps accidental replacement of an active board from happening inside the app.
+KanbanQube can import a Trello board export JSON from Settings. Import is only enabled when the current board has no cards. This keeps accidental replacement of an active board from happening inside the app.
 
 Imported data is normalized and written into the split `board/` vault layout.
 
@@ -278,10 +278,4 @@ brew install mathiasconradt/kanbanqube/kanbanqube
 
 ## Star History
 
-<a href="https://www.star-history.com/?repos=mathiasconradt%2Fkanbanqube&type=timeline&logscale=&legend=top-left">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=mathiasconradt/kanbanqube&type=timeline&theme=dark&logscale&legend=top-left" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=mathiasconradt/kanbanqube&type=timeline&logscale&legend=top-left" />
-   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=mathiasconradt/kanbanqube&type=timeline&logscale&legend=top-left" />
- </picture>
-</a>
+[![Star History Chart](https://api.star-history.com/chart?repos=mathiasconradt/kanbanqube&type=timeline&logscale&legend=top-left&nocache)](https://www.star-history.com/?repos=mathiasconradt%2Fkanbanqube&type=timeline&logscale=&legend=top-left)

package/controllers/configController.js

@@ -1,7 +1,10 @@
 "use strict";
 
+const crypto = require("node:crypto");
+
 function createConfigController(config, gitService) {
   async function getConfig(_request, response) {
+    const gitUserEmail = await gitService.gitUserEmail(config.workspaceDir);
     response.json({
       boardFile: config.boardFileName,
       storagePath: config.boardDirName,
@@ -9,7 +12,8 @@ function createConfigController(config, gitService) {
       hasGitRepo: await gitService.hasGitRepository(config.workspaceDir),
       gitRemote: await gitService.gitRemoteOrigin(config.workspaceDir),
       gitUserName: await gitService.gitUserName(config.workspaceDir),
-      gitUserEmail: await gitService.gitUserEmail(config.workspaceDir)
+      gitUserEmail,
+      gravatarUrl: gravatarUrlForEmail(gitUserEmail)
     });
   }
 
@@ -18,6 +22,13 @@ function createConfigController(config, gitService) {
   };
 }
 
+function gravatarUrlForEmail(email) {
+  if (typeof email !== "string" || !email.trim()) return "";
+  const hash = crypto.createHash("md5").update(email.trim().toLowerCase()).digest("hex");
+  return `https://www.gravatar.com/avatar/${hash}?s=64&d=404`;
+}
+
 module.exports = {
-  createConfigController
+  createConfigController,
+  gravatarUrlForEmail
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kanbanqube",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Local-first Kanban board backed by normal files",
   "license": "Apache-2.0",
   "author": "Mathias Conradt",

package/public/app.js

@@ -61,12 +61,14 @@ const aboutImage = document.getElementById("aboutImage");
 const faviconLink = document.getElementById("faviconLink");
 const boardTitle = document.getElementById("boardTitle");
 const boardTitleInlineInput = document.getElementById("boardTitleInlineInput");
-const userBadge = document.getElementById("userBadge");
 const searchInput = document.getElementById("searchInput");
 const saveStatus = document.getElementById("saveStatus");
 const syncButton = document.getElementById("syncButton");
 const archiveButton = document.getElementById("archiveButton");
 const settingsButton = document.getElementById("settingsButton");
+const userAvatarButton = document.getElementById("userAvatarButton");
+const userAvatarImage = document.getElementById("userAvatarImage");
+const userAvatarFallback = document.getElementById("userAvatarFallback");
 const syncLogDialog = document.getElementById("syncLogDialog");
 const syncLogContent = document.getElementById("syncLogContent");
 const syncLogTimestamp = document.getElementById("syncLogTimestamp");
@@ -75,6 +77,7 @@ const syncLogCloseButton = document.getElementById("syncLogCloseButton");
 const archiveDialog = document.getElementById("archiveDialog");
 const archiveList = document.getElementById("archiveList");
 const closeArchiveButton = document.getElementById("closeArchiveButton");
+const deleteAllArchivedButton = document.getElementById("deleteAllArchivedButton");
 
 const cardDialog = document.getElementById("cardDialog");
 const cardTitleInput = document.getElementById("cardTitleInput");
@@ -96,6 +99,7 @@ const addLabelButton = document.getElementById("addLabelButton");
 const commentInput = document.getElementById("commentInput");
 const addCommentButton = document.getElementById("addCommentButton");
 const addChecklistButton = document.getElementById("addChecklistButton");
+const archiveCardButton = document.getElementById("archiveCardButton");
 const deleteCardButton = document.getElementById("deleteCardButton");
 const closeCardButton = document.getElementById("closeCardButton");
 
@@ -178,8 +182,7 @@ async function bootstrap() {
   state.config = configResponse.ok ? await configResponse.json() : { boardFile: "board.json", gitRemote: null, gitUserName: null, gitUserEmail: null };
   hydrateIdentityFromGitConfig();
   applyIconStyle();
-  const storageLabel = state.config.storagePath ? `${state.config.storagePath}/` : (state.config.boardFile || "board.json");
-  settingsBoardFile.textContent = `Storage: ${storageLabel}`;
+  settingsBoardFile.textContent = `Storage: ${state.config.workspacePath || "current folder"}`;
   settingsRemote.textContent = state.config.gitRemote ? `Remote: ${state.config.gitRemote}` : "Remote: not configured";
 
   wireEvents();
@@ -243,10 +246,15 @@ function wireEvents() {
   });
 
   settingsButton.addEventListener("click", openSettingsDialog);
+  userAvatarImage.addEventListener("error", () => {
+    userAvatarImage.hidden = true;
+    userAvatarFallback.hidden = false;
+  });
   archiveButton.addEventListener("click", openArchiveDialog);
   boardTitle.addEventListener("click", startBoardTitleEdit);
   closeSettingsButton.addEventListener("click", () => settingsDialog.close());
   closeArchiveButton.addEventListener("click", () => archiveDialog.close());
+  deleteAllArchivedButton.addEventListener("click", deleteAllArchivedCards);
   saveSettingsButton.addEventListener("click", saveSettings);
   importBoardButton.addEventListener("click", () => importBoardInput.click());
   importBoardInput.addEventListener("change", () => {
@@ -264,6 +272,7 @@ function wireEvents() {
 
   closeCardButton.addEventListener("click", () => cardDialog.close());
   removeCoverButton.addEventListener("click", removeCoverFromSelectedCard);
+  archiveCardButton.addEventListener("click", archiveSelectedCard);
   deleteCardButton.addEventListener("click", deleteSelectedCard);
   addLabelButton.addEventListener("click", toggleLabelEditor);
   addCommentButton.addEventListener("click", addCommentToSelectedCard);
@@ -368,7 +377,7 @@ function renderHeader() {
   boardTitle.classList.toggle("is-inline-editable", true);
   boardTitleInlineInput.hidden = !state.editingBoardTitle;
   boardTitleInlineInput.value = state.editingBoardTitleValue;
-  userBadge.textContent = state.currentUserName.trim() || "Guest";
+  renderUserAvatar();
   const archivedCount = archivedCards().length;
   archiveButton.textContent = archivedCount ? `Archive (${archivedCount})` : "Archive";
   const canSync = Boolean(state.config?.gitRemote);
@@ -418,8 +427,8 @@ function renderBoard() {
     laneNode.querySelector(".lane-count").textContent = String(cardsForList(list.id).length);
 
     const cardList = laneNode.querySelector(".card-list");
-    for (const card of cards) {
-      const cardNode = renderCard(card);
+    for (const [cardIndex, card] of cards.entries()) {
+      const cardNode = renderCard(card, { labelTooltipBelow: cardIndex === 0 });
       cardList.append(cardNode);
     }
 
@@ -471,7 +480,7 @@ async function createLane() {
   render();
 }
 
-function renderCard(card) {
+function renderCard(card, options = {}) {
   const node = cardTemplate.content.firstElementChild.cloneNode(true);
   node.dataset.cardId = card.id;
   node.classList.toggle("is-done", isCardDone(card));
@@ -485,6 +494,8 @@ function renderCard(card) {
     labelNode.className = "card-label";
     labelNode.style.background = colorForLabel(label.color);
     labelNode.title = label.name || label.color;
+    labelNode.dataset.tooltip = label.name || label.color;
+    labelNode.classList.toggle("tooltip-below", Boolean(options.labelTooltipBelow));
     cardLabelsStrip.append(labelNode);
   }
 
@@ -506,10 +517,15 @@ function renderCard(card) {
   });
 
   const archiveButton = node.querySelector(".card-archive-button");
-  archiveButton.hidden = !done;
   archiveButton.addEventListener("click", (event) => {
     event.stopPropagation();
-    archiveCard(card);
+    archiveCard(card, { force: true });
+  });
+
+  const cardDeleteButton = node.querySelector(".card-delete-button");
+  cardDeleteButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    deleteBoardCard(card.id);
   });
 
   const titleNode = node.querySelector(".card-title");
@@ -610,6 +626,7 @@ function renderCardDialog() {
   cardDescriptionDisplay.hidden = state.descriptionEditing;
   cardDescriptionInput.hidden = !state.descriptionEditing;
   editDescriptionButton.textContent = state.descriptionEditing ? "Done" : "Edit";
+  archiveCardButton.hidden = isCardArchived(card);
 
   renderLabelsEditor(card);
   renderAttachments(card);
@@ -620,6 +637,8 @@ function renderCardDialog() {
 function renderArchiveDialog() {
   archiveList.textContent = "";
   const cards = archivedCards();
+  deleteAllArchivedButton.disabled = cards.length === 0;
+  deleteAllArchivedButton.hidden = cards.length === 0;
 
   if (cards.length === 0) {
     const empty = document.createElement("div");
@@ -686,30 +705,48 @@ function renderArchiveDialog() {
 function renderLabelsEditor(card) {
   cardLabels.textContent = "";
   labelEditorContainer.textContent = "";
+  renderLabelSummary(card);
 
+  addLabelButton.textContent = state.labelEditorOpen ? "×" : "+";
+  addLabelButton.setAttribute("aria-label", state.labelEditorOpen ? "Close labels panel" : "Open labels panel");
+  if (!state.labelEditorOpen) return;
+
+  appendLabelEditorPanel(createLabelEditorPanel(card));
+}
+
+function renderLabelSummary(card) {
   const assignedLabels = labelsForCard(card);
   if (assignedLabels.length === 0) {
-    const empty = document.createElement("div");
-    empty.className = "empty-state label-summary-trigger";
-    empty.textContent = "No labels assigned.";
-    empty.addEventListener("click", openLabelEditor);
-    cardLabels.append(empty);
-  } else {
-    for (const label of assignedLabels) {
-      const pill = document.createElement("button");
-      pill.type = "button";
-      pill.className = "label-pill";
-      pill.textContent = label.name || label.color;
-      pill.style.background = colorForLabel(label.color);
-      pill.addEventListener("click", openLabelEditor);
-      cardLabels.append(pill);
+    if (!state.labelEditorOpen) {
+      cardLabels.append(createEmptyLabelSummary());
     }
+    return;
   }
 
-  addLabelButton.textContent = state.labelEditorOpen ? "×" : "+";
-  addLabelButton.setAttribute("aria-label", state.labelEditorOpen ? "Close labels panel" : "Open labels panel");
-  if (!state.labelEditorOpen) return;
+  for (const label of assignedLabels) {
+    cardLabels.append(createLabelPill(label));
+  }
+}
+
+function createEmptyLabelSummary() {
+  const empty = document.createElement("div");
+  empty.className = "empty-state label-summary-trigger";
+  empty.textContent = "No labels assigned.";
+  empty.addEventListener("click", openLabelEditor);
+  return empty;
+}
+
+function createLabelPill(label) {
+  const pill = document.createElement("button");
+  pill.type = "button";
+  pill.className = "label-pill";
+  pill.textContent = label.name || label.color;
+  pill.style.background = colorForLabel(label.color);
+  pill.addEventListener("click", openLabelEditor);
+  return pill;
+}
 
+function createLabelEditorPanel(card) {
   const labels = sortedBoardLabels();
   const searchTerm = state.labelSearchTerm.trim().toLowerCase();
   const filteredLabels = searchTerm
@@ -718,115 +755,161 @@ function renderLabelsEditor(card) {
 
   const panel = document.createElement("section");
   panel.className = "label-editor-panel";
-
-  const searchInput = document.createElement("input");
-  searchInput.className = "label-search-input";
-  searchInput.type = "search";
-  searchInput.placeholder = "Search labels…";
-  searchInput.value = state.labelSearchTerm;
-  searchInput.addEventListener("input", () => {
-    state.labelSearchTerm = searchInput.value;
-    renderCardDialog();
-  });
-  panel.append(searchInput);
+  panel.append(createLabelSearchInput());
 
   if (labels.length === 0) {
-    const empty = document.createElement("div");
-    empty.className = "empty-state";
-    empty.textContent = "No labels yet. Add one for this card.";
-    panel.append(empty);
-    const createButton = document.createElement("button");
-    createButton.type = "button";
-    createButton.className = "ghost-button";
-    createButton.textContent = "Create a new label";
-    createButton.addEventListener("click", addLabelToSelectedCard);
-    panel.append(createButton);
-    appendLabelEditorPanel(panel);
-    return;
+    panel.append(createEmptyLabelsMessage(), createLabelCreateButton());
+    return panel;
   }
 
   const list = document.createElement("div");
   list.className = "label-editor-list";
-
   for (const label of filteredLabels) {
-    const row = document.createElement("div");
-    row.className = "label-editor-row";
-
-    const toggle = document.createElement("input");
-    toggle.className = "label-toggle";
-    toggle.type = "checkbox";
-    toggle.checked = card.idLabels.includes(label.id);
-    toggle.addEventListener("change", () => {
-      if (toggle.checked) {
-        if (!card.idLabels.includes(label.id)) card.idLabels.push(label.id);
-      } else {
-        card.idLabels = card.idLabels.filter((labelId) => labelId !== label.id);
-      }
-      touchCard(card);
-      queueSave("Labels updated");
-      renderCardDialog();
-    });
-
-    const nameInput = document.createElement("input");
-    nameInput.className = "label-name-input";
-    nameInput.type = "text";
-    nameInput.value = label.name || "";
-    nameInput.placeholder = "Label name";
-    nameInput.style.backgroundColor = colorForLabel(label.color);
-    nameInput.addEventListener("input", () => {
-      label.name = nameInput.value.trim();
-      queueSave("Label updated");
-      renderCardDialog();
-      renderBoard();
-    });
-
-    const colorSelect = document.createElement("select");
-    colorSelect.className = "label-color-select";
-    for (const color of labelColorOptions()) {
-      const option = document.createElement("option");
-      option.value = color;
-      option.textContent = color.replaceAll("_", " ");
-      option.selected = color === label.color;
-      colorSelect.append(option);
-    }
-    colorSelect.addEventListener("change", () => {
-      label.color = colorSelect.value;
-      queueSave("Label updated");
-      renderCardDialog();
-      renderBoard();
-    });
-
-    const removeButton = document.createElement("button");
-    removeButton.type = "button";
-    removeButton.className = "icon-button";
-    removeButton.append(createIcon("trash"));
-    removeButton.addEventListener("click", () => {
-      deleteLabel(label.id);
-      queueSave("Label removed");
-      render();
-    });
-
-    row.append(toggle, nameInput, colorSelect, removeButton);
-    list.append(row);
+    list.append(createLabelEditorRow(card, label));
   }
 
   if (filteredLabels.length === 0) {
-    const empty = document.createElement("div");
-    empty.className = "empty-state";
-    empty.textContent = "No labels match that search.";
-    panel.append(empty);
+    panel.append(createNoMatchingLabelsMessage());
   } else {
     panel.append(list);
   }
 
+  panel.append(createLabelCreateButton());
+  return panel;
+}
+
+function createLabelSearchInput() {
+  const searchInput = document.createElement("input");
+  searchInput.className = "label-search-input";
+  searchInput.type = "search";
+  searchInput.placeholder = "Search labels…";
+  searchInput.value = state.labelSearchTerm;
+  searchInput.addEventListener("keydown", stopLabelEditorShortcut);
+  searchInput.addEventListener("input", () => {
+    state.labelSearchTerm = searchInput.value;
+    renderCardDialog();
+  });
+  return searchInput;
+}
+
+function createLabelCreateButton() {
   const createButton = document.createElement("button");
   createButton.type = "button";
   createButton.className = "ghost-button";
   createButton.textContent = "Create a new label";
   createButton.addEventListener("click", addLabelToSelectedCard);
-  panel.append(createButton);
+  return createButton;
+}
+
+function createEmptyLabelsMessage() {
+  const empty = document.createElement("div");
+  empty.className = "empty-state";
+  empty.textContent = "No labels yet. Add one for this card.";
+  return empty;
+}
+
+function createNoMatchingLabelsMessage() {
+  const empty = document.createElement("div");
+  empty.className = "empty-state";
+  empty.textContent = "No labels match that search.";
+  return empty;
+}
+
+function createLabelEditorRow(card, label) {
+  const row = document.createElement("div");
+  row.className = "label-editor-row";
+  row.append(
+    createLabelToggle(card, label),
+    createLabelNameInput(label),
+    createLabelColorSelect(label),
+    createLabelRemoveButton(label)
+  );
+  return row;
+}
+
+function createLabelToggle(card, label) {
+  const toggle = document.createElement("input");
+  toggle.className = "label-toggle";
+  toggle.type = "checkbox";
+  toggle.checked = card.idLabels.includes(label.id);
+  toggle.addEventListener("change", () => {
+    if (toggle.checked) {
+      if (!card.idLabels.includes(label.id)) card.idLabels.push(label.id);
+    } else {
+      card.idLabels = card.idLabels.filter((labelId) => labelId !== label.id);
+    }
+    touchCard(card);
+    queueSave("Labels updated");
+    renderCardDialog();
+  });
+  return toggle;
+}
+
+function createLabelNameInput(label) {
+  const nameInput = document.createElement("input");
+  nameInput.className = "label-name-input";
+  nameInput.type = "text";
+  nameInput.value = label.name || "";
+  nameInput.placeholder = "Label name";
+  nameInput.style.backgroundColor = colorForLabel(label.color);
+  let committedName = label.name || "";
+  nameInput.addEventListener("keydown", stopLabelEditorShortcut);
+  nameInput.addEventListener("input", () => {
+    label.name = nameInput.value;
+  });
+  nameInput.addEventListener("blur", () => {
+    const trimmedName = nameInput.value.trim();
+    if (label.name !== trimmedName) {
+      label.name = trimmedName;
+    }
+    if (committedName !== label.name) {
+      committedName = label.name;
+      queueSave("Label updated");
+      renderBoard();
+    }
+  });
+  return nameInput;
+}
+
+function createLabelColorSelect(label) {
+  const colorSelect = document.createElement("select");
+  colorSelect.className = "label-color-select";
+  for (const color of labelColorOptions()) {
+    const option = document.createElement("option");
+    option.value = color;
+    option.textContent = color.replaceAll("_", " ");
+    option.selected = color === label.color;
+    colorSelect.append(option);
+  }
+  colorSelect.addEventListener("keydown", stopLabelEditorShortcut);
+  colorSelect.addEventListener("change", () => {
+    label.color = colorSelect.value;
+    queueSave("Label updated");
+    renderCardDialog();
+    renderBoard();
+  });
+  return colorSelect;
+}
 
-  appendLabelEditorPanel(panel);
+function createLabelRemoveButton(label) {
+  const removeButton = document.createElement("button");
+  removeButton.type = "button";
+  removeButton.className = "icon-button";
+  removeButton.append(createIcon("trash"));
+  removeButton.addEventListener("click", () => {
+    deleteLabel(label.id);
+    queueSave("Label removed");
+    render();
+  });
+  return removeButton;
+}
+
+function stopLabelEditorShortcut(event) {
+  event.stopPropagation();
+  if (event.key === "Enter") {
+    event.preventDefault();
+    event.currentTarget.blur();
+  }
 }
 
 function appendLabelEditorPanel(panel) {
@@ -1429,6 +1512,13 @@ function archiveCard(card, options = {}) {
   render();
 }
 
+function archiveSelectedCard() {
+  const card = getSelectedCard();
+  if (!card || isCardArchived(card)) return;
+  archiveCard(card, { force: true });
+  cardDialog.close();
+}
+
 function restoreArchivedCard(cardId) {
   const card = (state.board?.cards || []).find((candidate) => candidate.id === cardId);
   if (!card || !isCardArchived(card)) return;
@@ -1461,6 +1551,27 @@ async function deleteArchivedCard(cardId) {
   render();
 }
 
+async function deleteAllArchivedCards() {
+  const cards = archivedCards();
+  if (cards.length === 0) return;
+
+  const confirmed = await openConfirmDialog({
+    label: "Delete archive",
+    title: "Delete all archived cards?",
+    message: `Delete ${cards.length} archived card${cards.length === 1 ? "" : "s"} permanently? This cannot be undone.`,
+    confirmLabel: "Delete all",
+    danger: true
+  });
+  if (!confirmed) return;
+
+  for (const card of cards) {
+    removeCardCompletely(card.id);
+  }
+  state.selectedCardId = null;
+  queueSave("Archived cards deleted");
+  render();
+}
+
 async function deleteLane(listId) {
   const list = listById(listId);
   if (!list) return;
@@ -1623,11 +1734,7 @@ function toggleKeyboardLabel(card, labelIndex) {
 }
 
 function sortedBoardLabels() {
-  return [...(state.board?.labels || [])].sort((left, right) => {
-    const leftName = (left.name || left.color || "").toLowerCase();
-    const rightName = (right.name || right.color || "").toLowerCase();
-    return leftName.localeCompare(rightName);
-  });
+  return [...(state.board?.labels || [])];
 }
 
 function setKeyboardCard(cardId, shouldRender = true) {
@@ -1644,6 +1751,14 @@ function setKeyboardCard(cardId, shouldRender = true) {
 async function deleteSelectedCard() {
   const card = getSelectedCard();
   if (!card) return;
+  if (await deleteBoardCard(card.id)) {
+    cardDialog.close();
+  }
+}
+
+async function deleteBoardCard(cardId) {
+  const card = (state.board?.cards || []).find((candidate) => candidate.id === cardId);
+  if (!card) return false;
   const confirmed = await openConfirmDialog({
     label: "Delete card",
     title: "Delete card?",
@@ -1651,11 +1766,11 @@ async function deleteSelectedCard() {
     confirmLabel: "Delete",
     danger: true
   });
-  if (!confirmed) return;
+  if (!confirmed) return false;
   removeCardCompletely(card.id);
   queueSave("Card deleted");
-  cardDialog.close();
   render();
+  return true;
 }
 
 function addChecklistToSelectedCard() {
@@ -2781,17 +2896,34 @@ function hydrateIdentityFromGitConfig() {
   const gitUserName = storageSafeText(state.config?.gitUserName);
   const gitUserEmail = storageSafeText(state.config?.gitUserEmail);
 
-  if (!state.currentUserName.trim() && gitUserName) {
+  if (gitUserName) {
     state.currentUserName = gitUserName;
     localStorage.setItem(USER_STORAGE_KEY, gitUserName);
   }
 
-  if (!state.currentUserEmail.trim() && gitUserEmail) {
+  if (gitUserEmail) {
     state.currentUserEmail = gitUserEmail;
     localStorage.setItem(USER_EMAIL_STORAGE_KEY, gitUserEmail);
   }
 }
 
+function renderUserAvatar() {
+  const userName = state.currentUserName.trim() || "Guest";
+  userAvatarButton.dataset.tooltip = userName;
+  userAvatarButton.setAttribute("aria-label", userName);
+  userAvatarFallback.textContent = initialsFor(userName);
+
+  const avatarUrl = storageSafeText(state.config?.gravatarUrl);
+  if (avatarUrl && userAvatarImage.src !== avatarUrl) {
+    userAvatarImage.hidden = false;
+    userAvatarFallback.hidden = true;
+    userAvatarImage.src = avatarUrl;
+  } else if (!avatarUrl) {
+    userAvatarImage.hidden = true;
+    userAvatarFallback.hidden = false;
+  }
+}
+
 function colorForLabel(color) {
   return labelColorMap[color] || labelColorMap.blue;
 }

package/public/index.html

@@ -31,6 +31,10 @@
           <button id="syncButton" class="primary-button" type="button">Sync</button>
           <button id="archiveButton" class="ghost-button" type="button">Archive</button>
           <button id="settingsButton" class="ghost-button" type="button">Settings</button>
+          <div id="userAvatarButton" class="user-avatar-button" aria-label="Current user">
+            <img id="userAvatarImage" alt="" hidden />
+            <span id="userAvatarFallback">?</span>
+          </div>
         </div>
       </header>
 
@@ -42,9 +46,6 @@
             <input id="boardTitleInlineInput" class="inline-title-input board-title-inline-input" type="text" maxlength="200" hidden />
           </div>
         </div>
-        <div class="board-meta">
-          <span id="userBadge" class="meta-badge">Guest</span>
-        </div>
       </section>
 
       <main id="boardScroller" class="board-scroller" aria-label="Kanban board"></main>
@@ -116,7 +117,10 @@
               <div id="activityList" class="activity-list"></div>
             </section>
 
-            <button id="deleteCardButton" type="button" class="danger-button">Delete card</button>
+            <div class="card-detail-actions">
+              <button id="archiveCardButton" type="button" class="ghost-button">Archive card</button>
+              <button id="deleteCardButton" type="button" class="danger-button">Delete card</button>
+            </div>
           </aside>
         </div>
       </form>
@@ -133,12 +137,12 @@
         </header>
 
         <label class="field">
-          <span>Your name</span>
+          <span>Your name (read-only, from Git config)</span>
           <input id="settingsUserName" type="text" maxlength="120" readonly />
         </label>
 
         <label class="field">
-          <span>Your email</span>
+          <span>Your email (read-only, from Git config)</span>
           <input id="settingsUserEmail" type="email" maxlength="200" readonly />
         </label>
 
@@ -215,7 +219,10 @@
             <p class="modal-label">Archive</p>
             <h2>Archived cards</h2>
           </div>
-          <button id="closeArchiveButton" type="button" class="icon-button" aria-label="Close archive">✕</button>
+          <div class="archive-header-actions">
+            <button id="deleteAllArchivedButton" type="button" class="danger-button">Delete all</button>
+            <button id="closeArchiveButton" type="button" class="icon-button" aria-label="Close archive">✕</button>
+          </div>
         </header>
         <div id="archiveList" class="archive-list"></div>
       </form>
@@ -302,11 +309,18 @@
             <h3 class="card-title">Task</h3>
             <input class="inline-title-input card-title-inline-input" type="text" maxlength="200" placeholder="Task" hidden />
           </div>
-          <button class="card-archive-button" type="button" aria-label="Archive card" data-tooltip="Archive">
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M20.25 7.5v10.125c0 1.036-.84 1.875-1.875 1.875H5.625A1.875 1.875 0 0 1 3.75 17.625V7.5m16.5 0V5.625c0-1.036-.84-1.875-1.875-1.875H5.625A1.875 1.875 0 0 0 3.75 5.625V7.5m16.5 0h-16.5m8.25 4.5v3m0 0 1.5-1.5M12 15l-1.5-1.5" />
-            </svg>
-          </button>
+          <div class="card-hover-actions">
+            <button class="card-archive-button card-hover-action-button" type="button" aria-label="Archive card" data-tooltip="Archive">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M20.25 7.5v10.125c0 1.036-.84 1.875-1.875 1.875H5.625A1.875 1.875 0 0 1 3.75 17.625V7.5m16.5 0V5.625c0-1.036-.84-1.875-1.875-1.875H5.625A1.875 1.875 0 0 0 3.75 5.625V7.5m16.5 0h-16.5m8.25 4.5v3m0 0 1.5-1.5M12 15l-1.5-1.5" />
+              </svg>
+            </button>
+            <button class="card-delete-button card-hover-action-button" type="button" aria-label="Delete card" data-tooltip="Delete">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M3 6h18m-2 0-.9 13.15A2 2 0 0 1 16.1 21H7.9a2 2 0 0 1-2-1.85L5 6m3 0V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6m-6 4v7m4-7v7" />
+              </svg>
+            </button>
+          </div>
         </div>
         <p class="card-description"></p>
         <footer class="card-footer"></footer>

package/public/styles.css

@@ -212,8 +212,8 @@ button {
 }
 
 .topbar-actions,
-.board-meta,
 .lane-actions,
+.archive-header-actions,
 .modal-footer,
 .panel-header,
 .settings-meta {
@@ -222,6 +222,86 @@ button {
   align-items: center;
 }
 
+.user-avatar-button {
+  position: relative;
+  width: calc(34px * var(--ui-scale));
+  min-width: calc(34px * var(--ui-scale));
+  height: calc(34px * var(--ui-scale));
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+  display: inline-grid;
+  place-items: center;
+  overflow: visible;
+  cursor: default;
+}
+
+.user-avatar-button img,
+.user-avatar-button span {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.user-avatar-button img[hidden],
+.user-avatar-button span[hidden] {
+  display: none !important;
+}
+
+.user-avatar-button img {
+  display: block;
+  object-fit: cover;
+}
+
+.user-avatar-button span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.78rem;
+  font-weight: 800;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.user-avatar-button::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.55rem);
+  padding: 0.32rem 0.5rem;
+  border-radius: calc(10px * var(--ui-scale));
+  background: rgba(12, 15, 21, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 30;
+  box-shadow: 0 calc(10px * var(--ui-scale)) calc(24px * var(--ui-scale)) rgba(0, 0, 0, 0.32);
+  transition: opacity 90ms ease;
+}
+
+.user-avatar-button:hover::after {
+  opacity: 1;
+}
+
+.archive-header-actions {
+  flex: 0 0 auto;
+}
+
+.card-detail-actions {
+  display: grid;
+  gap: 0.65rem;
+}
+
+#promptDialog .modal-footer {
+  margin-top: 1rem;
+}
+
 .primary-button,
 .ghost-button,
 .danger-button,
@@ -442,11 +522,42 @@ button {
 }
 
 .card-label {
+  position: relative;
   width: calc(42px * var(--ui-scale));
   height: calc(8px * var(--ui-scale));
   border-radius: 999px;
 }
 
+.card-label::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 0.5rem);
+  padding: 0.32rem 0.5rem;
+  border-radius: calc(10px * var(--ui-scale));
+  background: rgba(12, 15, 21, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10;
+  box-shadow: 0 calc(10px * var(--ui-scale)) calc(24px * var(--ui-scale)) rgba(0, 0, 0, 0.32);
+  transition: opacity 90ms ease;
+}
+
+.card-label:hover::after {
+  opacity: 1;
+}
+
+.card-label.tooltip-below::after {
+  top: calc(100% + 0.5rem);
+  bottom: auto;
+}
+
 .card-cover {
   display: none;
   margin: -0.9rem -0.9rem 0.85rem;
@@ -555,7 +666,14 @@ button {
   background: #22c55e;
 }
 
-.card-archive-button {
+.card-hover-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.card-hover-action-button {
   width: calc(30px * var(--ui-scale));
   min-width: calc(30px * var(--ui-scale));
   height: calc(30px * var(--ui-scale));
@@ -575,7 +693,7 @@ button {
   transition: opacity 140ms ease, color 140ms ease, transform 140ms ease;
 }
 
-.card-archive-button::after {
+.card-hover-action-button::after {
   content: attr(data-tooltip);
   position: absolute;
   right: calc(100% + 0.5rem);
@@ -596,7 +714,7 @@ button {
   transition: opacity 90ms ease;
 }
 
-.card-archive-button svg {
+.card-hover-action-button svg {
   width: calc(23px * var(--ui-scale));
   height: calc(23px * var(--ui-scale));
   stroke: currentColor;
@@ -606,18 +724,22 @@ button {
   stroke-linejoin: round;
 }
 
-.card.is-done:hover .card-archive-button {
+.card:hover .card-hover-action-button {
   opacity: 1;
   pointer-events: auto;
 }
 
-.card-archive-button:hover {
+.card-hover-action-button:hover {
   color: var(--text);
   transform: translateY(-1px);
 }
 
-.card-archive-button:hover::after,
-.card-archive-button:focus-visible::after {
+.card-delete-button:hover {
+  color: #fecaca;
+}
+
+.card-hover-action-button:hover::after,
+.card-hover-action-button:focus-visible::after {
   opacity: 1;
 }