Fix Android WebView resize bugs caused by @capacitor/keyboard

Remove resizeOnFullScreen config which caused possiblyResizeChildOfContent() to corrupt CoordinatorLayout height on Android 16 (API 36). Upgrade plugin from 8.0.2 to 8.0.3 which adds a SystemBars guard as additional safety. Platform-gate setAccessoryBarVisible to iOS only (unimplemented on Android).
Fix dialog obscured by virtual keyboard on Android Chrome
2026-04-12 14:07:52 -05:00 · 2026-04-12 13:21:21 -05:00 · 2026-04-12 12:02:45 -05:00 · 2026-04-12 11:37:10 -05:00 · 2026-04-12 14:13:32 +00:00 · 2026-04-11 18:15:04 -05:00
47 changed files with 948 additions and 524 deletions
@@ -219,7 +219,7 @@ publish-zapstore:
    - if: $CI_COMMIT_TAG =~ /^v\d+\.\d+\.\d+$/
  variables:
    SIGN_WITH: $ZAPSTORE_BUNKER_URL
-    RELAY_URLS: "wss://relay.zapstore.dev,wss://relay.ditto.pub"
+    RELAY_URLS: "wss://relay.zapstore.dev,wss://relay.ditto.pub,wss://relay.dreamith.to,wss://relay.primal.net"
    BLOSSOM_URL: "https://blossom.ditto.pub"
  script:
    - go install github.com/zapstore/zsp@latest
@@ -235,3 +235,32 @@ publish-zapstore:
    - sed -i "2i release_source:\ ./${APK_PATH}" zapstore.yaml
    - sed -i "2i version:\ ${VERSION}" zapstore.yaml
    - zsp publish --quiet --skip-metadata --skip-preview zapstore.yaml
+
+publish-google-play:
+  stage: publish
+  image: ruby:3.3
+  needs:
+    - build-apk
+  rules:
+    - if: $CI_COMMIT_TAG =~ /^v\d+\.\d+\.\d+$/
+  script:
+    - gem install fastlane --no-document
+
+    # Decode base64-encoded service account JSON to a temp file
+    - echo "$GOOGLE_PLAY_SERVICE_ACCOUNT_JSON" | base64 -d > /tmp/play-service-account.json
+
+    # Upload the AAB to Google Play production track
+    - >-
+      fastlane supply
+      --aab artifacts/Ditto.aab
+      --package_name pub.ditto.app
+      --track production
+      --json_key /tmp/play-service-account.json
+      --skip_upload_metadata
+      --skip_upload_changelogs
+      --skip_upload_images
+      --skip_upload_screenshots
+      --skip_upload_apk
+
+    # Clean up
+    - rm -f /tmp/play-service-account.json
@@ -1484,7 +1484,7 @@ The project uses GitLab CI (`.gitlab-ci.yml`) with the following stages:
 2. **deploy** - Builds and deploys to nsite via nsyte (`deploy-nsite` job, default branch only)
 3. **build** - Builds a signed release APK (`build-apk` job, tags only)
 4. **release** - Creates a GitLab Release with the APK artifact (tags only)
-5. **publish** - Publishes the APK to Zapstore (`publish-zapstore` job, tags only)
+5. **publish** - Publishes the APK to Zapstore (`publish-zapstore` job, tags only) and AAB to Google Play (`publish-google-play` job, tags only)

 ### Creating a Release

@@ -1494,7 +1494,7 @@ Releases are triggered by pushing a version tag. Use the npm script:
 npm run release
 ```

-This creates a tag in the format `v2026.03.14+abc1234` (date + short commit hash) and pushes it to GitLab, which triggers the `build-apk`, `release`, and `publish-zapstore` stages.
+This creates a tag in the format `v2026.03.14+abc1234` (date + short commit hash) and pushes it to GitLab, which triggers the `build-apk`, `release`, `publish-zapstore`, and `publish-google-play` stages.

 ### Zapstore Publishing

@@ -1586,4 +1586,29 @@ The `--use-fallback-relays` and `--use-fallback-servers` flags also include nsyt
 To rotate the nsite credential:
 1. Revoke the old bunker connection in your signer app
 2. Run `nsyte ci` again to generate a new `nbunksec1...` string
-3. Update the `NSITE_NBUNKSEC` variable in GitLab CI/CD settings
+3. Update the `NSITE_NBUNKSEC` variable in GitLab CI/CD settings
+
+### Google Play Publishing
+
+The project automatically publishes Android AABs (App Bundles) to [Google Play](https://play.google.com/store/apps/details?id=pub.ditto.app) using [fastlane supply](https://docs.fastlane.tools/actions/supply/). The `publish-google-play` CI job runs after a successful AAB build and uploads directly to the production track.
+
+**GitLab CI/CD Variables** (Settings > CI/CD > Variables):
+
+| Variable | Description | Protected | Masked | Raw |
+|---|---|---|---|---|
+| `GOOGLE_PLAY_SERVICE_ACCOUNT_JSON` | Full JSON contents of the Google Play API service account key file | Yes | Yes | No |
+
+#### Initial Setup (one-time)
+
+1. Create or reuse a project in the [Google Cloud Console](https://console.cloud.google.com/projectcreate)
+2. Enable the [Google Play Developer API](https://console.developers.google.com/apis/api/androidpublisher.googleapis.com/) for that project
+3. In Google Cloud Console, go to [Service Accounts](https://console.cloud.google.com/iam-admin/serviceaccounts), create a service account, and download a JSON key file for it
+4. In Google Play Console, go to [Users & Permissions](https://play.google.com/console/users-and-permissions), click **Invite new users**, enter the service account email, and grant it permission to manage releases for `pub.ditto.app`
+5. Add the full JSON contents of the key file as the `GOOGLE_PLAY_SERVICE_ACCOUNT_JSON` variable in GitLab CI/CD settings (Settings > CI/CD > Variables). Mark it as **Protected** and **Masked**.
+
+#### Key Points
+
+- The job uploads the signed AAB (not APK) since Google Play requires App Bundles
+- Uploads go directly to the **production** track -- Google's review process still applies before the update reaches users
+- Metadata, screenshots, and changelogs are managed in the Play Console, not via CI (the job uses `--skip_upload_metadata` etc.)
+- The same signing keystore used for Zapstore is used here (`ANDROID_KEYSTORE_BASE64`, `KEYSTORE_PASSWORD`, `KEY_PASSWORD`)
@@ -1,5 +1,30 @@
 # Changelog

+## [2.6.5] - 2026-04-11
+
+### Changed
+- Apps and games load significantly faster on Android with smarter prefetching and server affinity
+- Native loading spinners replace HTML-based ones on iOS and Android for a smoother experience
+
+### Fixed
+- External API requests on Android no longer fail due to hostname restrictions
+- iOS App Store compliance issues resolved
+
+## [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
@@ -14,7 +14,7 @@ android {
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
-        versionName "2.6.3"
+        versionName "2.6.5"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -14,7 +14,7 @@ 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')

 }
@@ -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();
            }
@@ -17,8 +17,8 @@ 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')

 include ':capacitor-secure-storage-plugin'
 project(':capacitor-secure-storage-plugin').projectDir = new File('../node_modules/capacitor-secure-storage-plugin/android')
@@ -5,8 +5,6 @@ const config: CapacitorConfig = {
  appName: 'Ditto',
  webDir: 'dist',
  server: {
-    // Handle deep links from your domain
-    hostname: 'ditto.pub',
    androidScheme: 'https',
    iosScheme: 'https'
  },
@@ -21,8 +19,10 @@ const config: CapacitorConfig = {
    scheme: 'Ditto'
  },
  plugins: {
-    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',
    },
  },
 };
@@ -3,7 +3,7 @@
  <head>
    <title>Ditto — Your content. Your vibe. Your rules.</title>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
    <meta name="description" content="Ditto — Your content. Your vibe. Your rules." />

    <!-- Open Graph -->
@@ -17,6 +17,7 @@
 		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
 		B1A2C3D40001000100000001 /* SandboxPlugin.swift in Sources */ = {isa = PBXBuildFile; fileRef = B1A2C3D40001000100000002 /* SandboxPlugin.swift */; };
 		B1A2C3D40002000100000001 /* DittoBridgeViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = B1A2C3D40002000100000002 /* DittoBridgeViewController.swift */; };
+		B1A2C3D40005000100000001 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = B1A2C3D40005000100000002 /* PrivacyInfo.xcprivacy */; };
 /* End PBXBuildFile section */

 /* Begin PBXFileReference section */
@@ -32,6 +33,8 @@
 		958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
 		B1A2C3D40001000100000002 /* SandboxPlugin.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SandboxPlugin.swift; sourceTree = "<group>"; };
 		B1A2C3D40002000100000002 /* DittoBridgeViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DittoBridgeViewController.swift; sourceTree = "<group>"; };
+		B1A2C3D40004000100000002 /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
+		B1A2C3D40005000100000002 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -67,6 +70,7 @@
 			isa = PBXGroup;
 			children = (
 				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				B1A2C3D40004000100000002 /* App.entitlements */,
 				504EC3071FED79650016851F /* AppDelegate.swift */,
 				B1A2C3D40001000100000002 /* SandboxPlugin.swift */,
 				B1A2C3D40002000100000002 /* DittoBridgeViewController.swift */,
@@ -74,6 +78,7 @@
 				504EC30E1FED79650016851F /* Assets.xcassets */,
 				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
 				504EC3131FED79650016851F /* Info.plist */,
+				B1A2C3D40005000100000002 /* PrivacyInfo.xcprivacy */,
 				2FAD9762203C412B000D30F8 /* config.xml */,
 				50B271D01FEDC1A000F3C39B /* public */,
 			);
@@ -151,6 +156,7 @@
 				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
 				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
 				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+				B1A2C3D40005000100000001 /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -303,6 +309,7 @@
 			baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = GZLTTH5DLM;
@@ -312,7 +319,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.6.3;
+				MARKETING_VERSION = 2.6.5;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -326,6 +333,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = GZLTTH5DLM;
@@ -335,7 +343,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.6.3;
+				MARKETING_VERSION = 2.6.5;
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.developer.associated-domains</key>
+	<array>
+		<string>webcredentials:ditto.pub</string>
+		<string>webcredentials:ditto.pub?mode=developer</string>
+	</array>
+</dict>
+</plist>
@@ -53,5 +53,7 @@
 	<string>Ditto needs camera access to take photos and videos for your posts.</string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Ditto needs access to your microphone to record voice messages.</string>
+	<key>ITSAppUsesNonExemptEncryption</key>
+	<false/>
 </dict>
 </plist>
@@ -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:
@@ -17,7 +17,7 @@ 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")
    ],
    targets: [
@@ -31,7 +31,7 @@ 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")
            ]
        )
@@ -1,20 +1,20 @@
 {
  "name": "ditto",
-  "version": "2.6.2",
+  "version": "2.6.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ditto",
-      "version": "2.6.2",
+      "version": "2.6.5",
      "dependencies": {
        "@capacitor/app": "^8.0.0",
        "@capacitor/core": "^8.1.0",
        "@capacitor/filesystem": "^8.1.2",
-        "@capacitor/keyboard": "^8.0.2",
+        "@capacitor/keyboard": "^8.0.3",
        "@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",
        "@dnd-kit/utilities": "^3.2.2",
@@ -60,7 +60,7 @@
        "@milkdown/react": "^7.20.0",
        "@milkdown/utils": "^7.20.0",
        "@nostrify/nostrify": "^0.51.1",
-        "@nostrify/react": "^0.5.0",
+        "@nostrify/react": "^0.5.1",
        "@nostrify/types": "^0.36.9",
        "@plausible-analytics/tracker": "^0.4.4",
        "@radix-ui/react-accordion": "^1.2.0",
@@ -429,9 +429,9 @@
      }
    },
    "node_modules/@capacitor/keyboard": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.2.tgz",
-      "integrity": "sha512-he6xKmTBp5AhVrWJeEi6RYkJ25FjLLdNruBU2wafpITk3Nb7UdzOj96x3K6etFuEj8/rtn9WXBTs1o2XA86A1A==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.3.tgz",
+      "integrity": "sha512-27Bv5/2w1Ss2njguBgTS98O0Bb8DRJhAARyzXYib0JlT/n6BrJw/EZ0CokM4C8GFUjFDjJnEKF1Ie01buTMEXQ==",
      "license": "MIT",
      "peerDependencies": {
        "@capacitor/core": ">=8.0.0"
@@ -455,21 +455,21 @@
        "@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",
      "integrity": "sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==",
      "license": "ISC"
    },
+    "node_modules/@capgo/capacitor-autofill-save-password": {
+      "version": "8.0.22",
+      "resolved": "https://registry.npmjs.org/@capgo/capacitor-autofill-save-password/-/capacitor-autofill-save-password-8.0.22.tgz",
+      "integrity": "sha512-l6RvtTgdZWDx5fu74QcdV0NLioKmI4PwzCnscpl00ZjxHjecR/yVoB5ufsOYLAY2qyLP3jx9PUpFvEo2rPNHPA==",
+      "license": "MPL-2.0",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
    "node_modules/@codemirror/autocomplete": {
      "version": "6.20.1",
      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz",
@@ -2584,9 +2584,9 @@
      "license": "MIT"
    },
    "node_modules/@nostrify/react": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@nostrify/react/-/react-0.5.0.tgz",
-      "integrity": "sha512-IQf74SSusSIyhI9FkUQSUTsX20yeww5xHIUeexvxcWXEpVhYJYCwduK2yRB75NvYgXjcqYeDUGA2RvzBhDc/eA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@nostrify/react/-/react-0.5.1.tgz",
+      "integrity": "sha512-gQUct8A7KLKvoLtv4bHpVDfmvzJlIHjZZI6DMui8vrSuzm8IqMRdAYADbR3ry1mlIQp8/c4EeR24piBpHK0WUw==",
      "dependencies": {
        "@nostrify/nostrify": "0.51.1",
        "@nostrify/types": "0.36.9"
@@ -1,7 +1,7 @@
 {
  "name": "ditto",
  "private": true,
-  "version": "2.6.3",
+  "version": "2.6.5",
  "type": "module",
  "scripts": {
    "dev": "npm i --silent && vite",
@@ -18,10 +18,10 @@
    "@capacitor/app": "^8.0.0",
    "@capacitor/core": "^8.1.0",
    "@capacitor/filesystem": "^8.1.2",
-    "@capacitor/keyboard": "^8.0.2",
+    "@capacitor/keyboard": "^8.0.3",
    "@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",
    "@dnd-kit/utilities": "^3.2.2",
@@ -67,7 +67,7 @@
    "@milkdown/react": "^7.20.0",
    "@milkdown/utils": "^7.20.0",
    "@nostrify/nostrify": "^0.51.1",
-    "@nostrify/react": "^0.5.0",
+    "@nostrify/react": "^0.5.1",
    "@nostrify/types": "^0.36.9",
    "@plausible-analytics/tracker": "^0.4.4",
    "@radix-ui/react-accordion": "^1.2.0",
@@ -0,0 +1,7 @@
+{
+  "webcredentials": {
+    "apps": [
+      "GZLTTH5DLM.pub.ditto.app"
+    ]
+  }
+}
@@ -1,5 +1,30 @@
 # Changelog

+## [2.6.5] - 2026-04-11
+
+### Changed
+- Apps and games load significantly faster on Android with smarter prefetching and server affinity
+- Native loading spinners replace HTML-based ones on iOS and Android for a smoother experience
+
+### Fixed
+- External API requests on Android no longer fail due to hostname restrictions
+- iOS App Store compliance issues resolved
+
+## [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
@@ -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
      });
    }
  }, []);
@@ -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>
@@ -3,6 +3,7 @@ import data from '@emoji-mart/data';
 import { CustomEmojiImg } from '@/components/CustomEmoji';
 import { cn } from '@/lib/utils';
 import { useCustomEmojis, type CustomEmoji } from '@/hooks/useCustomEmojis';
+import { usePortalDropdown } from '@/hooks/usePortalDropdown';

 interface EmojiData {
  id: string;
@@ -186,6 +187,14 @@ export function EmojiShortcodeAutocomplete({
  const dropdownRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLDivElement>(null);

+  const handleClose = useCallback(() => setIsOpen(false), []);
+  const { computePosition, renderPortal } = usePortalDropdown({
+    textareaRef,
+    isOpen,
+    onClose: handleClose,
+    dropdownHeight: 280, // must match max-h-[280px] below
+  });
+
  const results = useMemo(() => searchEmojis(query, customEmojis), [query, customEmojis]);

  // Detect :shortcode query at cursor
@@ -237,14 +246,11 @@ export function EmojiShortcodeAutocomplete({
    setIsOpen(true);
    setSelectedIndex(0);

-    // Position the dropdown below the : character
+    // Position the dropdown using fixed viewport coordinates so it isn't
+    // clipped by ancestor overflow containers (e.g. the compose modal).
    const coords = getCaretCoordinates(textarea, colonPos);
-    const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight) || 20;
-    setDropdownPos({
-      top: coords.top + lineHeight + 4,
-      left: Math.max(0, Math.min(coords.left, textarea.clientWidth - 280)),
-    });
-  }, [textareaRef]);
+    setDropdownPos(computePosition(coords));
+  }, [textareaRef, computePosition]);

  // Listen for input/cursor changes on the textarea element
  useEffect(() => {
@@ -357,10 +363,10 @@ export function EmojiShortcodeAutocomplete({
    return null;
  }

-  return (
+  const dropdown = (
    <div
      ref={dropdownRef}
-      className="absolute z-[100] w-[280px] rounded-xl border border-border bg-popover shadow-lg overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150"
+      className="fixed z-[300] w-[280px] rounded-xl border border-border bg-popover shadow-lg overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150"
      style={{ top: dropdownPos.top, left: dropdownPos.left }}
    >
      <div ref={listRef} className="max-h-[280px] overflow-y-auto py-1">
@@ -382,7 +388,7 @@ export function EmojiShortcodeAutocomplete({
                className="size-5 object-contain shrink-0"
              />
            ) : (
-              <span className="text-xl leading-none shrink-0">{emoji.native}</span>
+              <span className="text-xl leading-none shrink-0 font-emoji">{emoji.native}</span>
            )}
            <span className="text-sm truncate">
              :{emoji.id.replace('custom:', '')}:
@@ -392,4 +398,8 @@ export function EmojiShortcodeAutocomplete({
      </div>
    </div>
  );
+
+  // Portal to document.body so the dropdown escapes any ancestor overflow
+  // clipping and CSS transform containing blocks (e.g. Radix Dialog).
+  return renderPortal(dropdown, document.body);
 }
@@ -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')
@@ -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>
  );
@@ -4,7 +4,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import {
  Check,
  ChevronRight,
-  Download,
  Eye,
  EyeOff,
  Heart,
@@ -13,8 +12,7 @@ import {
  Users,
 } from "lucide-react";
 import { generateSecretKey, getPublicKey, nip19 } from "nostr-tools";
-import { storeNsecCredential } from "@/lib/credentialManager";
-import { downloadTextFile } from "@/lib/downloadFile";
+import { saveNsec } from "@/lib/credentialManager";
 import { fetchFreshEvent } from "@/lib/fetchFreshEvent";
 import {
  type ReactNode,
@@ -46,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";

 // ---------------------------------------------------------------------------
@@ -289,41 +288,35 @@ function SetupQuestionnaire({
    }
  }, [step, steps]);

-  // Keygen handler
+  // Keygen handler — generates the key and advances to the save step.
+  // The credential manager prompt is deferred until the user clicks "Continue".
  const handleGenerate = useCallback(() => {
    const sk = generateSecretKey();
    const encoded = nip19.nsecEncode(sk);
    setNsec(encoded);
-
-    // Progressive enhancement: offer to save in the browser's password manager
-    // while the user is looking at the key on the download step.
-    // (Chromium-only — silently skipped on Safari/Firefox)
-    const npub = nip19.npubEncode(getPublicKey(sk));
-    storeNsecCredential(npub, encoded).catch(() => {});
-
    next();
  }, [next]);

-  // Download + login handler
-  const handleDownloadAndLogin = useCallback(async () => {
+  // Continue handler for the download step — saves the key via the best
+  // available method (native credential manager on iOS/Android, file download
+  // on web), logs in, and advances to the next step.
+  const handleDownloadContinue = useCallback(async () => {
    try {
      const decoded = nip19.decode(nsec);
      if (decoded.type !== "nsec") throw new Error("Invalid nsec");

      const pubkey = getPublicKey(decoded.data);
      const npub = nip19.npubEncode(pubkey);
-      const filename = `nostr-${location.hostname.replaceAll(/\./g, "-")}-${npub.slice(5, 9)}.nsec.txt`;

-      await downloadTextFile(filename, nsec);
+      await saveNsec(npub, nsec);

-      // Log in with the new key
      login.nsec(nsec);
      next();
    } catch {
      toast({
-        title: "Download failed",
+        title: "Save failed",
        description:
-          "Could not download the key file. Please copy it manually.",
+          "Could not save the key. Please copy it manually.",
        variant: "destructive",
      });
    }
@@ -455,7 +448,7 @@ function SetupQuestionnaire({
          {step === "keygen" && <KeygenStep onGenerate={handleGenerate} />}

          {step === "download" && (
-            <DownloadStep nsec={nsec} onDownload={handleDownloadAndLogin} />
+            <DownloadStep nsec={nsec} onContinue={handleDownloadContinue} />
          )}

          {step === "profile" && (
@@ -522,10 +515,10 @@ function KeygenStep({ onGenerate }: { onGenerate: () => void }) {

 function DownloadStep({
  nsec,
-  onDownload,
+  onContinue,
 }: {
  nsec: string;
-  onDownload: () => void;
+  onContinue: () => void;
 }) {
  const [showKey, setShowKey] = useState(false);

@@ -536,8 +529,7 @@ function DownloadStep({
          Save your secret key
        </h2>
        <p className="text-sm text-muted-foreground">
-          This is your only way to access your account. Download it and keep it
-          somewhere safe.
+          This is your only way to access your account. Keep it somewhere safe.
        </p>
      </div>

@@ -569,17 +561,17 @@ function DownloadStep({
        </p>
        <p className="text-xs text-amber-900 dark:text-amber-300">
          This key is your only means of accessing your account. If you lose it,
-          there is no way to recover it. Download it now to continue.
+          there is no way to recover it.
        </p>
      </div>

      <Button
        size="lg"
        className="w-full gap-2 rounded-full h-12"
-        onClick={onDownload}
+        onClick={onContinue}
      >
-        <Download className="w-4 h-4" />
-        Download and continue
+        Continue
+        <ChevronRight className="w-4 h-4" />
      </Button>
    </div>
  );
@@ -607,9 +599,6 @@ function ProfileStep({
    banner: "",
    website: "",
  });
-  const [extraFields, setExtraFields] = useState<
-    Array<{ label: string; value: string }>
-  >([]);
  const [cropState, setCropState] = useState<{
    imageSrc: string;
    aspect: number;
@@ -664,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 {
@@ -687,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">
@@ -733,8 +715,6 @@ function ProfileStep({
          }
          onPickImage={handlePickImage}
          showNip05={false}
-          extraFields={extraFields}
-          onExtraFieldsChange={setExtraFields}
        />
      </div>

@@ -744,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>
  );
 }
@@ -788,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 (
    <>
@@ -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>
                )}
@@ -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} />
@@ -8,6 +8,7 @@ import { useSearchProfiles, type SearchProfile } from '@/hooks/useSearchProfiles
 import { genUserName } from '@/lib/genUserName';
 import { useNip05Verify } from '@/hooks/useNip05Verify';
 import { cn } from '@/lib/utils';
+import { usePortalDropdown } from '@/hooks/usePortalDropdown';

 interface MentionAutocompleteProps {
  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
@@ -89,6 +90,14 @@ export function MentionAutocomplete({
  const dropdownRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLDivElement>(null);

+  const handleClose = useCallback(() => setIsOpen(false), []);
+  const { computePosition, renderPortal } = usePortalDropdown({
+    textareaRef,
+    isOpen,
+    onClose: handleClose,
+    dropdownHeight: 240, // must match max-h-[240px] below
+  });
+
  const { data: profiles, followedPubkeys } = useSearchProfiles(
    isOpen ? mentionQuery : '',
  );
@@ -140,15 +149,11 @@ export function MentionAutocomplete({
    setIsOpen(true);
    setSelectedIndex(0);

-    // Position the dropdown below the @ character, relative to the textarea's
-    // offsetParent (the `relative` wrapper div) so it stays inside the modal.
+    // Position the dropdown using fixed viewport coordinates so it isn't
+    // clipped by ancestor overflow containers (e.g. the compose modal).
    const coords = getCaretCoordinates(textarea, atPos);
-    const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight) || 20;
-    setDropdownPos({
-      top: coords.top + lineHeight + 4,
-      left: Math.max(0, Math.min(coords.left, textarea.clientWidth - 280)),
-    });
-  }, [textareaRef]);
+    setDropdownPos(computePosition(coords));
+  }, [textareaRef, computePosition]);

  // Listen for input/cursor changes on the textarea element.
  // Re-attaches whenever the underlying DOM element changes (e.g. after
@@ -254,10 +259,10 @@ export function MentionAutocomplete({
    return null;
  }

-  return (
+  const dropdown = (
    <div
      ref={dropdownRef}
-      className="absolute z-[100] w-[280px] rounded-xl border border-border bg-popover shadow-lg overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150"
+      className="fixed z-[300] w-[280px] rounded-xl border border-border bg-popover shadow-lg overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150"
      style={{ top: dropdownPos.top, left: dropdownPos.left }}
    >
      <div ref={listRef} className="max-h-[240px] overflow-y-auto py-1">
@@ -273,6 +278,10 @@ export function MentionAutocomplete({
      </div>
    </div>
  );
+
+  // Portal to document.body so the dropdown escapes any ancestor overflow
+  // clipping and CSS transform containing blocks (e.g. Radix Dialog).
+  return renderPortal(dropdown, document.body);
 }

 function MentionItem({
@@ -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>
@@ -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">
@@ -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`}
@@ -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}>
@@ -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 });
      }

      // ---------------------------------------------------------------
@@ -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.
@@ -16,7 +16,6 @@ import {
  generateNostrConnectURI,
  type NostrConnectParams,
 } from '@/hooks/useLoginActions';
-import { androidResume } from '@/lib/androidResume';
 import { getNsecCredential } from '@/lib/credentialManager';
 import { DialogTitle } from '@radix-ui/react-dialog';
 import { useAppContext } from '@/hooks/useAppContext';
@@ -79,22 +78,18 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onS
  }, [login, config.appName]);

  // Start listening for connection (async) - runs after params are set.
-  //
-  // On Android, switching to Amber freezes the WebSocket so the NIP-46
-  // response is silently dropped. When Ditto returns to the foreground we
-  // abort the stale subscription and start a fresh one — the relay still
-  // has the response event so `limit: 1` picks it up immediately.
  useEffect(() => {
    if (!nostrConnectParams || isWaitingForConnect) return;

    let cancelled = false;
-    let stopWatching: (() => void) | undefined;

-    const attemptConnect = async (signal: AbortSignal) => {
+    const startListening = async () => {
+      setIsWaitingForConnect(true);
+      abortControllerRef.current = new AbortController();
+
      try {
-        await login.nostrconnect(nostrConnectParams, signal);
+        await login.nostrconnect(nostrConnectParams, abortControllerRef.current.signal);
        if (!cancelled) {
-          stopWatching?.();
          onLogin();
          onClose();
        }
@@ -102,42 +97,9 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onS
        if (cancelled) return;
        // AbortError means we intentionally aborted (dialog closed or retry)
        if (error instanceof Error && error.name === 'AbortError') return;
-        throw error;
-      }
-    };
-
-    const startListening = async () => {
-      setIsWaitingForConnect(true);
-      abortControllerRef.current = new AbortController();
-
-      // On Android, watch for foreground resume and retry the subscription.
-      ({ destroy: stopWatching } = androidResume({
-        threshold: 0,
-        onResume: () => {
-          if (cancelled) return;
-          console.log('[LoginDialog] foreground resume — retrying nostrconnect');
-          // Abort the current (stale) subscription
-          abortControllerRef.current?.abort();
-          // Start a fresh subscription
-          abortControllerRef.current = new AbortController();
-          attemptConnect(abortControllerRef.current.signal).catch((error) => {
-            if (!cancelled) {
-              console.error('Nostrconnect retry failed:', error);
-              setConnectError(error instanceof Error ? error.message : String(error));
-              setIsWaitingForConnect(false);
-            }
-          });
-        },
-      }));
-
-      try {
-        await attemptConnect(abortControllerRef.current.signal);
-      } catch (error) {
-        if (!cancelled) {
-          console.error('Nostrconnect failed:', error);
-          setConnectError(error instanceof Error ? error.message : String(error));
-          setIsWaitingForConnect(false);
-        }
+        console.error('Nostrconnect failed:', error);
+        setConnectError(error instanceof Error ? error.message : String(error));
+        setIsWaitingForConnect(false);
      }
    };

@@ -145,7 +107,6 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onS

    return () => {
      cancelled = true;
-      stopWatching?.();
    };
  }, [nostrConnectParams, login, onLogin, onClose, isWaitingForConnect]);

@@ -301,7 +262,9 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onS
  const [isMoreOptionsOpen, setIsMoreOptionsOpen] = useState(false);

  // Progressive enhancement: attempt to retrieve a stored credential from the
-  // browser's password manager when the dialog opens (Chromium-only).
+  // platform's password manager when the dialog opens.
+  // On Capacitor iOS this shows the iCloud Keychain credential picker.
+  // On Chromium browsers this shows the native credential chooser.
  useEffect(() => {
    if (!isOpen) return;
    let cancelled = false;
@@ -2,7 +2,7 @@
 // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.

 import React, { useState, useEffect, useRef } from 'react';
-import { Download, Eye, EyeOff, Loader2 } from 'lucide-react';
+import { Eye, EyeOff, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -11,8 +11,7 @@ import { useLoginActions } from '@/hooks/useLoginActions';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { useUploadFile } from '@/hooks/useUploadFile';
 import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
-import { storeNsecCredential } from '@/lib/credentialManager';
-import { downloadTextFile } from '@/lib/downloadFile';
+import { saveNsec } from '@/lib/credentialManager';
 import { ProfileCard } from '@/components/ProfileCard';
 import { ImageCropDialog } from '@/components/ImageCropDialog';
 import type { NostrMetadata } from '@nostrify/nostrify';
@@ -39,22 +38,19 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose }) => {
  const { mutateAsync: publishEvent, isPending: isPublishing } = useNostrPublish();
  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();

-  // Generate a proper nsec key using nostr-tools
+  // Generate a proper nsec key using nostr-tools.
+  // The credential manager / file download is deferred until the user clicks "Continue".
  const generateKey = () => {
    const sk = generateSecretKey();
    const encoded = nip19.nsecEncode(sk);
    setNsec(encoded);
-
-    // Progressive enhancement: offer to save in the browser's password manager
-    // while the user is looking at the key on the download step.
-    // (Chromium-only — silently skipped on Safari/Firefox)
-    const npub = nip19.npubEncode(getPublicKey(sk));
-    storeNsecCredential(npub, encoded).catch(() => {});
-
    setStep('download');
  };

-  const downloadKey = async () => {
+  // Continue handler for the save-key step — saves the key via the best
+  // available method (native credential manager on iOS/Android, file download
+  // on web), logs in, and advances to the profile step.
+  const handleContinue = async () => {
    try {
      const decoded = nip19.decode(nsec);
      if (decoded.type !== 'nsec') {
@@ -63,17 +59,15 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose }) => {

      const pubkey = getPublicKey(decoded.data);
      const npub = nip19.npubEncode(pubkey);
-      const filename = `nostr-${location.hostname.replaceAll(/\./g, '-')}-${npub.slice(5, 9)}.nsec.txt`;

-      await downloadTextFile(filename, nsec);
+      await saveNsec(npub, nsec);

-      // Continue to profile step
      login.nsec(nsec);
      setStep('profile');
    } catch {
      toast({
-        title: 'Download failed',
-        description: 'Could not download the key file. Please copy it manually.',
+        title: 'Save failed',
+        description: 'Could not save the key. Please copy it manually.',
        variant: 'destructive',
      });
    }
@@ -170,7 +164,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose }) => {
            </div>
          )}

-          {/* Download Step */}
+          {/* Save Key Step */}
          {step === 'download' && (
            <div className='space-y-4'>
              <div className="flex size-16 text-4xl bg-primary/10 rounded-full items-center justify-center justify-self-center">
@@ -201,10 +195,9 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose }) => {

              <Button
                className="w-full h-12 px-9"
-                onClick={downloadKey}
+                onClick={handleContinue}
              >
-                <Download className="size-4" />
-                Download key
+                Continue
              </Button>

              <div className='mx-auto max-w-sm'>
@@ -215,7 +208,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose }) => {
                    </span>
                  </div>
                  <p className='text-xs text-amber-900 dark:text-amber-300'>
-                    This key is your primary and only means of accessing your account. Store it safely and securely. Please download your key to continue.
+                    This key is your primary and only means of accessing your account. Store it safely and securely.
                  </p>
                </div>
              </div>
@@ -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>
@@ -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}
@@ -0,0 +1,79 @@
+import { useEffect, useCallback, type RefObject } from 'react';
+import { createPortal } from 'react-dom';
+
+interface DropdownPosition {
+  top: number;
+  left: number;
+}
+
+interface UsePortalDropdownOptions {
+  /** Ref to the textarea the dropdown is anchored to. */
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  /** Whether the dropdown is currently visible. */
+  isOpen: boolean;
+  /** Callback to close the dropdown (e.g. on scroll/resize). */
+  onClose: () => void;
+  /** Max height of the dropdown in px (must match the CSS max-h value). */
+  dropdownHeight: number;
+  /** Width of the dropdown in px (must match the CSS width value). */
+  dropdownWidth?: number;
+}
+
+/**
+ * Computes fixed viewport coordinates for an autocomplete dropdown anchored
+ * to a caret position inside a textarea. The dropdown is positioned below
+ * the caret line, or flipped above if it would overflow the viewport bottom.
+ *
+ * Also dismisses the dropdown on scroll or resize, since fixed positioning
+ * would cause misalignment.
+ *
+ * Use `renderPortal` to render the dropdown as a portal to `document.body`
+ * so it escapes ancestor overflow clipping and CSS transform containing
+ * blocks (e.g. Radix Dialog).
+ */
+export function usePortalDropdown({
+  textareaRef,
+  isOpen,
+  onClose,
+  dropdownHeight,
+  dropdownWidth = 280,
+}: UsePortalDropdownOptions) {
+
+  /** Compute fixed viewport position for the dropdown given a caret index. */
+  const computePosition = useCallback(
+    (caretCoords: { top: number; left: number }): DropdownPosition => {
+      const textarea = textareaRef.current;
+      if (!textarea) return { top: 0, left: 0 };
+
+      const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight) || 20;
+      const rect = textarea.getBoundingClientRect();
+      const top = rect.top + caretCoords.top - textarea.scrollTop + lineHeight + 4;
+      const left = rect.left + Math.max(0, Math.min(caretCoords.left, textarea.clientWidth - dropdownWidth));
+
+      // If the dropdown would overflow the bottom of the viewport, flip above
+      const flippedTop = rect.top + caretCoords.top - textarea.scrollTop - dropdownHeight - 4;
+      const useFlipped = top + dropdownHeight > window.innerHeight && flippedTop > 0;
+
+      return {
+        top: useFlipped ? flippedTop : top,
+        left: Math.max(8, Math.min(left, window.innerWidth - dropdownWidth - 8)),
+      };
+    },
+    [textareaRef, dropdownHeight, dropdownWidth],
+  );
+
+  // Dismiss the dropdown when any ancestor scrolls or the window resizes,
+  // since fixed positioning would cause the dropdown to become misaligned.
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleDismiss = () => onClose();
+    window.addEventListener('scroll', handleDismiss, true);
+    window.addEventListener('resize', handleDismiss);
+    return () => {
+      window.removeEventListener('scroll', handleDismiss, true);
+      window.removeEventListener('resize', handleDismiss);
+    };
+  }, [isOpen, onClose]);
+
+  return { computePosition, renderPortal: createPortal };
+}
@@ -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
@@ -1,59 +0,0 @@
-/**
- * Detects when a web app returns to the foreground after being backgrounded,
- * primarily to work around Android's WebSocket zombie connection problem.
- *
- * Android aggressively throttles backgrounded tabs, causing WebSocket connections
- * to silently miss events without triggering close/error handlers. This utility
- * detects the resume and reports how long the app was in the background, so
- * callers can force reconnection or re-query missed data.
- *
- * Framework-agnostic — no React dependency. Can be used in libraries.
- */
-
-export interface AndroidResumeOptions {
-  /** Minimum background duration (ms) before triggering. Default: 0 */
-  threshold?: number;
-  /** Called when the app returns to foreground after exceeding the threshold. */
-  onResume?: (backgroundDurationMs: number) => void;
-  /**
-   * If true, only activates on Android user agents.
-   * Set to false to test on desktop. Default: true
-   */
-  androidOnly?: boolean;
-}
-
-function isAndroid(): boolean {
-  return typeof navigator !== 'undefined' && /android/i.test(navigator.userAgent);
-}
-
-export function androidResume(options: AndroidResumeOptions = {}): { destroy: () => void } {
-  const { threshold = 0, onResume, androidOnly = true } = options;
-  const noop = { destroy: () => {} };
-
-  // No-op in non-browser environments (e.g. Node.js, Deno without DOM).
-  if (typeof document === 'undefined') return noop;
-
-  if (androidOnly && !isAndroid()) return noop;
-
-  let hiddenAt: number | null = null;
-
-  const handler = () => {
-    if (document.visibilityState === 'hidden') {
-      hiddenAt = Date.now();
-    } else if (document.visibilityState === 'visible') {
-      if (hiddenAt === null) return;
-      const duration = Date.now() - hiddenAt;
-      hiddenAt = null;
-      if (duration >= threshold) {
-        onResume?.(duration);
-      }
-    }
-  };
-
-  document.addEventListener('visibilitychange', handler);
-  return {
-    destroy: () => {
-      document.removeEventListener('visibilitychange', handler);
-    },
-  };
-}
@@ -1,28 +1,44 @@
 /**
- * Utility for storing and retrieving Nostr secret keys using the
- * Credential Management API (PasswordCredential).
+ * Utility for storing and retrieving Nostr secret keys using the platform's
+ * native credential / password manager.
 *
- * This is a **progressive enhancement** — PasswordCredential is only
- * available in Chromium-based browsers (Chrome, Edge, Opera, Android WebView).
- * Safari and Firefox do not support it. All call sites must handle the
- * `undefined` / rejection cases gracefully and fall back to manual key entry.
+ * - **Capacitor iOS**: Uses `@capgo/capacitor-autofill-save-password` which
+ *   calls `SecAddSharedWebCredential` / `SecRequestSharedWebCredential` under
+ *   the hood, triggering the iCloud Keychain "Save Password" / credential
+ *   picker UI. Requires the `webcredentials:` Associated Domains entitlement
+ *   and a matching `apple-app-site-association` file on the domain.
+ *
+ * - **Chromium browsers** (Chrome, Edge, Opera, Android WebView): Uses the
+ *   `PasswordCredential` API to trigger the native "Save password?" prompt.
+ *
+ * - **Other browsers** (Safari web, Firefox): Silently falls back — all
+ *   functions return `false` / `undefined` without error.
 */

-/** Whether the browser supports PasswordCredential. */
+import { Capacitor } from '@capacitor/core';
+import { SavePassword } from '@capgo/capacitor-autofill-save-password';
+
+import { downloadTextFile } from '@/lib/downloadFile';
+
+/** The domain used for Shared Web Credentials on iOS. */
+const CREDENTIAL_DOMAIN = 'ditto.pub';
+
+/** Whether the browser supports PasswordCredential (Chromium-only). */
 export function supportsPasswordCredential(): boolean {
  return typeof window !== 'undefined' && 'PasswordCredential' in window;
 }

+
 /**
- * Store a Nostr secret key in the browser's credential manager.
+ * Store a Nostr secret key in the platform's credential manager.
 *
- * On supported browsers this triggers the native "Save password?" prompt,
- * which syncs the credential via the user's password manager (Google Password
- * Manager, Samsung Pass, etc.).
+ * On Capacitor iOS this triggers the iCloud Keychain "Save Password?" sheet.
+ * On Chromium browsers this triggers the native "Save password?" prompt.
+ * On unsupported platforms this is a silent no-op.
 *
- * @param npub  - The user's npub (used as the credential `id` / username)
- * @param nsec  - The user's nsec (used as the credential `password`)
- * @param name  - Optional display name shown in the credential chooser
+ * @param npub  - The user's npub (used as the credential username / account)
+ * @param nsec  - The user's nsec (used as the credential password)
+ * @param name  - Optional display name (Chromium only — shown in the picker)
 * @returns `true` if the credential was stored, `false` if unsupported or rejected
 */
 export async function storeNsecCredential(
@@ -30,6 +46,21 @@ export async function storeNsecCredential(
  nsec: string,
  name?: string,
 ): Promise<boolean> {
+  // Capacitor native path (iOS / Android).
+  if (Capacitor.isNativePlatform()) {
+    try {
+      await SavePassword.promptDialog({
+        username: npub,
+        password: nsec,
+        url: CREDENTIAL_DOMAIN,
+      });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // Chromium PasswordCredential path (web).
  if (!supportsPasswordCredential()) return false;

  try {
@@ -48,17 +79,31 @@ export async function storeNsecCredential(
 }

 /**
- * Retrieve a previously-stored Nostr credential from the browser's password
- * manager.
+ * Retrieve a previously-stored Nostr credential from the platform's
+ * password manager.
 *
- * On supported browsers this shows the native credential picker. The returned
- * object contains the `id` (npub) and `password` (nsec).
+ * On Capacitor iOS this shows the iCloud Keychain credential picker.
+ * On Chromium browsers this shows the native credential picker.
 *
 * @returns The stored credential, or `undefined` if unavailable / dismissed.
 */
 export async function getNsecCredential(): Promise<
  { npub: string; nsec: string } | undefined
 > {
+  // Capacitor native path (iOS / Android).
+  if (Capacitor.isNativePlatform()) {
+    try {
+      const result = await SavePassword.readPassword();
+      if (result.username && result.password) {
+        return { npub: result.username, nsec: result.password };
+      }
+      return undefined;
+    } catch {
+      return undefined;
+    }
+  }
+
+  // Chromium PasswordCredential path (web).
  if (!supportsPasswordCredential()) return undefined;

  try {
@@ -79,3 +124,41 @@ export async function getNsecCredential(): Promise<
    return undefined;
  }
 }
+
+/**
+ * Save a Nostr secret key using the best method available on the platform.
+ *
+ * - **Native (iOS / Android)**: Prompts the credential manager
+ *   (iCloud Keychain / Google). Throws if the user dismisses so the caller
+ *   can block progression and retry.
+ *
+ * - **Web**: Downloads the key as a `.nsec.txt` file (always), and also
+ *   attempts to store it via `PasswordCredential` as a bonus (Chromium).
+ *   The bonus store is fire-and-forget — it never blocks or throws.
+ *
+ * @param npub - The user's npub (credential username / account)
+ * @param nsec - The user's nsec (credential password)
+ * @param name - Optional display name (Chromium only)
+ * @throws On native platforms if the user dismisses the credential prompt.
+ */
+export async function saveNsec(
+  npub: string,
+  nsec: string,
+  name?: string,
+): Promise<void> {
+  // Native: credential manager is the sole save mechanism.
+  if (Capacitor.isNativePlatform()) {
+    const saved = await storeNsecCredential(npub, nsec, name);
+    if (!saved) {
+      throw new Error('Credential save was dismissed');
+    }
+    return;
+  }
+
+  // Web: always download the file as the primary save mechanism.
+  const filename = `nostr-${location.hostname.replaceAll(/\./g, '-')}-${npub.slice(5, 9)}.nsec.txt`;
+  await downloadTextFile(filename, nsec);
+
+  // Bonus: also try to store in the browser's password manager (Chromium).
+  storeNsecCredential(npub, nsec, name).catch(() => {});
+}
@@ -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>;

@@ -1,7 +1,6 @@
 import type { NostrEvent, NostrSigner } from '@nostrify/types';
 import { createElement } from 'react';
 import { toast } from '@/hooks/useToast';
-import { androidResume } from '@/lib/androidResume';
 import { NudgeToastContent } from '@/components/SignerToastContent';

 // ---------------------------------------------------------------------------
@@ -16,9 +15,6 @@ const NUDGE_DELAY_MS = 4_000;
 const HARD_TIMEOUT_MS = 45_000;


-/** Max number of automatic retries on Android foreground resume. */
-const MAX_RETRIES = 2;
-
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -70,9 +66,8 @@ function labelForOp(kind: number | undefined, opType: OpType): string {

 const CANCEL = Symbol('cancel');
 const TIMEOUT = Symbol('timeout');
-const RESUME = Symbol('resume');

-type Signal = typeof CANCEL | typeof TIMEOUT | typeof RESUME;
+type Signal = typeof CANCEL | typeof TIMEOUT;

 // ---------------------------------------------------------------------------
 // Toast deduplication — prevent a storm of identical nudge toasts
@@ -98,10 +93,9 @@ function showNudgeToast(opts: {
  kind: number | undefined;
  opType: OpType;
  isBunkerConnected: (() => boolean) | undefined;
-  afterForegroundResume: boolean;
  onCancel: () => void;
 }): { dismiss: () => void } {
-  const { kind, opType, isBunkerConnected, afterForegroundResume, onCancel } = opts;
+  const { kind, opType, isBunkerConnected, onCancel } = opts;
  const android = isAndroid();
  const relayOk = isBunkerConnected ? isBunkerConnected() : true;
  const subject = labelForOp(kind, opType);
@@ -120,9 +114,6 @@ function showNudgeToast(opts: {
  if (!relayOk) {
    title = 'Signer relay unreachable';
    descriptionText = 'Check your connection and try again.';
-  } else if (android && afterForegroundResume) {
-    title = `Approve ${subject} — try again`;
-    descriptionText = 'Use the button below. Switching apps manually can interrupt the connection.';
  } else if (android) {
    title = `Approve ${subject}`;
    descriptionText = 'Set to auto-approve for a smoother experience.';
@@ -184,11 +175,6 @@ interface RunResult<T> {
 * Runs `op` with:
 * - A nudge toast after NUDGE_DELAY_MS if still pending.
 * - A hard timeout at HARD_TIMEOUT_MS.
- * - On Android, automatic retry when the app returns to the foreground
- *   (WebSocket connections are frozen while backgrounded, so NIP-46 responses
- *   are missed).
- *
- * Uses an iterative retry loop instead of recursion.
 */
 async function runWithNudge<T>(op: () => Promise<T>, opts: RunOpts): Promise<RunResult<T>> {
  const { kind, opType, isBunkerConnected } = opts;
@@ -200,96 +186,61 @@ async function runWithNudge<T>(op: () => Promise<T>, opts: RunOpts): Promise<Run
    | { tag: 'signal'; signal: Signal };

  let nudgeFired = false;
-  let afterForegroundResume = false;

-  // Previous op promises that are still in-flight. On Android foreground
-  // resume we issue a fresh `op()` but keep racing previous ones so a late
-  // response from an earlier attempt is still accepted (avoids duplicate
-  // signer prompts).
-  const pendingOps: Promise<Outcome>[] = [];
+  // Signal channels — each resolves with a sentinel when its condition fires.
+  const cancelSignal = deferred<typeof CANCEL>();
+  const timeoutSignal = deferred<typeof TIMEOUT>();

-  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
-    // Signal channels — each resolves with a sentinel when its condition fires.
-    const cancelSignal = deferred<typeof CANCEL>();
-    const timeoutSignal = deferred<typeof TIMEOUT>();
-    const resumeSignal = deferred<typeof RESUME>();
-
-    // --- Nudge timer ---
-    let dismissNudge: (() => void) | undefined;
-    const delay = NUDGE_DELAY_MS;
-    const nudgeTimer = setTimeout(() => {
-      nudgeFired = true;
-      const handle = showNudgeToast({
-        kind, opType, isBunkerConnected, afterForegroundResume,
-        onCancel: () => cancelSignal.resolve(CANCEL),
-      });
-      dismissNudge = handle.dismiss;
-    }, delay);
-
-    // --- Hard timeout ---
-    const hardTimer = setTimeout(() => timeoutSignal.resolve(TIMEOUT), HARD_TIMEOUT_MS);
-
-    // --- Android foreground resume watcher ---
-    const { destroy: stopWatching } = androidResume({
-      threshold: 0,
-      onResume: () => {
-        toast({ title: 'Checking for signer response\u2026', duration: 4000 });
-        resumeSignal.resolve(RESUME);
-      },
+  // --- Nudge timer ---
+  let dismissNudge: (() => void) | undefined;
+  const nudgeTimer = setTimeout(() => {
+    nudgeFired = true;
+    const handle = showNudgeToast({
+      kind, opType, isBunkerConnected,
+      onCancel: () => cancelSignal.resolve(CANCEL),
    });
+    dismissNudge = handle.dismiss;
+  }, NUDGE_DELAY_MS);

-    function cleanup() {
-      clearTimeout(nudgeTimer);
-      clearTimeout(hardTimer);
-      stopWatching();
-      dismissNudge?.();
-    }
+  // --- Hard timeout ---
+  const hardTimer = setTimeout(() => timeoutSignal.resolve(TIMEOUT), HARD_TIMEOUT_MS);

-    // Start a new op and add it to the pending set.
-    const newOp: Promise<Outcome> = op().then(
-      (value): Outcome => ({ tag: 'value', value }),
-      (error): Outcome => ({ tag: 'error', error }),
-    );
-    pendingOps.push(newOp);
-
-    const signalOutcome: Promise<Outcome> = Promise.race([
-      cancelSignal.promise,
-      timeoutSignal.promise,
-      resumeSignal.promise,
-    ]).then((signal): Outcome => ({ tag: 'signal', signal }));
-
-    // Race all pending ops (current + any still in-flight from prior
-    // attempts) against the signal channels.
-    const outcome = await Promise.race([...pendingOps, signalOutcome]);
-    cleanup();
-
-    // --- Handle outcome ---
-
-    if (outcome.tag === 'value') {
-      if (nudgeFired) showSuccessToast(opType);
-      return { value: outcome.value, nudgeFired };
-    }
-
-    if (outcome.tag === 'error') {
-      throw outcome.error;
-    }
-
-    // outcome.tag === 'signal'
-    switch (outcome.signal) {
-      case CANCEL:
-        throw new Error('Signing cancelled by user');
-
-      case TIMEOUT:
-        throw new Error('Signer timed out');
-
-      case RESUME:
-        afterForegroundResume = true;
-        console.log('[signerWithNudge] retrying after foreground resume');
-        continue;
-    }
+  function cleanup() {
+    clearTimeout(nudgeTimer);
+    clearTimeout(hardTimer);
+    dismissNudge?.();
  }

-  throw new Error('Signer timed out after retries');
+  const opOutcome: Promise<Outcome> = op().then(
+    (value): Outcome => ({ tag: 'value', value }),
+    (error): Outcome => ({ tag: 'error', error }),
+  );
+
+  const signalOutcome: Promise<Outcome> = Promise.race([
+    cancelSignal.promise,
+    timeoutSignal.promise,
+  ]).then((signal): Outcome => ({ tag: 'signal', signal }));
+
+  const outcome = await Promise.race([opOutcome, signalOutcome]);
+  cleanup();
+
+  if (outcome.tag === 'value') {
+    if (nudgeFired) showSuccessToast(opType);
+    return { value: outcome.value, nudgeFired };
+  }
+
+  if (outcome.tag === 'error') {
+    throw outcome.error;
+  }
+
+  // outcome.tag === 'signal'
+  switch (outcome.signal) {
+    case CANCEL:
+      throw new Error('Signing cancelled by user');
+
+    case TIMEOUT:
+      throw new Error('Signer timed out');
+  }
 }

 // ---------------------------------------------------------------------------
@@ -301,9 +252,6 @@ async function runWithNudge<T>(op: () => Promise<T>, opts: RunOpts): Promise<Run
 *
 * - Shows a nudge toast after 4s if a signing or encryption op is still
 *   pending, so the user knows to check their signer app.
- * - On Android, automatically retries when the app returns to the foreground,
- *   recovering from missed NIP-46 responses dropped while the WebSocket was
- *   frozen in the background.
 * - When a nip44 encrypt is immediately followed by a signEvent (e.g. saving
 *   encrypted settings), shows a phase-transition toast so the user knows to
 *   approve the second request.
@@ -20,29 +20,30 @@ 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 { Keyboard } from '@capacitor/keyboard';
-import { getBackgroundThemeMode, getBackgroundHex } from '@/lib/colorUtils';
+import { Capacitor, SystemBars, SystemBarsStyle } from '@capacitor/core';
+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(() => {});
+  // Hide the iOS keyboard accessory bar (prev/next/done toolbar above the keyboard).
+  // Only runs on iOS — setAccessoryBarVisible is unimplemented on Android.
+  if (Capacitor.getPlatform() === 'ios') {
+    import('@capacitor/keyboard').then(({ Keyboard }) => {
+      Keyboard.setAccessoryBarVisible({ isVisible: false }).catch(() => {});
+    }).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
@@ -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
@@ -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>
@@ -32,6 +32,7 @@ export default {
 			},
 			fontFamily: {
 				sans: ['Inter Variable', 'Inter', 'system-ui', 'sans-serif'],
+				emoji: ['Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', 'Android Emoji', 'EmojiSymbols', 'sans-serif'],
 			},
 			colors: {
 				border: 'hsl(var(--border))',
Author	SHA1	Message	Date
Alex Gleason	bd333b9584	Fix Android WebView resize bugs caused by @capacitor/keyboard Remove resizeOnFullScreen config which caused possiblyResizeChildOfContent() to corrupt CoordinatorLayout height on Android 16 (API 36). Upgrade plugin from 8.0.2 to 8.0.3 which adds a SystemBars guard as additional safety. Platform-gate setAccessoryBarVisible to iOS only (unimplemented on Android).	2026-04-12 14:07:52 -05:00
Alex Gleason	3ac1dc6b0a	Fix dialog obscured by virtual keyboard on Android Chrome Add interactive-widget=resizes-content to the viewport meta tag so Chrome on Android resizes the layout viewport when the on-screen keyboard opens. This keeps fixed-position dialogs (compose, reply, login, etc.) centered in the visible area above the keyboard.	2026-04-12 13:21:21 -05:00
Alex Gleason	025ecd8645	Upgrade nostrify: improve NIP-46 signing reliability	2026-04-12 12:02:45 -05:00
Alex Gleason	0fca39a1bd	Remove androidResume utility and its foreground-resume retry logic The visibility-change-based Android resume detection was causing more problems than it solved. Remove the module and simplify LoginDialog and signerWithNudge to operate without retry-on-resume behavior.	2026-04-12 11:37:10 -05:00
Chad Curtis	3152f7f0ec	Merge branch 'fix/emoji-shortcode-autocomplete' into 'main' Fix emoji shortcode autocomplete clipped by compose box and emojis rendering as text Closes #216 See merge request soapbox-pub/ditto!160	2026-04-12 14:13:32 +00:00
Alex Gleason	7cba044b9d	release: v2.6.5	2026-04-11 18:15:04 -05:00
Alex Gleason	4245b2aede	Add Google Play publishing to CI release pipeline	2026-04-11 18:10:29 -05:00
Alex Gleason	3cdec3ceb6	Add more Zapstore publish relays to CI	2026-04-11 17:57:13 -05:00
Alex Gleason	aa8f7539ae	Fix iOS App Store blockers: bundle PrivacyInfo.xcprivacy and declare export compliance	2026-04-11 17:55:26 -05:00
Alex Gleason	c6b3cb8758	Remove server.hostname to fix external API requests on Android The WebView was intercepting all https://ditto.pub/* requests as local assets, causing favicon and link-preview API calls to fail. Deep links are unaffected as they use AndroidManifest intent-filters.	2026-04-11 17:37:57 -05:00
Alex Gleason	59f68efdc7	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.	2026-04-11 17:25:06 -05:00
Alex Gleason	dc81585f9a	Pre-fetch all nsite blobs on Android before WebView navigates Android's shouldInterceptRequest blocks a pool of ~6 IO threads, each waiting for JS to respond via the Capacitor bridge. With 200+ files each requiring a network round-trip to Blossom, loading is painfully slow. iOS doesn't have this problem — WKURLSchemeHandler is async. Split the native plugin lifecycle into create() and navigate(): - create() adds the WebView container with spinner overlay (visible) - navigate() loads the entry URL (triggers fetch interception) On Android, onReady downloads all manifest blobs in parallel (12 concurrent fetches) into an in-memory cache while the native ProgressBar spinner animates. Once navigate() fires, every resolveFile call is an instant cache hit. On iOS/web, onReady is a no-op and navigate() fires immediately.	2026-04-11 17:20:21 -05:00
Alex Gleason	54e6c964db	Add Blossom server affinity to speed up nsite loading The fetchFromBlossom function previously tried servers sequentially for every file request. For nsites without server tags (falling back to 3 app default servers), each of the 200+ files paid a full round-trip penalty when the first server returned 404 before falling through. Now tracks a module-level preferred server. Once any server successfully serves a blob it becomes preferred and is tried first for all subsequent requests. This means only the first file pays the discovery cost; the rest go directly to the server that has the content.	2026-04-11 17:20:06 -05:00
Alex Gleason	dceda199c3	Add loading spinners to native sandbox WebViews iOS: load inline spinner HTML (centered spinning ring on dark background) before navigating to the real content URL. Supports light/dark mode via prefers-color-scheme. The spinner is replaced when the real page loads. Android: use a native ProgressBar overlay instead of HTML — the HTML spinner froze because constant Capacitor bridge calls saturated the main thread, starving the WebView compositor. The native ProgressBar animates on the render thread independently. Wrapped in a FrameLayout with a dark overlay behind the spinner. Both platforms: set WebView background to #14161f (app dark theme) instead of white. Increased Android shouldInterceptRequest timeout from 10s to 60s to prevent premature timeouts on large nsites.	2026-04-11 17:20:01 -05:00
Alex Gleason	8967012035	release: v2.6.4	2026-04-11 15:43:47 -05:00
Alex Gleason	0b73d4aac5	Remove dedicated Share button from profile pages The 'Copy profile link' option is already available in the more menu, making the standalone Share button redundant.	2026-04-11 15:40:08 -05:00
Alex Gleason	6f53f7ad99	Fix avatar fallback showing '?' instead of name initial ComposeBox and LeftSidebar avatar fallbacks only checked metadata.name, ignoring display_name and genUserName. Now uses the same fallback chain as ProfileCard: display_name -> name -> genUserName(pubkey). Also fixed the getDisplayName helper in LeftSidebar to check display_name.	2026-04-11 15:36:47 -05:00
Alex Gleason	399df4da4d	Improve empty feed state with icon and discover CTA Redesign FeedEmptyState with a centered icon, cleaner layout, and two actionable buttons for the follows tab: 'Discover people to follow' linking to /packs, and 'Browse the Global feed' to switch tabs. Other call sites are unaffected (new props are optional).	2026-04-11 15:29:10 -05:00
Alex Gleason	c06a66ade4	Ensure sticky desktop FAB anchors to bottom on empty feeds Add min-h-dvh to the Feed <main> element so it always fills at least the viewport height. Without this, the sticky FAB (a sibling after <main>) sits in normal flow right after the short content instead of at the bottom of the center column.	2026-04-11 15:25:37 -05:00
Alex Gleason	1fca26ae2e	Clean up signup profile step: hide pencil badges, remove extra fields - Hide the small pencil icon on avatar and banner until an image is actually set (the hover overlay still shows so users can discover the action) - Remove the Profile Fields collapsible from the signup flow to keep the onboarding lightweight	2026-04-11 15:12:28 -05:00
Alex Gleason	ccd8f213f6	Replace Skip/Continue with single Continue button in profile step handlePublishProfile already skips publishing when no data is entered, so the Skip button was redundant. A single full-width Continue button simplifies the UI.	2026-04-11 15:09:38 -05:00
Alex Gleason	1c25702453	Fix signup dialog not clearing background when switching to light/dark theme ThemeStep was reading customTheme?.background?.url unconditionally, so the background persisted even after selecting a built-in theme. Now resolves the active theme config the same way AppProvider does, only showing the background when the active theme actually has one.	2026-04-11 14:58:52 -05:00
Alex Gleason	357ba7d8c8	fix: migrate to SystemBars API for Android 16+ safe area inset support Android 16 (API 36) enforces edge-to-edge rendering unconditionally, breaking @capacitor/status-bar's setOverlaysWebView and setBackgroundColor. Additionally, a Chromium bug (<140) causes env(safe-area-inset-) to report 0 in some Android WebViews. - Replace @capacitor/status-bar with SystemBars from @capacitor/core 8+ - Enable insetsHandling: 'css' in capacitor.config.ts so the SystemBars plugin injects --safe-area-inset- CSS variables on Android - Update all safe area CSS utilities and inline styles to use var(--safe-area-inset-, env(safe-area-inset-, 0px)) fallback pattern - Remove @capacitor/status-bar dependency (no longer needed)	2026-04-11 14:47:15 -05:00
Alex Gleason	207ca6893a	Add iCloud Keychain credential saving/restoring on iOS via @capgo/capacitor-autofill-save-password - Use SecAddSharedWebCredential to prompt 'Save Password?' on signup - Use ASAuthorizationPasswordProvider to restore credentials on login - Add webcredentials:ditto.pub Associated Domains entitlement - Deploy apple-app-site-association for domain validation - Keep existing Chromium PasswordCredential flow as web fallback - Add saveNsec() helper: native credential manager on iOS/Android, file download + bonus PasswordCredential on web - Single 'Continue' button triggers the appropriate save method per platform	2026-04-11 14:01:34 -05:00
Mary Kate Fain	173f789242	Extract shared portal dropdown logic into usePortalDropdown hook Both EmojiShortcodeAutocomplete and MentionAutocomplete had identical logic for fixed viewport positioning with viewport-flip, scroll/resize dismissal, and portal rendering. Extract into a shared hook to reduce duplication and centralize the positioning behavior.	2026-04-10 12:50:05 -05:00
Mary Kate Fain	f4363dcbff	Fix emoji shortcode autocomplete clipped by compose box and emojis rendering as text - Switch autocomplete dropdowns from absolute to fixed positioning so they aren't clipped by ancestor overflow containers (e.g. the compose modal's overflow-y-auto wrapper) - Add viewport-relative coordinate calculation using getBoundingClientRect - Add flip logic to show dropdown above cursor when near viewport bottom - Dismiss dropdown on scroll/resize since fixed position doesn't track - Add font-emoji utility class to force emoji presentation for native Unicode characters (star, fire, etc.) that may render as text glyphs - Apply same fixes to MentionAutocomplete for consistency Closes #216	2026-04-05 17:32:59 -05:00