feat: ship as a real iOS-installable PWA, restructure bottom nav, fix safe-area

- Add manifest.webmanifest with standalone display + warm-craft theme colors,
  apple-touch-icon, and 192/512/512-maskable icons (frame-with-sunset glyph).
- Add PWA meta tags + viewport-fit=cover so add-to-home-screen produces a
  true standalone app on iOS instead of a Safari bookmark.
- Drop the Shared bottom-nav tab; the in-page sub-tabs already cover that.
  Three nav tabs total (Home / Library / Settings); pending-share badge
  moves to the Library tab. Predicate-based isActive() now correctly
  disambiguates /library vs /library?tab=shared.
- Safe-area handling: bottom nav, bottom sheet, upload overlay, and #app
  respect env(safe-area-inset-*); sticky Library tabs anchor below the
  iPhone status bar. Introduces --bottom-nav-height token consumed by
  Settings, Library, and the toast.
- LibraryView reactively follows route.query.tab so deep-linking
  /library?tab=shared lands on the right sub-tab.
- Theme-color meta syncs client-side via useTheme.applyTheme so the
  user's chosen theme follows them into Android Chrome's chrome bar.

Test suite expanded to 278 tests / 100% line coverage (99.84% statements,
99.78% branches). Remaining gaps are unreachable defensive code.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/test/views/HomeView.test.ts

@@ -1,16 +1,19 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { setActivePinia, createPinia } from 'pinia'
 import { useDevicesStore } from '@/stores/devices'
+import { useUploadStore } from '@/stores/upload'
 import HomeView from '@/views/HomeView.vue'
 import type { Device } from '@/types'
 
+const routerPush = vi.fn()
+
 // Stub heavy child components so tests focus on HomeView logic
 vi.mock('@/components/FrameCard.vue', () => ({
   default: {
     name: 'FrameCard',
     template: '<div class="frame-card-stub" :data-device-id="deviceId" :data-name="name" />',
-    props: ['deviceId', 'name', 'size', 'status', 'orientation'],
+    props: ['deviceId', 'name', 'size', 'status', 'orientation', 'thumbnailUrl'],
     emits: ['add-photo', 'edit'],
   },
 }))
@@ -48,7 +51,7 @@ vi.mock('@/components/OrientationPicker.vue', () => ({
 
 // Stub vue-router so HomeView can call useRouter() without a real router
 vi.mock('vue-router', () => ({
-  useRouter: () => ({ push: vi.fn() }),
+  useRouter: () => ({ push: routerPush }),
 }))
 
 // Stub URL.createObjectURL used by upload store
@@ -161,4 +164,303 @@ describe('HomeView', () => {
     expect(wrapper.find('.home-view__loading').exists()).toBe(true)
     expect(wrapper.text()).toContain('Loading')
   })
+
+  // HV-04: add-photo opens a file picker, primes the upload store, and navigates
+  it('add-photo from a FrameCard primes upload state and routes to /upload', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 7, name: 'Hall' })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    routerPush.mockClear()
+
+    // Spy on createElement so we can intercept the synthetic file input
+    const realCreate = document.createElement.bind(document)
+    let capturedInput: HTMLInputElement | null = null
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+      const el = realCreate(tag)
+      if (tag === 'input') {
+        capturedInput = el as HTMLInputElement
+        // Don't actually open a file dialog
+        ;(el as HTMLInputElement).click = vi.fn()
+      }
+      return el
+    })
+
+    const wrapper = mountView()
+    await flushPromises()
+
+    const card = wrapper.findComponent({ name: 'FrameCard' })
+    await card.vm.$emit('add-photo', 7)
+
+    expect(capturedInput).not.toBeNull()
+    expect(capturedInput!.type).toBe('file')
+
+    const file = new File(['x'], 'photo.jpg', { type: 'image/jpeg' })
+    Object.defineProperty(capturedInput, 'files', { value: [file], configurable: true })
+    capturedInput!.onchange?.(new Event('change'))
+
+    const upload = useUploadStore()
+    expect(upload.originalFile).toStrictEqual(file)
+    expect(upload.contextDeviceId).toBe(7)
+    expect(routerPush).toHaveBeenCalledWith('/upload')
+  })
+
+  it('add-photo without a chosen file does not navigate', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 7 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    routerPush.mockClear()
+
+    const realCreate = document.createElement.bind(document)
+    let capturedInput: HTMLInputElement | null = null
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+      const el = realCreate(tag)
+      if (tag === 'input') {
+        capturedInput = el as HTMLInputElement
+        ;(el as HTMLInputElement).click = vi.fn()
+      }
+      return el
+    })
+
+    const wrapper = mountView()
+    await flushPromises()
+    const card = wrapper.findComponent({ name: 'FrameCard' })
+    await card.vm.$emit('add-photo', 7)
+
+    Object.defineProperty(capturedInput, 'files', { value: [], configurable: true })
+    capturedInput!.onchange?.(new Event('change'))
+
+    expect(routerPush).not.toHaveBeenCalled()
+  })
+
+  // HV-05: edit opens the settings sheet pre-filled from the device record
+  it('edit emits open the settings sheet pre-populated from the device', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 9, name: 'Den', wakeHour: 22, timezone: 'America/Chicago' })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+
+    const wrapper = mountView()
+    await flushPromises()
+
+    const card = wrapper.findComponent({ name: 'FrameCard' })
+    await card.vm.$emit('edit', 9)
+    await flushPromises()
+
+    const sheet = wrapper.findComponent({ name: 'BaseBottomSheet' })
+    expect(sheet.props('modelValue')).toBe(true)
+    // The name input is the first BaseInput stub
+    const nameInput = wrapper.findComponent({ name: 'BaseInput' })
+    expect(nameInput.props('modelValue')).toBe('Den')
+  })
+
+  it('edit for an unknown device id is a no-op', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 1 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+
+    const wrapper = mountView()
+    await flushPromises()
+    const card = wrapper.findComponent({ name: 'FrameCard' })
+    await card.vm.$emit('edit', 999)
+    await flushPromises()
+    const sheet = wrapper.findComponent({ name: 'BaseBottomSheet' })
+    expect(sheet.props('modelValue')).toBe(false)
+  })
+
+  // HV-06: saving the sheet calls updateDevice and closes it
+  it('saving the settings sheet PATCHes via the store and closes', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 5, name: 'Old', wakeHour: 4, timezone: 'UTC' })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const updateSpy = vi.spyOn(devicesStore, 'updateDevice').mockResolvedValue(makeDevice({ id: 5 }))
+
+    const wrapper = mountView()
+    await flushPromises()
+    await wrapper.findComponent({ name: 'FrameCard' }).vm.$emit('edit', 5)
+    await flushPromises()
+
+    // Click save (the only button in the sheet stub for now)
+    const saveBtn = wrapper.findAllComponents({ name: 'BaseButton' })
+      .find(b => b.text().toLowerCase().includes('sav'))!
+    await saveBtn.trigger('click')
+    await flushPromises()
+
+    expect(updateSpy).toHaveBeenCalledWith(5, expect.objectContaining({
+      orientation: 'landscape',
+      wakeHour: 4,
+      timezone: 'UTC',
+    }))
+    const sheet = wrapper.findComponent({ name: 'BaseBottomSheet' })
+    expect(sheet.props('modelValue')).toBe(false)
+  })
+
+  it('passes status="ok" to the FrameCard when lastSeenAt is recent', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 1, lastSeenAt: new Date().toISOString() })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const wrapper = mountView()
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'FrameCard' }).props('status')).toBe('ok')
+  })
+
+  it('passes status="offline" when lastSeenAt is older than the rotation window', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({
+      id: 1,
+      rotationIntervalMinutes: 60,
+      lastSeenAt: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+    })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const wrapper = mountView()
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'FrameCard' }).props('status')).toBe('offline')
+  })
+
+  it('builds a thumbnail URL when the device has a current image', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 1, currentImageId: 42 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const wrapper = mountView()
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'FrameCard' }).props('thumbnailUrl')).toBe('/api/devices/1/preview?v=42')
+  })
+
+  it('prefers lockedImageId over currentImageId for the thumbnail', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 1, lockedImageId: 99, currentImageId: 42 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const wrapper = mountView()
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'FrameCard' }).props('thumbnailUrl')).toBe('/api/devices/1/preview?v=99')
+  })
+
+  it('updates editWakeHour when the user picks a different hour chip', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 5, wakeHour: 4 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    vi.spyOn(devicesStore, 'updateDevice').mockResolvedValue(makeDevice({ id: 5 }))
+
+    const wrapper = mountView()
+    await flushPromises()
+    await wrapper.findComponent({ name: 'FrameCard' }).vm.$emit('edit', 5)
+    await flushPromises()
+
+    const chips = wrapper.findAll('.home-view__interval-chip')
+    const chip8pm = chips.find(c => c.text() === '8 PM')!
+    await chip8pm.trigger('click')
+    expect(chip8pm.classes()).toContain('home-view__interval-chip--on')
+
+    const saveBtn = wrapper.findAllComponents({ name: 'BaseButton' })
+      .find(b => b.text().toLowerCase().includes('sav'))!
+    await saveBtn.trigger('click')
+    await flushPromises()
+    expect(devicesStore.updateDevice).toHaveBeenCalledWith(5, expect.objectContaining({ wakeHour: 20 }))
+  })
+
+  it('saving while no device is being edited is a no-op (defensive guard)', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 1 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const updateSpy = vi.spyOn(devicesStore, 'updateDevice').mockResolvedValue(makeDevice())
+
+    const wrapper = mountView()
+    await flushPromises()
+    // The BaseBottomSheet stub always renders its slot, so the Save button is in
+    // the DOM even before onEdit is called. Clicking it now exercises the
+    // editingDevice null-guard.
+    const saveBtn = wrapper.findAllComponents({ name: 'BaseButton' })
+      .find(b => b.text().toLowerCase().includes('sav'))!
+    await saveBtn.trigger('click')
+    await flushPromises()
+    expect(updateSpy).not.toHaveBeenCalled()
+  })
+
+  it('updates editName/orientation/timezone when their components emit changes', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 5, name: 'Original', wakeHour: 4, timezone: 'UTC' })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const updateSpy = vi.spyOn(devicesStore, 'updateDevice').mockResolvedValue(makeDevice({ id: 5 }))
+
+    const wrapper = mountView()
+    await flushPromises()
+    await wrapper.findComponent({ name: 'FrameCard' }).vm.$emit('edit', 5)
+    await flushPromises()
+
+    await wrapper.findComponent({ name: 'BaseInput' }).vm.$emit('update:modelValue', 'New Name')
+    await wrapper.findComponent({ name: 'OrientationPicker' }).vm.$emit('update:modelValue', 'portrait')
+    const select = wrapper.find('select.home-view__tz-select')
+    ;(select.element as HTMLSelectElement).value = 'America/New_York'
+    await select.trigger('change')
+
+    const saveBtn = wrapper.findAllComponents({ name: 'BaseButton' })
+      .find(b => b.text().toLowerCase().includes('sav'))!
+    await saveBtn.trigger('click')
+    await flushPromises()
+    expect(updateSpy).toHaveBeenCalledWith(5, expect.objectContaining({
+      name: 'New Name',
+      orientation: 'portrait',
+      timezone: 'America/New_York',
+    }))
+  })
+
+  it('edit defaults wakeHour to 4 and timezone to UTC when the device has neither', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({
+      id: 5,
+      name: 'Den',
+      wakeHour: null,
+      timezone: null as any,
+    })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const updateSpy = vi.spyOn(devicesStore, 'updateDevice').mockResolvedValue(makeDevice({ id: 5 }))
+
+    const wrapper = mountView()
+    await flushPromises()
+    await wrapper.findComponent({ name: 'FrameCard' }).vm.$emit('edit', 5)
+    await flushPromises()
+
+    const saveBtn = wrapper.findAllComponents({ name: 'BaseButton' })
+      .find(b => b.text().toLowerCase().includes('sav'))!
+    await saveBtn.trigger('click')
+    await flushPromises()
+    expect(updateSpy).toHaveBeenCalledWith(5, expect.objectContaining({
+      wakeHour: 4,
+      timezone: 'UTC',
+    }))
+  })
+
+  it('the settings sheet closes when the underlying bottom-sheet emits close', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 5 })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+
+    const wrapper = mountView()
+    await flushPromises()
+    await wrapper.findComponent({ name: 'FrameCard' }).vm.$emit('edit', 5)
+    await flushPromises()
+    const sheet = wrapper.findComponent({ name: 'BaseBottomSheet' })
+    expect(sheet.props('modelValue')).toBe(true)
+    await sheet.vm.$emit('update:modelValue', false)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findComponent({ name: 'BaseBottomSheet' }).props('modelValue')).toBe(false)
+  })
+
+  it('saving falls back to the original name when the user clears the field', async () => {
+    const devicesStore = useDevicesStore()
+    devicesStore.devices = [makeDevice({ id: 5, name: 'Original' })]
+    vi.spyOn(devicesStore, 'fetchDevices').mockResolvedValue()
+    const updateSpy = vi.spyOn(devicesStore, 'updateDevice').mockResolvedValue(makeDevice({ id: 5 }))
+
+    const wrapper = mountView()
+    await flushPromises()
+    await wrapper.findComponent({ name: 'FrameCard' }).vm.$emit('edit', 5)
+    await flushPromises()
+    await wrapper.findComponent({ name: 'BaseInput' }).vm.$emit('update:modelValue', '   ')
+
+    const saveBtn = wrapper.findAllComponents({ name: 'BaseButton' })
+      .find(b => b.text().toLowerCase().includes('sav'))!
+    await saveBtn.trigger('click')
+    await flushPromises()
+
+    expect(updateSpy).toHaveBeenCalledWith(5, expect.objectContaining({ name: 'Original' }))
+  })
 })