fix(documents): refine unread badges and mark all read

web/tests/document-center-new-state.test.mjs

@@ -5,6 +5,7 @@ import {
   countNewDocuments,
   isNewDocument,
   markDocumentViewed,
+  markDocumentsViewed,
   readDocumentScope,
   readViewedDocumentKeys,
   resolveDocumentNewKey,
@@ -47,6 +48,19 @@ test('document center new state counts unseen documents and persists viewed rows
   assert.deepEqual([...readViewedDocumentKeys(storage)], ['owned:claim-1'])
 })
 
+test('document center new state can mark all unread rows as viewed at once', () => {
+  const storage = createMemoryStorage()
+  const rows = [
+    { source: 'owned', claimId: 'claim-1' },
+    { source: 'approval', claimId: 'claim-2' },
+    { source: 'archive', claimId: 'claim-3' }
+  ]
+  const viewedKeys = markDocumentsViewed(rows, readViewedDocumentKeys(storage), storage)
+
+  assert.equal(countNewDocuments(rows, viewedKeys), 0)
+  assert.deepEqual([...readViewedDocumentKeys(storage)], ['owned:claim-1', 'approval:claim-2'])
+})
+
 test('document center archive rows are never marked as new', () => {
   const viewedKeys = readViewedDocumentKeys(createMemoryStorage())
   const rows = [

web/tests/documents-center-status-filter.test.mjs

@@ -137,9 +137,10 @@ test('documents center list shows created time and conditional stay time columns
 })
 
 test('documents center action buttons are scoped to application and reimbursement tabs', () => {
+  assert.match(documentsCenterView, /v-if="showToolbarActions" class="document-actions"/)
   assert.match(
     documentsCenterView,
-    /v-if="\[DOCUMENT_SCOPE_APPLICATION, DOCUMENT_SCOPE_REIMBURSEMENT\]\.includes\(activeScopeTab\)"[\s\S]*class="document-actions"/
+    /const showCreateDocumentActions = computed\(\(\) =>[\s\S]*DOCUMENT_SCOPE_APPLICATION[\s\S]*DOCUMENT_SCOPE_REIMBURSEMENT/
   )
   assert.match(
     documentsCenterView,
@@ -156,6 +157,7 @@ test('documents center category tabs render bubble counts for new documents', ()
   assert.match(documentsCenterView, /readViewedDocumentKeys/)
   assert.match(documentsCenterView, /const viewedDocumentKeys = ref\(readViewedDocumentKeys\(\)\)/)
   assert.match(documentsCenterView, /v-for="tab in scopeTabItems"/)
+  assert.match(documentsCenterView, /<span class="scope-tab-label">/)
   assert.match(documentsCenterView, /<span v-if="tab\.badgeCount > 0" class="scope-tab-badge"/)
   assert.match(documentsCenterView, /tab\.badgeCount > 99 \? '99\+' : tab\.badgeCount/)
   assert.match(documentsCenterView, /const scopeNewCountMap = computed\(\(\) => \(\{/)
@@ -178,6 +180,27 @@ test('documents center category tabs render bubble counts for new documents', ()
     documentsCenterView,
     /const scopeTabItems = computed\(\(\) =>[\s\S]*badgeCount: scopeNewCountMap\.value\[tab\] \|\| 0/
   )
+  assert.match(documentListSharedStyles, /\.scope-tab-label\s*\{[\s\S]*position:\s*relative;/)
+  assert.match(documentListSharedStyles, /\.scope-tab-badge\s*\{[\s\S]*position:\s*absolute;[\s\S]*top:\s*-8px;[\s\S]*height:\s*15px;/)
+})
+
+test('documents center can mark all unread documents as read from toolbar', () => {
+  assert.match(documentsCenterView, /markDocumentsViewed/)
+  assert.match(
+    documentsCenterView,
+    /const allReadableDocumentRows = computed\(\(\) => \[[\s\S]*nonArchivedRows\.value[\s\S]*filterApplicationScopeNewRows\(applicationScopeRows\.value\)[\s\S]*approvalRows\.value/
+  )
+  assert.match(documentsCenterView, /const totalNewDocumentCount = computed\(\(\) => countNewDocuments\(allReadableDocumentRows\.value, viewedDocumentKeys\.value\)\)/)
+  assert.match(documentsCenterView, /const showToolbarActions = computed\(\(\) => showCreateDocumentActions\.value \|\| totalNewDocumentCount\.value > 0\)/)
+  assert.match(
+    documentsCenterView,
+    /<button[\s\S]*v-if="totalNewDocumentCount > 0"[\s\S]*class="mark-read-btn"[\s\S]*@click="markAllDocumentsRead"[\s\S]*一键已读/
+  )
+  assert.match(
+    documentsCenterView,
+    /function markAllDocumentsRead\(\) \{[\s\S]*viewedDocumentKeys\.value = markDocumentsViewed\(allReadableDocumentRows\.value, viewedDocumentKeys\.value\)/
+  )
+  assert.match(documentListSharedStyles, /\.mark-read-btn\s*\{[\s\S]*border:\s*1px solid #fecaca;/)
 })
 
 test('documents center rows show NEW marker until the row is opened', () => {

web/tests/sidebar-document-unread-dot.test.mjs

@@ -8,6 +8,11 @@ const sidebar = readFileSync(
   'utf8'
 )
 
+const sidebarStyles = readFileSync(
+  fileURLToPath(new URL('../src/assets/styles/components/sidebar-rail.css', import.meta.url)),
+  'utf8'
+)
+
 const documentInbox = readFileSync(
   fileURLToPath(new URL('../src/composables/useDocumentCenterInbox.js', import.meta.url)),
   'utf8'
@@ -21,13 +26,16 @@ const documentNewState = readFileSync(
 test('sidebar renders a red dot for unread document center rows', () => {
   assert.match(sidebar, /useDocumentCenterInbox/)
   assert.match(sidebar, /hasUnread: documentInboxHasUnread/)
-  assert.match(sidebar, /<span v-if="item\.hasNewMessage" class="nav-unread-dot" aria-hidden="true"><\/span>/)
+  assert.match(sidebar, /class="nav-label-text"[\s\S]*class="nav-unread-dot nav-unread-dot-label"/)
+  assert.match(sidebar, /class="nav-unread-dot nav-unread-dot-collapsed"/)
   assert.match(sidebar, /hasNewMessage: item\.id === 'documents' \? documentInboxHasUnread\.value : false/)
   assert.match(sidebar, /void refreshDocumentInbox\(\)/)
   assert.match(sidebar, /startDocumentInboxPolling\(\)/)
   assert.match(sidebar, /stopDocumentInboxPolling\(\)/)
-  assert.match(sidebar, /\.nav-unread-dot\s*\{[\s\S]*background:\s*#ef4444;/)
-  assert.match(sidebar, /\.rail-collapsed \.nav-unread-dot\s*\{[\s\S]*position:\s*absolute;/)
+  assert.match(sidebarStyles, /\.nav-label-text\s*\{[\s\S]*position:\s*relative;/)
+  assert.match(sidebarStyles, /\.nav-unread-dot\s*\{[\s\S]*background:\s*#ef4444;/)
+  assert.match(sidebarStyles, /\.nav-unread-dot-label\s*\{[\s\S]*position:\s*absolute;[\s\S]*top:\s*-8px;/)
+  assert.match(sidebarStyles, /\.rail-collapsed \.nav-unread-dot-collapsed\s*\{[\s\S]*position:\s*absolute;/)
 })
 
 test('document inbox reuses document center viewed-key state', () => {