Apply remaining changes (#63)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: cfbender

android/app/src/main/java/dev/cfb/manavault/MainActivity.java

@@ -1,9 +1,12 @@
 package dev.cfb.manavault;
 
+import android.content.ActivityNotFoundException;
 import android.content.Context;
+import android.content.Intent;
 import android.graphics.Color;
 import android.net.Uri;
 import android.os.Bundle;
+import android.util.Log;
 import android.webkit.CookieManager;
 
 import androidx.core.view.WindowCompat;
@@ -15,6 +18,7 @@
 import com.getcapacitor.annotation.CapacitorPlugin;
 
 public class MainActivity extends BridgeActivity {
+    private static final String TAG = "MainActivity";
     private static final int APP_CHROME_COLOR = Color.rgb(24, 4, 13);
     private static final String PREFERENCES_NAME = "NativeShell";
     private static final String SERVER_URL_KEY = "serverUrl";
@@ -80,10 +84,60 @@ public Boolean shouldOverrideLoad(Uri url) {
             String scheme = url.getScheme();
 
             if ("http".equals(scheme) || "https".equals(scheme)) {
-                return false;
+                if (isAppNavigation(url)) return false;
+
+                try {
+                    Intent intent = new Intent(Intent.ACTION_VIEW, url);
+                    intent.addCategory(Intent.CATEGORY_BROWSABLE);
+                    getActivity().startActivity(intent);
+                } catch (ActivityNotFoundException exception) {
+                    Log.w(TAG, "No browser available to open external URL", exception);
+                    return true;
+                }
+
+                return true;
             }
 
             return null;
         }
+
+        private boolean isAppNavigation(Uri url) {
+            String host = url.getHost();
+            if ("manavault.cfb.dev".equalsIgnoreCase(host) || "www.manavault.cfb.dev".equalsIgnoreCase(host)) {
+                return true;
+            }
+
+            String serverUrl = getContext()
+                    .getSharedPreferences(PREFERENCES_NAME, Context.MODE_PRIVATE)
+                    .getString(SERVER_URL_KEY, "");
+            if (serverUrl.trim().isEmpty()) return false;
+
+            Uri serverUri = Uri.parse(serverUrl.trim());
+            return sameOrigin(url, serverUri);
+        }
+
+        private boolean sameOrigin(Uri left, Uri right) {
+            int leftPort = effectivePort(left);
+            int rightPort = effectivePort(right);
+
+            return leftPort == rightPort
+                    && stringEqualsIgnoreCase(left.getScheme(), right.getScheme())
+                    && stringEqualsIgnoreCase(left.getHost(), right.getHost());
+        }
+
+        private int effectivePort(Uri uri) {
+            int port = uri.getPort();
+            if (port >= 0) return port;
+
+            String scheme = uri.getScheme();
+            if ("http".equalsIgnoreCase(scheme)) return 80;
+            if ("https".equalsIgnoreCase(scheme)) return 443;
+            return -1;
+        }
+
+        private boolean stringEqualsIgnoreCase(String left, String right) {
+            if (left == null || right == null) return left == null && right == null;
+            return left.equalsIgnoreCase(right);
+        }
     }
 }

assets/react/src/components/ui/dialog.tsx

@@ -1,6 +1,7 @@
 import { X } from "lucide-react"
 import { useEffect, type HTMLAttributes, type ReactNode } from "react"
 import { createPortal } from "react-dom"
+import { registerNativeBackModal } from "../../lib/native-modal-stack"
 import { cn } from "../../lib/utils"
 import { Button } from "./button"
 
@@ -11,6 +12,12 @@ type DialogProps = {
 }
 
 export function Dialog({ children, onOpenChange, open }: DialogProps) {
+  useEffect(() => {
+    if (!open) return
+
+    return registerNativeBackModal(() => onOpenChange(false))
+  }, [onOpenChange, open])
+
   useEffect(() => {
     if (!open) return
 

assets/react/src/components/ui/toast.tsx

@@ -1,5 +1,5 @@
 import { Check, X } from "lucide-react"
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react"
 import { createPortal } from "react-dom"
 import { cn } from "../../lib/utils"
 import { Button } from "./button"
@@ -18,6 +18,12 @@ type ToastContextValue = {
 
 const ToastContext = createContext<ToastContextValue | null>(null)
 const TOAST_DISMISS_MS = 3_500
+const TOAST_EVENT = "manavault:toast"
+
+type ToastEventDetail = {
+  message: string
+  tone?: ToastTone
+}
 
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastNotice[]>([])
@@ -37,6 +43,18 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     [dismissToast],
   )
 
+  useEffect(() => {
+    function handleToastEvent(event: Event) {
+      const detail = (event as CustomEvent<ToastEventDetail>).detail
+      if (!detail?.message) return
+
+      showToast(detail.message, { tone: detail.tone })
+    }
+
+    window.addEventListener(TOAST_EVENT, handleToastEvent)
+    return () => window.removeEventListener(TOAST_EVENT, handleToastEvent)
+  }, [showToast])
+
   const value = useMemo(() => ({ showToast }), [showToast])
 
   return (
@@ -63,8 +81,19 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
 export function useToast() {
   const context = useContext(ToastContext)
-  if (!context) throw new Error("useToast must be used inside ToastProvider")
-  return context
+  if (context) return context
+
+  return {
+    showToast(message: string, options: { tone?: ToastTone } = {}) {
+      if (typeof window === "undefined") return
+
+      window.dispatchEvent(
+        new CustomEvent<ToastEventDetail>(TOAST_EVENT, {
+          detail: { message, tone: options.tone },
+        }),
+      )
+    },
+  } satisfies ToastContextValue
 }
 
 export function Toast({

assets/react/src/lib/native-back.ts

@@ -1,8 +1,9 @@
 import type { BackButtonListenerEvent } from "@capacitor/app"
 import { Capacitor, registerPlugin, type PluginListenerHandle } from "@capacitor/core"
 import { registerCapacitorPluginOnce } from "./capacitor-native-headers.ts"
+import { closeTopNativeBackModal, hasNativeBackModal } from "./native-modal-stack.ts"
 
-export type NativeBackAction = "back" | "decks" | "minimize"
+export type NativeBackAction = "back" | "decks" | "modal" | "minimize"
 
 type AppPlugin = {
   addListener: (
@@ -23,7 +24,9 @@ export function nativeBackAction(
   event: BackButtonListenerEvent,
   pathname = window.location.pathname,
   browserHistoryLength = window.history.length,
+  modalOpen = false,
 ): NativeBackAction {
+  if (modalOpen) return "modal"
   if (pathname === "/") return "minimize"
   if (/^\/decks\/[^/]+$/.test(pathname)) return "decks"
   if (event.canGoBack || browserHistoryLength > 1) return "back"
@@ -35,7 +38,12 @@ export async function initializeNativeBackButton({ pathname, navigateToDecks }:
 
   try {
     await App.addListener("backButton", (event) => {
-      const action = nativeBackAction(event, pathname?.())
+      const action = nativeBackAction(event, pathname?.(), window.history.length, hasNativeBackModal())
+
+      if (action === "modal") {
+        closeTopNativeBackModal()
+        return
+      }
 
       if (action === "back") {
         window.history.back()

assets/react/src/lib/native-modal-stack.ts

@@ -0,0 +1,24 @@
+type NativeBackModalCloser = () => void
+
+const nativeBackModalClosers: NativeBackModalCloser[] = []
+
+export function registerNativeBackModal(close: NativeBackModalCloser) {
+  nativeBackModalClosers.push(close)
+
+  return () => {
+    const index = nativeBackModalClosers.lastIndexOf(close)
+    if (index >= 0) nativeBackModalClosers.splice(index, 1)
+  }
+}
+
+export function hasNativeBackModal() {
+  return nativeBackModalClosers.length > 0
+}
+
+export function closeTopNativeBackModal() {
+  const close = nativeBackModalClosers.at(-1)
+  if (!close) return false
+
+  close()
+  return true
+}

assets/react/src/pages/decks/deck-stack-group.tsx

@@ -6,6 +6,7 @@ import { isLegendaryCreature } from "./deck-card-model"
 import { DeckStackCard } from "./deck-stack-card"
 import {
   isDeckStackPointerCaptured,
+  shouldClearDeckStackTouchReveal,
   shouldUpdateDeckStackHoverFromPointer,
 } from "./deck-stack-interactions"
 import type { DeckCardEntry, DeckCardTag } from "./deck-types"
@@ -86,6 +87,7 @@ export function DeckStackGroup({
 }) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
   const [pinnedIndex, setPinnedIndex] = useState<number | null>(null)
+  const stackRef = useRef<HTMLDivElement>(null)
   const hoverTimerRef = useRef<number | null>(null)
   const pendingHoverIndexRef = useRef<number | null>(null)
   const activeIndex = hoveredIndex ?? (isSelecting ? null : pinnedIndex)
@@ -98,6 +100,26 @@ export function DeckStackGroup({
     [],
   )
 
+  useEffect(() => {
+    if (pinnedIndex == null) return
+
+    function clearPinnedCard(event: globalThis.PointerEvent) {
+      if (
+        !shouldClearDeckStackTouchReveal({
+          isInsideStack: stackRef.current?.contains(event.target as Node | null) === true,
+          isPinned: pinnedIndex != null,
+        })
+      ) {
+        return
+      }
+
+      setPinnedIndex(null)
+    }
+
+    document.addEventListener("pointerdown", clearPinnedCard, true)
+    return () => document.removeEventListener("pointerdown", clearPinnedCard, true)
+  }, [pinnedIndex])
+
   function clearDeckCardHoverDelay() {
     if (hoverTimerRef.current) {
       clearTimeout(hoverTimerRef.current)
@@ -151,15 +173,19 @@ export function DeckStackGroup({
       </div>
 
       <div
+        ref={stackRef}
         className="relative w-56 overflow-hidden rounded-xl"
         style={{
           minHeight: `${DECK_STACK_CARD_HEIGHT + Math.max(group.cards.length - 1, 0) * DECK_STACK_OFFSET}px`,
         }}
         onPointerLeave={(event) => {
-          if (event.pointerType !== "touch") {
-            clearDeckCardHoverDelay()
-            setHoveredIndex(null)
+          clearDeckCardHoverDelay()
+          if (event.pointerType === "touch") {
+            setPinnedIndex(null)
+            return
           }
+
+          setHoveredIndex(null)
         }}
         onPointerMove={handlePointerMove}
       >

assets/react/src/pages/decks/deck-stack-interactions.ts

@@ -82,3 +82,13 @@ export function shouldRevealDeckStackCardOnPointerDown({
 }) {
   return pointerType !== "mouse" && !isActive
 }
+
+export function shouldClearDeckStackTouchReveal({
+  isInsideStack,
+  isPinned,
+}: {
+  isInsideStack: boolean
+  isPinned: boolean
+}) {
+  return isPinned && !isInsideStack
+}

assets/react/test/deck-stack-interactions.test.mjs

@@ -10,6 +10,7 @@ import {
   shouldCloseDeckStackActionMenu,
   shouldRaiseDeckStackCardForActionMenu,
   shouldRevealDeckStackCardOnPointerDown,
+  shouldClearDeckStackTouchReveal,
   shouldUpdateDeckStackHoverFromPointer,
 } from "../src/pages/decks/deck-stack-interactions.ts"
 
@@ -107,3 +108,9 @@ test("deck stack action menu raises its card before opening", () => {
   assert.equal(shouldRaiseDeckStackCardForActionMenu({ isActive: false }), true)
   assert.equal(shouldRaiseDeckStackCardForActionMenu({ isActive: true }), false)
 })
+
+test("deck stack touch reveal clears only for outside touches", () => {
+  assert.equal(shouldClearDeckStackTouchReveal({ isInsideStack: false, isPinned: true }), true)
+  assert.equal(shouldClearDeckStackTouchReveal({ isInsideStack: true, isPinned: true }), false)
+  assert.equal(shouldClearDeckStackTouchReveal({ isInsideStack: false, isPinned: false }), false)
+})

assets/react/test/native-back.test.mjs

@@ -3,6 +3,11 @@ import assert from "node:assert/strict"
 
 import { nativeBackAction } from "../src/lib/native-back.ts"
 
+test("nativeBackAction closes open modals before navigation", () => {
+  assert.equal(nativeBackAction({ canGoBack: true }, "/collection", 2, true), "modal")
+  assert.equal(nativeBackAction({ canGoBack: true }, "/", 2, true), "modal")
+})
+
 test("nativeBackAction minimizes on home even with a back stack", () => {
   assert.equal(nativeBackAction({ canGoBack: true }, "/", 2), "minimize")
 })