feat: refine task list visual details

frontend/src/style.test.ts

@@ -43,7 +43,7 @@ describe('unified task due display', () => {
     expect(ordinaryChildren).not.toContain('restoreTask(subtask)')
     expect(ordinaryChildren).not.toContain('purgeTask(subtask)')
     expect(ordinaryChildren).not.toContain('v-if="activeView===\'trash\'" class="task-actions"')
-    expect(app).toContain('<span v-else class="task-actions"><button class="icon ghost"')
+    expect(app).toContain('<span v-else class="task-actions"><button class="icon ghost task-detail-trigger"')
     expect(app).toContain('<span v-if="node.task.priority" class="priority"')
     expect(app).toContain('v-if="node.subtasks.length" class="meta"')
     expect(app).toContain('<span class="meta-item"><ListChecks/>')
@@ -155,11 +155,21 @@ describe('settings sessions and audit activity', () => {
 })
 
 describe('solid cream material system', () => {
-  it('defines three opaque cream surfaces, warm borders, restrained depth, and the radius scale', () => {
-    expect(css).toContain('--surface-canvas:#f6f0e5')
-    expect(css).toContain('--surface-base:#fff9ef')
+  it('defines the approved opaque cream surfaces, text colors, warm border, and status colors', () => {
+    expect(css).toContain('--surface-canvas:#f3ecdf')
+    expect(css).toContain('--surface-base:#fdfaf3')
     expect(css).toContain('--surface-raised:#fffdf8')
-    expect(css).toContain('--border-cream:#e5d7c3')
+    expect(css).toContain('--text-primary:#302a24')
+    expect(css).toContain('--text-secondary:#655b50')
+    expect(css).toContain('--border-cream:#e4d5c0')
+    expect(css).toContain('--accent:#f15a29')
+    expect(css).toContain('--success:#687e61')
+    expect(css).toContain('--radius-list:15px')
+    expect(css).toContain('font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","PingFang SC"')
+    expect(css).toContain('font-variant-numeric:tabular-nums')
+    expect(css).toContain('.habit-progress-bar::-webkit-progress-value{background:var(--success)')
+    expect(css).toContain('.habit-progress-bar::-moz-progress-bar{background:var(--success)')
+    expect(css).not.toContain('linear-gradient(90deg,#f7a066,var(--accent))')
     expect(css).toContain('--highlight-inner:inset 0 1px 0 #fff')
     expect(css).toContain('--radius-control:11px')
     expect(css).toContain('--radius-card:14px')
@@ -199,6 +209,38 @@ describe('solid cream material system', () => {
   })
 })
 
+describe('approved UI detail direction', () => {
+  it('uses one More detail entry for ordinary parent and child rows while preserving Trash and overdue actions', () => {
+    const ordinaryRows = app.slice(app.indexOf('<section class="task-list"'), app.indexOf('</section>', app.indexOf('<section class="task-list"')))
+    expect(ordinaryRows.match(/aria-label="打开任务详情"/g)).toHaveLength(2)
+    expect(ordinaryRows).toContain('@click.stop="selectTask(node.task)"><Ellipsis/>')
+    expect(ordinaryRows).toContain('@click.stop="selectTask(subtask)"><Ellipsis/>')
+    expect(ordinaryRows).not.toContain('aria-label="删除任务"')
+    expect(ordinaryRows).toContain('v-if="activeView===\'trash\'" class="task-actions"')
+    expect(ordinaryRows).toContain('restoreTask(node.task)')
+    expect(ordinaryRows).toContain('purgeTask(node.task)')
+    const overdue = app.slice(app.indexOf('<section v-if="overdueTaskTree.length"'), app.indexOf('<h3 id="today-tasks"'))
+    expect(overdue).not.toContain('aria-label="打开任务详情"')
+  })
+
+  it('keeps the due tail immediately before the More detail entry', () => {
+    expect(app).toContain('</span><span v-else class="task-actions"><button class="icon ghost task-detail-trigger" aria-label="打开任务详情" @click.stop="selectTask(node.task)"><Ellipsis/></button></span>')
+    expect(app).toContain('</span><span v-if="activeView!==\'trash\'" class="task-actions"><button class="icon ghost task-detail-trigger" aria-label="打开任务详情" @click.stop="selectTask(subtask)"><Ellipsis/></button></span>')
+    expect(css).toContain('.task-detail-trigger:hover{color:var(--text-primary);background:#fff7eb}')
+  })
+
+  it('keeps task details on a 12px rhythm with fixed labels and right-aligned controls', () => {
+    expect(css).toContain('.detail-form{min-width:0;grid-template-columns:minmax(0,1fr);padding:19px;display:grid;gap:12px}')
+    expect(css).toContain('.detail-form>label{grid-template-columns:80px 1fr;align-items:center}')
+    expect(css).toContain('.task-detail-field-input{width:190px!important;max-width:100%;justify-self:end}')
+  })
+
+  it('keeps refresh neutral and at least 44px', () => {
+    expect(css).toContain('.topbar-refresh{width:44px;height:44px;min-width:44px;border-radius:50%;color:var(--text-secondary)}')
+    expect(css).not.toContain('.topbar-refresh:hover:not(:disabled){background:#fff7eb;color:var(--accent)}')
+  })
+})
+
 describe('completion feedback motion', () => {
   it('delays removal only when a completed row will become hidden', () => {
     expect(shouldAnimateCompletionExit({ completing: true, showCompleted: false })).toBe(true)
@@ -601,7 +643,7 @@ describe('task and habit row decoration', () => {
     expect(css).toContain('.habit-progress{margin-left:auto;')
     expect(css).toContain('font-size:16px')
     expect(css).toContain('.habit-progress-bar{grid-column:1/-1;')
-    expect(css).toContain('.habit-progress-bar::-webkit-progress-value{background:linear-gradient')
+    expect(css).toContain('.habit-progress-bar::-webkit-progress-value{background:var(--success)')
   })
 
   it('restores the current page and list from local storage', () => {