From 00a76a0f1983070752809ac831724418d41caf46 Mon Sep 17 00:00:00 2001
From: Garrett Mills <shout@garrettmills.dev>
Date: Wed, 14 Oct 2026 21:14:50 -0500
Subject: [PATCH] Android back returns from a deck to the deck list on narrow
 screens

Same as the deck screen's own back button. Only claimed below the 720px
.deck-layout breakpoint, where the list and the builder are separate
screens; side by side, flipping mobileShowList changes nothing visible.
---
 src/views/DeckView.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/views/DeckView.tsx b/src/views/DeckView.tsx
index 3b1e26b..e3105c7 100644
--- a/src/views/DeckView.tsx
+++ b/src/views/DeckView.tsx
@@ -26,6 +26,20 @@ import {
   useViewMode,
 } from "../components";
 import { SuggestionsModal } from "../SuggestionsModal";
+import { useBackButton } from "../backButton";
+
+/** Whether a CSS media query currently matches, kept live across resizes. */
+function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
 
 /** Tooltip/label + icon for the per-card mainboard/maybeboard toggle. */
 function boardToggleProps(e: DeckEntry) {
@@ -351,6 +365,12 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
   // this only matters below the .deck-layout stacking breakpoint; CSS keeps
   // both panes visible side by side above it regardless of this flag.
   const [mobileShowList, setMobileShowList] = useState(true);
+  // Android back from the deck-building screen returns to the deck list, like
+  // its ← button. Only while they're separate screens (the ≤720px
+  // `.deck-layout` breakpoint): side by side, flipping the flag changes
+  // nothing visible, so back would seem to do nothing.
+  const listIsSeparateScreen = useMediaQuery("(max-width: 720px)");
+  useBackButton(() => setMobileShowList(true), listIsSeparateScreen && !mobileShowList);
 
   const [libQuery, setLibQuery] = useState("");
   const [libResults, setLibResults] = useState<CardRef[]>([]);