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/components/BaseInput.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseInput from '@/components/BaseInput.vue'
+
+describe('BaseInput', () => {
+  it('renders with label and default empty value', () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Name' } })
+    expect(wrapper.find('label').text()).toBe('Name')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('')
+    expect(wrapper.find('.input-wrap--filled').exists()).toBe(false)
+  })
+
+  it('binds modelValue and emits update:modelValue on input', async () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Name', modelValue: 'Bob' } })
+    const input = wrapper.find('input')
+    expect((input.element as HTMLInputElement).value).toBe('Bob')
+
+    await input.setValue('Alice')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Alice'])
+  })
+
+  it('marks .input-wrap--filled when modelValue is non-empty', () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Name', modelValue: 'x' } })
+    expect(wrapper.find('.input-wrap--filled').exists()).toBe(true)
+  })
+
+  it('emits blur events', async () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Name' } })
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.emitted('blur')).toBeTruthy()
+  })
+
+  it('renders error message and applies error class when error is set', () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Name', error: 'Required' } })
+    expect(wrapper.find('.input-wrap--error').exists()).toBe(true)
+    expect(wrapper.find('.input-wrap__error').text()).toBe('Required')
+    expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+  })
+
+  it('honors a custom id and links the label via for=', () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Email', id: 'email' } })
+    expect(wrapper.find('input').attributes('id')).toBe('email')
+    expect(wrapper.find('label').attributes('for')).toBe('email')
+  })
+
+  it('uses a generated id when none is provided', () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Email' } })
+    const id = wrapper.find('input').attributes('id')
+    expect(id).toMatch(/^input-/)
+    expect(wrapper.find('label').attributes('for')).toBe(id)
+  })
+
+  it('passes type prop down to the underlying input', () => {
+    const wrapper = mount(BaseInput, { props: { label: 'Email', type: 'email' } })
+    expect(wrapper.find('input').attributes('type')).toBe('email')
+  })
+})