feat: strengthen backup and mobile workflows

frontend/src/MemoIntegration.test.ts

@@ -31,7 +31,7 @@ describe('memo shell integration', () => {
     expect(app).toContain("import MemoPanel from './MemoPanel.vue'")
     expect(panel).toContain("import MemoRow")
     expect(panel).toContain("import MemoEditor")
-    expect(app).toContain('<span>任务详情</span>')
+    expect(app).toContain('<span id="task-detail-title">任务详情</span>')
     expect(app).toContain('<div class="field-label"><span>任务备注</span>')
   })
 
@@ -46,6 +46,16 @@ describe('memo shell integration', () => {
     expect(css).toContain('.memo-markdown-preview{min-height:250px')
   })
 
+  it('uses AppSheet for mobile memo detail while keeping desktop detail non-modal', () => {
+    expect(panel).toContain("import AppSheet from './components/AppSheet.vue'")
+    expect(panel).toContain('<AppSheet :open="Boolean(selected)" :modal="mobileDetail"')
+    expect(panel).toContain('panel-class="memo-editor"')
+    expect(panel).toContain('title-id="memo-editor-title"')
+    expect(panel).not.toContain('memo-editor-scrim')
+    expect(editor).not.toContain('aria-modal')
+    expect(editor).not.toContain("event.key !== 'Tab'")
+  })
+
   it('tracks editor state in the shell, reserves desktop space, hides the FAB, and marks mobile background regions inert', () => {
     expect(app).toContain('const memoDetailOpen = ref(false)')
     expect(app).toContain("'memo-detail-open': activeView==='memos' && memoDetailOpen")
@@ -68,6 +78,5 @@ describe('memo shell integration', () => {
     expect(css).toContain('height:min(92dvh,820px)')
     expect(css).toContain('@media(prefers-reduced-motion:reduce){.memo-editor')
     expect(editor).toContain("window.addEventListener('beforeunload'")
-    expect(editor).toContain("event.key !== 'Tab'")
   })
 })