daniel-sullivan · daniel-sullivan · Dec 10, 2025 · Dec 10, 2025 · Dec 10, 2025 · Dec 10, 2025
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -5,7 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BabelBridge</title>
     <meta name="color-scheme" content="light dark" />
-    <script type="module" crossorigin src="/assets/index-CFPVen-_.js"></script>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#6366F1" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="BabelBridge" />
+    <link rel="apple-touch-icon" href="/favicon.svg" />
+    <script type="module" crossorigin src="/assets/index-CcXe80mT.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/index.html b/frontend/index.html
@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BabelBridge</title>
     <meta name="color-scheme" content="light dark" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#6366F1" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="BabelBridge" />
+    <link rel="apple-touch-icon" href="/favicon.svg" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,35 @@
+{
+  "name": "BabelBridge",
+  "short_name": "BabelBridge",
+  "description": "A modern web-based translation tool with live language identification and pluggable AI backends",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0f1220",
+  "theme_color": "#6366F1",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["productivity", "utilities"],
+  "shortcuts": [
+    {
+      "name": "New Translation",
+      "short_name": "Translate",
+      "description": "Start a new translation",
+      "url": "/",
+      "icons": [
+        {
+          "src": "/favicon.svg",
+          "sizes": "any",
+          "type": "image/svg+xml"
+        }
+      ]
+    }
+  ]
+}
+
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -6,7 +6,7 @@ import { TranslationComposer } from './components/TranslationComposer'
 import { TranslationOutput } from './components/TranslationOutput'
 import { TranslationHistory } from './components/TranslationHistory'
 import { ModalsContainer } from './components/ModalsContainer'
-import { toLanguageName } from './utils/languages'
+import { AddToAppButton } from './components/AddToAppButton'
 import logoUrl from './assets/logo.svg'
 
 function AppContent() {
@@ -40,11 +40,12 @@ function AppContent() {
 
         <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3 }}>
           <TranslationOutput />
+          <AddToAppButton />
           <TranslationHistory />
         </Box>
       </Container>
 
-      <AppFooter targetLang={context.targetLang} />
+      <AppFooter />
       <ModalsContainer />
     </Box>
   )
@@ -87,15 +88,7 @@ function AppHeader() {
     )
 }
 
-interface AppFooterProps {
-  targetLang: string
-}
-
-function AppFooter({ targetLang }: AppFooterProps) {
-  // Default to Japanese if no target language is set
-  const displayLang = targetLang || 'ja'
-  const flagEmoji = getFlagEmoji(displayLang)
-
+function AppFooter() {
   return (
     <Box
       component="footer"
@@ -104,28 +97,16 @@ function AppFooter({ targetLang }: AppFooterProps) {
         px: 3,
         display: 'flex',
         alignItems: 'center',
-        gap: 1,
+        justifyContent: 'center',
         borderTop: '1px solid',
         borderColor: 'divider',
         backgroundColor: 'background.paper',
       }}
     >
-      <Typography variant="body2" color="text.secondary">
-        Last target: {toLanguageName(displayLang)} {flagEmoji}
-      </Typography>
-      <Box
-        sx={{
-          width: 4,
-          height: 4,
-          borderRadius: '50%',
-          backgroundColor: 'text.secondary',
-          opacity: 0.5,
-        }}
-      />
       <Typography
         variant="body2"
         component="a"
-        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie"
+        href="https://github.com/daniel-sullivan/babel-bridge"
         target="_blank"
         rel="noreferrer"
         sx={{
@@ -136,27 +117,12 @@ function AppFooter({ targetLang }: AppFooterProps) {
           },
         }}
       >
-        Session via cookie
+        © 2025 Daniel Sullivan
       </Typography>
     </Box>
   )
 }
 
-function getFlagEmoji(langCode: string): string {
-  const flags: Record<string, string> = {
-    ja: '🇯🇵',
-    es: '🇪🇸',
-    de: '🇩🇪',
-    en: '🇺🇸',
-    fr: '🇫🇷',
-    it: '🇮🇹',
-    pt: '🇵🇹',
-    zh: '🇨🇳',
-    ko: '🇰🇷',
-    ru: '🇷🇺'
-  }
-  return flags[langCode.split('-')[0]] || '🌐'
-}
 
 export default function App() {
   return (

diff --git a/frontend/src/components/AddToAppButton.tsx b/frontend/src/components/AddToAppButton.tsx
@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Button, Snackbar, Alert, IconButton } from '@mui/material'
+import { GetApp, Close, PhoneIphone, LaptopMac } from '@mui/icons-material'
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt(): Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+export function AddToAppButton() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
+  const [showIOSInstructions, setShowIOSInstructions] = useState(false)
+  const [isInstallable, setIsInstallable] = useState(false)
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (e: Event) => {
+      // Prevent the mini-infobar from appearing on mobile
+      e.preventDefault()
+      setDeferredPrompt(e as BeforeInstallPromptEvent)
+      setIsInstallable(true)
+    }
+
+    const handleAppInstalled = () => {
+      setIsInstallable(false)
+      setDeferredPrompt(null)
+    }
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+    window.addEventListener('appinstalled', handleAppInstalled)
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+      window.removeEventListener('appinstalled', handleAppInstalled)
+    }
+  }, [])
+
+  const isIOS = () => {
+    return /iPad|iPhone|iPod/.test(navigator.userAgent)
+  }
+
+  const isInStandaloneMode = () => {
+    return window.matchMedia('(display-mode: standalone)').matches ||
+           (window.navigator as any).standalone === true
+  }
+
+  const handleInstallClick = async () => {
+    if (isIOS()) {
+      setShowIOSInstructions(true)
+      return
+    }
+
+    if (deferredPrompt) {
+      deferredPrompt.prompt()
+      const { outcome } = await deferredPrompt.userChoice
+      if (outcome === 'accepted') {
+        setDeferredPrompt(null)
+        setIsInstallable(false)
+      }
+    }
+  }
+
+  // Don't show the button if already installed or not installable
+  if (isInStandaloneMode() || (!isInstallable && !isIOS())) {
+    return null
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          mt: 2,
+          mb: 1,
+        }}
+      >
+        <Button
+          variant="outlined"
+          startIcon={isIOS() ? <PhoneIphone /> : <LaptopMac />}
+          onClick={handleInstallClick}
+          sx={{
+            borderRadius: 2,
+            textTransform: 'none',
+            px: 3,
+            py: 1,
+          }}
+        >
+          Add to {isIOS() ? 'Home Screen' : 'Desktop'}
+        </Button>
+      </Box>
+
+      {/* iOS Installation Instructions */}
+      <Snackbar
+        open={showIOSInstructions}
+        onClose={() => setShowIOSInstructions(false)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        autoHideDuration={8000}
+      >
+        <Alert
+          severity="info"
+          sx={{ maxWidth: '90vw' }}
+          action={
+            <IconButton
+              size="small"
+              color="inherit"
+              onClick={() => setShowIOSInstructions(false)}
+            >
+              <Close fontSize="small" />
+            </IconButton>
+          }
+        >
+          To install: tap the Share button in Safari, then tap "Add to Home Screen"
+        </Alert>
+      </Snackbar>
+    </>
+  )
+}