Add PWA support with popup OAuth and share target

- Add PWA detection and popup OAuth flow for Android standalone mode
- Add localStorage fallback when window.opener is lost during OAuth
- Add PWA manifest with share_target configuration
- Add minimal service worker for PWA requirements
- Add share-target route handler for receiving shared URLs

Fixes #4

deno.json

···
     "@std/dotenv": "jsr:@std/dotenv@0.225",
     "@std/media-types": "jsr:@std/media-types@1",
     "@std/path": "jsr:@std/path@1",
-    "@tijs/atproto-oauth": "jsr:@tijs/atproto-oauth@2.4.0",
+    "@tijs/atproto-oauth": "jsr:@tijs/atproto-oauth@2.5.1",
     "@tijs/atproto-sessions": "jsr:@tijs/atproto-sessions@2.1.0",
     "@tijs/atproto-storage": "jsr:@tijs/atproto-storage@1.0.0",
     "@libsql/client": "npm:@libsql/client@0.15.15",

frontend/components/App.tsx

···
   useEffect(() => {
     checkSession();
 
+    // Check for share target data in URL params and redirect to Save page
+    const params = new URLSearchParams(globalThis.location.search);
+    if (params.get("action") === "share") {
+      const sharedUrl = params.get("url");
+      if (sharedUrl) {
+        // Redirect to Save page with the shared URL
+        globalThis.location.href = `/save?url=${encodeURIComponent(sharedUrl)}`;
+        return;
+      }
+    }
+
     // Listen for popstate events to update route
     const handlePopState = () => {
       setCurrentPath(globalThis.location.pathname);

frontend/components/Login.tsx

···
 import { useEffect, useRef, useState } from "react";
+import { isStandalonePwa, openOAuthPopup } from "../utils/pwa.ts";
 
 /**
  * Validate an AT Protocol handle format.
···
     return () => input.removeEventListener("input", handleInput);
   }, []);
 
-  function handleLogin(e: React.FormEvent) {
+  async function handleLogin(e: React.FormEvent) {
     e.preventDefault();
     setError(null);
 
···
         loginUrl += `&redirect=${encodeURIComponent(redirect)}`;
       }
 
-      // Redirect to OAuth login
+      // PWA mode: use popup OAuth to avoid losing PWA context
+      if (isStandalonePwa()) {
+        loginUrl += "&pwa=true";
+        try {
+          await openOAuthPopup(loginUrl);
+          // Success - reload to pick up the new session cookie
+          globalThis.location.reload();
+        } catch (popupError) {
+          const message = popupError instanceof Error
+            ? popupError.message
+            : "Login failed";
+          // Don't show "cancelled" as an error
+          if (message !== "Login cancelled") {
+            setError(message);
+          }
+          setLoading(false);
+        }
+        return;
+      }
+
+      // Regular web mode: redirect to OAuth login
       globalThis.location.href = loginUrl;
     } catch (error) {
       console.error("Login failed:", error);

frontend/index.html

···
       rel="apple-touch-icon"
       href="https://cdn.kipclip.com/favicons/apple-touch-icon.png"
     >
-    <link
-      rel="manifest"
-      href="https://cdn.kipclip.com/favicons/site.webmanifest"
-    >
+    <link rel="manifest" href="/static/manifest.webmanifest">
 
     <!-- Mobile meta -->
     <meta name="theme-color" content="#FF6B6B">

frontend/index.tsx

···
 
 // Only run in browser environment
 if (typeof document !== "undefined") {
+  // Register service worker for PWA support
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/static/sw.js").then(
+      (registration) => {
+        console.log("SW registered:", registration.scope);
+      },
+      (error) => {
+        console.error("SW registration failed:", error);
+      },
+    );
+  }
+
   const root = createRoot(document.getElementById("root")!);
   root.render(
     <AppProvider>

frontend/utils/pwa.ts

···
+/**
+ * PWA detection and OAuth utilities
+ */
+
+/**
+ * Check if the app is running as a standalone PWA (installed to home screen)
+ */
+export function isStandalonePwa(): boolean {
+  // Check display-mode media query (works on Android Chrome)
+  if (
+    globalThis.matchMedia &&
+    globalThis.matchMedia("(display-mode: standalone)").matches
+  ) {
+    return true;
+  }
+
+  // Check iOS standalone mode
+  // deno-lint-ignore no-explicit-any
+  if ((globalThis.navigator as any).standalone === true) {
+    return true;
+  }
+
+  // Check if launched from TWA (Trusted Web Activity on Android)
+  if (document.referrer.includes("android-app://")) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Open OAuth login in a popup window and wait for the result.
+ * Uses both postMessage and localStorage to receive the result,
+ * since window.opener can be lost after navigating through external OAuth providers.
+ *
+ * @param loginUrl The login URL with handle and pwa=true params
+ * @returns Promise that resolves with session data or rejects on error/cancel
+ */
+export function openOAuthPopup(
+  loginUrl: string,
+): Promise<{ did: string; handle: string }> {
+  return new Promise((resolve, reject) => {
+    // Clear any previous OAuth result
+    localStorage.removeItem("pwa-oauth-result");
+
+    // Calculate popup position (centered)
+    const width = 500;
+    const height = 600;
+    const left = Math.max(0, (screen.width - width) / 2);
+    const top = Math.max(0, (screen.height - height) / 2);
+
+    // Open popup
+    const popup = globalThis.open(
+      loginUrl,
+      "oauth-popup",
+      `width=${width},height=${height},left=${left},top=${top},menubar=no,toolbar=no,location=yes,status=no`,
+    );
+
+    if (!popup) {
+      reject(
+        new Error("Could not open popup. Please allow popups for this site."),
+      );
+      return;
+    }
+
+    // Handle successful OAuth result
+    function handleSuccess(data: { did: string; handle: string }) {
+      cleanup();
+      localStorage.removeItem("pwa-oauth-result");
+      resolve(data);
+    }
+
+    // Listen for postMessage from popup (works if opener relationship preserved)
+    function handleMessage(event: MessageEvent) {
+      const data = event.data;
+      if (data?.type === "oauth-callback" && data.success) {
+        handleSuccess({ did: data.did, handle: data.handle });
+      }
+    }
+
+    // Listen for localStorage changes (fallback when opener is lost)
+    function handleStorage(event: StorageEvent) {
+      if (event.key === "pwa-oauth-result" && event.newValue) {
+        try {
+          const data = JSON.parse(event.newValue);
+          if (data?.type === "oauth-callback" && data.success) {
+            handleSuccess({ did: data.did, handle: data.handle });
+          }
+        } catch {
+          // Ignore parse errors
+        }
+      }
+    }
+
+    // Check if popup was closed - also check localStorage on close
+    const checkClosed = setInterval(() => {
+      if (popup.closed) {
+        // Check localStorage one more time before giving up
+        const result = localStorage.getItem("pwa-oauth-result");
+        if (result) {
+          try {
+            const data = JSON.parse(result);
+            if (data?.type === "oauth-callback" && data.success) {
+              handleSuccess({ did: data.did, handle: data.handle });
+              return;
+            }
+          } catch {
+            // Ignore parse errors
+          }
+        }
+        cleanup();
+        reject(new Error("Login cancelled"));
+      }
+    }, 500);
+
+    function cleanup() {
+      globalThis.removeEventListener("message", handleMessage);
+      globalThis.removeEventListener("storage", handleStorage);
+      clearInterval(checkClosed);
+    }
+
+    globalThis.addEventListener("message", handleMessage);
+    globalThis.addEventListener("storage", handleStorage);
+  });
+}

main.ts

···
 import { registerTagRoutes } from "./routes/api/tags.ts";
 import { registerOAuthRoutes } from "./routes/oauth.ts";
 import { registerRssRoutes } from "./routes/share/rss.ts";
+import { registerShareTargetRoutes } from "./routes/share-target.ts";
 import { registerStaticRoutes } from "./routes/static.ts";
 
 // Run database migrations on startup
···
 
 // RSS feed routes
 app = registerRssRoutes(app);
+
+// Share target routes (PWA share functionality)
+app = registerShareTargetRoutes(app);
 
 // Static files and SPA routing (must be last)
 app = registerStaticRoutes(app, import.meta.url);

routes/share-target.ts

···
+/**
+ * Share target route handler for PWA share functionality.
+ * This is a fallback for when the service worker doesn't intercept the request.
+ */
+
+import type { App } from "@fresh/core";
+
+/**
+ * Create a redirect response with mutable headers.
+ * Response.redirect() creates immutable headers which conflicts with
+ * the security headers middleware.
+ */
+function redirect(location: string, status = 303): Response {
+  return new Response(null, {
+    status,
+    headers: { Location: location },
+  });
+}
+
+// deno-lint-ignore no-explicit-any
+export function registerShareTargetRoutes(app: App<any>): App<any> {
+  // Handle share target POST requests
+  app = app.post("/share-target", async (ctx) => {
+    try {
+      const formData = await ctx.req.formData();
+      const url = formData.get("url");
+      const title = formData.get("title");
+      const text = formData.get("text");
+
+      // If we have a URL, redirect to the save page
+      if (url && typeof url === "string") {
+        const saveUrl = new URL("/save", new URL(ctx.req.url).origin);
+        saveUrl.searchParams.set("url", url);
+        if (title && typeof title === "string") {
+          saveUrl.searchParams.set("title", title);
+        }
+        if (text && typeof text === "string") {
+          saveUrl.searchParams.set("text", text);
+        }
+        return redirect(saveUrl.toString());
+      }
+
+      // If no URL, try to extract from text (some apps put URL in text field)
+      if (text && typeof text === "string") {
+        const urlMatch = text.match(/https?:\/\/[^\s]+/);
+        if (urlMatch) {
+          const saveUrl = new URL("/save", new URL(ctx.req.url).origin);
+          saveUrl.searchParams.set("url", urlMatch[0]);
+          return redirect(saveUrl.toString());
+        }
+      }
+
+      // Fallback: redirect to home
+      return redirect("/");
+    } catch (error) {
+      console.error("Share target error:", error);
+      return redirect("/");
+    }
+  });
+
+  return app;
+}

static/manifest.webmanifest

···
+{
+  "name": "kipclip",
+  "short_name": "kipclip",
+  "description": "Bookmark manager for Bluesky and the AT Protocol. Save, organize, and share your bookmarks.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#FF6B6B",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "https://cdn.kipclip.com/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "https://cdn.kipclip.com/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "https://cdn.kipclip.com/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "share_target": {
+    "action": "/share-target",
+    "method": "POST",
+    "enctype": "application/x-www-form-urlencoded",
+    "params": {
+      "title": "title",
+      "text": "text",
+      "url": "url"
+    }
+  },
+  "categories": ["productivity", "utilities"],
+  "screenshots": [],
+  "prefer_related_applications": false
+}

static/sw.js

···
+/**
+ * Minimal service worker for kipclip PWA
+ *
+ * This service worker provides:
+ * - PWA installability requirements
+ * - Share target handling
+ *
+ * It does NOT provide offline caching (by design - we want fresh data).
+ */
+
+const SW_VERSION = '1.0.0';
+
+// Install event - take control immediately
+self.addEventListener('install', (event) => {
+  console.log('[SW] Installing service worker v' + SW_VERSION);
+  self.skipWaiting();
+});
+
+// Activate event - claim all clients
+self.addEventListener('activate', (event) => {
+  console.log('[SW] Activating service worker v' + SW_VERSION);
+  event.waitUntil(self.clients.claim());
+});
+
+// Fetch event - pass through to network (no caching)
+self.addEventListener('fetch', (event) => {
+  // Handle share target POST requests
+  if (event.request.method === 'POST' && event.request.url.includes('/share-target')) {
+    event.respondWith(handleShareTarget(event.request));
+    return;
+  }
+
+  // All other requests: pass through to network
+  event.respondWith(fetch(event.request));
+});
+
+/**
+ * Handle share target POST requests
+ * Converts POST form data to GET request with query params
+ */
+async function handleShareTarget(request) {
+  try {
+    const formData = await request.formData();
+    const title = formData.get('title') || '';
+    const text = formData.get('text') || '';
+    const url = formData.get('url') || '';
+
+    // Build redirect URL with shared data as query params
+    const redirectUrl = new URL('/', self.location.origin);
+    redirectUrl.searchParams.set('action', 'share');
+    if (url) redirectUrl.searchParams.set('url', url);
+    if (title) redirectUrl.searchParams.set('title', title);
+    if (text) redirectUrl.searchParams.set('text', text);
+
+    // Redirect to the app with the shared data
+    return Response.redirect(redirectUrl.toString(), 303);
+  } catch (error) {
+    console.error('[SW] Share target error:', error);
+    return Response.redirect('/', 303);
+  }
+}