kanbanqube 1.0.10 → 1.0.12

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.10",
+  "version": "1.0.12",
   "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");
@@ -97,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");
 
@@ -179,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();
@@ -244,6 +246,10 @@ 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());
@@ -266,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);
@@ -370,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);
@@ -420,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);
     }
 
@@ -473,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));
@@ -487,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);
   }
 
@@ -508,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");
@@ -612,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);
@@ -690,32 +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) {
     if (!state.labelEditorOpen) {
-      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);
+      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
@@ -724,127 +755,153 @@ 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("keydown", stopLabelEditorShortcut);
-  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);
-    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();
-      }
-    });
-
-    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();
-    });
-
-    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) {
@@ -1455,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;
@@ -1687,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?",
@@ -1694,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() {
@@ -2824,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>
 
@@ -305,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,7 +212,6 @@ button {
 }
 
 .topbar-actions,
-.board-meta,
 .lane-actions,
 .archive-header-actions,
 .modal-footer,
@@ -223,10 +222,82 @@ 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;
 }
@@ -451,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;
@@ -564,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));
@@ -584,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);
@@ -605,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;
@@ -615,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;
 }