Reduce timer-screen clutter and prioritize map area (#10)

* Simplify timer screen chrome and enlarge map

* Refine timer declutter layout and bump mobile version

* Make timer map height responsive on short screens

Author: c0d3rb4b4

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.21] — 2026-02-23
+
+### Changed
+- Refined the Timer screen declutter pass by keeping the larger map while moving action controls out of the map viewport into a compact row below it, so map content is less obstructed.
+- Simplified the Active Eclipse switcher to a single concise row to reduce vertical and textual chrome.
+- Increased map viewport height to `420` for stronger map-first focus on the Timer screen.
+- Bumped `apps/mobile` version to `1.1.21`.
+
 ## [1.1.20] — 2026-02-23
 
 ### Changed

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-timer/mobile",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "private": true,
   "main": "index.js",
   "scripts": {

apps/mobile/src/screens/TimerScreen.tsx

@@ -12,6 +12,7 @@ import {
   Switch,
   Text,
   TextInput,
+  useWindowDimensions,
   View,
 } from "react-native";
 import MapView, { Marker, Polygon, Polyline } from "react-native-maps";
@@ -215,6 +216,7 @@ export default function TimerScreen({
   onOpenPreview,
 }: TimerScreenProps) {
   const insets = useSafeAreaInsets();
+  const { height: windowHeight } = useWindowDimensions();
   const [isEclipsePickerOpen, setIsEclipsePickerOpen] = useState(false);
   const [isAddFavoriteModalOpen, setIsAddFavoriteModalOpen] = useState(false);
   const [favoriteModalName, setFavoriteModalName] = useState("");
@@ -226,6 +228,10 @@ export default function TimerScreen({
     () => eclipseOptions.find((option) => option.id === activeEclipseId) ?? null,
     [activeEclipseId, eclipseOptions],
   );
+  const mapHeight = useMemo(
+    () => clamp((windowHeight - insets.top - insets.bottom) * 0.4, 260, 420),
+    [insets.bottom, insets.top, windowHeight],
+  );
   const activeEclipseCenter = useMemo(() => eclipseCenterForRecord(activeEclipse), [activeEclipse]);
   const activeKindCode = useMemo(
     () => (activeEclipse ? kindCodeForRecord(activeEclipse) : "P"),
@@ -408,24 +414,19 @@ export default function TimerScreen({
           accessibilityLabel="Switch active eclipse"
           accessibilityState={{ disabled: !eclipseOptions.length || isActiveEclipseLoading }}
         >
-          <View style={styles.eclipseSwitcherTopRow}>
+          <View style={styles.eclipseSwitcherRow}>
             <Text style={styles.eclipseSwitcherLabel}>Active Eclipse</Text>
+            <Text style={styles.eclipseSwitcherValue}>
+              {activeEclipseOption
+                ? `${activeEclipseOption.dateYmd} - ${activeEclipseOption.kindLabel}`
+                : "No eclipse selected"}
+            </Text>
             <Text style={styles.eclipseSwitcherHint}>Switch</Text>
           </View>
-          <Text style={styles.eclipseSwitcherValue}>
-            {activeEclipseOption
-              ? `${activeEclipseOption.dateYmd} - ${activeEclipseOption.kindLabel}`
-              : "No eclipse selected"}
-          </Text>
-          <Text style={styles.eclipseSwitcherMeta}>
-            {activeEclipseOption
-              ? `${activeEclipseOption.id} - ${activeEclipseOption.isPast ? "Past" : "Upcoming"}`
-              : "Pick an eclipse to compute on this screen"}
-          </Text>
         </Pressable>
       </View>
 
-      <View style={styles.mapWrap}>
+      <View style={[styles.mapWrap, { height: mapHeight }]}>
         <MapView
           key={`map-${timer.mapType}`}
           ref={timer.mapRef}
@@ -610,9 +611,9 @@ export default function TimerScreen({
       </View>
 
       <View style={styles.controls}>
-        <View style={styles.btnRow}>
+        <View style={styles.btnRowCompact}>
           <Pressable
-            style={[styles.btn, isActiveEclipseLoading ? styles.btnDisabled : null]}
+            style={[styles.btnCompact, isActiveEclipseLoading ? styles.btnDisabled : null]}
             onPress={() => {
               if (!activeEclipseCenter) {
                 timer.setStatusMessage("No center coordinates available for this eclipse");
@@ -622,16 +623,16 @@ export default function TimerScreen({
             }}
             disabled={isActiveEclipseLoading}
           >
-            <Text style={styles.btnText}>Greatest Eclipse</Text>
+            <Text style={styles.btnCompactText}>Greatest Eclipse</Text>
           </Pressable>
 
           <Pressable
-            style={[styles.btn, !canAddCurrentPinToFavorites ? styles.btnDisabled : null]}
+            style={[styles.btnCompact, !canAddCurrentPinToFavorites ? styles.btnDisabled : null]}
             onPress={openAddFavoriteModal}
             disabled={!canAddCurrentPinToFavorites}
           >
-            <Text style={styles.btnText}>
-              {canAddCurrentPinToFavorites ? "Add to Favorites" : "Already in Favorites"}
+            <Text style={styles.btnCompactText}>
+              {canAddCurrentPinToFavorites ? "Add Favorite" : "Saved"}
             </Text>
           </Pressable>
         </View>
@@ -974,17 +975,16 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: "#2e3566",
     backgroundColor: "#151a43",
-    paddingVertical: 10,
+    paddingVertical: 8,
     paddingHorizontal: 10,
-    gap: 4,
   },
   eclipseSwitcherBtnDisabled: {
     opacity: 0.68,
   },
-  eclipseSwitcherTopRow: {
+  eclipseSwitcherRow: {
     flexDirection: "row",
-    justifyContent: "space-between",
     alignItems: "center",
+    gap: 8,
   },
   eclipseSwitcherLabel: {
     color: "#b7beff",
@@ -995,28 +995,41 @@ const styles = StyleSheet.create({
   },
   eclipseSwitcherHint: {
     color: "#d9dcff",
-    fontSize: 11,
+    fontSize: 10,
     fontWeight: "700",
   },
   eclipseSwitcherValue: {
     color: "white",
-    fontSize: 13,
+    flex: 1,
+    fontSize: 12,
     fontWeight: "700",
   },
-  eclipseSwitcherMeta: {
-    color: "#bcc2f4",
-    fontSize: 11,
-  },
-  mapWrap: { height: 300, marginHorizontal: 12, borderRadius: 12, overflow: "hidden" },
+  mapWrap: { marginHorizontal: 12, borderRadius: 12, overflow: "hidden" },
   map: { flex: 1 },
   controls: {
     paddingHorizontal: 12,
-    paddingTop: 10,
-    gap: 10,
+    paddingTop: 6,
+  },
+  btnRowCompact: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  btnCompact: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: "#2f376f",
+    backgroundColor: "#11163d",
+    paddingVertical: 7,
+    paddingHorizontal: 11,
+  },
+  btnCompactText: {
+    color: "#eef0ff",
+    fontSize: 11,
+    fontWeight: "700",
   },
   favoriteWrap: {
     paddingHorizontal: 12,
-    paddingTop: 8,
+    paddingTop: 6,
     gap: 6,
   },
   favoriteList: {
@@ -1040,11 +1053,6 @@ const styles = StyleSheet.create({
     color: "#8f8f8f",
     fontSize: 12,
   },
-  btnRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-  },
   mapOverlayBtn: {
     position: "absolute",
     top: 10,
@@ -1195,16 +1203,9 @@ const styles = StyleSheet.create({
     fontWeight: "800",
     letterSpacing: 0.4,
   },
-  btn: {
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    borderRadius: 10,
-    backgroundColor: "#1f1f1f",
-  },
   btnDisabled: {
     opacity: 0.7,
   },
-  btnText: { color: "white", fontWeight: "600" },
   statusBar: { paddingHorizontal: 12, paddingTop: 8 },
   statusText: { color: "#bdbdbd", fontSize: 12 },
   results: { flex: 1, paddingHorizontal: 12, paddingTop: 10 },