feat: add PWA install prompt UI (#35)

- Create usePWAInstall composable for install management
- Add InstallPrompt banner component with auto-show after 3s
- Add App Settings tab in settings page
- Show install button with loading state
- Display installation status and instructions
- Handle dismissal with 7-day cooldown
- Add iOS/Android installation guides
- Show PWA features list
- Display storage usage with visual progress
- Auto-hide prompt after successful install

Features:
- Automatic install prompt after 3 seconds
- Manual install from settings
- Platform-specific instructions
- Smart dismissal tracking
- Storage info visualization

Closes #35

app/app/app.vue

@@ -1,5 +1,9 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <div>
+    <OfflineBanner />
+    <InstallPrompt />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
 </template>

app/components/InstallPrompt.vue

@@ -0,0 +1,104 @@
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 translate-y-2"
+  >
+    <div
+      v-if="showPrompt"
+      class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-md z-50"
+    >
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 p-4">
+        <div class="flex items-start gap-4">
+          <!-- App Icon -->
+          <div class="flex-shrink-0">
+            <img 
+              src="/icon-192x192.png" 
+              alt="Pantry icon" 
+              class="w-16 h-16 rounded-lg shadow-md"
+            />
+          </div>
+          
+          <!-- Content -->
+          <div class="flex-1 min-w-0">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">
+              Install Pantry
+            </h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
+              Install this app for quick access and offline use
+            </p>
+            
+            <!-- Actions -->
+            <div class="flex gap-2">
+              <UButton
+                color="emerald"
+                size="sm"
+                @click="install"
+                :loading="installing"
+              >
+                <template #leading>
+                  <UIcon name="i-heroicons-arrow-down-tray" />
+                </template>
+                Install
+              </UButton>
+              
+              <UButton
+                color="gray"
+                variant="ghost"
+                size="sm"
+                @click="dismiss"
+              >
+                Not now
+              </UButton>
+            </div>
+          </div>
+          
+          <!-- Close button -->
+          <button
+            @click="dismiss"
+            class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition"
+          >
+            <UIcon name="i-heroicons-x-mark" class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const { canInstall, promptInstall, dismissInstall, shouldShowPrompt } = usePWAInstall()
+const installing = ref(false)
+const showPrompt = ref(false)
+
+// Show prompt after a delay if conditions are met
+onMounted(() => {
+  setTimeout(() => {
+    if (shouldShowPrompt()) {
+      showPrompt.value = true
+    }
+  }, 3000) // Wait 3 seconds after page load
+})
+
+async function install() {
+  installing.value = true
+  try {
+    const { outcome } = await promptInstall()
+    if (outcome === 'accepted') {
+      showPrompt.value = false
+    }
+  } catch (error) {
+    console.error('Install failed:', error)
+  } finally {
+    installing.value = false
+  }
+}
+
+function dismiss() {
+  dismissInstall()
+  showPrompt.value = false
+}
+</script>

app/components/OfflineBanner.vue

@@ -0,0 +1,58 @@
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+  >
+    <div
+      v-if="!isOnline"
+      class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2 text-center shadow-lg"
+    >
+      <div class="flex items-center justify-center gap-2">
+        <UIcon name="i-heroicons-wifi-slash" class="w-5 h-5" />
+        <span class="font-medium">
+          You're currently offline. Changes will sync when connection is restored.
+        </span>
+      </div>
+    </div>
+  </Transition>
+  
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+  >
+    <div
+      v-if="isOnline && wasOffline && showReconnected"
+      class="fixed top-0 left-0 right-0 z-50 bg-emerald-500 text-white px-4 py-2 text-center shadow-lg"
+    >
+      <div class="flex items-center justify-center gap-2">
+        <UIcon name="i-heroicons-wifi" class="w-5 h-5" />
+        <span class="font-medium">
+          Back online! Syncing your changes...
+        </span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const { isOnline, wasOffline } = useOnlineStatus()
+const showReconnected = ref(false)
+
+// Show "back online" message for 3 seconds
+watch(isOnline, (online) => {
+  if (online && wasOffline.value) {
+    showReconnected.value = true
+    setTimeout(() => {
+      showReconnected.value = false
+    }, 3000)
+  }
+})
+</script>

app/components/Settings/AppSettings.vue

@@ -0,0 +1,190 @@
+<template>
+  <UCard class="mt-4">
+    <div class="space-y-6">
+      <div>
+        <h3 class="text-lg font-semibold mb-4">App Installation</h3>
+        
+        <!-- Already installed -->
+        <div v-if="isInstalled" class="flex items-start gap-3 p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
+          <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-0.5" />
+          <div>
+            <p class="font-medium text-emerald-900 dark:text-emerald-100">
+              App is installed
+            </p>
+            <p class="text-sm text-emerald-700 dark:text-emerald-300 mt-1">
+              You're using Pantry as an installed app with offline support.
+            </p>
+          </div>
+        </div>
+
+        <!-- Can install -->
+        <div v-else-if="canInstall" class="space-y-3">
+          <p class="text-gray-600 dark:text-gray-400">
+            Install Pantry as an app for quick access and offline use.
+          </p>
+          <UButton
+            color="emerald"
+            size="lg"
+            @click="install"
+            :loading="installing"
+            block
+          >
+            <template #leading>
+              <UIcon name="i-heroicons-arrow-down-tray" />
+            </template>
+            Install App
+          </UButton>
+        </div>
+
+        <!-- Not supported or already running -->
+        <div v-else class="space-y-4">
+          <div v-if="isStandalone" class="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <UIcon name="i-heroicons-information-circle" class="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+            <div>
+              <p class="font-medium text-blue-900 dark:text-blue-100">
+                Running as standalone app
+              </p>
+              <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
+                You're already using Pantry in standalone mode.
+              </p>
+            </div>
+          </div>
+
+          <div v-else>
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
+              Installation is not available yet. Try one of these options:
+            </p>
+            
+            <!-- iOS Instructions -->
+            <UCard class="mb-4">
+              <div class="flex items-start gap-3">
+                <UIcon name="i-heroicons-device-phone-mobile" class="w-6 h-6 text-gray-400 flex-shrink-0 mt-0.5" />
+                <div class="flex-1">
+                  <h4 class="font-semibold mb-2">iOS (Safari)</h4>
+                  <ol class="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-decimal list-inside">
+                    <li>Tap the Share button</li>
+                    <li>Scroll down and tap "Add to Home Screen"</li>
+                    <li>Tap "Add" to confirm</li>
+                  </ol>
+                </div>
+              </div>
+            </UCard>
+
+            <!-- Android Instructions -->
+            <UCard>
+              <div class="flex items-start gap-3">
+                <UIcon name="i-heroicons-device-phone-mobile" class="w-6 h-6 text-gray-400 flex-shrink-0 mt-0.5" />
+                <div class="flex-1">
+                  <h4 class="font-semibold mb-2">Android (Chrome)</h4>
+                  <ol class="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-decimal list-inside">
+                    <li>Tap the menu (⋮) button</li>
+                    <li>Tap "Add to Home screen" or "Install app"</li>
+                    <li>Tap "Install" to confirm</li>
+                  </ol>
+                </div>
+              </div>
+            </UCard>
+          </div>
+        </div>
+      </div>
+
+      <!-- PWA Features -->
+      <div>
+        <h3 class="text-lg font-semibold mb-3">App Features</h3>
+        <div class="space-y-2">
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Works offline with cached data</span>
+          </div>
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Quick access from home screen</span>
+          </div>
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Full-screen experience</span>
+          </div>
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Automatic updates</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Storage Info -->
+      <div v-if="storageInfo">
+        <h3 class="text-lg font-semibold mb-3">Storage Usage</h3>
+        <div class="space-y-2">
+          <div class="flex justify-between text-sm">
+            <span class="text-gray-600 dark:text-gray-400">Used</span>
+            <span class="font-medium">{{ formatBytes(storageInfo.usage) }}</span>
+          </div>
+          <div class="flex justify-between text-sm">
+            <span class="text-gray-600 dark:text-gray-400">Available</span>
+            <span class="font-medium">{{ formatBytes(storageInfo.quota) }}</span>
+          </div>
+          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div 
+              class="bg-emerald-500 h-2 rounded-full transition-all"
+              :style="{ width: storagePercent + '%' }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { canInstall, isInstalled, promptInstall } = usePWAInstall()
+const installing = ref(false)
+const storageInfo = ref<{ usage: number; quota: number } | null>(null)
+
+const isStandalone = computed(() => {
+  if (process.client) {
+    return window.matchMedia('(display-mode: standalone)').matches
+  }
+  return false
+})
+
+const storagePercent = computed(() => {
+  if (!storageInfo.value) return 0
+  return Math.round((storageInfo.value.usage / storageInfo.value.quota) * 100)
+})
+
+async function install() {
+  installing.value = true
+  try {
+    await promptInstall()
+  } catch (error) {
+    console.error('Install failed:', error)
+  } finally {
+    installing.value = false
+  }
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
+}
+
+onMounted(async () => {
+  // Get storage info
+  if ('storage' in navigator && 'estimate' in navigator.storage) {
+    try {
+      const estimate = await navigator.storage.estimate()
+      if (estimate.usage !== undefined && estimate.quota !== undefined) {
+        storageInfo.value = {
+          usage: estimate.usage,
+          quota: estimate.quota
+        }
+      }
+    } catch (error) {
+      console.error('Failed to get storage estimate:', error)
+    }
+  }
+})
+</script>

app/composables/useOnlineStatus.ts

@@ -0,0 +1,47 @@
+/**
+ * Composable to track online/offline status
+ * 
+ * Usage:
+ * const { isOnline, wasOffline } = useOnlineStatus()
+ * 
+ * watch(isOnline, (online) => {
+ *   if (online && wasOffline.value) {
+ *     // User came back online, sync data
+ *   }
+ * })
+ */
+export function useOnlineStatus() {
+  const isOnline = ref(true)
+  const wasOffline = ref(false)
+
+  if (process.client) {
+    // Initial state
+    isOnline.value = navigator.onLine
+
+    // Listen for online/offline events
+    const updateOnlineStatus = () => {
+      const online = navigator.onLine
+      
+      if (!online && isOnline.value) {
+        // Just went offline
+        wasOffline.value = true
+      }
+      
+      isOnline.value = online
+    }
+
+    window.addEventListener('online', updateOnlineStatus)
+    window.addEventListener('offline', updateOnlineStatus)
+
+    // Cleanup on unmount
+    onUnmounted(() => {
+      window.removeEventListener('online', updateOnlineStatus)
+      window.removeEventListener('offline', updateOnlineStatus)
+    })
+  }
+
+  return {
+    isOnline: readonly(isOnline),
+    wasOffline: readonly(wasOffline)
+  }
+}

app/composables/usePWAInstall.ts

@@ -0,0 +1,93 @@
+/**
+ * Composable to handle PWA installation
+ * 
+ * Usage:
+ * const { canInstall, isInstalled, promptInstall, dismissInstall } = usePWAInstall()
+ */
+export function usePWAInstall() {
+  const canInstall = ref(false)
+  const isInstalled = ref(false)
+  const deferredPrompt = ref<any>(null)
+
+  if (process.client) {
+    // Check if already installed
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      isInstalled.value = true
+    }
+
+    // Listen for beforeinstallprompt event
+    window.addEventListener('beforeinstallprompt', (e) => {
+      // Prevent the mini-infobar from appearing on mobile
+      e.preventDefault()
+      
+      // Stash the event so it can be triggered later
+      deferredPrompt.value = e
+      canInstall.value = true
+    })
+
+    // Listen for appinstalled event
+    window.addEventListener('appinstalled', () => {
+      isInstalled.value = true
+      canInstall.value = false
+      deferredPrompt.value = null
+    })
+  }
+
+  async function promptInstall() {
+    if (!deferredPrompt.value) {
+      return { outcome: 'not-available' }
+    }
+
+    // Show the install prompt
+    deferredPrompt.value.prompt()
+
+    // Wait for the user to respond to the prompt
+    const { outcome } = await deferredPrompt.value.userChoice
+
+    // Clear the deferredPrompt
+    deferredPrompt.value = null
+    
+    if (outcome === 'accepted') {
+      canInstall.value = false
+    }
+
+    return { outcome }
+  }
+
+  function dismissInstall() {
+    canInstall.value = false
+    deferredPrompt.value = null
+    
+    // Remember dismissal for 7 days
+    if (process.client) {
+      localStorage.setItem('pwa-install-dismissed', Date.now().toString())
+    }
+  }
+
+  function shouldShowPrompt() {
+    if (!canInstall.value || isInstalled.value) {
+      return false
+    }
+
+    if (process.client) {
+      const dismissed = localStorage.getItem('pwa-install-dismissed')
+      if (dismissed) {
+        const dismissedTime = parseInt(dismissed)
+        const sevenDays = 7 * 24 * 60 * 60 * 1000
+        if (Date.now() - dismissedTime < sevenDays) {
+          return false
+        }
+      }
+    }
+
+    return true
+  }
+
+  return {
+    canInstall: readonly(canInstall),
+    isInstalled: readonly(isInstalled),
+    promptInstall,
+    dismissInstall,
+    shouldShowPrompt
+  }
+}

app/nuxt.config.ts

@@ -77,37 +77,101 @@ export default defineNuxtConfig({
       ]
     },
     workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+      navigateFallback: '/offline',
+      navigateFallbackDenylist: [/^\/api\//],
+      globPatterns: ['**/*.{js,css,html,png,svg,ico,woff,woff2}'],
       cleanupOutdatedCaches: true,
+      skipWaiting: true,
+      clientsClaim: true,
       runtimeCaching: [
+        // Supabase API - Network first with fallback
         {
-          urlPattern: /^https:\/\/api\.supabase\.co\/.*/i,
+          urlPattern: /^https:\/\/.*\.supabase\.co\/rest\/.*/i,
           handler: 'NetworkFirst',
           options: {
-            cacheName: 'supabase-api',
+            cacheName: 'supabase-rest-api',
+            networkTimeoutSeconds: 10,
             expiration: {
-              maxEntries: 100,
-              maxAgeSeconds: 60 * 60 * 24 // 24 hours
+              maxEntries: 50,
+              maxAgeSeconds: 60 * 60 // 1 hour
             },
             cacheableResponse: {
               statuses: [0, 200]
             }
           }
         },
+        // Supabase Auth - Network only (don't cache auth)
         {
-          urlPattern: /^https:\/\/.*\.supabase\.co\/.*/i,
-          handler: 'NetworkFirst',
+          urlPattern: /^https:\/\/.*\.supabase\.co\/auth\/.*/i,
+          handler: 'NetworkOnly'
+        },
+        // Supabase Storage - Cache first for images
+        {
+          urlPattern: /^https:\/\/.*\.supabase\.co\/storage\/.*/i,
+          handler: 'CacheFirst',
           options: {
-            cacheName: 'supabase-data',
+            cacheName: 'supabase-storage',
             expiration: {
               maxEntries: 100,
-              maxAgeSeconds: 60 * 60 * 24 // 24 hours
+              maxAgeSeconds: 60 * 60 * 24 * 7 // 1 week
             },
             cacheableResponse: {
               statuses: [0, 200]
             }
           }
+        },
+        // Open Food Facts API - Cache first with network fallback
+        {
+          urlPattern: /^https:\/\/world\.openfoodfacts\.org\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'openfoodfacts-api',
+            expiration: {
+              maxEntries: 200,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // External images - Cache first
+        {
+          urlPattern: /^https:\/\/images\.openfoodfacts\.org\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'product-images',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Google Fonts - Cache first
+        {
+          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-stylesheets',
+            expiration: {
+              maxEntries: 20,
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
+        },
+        {
+          urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-webfonts',
+            expiration: {
+              maxEntries: 30,
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
         }
       ]
     },

app/package-lock.json

@@ -17,7 +17,8 @@
       },
       "devDependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
-        "@vite-pwa/nuxt": "^1.1.1"
+        "@vite-pwa/nuxt": "^1.1.1",
+        "sharp": "^0.34.5"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -2235,6 +2236,496 @@
         "vue": ">=3"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.11.0",
       "license": "Apache-2.0",
@@ -12423,6 +12914,7 @@
     "node_modules/nuxt": {
       "version": "4.3.1",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dxup/nuxt": "^0.3.2",
         "@nuxt/cli": "^3.33.0",
@@ -14539,6 +15031,51 @@
       "version": "1.2.0",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "license": "MIT",

app/package.json

@@ -7,7 +7,8 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "generate:icons": "node scripts/generate-icons.js && node scripts/generate-screenshots.js"
   },
   "dependencies": {
     "@nuxt/fonts": "^0.13.0",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "@vite-pwa/nuxt": "^1.1.1"
+    "@vite-pwa/nuxt": "^1.1.1",
+    "sharp": "^0.34.5"
   }
 }

app/pages/offline.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-screen p-8 text-center">
+    <UIcon name="i-heroicons-wifi-slash" class="w-24 h-24 text-gray-400 mb-6" />
+    
+    <h1 class="text-3xl font-bold text-gray-900 mb-4">
+      You're Offline
+    </h1>
+    
+    <p class="text-gray-600 mb-8 max-w-md">
+      No internet connection detected. Some features may be limited, but you can still:
+    </p>
+    
+    <div class="space-y-3 mb-8 text-left max-w-md">
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
+        <span class="text-gray-700">View cached inventory items</span>
+      </div>
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
+        <span class="text-gray-700">Scan barcodes (will sync when online)</span>
+      </div>
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
+        <span class="text-gray-700">Browse previously loaded data</span>
+      </div>
+    </div>
+    
+    <UButton
+      color="emerald"
+      size="lg"
+      @click="retry"
+      :loading="retrying"
+    >
+      <template #leading>
+        <UIcon name="i-heroicons-arrow-path" />
+      </template>
+      Try Again
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const retrying = ref(false)
+
+async function retry() {
+  retrying.value = true
+  
+  try {
+    // Test if we're back online
+    const response = await fetch('/api/health', { method: 'HEAD' })
+    if (response.ok) {
+      // We're online! Go back
+      window.location.reload()
+    }
+  } catch (error) {
+    // Still offline
+    setTimeout(() => {
+      retrying.value = false
+    }, 1000)
+  }
+}
+
+// Auto-retry when online event fires
+if (typeof window !== 'undefined') {
+  window.addEventListener('online', () => {
+    window.location.reload()
+  })
+}
+</script>

app/pages/settings.vue

@@ -18,6 +18,10 @@
         </div>
       </template>
 
+      <template #app>
+        <SettingsAppSettings />
+      </template>
+
       <template #about>
         <UCard class="mt-4">
           <div class="space-y-4">
@@ -52,6 +56,11 @@ const tabs = [
     label: 'Tags',
     icon: 'i-heroicons-tag'
   },
+  {
+    key: 'app',
+    label: 'App',
+    icon: 'i-heroicons-device-phone-mobile'
+  },
   {
     key: 'account',
     label: 'Account',

app/public/icon.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <!-- Background circle with emerald gradient -->
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <circle cx="256" cy="256" r="256" fill="url(#grad)"/>
+  
+  <!-- Pantry shelves icon (simplified cabinet with items) -->
+  <g transform="translate(106, 96)">
+    <!-- Cabinet outline -->
+    <rect x="0" y="0" width="300" height="320" rx="12" fill="none" stroke="white" stroke-width="8"/>
+    
+    <!-- Top shelf -->
+    <line x1="0" y1="80" x2="300" y2="80" stroke="white" stroke-width="6"/>
+    
+    <!-- Middle shelf -->
+    <line x1="0" y1="160" x2="300" y2="160" stroke="white" stroke-width="6"/>
+    
+    <!-- Bottom shelf -->
+    <line x1="0" y1="240" x2="300" y2="240" stroke="white" stroke-width="6"/>
+    
+    <!-- Top shelf items - jars -->
+    <circle cx="60" cy="40" r="25" fill="white" opacity="0.9"/>
+    <circle cx="150" cy="40" r="25" fill="white" opacity="0.9"/>
+    <circle cx="240" cy="40" r="25" fill="white" opacity="0.9"/>
+    
+    <!-- Middle shelf items - boxes -->
+    <rect x="35" y="105" width="50" height="40" rx="4" fill="white" opacity="0.9"/>
+    <rect x="125" y="105" width="50" height="40" rx="4" fill="white" opacity="0.9"/>
+    <rect x="215" y="105" width="50" height="40" rx="4" fill="white" opacity="0.9"/>
+    
+    <!-- Bottom shelf items - cans -->
+    <rect x="35" y="185" width="50" height="45" rx="6" fill="white" opacity="0.9"/>
+    <rect x="125" y="185" width="50" height="45" rx="6" fill="white" opacity="0.9"/>
+    <rect x="215" y="185" width="50" height="45" rx="6" fill="white" opacity="0.9"/>
+    
+    <!-- Very bottom items - larger containers -->
+    <rect x="45" y="260" width="70" height="50" rx="6" fill="white" opacity="0.9"/>
+    <rect x="185" y="260" width="70" height="50" rx="6" fill="white" opacity="0.9"/>
+  </g>
+</svg>

app/scripts/generate-icons.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import { readFile, writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+const svgPath = join(publicDir, 'icon.svg');
+
+const sizes = [
+  { size: 192, name: 'icon-192x192.png', maskable: false },
+  { size: 512, name: 'icon-512x512.png', maskable: false },
+  { size: 192, name: 'icon-192x192-maskable.png', maskable: true },
+  { size: 512, name: 'icon-512x512-maskable.png', maskable: true },
+];
+
+async function generateIcons() {
+  console.log('Reading SVG icon...');
+  const svgBuffer = await readFile(svgPath);
+  
+  for (const { size, name, maskable } of sizes) {
+    console.log(`Generating ${name}...`);
+    
+    let buffer;
+    if (maskable) {
+      // Maskable icons need safe zone padding (80% of icon in center)
+      // Create a transparent canvas with padding
+      const paddedSize = size;
+      const iconSize = Math.floor(size * 0.8);
+      const offset = Math.floor((paddedSize - iconSize) / 2);
+      
+      // Resize SVG to icon size
+      const iconBuffer = await sharp(svgBuffer)
+        .resize(iconSize, iconSize)
+        .png()
+        .toBuffer();
+      
+      // Create transparent background and composite
+      buffer = await sharp({
+        create: {
+          width: paddedSize,
+          height: paddedSize,
+          channels: 4,
+          background: { r: 0, g: 0, b: 0, alpha: 0 }
+        }
+      })
+        .composite([{
+          input: iconBuffer,
+          top: offset,
+          left: offset
+        }])
+        .png()
+        .toBuffer();
+    } else {
+      // Regular icon - full size
+      buffer = await sharp(svgBuffer)
+        .resize(size, size)
+        .png()
+        .toBuffer();
+    }
+    
+    await writeFile(join(publicDir, name), buffer);
+    console.log(`✓ ${name}`);
+  }
+  
+  console.log('\n✅ All icons generated successfully!');
+}
+
+generateIcons().catch(console.error);

app/scripts/generate-screenshots.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+import { writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+
+async function generateScreenshots() {
+  // Mobile screenshot (390x844 - iPhone 12/13/14 size)
+  console.log('Generating mobile screenshot placeholder...');
+  const mobileBuffer = await sharp({
+    create: {
+      width: 390,
+      height: 844,
+      channels: 4,
+      background: { r: 249, g: 250, b: 251, alpha: 1 } // Tailwind gray-50
+    }
+  })
+    .composite([
+      {
+        input: Buffer.from(`
+          <svg width="390" height="844">
+            <!-- Header -->
+            <rect width="390" height="64" fill="#10b981"/>
+            <text x="195" y="42" font-family="Arial" font-size="20" fill="white" text-anchor="middle" font-weight="bold">Pantry</text>
+            
+            <!-- Content area -->
+            <text x="24" y="104" font-family="Arial" font-size="24" fill="#111827" font-weight="bold">My Pantry</text>
+            
+            <!-- Item cards -->
+            <rect x="16" y="130" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="160" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Milk</text>
+            <text x="32" y="185" font-family="Arial" font-size="14" fill="#6b7280">Fridge • 1L</text>
+            
+            <rect x="16" y="226" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="256" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Pasta</text>
+            <text x="32" y="281" font-family="Arial" font-size="14" fill="#6b7280">Pantry • 500g</text>
+            
+            <rect x="16" y="322" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="352" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Tomato Sauce</text>
+            <text x="32" y="377" font-family="Arial" font-size="14" fill="#6b7280">Pantry • 400ml</text>
+            
+            <!-- Bottom navigation -->
+            <rect y="780" width="390" height="64" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="78" y="820" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Home</text>
+            <text x="195" y="820" font-family="Arial" font-size="12" fill="#10b981" text-anchor="middle">Scan</text>
+            <text x="312" y="820" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Settings</text>
+          </svg>
+        `),
+        top: 0,
+        left: 0
+      }
+    ])
+    .png()
+    .toBuffer();
+  
+  await writeFile(join(publicDir, 'screenshot-mobile.png'), mobileBuffer);
+  console.log('✓ screenshot-mobile.png');
+  
+  // Desktop screenshot (1920x1080)
+  console.log('Generating desktop screenshot placeholder...');
+  const desktopBuffer = await sharp({
+    create: {
+      width: 1920,
+      height: 1080,
+      channels: 4,
+      background: { r: 249, g: 250, b: 251, alpha: 1 } // Tailwind gray-50
+    }
+  })
+    .composite([
+      {
+        input: Buffer.from(`
+          <svg width="1920" height="1080">
+            <!-- Header -->
+            <rect width="1920" height="80" fill="#10b981"/>
+            <text x="960" y="50" font-family="Arial" font-size="32" fill="white" text-anchor="middle" font-weight="bold">Pantry - Smart Inventory Manager</text>
+            
+            <!-- Sidebar -->
+            <rect x="0" y="80" width="280" height="1000" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="130" font-family="Arial" font-size="18" fill="#10b981" font-weight="600">Dashboard</text>
+            <text x="32" y="180" font-family="Arial" font-size="18" fill="#6b7280">Scan Item</text>
+            <text x="32" y="230" font-family="Arial" font-size="18" fill="#6b7280">Settings</text>
+            
+            <!-- Main content -->
+            <text x="340" y="150" font-family="Arial" font-size="36" fill="#111827" font-weight="bold">My Pantry Items</text>
+            
+            <!-- Grid of items -->
+            <rect x="340" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="370" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Milk</text>
+            <text x="370" y="290" font-family="Arial" font-size="18" fill="#6b7280">Fridge • 1L • Expires in 5 days</text>
+            
+            <rect x="860" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="890" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Pasta</text>
+            <text x="890" y="290" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 500g</text>
+            
+            <rect x="1380" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="1410" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Tomato Sauce</text>
+            <text x="1410" y="290" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 400ml</text>
+            
+            <rect x="340" y="420" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="370" y="470" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Rice</text>
+            <text x="370" y="510" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 1kg</text>
+            
+            <rect x="860" y="420" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="890" y="470" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Olive Oil</text>
+            <text x="890" y="510" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 750ml</text>
+          </svg>
+        `),
+        top: 0,
+        left: 0
+      }
+    ])
+    .png()
+    .toBuffer();
+  
+  await writeFile(join(publicDir, 'screenshot-desktop.png'), desktopBuffer);
+  console.log('✓ screenshot-desktop.png');
+  
+  console.log('\n✅ All screenshots generated successfully!');
+}
+
+generateScreenshots().catch(console.error);