kanbanqube 1.0.9 → 1.0.10

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/package.json

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

package/public/app.js

@@ -75,6 +75,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");
@@ -247,6 +248,7 @@ function wireEvents() {
   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", () => {
@@ -620,6 +622,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");
@@ -689,11 +693,13 @@ function renderLabelsEditor(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);
+    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");
@@ -724,6 +730,7 @@ function renderLabelsEditor(card) {
   searchInput.type = "search";
   searchInput.placeholder = "Search labels…";
   searchInput.value = state.labelSearchTerm;
+  searchInput.addEventListener("keydown", stopLabelEditorShortcut);
   searchInput.addEventListener("input", () => {
     state.labelSearchTerm = searchInput.value;
     renderCardDialog();
@@ -773,11 +780,21 @@ function renderLabelsEditor(card) {
     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.trim();
-      queueSave("Label updated");
-      renderCardDialog();
-      renderBoard();
+      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");
@@ -786,9 +803,10 @@ function renderLabelsEditor(card) {
       const option = document.createElement("option");
       option.value = color;
       option.textContent = color.replaceAll("_", " ");
-      option.selected = color === label.color;
+        option.selected = color === label.color;
       colorSelect.append(option);
     }
+    colorSelect.addEventListener("keydown", stopLabelEditorShortcut);
     colorSelect.addEventListener("change", () => {
       label.color = colorSelect.value;
       queueSave("Label updated");
@@ -829,6 +847,14 @@ function renderLabelsEditor(card) {
   appendLabelEditorPanel(panel);
 }
 
+function stopLabelEditorShortcut(event) {
+  event.stopPropagation();
+  if (event.key === "Enter") {
+    event.preventDefault();
+    event.currentTarget.blur();
+  }
+}
+
 function appendLabelEditorPanel(panel) {
   const anchor = labelEditorContainer.closest(".sidebar-panel") || labelEditorContainer;
   const rect = anchor.getBoundingClientRect();
@@ -1461,6 +1487,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 +1670,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) {

package/public/index.html

@@ -215,7 +215,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>

package/public/styles.css

@@ -214,6 +214,7 @@ button {
 .topbar-actions,
 .board-meta,
 .lane-actions,
+.archive-header-actions,
 .modal-footer,
 .panel-header,
 .settings-meta {
@@ -222,6 +223,14 @@ button {
   align-items: center;
 }
 
+.archive-header-actions {
+  flex: 0 0 auto;
+}
+
+#promptDialog .modal-footer {
+  margin-top: 1rem;
+}
+
 .primary-button,
 .ghost-button,
 .danger-button,