@buoy-gg/time-machine 7.0.36 → 7.0.38

package/lib/module/components/HeaderReloadButton.js

@@ -1,14 +1,15 @@
 "use strict";
 
 /**
- * Labeled "RELOAD APP" header action — the one reload affordance in the tool.
- * Plain JS-bundle reload (no restore): in-memory state rebuilds from whatever
- * is persisted. Registered as the preset's default headerActions, so it shows
- * on every screen unless a screen overrides the header actions.
+ * The reload header action: a plain JS-bundle reload (no restore), so
+ * in-memory state rebuilds from whatever is persisted.
+ *
+ * A labeled dark-glass chip, the same shape as the Pin chip beside it and
+ * Network's "Override": the words are the whole explanation.
  */
 import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import { RefreshCw, night, scheduleReloadApp } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { night, scheduleReloadApp } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function HeaderReloadButton() {
   const onPress = () => {
     try {
@@ -19,38 +20,34 @@ export function HeaderReloadButton() {
       // No reload mechanism available (bare production build) — nothing to do.
     }
   };
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: styles.button,
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: styles.chip,
     onPress: onPress,
-    hitSlop: {
-      top: 8,
-      bottom: 8,
-      left: 8,
-      right: 8
-    },
     accessibilityLabel: "Reload app",
+    accessibilityHint: "Reloads the JavaScript bundle without restoring anything",
     accessibilityRole: "button",
     testID: "time-machine-reload-app",
-    children: [/*#__PURE__*/_jsx(RefreshCw, {
-      size: 12,
-      color: night.color.textSecondary
-    }), /*#__PURE__*/_jsx(Text, {
+    children: /*#__PURE__*/_jsx(Text, {
       style: styles.label,
-      children: "RELOAD APP"
-    })]
+      children: "Reload app"
+    })
   });
 }
 const styles = StyleSheet.create({
-  button: {
-    flexDirection: "row",
+  chip: {
+    height: 32,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    backgroundColor: night.color.buttonSurface,
     alignItems: "center",
-    gap: 6,
-    padding: 4
+    justifyContent: "center"
   },
   label: {
-    color: night.color.textSecondary,
-    fontSize: 12,
-    fontWeight: "600"
+    fontSize: 11,
+    fontWeight: "700",
+    color: night.color.textSecondary
   }
 });
 //# sourceMappingURL=HeaderReloadButton.js.map

package/lib/module/components/TimeMachineBody.js

@@ -13,11 +13,10 @@
  * Sources strip, one card of restore points with swipe-to-delete, and the
  * app-wide wipe kept last and understated.
  */
-import { useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { useSafeAreaInsets, useLimit, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { useRef, useState, useSyncExternalStore } from "react";
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets, useLimit, ToolEmptyState, getFloatingTools, subscribeFloatingTools } from "@buoy-gg/shared-ui";
 import { useToolHost } from "@buoy-gg/core";
-import { useIsPro } from "@buoy-gg/license";
 import { useTimeMachineState } from "../hooks/useTimeMachine";
 import { timeMachineStore } from "../store/timeMachineStore";
 import { Footnote, Group, SectionLabel } from "../ui/primitives";
@@ -31,7 +30,11 @@ import { UndoDeleteBar } from "./list/UndoDeleteBar";
 import { SourcesStrip } from "./list/SourcesStrip";
 import { WipeAllRow } from "./list/WipeAllRow";
 import { PreviewScreen } from "./preview/PreviewFlow";
+import { TIME_MACHINE_FLOATING_TOOL_ID, openTimeMachineFloatingTool } from "./floating/TimeMachineFloatingTool";
+import { getPickedPointId, resolveArmedPoint, subscribePickedPoint } from "./floating/armedPoint";
+import { setSourceEnabled } from "../store/sourceSettings";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isBarOpen = () => getFloatingTools().some(tool => tool.id === TIME_MACHINE_FLOATING_TOOL_ID);
 export function TimeMachineBody() {
   const [screen, setScreen] = useState({
     kind: "list"
@@ -78,21 +81,35 @@ function RestorePointList({
     hasLoaded,
     busy,
     lastOutcome,
-    recentlyDeleted
+    recentlyDeleted,
+    remoteProviders
   } = useTimeMachineState();
-  const isPro = useIsPro();
   const snapshotLimit = useLimit("timeMachine.snapshots");
   const host = useToolHost();
   const insets = useSafeAreaInsets({
     minBottom: 16
   });
+  // Which point the floating restore bar has armed, while the bar is open.
+  const barOpen = useSyncExternalStore(subscribeFloatingTools, isBarOpen, isBarOpen);
+  const pickedId = useSyncExternalStore(subscribePickedPoint, getPickedPointId, getPickedPointId);
+  const armedId = barOpen ? resolveArmedPoint(snapshots, pickedId)?.id : undefined;
+  // Restoring the same point from this list again and again is what the bar
+  // is for; say so once, at the moment it is true.
+  const listRestores = useRef({});
+  const [barHintFor, setBarHintFor] = useState(null);
+  const putOnBar = id => {
+    setBarHintFor(null);
+    openTimeMachineFloatingTool(id);
+    host.minimize();
+  };
 
   // Header search (when hosted by the core shell) filters the list.
   const query = host.search.trim().toLowerCase();
   const visible = query ? snapshots.filter(s => s.name.toLowerCase().includes(query)) : snapshots;
 
-  // Infinity for Pro, so this is simply false for them.
-  const atCaptureLimit = snapshots.length >= snapshotLimit;
+  // Infinity for Pro, so this is simply false for them. The bar's safety
+  // slot is not a point you chose to keep, so it does not count.
+  const atCaptureLimit = snapshots.filter(s => !s.safety).length >= snapshotLimit;
   const captureDisabled = busy !== null || atCaptureLimit;
 
   /**
@@ -112,12 +129,16 @@ function RestorePointList({
       confirmDestructive("Restore fresh install?", "This wipes all app storage and reloads the app.", "Wipe & reload", () => void timeMachineStore.restore(meta.id, "reload"));
       return;
     }
+    const count = (listRestores.current[meta.id] ?? 0) + 1;
+    listRestores.current[meta.id] = count;
+    if (count >= 2 && !barOpen) setBarHintFor(meta.id);
     void timeMachineStore.restore(meta.id, "live").then(outcome => {
       const clean = Object.values(outcome.results).every(r => r.ok);
       if (!clean || outcome.willReload) return;
       host.minimize();
     });
   };
+  const barHint = barHintFor && !barOpen ? snapshots.find(s => s.id === barHintFor) ?? null : null;
   return /*#__PURE__*/_jsxs(ScrollView, {
     style: styles.fill,
     contentContainerStyle: [styles.content, {
@@ -147,24 +168,47 @@ function RestorePointList({
     }), atCaptureLimit ? /*#__PURE__*/_jsxs(Footnote, {
       tone: "warning",
       testID: "time-machine-limit",
-      children: ["Free plan keeps ", snapshotLimit, " restore points. Upgrade to Pro for unlimited snapshots."]
+      children: ["Free plan keeps ", snapshotLimit, " restore point", snapshotLimit === 1 ? "" : "s", ". Upgrade to Pro for unlimited snapshots."]
     }) : null, /*#__PURE__*/_jsx(SectionLabel, {
       children: "Sources"
     }), /*#__PURE__*/_jsx(SourcesStrip, {
-      sources: sources
-    }), sources.filter(s => s.detail && !(s.canCapture && s.canRestore)).map(s => /*#__PURE__*/_jsxs(Footnote, {
-      testID: `time-machine-source-${s.id}-detail`,
-      children: [s.label, ": ", s.detail]
-    }, s.id)), /*#__PURE__*/_jsx(SectionLabel, {
+      sources: sources,
+      onToggle: remoteProviders ? undefined : setSourceEnabled
+    }), remoteProviders ? null : /*#__PURE__*/_jsx(Footnote, {
+      testID: "time-machine-sources-hint",
+      children: "Switch a source off to leave it out of every capture and restore."
+    }), /*#__PURE__*/_jsx(SectionLabel, {
       children: "Restore Points"
-    }), /*#__PURE__*/_jsxs(Group, {
+    }), barHint ? /*#__PURE__*/_jsxs(View, {
+      style: styles.barHint,
+      testID: "time-machine-bar-hint",
+      children: [/*#__PURE__*/_jsxs(Footnote, {
+        children: ["Restoring \"", barHint.name, "\" a lot? Put it on the floating action bar and restore it with one tap."]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => putOnBar(barHint.id),
+        accessibilityRole: "button",
+        testID: "time-machine-bar-hint-pin",
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.barHintAction,
+          children: "Open the action bar"
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsxs(Group, {
       children: [visible.map(meta => /*#__PURE__*/_jsx(SnapshotRow, {
         meta: meta,
         busy: busy !== null,
+        armed: meta.id === armedId,
         onOpen: () => onOpenPreview(meta),
         onRestore: () => restore(meta),
         onDelete: () => void timeMachineStore.delete(meta.id),
-        onDuplicate: () => void timeMachineStore.duplicate(meta.id)
+        onDuplicate: () => void timeMachineStore.duplicate(meta.id),
+        onArm: () => putOnBar(meta.id)
       }, meta.id)), visible.length === 0 ? /*#__PURE__*/_jsx(ToolEmptyState, {
         testID: "time-machine-empty",
         ...(!hasLoaded ? {
@@ -200,6 +244,17 @@ function RestorePointList({
   });
 }
 const styles = StyleSheet.create({
+  barHint: {
+    marginHorizontal: tm.gutter,
+    marginBottom: 8
+  },
+  barHintAction: {
+    color: tm.color.accent,
+    fontSize: tm.font.footnote,
+    fontWeight: "600",
+    paddingHorizontal: tm.textInset,
+    paddingTop: 2
+  },
   fill: {
     flex: 1,
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).

package/lib/module/components/floating/NamePromptModal.js

@@ -0,0 +1,188 @@
+"use strict";
+
+/**
+ * "Name this restore point": the dialog `+` on the restore bar opens.
+ *
+ * A real Modal rather than a panel under the strip, so it sits centered over
+ * the app, above the keyboard, wherever the strip happens to be. An empty
+ * name is allowed: the store then names the point after the screen and the
+ * time, the same default the tool's capture bar uses.
+ */
+import { useEffect, useState } from "react";
+import { KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { night } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NamePromptModal({
+  visible,
+  summary,
+  onCapture,
+  onCancel
+}) {
+  const [name, setName] = useState("");
+  // Every opening starts blank, so a cancelled name never comes back.
+  useEffect(() => {
+    if (visible) setName("");
+  }, [visible]);
+  const submit = () => onCapture(name.trim());
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onCancel,
+    statusBarTranslucent: true,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      behavior: Platform.OS === "ios" ? "padding" : undefined,
+      style: styles.fill,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.backdrop,
+        onPress: onCancel,
+        accessibilityLabel: "Cancel",
+        testID: "time-machine-bar-name-backdrop",
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.card,
+          onPress: event => event.stopPropagation(),
+          testID: "time-machine-bar-name-panel"
+          // A Pressable is one accessibility element by default, which
+          // hid the field and both buttons from VoiceOver and from tests.
+          ,
+          accessible: false,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "Name this restore point"
+          }), summary ? /*#__PURE__*/_jsx(Text, {
+            style: styles.summary,
+            testID: "time-machine-bar-name-summary",
+            children: summary
+          }) : null, /*#__PURE__*/_jsx(TextInput, {
+            testID: "time-machine-bar-name-input",
+            accessibilityLabel: "Restore point name",
+            value: name,
+            onChangeText: setName,
+            onSubmitEditing: submit,
+            placeholder: "Screen and time, if left empty",
+            placeholderTextColor: night.color.placeholder,
+            autoFocus: true,
+            autoCorrect: false
+            // Names are labels, not sentences: "bag" should stay "bag".
+            ,
+            autoCapitalize: "none",
+            returnKeyType: "done",
+            style: styles.input
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.hint,
+            children: "Captures the state the app is in right now and arms it on the bar."
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.actions,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              testID: "time-machine-bar-name-cancel",
+              accessibilityRole: "button",
+              onPress: onCancel,
+              style: styles.secondary,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.secondaryText,
+                children: "Cancel"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              testID: "time-machine-bar-name-capture",
+              accessibilityRole: "button",
+              accessibilityLabel: "Capture and arm this restore point",
+              onPress: submit,
+              style: styles.primary,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.primaryText,
+                children: "Capture"
+              })
+            })]
+          })]
+        })
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  card: {
+    width: "100%",
+    maxWidth: 360,
+    borderRadius: night.radius.sheet,
+    borderWidth: 1,
+    borderColor: night.color.separator,
+    backgroundColor: night.color.surface,
+    padding: 18,
+    gap: 12,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 24,
+    elevation: 12
+  },
+  title: {
+    color: night.color.text,
+    fontSize: night.font.title,
+    fontWeight: "600"
+  },
+  input: {
+    minHeight: 44,
+    borderRadius: night.radius.input,
+    borderWidth: 1,
+    borderColor: night.color.accentBorder,
+    backgroundColor: night.color.surfaceElevated,
+    color: night.color.text,
+    fontSize: night.font.row,
+    paddingHorizontal: 12
+  },
+  summary: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
+    marginTop: -6
+  },
+  hint: {
+    color: night.color.textSecondary,
+    fontSize: night.font.caption,
+    lineHeight: 18
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 10,
+    marginTop: 4
+  },
+  secondary: {
+    minHeight: 40,
+    paddingHorizontal: 14,
+    borderRadius: night.radius.input,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  secondaryText: {
+    color: night.color.textSecondary,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  primary: {
+    minHeight: 40,
+    paddingHorizontal: 18,
+    borderRadius: night.radius.input,
+    backgroundColor: night.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  primaryText: {
+    color: night.color.onAccent,
+    fontSize: 14,
+    fontWeight: "700"
+  }
+});
+//# sourceMappingURL=NamePromptModal.js.map