feat: 刷新任务看板 UI 并改进无障碍体验

- 用 CSS 变量为状态列着色，并新增计数徽章样式
- 迁移至 Font Awesome 6，优化工具栏与卡片布局
- 通过 focus-within 显示操作按钮，并支持减少动画偏好
- 通过 data-key-aria / data-key-title 实现 aria-label 与 title 的国际化

src/css/styles.css

@@ -21,6 +21,21 @@
   --shadow-subtle: #00000012;
   --shadow-hover: #0002;
   --shadow-pinned: #ffc10744;
+  --shadow-header: #764ba240;
+  /* Tint/ink pairs per status: tint backs the count pill, ink keeps text readable on it. */
+  --todo-tint: #6c757d1f;
+  --todo-ink: #5c636a;
+  --progress-tint: #ffc1072e;
+  --progress-ink: #7a5c03;
+  --complete-tint: #1987541f;
+  --complete-ink: #146c43;
+  /* Status-agnostic ink for neutral count pills; dark enough to clear AA on --timeline. */
+  --count-ink: #495057;
+  /* Fallbacks so a .status-column without data-status degrades to neutral instead of
+     dropping the declaration entirely at computed-value time. */
+  --status-accent: var(--primary);
+  --status-tint: var(--todo-tint);
+  --status-ink: var(--todo-ink);
 }
 body {
   background: var(--background);
@@ -29,14 +44,32 @@ body {
 .task-header {
   background: linear-gradient(135deg, var(--header-start), var(--header-end));
   color: var(--surface);
-  padding: 1.25rem;
+  padding: 0.85rem 1rem;
-  border-radius: 1rem;
+  border-radius: 0.65rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 4px 14px var(--shadow-header);
 }
 .task-header h1 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
   margin: 0;
 }
+.toolbar {
+  margin-bottom: 0.75rem;
+}
+.toolbar .btn,
+.toolbar .form-control {
+  font-size: 0.875rem;
+  padding-block: 0.4rem;
+}
+.toolbar .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+/* Status columns */
 .status-column {
   background: var(--surface);
   border-radius: 1rem;
@@ -44,6 +77,22 @@ body {
   box-shadow: 0 2px 12px var(--shadow-subtle);
   min-height: 12rem;
 }
+/* Each column publishes its palette so descendants can theme themselves. */
+.status-column[data-status='todo'] {
+  --status-accent: var(--todo);
+  --status-tint: var(--todo-tint);
+  --status-ink: var(--todo-ink);
+}
+.status-column[data-status='inProgress'] {
+  --status-accent: var(--progress);
+  --status-tint: var(--progress-tint);
+  --status-ink: var(--progress-ink);
+}
+.status-column[data-status='completed'] {
+  --status-accent: var(--complete);
+  --status-tint: var(--complete-tint);
+  --status-ink: var(--complete-ink);
+}
 .status-column-header {
   display: flex;
   align-items: center;
@@ -52,15 +101,49 @@ body {
   margin-bottom: 1rem;
 }
 .status-column-header h4 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  min-width: 0;
   font-size: 1rem;
+  font-weight: 600;
   margin: 0;
 }
+/* Direct child only, so the visibility toggle's own icon keeps its muted colour. */
+.status-column-header h4 > i {
+  color: var(--status-ink);
+}
+.status-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 1rem;
+  background: var(--status-tint);
+  color: var(--status-ink);
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
 .sort-selector {
   font-size: 0.72rem;
-  padding: 0.25rem;
+  padding: 0.25rem 0.4rem;
   border: 1px solid var(--timeline);
   border-radius: 0.35rem;
   max-width: 45%;
+  background: var(--surface);
+  color: var(--muted);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.sort-selector:hover {
+  border-color: var(--status-accent);
+}
+.sort-selector:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 1px;
 }
 
 /* Task cards */
@@ -68,7 +151,10 @@ body {
   position: relative;
   border-left: 4px solid var(--primary);
   margin-bottom: 1rem;
-  transition: 0.2s;
+  /* Named properties only: `transition: 0.2s` also animated the overdue/due-soon colour flip. */
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 .task-card:hover {
   transform: translateY(-2px);
@@ -100,24 +186,71 @@ body {
 }
 .task-actions {
   position: absolute;
-  right: 0.35rem;
+  right: 0.5rem;
-  top: 0.35rem;
+  top: 0.5rem;
-  z-index: 2;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  /* flex discards the inter-tag whitespace the original leaned on, so the gap has to be
+     declared rather than inherited from the markup's `ms-1` + collapsed space. */
+  gap: 0.5rem;
+  padding: 0.125rem;
   background: var(--surface-raised);
-  border-radius: 0.4rem;
+  border-radius: 0.375rem;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
   opacity: 0;
+  transition: opacity 0.15s ease;
 }
-.task-card:hover .task-actions {
+/* focus-within keeps the buttons reachable by keyboard, which hover alone never allowed. */
+.task-card:hover .task-actions,
+.task-card:focus-within .task-actions {
   opacity: 1;
 }
+/* The action bar sits over the title row, so these keep the compact proportions the
+   original shipped with: a 0.8rem icon inside 6px/8px of padding. */
 .task-actions .btn {
-  padding: 0.25rem 0.4rem;
+  flex: 0 0 auto;
+  font-size: 0.8rem;
+}
+.task-actions .task-action-button {
+  padding: 0.375rem 0.5rem;
+}
+.pin-button {
+  color: var(--muted);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+.pin-button:hover,
+.pin-button:focus-visible,
+.pin-button.pinned {
+  color: var(--progress);
+}
+/* The original tinted this button by letting the card's `.pinned` rule leak onto it, which
+   also gave it a 3px top border and left it standing taller than its neighbours. Keeping the
+   tint as a background reproduces the look without disturbing the row. */
+.pin-button.pinned {
+  background: var(--progress-tint);
 }
 .priority-badge {
+  position: relative;
+  z-index: 5;
+  flex: 0 0 auto;
   font-size: 0.7rem;
   border-radius: 1rem;
-  padding: 0.2rem 0.5rem;
+  padding: 0.125rem 0.375rem;
   color: var(--surface);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+/* The action bar overlaps the badge once it fades in, so the badge steps well back
+   instead of competing with the buttons stacked on top of it. */
+.task-card:hover .priority-badge,
+.task-card:focus-within .priority-badge {
+  opacity: 0.3;
+  transform: translateY(-2px);
 }
 .priority-low-badge {
   background: var(--priority-low);
@@ -143,6 +276,25 @@ body {
 /* Timeline */
 .timeline-toggle {
   cursor: pointer;
+  color: var(--muted);
+  transition: color 0.15s ease;
+}
+.timeline-toggle:hover {
+  color: var(--primary);
+}
+.timeline-count {
+  display: inline-block;
+  min-width: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: 1rem;
+  background: var(--timeline);
+  color: var(--count-ink);
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.timeline-caret {
+  margin-left: 0.15rem;
 }
 .timeline {
   position: relative;
@@ -187,8 +339,10 @@ body {
 .timeline-item-actions {
   float: right;
   opacity: 0;
+  transition: opacity 0.15s ease;
 }
-.timeline-item:hover .timeline-item-actions {
+.timeline-item:hover .timeline-item-actions,
+.timeline-item:focus-within .timeline-item-actions {
   opacity: 1;
 }
 
@@ -202,6 +356,11 @@ body {
 }
 .visibility-toggle {
   padding: 0.1rem;
+  color: var(--muted);
+  text-decoration: none;
+}
+.visibility-toggle:hover {
+  color: var(--status-ink);
 }
 .empty-state {
   color: var(--muted);
@@ -211,7 +370,24 @@ body {
 
 /* Responsive */
 @media (max-width: 768px) {
-  .task-actions,
+  /* Flows inline above the card body, so the raised-surface treatment it needs while
+     floating would just paint a white block over overdue/due-soon card tints. */
+  .task-actions {
+    position: static;
+    width: fit-content;
+    margin: 0.5rem 0.5rem 0 auto;
+    background: transparent;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    opacity: 0.9;
+  }
+  /* Nothing covers the badge once the action bar flows inline, and a sticky touch :hover
+     would otherwise leave it stuck at 30% long after the tap. */
+  .task-card:hover .priority-badge,
+  .task-card:focus-within .priority-badge {
+    opacity: 1;
+    transform: none;
+  }
   .timeline-item-actions {
     opacity: 0.9;
   }
@@ -224,7 +400,7 @@ body {
 }
 @media (max-width: 576px) {
   .task-header h1 {
-    font-size: 1.35rem;
+    font-size: 1.2rem;
   }
   .status-column-header {
     align-items: flex-start;
@@ -232,11 +408,47 @@ body {
   .sort-selector {
     max-width: 50%;
   }
+  /* Flex centring only here: the enlarged touch target is taller than the icon's line box,
+     so normal flow would strand the glyph against the top padding. */
   .task-actions .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     min-width: 2.25rem;
     min-height: 2.25rem;
   }
-  .toolbar .btn span:not(#langBtn) {
+  .toolbar .btn {
-    display: none;
+    position: relative;
+    justify-content: center;
+  }
+  /* Collapse to icon-only, but keep the label readable to screen readers —
+     `display: none` would strip these buttons of their accessible name. */
+  .toolbar .btn .toolbar-btn-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .task-card,
+  .task-actions,
+  .timeline-item-actions,
+  .priority-badge,
+  .pin-button,
+  .timeline-toggle,
+  .sort-selector {
+    transition: none;
+  }
+  .task-card:hover {
+    transform: none;
+  }
+  .task-card:hover .priority-badge,
+  .task-card:focus-within .priority-badge {
+    transform: none;
   }
 }

src/index.html

@@ -20,20 +20,32 @@
     <link href="css/styles.css" rel="stylesheet" />
   </head>
   <body>
-    <main class="container-fluid py-3">
+    <main class="container-fluid p-2 p-lg-3">
       <header class="task-header text-center">
-        <h1><i class="fas fa-tasks"></i> <span data-key="appTitle">任务管理系统</span></h1>
+        <h1>
+          <i class="fa-solid fa-list-check"></i> <span data-key="appTitle">任务管理系统</span>
+        </h1>
       </header>
-      <section class="toolbar row g-2 mb-4">
+      <section class="toolbar row g-2">
         <div class="col-lg-7 d-flex flex-wrap gap-2">
           <button id="addTaskBtn" class="btn btn-primary">
-            <i class="fas fa-plus"></i> <span data-key="addTask"></span></button
+            <i class="fa-solid fa-circle-plus fa-fw"></i>
-          ><button id="exportBtn" class="btn btn-success">
+            <span class="toolbar-btn-label" data-key="addTask"></span>
-            <i class="fas fa-download"></i> <span data-key="exportData"></span></button
+          </button>
-          ><button id="importBtn" class="btn btn-warning">
+          <button id="exportBtn" class="btn btn-outline-secondary">
-            <i class="fas fa-upload"></i> <span data-key="importData"></span></button
+            <i class="fa-solid fa-file-arrow-down fa-fw"></i>
-          ><button id="languageBtn" class="btn btn-secondary">
+            <span class="toolbar-btn-label" data-key="exportData"></span>
-            <i class="fas fa-language"></i> <span id="langBtn">EN</span>
+          </button>
+          <button id="importBtn" class="btn btn-outline-secondary">
+            <i class="fa-solid fa-file-arrow-up fa-fw"></i>
+            <span class="toolbar-btn-label" data-key="importData"></span>
+          </button>
+          <button
+            id="languageBtn"
+            class="btn btn-outline-secondary"
+            data-key-title="switchLanguage"
+          >
+            <i class="fa-solid fa-globe fa-fw"></i> <span id="langBtn">EN</span>
           </button>
         </div>
         <div class="col-lg-5">
@@ -43,9 +55,9 @@
               id="searchBtn"
               class="btn btn-outline-secondary"
               type="button"
-              aria-label="Search"
+              data-key-aria="search"
             >
-              <i class="fas fa-search"></i>
+              <i class="fa-solid fa-magnifying-glass fa-fw"></i>
             </button>
           </div>
         </div>
@@ -53,18 +65,17 @@
       <input type="file" id="fileInput" hidden accept=".json" />
       <section class="row g-3" id="taskBoard">
         <div class="col-lg-4">
-          <div class="status-column">
+          <div class="status-column" data-status="todo">
             <div class="status-column-header">
               <h4>
-                <i class="fas fa-list"></i> <span data-key="todo"></span> (<span id="todoCount"
+                <i class="fa-solid fa-list-ul fa-fw"></i> <span data-key="todo"></span>
-                  >0</span
+                <span id="todoCount" class="status-count">0</span>
-                >)
                 <button
                   class="visibility-toggle btn btn-sm btn-link"
                   data-action="toggle-show-hidden"
                   data-status="todo"
                 >
-                  <i class="fas fa-eye"></i>
+                  <i class="fa-solid fa-eye fa-fw"></i>
                 </button>
               </h4>
               <select class="sort-selector" id="todoSort" data-status="todo"></select>
@@ -73,13 +84,11 @@
           </div>
         </div>
         <div class="col-lg-4">
-          <div class="status-column">
+          <div class="status-column" data-status="inProgress">
             <div class="status-column-header">
-              <h4 class="text-warning">
+              <h4>
-                <i class="fas fa-clock"></i> <span data-key="inProgress"></span> (<span
+                <i class="fa-solid fa-hourglass-half fa-fw"></i> <span data-key="inProgress"></span>
-                  id="inProgressCount"
+                <span id="inProgressCount" class="status-count">0</span>
-                  >0</span
-                >)
               </h4>
               <select class="sort-selector" id="inProgressSort" data-status="inProgress"></select>
             </div>
@@ -87,19 +96,17 @@
           </div>
         </div>
         <div class="col-lg-4">
-          <div class="status-column">
+          <div class="status-column" data-status="completed">
             <div class="status-column-header">
-              <h4 class="text-success">
+              <h4>
-                <i class="fas fa-check-circle"></i> <span data-key="completed"></span> (<span
+                <i class="fa-solid fa-circle-check fa-fw"></i> <span data-key="completed"></span>
-                  id="completedCount"
+                <span id="completedCount" class="status-count">0</span>
-                  >0</span
-                >)
                 <button
                   class="visibility-toggle btn btn-sm btn-link"
                   data-action="toggle-show-hidden"
                   data-status="completed"
                 >
-                  <i class="fas fa-eye"></i>
+                  <i class="fa-solid fa-eye fa-fw"></i>
                 </button>
               </h4>
               <select class="sort-selector" id="completedSort" data-status="completed"></select>

src/js/i18n/en.js

@@ -8,12 +8,14 @@ export default {
   exportData: 'Export Data',
   importData: 'Import Data',
   searchPlaceholder: 'Search tasks...',
+  search: 'Search',
   taskTitleLabel: 'Task Title *',
   statusLabel: 'Status',
   progressNotesLabel: 'Progress Notes',
   descriptionLabel: 'Task Description',
   priorityLabel: 'Priority',
   languageLabel: 'Language',
+  switchLanguage: 'Switch language',
   assigneeLabel: 'Assignee',
   dueDateLabel: 'Due Date',
   collaboratorsLabel: 'Collaborators',

src/js/i18n/index.js

@@ -19,6 +19,15 @@ export function applyTranslations(root = document) {
   root.querySelectorAll('[data-key-placeholder]').forEach((element) => {
     element.placeholder = t(element.dataset.keyPlaceholder);
   });
+  // aria-label replaces the accessible name outright, so only use it on icon-only controls.
+  root.querySelectorAll('[data-key-aria]').forEach((element) => {
+    element.setAttribute('aria-label', t(element.dataset.keyAria));
+  });
+  // title only fills in as the accessible name when nothing else provides one, so it is the
+  // safe choice for controls that already show visible text (WCAG 2.5.3 Label in Name).
+  root.querySelectorAll('[data-key-title]').forEach((element) => {
+    element.title = t(element.dataset.keyTitle);
+  });
   const button = document.querySelector('#langBtn');
   if (button) button.textContent = language === 'zh' ? 'EN' : '中文';
 }

src/js/i18n/zh.js

@@ -8,12 +8,14 @@ export default {
   exportData: '导出数据',
   importData: '导入数据',
   searchPlaceholder: '搜索任务...',
+  search: '搜索',
   taskTitleLabel: '任务标题 *',
   statusLabel: '状态',
   progressNotesLabel: '任务进展',
   descriptionLabel: '任务描述',
   priorityLabel: '优先级',
   languageLabel: '语言',
+  switchLanguage: '切换语言',
   assigneeLabel: '负责人',
   dueDateLabel: '到期日期',
   collaboratorsLabel: '协助人员',

src/js/render.js

@@ -57,17 +57,20 @@ function createTimeline(task) {
     ? items
         .map(
           (item) =>
-            `<div class="timeline-item ${escapeHtml(item.type)}" data-timeline-id="${item.id}"><div class="timeline-item-actions"><button class="btn btn-sm btn-outline-primary" data-action="edit-timeline" title="${t('edit')}"><i class="fas fa-edit"></i></button><button class="btn btn-sm btn-outline-danger" data-action="delete-timeline" title="${t('delete')}"><i class="fas fa-trash"></i></button></div><div class="timeline-content"><div class="timeline-date">${escapeHtml(item.date)} - ${escapeHtml(item.userType === 'system' ? t('systemUser') : item.user)}</div><div>${escapeHtml(timelineContent(item))}</div></div><div class="timeline-edit-form d-none"><textarea class="form-control form-control-sm" data-role="timeline-edit">${escapeHtml(timelineContent(item))}</textarea><button class="btn btn-sm btn-primary mt-1" data-action="save-timeline">${t('save')}</button><button class="btn btn-sm btn-secondary mt-1" data-action="cancel-timeline">${t('cancel')}</button><small class="ms-2 text-muted">${t('keyboardHint')}</small></div></div>`,
+            `<div class="timeline-item ${escapeHtml(item.type)}" data-timeline-id="${item.id}"><div class="timeline-item-actions"><button class="btn btn-sm btn-outline-primary" data-action="edit-timeline" title="${t('edit')}"><i class="fa-solid fa-pen-to-square"></i></button><button class="btn btn-sm btn-outline-danger" data-action="delete-timeline" title="${t('delete')}"><i class="fa-solid fa-trash"></i></button></div><div class="timeline-content"><div class="timeline-date">${escapeHtml(item.date)} - ${escapeHtml(item.userType === 'system' ? t('systemUser') : item.user)}</div><div>${escapeHtml(timelineContent(item))}</div></div><div class="timeline-edit-form d-none"><textarea class="form-control form-control-sm" data-role="timeline-edit">${escapeHtml(timelineContent(item))}</textarea><button class="btn btn-sm btn-primary mt-1" data-action="save-timeline">${t('save')}</button><button class="btn btn-sm btn-secondary mt-1" data-action="cancel-timeline">${t('cancel')}</button><small class="ms-2 text-muted">${t('keyboardHint')}</small></div></div>`,
         )
         .join('')
     : `<p class="text-muted small">${t('noTimelineEntries')}</p>`;
-  return `${rows}<div class="timeline-form d-none"><input class="form-control form-control-sm" data-role="timeline-input" placeholder="${t('addTimelinePlaceholder')}"><button class="btn btn-sm btn-primary mt-2" data-action="add-timeline">${t('add')}</button><button class="btn btn-sm btn-secondary mt-2" data-action="cancel-add-timeline">${t('cancel')}</button></div><button class="btn btn-sm btn-outline-primary mt-2" data-action="show-add-timeline"><i class="fas fa-plus"></i> ${t('addEntry')}</button>`;
+  return `${rows}<div class="timeline-form d-none"><input class="form-control form-control-sm" data-role="timeline-input" placeholder="${t('addTimelinePlaceholder')}"><button class="btn btn-sm btn-primary mt-2" data-action="add-timeline">${t('add')}</button><button class="btn btn-sm btn-secondary mt-2" data-action="cancel-add-timeline">${t('cancel')}</button></div><button class="btn btn-sm btn-outline-primary mt-2" data-action="show-add-timeline"><i class="fa-solid fa-plus"></i> ${t('addEntry')}</button>`;
 }
 function createTaskActions(task) {
   const hiddenAction = HIDEABLE_STATUSES.includes(task.status)
-    ? `<button class="btn btn-outline-secondary" data-action="hide" title="${t(task.isHidden ? 'showTask' : 'hideTask')}"><i class="fas ${task.isHidden ? 'fa-eye' : 'fa-eye-slash'}"></i></button>`
+    ? `<button class="btn btn-outline-secondary task-action-button" data-action="hide" title="${t(task.isHidden ? 'showTask' : 'hideTask')}"><i class="fa-solid ${task.isHidden ? 'fa-eye' : 'fa-eye-slash'}"></i></button>`
     : '';
-  return `<div class="task-actions"><button class="btn btn-link" data-action="pin" title="${t(task.isPinned ? 'unpinTask' : 'pinTask')}"><i class="fas fa-thumbtack"></i></button>${hiddenAction}<button class="btn btn-outline-primary" data-action="edit" title="${t('edit')}"><i class="fas fa-edit"></i></button><button class="btn btn-outline-danger" data-action="delete" title="${t('delete')}"><i class="fas fa-trash"></i></button></div>`;
+  const pinClasses = ['btn', 'btn-sm', 'btn-link', 'pin-button', task.isPinned ? 'pinned' : '']
+    .filter(Boolean)
+    .join(' ');
+  return `<div class="task-actions"><button class="${pinClasses}" data-action="pin" title="${t(task.isPinned ? 'unpinTask' : 'pinTask')}"><i class="fa-solid fa-thumbtack"></i></button>${hiddenAction}<button class="btn btn-outline-primary task-action-button" data-action="edit" title="${t('edit')}"><i class="fa-solid fa-pen-to-square"></i></button><button class="btn btn-outline-danger task-action-button" data-action="delete" title="${t('delete')}"><i class="fa-solid fa-trash"></i></button></div>`;
 }
 function createPriorityBadge(task) {
   return `<span class="priority-badge priority-${task.priority}-badge">${t(task.priority)}</span>`;
@@ -134,7 +137,7 @@ function createCard(task) {
   const description = task.description
     ? `<p class="small task-description-display">${escapeHtml(task.description)}</p>`
     : '';
-  return `<article class="${classes}" data-task-id="${task.id}">${createTaskActions(task)}<div class="card-body"><div class="d-flex justify-content-between pe-5"><h6>${escapeHtml(task.title)}</h6>${createPriorityBadge(task)}</div>${description}${createProgress(task)}${createPeople(task)}${createDueDateBlock(task, due)}<div class="timeline-toggle mt-2 pt-2 border-top" data-action="toggle-timeline"><small><i class="fas fa-history"></i> ${t('timeline')} (${task.timeline.length}) <i class="fas fa-chevron-${open ? 'up' : 'down'}"></i></small></div><div class="timeline ${open ? '' : 'd-none'}">${createTimeline(task)}</div></div></article>`;
+  return `<article class="${classes}" data-task-id="${task.id}">${createTaskActions(task)}<div class="card-body"><div class="d-flex justify-content-between align-items-start mb-2"><h6 class="mb-0">${escapeHtml(task.title)}</h6>${createPriorityBadge(task)}</div>${description}${createProgress(task)}${createPeople(task)}${createDueDateBlock(task, due)}<div class="timeline-toggle mt-2 pt-2 border-top" data-action="toggle-timeline"><small><i class="fa-solid fa-clock-rotate-left fa-fw"></i> ${t('timeline')} <span class="timeline-count">${task.timeline.length}</span> <i class="fa-solid fa-chevron-${open ? 'up' : 'down'} timeline-caret"></i></small></div><div class="timeline ${open ? '' : 'd-none'}">${createTimeline(task)}</div></div></article>`;
 }
 export function updateTaskCounts() {
   const tasks = getTasks();
@@ -151,7 +154,8 @@ export function updateTaskCounts() {
     const count = tasks.filter((task) => task.status === status && isHiddenTask(task)).length;
     button.hidden = count === 0;
     button.title = t(getShowHidden(status) ? 'hideHiddenTitle' : 'showHiddenTitle');
-    button.querySelector('i').className = `fas fa-${getShowHidden(status) ? 'eye-slash' : 'eye'}`;
+    button.querySelector('i').className =
+      `fa-solid fa-fw fa-${getShowHidden(status) ? 'eye-slash' : 'eye'}`;
   });
 }
 function updateSearchEmptyState(list) {