iOS: replace HTML spinner with native UIActivityIndicatorView overlay

The HTML spinner loaded via loadHTMLString was immediately replaced by
the real navigation and never had a chance to render. This is the same
problem Android had with its HTML spinner (though for a different
reason — Android's froze due to main thread saturation).

Use a native UIActivityIndicatorView on a dark overlay, matching the
Android approach with ProgressBar. The spinner is added as a subview
on top of the WKWebView inside a container UIView, and removed in
webView(_:didFinish:) via WKNavigationDelegate.

Also wraps the WKWebView in a container UIView (like Android's
FrameLayout) so the spinner overlay can sit on top independently.

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.6.4] - 2026-04-11
+
+### Added
+- iCloud Keychain integration on iOS -- your login credentials are now saved and restored automatically across devices
+
+### Changed
+- Empty feeds show a friendlier state with a discover button to help you find people to follow
+- Signup flow simplified -- cleaner profile step with a single Continue button
+
+### Fixed
+- Avatar fallback now shows the user's initial instead of a question mark
+- Android 16+ devices no longer have content hidden behind system bars
+- Signup dialog background clears properly when switching between light and dark themes
+- Sticky compose button stays anchored to the bottom even on empty feeds
+
 ## [2.6.3] - 2026-04-10
 
 ### Added

android/app/build.gradle

@@ -14,7 +14,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "2.6.3"
+        versionName "2.6.4"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/capacitor.build.gradle

@@ -14,7 +14,6 @@ dependencies {
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-local-notifications')
     implementation project(':capacitor-share')
-    implementation project(':capacitor-status-bar')
     implementation project(':capgo-capacitor-autofill-save-password')
     implementation project(':capacitor-secure-storage-plugin')
 

android/app/src/main/java/pub/ditto/app/SandboxPlugin.java

@@ -1,10 +1,12 @@
 package pub.ditto.app;
 
 import android.graphics.Color;
+import android.graphics.PorterDuff;
 import android.os.Handler;
 import android.os.Looper;
 import android.util.Base64;
 import android.util.Log;
+import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 import android.webkit.JavascriptInterface;
@@ -13,6 +15,8 @@ import android.webkit.WebResourceResponse;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
+import android.widget.FrameLayout;
+import android.widget.ProgressBar;
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
 import com.getcapacitor.JSObject;
@@ -30,6 +34,8 @@ import java.util.HashMap;
 import java.util.Map;
 import java.util.UUID;
 import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.CountDownLatch;
+import java.util.concurrent.TimeUnit;
 
 /**
  * Capacitor plugin that creates isolated Android WebViews for sandboxed content.
@@ -79,19 +85,41 @@ public class SandboxPlugin extends Plugin {
             SandboxInstance sandbox = new SandboxInstance(sandboxId, this);
             sandboxes.put(sandboxId, sandbox);
 
-            // Add the WebView on top of the Capacitor WebView.
-            // The parent is a CoordinatorLayout — using the wrong LayoutParams
-            // type causes a ClassCastException when it intercepts touch events.
+            // Add the container (WebView + spinner overlay) on top of the
+            // Capacitor WebView. The parent is a CoordinatorLayout — using
+            // the wrong LayoutParams type causes a ClassCastException when
+            // it intercepts touch events.
             View capWebView = getBridge().getWebView();
             ViewGroup parent = (ViewGroup) capWebView.getParent();
             CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(pxWidth, pxHeight);
             params.leftMargin = pxX;
             params.topMargin = pxY;
-            parent.addView(sandbox.webView, params);
+            parent.addView(sandbox.container, params);
+
+            // The spinner is now visible. Navigation is deferred until the
+            // JS layer calls navigate() — this allows the caller to
+            // pre-fetch blobs while the spinner animates.
+
+            call.resolve();
+        });
+    }
+
+    @PluginMethod
+    public void navigate(PluginCall call) {
+        String sandboxId = call.getString("id");
+        if (sandboxId == null) {
+            call.reject("Missing required parameter: id");
+            return;
+        }
+
+        mainHandler.post(() -> {
+            SandboxInstance sandbox = sandboxes.get(sandboxId);
+            if (sandbox == null) {
+                call.reject("Sandbox not found: " + sandboxId);
+                return;
+            }
 
-            // Load the initial page.
             sandbox.webView.loadUrl("https://" + sandboxId + ".sandbox.native/index.html");
-
             call.resolve();
         });
     }
@@ -131,7 +159,7 @@ public class SandboxPlugin extends Plugin {
             CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(pxWidth, pxHeight);
             params.leftMargin = pxX;
             params.topMargin = pxY;
-            sandbox.webView.setLayoutParams(params);
+            sandbox.container.setLayoutParams(params);
 
             call.resolve();
         });
@@ -214,9 +242,9 @@ public class SandboxPlugin extends Plugin {
         mainHandler.post(() -> {
             SandboxInstance sandbox = sandboxes.remove(sandboxId);
             if (sandbox != null) {
-                ViewGroup parent = (ViewGroup) sandbox.webView.getParent();
+                ViewGroup parent = (ViewGroup) sandbox.container.getParent();
                 if (parent != null) {
-                    parent.removeView(sandbox.webView);
+                    parent.removeView(sandbox.container);
                 }
                 sandbox.webView.destroy();
             }
@@ -244,13 +272,19 @@ public class SandboxPlugin extends Plugin {
      */
     private static class SandboxInstance {
         final String id;
+        /** Wrapper layout that holds the WebView and the loading overlay. */
+        final FrameLayout container;
         final WebView webView;
         final SandboxPlugin plugin;
         private final ConcurrentHashMap<String, PendingRequest> pendingRequests = new ConcurrentHashMap<>();
+        /** Native spinner overlay, shown while the sandbox content loads. */
+        private ProgressBar spinner;
 
         SandboxInstance(String id, SandboxPlugin plugin) {
             this.id = id;
             this.plugin = plugin;
+
+            this.container = new FrameLayout(plugin.getActivity());
             this.webView = new WebView(plugin.getActivity());
 
             WebSettings settings = webView.getSettings();
@@ -260,13 +294,53 @@ public class SandboxPlugin extends Plugin {
             settings.setAllowContentAccess(false);
             settings.setDatabaseEnabled(true);
 
-            webView.setBackgroundColor(Color.WHITE);
+            webView.setBackgroundColor(Color.parseColor("#14161f"));
 
             // Add JavaScript interface for script->native communication.
             webView.addJavascriptInterface(new SandboxBridge(this), "__sandboxNative");
 
             // Inject the bridge script and intercept requests.
             webView.setWebViewClient(new SandboxWebViewClient(this));
+
+            // Build the container: WebView fills it, spinner overlays on top.
+            container.addView(webView, new FrameLayout.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    ViewGroup.LayoutParams.MATCH_PARENT));
+
+            // Native spinner overlay — uses the Android indeterminate
+            // ProgressBar which animates on the render thread, so it keeps
+            // spinning even when the main/IO threads are busy.
+            spinner = new ProgressBar(plugin.getActivity());
+            spinner.setIndeterminate(true);
+            spinner.getIndeterminateDrawable().setColorFilter(
+                    Color.parseColor("#7c5cdc"), PorterDuff.Mode.SRC_IN);
+            FrameLayout.LayoutParams spinnerParams = new FrameLayout.LayoutParams(
+                    dpToPx(plugin, 32), dpToPx(plugin, 32), Gravity.CENTER);
+            container.addView(spinner, spinnerParams);
+
+            // Dark background behind the spinner.
+            View overlay = new View(plugin.getActivity());
+            overlay.setBackgroundColor(Color.parseColor("#14161f"));
+            // Insert the overlay between the WebView (index 0) and spinner (index 1)
+            // so it covers the WebView but sits behind the spinner.
+            container.addView(overlay, 1, new FrameLayout.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    ViewGroup.LayoutParams.MATCH_PARENT));
+        }
+
+        /** Remove the native loading overlay. Safe to call multiple times. */
+        void hideSpinner() {
+            if (spinner != null) {
+                // Remove spinner and overlay (indices 2 and 1 after WebView at 0).
+                if (container.getChildCount() > 2) container.removeViewAt(2); // spinner
+                if (container.getChildCount() > 1) container.removeViewAt(1); // overlay
+                spinner = null;
+            }
+        }
+
+        private static int dpToPx(SandboxPlugin plugin, int dp) {
+            float density = plugin.getActivity().getResources().getDisplayMetrics().density;
+            return Math.round(dp * density);
         }
 
         void postMessageToWebView(String jsonString) {
@@ -353,8 +427,11 @@ public class SandboxPlugin extends Plugin {
             // Emit to JS.
             sandbox.plugin.emitFetchRequest(sandbox.id, requestId, serialisedRequest);
 
-            // Block this thread until JS responds (with a timeout).
-            WebResourceResponse response = pending.awaitResponse(10000);
+            // Block until JS responds. Each asset is fetched from a Blossom
+            // server over the network, so we need a generous timeout.  The
+            // WebView IO thread pool has ~6 threads; if all are blocked,
+            // subsequent requests queue until a thread frees up.
+            WebResourceResponse response = pending.awaitResponse(60000);
 
             if (response != null) {
                 return response;
@@ -377,6 +454,11 @@ public class SandboxPlugin extends Plugin {
                 bridgeInjected = true;
                 view.evaluateJavascript(getBridgeScript(), null);
             }
+
+            // Remove the native spinner once the first page has finished
+            // loading (all initial resources resolved). This runs on the
+            // main thread, so the removal is safe.
+            sandbox.hideSpinner();
         }
 
         private String getBridgeScript() {
@@ -446,11 +528,12 @@ public class SandboxPlugin extends Plugin {
     }
 
     /**
-     * A pending request that blocks the WebViewClient thread until resolved.
+     * A pending request that blocks the WebViewClient IO thread until JS
+     * responds with the complete resource.
      */
     private static class PendingRequest {
-        private WebResourceResponse response;
-        private final java.util.concurrent.CountDownLatch latch = new java.util.concurrent.CountDownLatch(1);
+        private volatile WebResourceResponse response;
+        private final CountDownLatch latch = new CountDownLatch(1);
 
         void resolve(WebResourceResponse response) {
             this.response = response;
@@ -459,7 +542,7 @@ public class SandboxPlugin extends Plugin {
 
         WebResourceResponse awaitResponse(long timeoutMs) {
             try {
-                latch.await(timeoutMs, java.util.concurrent.TimeUnit.MILLISECONDS);
+                latch.await(timeoutMs, TimeUnit.MILLISECONDS);
             } catch (InterruptedException e) {
                 Thread.currentThread().interrupt();
             }

android/capacitor.settings.gradle

@@ -17,9 +17,6 @@ project(':capacitor-local-notifications').projectDir = new File('../node_modules
 include ':capacitor-share'
 project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
 
-include ':capacitor-status-bar'
-project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
-
 include ':capgo-capacitor-autofill-save-password'
 project(':capgo-capacitor-autofill-save-password').projectDir = new File('../node_modules/@capgo/capacitor-autofill-save-password/android')
 

capacitor.config.ts

@@ -24,6 +24,11 @@ const config: CapacitorConfig = {
     Keyboard: {
       resizeOnFullScreen: true,
     },
+    SystemBars: {
+      // Inject --safe-area-inset-* CSS variables on Android to work around
+      // a Chromium bug (<140) where env(safe-area-inset-*) reports 0.
+      insetsHandling: 'css',
+    },
   },
 };
 

ios/App/App.xcodeproj/project.pbxproj

@@ -315,7 +315,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.6.3;
+				MARKETING_VERSION = 2.6.4;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -339,7 +339,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.6.3;
+				MARKETING_VERSION = 2.6.4;
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

ios/App/App/SandboxPlugin.swift

@@ -17,6 +17,7 @@ public class SandboxPlugin: CAPPlugin, CAPBridgedPlugin {
     public let jsName = "SandboxPlugin"
     public let pluginMethods: [CAPPluginMethod] = [
         CAPPluginMethod(name: "create", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "navigate", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "updateFrame", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "respondToFetch", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "postMessage", returnType: CAPPluginReturnPromise),
@@ -58,16 +59,33 @@ public class SandboxPlugin: CAPPlugin, CAPBridgedPlugin {
             )
             self.sandboxes[sandboxId] = sandbox
 
-            // Add the WebView on top of the Capacitor WebView.
+            // Add the container (WebView + spinner overlay) on top of
+            // the Capacitor WebView.
             if let bridge = self.bridge,
                let webView = bridge.webView {
-                webView.superview?.addSubview(sandbox.webView)
+                webView.superview?.addSubview(sandbox.containerView)
             }
 
             call.resolve()
         }
     }
 
+    @objc func navigate(_ call: CAPPluginCall) {
+        guard let sandboxId = call.getString("id") else {
+            call.reject("Missing required parameter: id")
+            return
+        }
+
+        DispatchQueue.main.async { [weak self] in
+            guard let sandbox = self?.sandboxes[sandboxId] else {
+                call.reject("Sandbox not found: \(sandboxId)")
+                return
+            }
+            sandbox.navigateToApp()
+            call.resolve()
+        }
+    }
+
     @objc func updateFrame(_ call: CAPPluginCall) {
         guard let sandboxId = call.getString("id") else {
             call.reject("Missing required parameter: id")
@@ -87,7 +105,7 @@ public class SandboxPlugin: CAPPlugin, CAPBridgedPlugin {
                 call.reject("Sandbox not found: \(sandboxId)")
                 return
             }
-            sandbox.webView.frame = CGRect(x: x, y: y, width: width, height: height)
+            sandbox.containerView.frame = CGRect(x: x, y: y, width: width, height: height)
             call.resolve()
         }
     }
@@ -153,7 +171,7 @@ public class SandboxPlugin: CAPPlugin, CAPBridgedPlugin {
         DispatchQueue.main.async { [weak self] in
             guard let self = self else { return }
             if let sandbox = self.sandboxes.removeValue(forKey: sandboxId) {
-                sandbox.webView.removeFromSuperview()
+                sandbox.containerView.removeFromSuperview()
                 sandbox.schemeHandler.cancelAll()
             }
             call.resolve()
@@ -183,13 +201,19 @@ public class SandboxPlugin: CAPPlugin, CAPBridgedPlugin {
 // MARK: - SandboxInstance
 
 /// Manages a single sandboxed WKWebView instance.
-private class SandboxInstance: NSObject, WKScriptMessageHandler {
+private class SandboxInstance: NSObject, WKScriptMessageHandler, WKNavigationDelegate {
     let id: String
     let webView: WKWebView
     let schemeHandler: SandboxSchemeHandler
     private weak var plugin: SandboxPlugin?
     private let customScheme: String
 
+    /// Container view that holds the WebView and spinner overlay.
+    let containerView: UIView
+
+    /// Native spinner overlay, removed when the first page finishes loading.
+    private var spinnerOverlay: UIView?
+
     init(id: String, frame: CGRect, plugin: SandboxPlugin) {
         self.id = id
         self.plugin = plugin
@@ -224,19 +248,54 @@ private class SandboxInstance: NSObject, WKScriptMessageHandler {
         config.preferences.javaScriptCanOpenWindowsAutomatically = false
         config.defaultWebpagePreferences.allowsContentJavaScript = true
 
-        self.webView = WKWebView(frame: frame, configuration: config)
+        // Container view that holds the WebView + spinner overlay.
+        self.containerView = UIView(frame: frame)
+
+        self.webView = WKWebView(frame: containerView.bounds, configuration: config)
+        self.webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
         self.webView.isOpaque = false
-        self.webView.backgroundColor = .white
+        self.webView.backgroundColor = UIColor(red: 0x14/255.0, green: 0x16/255.0, blue: 0x1f/255.0, alpha: 1)
+        self.webView.scrollView.backgroundColor = self.webView.backgroundColor
         self.webView.scrollView.bounces = false
+        self.containerView.addSubview(self.webView)
+
+        // Dark overlay behind the spinner.
+        let overlay = UIView(frame: containerView.bounds)
+        overlay.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        overlay.backgroundColor = UIColor(red: 0x14/255.0, green: 0x16/255.0, blue: 0x1f/255.0, alpha: 1)
+        self.containerView.addSubview(overlay)
+
+        // Native spinner — uses UIActivityIndicatorView which animates on
+        // the render thread independently of JS/main-thread work.
+        let spinner = UIActivityIndicatorView(style: .medium)
+        spinner.color = UIColor(red: 124/255.0, green: 92/255.0, blue: 220/255.0, alpha: 1)
+        spinner.translatesAutoresizingMaskIntoConstraints = false
+        spinner.startAnimating()
+        overlay.addSubview(spinner)
+        NSLayoutConstraint.activate([
+            spinner.centerXAnchor.constraint(equalTo: overlay.centerXAnchor),
+            spinner.centerYAnchor.constraint(equalTo: overlay.centerYAnchor),
+        ])
+
+        self.spinnerOverlay = overlay
 
         super.init()
 
-        // Register the message handler after super.init().
+        // Register the message handler and navigation delegate after super.init().
         userContentController.add(self, name: "sandboxBridge")
+        self.webView.navigationDelegate = self
+    }
 
-        // Load the initial page via the custom scheme.
-        let initialURL = URL(string: "\(self.customScheme)://app/index.html")!
-        self.webView.load(URLRequest(url: initialURL))
+    /// Navigate the WebView to the sandbox's entry point.
+    func navigateToApp() {
+        let initialURL = URL(string: "\(customScheme)://app/index.html")!
+        webView.load(URLRequest(url: initialURL))
+    }
+
+    /// Remove the native loading overlay. Safe to call multiple times.
+    func hideSpinner() {
+        spinnerOverlay?.removeFromSuperview()
+        spinnerOverlay = nil
     }
 
     /// Post a JSON-RPC message to injected scripts inside the WebView.
@@ -270,6 +329,13 @@ private class SandboxInstance: NSObject, WKScriptMessageHandler {
         plugin?.emitScriptMessage(sandboxId: id, message: body)
     }
 
+    // MARK: - WKNavigationDelegate
+
+    /// Remove the spinner overlay once the first page finishes loading.
+    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+        hideSpinner()
+    }
+
     // MARK: - Bridge Script
 
     /// JavaScript injected at document start that provides:

ios/App/CapApp-SPM/Package.swift

@@ -17,7 +17,6 @@ let package = Package(
         .package(name: "CapacitorKeyboard", path: "../../../node_modules/@capacitor/keyboard"),
         .package(name: "CapacitorLocalNotifications", path: "../../../node_modules/@capacitor/local-notifications"),
         .package(name: "CapacitorShare", path: "../../../node_modules/@capacitor/share"),
-        .package(name: "CapacitorStatusBar", path: "../../../node_modules/@capacitor/status-bar"),
         .package(name: "CapgoCapacitorAutofillSavePassword", path: "../../../node_modules/@capgo/capacitor-autofill-save-password"),
         .package(name: "CapacitorSecureStoragePlugin", path: "../../../node_modules/capacitor-secure-storage-plugin")
     ],
@@ -32,7 +31,6 @@ let package = Package(
                 .product(name: "CapacitorKeyboard", package: "CapacitorKeyboard"),
                 .product(name: "CapacitorLocalNotifications", package: "CapacitorLocalNotifications"),
                 .product(name: "CapacitorShare", package: "CapacitorShare"),
-                .product(name: "CapacitorStatusBar", package: "CapacitorStatusBar"),
                 .product(name: "CapgoCapacitorAutofillSavePassword", package: "CapgoCapacitorAutofillSavePassword"),
                 .product(name: "CapacitorSecureStoragePlugin", package: "CapacitorSecureStoragePlugin")
             ]

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ditto",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ditto",
-      "version": "2.6.3",
+      "version": "2.6.4",
       "dependencies": {
         "@capacitor/app": "^8.0.0",
         "@capacitor/core": "^8.1.0",
@@ -14,7 +14,6 @@
         "@capacitor/keyboard": "^8.0.2",
         "@capacitor/local-notifications": "^8.0.1",
         "@capacitor/share": "^8.0.1",
-        "@capacitor/status-bar": "^8.0.0",
         "@capgo/capacitor-autofill-save-password": "^8.0.22",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -456,15 +455,6 @@
         "@capacitor/core": ">=8.0.0"
       }
     },
-    "node_modules/@capacitor/status-bar": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.1.tgz",
-      "integrity": "sha512-OR59dlbwvmrV5dKsC9lvwv48QaGbqcbSTBpk+9/WXWxXYSdXXdzJZU9p8oyNPAkuJhCdnSa3XmU43fZRPBJJ5w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@capacitor/core": ">=8.0.0"
-      }
-    },
     "node_modules/@capacitor/synapse": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@capacitor/synapse/-/synapse-1.0.4.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ditto",
   "private": true,
-  "version": "2.6.3",
+  "version": "2.6.4",
   "type": "module",
   "scripts": {
     "dev": "npm i --silent && vite",
@@ -21,7 +21,6 @@
     "@capacitor/keyboard": "^8.0.2",
     "@capacitor/local-notifications": "^8.0.1",
     "@capacitor/share": "^8.0.1",
-    "@capacitor/status-bar": "^8.0.0",
     "@capgo/capacitor-autofill-save-password": "^8.0.22",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",

public/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.6.4] - 2026-04-11
+
+### Added
+- iCloud Keychain integration on iOS -- your login credentials are now saved and restored automatically across devices
+
+### Changed
+- Empty feeds show a friendlier state with a discover button to help you find people to follow
+- Signup flow simplified -- cleaner profile step with a single Continue button
+
+### Fixed
+- Avatar fallback now shows the user's initial instead of a question mark
+- Android 16+ devices no longer have content hidden behind system bars
+- Signup dialog background clears properly when switching between light and dark themes
+- Sticky compose button stays anchored to the bottom even on empty feeds
+
 ## [2.6.3] - 2026-04-10
 
 ### Added

src/App.tsx

@@ -1,8 +1,7 @@
 // NOTE: This file should normally not be modified unless you are adding a new provider.
 // To add new routes, edit the AppRouter.tsx file.
 
-import { Capacitor } from "@capacitor/core";
-import { StatusBar, Style } from "@capacitor/status-bar";
+import { Capacitor, SystemBars, SystemBarsStyle } from "@capacitor/core";
 import { NostrLoginProvider } from "@nostrify/react/login";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { InferSeoMetaPlugin } from "@unhead/addons";
@@ -184,13 +183,13 @@ export function App() {
   useNsecPasteGuard();
 
   useEffect(() => {
-    // Initialize StatusBar for mobile apps
+    // Initialize system bars for mobile apps.
+    // On Android 16+ (API 36), edge-to-edge is enforced by the OS so
+    // setOverlaysWebView / setBackgroundColor no longer work. The new
+    // SystemBars API (bundled with @capacitor/core 8+) is the replacement.
     if (Capacitor.isNativePlatform()) {
-      StatusBar.setStyle({ style: Style.Dark }).catch(() => {
-        // StatusBar may not be available on all platforms
-      });
-      StatusBar.setOverlaysWebView({ overlay: true }).catch(() => {
-        // Ignore errors on unsupported platforms
+      SystemBars.setStyle({ style: SystemBarsStyle.Dark }).catch(() => {
+        // SystemBars may not be available on all platforms
       });
     }
   }, []);

src/components/ComposeBox.tsx

@@ -43,6 +43,7 @@ import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { useInsertText } from '@/hooks/useInsertText';
 import { useVoiceRecorder } from '@/hooks/useVoiceRecorder';
 import { formatTime } from '@/lib/formatTime';
+import { genUserName } from '@/lib/genUserName';
 import { DITTO_RELAY } from '@/lib/appRelays';
 import { resizeImage } from '@/lib/resizeImage';
 
@@ -1071,7 +1072,7 @@ export function ComposeBox({
               <Avatar shape={avatarShape} className="size-12 shrink-0 mt-0.5">
                 <AvatarImage src={metadata?.picture} alt={metadata?.name} />
                 <AvatarFallback className="bg-primary/20 text-primary text-sm">
-                  {(metadata?.name?.[0] || '?').toUpperCase()}
+                  {(metadata?.display_name || metadata?.name || genUserName(user?.pubkey))[0]?.toUpperCase() ?? '?'}
                 </AvatarFallback>
               </Avatar>
             </Link>

src/components/Feed.tsx

@@ -229,7 +229,7 @@ export function Feed({ kinds, tagFilters, header, hideCompose, emptyMessage, fee
   const showSavedFeedTabs = user && !isKindSpecificPage && !tagFilters;
 
   return (
-    <main className="flex-1 min-w-0">
+    <main className="flex-1 min-w-0 min-h-dvh">
       {/* CTA (logged out, main feed only) */}
       {!user && !kinds && (
         <LandingHero
@@ -327,10 +327,11 @@ export function Feed({ kinds, tagFilters, header, hideCompose, emptyMessage, fee
               message={
                 emptyMessage ?? (
                   activeTab === 'follows'
-                    ? 'No posts yet. Follow some people to see their content here.'
+                    ? 'Your feed is empty. Follow some people to see their posts here.'
                     : 'No posts found. Check your relay connections or come back soon.'
                 )
               }
+              showDiscover={!emptyMessage && activeTab === 'follows'}
               onSwitchToGlobal={
                 activeTab === 'follows' && showGlobalFeed
                   ? () => handleSetActiveTab('global')

src/components/FeedEmptyState.tsx

@@ -1,3 +1,6 @@
+import { Link } from 'react-router-dom';
+import { Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 interface FeedEmptyStateProps {
@@ -5,31 +8,45 @@ interface FeedEmptyStateProps {
   message: string;
   /** Called when the user clicks "Switch to Global". Omit to hide the button. */
   onSwitchToGlobal?: () => void;
+  /** Show a "Discover people" link to /packs. */
+  showDiscover?: boolean;
   className?: string;
 }
 
 /**
  * Consistent empty state for Follows/Global feed tabs across all feed pages.
  *
- * - Follows tab: pass `onSwitchToGlobal` to render a "Switch to Global" CTA.
- * - Global tab: omit `onSwitchToGlobal`; the message should guide the user
+ * - Follows tab: pass `onSwitchToGlobal` and `showDiscover` to render CTAs.
+ * - Global tab: omit both; the message should guide the user
  *   to check their relay connections.
  */
 export function FeedEmptyState({
   message,
   onSwitchToGlobal,
+  showDiscover,
   className,
 }: FeedEmptyStateProps) {
   return (
-    <div className={cn('py-16 px-8 text-center space-y-3', className)}>
-      <p className="text-muted-foreground break-all">{message}</p>
-      {onSwitchToGlobal && (
-        <button
-          className="text-sm text-primary hover:underline"
-          onClick={onSwitchToGlobal}
-        >
-          Switch to Global
-        </button>
+    <div className={cn('py-20 px-8 flex flex-col items-center text-center', className)}>
+      <div className="size-12 rounded-full bg-muted flex items-center justify-center mb-4">
+        <Users className="size-6 text-muted-foreground" />
+      </div>
+
+      <p className="text-muted-foreground max-w-xs">{message}</p>
+
+      {(showDiscover || onSwitchToGlobal) && (
+        <div className="flex flex-col gap-2 mt-5 w-full max-w-xs">
+          {showDiscover && (
+            <Button asChild className="rounded-full">
+              <Link to="/packs">Discover people to follow</Link>
+            </Button>
+          )}
+          {onSwitchToGlobal && (
+            <Button variant="ghost" className="rounded-full" onClick={onSwitchToGlobal}>
+              Browse the Global feed
+            </Button>
+          )}
+        </div>
       )}
     </div>
   );

src/components/InitialSyncGate.tsx

@@ -44,6 +44,7 @@ import { toast } from "@/hooks/useToast";
 import { useUploadFile } from "@/hooks/useUploadFile";
 import { genUserName } from "@/lib/genUserName";
 import { getAvatarShape } from "@/lib/avatarShape";
+import { resolveTheme, resolveThemeConfig } from "@/themes";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
@@ -598,9 +599,6 @@ function ProfileStep({
     banner: "",
     website: "",
   });
-  const [extraFields, setExtraFields] = useState<
-    Array<{ label: string; value: string }>
-  >([]);
   const [cropState, setCropState] = useState<{
     imageSrc: string;
     aspect: number;
@@ -655,17 +653,10 @@ function ProfileStep({
 
   const handlePublishProfile = useCallback(async () => {
     if (!user) return;
-    const hasData =
-      Object.values(profileData).some((v) => v) || extraFields.length > 0;
+    const hasData = Object.values(profileData).some((v) => v);
     if (hasData) {
       try {
-        const data: Record<string, unknown> = { ...profileData };
-        const validFields = extraFields.filter(
-          (f) => f.label.trim() && f.value.trim(),
-        );
-        if (validFields.length > 0)
-          data.fields = validFields.map((f) => [f.label, f.value]);
-        await publishEvent({ kind: 0, content: JSON.stringify(data), tags: [] });
+        await publishEvent({ kind: 0, content: JSON.stringify(profileData), tags: [] });
         queryClient.invalidateQueries({ queryKey: ["logins"] });
         queryClient.invalidateQueries({ queryKey: ["author", user.pubkey] });
       } catch {
@@ -678,7 +669,7 @@ function ProfileStep({
       }
     }
     onNext();
-  }, [user, profileData, extraFields, publishEvent, queryClient, onNext]);
+  }, [user, profileData, publishEvent, queryClient, onNext]);
 
   return (
     <div className="flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-400">
@@ -724,8 +715,6 @@ function ProfileStep({
           }
           onPickImage={handlePickImage}
           showNip05={false}
-          extraFields={extraFields}
-          onExtraFieldsChange={setExtraFields}
         />
       </div>
 
@@ -735,31 +724,21 @@ function ProfileStep({
         </div>
       )}
 
-      <div className="flex gap-3">
-        <Button
-          variant="ghost"
-          onClick={onNext}
-          className="flex-1 rounded-full h-11"
-          disabled={isPublishing || isSaving}
-        >
-          Skip
-        </Button>
-        <Button
-          onClick={handlePublishProfile}
-          className="flex-1 rounded-full h-11 gap-1.5"
-          disabled={isPublishing || isUploading || isSaving}
-        >
-          {isPublishing || isSaving ? (
-            <>
-              <Loader2 className="w-4 h-4 animate-spin" /> Saving…
-            </>
-          ) : (
-            <>
-              Continue <ChevronRight className="w-4 h-4" />
-            </>
-          )}
-        </Button>
-      </div>
+      <Button
+        onClick={handlePublishProfile}
+        className="w-full rounded-full h-11 gap-1.5"
+        disabled={isPublishing || isUploading || isSaving}
+      >
+        {isPublishing || isSaving ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" /> Saving…
+          </>
+        ) : (
+          <>
+            Continue <ChevronRight className="w-4 h-4" />
+          </>
+        )}
+      </Button>
     </div>
   );
 }
@@ -779,8 +758,10 @@ function ThemeStep({
   isFirst?: boolean;
   isSaving?: boolean;
 }) {
-  const { customTheme } = useTheme();
-  const bgUrl = customTheme?.background?.url;
+  const { theme, customTheme, themes } = useTheme();
+  const resolved = resolveTheme(theme);
+  const activeConfig = resolved === 'custom' ? customTheme : resolveThemeConfig(resolved, themes);
+  const bgUrl = activeConfig?.background?.url;
 
   return (
     <>

src/components/LeftSidebar.tsx

@@ -76,7 +76,7 @@ export function LeftSidebar() {
     }
   }, [location.pathname]);
 
-  const getDisplayName = (account: Account) => account.metadata.name ?? genUserName(account.pubkey);
+  const getDisplayName = (account: Account) => account.metadata.display_name || account.metadata.name || genUserName(account.pubkey);
 
   const handleLogout = async () => {
     setAccountPopoverOpen(false);
@@ -151,7 +151,7 @@ export function LeftSidebar() {
                   <Avatar shape={currentUserAvatarShape} className="size-10 shrink-0">
                     <AvatarImage src={metadata?.picture} alt={metadata?.name} />
                     <AvatarFallback className="bg-primary/20 text-primary text-sm">
-                      {(metadata?.name?.[0] || '?').toUpperCase()}
+                      {(metadata?.display_name || metadata?.name || genUserName(user.pubkey))[0]?.toUpperCase() ?? '?'}
                     </AvatarFallback>
                   </Avatar>
                 )}

src/components/MainLayout.tsx

@@ -118,7 +118,7 @@ function MainLayoutInner() {
       {showFAB && (
         <div
           className="fixed bottom-fab right-6 z-30 pointer-events-none transition-transform duration-300 ease-in-out sidebar:hidden"
-          style={navHidden ? { transform: `translateY(calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)))` } : undefined}
+          style={navHidden ? { transform: `translateY(calc(var(--bottom-nav-height) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))))` } : undefined}
         >
           <div className="pointer-events-auto">
             <FloatingComposeButton kind={fabKind} href={fabHref} onFabClick={onFabClick} icon={fabIcon} />

src/components/MobileDrawer.tsx

@@ -140,7 +140,7 @@ export function MobileDrawer({ open, onOpenChange }: MobileDrawerProps) {
               <button
                 onClick={() => setAccountExpanded((v) => !v)}
                 className="flex items-center gap-3 px-3 hover:bg-secondary/60 transition-colors w-full text-left"
-                style={{ minHeight: `calc(3rem + env(safe-area-inset-top, 0px))`, paddingTop: `env(safe-area-inset-top, 0px)` }}
+                style={{ minHeight: `calc(3rem + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)))`, paddingTop: `var(--safe-area-inset-top, env(safe-area-inset-top, 0px))` }}
               >
                 <Avatar shape={currentUserAvatarShape} className="size-7 shrink-0">
                   <AvatarImage src={metadata?.picture} alt={displayName} />
@@ -336,7 +336,7 @@ export function MobileDrawer({ open, onOpenChange }: MobileDrawerProps) {
               {/* Login prompt */}
               <div
                 className="flex items-center gap-3 px-4 border-b border-border"
-                style={{ minHeight: `calc(3rem + env(safe-area-inset-top, 0px))`, paddingTop: `env(safe-area-inset-top, 0px)` }}
+                style={{ minHeight: `calc(3rem + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)))`, paddingTop: `var(--safe-area-inset-top, env(safe-area-inset-top, 0px))` }}
               >
                 <LoginArea className="w-full flex" />
               </div>

src/components/MobileTopBar.tsx

@@ -25,12 +25,12 @@ export function MobileTopBar({ onAvatarClick, hasSubHeader }: MobileTopBarProps)
   return (
     <header
       className="sticky top-0 z-20 sidebar:hidden safe-area-top transition-transform duration-300 ease-in-out"
-      style={navHidden ? { transform: 'translateY(calc(-100% - 20px - env(safe-area-inset-top, 0px)))' } : undefined}
+      style={navHidden ? { transform: 'translateY(calc(-100% - 20px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))))' } : undefined}
     >
       {/* Safe-area fill — only covers the padding zone above the content with a single layer of bg. */}
       <div
         className="absolute top-0 left-0 right-0 bg-background/85"
-        style={{ height: 'env(safe-area-inset-top, 0px)' }}
+        style={{ height: 'var(--safe-area-inset-top, env(safe-area-inset-top, 0px))' }}
       />
       {/* Relative wrapper so ArcBackground only covers the content area, not the safe-area padding above it. */}
       <div className="relative">

src/components/NsitePreviewDialog.tsx

@@ -2,6 +2,7 @@ import type { NostrEvent } from '@nostrify/nostrify';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Package, X } from 'lucide-react';
+import { Capacitor } from '@capacitor/core';
 
 import { Button } from '@/components/ui/button';
 import { SandboxFrame } from '@/components/SandboxFrame';
@@ -68,25 +69,108 @@ function resolveServers(event: NostrEvent, appServers: string[]): string[] {
 }
 
 /**
- * Fetch a blob from the given sha256 by trying each Blossom server in order.
- * Returns a Response from the first server that responds successfully, or
- * throws if all servers fail.
+ * Module-level preferred server. Once a Blossom server successfully serves
+ * a blob, it is promoted here so subsequent requests try it first — avoiding
+ * the round-trip penalty of 404s on servers that don't have the content.
+ */
+let preferredServer: string | null = null;
+
+/**
+ * Fetch a blob from the given sha256 by trying Blossom servers.
+ *
+ * If a server previously succeeded (the "preferred" server), it is tried
+ * first. On success the preferred server is reinforced; on failure we fall
+ * through to the remaining servers in order. Whichever server ultimately
+ * succeeds is promoted to preferred for the next call.
  */
 async function fetchFromBlossom(sha256: string, servers: string[]): Promise<Response> {
   let lastError: unknown;
-  for (const server of servers) {
+
+  /** Try a single server. Returns the Response on success, or null. */
+  async function tryServer(server: string): Promise<Response | null> {
     const base = server.replace(/\/+$/, '');
     const url = `${base}/${sha256}`;
     try {
       const res = await fetch(url);
-      if (res.ok) return res;
+      if (res.ok) {
+        preferredServer = server;
+        return res;
+      }
     } catch (err) {
       lastError = err;
     }
+    return null;
   }
+
+  // Try the preferred server first if it's in the list.
+  if (preferredServer && servers.includes(preferredServer)) {
+    const res = await tryServer(preferredServer);
+    if (res) return res;
+  }
+
+  // Fall through to the full list, skipping the preferred (already tried).
+  for (const server of servers) {
+    if (server === preferredServer) continue;
+    const res = await tryServer(server);
+    if (res) return res;
+  }
+
   throw lastError ?? new Error(`Failed to fetch blob ${sha256} from all servers`);
 }
 
+/** Max concurrent Blossom fetches during pre-fetch. */
+const PREFETCH_CONCURRENCY = 12;
+
+/**
+ * Pre-fetch all unique blobs from the manifest into an in-memory cache.
+ *
+ * **Android only.** Android's WebView uses `shouldInterceptRequest` which
+ * blocks a pool of ~6 IO threads via `CountDownLatch` until JS responds.
+ * If each response requires a network round-trip to Blossom, the 6-at-a-time
+ * serialisation makes loading 200+ files extremely slow. By downloading
+ * every blob *before* the WebView starts loading, each bridge round-trip
+ * drops from seconds (network) to ~1-5ms (memory).
+ *
+ * iOS does NOT need this — `WKURLSchemeHandler` is fully async and can
+ * handle many concurrent requests without any thread pool bottleneck.
+ *
+ * Uses bounded concurrency to saturate the network without overwhelming it.
+ */
+async function prefetchAllBlobs(
+  manifest: Map<string, string>,
+  servers: string[],
+  cache: Map<string, Uint8Array>,
+): Promise<void> {
+  // Deduplicate — many paths may share the same hash (e.g. SPA fallbacks).
+  const uniqueHashes = [...new Set(manifest.values())];
+  // Skip hashes already in the cache (e.g. from a previous open).
+  const toFetch = uniqueHashes.filter((h) => !cache.has(h));
+  if (toFetch.length === 0) return;
+
+  let cursor = 0;
+  const total = toFetch.length;
+
+  async function worker(): Promise<void> {
+    while (cursor < total) {
+      const idx = cursor++;
+      const sha256 = toFetch[idx];
+      try {
+        const res = await fetchFromBlossom(sha256, servers);
+        const buffer = await res.arrayBuffer();
+        cache.set(sha256, new Uint8Array(buffer));
+      } catch {
+        // Non-fatal — resolveFile will fetch on demand for cache misses.
+      }
+    }
+  }
+
+  const workers = Array.from(
+    { length: Math.min(PREFETCH_CONCURRENCY, total) },
+    () => worker(),
+  );
+  await Promise.all(workers);
+}
+
 interface NsitePreviewDialogProps {
   /** The nsite event (kind 15128 or 35128) containing path and server tags. */
   event: NostrEvent;
@@ -124,6 +208,13 @@ export function NsitePreviewDialog({ event, appName, appPicture, open, onOpenCha
   const manifest = useRef<Map<string, string>>(new Map());
   const servers = useRef<string[]>([]);
 
+  /**
+   * In-memory blob cache: sha256 → raw bytes.
+   * On Android, populated by a blocking pre-fetch in `onReady` so every
+   * `resolveFile` call is an instant cache hit with no network wait.
+   */
+  const blobCache = useRef<Map<string, Uint8Array>>(new Map());
+
   useEffect(() => {
     manifest.current = buildManifest(event);
     const appServers = getEffectiveBlossomServers(
@@ -139,6 +230,26 @@ export function NsitePreviewDialog({ event, appName, appPicture, open, onOpenCha
     content: getPreviewInjectedScript(),
   }], []);
 
+  /**
+   * Called by SandboxFrame before the native WebView is created.
+   *
+   * On Android: blocks until all blobs are pre-fetched. Android's WebView
+   * uses `shouldInterceptRequest` which blocks ~6 IO threads — if each
+   * response requires a network fetch the whole thing is painfully slow.
+   * The native ProgressBar spinner (render thread) stays visible and
+   * animating during the download. Once the WebView starts, every
+   * resolveFile call is an instant cache hit.
+   *
+   * On iOS: no-op. WKURLSchemeHandler is async and handles concurrent
+   * requests without a thread pool bottleneck.
+   *
+   * On web: no-op. iframe.diy's service worker handles fetches efficiently.
+   */
+  const onReady = useCallback(async () => {
+    if (Capacitor.getPlatform() !== 'android') return;
+    await prefetchAllBlobs(manifest.current, servers.current, blobCache.current);
+  }, []);
+
   /** Resolve a pathname to file content from the Blossom manifest. */
   const resolveFile = useCallback(async (pathname: string): Promise<FileResponse | null> => {
     // Look up the sha256 for this path in the manifest.
@@ -153,11 +264,21 @@ export function NsitePreviewDialog({ event, appName, appPicture, open, onOpenCha
 
     if (!sha256) return null;
 
-    // Fetch the blob from Blossom, trying each server in order.
+    // Serve from cache if available (pre-fetched on Android).
+    const cached = blobCache.current.get(sha256);
+    if (cached) {
+      const contentType = getMimeType(servingPath);
+      return { status: 200, contentType, body: cached };
+    }
+
+    // Cache miss — fetch from Blossom (normal path on iOS/web).
     const res = await fetchFromBlossom(sha256, servers.current);
     const buffer = await res.arrayBuffer();
     const body = new Uint8Array(buffer);
 
+    // Store in cache for future requests (e.g. SPA navigations).
+    blobCache.current.set(sha256, body);
+
     // Always determine content type from the file extension.
     // Blossom servers commonly return incorrect types (e.g. text/plain for .js
     // files), which causes browsers to reject module scripts. The file path from
@@ -221,6 +342,7 @@ export function NsitePreviewDialog({ event, appName, appPicture, open, onOpenCha
           key={`${previewSubdomain}-${open}`}
           id={previewSubdomain}
           resolveFile={resolveFile}
+          onReady={onReady}
           injectedScripts={injectedScripts}
           className="w-full h-full border-0"
           title={`${appName} preview`}

src/components/ProfileCard.tsx

@@ -206,9 +206,11 @@ export function ProfileCard({
                 <Pencil className="size-3.5" /> {metadata.banner ? 'Change banner' : 'Add banner'}
               </span>
             </div>
-            <div className="absolute bottom-2 right-2 size-7 rounded-full bg-background border border-border shadow-sm flex items-center justify-center transition-opacity">
-              <Pencil className="size-3.5 text-muted-foreground" />
-            </div>
+            {metadata.banner && (
+              <div className="absolute bottom-2 right-2 size-7 rounded-full bg-background border border-border shadow-sm flex items-center justify-center transition-opacity">
+                <Pencil className="size-3.5 text-muted-foreground" />
+              </div>
+            )}
           </>
         )}
       </div>
@@ -240,9 +242,11 @@ export function ProfileCard({
                     >
                       <Pencil className="size-6 text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow" />
                     </div>
-                    <div className="absolute bottom-0 right-0 size-7 rounded-full bg-background border border-border shadow-sm flex items-center justify-center transition-opacity">
-                      <Pencil className="size-3.5 text-muted-foreground" />
-                    </div>
+                    {metadata.picture && (
+                      <div className="absolute bottom-0 right-0 size-7 rounded-full bg-background border border-border shadow-sm flex items-center justify-center transition-opacity">
+                        <Pencil className="size-3.5 text-muted-foreground" />
+                      </div>
+                    )}
                   </button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" sideOffset={6}>

src/components/SandboxFrame.tsx

@@ -395,18 +395,6 @@ const SandboxFrameNative = forwardRef<SandboxFrameHandle, SandboxFrameProps>(
       let cancelled = false;
 
       async function setup() {
-        // Run onReady first so the consumer can prepare (e.g. download and
-        // unzip a .xdc archive) before the native WebView starts loading
-        // resources. This mirrors the web behaviour where onReady runs
-        // before `init` is sent.
-        try {
-          await onReadyRef.current?.();
-        } catch (err) {
-          console.error('[SandboxFrame] onReady failed:', err);
-        }
-
-        if (cancelled || destroyedRef.current) return;
-
         // Measure the placeholder position.
         const el = placeholderRef.current;
         if (!el) return;
@@ -439,8 +427,8 @@ const SandboxFrameNative = forwardRef<SandboxFrameHandle, SandboxFrameProps>(
 
         if (cancelled || destroyedRef.current) return;
 
-        // Create the native WebView. Fetch events from the initial load
-        // will be handled by the listeners registered above.
+        // Create the native WebView with a loading spinner — does NOT
+        // navigate yet, so no fetch events fire at this point.
         await SandboxPlugin.create({
           id,
           frame: {
@@ -452,12 +440,27 @@ const SandboxFrameNative = forwardRef<SandboxFrameHandle, SandboxFrameProps>(
         });
 
         if (cancelled || destroyedRef.current) {
-          // Component unmounted while we were awaiting — clean up immediately.
           SandboxPlugin.destroy({ id }).catch(() => {});
           return;
         }
 
         createdRef.current = true;
+
+        // Run onReady while the spinner is visible and animating.
+        // On Android this pre-fetches all blobs so every resolveFile call
+        // after navigation is an instant cache hit.
+        // On iOS/web this is typically a no-op or instant.
+        try {
+          await onReadyRef.current?.();
+        } catch (err) {
+          console.error('[SandboxFrame] onReady failed:', err);
+        }
+
+        if (cancelled || destroyedRef.current) return;
+
+        // Start loading the sandbox content — fetch events will now fire
+        // and be handled by the listeners registered above.
+        await SandboxPlugin.navigate({ id });
       }
 
       // ---------------------------------------------------------------

src/components/SubHeaderBar.tsx

@@ -85,7 +85,7 @@ export function SubHeaderBar({ children, className, innerClassName, noArc, pinne
 
     // Measure safe-area-inset-top once by reading it via a throw-away element.
     const probe = document.createElement('div');
-    probe.style.cssText = 'position:fixed;top:env(safe-area-inset-top,0px);left:0;width:0;height:0;visibility:hidden;pointer-events:none';
+    probe.style.cssText = 'position:fixed;top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));left:0;width:0;height:0;visibility:hidden;pointer-events:none';
     document.body.appendChild(probe);
     const safeAreaTop = probe.getBoundingClientRect().top;
     document.body.removeChild(probe);
@@ -122,7 +122,7 @@ export function SubHeaderBar({ children, className, innerClassName, noArc, pinne
         {showSafeAreaPadding && (
           <div
             className="absolute top-0 left-0 right-0 bg-background/85 sidebar:hidden"
-            style={{ height: 'env(safe-area-inset-top, 0px)' }}
+            style={{ height: 'var(--safe-area-inset-top, env(safe-area-inset-top, 0px))' }}
           />
         )}
         {/* Inner wrapper so ArcBackground covers only the tab area, not the safe-area padding above.

src/components/ui/sheet.tsx

@@ -70,7 +70,7 @@ const SheetContent = React.forwardRef<
             ? "left-full ml-3 top-4"
             : "right-4 top-4 rounded-sm ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 data-[state=open]:bg-secondary"
         )}
-        style={{ top: `calc(env(safe-area-inset-top, 0px) + 0.85rem)` }}
+        style={{ top: `calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 0.85rem)` }}
       >
         <X className={side === "left" ? "h-5 w-5 text-white" : "h-4 w-4"} strokeWidth={side === "left" ? 2.5 : 2} />
         <span className="sr-only">Close</span>

src/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[300] flex max-h-screen w-full flex-col-reverse p-4 pt-[max(1rem,env(safe-area-inset-top))] md:bottom-0 md:right-0 md:top-auto md:flex-col md:pt-4 md:max-w-[420px]",
+      "fixed top-0 z-[300] flex max-h-screen w-full flex-col-reverse p-4 pt-[max(1rem,var(--safe-area-inset-top,env(safe-area-inset-top)))] md:bottom-0 md:right-0 md:top-auto md:flex-col md:pt-4 md:max-w-[420px]",
       className
     )}
     {...props}

src/index.css

@@ -34,37 +34,43 @@
 }
 
 @layer utilities {
+  /* ── Safe-area inset utilities ────────────────────────────────────────────
+     Use var(--safe-area-inset-*, …) as the outer wrapper so that
+     Capacitor's SystemBars plugin (which injects --safe-area-inset-* CSS
+     variables on Android) takes precedence when available.  The inner
+     env(safe-area-inset-*, 0px) is the standard fallback for iOS / web. */
+
   .safe-area-top {
-    padding-top: env(safe-area-inset-top, 0px);
+    padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
   }
   
   .safe-area-bottom {
-    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
   }
   
   .safe-area-inset-top {
-    top: env(safe-area-inset-top, 0px);
+    top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
   }
   
   .safe-area-inset-bottom {
-    bottom: env(safe-area-inset-bottom, 0px);
+    bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
   }
   
   /* FAB bottom offset: clears bottom nav + safe area inset on mobile */
   .bottom-fab {
-    bottom: calc(1.5rem + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
+    bottom: calc(1.5rem + var(--bottom-nav-height) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
   }
 
   /* Position above mobile bottom nav + safe area + arc overhang (28px) */
   .bottom-mobile-nav {
-    bottom: calc(var(--bottom-nav-height) + 28px + env(safe-area-inset-bottom, 0px));
+    bottom: calc(var(--bottom-nav-height) + 28px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
   }
 
   /* Bottom overscroll padding for the center column:
      clears the mobile bottom nav + safe area + generous extra space
      so content can be scrolled well past the bottom bar */
   .pb-overscroll {
-    padding-bottom: calc(10vh + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(10vh + var(--bottom-nav-height) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
   }
 
   @media (min-width: 900px) {
@@ -75,12 +81,12 @@
 
   /* Mobile top bar height + safe area inset for sticky elements */
   .top-mobile-bar {
-    top: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px));
+    top: calc(var(--top-bar-height) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
   }
 
   /* New-posts pill: just below the SubHeaderBar on both mobile and desktop */
   .new-posts-pill {
-    top: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px) + 3.5rem);
+    top: calc(var(--top-bar-height) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 3.5rem);
   }
   @media (min-width: 900px) {
     .new-posts-pill {
@@ -94,29 +100,29 @@
      Must clear its own height (100%) + top bar + safe area + arc overhang (20px). */
   @media (max-width: 899px) {
     .nav-hidden-slide {
-      transform: translateY(calc(-100% - var(--top-bar-height) - 20px - env(safe-area-inset-top, 0px)));
+      transform: translateY(calc(-100% - var(--top-bar-height) - 20px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))));
     }
   }
 
   /* Negative margin to pull content area up behind the mobile top bar (only when it's visible) */
   @media (max-width: 899px) {
     .-mt-mobile-bar {
-      margin-top: calc(-1 * var(--top-bar-height) - env(safe-area-inset-top, 0px));
-      padding-top: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px));
+      margin-top: calc(-1 * var(--top-bar-height) - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
+      padding-top: calc(var(--top-bar-height) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
     }
   }
 
   /* AI chat height on mobile: full viewport minus top bar, extends behind bottom nav.
      Padding-bottom keeps input above the nav. */
   .ai-chat-height {
-    height: calc(100dvh - var(--top-bar-height) - env(safe-area-inset-top, 0px));
-    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
+    height: calc(100dvh - var(--top-bar-height) - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
+    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
   }
 
   /* Live stream page height on mobile: full viewport minus top bar, bottom nav, and safe-area insets */
   .livestream-height {
-    height: calc(100dvh - var(--top-bar-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
-    max-height: calc(100dvh - var(--top-bar-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
+    height: calc(100dvh - var(--top-bar-height) - var(--bottom-nav-height) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
+    max-height: calc(100dvh - var(--top-bar-height) - var(--bottom-nav-height) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
   }
 
   /* Vine feed slide height: full viewport on mobile (top bar + bottom nav are

src/lib/sandboxPlugin.ts

@@ -85,10 +85,18 @@ export interface SandboxScriptMessageEvent {
 // Plugin interface
 // ---------------------------------------------------------------------------
 
+/** Options for navigating the sandbox WebView to its entry point. */
+export interface SandboxNavigateOptions {
+  id: string;
+}
+
 export interface SandboxPluginInterface {
-  /** Create a new sandbox WebView with a unique custom URL scheme. */
+  /** Create a new sandbox WebView with a loading spinner (does not navigate). */
   create(options: SandboxCreateOptions): Promise<void>;
 
+  /** Navigate the sandbox WebView to its entry point (triggers resource loading). */
+  navigate(options: SandboxNavigateOptions): Promise<void>;
+
   /** Update the position/size of an existing sandbox WebView. */
   updateFrame(options: SandboxUpdateFrameOptions): Promise<void>;
 

src/main.tsx

@@ -20,29 +20,26 @@ import '@fontsource-variable/inter';
 // Runs before React so the very first paint matches the persisted theme.
 // Uses a MutationObserver so it reacts to all subsequent theme changes
 // (class changes for builtin themes, style-content changes for custom themes).
-import { Capacitor } from '@capacitor/core';
-import { StatusBar, Style } from '@capacitor/status-bar';
+import { Capacitor, SystemBars, SystemBarsStyle } from '@capacitor/core';
 import { Keyboard } from '@capacitor/keyboard';
-import { getBackgroundThemeMode, getBackgroundHex } from '@/lib/colorUtils';
+import { getBackgroundThemeMode } from '@/lib/colorUtils';
 
 if (Capacitor.isNativePlatform()) {
   // Hide the iOS keyboard accessory bar (prev/next/done toolbar above the keyboard)
   Keyboard.setAccessoryBarVisible({ isVisible: false }).catch(() => {});
   /**
-   * Read --background from the computed style of <html>, convert the HSL
-   * value to a hex color, and update the native status bar to match.
+   * Sync the native system bar icon style with the active CSS theme.
    *
-   * Style.Dark  = light/white icons (use on dark backgrounds)
-   * Style.Light = dark/black icons  (use on light backgrounds)
+   * SystemBarsStyle.Dark  = light/white icons (use on dark backgrounds)
+   * SystemBarsStyle.Light = dark/black icons  (use on light backgrounds)
+   *
+   * On Android 16+ (API 36) setBackgroundColor no longer works — the bars
+   * are transparent and the web content renders behind them. The app already
+   * draws its own safe-area backgrounds in CSS, so only icon style matters.
    */
   function updateStatusBar() {
-    const hex = getBackgroundHex();
-    if (!hex) return;
-
     const isDark = getBackgroundThemeMode() === 'dark';
-
-    StatusBar.setStyle({ style: isDark ? Style.Dark : Style.Light }).catch(() => {});
-    StatusBar.setBackgroundColor({ color: hex }).catch(() => {});
+    SystemBars.setStyle({ style: isDark ? SystemBarsStyle.Dark : SystemBarsStyle.Light }).catch(() => {});
   }
 
   // Apply immediately (theme class is set synchronously by AppProvider useLayoutEffect

src/pages/ProfilePage.tsx

@@ -6,7 +6,7 @@ import { useNostr } from '@nostrify/react';
 import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSeoMeta } from '@unhead/react';
 import { nip19 } from 'nostr-tools';
-import { Zap, Flame, MoreHorizontal, Share2, ClipboardCopy, ExternalLink, VolumeX, Flag, Bitcoin, Pin, X, QrCode, Check, Copy, Loader2, Download, Palette, Pencil, Trash2, Eye, EyeOff, RefreshCw, RotateCcw, MessageSquare, Globe, Mail, Plus, GripVertical, ListPlus, Award, PanelLeft } from 'lucide-react';
+import { Zap, Flame, MoreHorizontal, ClipboardCopy, ExternalLink, VolumeX, Flag, Bitcoin, Pin, X, QrCode, Check, Copy, Loader2, Download, Palette, Pencil, Trash2, Eye, EyeOff, RefreshCw, RotateCcw, MessageSquare, Globe, Mail, Plus, GripVertical, ListPlus, Award, PanelLeft } from 'lucide-react';
 
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { getAvatarShape, isEmoji, emojiAvatarBorderStyle } from '@/lib/avatarShape';
@@ -47,7 +47,6 @@ import { useNip05Resolve } from '@/hooks/useNip05Resolve';
 import { genUserName } from '@/lib/genUserName';
 
 import { canZap } from '@/lib/canZap';
-import { shareOrCopy } from '@/lib/share';
 import { openUrl } from '@/lib/downloadFile';
 import { EmojifiedText } from '@/components/CustomEmoji';
 import { BioContent } from '@/components/BioContent';
@@ -2124,23 +2123,6 @@ type EditableTab = { label: string; isCore: boolean; tab?: ProfileTab };
                   >
                     <MoreHorizontal className="size-5" />
                   </Button>
-                  {/* Share button (mobile only) */}
-                  {pubkey && (
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="rounded-full size-10 sidebar:hidden"
-                      title="Share profile"
-                      onClick={async () => {
-                        const npubId = nip19.npubEncode(pubkey);
-                        const url = `${window.location.origin}/${npubId}`;
-                        const result = await shareOrCopy(url);
-                        if (result === 'copied') toast({ title: 'Profile link copied to clipboard' });
-                      }}
-                    >
-                      <Share2 className="size-5" />
-                    </Button>
-                  )}
                   {/* Follow QR code button (own profile only) */}
                   {isOwnProfile && (
                     <Button

src/pages/VinesFeedPage.tsx

@@ -527,7 +527,7 @@ export function VineCard({
 			{/* ── Mute toggle (bottom-right) — only shown once video is ready ──── */}
 			{isVideoReady && (
 				<button
-					className="absolute bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] right-4 z-10 size-9 rounded-full bg-black/40 backdrop-blur-sm border border-white/20 flex items-center justify-center text-white hover:bg-black/60 transition-colors"
+					className="absolute bottom-[calc(1rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] right-4 z-10 size-9 rounded-full bg-black/40 backdrop-blur-sm border border-white/20 flex items-center justify-center text-white hover:bg-black/60 transition-colors"
 					onClick={toggleMute}
 					aria-label={isMuted ? "Unmute" : "Mute"}
 				>
@@ -541,7 +541,7 @@ export function VineCard({
 
 			{/* ── Right action sidebar — only shown once video is ready ─────── */}
 			{isVideoReady && (
-				<div className="absolute right-3 bottom-[calc(6rem+env(safe-area-inset-bottom,0px))] z-10 flex flex-col items-center gap-5">
+				<div className="absolute right-3 bottom-[calc(6rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] z-10 flex flex-col items-center gap-5">
 					{/* Author avatar */}
 					<ProfileHoverCard pubkey={event.pubkey} asChild>
 						<Link
@@ -619,7 +619,7 @@ export function VineCard({
 
 			{/* ── Bottom info strip — only shown once video is ready ────────── */}
 			{isVideoReady && (
-				<div className="absolute bottom-[calc(1.5rem+env(safe-area-inset-bottom,0px))] left-4 right-20 z-10 space-y-1.5">
+				<div className="absolute bottom-[calc(1.5rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] left-4 right-20 z-10 space-y-1.5">
 					<ProfileHoverCard pubkey={event.pubkey} asChild>
 						<Link
 							to={profileUrl}
@@ -851,7 +851,7 @@ export function VinesFeedPage() {
 						{/* Bottom gradient */}
 						<div className="absolute inset-x-0 bottom-0 h-64 bg-gradient-to-t from-black/90 via-black/40 to-transparent pointer-events-none" />
 						{/* Bottom info strip */}
-						<div className="absolute bottom-[calc(1.5rem+env(safe-area-inset-bottom,0px))] left-4 right-20 space-y-2.5">
+						<div className="absolute bottom-[calc(1.5rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] left-4 right-20 space-y-2.5">
 							<Skeleton className="h-4 w-28 bg-white/20 rounded" />
 							<Skeleton className="h-3.5 w-48 bg-white/15 rounded" />
 							<div className="flex gap-1.5">
@@ -860,7 +860,7 @@ export function VinesFeedPage() {
 							</div>
 						</div>
 						{/* Right action buttons */}
-						<div className="absolute right-3 bottom-[calc(6rem+env(safe-area-inset-bottom,0px))] flex flex-col items-center gap-5">
+						<div className="absolute right-3 bottom-[calc(6rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] flex flex-col items-center gap-5">
 							<Skeleton className="size-11 rounded-full bg-white/15" />
 							<Skeleton className="size-11 rounded-full bg-white/15" />
 							<Skeleton className="size-11 rounded-full bg-white/15" />
@@ -868,7 +868,7 @@ export function VinesFeedPage() {
 							<Skeleton className="size-11 rounded-full bg-white/15" />
 						</div>
 						{/* Mute button */}
-						<Skeleton className="absolute bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] right-4 size-9 rounded-full bg-white/10" />
+						<Skeleton className="absolute bottom-[calc(1rem+var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))] right-4 size-9 rounded-full bg-white/10" />
 					</div>
 				</div>
 			</div>