feat: make Thingport installable

frontend/index.html

@@ -10,6 +10,12 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <!-- Lets Chrome/Edge install it as an app and Safari "Add to Dock" open it standalone. -->
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Thingport" />
+    <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#181f39" media="(prefers-color-scheme: dark)" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

frontend/nginx.conf

@@ -33,6 +33,12 @@ server {
         access_log off;
     }
 
+    location = /manifest.webmanifest {
+        types { }
+        default_type application/manifest+json;
+        add_header Cache-Control "no-cache";
+    }
+
     # No caching for HTML (so new deployments are picked up)
     location ~* \.html$ {
         add_header Cache-Control "no-cache";

frontend/public/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+  "name": "Thingport",
+  "short_name": "Thingport",
+  "description": "Self-hosted 3D model library",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#f7f7f7",
+  "theme_color": "#f7f7f7",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

frontend/src/App.tsx

@@ -277,6 +277,13 @@ export default function App() {
   const [themeSelection, setThemeSelection] = React.useState<ThemeSelection>("light");
   const resolvedTheme = useResolvedTheme(themeSelection);
   const muiTheme = React.useMemo(() => buildTheme(resolvedTheme), [resolvedTheme]);
+  // index.html's theme-color tags follow the OS; this makes the title bar follow the theme
+  // actually shown, which can be a manual light/dark choice.
+  React.useEffect(() => {
+    document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]').forEach((meta) => {
+      meta.content = muiTheme.palette.background.default;
+    });
+  }, [muiTheme]);
   const isAdmin = user?.role === "ADMIN";
   React.useEffect(() => {
     (async () => setHealth(await healthApi.get()))();