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/components/BaseBottomSheet.vue

@@ -68,7 +68,7 @@ watch(() => props.modelValue, async (open) => {
   width: 100%;
   background: var(--color-surface);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  padding: var(--space-3) var(--space-4) var(--space-6);
+  padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
   max-height: 90dvh;
   overflow-y: auto;
   outline: none;

frontend/src/components/BottomNav.vue

@@ -4,13 +4,13 @@
       v-for="tab in tabs"
       :key="tab.name"
       :to="tab.to"
-      :class="['bottom-nav__tab', { 'bottom-nav__tab--active': isActive(tab.to) }]"
+      :class="['bottom-nav__tab', { 'bottom-nav__tab--active': tab.isActive(route) }]"
       :aria-label="tab.label"
-      :aria-current="isActive(tab.to) ? 'page' : undefined"
+      :aria-current="tab.isActive(route) ? 'page' : undefined"
     >
       <span class="bottom-nav__icon-wrap" aria-hidden="true">
         <span class="bottom-nav__icon" v-html="tab.icon" />
-        <span v-if="tab.name === 'shared' && imagesStore.pendingCount > 0" class="bottom-nav__badge">
+        <span v-if="tab.name === 'library' && imagesStore.pendingCount > 0" class="bottom-nav__badge">
           {{ imagesStore.pendingCount > 9 ? '9+' : imagesStore.pendingCount }}
         </span>
       </span>
@@ -20,44 +20,43 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
 import { useImagesStore } from '@/stores/images'
 
 const route       = useRoute()
 const imagesStore = useImagesStore()
 
-const tabs = [
+interface Tab {
+  name: string
+  label: string
+  to: string
+  icon: string
+  isActive: (r: RouteLocationNormalizedLoaded) => boolean
+}
+
+const tabs: Tab[] = [
   {
     name: 'home',
     label: 'Home',
     to: '/',
     icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg>',
+    isActive: r => r.path === '/',
   },
   {
     name: 'library',
     label: 'Library',
     to: '/library',
     icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
-  },
-  {
-    name: 'shared',
-    label: 'Shared',
-    to: '/library?tab=shared',
-    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
+    isActive: r => r.path.startsWith('/library'),
   },
   {
     name: 'settings',
     label: 'Settings',
     to: '/settings',
     icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+    isActive: r => r.path.startsWith('/settings'),
   },
 ]
-
-function isActive(to: string) {
-  const path = to.split('?')[0]
-  if (path === '/') return route.path === '/'
-  return route.path.startsWith(path)
-}
 </script>
 
 <style scoped lang="scss">
@@ -66,11 +65,11 @@ function isActive(to: string) {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 64px;
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   display: flex;
   z-index: 50;
+  padding-bottom: env(safe-area-inset-bottom);
 
   @media (min-width: 960px) {
     display: none;
@@ -83,6 +82,7 @@ function isActive(to: string) {
     align-items: center;
     justify-content: center;
     gap: 2px;
+    height: 64px;
     color: var(--color-text-muted);
     text-decoration: none;
     min-height: var(--touch-min);