kanbanqube 1.0.11 → 1.0.13

package/README.md

@@ -9,7 +9,7 @@
 
 KanbanQube is a local-first Kanban board app for solo users and very small teams. A board lives as normal files in a regular vault folder on your machine and can optionally be placed inside a Git repository, so changes can be versioned and synced with tools you already use.
 
-The app provides lanes, cards, labels, checklists, comments, card covers, file attachments, archived cards, search, and a card-detail view. Uploaded files are stored in an `uploads/` folder, while board data is split into per-object JSON files under `board/` so Git can merge independent card and checklist edits more cleanly.
+The app provides lanes, cards, labels, checklists, comments, due dates, assignees, card covers, file attachments, archived cards, search, keyboard navigation, and a card-detail view. Uploaded files are stored in an `uploads/` folder, while board data is split into per-object JSON files under `board/` so Git can merge independent card and checklist edits more cleanly.
 
 ![KanbanQube board screenshot](screenshot.png)
 
@@ -26,6 +26,7 @@ The app provides lanes, cards, labels, checklists, comments, card covers, file a
 - [Trello Import](#trello-import)
 - [Demo Board](#demo-board)
 - [Identity](#identity)
+- [Assignees And Due Dates](#assignees-and-due-dates)
 - [Attachments And Covers](#attachments-and-covers)
 - [Keyboard Shortcuts](#keyboard-shortcuts)
 - [Development](#development)
@@ -144,6 +145,7 @@ Use the board view for quick work:
 - Click the board title or lane title to rename it inline.
 - Click a card to open its details.
 - Settings can enable inline editing for existing card titles in board lanes.
+- Set due dates and assignees in card details. Cards show due dates and assigned user avatars directly in the board view.
 
 ## Git Sync
 
@@ -210,6 +212,16 @@ git config --global user.email
 
 That name is used for comments and activity entries. The settings dialog shows the detected name and email as read-only values.
 
+KanbanQube also reads commit authors from the vault Git repository and makes them available as assignable users. Git can usually provide the author name and email address from existing commits. If the vault has no Git history, KanbanQube still includes your own detected Git identity.
+
+User avatars are loaded from Gravatar based on email address. If no Gravatar image exists, the app falls back to initials.
+
+## Assignees And Due Dates
+
+Open a card to assign users and set a due date. Assigned users are shown as small avatars on the card in board view, with their name available on hover.
+
+Due dates are stored on the card and shown below the card title in board view. Completed cards keep the due date visible in a completed state, while overdue open cards are highlighted.
+
 ## Attachments And Covers
 
 Drop files onto a card or into the card details view to attach them. Files are uploaded into the vault `uploads/` folder.

package/app.js

@@ -10,6 +10,7 @@ const { createBoardService } = require("./services/boardService");
 const { createGitSyncService } = require("./services/gitSyncService");
 const { createImportService } = require("./services/importService");
 const { createUploadService } = require("./services/uploadService");
+const { createUserService } = require("./services/userService");
 
 function createApp(config) {
   const app = express();
@@ -17,6 +18,7 @@ function createApp(config) {
   const gitSyncService = createGitSyncService(config);
   const importService = createImportService(config);
   const uploadService = createUploadService(config, boardService);
+  const userService = createUserService(config);
 
   app.disable("x-powered-by");
   app.use(express.json({ limit: "5mb", type: "application/json" }));
@@ -27,7 +29,8 @@ function createApp(config) {
     boardService,
     gitSyncService,
     importService,
-    uploadService
+    uploadService,
+    userService
   }));
 
   app.get(`/${config.demoBoardFileName}`, (_request, response) => {
@@ -62,7 +65,8 @@ function createApp(config) {
       boardService,
       gitSyncService,
       importService,
-      uploadService
+      uploadService,
+      userService
     }
   };
 }

package/controllers/configController.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const crypto = require("node:crypto");
+const { gravatarUrlForEmail } = require("../utils/userUtils");
 
 function createConfigController(config, gitService) {
   async function getConfig(_request, response) {
@@ -22,13 +22,6 @@ 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,
-  gravatarUrlForEmail
+  createConfigController
 };

package/controllers/userController.js

@@ -0,0 +1,15 @@
+"use strict";
+
+function createUserController(userService) {
+  async function getUsers(_request, response) {
+    response.json({ users: await userService.listUsers() });
+  }
+
+  return {
+    getUsers
+  };
+}
+
+module.exports = {
+  createUserController
+};

package/package.json

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

package/public/app.js

@@ -24,6 +24,7 @@ const SYNC_TIMESTAMP_FORMAT = {
 const state = {
   board: null,
   config: null,
+  users: [],
   currentUserName: localStorage.getItem(USER_STORAGE_KEY) || "",
   currentUserEmail: localStorage.getItem(USER_EMAIL_STORAGE_KEY) || "",
   showCardDescriptions: localStorage.getItem(SHOW_CARD_DESCRIPTIONS_STORAGE_KEY) === "true",
@@ -81,6 +82,7 @@ const deleteAllArchivedButton = document.getElementById("deleteAllArchivedButton
 
 const cardDialog = document.getElementById("cardDialog");
 const cardTitleInput = document.getElementById("cardTitleInput");
+const cardDueInput = document.getElementById("cardDueInput");
 const archivedCardBanner = document.getElementById("archivedCardBanner");
 const cardDetailsCover = document.getElementById("cardDetailsCover");
 const removeCoverButton = document.getElementById("removeCoverButton");
@@ -92,6 +94,7 @@ const attachmentDropZone = document.getElementById("attachmentDropZone");
 const attachmentsContainer = document.getElementById("attachmentsContainer");
 const editDescriptionButton = document.getElementById("editDescriptionButton");
 const checklistsContainer = document.getElementById("checklistsContainer");
+const assigneesContainer = document.getElementById("assigneesContainer");
 const cardLabels = document.getElementById("cardLabels");
 const labelEditorContainer = document.getElementById("labelEditorContainer");
 const activityList = document.getElementById("activityList");
@@ -169,9 +172,10 @@ try {
 }
 
 async function bootstrap() {
-  const [boardResponse, configResponse] = await Promise.all([
+  const [boardResponse, configResponse, usersResponse] = await Promise.all([
     fetch("/api/board"),
-    fetch("/api/config")
+    fetch("/api/config"),
+    fetch("/api/users")
   ]);
 
   if (!boardResponse.ok) {
@@ -180,6 +184,7 @@ async function bootstrap() {
 
   state.board = await boardResponse.json();
   state.config = configResponse.ok ? await configResponse.json() : { boardFile: "board.json", gitRemote: null, gitUserName: null, gitUserEmail: null };
+  state.users = usersResponse.ok ? (await usersResponse.json()).users || [] : [];
   hydrateIdentityFromGitConfig();
   applyIconStyle();
   settingsBoardFile.textContent = `Storage: ${state.config.workspacePath || "current folder"}`;
@@ -319,6 +324,7 @@ function wireEvents() {
     renderBoard();
     renderCardDialog();
   });
+  cardDueInput.addEventListener("change", updateSelectedCardDueDate);
 
   promptCancelButton.addEventListener("click", () => promptDialog.close("cancel"));
   appDialogCloseButton.addEventListener("click", () => appDialog.close("cancel"));
@@ -570,6 +576,7 @@ function renderCard(card, options = {}) {
   for (const badge of buildCardBadges(card)) {
     const badgeNode = document.createElement("span");
     badgeNode.className = "badge";
+    if (badge.className) badgeNode.classList.add(badge.className);
     if (badge.symbol) {
       const symbol = document.createElement("span");
       symbol.className = "badge-symbol";
@@ -585,6 +592,7 @@ function renderCard(card, options = {}) {
     }
     footer.append(badgeNode);
   }
+  renderBoardCardAssignees(card, footer);
 
   node.addEventListener("click", () => {
     setKeyboardCard(card.id, true);
@@ -615,6 +623,7 @@ function renderCardDialog() {
   if (!card) return;
 
   cardTitleInput.value = card.name || "";
+  cardDueInput.value = dateInputValue(card.due);
   archivedCardBanner.hidden = !isCardArchived(card);
   const coverUrl = coverUrlForCard(card);
   cardDetailsCover.hidden = !coverUrl;
@@ -628,12 +637,121 @@ function renderCardDialog() {
   editDescriptionButton.textContent = state.descriptionEditing ? "Done" : "Edit";
   archiveCardButton.hidden = isCardArchived(card);
 
+  renderAssignees(card);
   renderLabelsEditor(card);
   renderAttachments(card);
   renderChecklists(card);
   renderActivity(card);
 }
 
+function renderBoardCardAssignees(card, footer) {
+  const users = assignedUsersForCard(card).slice(0, 4);
+  if (users.length === 0) return;
+
+  const list = document.createElement("div");
+  list.className = "card-assignee-list";
+  for (const user of users) {
+    list.append(createUserAvatar(user, "small-user-avatar"));
+  }
+  footer.append(list);
+}
+
+function updateSelectedCardDueDate() {
+  const card = getSelectedCard();
+  if (!card) return;
+
+  const previousDue = card.due ?? null;
+  card.due = cardDueInput.value ? `${cardDueInput.value}T12:00:00.000Z` : null;
+  card.dueComplete = card.due ? Boolean(card.dueComplete) : false;
+  if (previousDue === card.due) return;
+
+  touchCard(card);
+  pushAction("updateCard", {
+    idCard: card.id,
+    card: cardActionSnapshot(card),
+    list: { id: card.idList, name: listById(card.idList)?.name || "" },
+    old: { due: previousDue },
+    due: card.due
+  });
+  queueSave(card.due ? "Due date updated" : "Due date removed");
+  renderBoard();
+}
+
+function renderAssignees(card) {
+  assigneesContainer.textContent = "";
+  if (state.users.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "No Git users found yet.";
+    assigneesContainer.append(empty);
+    return;
+  }
+
+  card.kanbanQubeAssignees = Array.isArray(card.kanbanQubeAssignees) ? card.kanbanQubeAssignees : [];
+  for (const user of state.users) {
+    assigneesContainer.append(createAssigneeRow(card, user));
+  }
+}
+
+function createAssigneeRow(card, user) {
+  const row = document.createElement("label");
+  row.className = "assignee-row";
+
+  const checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.checked = card.kanbanQubeAssignees.includes(user.id);
+  checkbox.addEventListener("change", () => {
+    toggleCardAssignee(card, user.id, checkbox.checked);
+  });
+
+  const text = document.createElement("span");
+  text.className = "assignee-name";
+  text.textContent = user.email ? `${user.name || user.email} (${user.email})` : user.name || "Unknown user";
+
+  row.append(checkbox, createUserAvatar(user, "assignee-avatar"), text);
+  return row;
+}
+
+function toggleCardAssignee(card, userId, shouldAssign) {
+  const previousAssignees = Array.isArray(card.kanbanQubeAssignees) ? card.kanbanQubeAssignees : [];
+  card.kanbanQubeAssignees = shouldAssign
+    ? [...new Set([...previousAssignees, userId])]
+    : previousAssignees.filter((candidate) => candidate !== userId);
+  touchCard(card);
+  pushAction("updateCard", {
+    idCard: card.id,
+    card: cardActionSnapshot(card),
+    list: { id: card.idList, name: listById(card.idList)?.name || "" },
+    old: { kanbanQubeAssignees: previousAssignees },
+    kanbanQubeAssignees: card.kanbanQubeAssignees
+  });
+  queueSave("Assignees updated");
+  renderBoard();
+}
+
+function createUserAvatar(user, className) {
+  const avatar = document.createElement("span");
+  avatar.className = className;
+  avatar.dataset.tooltip = user.email ? `${user.name} <${user.email}>` : user.name;
+
+  const image = document.createElement("img");
+  image.alt = "";
+  image.hidden = !user.avatarUrl;
+  if (user.avatarUrl) image.src = user.avatarUrl;
+
+  const fallback = document.createElement("span");
+  fallback.textContent = user.initials || initialsFor(user.name || user.email || "User");
+  fallback.hidden = Boolean(user.avatarUrl);
+
+  image.addEventListener("error", () => {
+    image.hidden = true;
+    fallback.hidden = false;
+  });
+
+  avatar.append(image, fallback);
+  return avatar;
+}
+
 function renderArchiveDialog() {
   archiveList.textContent = "";
   const cards = archivedCards();
@@ -2377,6 +2495,7 @@ async function reloadBoardAfterSync() {
   }
 
   state.board = await response.json();
+  state.users = await loadUsers();
   state.editingBoardTitle = false;
   state.editingBoardTitleValue = "";
   state.editingLaneTitleId = null;
@@ -2393,6 +2512,13 @@ async function reloadBoardAfterSync() {
   render();
 }
 
+async function loadUsers() {
+  const response = await fetch("/api/users");
+  if (!response.ok) return state.users || [];
+  const payload = await response.json();
+  return Array.isArray(payload.users) ? payload.users : [];
+}
+
 async function saveBoardNow() {
   if (!state.board) return;
   state.isSaving = true;
@@ -2494,6 +2620,13 @@ function labelsForCard(card) {
   return (card.idLabels || []).map((labelId) => labels.get(labelId)).filter(Boolean);
 }
 
+function assignedUsersForCard(card) {
+  const users = new Map((state.users || []).map((user) => [user.id, user]));
+  return (Array.isArray(card.kanbanQubeAssignees) ? card.kanbanQubeAssignees : [])
+    .map((userId) => users.get(userId))
+    .filter(Boolean);
+}
+
 function checklistsForCard(cardId) {
   return (state.board.checklists || []).filter((checklist) => checklist.idCard === cardId);
 }
@@ -2545,6 +2678,25 @@ function isCardArchived(card) {
   return Boolean(card?.closed);
 }
 
+function dateInputValue(value) {
+  return typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : "";
+}
+
+function formatDueDate(value) {
+  const input = dateInputValue(value);
+  if (!input) return "";
+  const date = new Date(`${input}T12:00:00`);
+  return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+function dueBadgeClass(card) {
+  if (card.dueComplete) return "badge-due-complete";
+  const input = dateInputValue(card.due);
+  if (!input) return "";
+  const today = new Date().toISOString().slice(0, 10);
+  return input < today ? "badge-due-overdue" : "";
+}
+
 function archivedCards() {
   return [...(state.board?.cards || [])]
     .filter((card) => isCardArchived(card))
@@ -2730,6 +2882,7 @@ function cardElementAfter(container, y) {
 
 function buildCardBadges(card) {
   const badges = [];
+  if (card.due) badges.push({ icon: "clock", text: formatDueDate(card.due), className: dueBadgeClass(card) });
   if (card.badges?.description) badges.push({ icon: "description", text: "" });
   if (card.badges?.comments) badges.push({ icon: "comment", text: String(card.badges.comments) });
   if (card.badges?.checkItems) badges.push({ symbol: "☑", text: `${card.badges.checkItemsChecked || 0}/${card.badges.checkItems}` });
@@ -2739,6 +2892,7 @@ function buildCardBadges(card) {
 
 function createIcon(name) {
   const paths = {
+    clock: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13v5l3 1.8"],
     description: ["M4 6h16M4 12h12M4 18h9"],
     comment: ["M5 5.5h14v9H8.5L5 18V5.5Z"],
     checklist: ["M9 7h11M9 12h11M9 17h11M4 7.2l1.2 1.2L7.5 6M4 12.2l1.2 1.2 2.3-2.4M4 17.2l1.2 1.2 2.3-2.4"],

package/public/index.html

@@ -40,7 +40,6 @@
 
       <section class="board-header">
         <div>
-          <p class="eyebrow">Git-synced board</p>
           <div class="board-title-shell">
             <h1 id="boardTitle">KanbanQube Board</h1>
             <input id="boardTitleInlineInput" class="inline-title-input board-title-inline-input" type="text" maxlength="200" hidden />
@@ -57,6 +56,10 @@
           <div>
             <p class="modal-label">Card details</p>
             <input id="cardTitleInput" class="title-input" type="text" maxlength="200" placeholder="Task" />
+            <label class="card-due-field">
+              <span>Due date</span>
+              <input id="cardDueInput" type="date" />
+            </label>
           </div>
           <button id="closeCardButton" type="button" class="icon-button" aria-label="Close card dialog">✕</button>
         </header>
@@ -97,6 +100,13 @@
           </section>
 
           <aside class="modal-sidebar">
+            <section class="sidebar-panel">
+              <div class="panel-header">
+                <h2>Assignees</h2>
+              </div>
+              <div id="assigneesContainer" class="assignees-container"></div>
+            </section>
+
             <section class="sidebar-panel">
               <div class="panel-header">
                 <h2>Labels</h2>

package/public/styles.css

@@ -388,16 +388,15 @@ button {
 }
 
 .board-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-  gap: 1rem;
-  padding: 1.1rem 1.5rem 0;
+  display: block;
+  padding: 0.75rem 1rem;
+  background: rgba(14, 18, 26, 0.34);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(8px);
 }
 
 .board-header > div:first-child {
   min-width: 0;
-  flex: 1 1 auto;
 }
 
 .eyebrow,
@@ -411,12 +410,29 @@ button {
 
 #boardTitle {
   margin: 0;
-  font-size: clamp(1.75rem, 3vw, 2.4rem);
+  max-width: min(52rem, calc(100vw - 3rem));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
+  line-height: 1.25;
+  font-weight: 800;
 }
 
 .board-title-shell {
   min-width: 0;
-  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  padding: 0;
+}
+
+.board-title-shell:has(.board-title-inline-input:not([hidden])) {
+  padding: 0.45rem 0.65rem;
+  border-radius: calc(10px * var(--ui-scale));
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .meta-badge {
@@ -595,8 +611,11 @@ button {
 }
 
 .board-title-inline-input {
-  font-size: clamp(1.75rem, 3vw, 2.4rem);
-  font-weight: 700;
+  width: min(52rem, calc(100vw - 3rem));
+  max-width: 100%;
+  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
+  line-height: 1.25;
+  font-weight: 800;
 }
 
 .lane-title-inline-input {
@@ -779,6 +798,97 @@ button {
   margin-top: 0.9rem;
   color: var(--muted);
   font-size: 0.9rem;
+  align-items: center;
+}
+
+.card-assignee-list {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.small-user-avatar,
+.assignee-avatar {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+  overflow: visible;
+}
+
+.small-user-avatar {
+  width: calc(26px * var(--ui-scale));
+  height: calc(26px * var(--ui-scale));
+  font-size: 0.68rem;
+}
+
+.assignee-avatar {
+  width: calc(30px * var(--ui-scale));
+  height: calc(30px * var(--ui-scale));
+  font-size: 0.74rem;
+}
+
+.small-user-avatar img,
+.small-user-avatar > span,
+.assignee-avatar img,
+.assignee-avatar > span {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.small-user-avatar img[hidden],
+.small-user-avatar > span[hidden],
+.assignee-avatar img[hidden],
+.assignee-avatar > span[hidden] {
+  display: none !important;
+}
+
+.small-user-avatar img,
+.assignee-avatar img {
+  display: block;
+  object-fit: cover;
+}
+
+.small-user-avatar > span,
+.assignee-avatar > span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.small-user-avatar::after,
+.assignee-avatar::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  right: 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: 20;
+  box-shadow: 0 calc(10px * var(--ui-scale)) calc(24px * var(--ui-scale)) rgba(0, 0, 0, 0.32);
+  transition: opacity 90ms ease;
+}
+
+.small-user-avatar:hover::after,
+.assignee-avatar:hover::after {
+  opacity: 1;
 }
 
 .badge {
@@ -788,6 +898,14 @@ button {
   line-height: 1;
 }
 
+.badge-due-overdue {
+  color: #fecaca;
+}
+
+.badge-due-complete {
+  color: #bbf7d0;
+}
+
 .badge-symbol {
   font-size: 0.95rem;
   line-height: 1;
@@ -1011,6 +1129,24 @@ button {
   width: 100%;
 }
 
+.card-due-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.45rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.card-due-field input {
+  min-height: calc(32px * var(--ui-scale));
+  padding: 0.25rem 0.45rem;
+  border-radius: calc(10px * var(--ui-scale));
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+}
+
 .archived-card-banner {
   margin-bottom: 1rem;
   padding: 0.85rem 1rem;
@@ -1092,7 +1228,10 @@ button {
 }
 
 .modal-large .modal-sidebar {
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-auto-rows: max-content;
+  align-content: start;
+  overflow: auto;
+  padding-right: 0.2rem;
 }
 
 .sidebar-panel,
@@ -1110,12 +1249,6 @@ button {
   min-height: 0;
 }
 
-.modal-large .modal-sidebar .sidebar-panel:nth-of-type(2) {
-  display: grid;
-  overflow: hidden;
-  grid-template-rows: auto auto minmax(0, 1fr);
-}
-
 .modal-large .attachments-panel,
 .modal-large .checklists-panel {
   display: grid;
@@ -1303,6 +1436,32 @@ button {
   gap: 0.7rem;
 }
 
+.assignees-container {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.assignee-row {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.45rem 0.5rem;
+  border-radius: calc(12px * var(--ui-scale));
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.assignee-row input {
+  margin: 0;
+}
+
+.assignee-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .attachment-row {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto auto;
@@ -1657,11 +1816,6 @@ button {
     grid-template-columns: 1fr;
   }
 
-  .board-header {
-    flex-direction: column;
-    align-items: start;
-  }
-
   .modal-grid {
     grid-template-columns: 1fr;
   }

package/routes/apiRoutes.js

@@ -6,6 +6,7 @@ const { createConfigController } = require("../controllers/configController");
 const { createImportController } = require("../controllers/importController");
 const { createSyncController } = require("../controllers/syncController");
 const { createUploadController } = require("../controllers/uploadController");
+const { createUserController } = require("../controllers/userController");
 const { asyncHandler } = require("../middleware/asyncHandler");
 
 function createApiRoutes(services) {
@@ -15,10 +16,12 @@ function createApiRoutes(services) {
   const importController = createImportController(services.boardService, services.importService);
   const syncController = createSyncController(services.gitSyncService);
   const uploadController = createUploadController(services.uploadService);
+  const userController = createUserController(services.userService);
 
   router.get("/board", asyncHandler(boardController.getBoard));
   router.put("/board", asyncHandler(boardController.saveBoard));
   router.get("/config", asyncHandler(configController.getConfig));
+  router.get("/users", asyncHandler(userController.getUsers));
   router.post("/uploads", asyncHandler(uploadController.uploadFiles));
   router.delete("/uploads/:fileName", asyncHandler(uploadController.deleteUpload));
   router.post("/import", asyncHandler(importController.importBoard));

package/services/userService.js

@@ -0,0 +1,63 @@
+"use strict";
+
+const { createGitService } = require("./gitService");
+const { gravatarUrlForEmail, initialsForUser, userIdForIdentity } = require("../utils/userUtils");
+const { nonEmptyString } = require("../utils/stringUtils");
+
+function createUserService(config) {
+  const gitService = createGitService(config);
+
+  return {
+    listUsers: () => listUsers(config, gitService)
+  };
+}
+
+async function listUsers(config, gitService) {
+  const usersByKey = new Map();
+  await addCurrentGitUser(config, gitService, usersByKey);
+  await addCommitAuthors(config, gitService, usersByKey);
+  return [...usersByKey.values()].sort((left, right) => left.name.localeCompare(right.name));
+}
+
+async function addCurrentGitUser(config, gitService, usersByKey) {
+  const [name, email] = await Promise.all([
+    gitService.gitUserName(config.workspaceDir),
+    gitService.gitUserEmail(config.workspaceDir)
+  ]);
+  addUser(usersByKey, name, email, true);
+}
+
+async function addCommitAuthors(config, gitService, usersByKey) {
+  if (!(await gitService.hasGitRepository(config.workspaceDir))) return;
+  const result = await gitService.runGit(config.workspaceDir, ["log", "--format=%aN%x00%aE%x00%ct"]);
+  if (result.code !== 0 || !result.stdout.trim()) return;
+
+  for (const line of result.stdout.split("\n")) {
+    const [name, email, timestamp] = line.split("\0");
+    addUser(usersByKey, name, email, false, Number(timestamp) || 0);
+  }
+}
+
+function addUser(usersByKey, nameValue, emailValue, isCurrentUser = false, lastCommitTime = 0) {
+  const name = nonEmptyString(nameValue);
+  const email = nonEmptyString(emailValue).toLowerCase();
+  if (!name && !email) return;
+
+  const key = email || `name:${name.toLowerCase()}`;
+  const existing = usersByKey.get(key);
+  const next = {
+    id: userIdForIdentity(name, email),
+    name: name || email,
+    email,
+    initials: initialsForUser(name, email),
+    avatarUrl: gravatarUrlForEmail(email),
+    isCurrentUser: Boolean(existing?.isCurrentUser || isCurrentUser),
+    lastCommitTime: Math.max(existing?.lastCommitTime || 0, lastCommitTime)
+  };
+  usersByKey.set(key, next);
+}
+
+module.exports = {
+  createUserService,
+  listUsers
+};

package/utils/userUtils.js

@@ -0,0 +1,29 @@
+"use strict";
+
+const crypto = require("node:crypto");
+
+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`;
+}
+
+function initialsForUser(name, email) {
+  const source = String(name || email || "User").trim();
+  return source
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || "")
+    .join("") || "U";
+}
+
+function userIdForIdentity(name, email) {
+  const source = email ? `email:${email.trim().toLowerCase()}` : `name:${String(name || "user").trim().toLowerCase()}`;
+  return crypto.createHash("sha1").update(source).digest("hex").slice(0, 16);
+}
+
+module.exports = {
+  gravatarUrlForEmail,
+  initialsForUser,
+  userIdForIdentity
+};