feat: unify draggable creation button

frontend/src/style.test.ts

@@ -4,6 +4,8 @@ import { describe, expect, it } from 'vitest'
 const css = readFileSync('src/style.css', 'utf8')
 const app = readFileSync('src/App.vue', 'utf8')
 const mvpPanel = readFileSync('src/MvpPanel.vue', 'utf8')
+const countdownPanel = readFileSync('src/CountdownPanel.vue', 'utf8')
+const floatingAdd = readFileSync('src/components/FloatingAddButton.vue', 'utf8')
 
 describe('mobile navigation styles', () => {
   it('keeps the mobile More sheet visible when it is rendered', () => {
@@ -39,8 +41,7 @@ describe('mobile touch targets', () => {
     expect(css).toContain('.icon,.ghost{min-width:44px;min-height:44px;')
     expect(css).toContain('.mini-icon,.row-actions button{min-width:44px;min-height:44px;')
     expect(css).toContain('.bottom button{min-height:44px;')
-    expect(css).toContain('.habit-create button{min-height:44px;')
-    expect(css).toContain('.countdown-add{min-height:44px;')
+    expect(css).toContain('.unified-fab{display:grid;place-items:center;')
     expect(css).toContain('.countdown-modal header button{min-width:44px;min-height:44px;')
   })
 
@@ -50,14 +51,30 @@ describe('mobile touch targets', () => {
   })
 })
 
-describe('mobile add task interaction', () => {
-  it('uses a draggable FAB and an animated add-task sheet', () => {
-    expect(app).toContain('@pointerdown="startFabDrag"')
-    expect(app).toContain('@pointermove="moveFab"')
-    expect(app).toContain('class="task-compose-mask"')
-    expect(app).toContain('class="task-compose-sheet"')
-    expect(css).toContain('.task-compose-enter-active')
-    expect(css).toContain('.fab.dragging')
+describe('unified floating add interaction', () => {
+  it('reuses one draggable FAB component for task, habit, and countdown views', () => {
+    expect(app).toContain("import FloatingAddButton from './components/FloatingAddButton.vue'")
+    expect(app).toContain('<FloatingAddButton')
+    expect(floatingAdd).toContain('class="unified-fab"')
+    expect(floatingAdd).toContain('@pointerdown="startDrag"')
+    expect(floatingAdd).toContain('@pointermove="moveDrag"')
+    expect(floatingAdd).toContain("emit('activate',")
+    expect(css).toContain('.unified-fab.dragging')
+    expect(countdownPanel).toContain('<Transition name="countdown-compose">')
+    expect(css).toContain('.countdown-compose-enter-active')
+    expect(css).toContain('@media(max-width:930px){.unified-fab{bottom:calc(82px + env(safe-area-inset-bottom))}')
+  })
+
+  it('removes inline create forms and opens the correct composer from the FAB', () => {
+    expect(app).not.toContain('class="quick"')
+    expect(mvpPanel).not.toContain('class="habit-create"')
+    expect(countdownPanel).not.toContain('class="countdown-add"')
+    expect(countdownPanel).not.toContain('class="fab countdown-fab')
+    expect(countdownPanel).not.toContain('@click="openCountdownComposer"')
+    expect(app).toContain("activeView==='habits'")
+    expect(app).toContain("activeView==='countdowns'")
+    expect(mvpPanel).toContain('openHabitComposer')
+    expect(countdownPanel).toContain('openCountdownComposer')
   })
 })