state.setAccelerometerAvailable);
+ const setAccelerometerAvailabilityHydrated = usePreferencesStore((state) => state.setAccelerometerAvailabilityHydrated);
+
+ useEffect(() => {
+ // Skip on web platform
+ if (!Capacitor.isNativePlatform()) {
+ setAccelerometerAvailable(false);
+ setAccelerometerAvailabilityHydrated(true);
+ return;
+ }
+
+ // Try to add a test listener to see if shake/accelerometer is available
+ const checkAvailability = async () => {
+ try {
+ const listener = await CapacitorShake.addListener("shake", () => {
+ // Test listener - do nothing
+ });
+
+ // If we got here, accelerometer is available
+ setAccelerometerAvailable(true);
+ setAccelerometerAvailabilityHydrated(true);
+
+ // Clean up test listener
+ await listener.remove();
+ } catch (e) {
+ console.error("Failed to check accelerometer availability:", e);
+ // On error, assume accelerometer not available
+ setAccelerometerAvailable(false);
+ setAccelerometerAvailabilityHydrated(true);
+ }
+ };
+
+ checkAvailability();
+ }, [setAccelerometerAvailable, setAccelerometerAvailabilityHydrated]);
+}
diff --git a/src/hooks/useAppSettings.ts b/src/hooks/useAppSettings.ts
index 883e57c8..7c322197 100644
--- a/src/hooks/useAppSettings.ts
+++ b/src/hooks/useAppSettings.ts
@@ -8,6 +8,9 @@ interface UseAppSettingsProps {
launchOnScan: boolean;
launcherAccess: boolean;
preferRemoteWriter: boolean;
+ shakeEnabled: boolean;
+ shakeMode: "random" | "custom";
+ shakeZapscript: string;
};
}
@@ -15,6 +18,9 @@ export function useAppSettings({ initData }: UseAppSettingsProps) {
const [restartScan, setRestartScan] = useState(initData.restartScan);
const [launchOnScan, setLaunchOnScan] = useState(initData.launchOnScan);
const [preferRemoteWriter, setPreferRemoteWriter] = useState(initData.preferRemoteWriter);
+ const [shakeEnabled, setShakeEnabled] = useState(initData.shakeEnabled);
+ const [shakeMode, setShakeMode] = useState(initData.shakeMode);
+ const [shakeZapscript, setShakeZapscript] = useState(initData.shakeZapscript);
// launcherAccess is read-only, just use the init value
const launcherAccess = initData.launcherAccess;
@@ -43,6 +49,24 @@ export function useAppSettings({ initData }: UseAppSettingsProps) {
Preferences.set({ key: "preferRemoteWriter", value: value.toString() });
};
+ const handleSetShakeEnabled = (value: boolean) => {
+ setShakeEnabled(value);
+ Preferences.set({ key: "shakeEnabled", value: value.toString() });
+ };
+
+ const handleSetShakeMode = (value: "random" | "custom") => {
+ setShakeMode(value);
+ Preferences.set({ key: "shakeMode", value });
+ // Clear zapscript when mode changes
+ setShakeZapscript("");
+ Preferences.set({ key: "shakeZapscript", value: "" });
+ };
+
+ const handleSetShakeZapscript = (value: string) => {
+ setShakeZapscript(value);
+ Preferences.set({ key: "shakeZapscript", value });
+ };
+
return {
restartScan,
setRestartScan: handleSetRestartScan,
@@ -50,6 +74,12 @@ export function useAppSettings({ initData }: UseAppSettingsProps) {
setLaunchOnScan: handleSetLaunchOnScan,
launcherAccess,
preferRemoteWriter,
- setPreferRemoteWriter: handleSetPreferRemoteWriter
+ setPreferRemoteWriter: handleSetPreferRemoteWriter,
+ shakeEnabled,
+ setShakeEnabled: handleSetShakeEnabled,
+ shakeMode,
+ setShakeMode: handleSetShakeMode,
+ shakeZapscript,
+ setShakeZapscript: handleSetShakeZapscript
};
}
\ No newline at end of file
diff --git a/src/hooks/useCameraAvailabilityCheck.ts b/src/hooks/useCameraAvailabilityCheck.ts
new file mode 100644
index 00000000..a6464575
--- /dev/null
+++ b/src/hooks/useCameraAvailabilityCheck.ts
@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { Capacitor } from "@capacitor/core";
+import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";
+import { usePreferencesStore } from "../lib/preferencesStore";
+
+/**
+ * Hook to check camera/barcode scanner availability once at app startup.
+ * This runs once at the App level to prevent layout shifts.
+ * The result is cached in the preferences store.
+ */
+export function useCameraAvailabilityCheck() {
+ const setCameraAvailable = usePreferencesStore((state) => state.setCameraAvailable);
+ const setCameraAvailabilityHydrated = usePreferencesStore((state) => state.setCameraAvailabilityHydrated);
+
+ useEffect(() => {
+ // Skip on web platform
+ if (!Capacitor.isNativePlatform()) {
+ setCameraAvailable(false);
+ setCameraAvailabilityHydrated(true);
+ return;
+ }
+
+ // Check if barcode scanner is supported
+ BarcodeScanner.isSupported()
+ .then((result) => {
+ setCameraAvailable(result.supported);
+ setCameraAvailabilityHydrated(true);
+ })
+ .catch((e) => {
+ console.error("Failed to check camera availability:", e);
+ // On error, assume camera not available
+ setCameraAvailable(false);
+ setCameraAvailabilityHydrated(true);
+ });
+ }, [setCameraAvailable, setCameraAvailabilityHydrated]);
+}
diff --git a/src/hooks/useDragToScroll.ts b/src/hooks/useDragToScroll.ts
new file mode 100644
index 00000000..b3f3cd13
--- /dev/null
+++ b/src/hooks/useDragToScroll.ts
@@ -0,0 +1,85 @@
+import React, { useRef, useCallback, useEffect } from "react";
+
+interface DragToScrollOptions {
+ enabled?: boolean;
+ scrollSensitivity?: number;
+}
+
+interface DragToScrollReturn
{
+ isDragging: boolean;
+ dragProps: {
+ ref: React.RefObject;
+ onMouseDown: (e: React.MouseEvent) => void;
+ style: React.CSSProperties;
+ };
+}
+
+/**
+ * Hook that enables drag-to-scroll functionality for horizontal scrolling containers.
+ * Provides a smooth drag experience similar to mobile touch scrolling on desktop.
+ */
+export function useDragToScroll({
+ enabled = true,
+ scrollSensitivity = 1
+}: DragToScrollOptions = {}): DragToScrollReturn {
+ const elementRef = useRef(null);
+ const isDraggingRef = useRef(false);
+ const startXRef = useRef(0);
+ const scrollStartRef = useRef(0);
+
+ const handleMouseDown = useCallback((e: React.MouseEvent) => {
+ if (!enabled || !elementRef.current) return;
+
+ // Only handle left mouse button
+ if (e.button !== 0) return;
+
+ isDraggingRef.current = true;
+ startXRef.current = e.clientX;
+ scrollStartRef.current = elementRef.current.scrollLeft;
+
+ // Prevent text selection while dragging
+ e.preventDefault();
+
+ // Add global event listeners for drag
+ const handleMouseMove = (moveEvent: MouseEvent) => {
+ if (!isDraggingRef.current || !elementRef.current) return;
+
+ const deltaX = moveEvent.clientX - startXRef.current;
+ const newScrollLeft = scrollStartRef.current - (deltaX * scrollSensitivity);
+
+ elementRef.current.scrollLeft = newScrollLeft;
+ };
+
+ const handleMouseUp = () => {
+ isDraggingRef.current = false;
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ }, [enabled, scrollSensitivity]);
+
+ // Clean up event listeners on unmount
+ useEffect(() => {
+ return () => {
+ if (isDraggingRef.current) {
+ isDraggingRef.current = false;
+ }
+ };
+ }, []);
+
+ const dragProps = {
+ ref: elementRef,
+ onMouseDown: handleMouseDown,
+ style: {
+ cursor: enabled ? (isDraggingRef.current ? "grabbing" : "grab") : "default",
+ userSelect: "none" as const
+ }
+ };
+
+ return {
+ isDragging: isDraggingRef.current,
+ dragProps
+ };
+}
\ No newline at end of file
diff --git a/src/hooks/useNfcAvailabilityCheck.ts b/src/hooks/useNfcAvailabilityCheck.ts
new file mode 100644
index 00000000..a533ebc5
--- /dev/null
+++ b/src/hooks/useNfcAvailabilityCheck.ts
@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { Capacitor } from "@capacitor/core";
+import { Nfc } from "@capawesome-team/capacitor-nfc";
+import { usePreferencesStore } from "../lib/preferencesStore";
+
+/**
+ * Hook to check NFC availability once at app startup.
+ * This runs once at the App level to prevent layout shifts.
+ * The result is cached in the preferences store.
+ */
+export function useNfcAvailabilityCheck() {
+ const setNfcAvailable = usePreferencesStore((state) => state.setNfcAvailable);
+ const setNfcAvailabilityHydrated = usePreferencesStore((state) => state.setNfcAvailabilityHydrated);
+
+ useEffect(() => {
+ // Skip on web platform
+ if (!Capacitor.isNativePlatform()) {
+ setNfcAvailable(false);
+ setNfcAvailabilityHydrated(true);
+ return;
+ }
+
+ // Check NFC availability from native plugin
+ Nfc.isAvailable()
+ .then((result) => {
+ setNfcAvailable(result.nfc);
+ setNfcAvailabilityHydrated(true);
+ })
+ .catch((e) => {
+ console.error("Failed to check NFC availability:", e);
+ // On error, assume NFC not available
+ setNfcAvailable(false);
+ setNfcAvailabilityHydrated(true);
+ });
+ }, [setNfcAvailable, setNfcAvailabilityHydrated]);
+}
diff --git a/src/hooks/useProAccessCheck.ts b/src/hooks/useProAccessCheck.ts
new file mode 100644
index 00000000..ce60b749
--- /dev/null
+++ b/src/hooks/useProAccessCheck.ts
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { Capacitor } from "@capacitor/core";
+import { Purchases } from "@revenuecat/purchases-capacitor";
+import { usePreferencesStore } from "../lib/preferencesStore";
+
+/**
+ * Hook to check Pro access status from RevenueCat on app startup.
+ * This runs once at the App level to prevent layout shifts.
+ * The result is cached in the preferences store.
+ */
+export function useProAccessCheck() {
+ const setLauncherAccess = usePreferencesStore((state) => state.setLauncherAccess);
+ const setProAccessHydrated = usePreferencesStore((state) => state.setProAccessHydrated);
+
+ useEffect(() => {
+ // Skip on web platform
+ if (Capacitor.getPlatform() === "web") {
+ console.log("Web platform, skipping Pro access check");
+ setProAccessHydrated(true);
+ return;
+ }
+
+ // Check customer info from RevenueCat
+ Purchases.getCustomerInfo()
+ .then((info) => {
+ if (info.customerInfo.entitlements.active.tapto_launcher) {
+ setLauncherAccess(true);
+ } else {
+ setLauncherAccess(false);
+ }
+ setProAccessHydrated(true);
+ })
+ .catch((e) => {
+ console.error("Failed to check Pro access:", e);
+ // On error, mark as hydrated but keep cached value
+ setProAccessHydrated(true);
+ });
+ }, [setLauncherAccess, setProAccessHydrated]);
+}
diff --git a/src/hooks/useRecentSearches.ts b/src/hooks/useRecentSearches.ts
new file mode 100644
index 00000000..11d107e0
--- /dev/null
+++ b/src/hooks/useRecentSearches.ts
@@ -0,0 +1,117 @@
+import { useState, useEffect, useCallback } from "react";
+import { Preferences } from "@capacitor/preferences";
+
+export interface RecentSearch {
+ query: string;
+ system: string;
+ tags: string[];
+ timestamp: number;
+}
+
+const RECENT_SEARCHES_KEY = "recentSearches";
+const MAX_RECENT_SEARCHES = 10;
+
+export function useRecentSearches() {
+ const [recentSearches, setRecentSearches] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ // Load recent searches from preferences on mount
+ useEffect(() => {
+ const loadRecentSearches = async () => {
+ try {
+ const { value } = await Preferences.get({ key: RECENT_SEARCHES_KEY });
+ if (value) {
+ const parsed = JSON.parse(value) as RecentSearch[];
+ setRecentSearches(parsed);
+ }
+ } catch (error) {
+ console.warn("Failed to load recent searches:", error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ loadRecentSearches();
+ }, []);
+
+ // Save searches to preferences
+ const saveToPreferences = useCallback(async (searches: RecentSearch[]) => {
+ try {
+ await Preferences.set({
+ key: RECENT_SEARCHES_KEY,
+ value: JSON.stringify(searches)
+ });
+ } catch (error) {
+ console.warn("Failed to save recent searches:", error);
+ }
+ }, []);
+
+ // Check if two searches are identical (ignoring timestamp)
+ const areSearchesEqual = useCallback((a: RecentSearch, b: RecentSearch) => {
+ return (
+ a.query === b.query &&
+ a.system === b.system &&
+ a.tags.length === b.tags.length &&
+ a.tags.every(tag => b.tags.includes(tag))
+ );
+ }, []);
+
+ // Add a new search to recent searches
+ const addRecentSearch = useCallback(async (search: Omit) => {
+ // Skip if search has no meaningful parameters
+ if (!search.query.trim() && search.system === "all" && search.tags.length === 0) {
+ return;
+ }
+
+ const newSearch: RecentSearch = {
+ ...search,
+ timestamp: Date.now()
+ };
+
+ setRecentSearches(current => {
+ // Remove any existing identical search
+ const filtered = current.filter(existing => !areSearchesEqual(existing, newSearch));
+
+ // Add new search at the beginning and limit to max items
+ const updated = [newSearch, ...filtered].slice(0, MAX_RECENT_SEARCHES);
+
+ // Save to preferences
+ saveToPreferences(updated);
+
+ return updated;
+ });
+ }, [areSearchesEqual, saveToPreferences]);
+
+ // Clear all recent searches
+ const clearRecentSearches = useCallback(async () => {
+ setRecentSearches([]);
+ await saveToPreferences([]);
+ }, [saveToPreferences]);
+
+ // Get formatted display text for a search
+ const getSearchDisplayText = useCallback((search: RecentSearch) => {
+ const parts: string[] = [];
+
+ if (search.query.trim()) {
+ parts.push(`"${search.query.trim()}"`);
+ }
+
+ if (search.system !== "all") {
+ parts.push(`System: ${search.system}`);
+ }
+
+ if (search.tags.length > 0) {
+ parts.push(`Tags: ${search.tags.join(", ")}`);
+ }
+
+ return parts.length > 0 ? parts.join(" • ") : "All Media";
+ }, []);
+
+ return {
+ recentSearches,
+ isLoading,
+ addRecentSearch,
+ clearRecentSearches,
+ getSearchDisplayText
+ };
+}
\ No newline at end of file
diff --git a/src/hooks/useRunQueueProcessor.tsx b/src/hooks/useRunQueueProcessor.tsx
index 6845b20f..8e9e6c3c 100644
--- a/src/hooks/useRunQueueProcessor.tsx
+++ b/src/hooks/useRunQueueProcessor.tsx
@@ -1,39 +1,20 @@
import { useCallback, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import toast from "react-hot-toast";
-import { App } from "@capacitor/app";
-import { TokenResponse } from "@/lib/models.ts";
import { useStatusStore } from "../lib/store";
+import { usePreferencesStore } from "../lib/preferencesStore";
+import { runToken } from "../lib/tokenOperations.tsx";
-interface UseRunQueueProcessorProps {
- launcherAccess: boolean;
- setLastToken: (token: TokenResponse) => void;
- setProPurchaseModalOpen: (open: boolean) => void;
- runToken: (
- uid: string,
- text: string,
- launcherAccess: boolean,
- connected: boolean,
- setLastToken: (token: TokenResponse) => void,
- setProPurchaseModalOpen: (open: boolean) => void,
- unsafe?: boolean
- ) => Promise;
-}
-
-export function useRunQueueProcessor({
- launcherAccess,
- setLastToken,
- setProPurchaseModalOpen,
- runToken
-}: UseRunQueueProcessorProps) {
+export function useRunQueueProcessor() {
const { t } = useTranslation();
const runQueue = useStatusStore((state) => state.runQueue);
const setRunQueue = useStatusStore((state) => state.setRunQueue);
+ const setLastToken = useStatusStore((state) => state.setLastToken);
+ const setProPurchaseModalOpen = useStatusStore((state) => state.setProPurchaseModalOpen);
+ const launcherAccess = usePreferencesStore((state) => state.launcherAccess);
const getConnected = () => useStatusStore.getState().connected;
const isProcessingRef = useRef(false);
- const lastProcessedRef = useRef(0);
-
const processQueue = useCallback(
(queueData: { value: string; unsafe: boolean } | null) => {
if (!queueData || isProcessingRef.current) {
@@ -46,8 +27,6 @@ export function useRunQueueProcessor({
setRunQueue(null);
- lastProcessedRef.current = Date.now();
-
const maxRetries = 10;
const retryInterval = 500;
let retryCount = 0;
@@ -91,7 +70,6 @@ export function useRunQueueProcessor({
},
[
launcherAccess,
- runToken,
setLastToken,
setProPurchaseModalOpen,
setRunQueue,
@@ -99,32 +77,6 @@ export function useRunQueueProcessor({
]
);
- // Listen for URL opens and process directly
- useEffect(() => {
- const listener = App.addListener("appUrlOpen", (event) => {
- const url = new URL(event.url);
- const path = url.pathname;
-
- if (path === "/run") {
- const params = new URLSearchParams(url.search);
- const value = params.get("v");
-
- if (value) {
- // Check if we've processed this recently (debounce)
- const now = Date.now();
- if (now - lastProcessedRef.current > 1000) {
- console.log("URL listener processing run:", value);
- processQueue({ value, unsafe: true });
- }
- }
- }
- });
-
- return () => {
- listener.then((l) => l.remove());
- };
- }, [processQueue]);
-
useEffect(() => {
processQueue(runQueue);
}, [
@@ -133,7 +85,6 @@ export function useRunQueueProcessor({
setLastToken,
setProPurchaseModalOpen,
setRunQueue,
- runToken,
t,
processQueue
]);
diff --git a/src/hooks/useScanOperations.tsx b/src/hooks/useScanOperations.tsx
index 408abaae..752236e7 100644
--- a/src/hooks/useScanOperations.tsx
+++ b/src/hooks/useScanOperations.tsx
@@ -4,91 +4,9 @@ import { Capacitor } from "@capacitor/core";
import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";
import toast from "react-hot-toast";
import { cancelSession, readTag, sessionManager, Status } from "../lib/nfc";
-import { CoreAPI } from "../lib/coreApi";
import { ScanResult, TokenResponse } from "../lib/models";
import { useNfcWriter, WriteAction } from "../lib/writeNfcHook";
-
-const zapUrls = [
- "https://zpr.au",
- "https://zaparoo.link",
- "https://go.tapto.life"
-];
-
-const isZapUrl = (url: string) => {
- return zapUrls.some((zapUrl) => url.toLowerCase().startsWith(zapUrl));
-};
-
-const runToken = async (
- uid: string,
- text: string,
- launcherAccess: boolean,
- connected: boolean,
- setLastToken: (token: TokenResponse) => void,
- setProPurchaseModalOpen: (open: boolean) => void,
- unsafe = false,
- override = false
-): Promise => {
- return new Promise((resolve) => {
- if (uid === "" && text === "") {
- return resolve(false);
- }
-
- const token = {
- uid: uid,
- text: text,
- scanTime: new Date().toISOString(),
- type: "",
- data: ""
- };
- setLastToken(token);
-
- if (!sessionManager.launchOnScan) {
- return resolve(true);
- }
-
- const run = async () => {
- // Only allow launch for Pro users, Zap URLs, or override
- if (launcherAccess || isZapUrl(text) || override) {
- CoreAPI.run({
- uid: uid,
- text: text,
- unsafe: unsafe
- })
- .then(() => {
- resolve(true);
- })
- .catch((e) => {
- toast.error((to) => (
- toast.dismiss(to.id)}
- onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && toast.dismiss(to.id)}
- role="button"
- tabIndex={0}
- >
- {e.message}
-
- ));
- console.error("launch error", e);
- resolve(false);
- });
- return;
- } else {
- // Non-Pro users without Zap URL should see Pro purchase modal
- setProPurchaseModalOpen(true);
- return resolve(false);
- }
- };
-
- if (!connected) {
- setTimeout(() => {
- run();
- }, 500);
- } else {
- run();
- }
- });
-};
+import { runToken } from "../lib/tokenOperations.tsx";
interface UseScanOperationsProps {
connected: boolean;
diff --git a/src/hooks/useShakeDetection.ts b/src/hooks/useShakeDetection.ts
new file mode 100644
index 00000000..fa82c5f6
--- /dev/null
+++ b/src/hooks/useShakeDetection.ts
@@ -0,0 +1,74 @@
+import { useEffect, useRef } from "react";
+import type { PluginListenerHandle } from "@capacitor/core";
+import { Capacitor } from "@capacitor/core";
+import { CapacitorShake } from "@capgo/capacitor-shake";
+import { usePreferencesStore } from "../lib/preferencesStore";
+import { useStatusStore } from "../lib/store";
+
+interface UseShakeDetectionProps {
+ shakeEnabled: boolean;
+ launcherAccess: boolean;
+ connected: boolean;
+}
+
+export function useShakeDetection({
+ shakeEnabled,
+ launcherAccess,
+ connected
+}: UseShakeDetectionProps) {
+ const setRunQueue = useStatusStore((state) => state.setRunQueue);
+ const lastShakeTimeRef = useRef(0);
+ const DEBOUNCE_MS = 1000; // Prevent multiple shakes within 1 second
+
+ useEffect(() => {
+ // Only enable shake detection on native platforms
+ if (!Capacitor.isNativePlatform()) {
+ return;
+ }
+
+ // Require Pro access, connection, and enabled setting
+ if (!shakeEnabled || !launcherAccess || !connected) {
+ return;
+ }
+
+ let listener: PluginListenerHandle | null = null;
+
+ const setupListener = async () => {
+ try {
+ listener = await CapacitorShake.addListener("shake", async () => {
+ const now = Date.now();
+
+ // Debounce: ignore shakes that happen too quickly
+ if (now - lastShakeTimeRef.current < DEBOUNCE_MS) {
+ console.log(
+ "Shake detected but debounced (too soon after last shake)"
+ );
+ return;
+ }
+
+ lastShakeTimeRef.current = now;
+
+ const zapscript = usePreferencesStore.getState().shakeZapscript;
+
+ if (!zapscript) {
+ console.log("Shake detected, but no zapscript configured");
+ return;
+ }
+
+ console.log("Shake detected, queueing zapscript:", zapscript);
+ setRunQueue({ value: zapscript, unsafe: true });
+ });
+ } catch (error) {
+ console.error("Failed to setup shake listener:", error);
+ }
+ };
+
+ setupListener();
+
+ return () => {
+ if (listener) {
+ listener.remove();
+ }
+ };
+ }, [shakeEnabled, launcherAccess, connected, setRunQueue]);
+}
diff --git a/src/hooks/useSmartSwipe.ts b/src/hooks/useSmartSwipe.ts
index 99e0dd5e..2195ef51 100644
--- a/src/hooks/useSmartSwipe.ts
+++ b/src/hooks/useSmartSwipe.ts
@@ -1,4 +1,5 @@
import { useSwipeable, SwipeableHandlers } from 'react-swipeable';
+import { useMediaQuery } from '@uidotdev/usehooks';
interface SmartSwipeOptions {
onSwipeLeft?: () => void;
@@ -8,9 +9,17 @@ interface SmartSwipeOptions {
preventScrollOnSwipe?: boolean;
swipeThreshold?: number;
velocityThreshold?: number;
+ /**
+ * Force enable mouse-based swipe gestures even on desktop.
+ * By default, mouse tracking is only enabled on mobile-sized screens (< 640px).
+ * Touch events always work regardless of this setting.
+ */
+ forceEnable?: boolean;
}
export function useSmartSwipe(options: SmartSwipeOptions = {}): SwipeableHandlers {
+ // Tailwind 'sm' breakpoint is 640px - only enable mouse tracking on smaller screens
+ const isMobile = useMediaQuery('(max-width: 639px)');
const {
onSwipeLeft,
onSwipeRight,
@@ -18,9 +27,13 @@ export function useSmartSwipe(options: SmartSwipeOptions = {}): SwipeableHandler
onSwipeDown,
preventScrollOnSwipe = false,
swipeThreshold = 50,
- velocityThreshold = 0.3
+ velocityThreshold = 0.3,
+ forceEnable = false
} = options;
+ // Enable mouse tracking only on mobile-sized screens, unless forced
+ const enableMouseTracking = forceEnable || isMobile;
+
return useSwipeable({
onSwipedLeft: onSwipeLeft ? (eventData) => {
if (Math.abs(eventData.deltaX) > swipeThreshold && eventData.velocity > velocityThreshold) {
@@ -45,9 +58,9 @@ export function useSmartSwipe(options: SmartSwipeOptions = {}): SwipeableHandler
onSwipeDown();
}
} : undefined,
-
+
preventScrollOnSwipe,
delta: 10,
- trackMouse: true
+ trackMouse: enableMouseTracking
});
}
\ No newline at end of file
diff --git a/src/hooks/useSmartTabs.ts b/src/hooks/useSmartTabs.ts
new file mode 100644
index 00000000..6f93cf83
--- /dev/null
+++ b/src/hooks/useSmartTabs.ts
@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useDragToScroll } from "./useDragToScroll";
+
+interface SmartTabsOptions {
+ onScrollChange?: (scrollLeft: number, hasOverflow: boolean) => void;
+}
+
+interface SmartTabsReturn {
+ hasOverflow: boolean;
+ isDragging: boolean;
+ tabsProps: {
+ ref: React.RefObject;
+ onMouseDown: (e: React.MouseEvent) => void;
+ onScroll?: (e: React.UIEvent) => void;
+ onWheel?: (e: React.WheelEvent) => void;
+ style: React.CSSProperties;
+ className: string;
+ };
+}
+
+/**
+ * Hook that provides smart tab behavior:
+ * - Detects overflow and enables drag-to-scroll when needed
+ * - Centers tabs when they fit within the container
+ * - Provides scroll change callbacks for gradient indicators
+ * - Supports horizontal scrolling with mouse wheel and shift+scroll
+ */
+export function useSmartTabs({
+ onScrollChange
+}: SmartTabsOptions = {}): SmartTabsReturn {
+ const [hasOverflow, setHasOverflow] = useState(false);
+
+ // Get drag-to-scroll functionality
+ const { isDragging, dragProps } = useDragToScroll({
+ enabled: hasOverflow
+ });
+
+ // Check for overflow
+ const checkOverflow = useCallback(() => {
+ const element = dragProps.ref.current;
+ if (!element) return;
+
+ const isOverflowing = element.scrollWidth > element.clientWidth;
+ setHasOverflow(isOverflowing);
+ }, [dragProps.ref]);
+
+ // Handle scroll events for gradient indicators
+ const handleScroll = useCallback((e: React.UIEvent) => {
+ if (!onScrollChange) return;
+
+ const element = e.currentTarget;
+ onScrollChange(element.scrollLeft, hasOverflow);
+ }, [onScrollChange, hasOverflow]);
+
+ // Handle wheel events for horizontal scrolling
+ const handleWheel = useCallback((e: React.WheelEvent) => {
+ if (!hasOverflow) return;
+
+ // Only handle horizontal scrolling or shift+vertical scroll
+ if (e.deltaX !== 0 || e.shiftKey) {
+ e.preventDefault();
+ const element = e.currentTarget;
+ const scrollAmount = e.deltaX !== 0 ? e.deltaX : e.deltaY;
+ element.scrollLeft += scrollAmount;
+ }
+ }, [hasOverflow]);
+
+ // Set up resize observer to detect overflow changes
+ useEffect(() => {
+ const element = dragProps.ref.current;
+ if (!element) return;
+
+ // Initial check
+ checkOverflow();
+
+ // Create resize observer to watch for size changes
+ const resizeObserver = new ResizeObserver(() => {
+ checkOverflow();
+ });
+
+ resizeObserver.observe(element);
+
+ // Also observe children changes (when tabs are added/removed)
+ const mutationObserver = new MutationObserver(() => {
+ // Use setTimeout to ensure DOM has updated
+ setTimeout(checkOverflow, 0);
+ });
+
+ mutationObserver.observe(element, {
+ childList: true,
+ subtree: true
+ });
+
+ return () => {
+ resizeObserver.disconnect();
+ mutationObserver.disconnect();
+ };
+ }, [checkOverflow, dragProps.ref]);
+
+ // Determine the appropriate className based on overflow state
+ const getClassName = () => {
+ const baseClasses = "flex w-full";
+
+ if (hasOverflow) {
+ // When overflowing: left-align and enable scrolling
+ return `${baseClasses} justify-start overflow-x-auto scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`;
+ } else {
+ // When not overflowing: center the tabs
+ return `${baseClasses} justify-center`;
+ }
+ };
+
+ const tabsProps = {
+ ...dragProps,
+ onScroll: onScrollChange ? handleScroll : undefined,
+ onWheel: handleWheel,
+ className: getClassName()
+ };
+
+ return {
+ hasOverflow,
+ isDragging,
+ tabsProps
+ };
+}
\ No newline at end of file
diff --git a/src/hooks/useVirtualInfiniteSearch.ts b/src/hooks/useVirtualInfiniteSearch.ts
new file mode 100644
index 00000000..5cb950e9
--- /dev/null
+++ b/src/hooks/useVirtualInfiniteSearch.ts
@@ -0,0 +1,93 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { CoreAPI } from '@/lib/coreApi';
+import { SearchResultGame, SearchParams } from '@/lib/models';
+
+interface UseVirtualInfiniteSearchOptions {
+ query: string;
+ systems: string[];
+ tags?: string[];
+ maxResults?: number;
+ enabled?: boolean;
+}
+
+export function useVirtualInfiniteSearch({
+ query,
+ systems,
+ tags = [],
+ maxResults = 100,
+ enabled = true
+}: UseVirtualInfiniteSearchOptions) {
+ const searchQuery = useInfiniteQuery({
+ queryKey: ['infiniteMediaSearch', query, systems, tags, maxResults],
+ queryFn: async ({ pageParam }) => {
+ const searchParams: SearchParams = {
+ query,
+ systems,
+ tags,
+ maxResults,
+ cursor: pageParam as string | undefined
+ };
+
+ return CoreAPI.mediaSearch(searchParams);
+ },
+ initialPageParam: undefined as string | undefined,
+ getNextPageParam: (lastPage) => {
+ // If pagination exists, use it. Otherwise fall back to legacy behavior (no pagination)
+ if (lastPage?.pagination) {
+ return lastPage.pagination.hasNextPage ? lastPage.pagination.nextCursor : undefined;
+ }
+ // Legacy fallback: no more pages if pagination field doesn't exist
+ return undefined;
+ },
+ enabled: enabled,
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ retry: 3,
+ retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000)
+ });
+
+ // Flatten all pages into a single array for virtual scrolling
+ const allItems = useMemo(() => {
+ if (!searchQuery.data?.pages) return [];
+
+ const items: SearchResultGame[] = [];
+ searchQuery.data.pages.forEach(page => {
+ items.push(...page.results);
+ });
+
+ return items;
+ }, [searchQuery.data?.pages]);
+
+ // Calculate total count from all pages
+ const totalCount = useMemo(() => {
+ if (!searchQuery.data?.pages) return 0;
+ return allItems.length;
+ }, [allItems.length, searchQuery.data?.pages]);
+
+ // Get loading states
+ const isLoading = searchQuery.isLoading;
+ const isFetchingNextPage = searchQuery.isFetchingNextPage;
+ const hasNextPage = searchQuery.hasNextPage;
+ const isError = searchQuery.isError;
+ const error = searchQuery.error;
+
+ return {
+ // Data
+ allItems,
+ totalCount,
+
+ // Loading states
+ isLoading,
+ isFetchingNextPage,
+ hasNextPage,
+ isError,
+ error,
+
+ // Actions
+ fetchNextPage: searchQuery.fetchNextPage,
+ refetch: searchQuery.refetch,
+
+ // Raw query for debugging
+ query: searchQuery
+ };
+}
\ No newline at end of file
diff --git a/src/hooks/useWriteQueueProcessor.tsx b/src/hooks/useWriteQueueProcessor.tsx
index 84e173cd..bfdb0209 100644
--- a/src/hooks/useWriteQueueProcessor.tsx
+++ b/src/hooks/useWriteQueueProcessor.tsx
@@ -3,31 +3,22 @@ import { useTranslation } from "react-i18next";
import toast from "react-hot-toast";
import { Capacitor } from "@capacitor/core";
import { Nfc } from "@capawesome-team/capacitor-nfc";
-import { WriteAction } from "@/lib/writeNfcHook";
-import { Status } from "@/lib/nfc.ts";
+import { WriteAction, useNfcWriter, WriteMethod } from "@/lib/writeNfcHook";
import { useStatusStore } from "../lib/store";
+import { usePreferencesStore } from "../lib/preferencesStore";
import { CoreAPI } from "../lib/coreApi";
-interface UseWriteQueueProcessorProps {
- nfcWriter: {
- write: (action: WriteAction, content: string) => Promise;
- end: () => Promise;
- status: Status | null;
- };
- setWriteOpen: (open: boolean) => void;
-}
-
interface UseWriteQueueProcessorReturn {
reset: () => void;
}
-export function useWriteQueueProcessor({
- nfcWriter,
- setWriteOpen
-}: UseWriteQueueProcessorProps): UseWriteQueueProcessorReturn {
+export function useWriteQueueProcessor(): UseWriteQueueProcessorReturn {
const { t } = useTranslation();
const writeQueue = useStatusStore((state) => state.writeQueue);
const setWriteQueue = useStatusStore((state) => state.setWriteQueue);
+ const setWriteOpen = useStatusStore((state) => state.setWriteOpen);
+ const preferRemoteWriter = usePreferencesStore((state) => state.preferRemoteWriter);
+ const nfcWriter = useNfcWriter(WriteMethod.Auto, preferRemoteWriter);
const isProcessingRef = useRef(false);
const timeoutRef = useRef | null>(null);
diff --git a/src/index.css b/src/index.css
index 832f0d85..2c5b2478 100644
--- a/src/index.css
+++ b/src/index.css
@@ -430,4 +430,214 @@
body {
@apply bg-background text-foreground;
}
+
+ /* Shepherd.js Tour Custom Styling - Complete custom theme without default CSS */
+
+ /* Main tour element wrapper */
+ .shepherd-element {
+ position: absolute;
+ z-index: 9999;
+ }
+
+ /* Modal overlay backdrop - full screen */
+ .shepherd-modal-overlay-container {
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ bottom: 0 !important;
+ width: 100vw !important;
+ height: 100vh !important;
+ z-index: 9998;
+ pointer-events: none;
+ }
+
+ .shepherd-modal-overlay-container.shepherd-modal-is-visible {
+ opacity: 1;
+ transition: opacity 0.3s;
+ }
+
+ /* SVG overlay element - also needs to be full screen */
+ .shepherd-modal-overlay-container svg {
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ width: 100vw !important;
+ height: 100vh !important;
+ pointer-events: auto;
+ }
+
+ /* SVG mask path styling */
+ .shepherd-modal-overlay-container path {
+ fill: rgba(0, 0, 0, 0.5);
+ pointer-events: auto;
+ }
+
+ /* Step element - remove any white backgrounds */
+ .zaparoo-tour-step {
+ background: transparent;
+ }
+
+ /* Content container - matches shadcn Dialog */
+ .zaparoo-tour-step .shepherd-content {
+ background: hsl(210 22% 15%); /* --card */
+ border: 1px solid hsl(0 0% 100% / 13%); /* --border */
+ border-radius: 0.75rem; /* rounded-xl */
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* drop-shadow-2xl */
+ color: hsl(0 0% 100%);
+ font-family: 'Open Sans', sans-serif;
+ min-width: 280px;
+ max-width: 300px;
+ padding: 0;
+ margin: 0;
+ overflow: hidden; /* Clip content to rounded corners */
+ }
+
+ /* Header section */
+ .zaparoo-tour-step .shepherd-header {
+ background: transparent;
+ padding: 1.5rem 1.5rem 0 1.5rem;
+ position: relative;
+ }
+
+ /* Title text */
+ .zaparoo-tour-step .shepherd-title {
+ color: hsl(0 0% 100%);
+ font-size: 1.125rem; /* text-lg */
+ font-weight: 600;
+ line-height: 1;
+ margin: 0;
+ padding-right: 2rem; /* Space for close button */
+ }
+
+ /* Body text */
+ .zaparoo-tour-step .shepherd-text {
+ color: hsl(215 32% 73%); /* --muted-foreground */
+ font-size: 0.875rem; /* text-sm */
+ line-height: 1.5;
+ padding: 1rem 1.5rem;
+ margin: 0;
+ }
+
+ /* Close button */
+ .zaparoo-tour-step .shepherd-cancel-icon {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ padding: 0;
+ background: transparent;
+ border: none;
+ color: hsl(0 0% 100%);
+ opacity: 0.7;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity 0.2s;
+ font-size: 1.25rem;
+ line-height: 1;
+ }
+
+ .zaparoo-tour-step .shepherd-cancel-icon:hover {
+ opacity: 1;
+ }
+
+ /* Footer section */
+ .zaparoo-tour-step .shepherd-footer {
+ background: transparent;
+ padding: 0 1.5rem 1.5rem 1.5rem;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Primary button - matches wui Button fill variant */
+ .zaparoo-tour-step .shepherd-button {
+ background-image: radial-gradient(164.29% 190% at center top, #34c8e8 0%, #4e4af2 100%);
+ border: 1px solid rgba(255, 255, 255, 0.4);
+ border-radius: 20px;
+ color: hsl(0 0% 100%);
+ cursor: pointer;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 0.875rem;
+ font-weight: 500;
+ padding: 0.375rem 1.5rem;
+ height: 2.5rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity 0.1s, transform 0.1s;
+ touch-action: manipulation;
+ white-space: nowrap;
+ }
+
+ .zaparoo-tour-step .shepherd-button:active {
+ transform: scale(0.95);
+ }
+
+ /* Secondary button - matches wui Button outline variant */
+ .zaparoo-tour-step .shepherd-button.shepherd-button-secondary {
+ background: transparent;
+ background-image: none;
+ border: 1px solid hsl(0 0% 100% / 13%);
+ color: hsl(0 0% 100%);
+ }
+
+ /* Arrow pointer */
+ .zaparoo-tour-step .shepherd-arrow {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ pointer-events: none;
+ }
+
+ .zaparoo-tour-step .shepherd-arrow::before {
+ content: '';
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ background: hsl(210 22% 15%); /* --card */
+ border: 1px solid hsl(0 0% 100% / 13%); /* --border */
+ transform: rotate(45deg);
+ }
+
+ /* Arrow positioning */
+ .zaparoo-tour-step[data-popper-placement^='top'] .shepherd-arrow {
+ bottom: -8px;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='top'] .shepherd-arrow::before {
+ border-top: none;
+ border-left: none;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='bottom'] .shepherd-arrow {
+ top: -8px;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='bottom'] .shepherd-arrow::before {
+ border-bottom: none;
+ border-right: none;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='left'] .shepherd-arrow {
+ right: -8px;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='left'] .shepherd-arrow::before {
+ border-left: none;
+ border-bottom: none;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='right'] .shepherd-arrow {
+ left: -8px;
+ }
+
+ .zaparoo-tour-step[data-popper-placement^='right'] .shepherd-arrow::before {
+ border-right: none;
+ border-top: none;
+ }
}
\ No newline at end of file
diff --git a/src/lib/coreApi.ts b/src/lib/coreApi.ts
index d1940e06..9dfd7b27 100644
--- a/src/lib/coreApi.ts
+++ b/src/lib/coreApi.ts
@@ -10,8 +10,12 @@ import {
LogDownloadResponse,
MediaActiveUpdateRequest,
MediaResponse,
+ MediaTagsResponse,
Method,
Notification,
+ PlaytimeLimitsConfig,
+ PlaytimeLimitsUpdateRequest,
+ PlaytimeStatus,
ReadersResponse,
SearchParams,
SearchResultsResponse,
@@ -563,9 +567,9 @@ class CoreApi {
});
}
- mediaSearch(params: SearchParams): Promise {
+ mediaSearch(params: SearchParams, signal?: AbortSignal): Promise {
return new Promise((resolve, reject) => {
- this.call(Method.MediaSearch, params)
+ this.call(Method.MediaSearch, params, signal)
.then((result) => {
try {
const response = result as SearchResultsResponse;
@@ -587,6 +591,31 @@ class CoreApi {
});
}
+ mediaTags(systems?: string[]): Promise {
+ return new Promise((resolve, reject) => {
+ const params = systems ? { systems } : {};
+ this.call(Method.MediaTags, params)
+ .then((result) => {
+ try {
+ const response = result as MediaTagsResponse;
+ console.debug(response);
+ resolve(response);
+ } catch (e) {
+ console.error("Error processing media tags response:", e);
+ reject(
+ new Error(
+ `Failed to process media tags response: ${e instanceof Error ? e.message : String(e)}`
+ )
+ );
+ }
+ })
+ .catch((error) => {
+ console.error("Media tags API call failed:", error);
+ reject(error);
+ });
+ });
+ }
+
mediaGenerate(params?: { systems?: string[] }): Promise {
return new Promise((resolve, reject) => {
@@ -601,6 +630,18 @@ class CoreApi {
});
}
+ mediaGenerateCancel(): Promise {
+ return new Promise((resolve, reject) => {
+ this.call(Method.MediaGenerateCancel)
+ .then(() => {
+ resolve();
+ })
+ .catch((error) => {
+ console.error("Media generate cancel API call failed:", error);
+ reject(error);
+ });
+ });
+ }
systems(): Promise {
return new Promise((resolve, reject) => {
@@ -902,6 +943,68 @@ class CoreApi {
settingsLogsDownload(): Promise {
return this.call(Method.SettingsLogsDownload) as Promise;
}
+
+ playtime(): Promise {
+ return new Promise((resolve, reject) => {
+ this.call(Method.Playtime)
+ .then((result) => {
+ try {
+ const response = result as PlaytimeStatus;
+ console.debug(response);
+ resolve(response);
+ } catch (e) {
+ console.error("Error processing playtime response:", e);
+ reject(
+ new Error(
+ `Failed to process playtime response: ${e instanceof Error ? e.message : String(e)}`
+ )
+ );
+ }
+ })
+ .catch((error) => {
+ console.error("Playtime API call failed:", error);
+ reject(error);
+ });
+ });
+ }
+
+ playtimeLimits(): Promise {
+ return new Promise((resolve, reject) => {
+ this.call(Method.PlaytimeLimits)
+ .then((result) => {
+ try {
+ const response = result as PlaytimeLimitsConfig;
+ console.debug(response);
+ resolve(response);
+ } catch (e) {
+ console.error("Error processing playtime limits response:", e);
+ reject(
+ new Error(
+ `Failed to process playtime limits response: ${e instanceof Error ? e.message : String(e)}`
+ )
+ );
+ }
+ })
+ .catch((error) => {
+ console.error("Playtime limits API call failed:", error);
+ reject(error);
+ });
+ });
+ }
+
+ playtimeLimitsUpdate(params: PlaytimeLimitsUpdateRequest): Promise {
+ console.debug("playtime limits update", params);
+ return new Promise((resolve, reject) => {
+ this.call(Method.PlaytimeLimitsUpdate, params)
+ .then(() => {
+ resolve();
+ })
+ .catch((error) => {
+ console.error("Playtime limits update API call failed:", error);
+ reject(error);
+ });
+ });
+ }
}
export const CoreAPI = new CoreApi();
diff --git a/src/lib/models.ts b/src/lib/models.ts
index a4361700..3292a622 100644
--- a/src/lib/models.ts
+++ b/src/lib/models.ts
@@ -6,8 +6,10 @@ export enum Method {
Media = "media",
MediaSearch = "media.search",
MediaGenerate = "media.generate",
+ MediaGenerateCancel = "media.generate.cancel",
MediaActive = "media.active",
MediaActiveUpdate = "media.active.update",
+ MediaTags = "media.tags",
Systems = "systems",
Settings = "settings",
SettingsUpdate = "settings.update",
@@ -22,7 +24,10 @@ export enum Method {
Readers = "readers",
ReadersWrite = "readers.write",
ReadersWriteCancel = "readers.write.cancel",
- Version = "version"
+ Version = "version",
+ Playtime = "playtime",
+ PlaytimeLimits = "settings.playtime.limits",
+ PlaytimeLimitsUpdate = "settings.playtime.limits.update"
}
export enum Notification {
@@ -33,7 +38,9 @@ export enum Notification {
TokensRemoved = "tokens.removed",
MediaStarted = "media.started",
MediaStopped = "media.stopped",
- MediaIndexing = "media.indexing"
+ MediaIndexing = "media.indexing",
+ PlaytimeLimitWarning = "playtime.limit.warning",
+ PlaytimeLimitReached = "playtime.limit.reached"
}
export interface VersionResponse {
@@ -57,29 +64,51 @@ export interface SearchParams {
query: string;
systems: string[];
maxResults?: number;
+ tags?: string[];
+ cursor?: string;
+}
+
+export interface TagInfo {
+ tag: string;
+ type: string;
}
export interface SearchResultGame {
system: System;
name: string;
path: string;
+ zapScript?: string;
+ tags: TagInfo[];
+}
+
+export interface Pagination {
+ nextCursor: string | null;
+ hasNextPage: boolean;
+ pageSize: number;
}
export interface SearchResultsResponse {
results: SearchResultGame[];
total: number;
+ pagination?: Pagination;
}
export interface System {
id: string;
name: string;
- category: string;
+ category?: string;
+ releaseDate?: string;
+ manufacturer?: string;
}
export interface SystemsResponse {
systems: System[];
}
+export interface MediaTagsResponse {
+ tags: TagInfo[];
+}
+
export type MappingType = "uid" | "text" | "data";
export interface MappingResponse {
@@ -160,10 +189,12 @@ export interface TokenResponse {
export interface IndexResponse {
exists: boolean;
indexing: boolean;
+ optimizing?: boolean;
totalSteps?: number;
currentStep?: number;
currentStepDisplay?: string;
totalFiles?: number;
+ totalMedia?: number;
}
export interface PlayingResponse {
@@ -213,3 +244,43 @@ export interface MediaActiveUpdateRequest {
mediaPath: string;
mediaName: string;
}
+
+export interface PlaytimeLimitsConfig {
+ enabled: boolean;
+ daily: string;
+ session: string;
+ sessionReset: string;
+ warnings: string[];
+ retention: number;
+}
+
+export interface PlaytimeStatus {
+ state: "reset" | "active" | "cooldown";
+ sessionActive: boolean;
+ sessionStarted: string;
+ sessionDuration: string;
+ sessionCumulativeTime: string;
+ sessionRemaining: string;
+ cooldownRemaining?: string;
+ dailyUsageToday: string;
+ dailyRemaining: string;
+ limitsEnabled: boolean;
+}
+
+export interface PlaytimeLimitsUpdateRequest {
+ enabled?: boolean;
+ daily?: string;
+ session?: string;
+ sessionReset?: string;
+ warnings?: string[];
+ retention?: number;
+}
+
+export interface PlaytimeLimitWarningParams {
+ remaining: string;
+ type: "daily" | "session";
+}
+
+export interface PlaytimeLimitReachedParams {
+ reason: "daily" | "session";
+}
diff --git a/src/lib/nfc.ts b/src/lib/nfc.ts
index d4e1640c..73b43cef 100644
--- a/src/lib/nfc.ts
+++ b/src/lib/nfc.ts
@@ -4,6 +4,7 @@ import {
NfcTagScannedEvent,
NfcUtils
} from "@capawesome-team/capacitor-nfc";
+import type { PluginListenerHandle } from "@capacitor/core";
export enum Status {
Success,
@@ -43,6 +44,80 @@ const createNdefTextRecord = (text: string) => {
return record;
};
+/**
+ * Helper function to manage NFC scan session lifecycle with proper listener cleanup.
+ * This ensures all listeners are removed after the operation completes, preventing memory leaks.
+ */
+async function withNfcSession(
+ handler: (event: NfcTagScannedEvent) => Promise
+): Promise {
+ return new Promise((resolve, reject) => {
+ let listeners: PluginListenerHandle[] = [];
+
+ const cleanup = async () => {
+ // Remove all listeners
+ await Promise.all(listeners.map(listener => listener.remove()));
+ listeners = [];
+ };
+
+ const handleSuccess = async (result: T) => {
+ await cleanup();
+ resolve(result);
+ };
+
+ const handleError = async (error: unknown) => {
+ await cleanup();
+ reject(error);
+ };
+
+ const setupAndStartScan = async () => {
+ try {
+ // Register all listeners and store their handles before starting the scan session.
+ // This prevents a race condition where native events could fire before listener handles
+ // are stored, which would cause cleanup() to fail and reintroduce the memory leak.
+ const nfcTagScannedHandle = await Nfc.addListener("nfcTagScanned", async (event) => {
+ try {
+ const result = await handler(event);
+ Nfc.stopScanSession();
+ await handleSuccess(result);
+ } catch (error) {
+ console.error("NFC operation error:", error, { stack: error instanceof Error ? error.stack : undefined });
+ Nfc.stopScanSession();
+ await handleError(error);
+ }
+ });
+
+ const scanCanceledHandle = await Nfc.addListener("scanSessionCanceled", async () => {
+ Nfc.stopScanSession();
+ await handleError(new Error("NFC scan session was cancelled by user"));
+ });
+
+ const scanErrorHandle = await Nfc.addListener("scanSessionError", async (err) => {
+ console.error("NFC scan session error:", err, {
+ message: err.message,
+ stack: err instanceof Error ? err.stack : undefined,
+ fullError: JSON.stringify(err, null, 2)
+ });
+ Nfc.stopScanSession();
+ await handleError(err);
+ });
+
+ // Store all listener handles for cleanup
+ listeners.push(nfcTagScannedHandle, scanCanceledHandle, scanErrorHandle);
+
+ // Now it's safe to start the scan session
+ await Nfc.startScanSession();
+ } catch (setupError) {
+ // If setup fails (e.g., NFC not enabled), clean up and reject
+ await cleanup();
+ reject(setupError);
+ }
+ };
+
+ setupAndStartScan();
+ });
+}
+
export function int2hex(v: number[]): string {
let hexId = "";
for (let i = 0; i < v.length; i++) {
@@ -82,254 +157,176 @@ function readNfcEvent(event: NfcTagScannedEvent): Tag | null {
}
export async function readTag(): Promise {
- return new Promise((resolve, reject) => {
- Nfc.addListener("nfcTagScanned", async (event) => {
- Nfc.stopScanSession();
- resolve({
+ try {
+ return await withNfcSession(async (event) => {
+ return {
status: Status.Success,
info: {
rawTag: event.nfcTag,
tag: readNfcEvent(event)
}
- });
+ };
});
-
- Nfc.addListener("scanSessionCanceled", async () => {
- Nfc.stopScanSession();
- resolve({
+ } catch (error) {
+ // Handle cancellation as a successful result with Cancelled status
+ // NOTE: This relies on error message string matching, which is fragile.
+ // If the native layer changes error messages, cancellations may be treated as exceptions.
+ if (error instanceof Error && error.message.includes("cancelled")) {
+ return {
status: Status.Cancelled,
info: {
rawTag: null,
tag: null
}
- });
- });
-
- Nfc.addListener("scanSessionError", async (err) => {
- Nfc.stopScanSession();
- reject(err);
- });
-
- Nfc.startScanSession();
- });
+ };
+ }
+ throw error;
+ }
}
export async function writeTag(text: string): Promise {
- return new Promise((resolve, reject) => {
- const record = createNdefTextRecord(text);
+ const record = createNdefTextRecord(text);
- Nfc.addListener("nfcTagScanned", async (event) => {
- await Nfc.write({ message: { records: [record] } }).then(
- () => {
- console.log("write success");
- Nfc.stopScanSession();
- resolve({
- status: Status.Success,
- info: {
- rawTag: event.nfcTag,
- tag: readNfcEvent(event)
- }
- });
- },
- (error) => {
- Nfc.stopScanSession();
- reject(error);
+ try {
+ return await withNfcSession(async (event) => {
+ await Nfc.write({ message: { records: [record] } });
+ console.log("write success");
+ return {
+ status: Status.Success,
+ info: {
+ rawTag: event.nfcTag,
+ tag: readNfcEvent(event)
}
- );
+ };
});
-
- Nfc.addListener("scanSessionCanceled", async () => {
- Nfc.stopScanSession();
- resolve({
+ } catch (error) {
+ if (error instanceof Error && error.message.includes("cancelled")) {
+ return {
status: Status.Cancelled,
info: {
rawTag: null,
tag: null
}
- });
- });
-
- Nfc.addListener("scanSessionError", async (err) => {
- console.log("write error", err);
- Nfc.stopScanSession();
- reject(err);
- });
-
- Nfc.startScanSession();
- });
+ };
+ }
+ throw error;
+ }
}
export async function formatTag(): Promise {
- return new Promise((resolve, reject) => {
- Nfc.addListener("nfcTagScanned", async (event) => {
- await Nfc.format().then(
- () => {
- console.log("format success");
- Nfc.stopScanSession();
- resolve({
- status: Status.Success,
- info: {
- rawTag: event.nfcTag,
- tag: readNfcEvent(event)
- }
- });
- },
- (error) => {
- console.error("format error", error);
- Nfc.stopScanSession();
- reject(error);
+ try {
+ return await withNfcSession(async (event) => {
+ await Nfc.format();
+ console.log("format success");
+ return {
+ status: Status.Success,
+ info: {
+ rawTag: event.nfcTag,
+ tag: readNfcEvent(event)
}
- );
+ };
});
-
- Nfc.addListener("scanSessionCanceled", async () => {
- Nfc.stopScanSession();
- resolve({
+ } catch (error) {
+ if (error instanceof Error && error.message.includes("cancelled")) {
+ return {
status: Status.Cancelled,
info: {
rawTag: null,
tag: null
}
- });
- });
-
- Nfc.addListener("scanSessionError", async (err) => {
- console.log("write error", err);
- Nfc.stopScanSession();
- reject(err);
- });
-
- Nfc.startScanSession();
- });
+ };
+ }
+ throw error;
+ }
}
export async function eraseTag(): Promise {
- return new Promise((resolve, reject) => {
- Nfc.addListener("nfcTagScanned", async (event) => {
- await Nfc.erase().then(
- () => {
- console.log("erase success");
- Nfc.stopScanSession();
- resolve({
- status: Status.Success,
- info: {
- rawTag: event.nfcTag,
- tag: readNfcEvent(event)
- }
- });
- },
- (error) => {
- console.error("erase error", error);
- Nfc.stopScanSession();
- reject(error);
+ try {
+ return await withNfcSession(async (event) => {
+ await Nfc.erase();
+ console.log("erase success");
+ return {
+ status: Status.Success,
+ info: {
+ rawTag: event.nfcTag,
+ tag: readNfcEvent(event)
}
- );
+ };
});
-
- Nfc.addListener("scanSessionCanceled", async () => {
- Nfc.stopScanSession();
- resolve({
+ } catch (error) {
+ if (error instanceof Error && error.message.includes("cancelled")) {
+ return {
status: Status.Cancelled,
info: {
rawTag: null,
tag: null
}
- });
- });
-
- Nfc.addListener("scanSessionError", async (err) => {
- console.log("write error", err);
- Nfc.stopScanSession();
- reject(err);
- });
-
- Nfc.startScanSession();
- });
+ };
+ }
+ throw error;
+ }
}
export async function readRaw(): Promise {
- return new Promise((resolve, reject) => {
- Nfc.addListener("nfcTagScanned", async (event) => {
+ try {
+ return await withNfcSession(async (event) => {
console.log("read raw success");
- Nfc.stopScanSession();
- resolve({
+ return {
status: Status.Success,
info: {
rawTag: event.nfcTag,
tag: readNfcEvent(event)
}
- });
+ };
});
-
- Nfc.addListener("scanSessionCanceled", async () => {
- Nfc.stopScanSession();
- resolve({
+ } catch (error) {
+ if (error instanceof Error && error.message.includes("cancelled")) {
+ return {
status: Status.Cancelled,
info: {
rawTag: null,
tag: null
}
- });
- });
-
- Nfc.addListener("scanSessionError", async (err) => {
- console.log("write error", err);
- Nfc.stopScanSession();
- reject(err);
- });
-
- Nfc.startScanSession();
- });
+ };
+ }
+ throw error;
+ }
}
export async function makeReadOnly(): Promise {
- return new Promise((resolve, reject) => {
- Nfc.addListener("nfcTagScanned", async (event) => {
- await Nfc.makeReadOnly().then(
- () => {
- console.log("make read only success");
- Nfc.stopScanSession();
- resolve({
- status: Status.Success,
- info: {
- rawTag: event.nfcTag,
- tag: readNfcEvent(event)
- }
- });
- },
- (error) => {
- console.error("make read only error", error);
- Nfc.stopScanSession();
- reject(error);
+ try {
+ return await withNfcSession(async (event) => {
+ await Nfc.makeReadOnly();
+ console.log("make read only success");
+ return {
+ status: Status.Success,
+ info: {
+ rawTag: event.nfcTag,
+ tag: readNfcEvent(event)
}
- );
+ };
});
-
- Nfc.addListener("scanSessionCanceled", async () => {
- Nfc.stopScanSession();
- resolve({
+ } catch (error) {
+ if (error instanceof Error && error.message.includes("cancelled")) {
+ return {
status: Status.Cancelled,
info: {
rawTag: null,
tag: null
}
- });
- });
-
- Nfc.addListener("scanSessionError", async (err) => {
- console.log("write error", err);
- Nfc.stopScanSession();
- reject(err);
- });
-
- Nfc.startScanSession();
- });
+ };
+ }
+ throw error;
+ }
}
export async function cancelSession() {
const supported = await Nfc.isSupported();
if (supported.nfc) {
- await Nfc.removeAllListeners();
+ // Just stop the session - this triggers scanSessionCanceled event which
+ // withNfcSession handles properly by cleaning up its own listeners.
+ // Do NOT call removeAllListeners() as it would globally remove ALL NFC listeners,
+ // breaking encapsulation and potentially affecting other code.
await Nfc.stopScanSession();
}
}
diff --git a/src/lib/preferencesStore.ts b/src/lib/preferencesStore.ts
new file mode 100644
index 00000000..d925c1c8
--- /dev/null
+++ b/src/lib/preferencesStore.ts
@@ -0,0 +1,261 @@
+import { create } from "zustand";
+import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
+import { Preferences } from "@capacitor/preferences";
+import { sessionManager } from "./nfc";
+
+/**
+ * Preferences Store
+ *
+ * Centralized store for all app preferences using Zustand with persist middleware.
+ * This replaces scattered Preferences.get/set calls throughout the app. This
+ * is mainly to prevent layout shifts when reading preferences/purchases on
+ * page loads.
+ */
+
+// Custom storage adapter for Capacitor Preferences
+const capacitorPreferencesStorage: StateStorage = {
+ getItem: async (name: string): Promise => {
+ const result = await Preferences.get({ key: name });
+ return result.value;
+ },
+ setItem: async (name: string, value: string): Promise => {
+ await Preferences.set({ key: name, value });
+ },
+ removeItem: async (name: string): Promise => {
+ await Preferences.remove({ key: name });
+ }
+};
+
+// Preferences state interface
+export interface PreferencesState {
+ // App settings
+ restartScan: boolean;
+ launchOnScan: boolean;
+ launcherAccess: boolean;
+ preferRemoteWriter: boolean;
+
+ // Shake to launch settings
+ shakeEnabled: boolean;
+ shakeMode: "random" | "custom";
+ shakeZapscript: string;
+
+ // Custom zapscript page text (separate from shake zapscript)
+ customText: string;
+
+ // Tour completion tracking
+ tourCompleted: boolean;
+
+ // Hydration tracking (internal, not persisted)
+ _hasHydrated: boolean;
+ setHasHydrated: (state: boolean) => void;
+
+ // Pro access hydration tracking (internal, not persisted)
+ _proAccessHydrated: boolean;
+ setProAccessHydrated: (state: boolean) => void;
+
+ // NFC availability (cached, not persisted - checked on each app start)
+ nfcAvailable: boolean;
+ setNfcAvailable: (value: boolean) => void;
+
+ // NFC availability hydration tracking (internal, not persisted)
+ _nfcAvailabilityHydrated: boolean;
+ setNfcAvailabilityHydrated: (state: boolean) => void;
+
+ // Camera availability (cached, not persisted - checked on each app start)
+ cameraAvailable: boolean;
+ setCameraAvailable: (value: boolean) => void;
+
+ // Camera availability hydration tracking (internal, not persisted)
+ _cameraAvailabilityHydrated: boolean;
+ setCameraAvailabilityHydrated: (state: boolean) => void;
+
+ // Accelerometer availability (cached, not persisted - checked on each app start)
+ accelerometerAvailable: boolean;
+ setAccelerometerAvailable: (value: boolean) => void;
+
+ // Accelerometer availability hydration tracking (internal, not persisted)
+ _accelerometerAvailabilityHydrated: boolean;
+ setAccelerometerAvailabilityHydrated: (state: boolean) => void;
+}
+
+// Preferences actions interface
+export interface PreferencesActions {
+ setRestartScan: (value: boolean) => void;
+ setLaunchOnScan: (value: boolean) => void;
+ setLauncherAccess: (value: boolean) => void;
+ setPreferRemoteWriter: (value: boolean) => void;
+ setShakeEnabled: (value: boolean) => void;
+ setShakeMode: (value: "random" | "custom") => void;
+ setShakeZapscript: (value: string) => void;
+ setCustomText: (value: string) => void;
+ setTourCompleted: (value: boolean) => void;
+}
+
+export type PreferencesStore = PreferencesState & PreferencesActions;
+
+// Default preferences values
+const DEFAULT_PREFERENCES: Omit<
+ PreferencesState,
+ | "_hasHydrated"
+ | "setHasHydrated"
+ | "_proAccessHydrated"
+ | "setProAccessHydrated"
+ | "nfcAvailable"
+ | "setNfcAvailable"
+ | "_nfcAvailabilityHydrated"
+ | "setNfcAvailabilityHydrated"
+ | "cameraAvailable"
+ | "setCameraAvailable"
+ | "_cameraAvailabilityHydrated"
+ | "setCameraAvailabilityHydrated"
+ | "accelerometerAvailable"
+ | "setAccelerometerAvailable"
+ | "_accelerometerAvailabilityHydrated"
+ | "setAccelerometerAvailabilityHydrated"
+> = {
+ restartScan: false,
+ launchOnScan: true, // Default to true (matches current behavior)
+ launcherAccess: false,
+ preferRemoteWriter: false,
+ shakeEnabled: false,
+ shakeMode: "random",
+ shakeZapscript: "",
+ customText: "",
+ tourCompleted: false
+};
+
+export const usePreferencesStore = create()(
+ persist(
+ (set) => ({
+ // Initialize with defaults
+ ...DEFAULT_PREFERENCES,
+
+ // Hydration tracking
+ _hasHydrated: false,
+ setHasHydrated: (state) => set({ _hasHydrated: state }),
+
+ // Pro access hydration tracking
+ _proAccessHydrated: false,
+ setProAccessHydrated: (state) => set({ _proAccessHydrated: state }),
+
+ // NFC availability (not persisted, checked on app start)
+ nfcAvailable: false,
+ setNfcAvailable: (value) => set({ nfcAvailable: value }),
+
+ // NFC availability hydration tracking
+ _nfcAvailabilityHydrated: false,
+ setNfcAvailabilityHydrated: (state) =>
+ set({ _nfcAvailabilityHydrated: state }),
+
+ // Camera availability (not persisted, checked on app start)
+ cameraAvailable: false,
+ setCameraAvailable: (value) => set({ cameraAvailable: value }),
+
+ // Camera availability hydration tracking
+ _cameraAvailabilityHydrated: false,
+ setCameraAvailabilityHydrated: (state) =>
+ set({ _cameraAvailabilityHydrated: state }),
+
+ // Accelerometer availability (not persisted, checked on app start)
+ accelerometerAvailable: false,
+ setAccelerometerAvailable: (value) => set({ accelerometerAvailable: value }),
+
+ // Accelerometer availability hydration tracking
+ _accelerometerAvailabilityHydrated: false,
+ setAccelerometerAvailabilityHydrated: (state) =>
+ set({ _accelerometerAvailabilityHydrated: state }),
+
+ // Actions - automatically persisted by middleware
+ setRestartScan: (value) => {
+ set({ restartScan: value });
+ sessionManager.setShouldRestart(value);
+ },
+ setLaunchOnScan: (value) => {
+ set({ launchOnScan: value });
+ sessionManager.setLaunchOnScan(value);
+ },
+ setLauncherAccess: (value) => set({ launcherAccess: value }),
+ setPreferRemoteWriter: (value) => set({ preferRemoteWriter: value }),
+ setShakeEnabled: (value) => set({ shakeEnabled: value }),
+ setShakeMode: (value) => {
+ // Clear zapscript when mode changes
+ set({ shakeMode: value, shakeZapscript: "" });
+ },
+ setShakeZapscript: (value) => set({ shakeZapscript: value }),
+ setCustomText: (value) => set({ customText: value }),
+ setTourCompleted: (value) => set({ tourCompleted: value })
+ }),
+ {
+ name: "app-preferences",
+ storage: createJSONStorage(() => capacitorPreferencesStorage),
+
+ // Only persist preference data, not internal state
+ partialize: (state) => ({
+ restartScan: state.restartScan,
+ launchOnScan: state.launchOnScan,
+ launcherAccess: state.launcherAccess,
+ preferRemoteWriter: state.preferRemoteWriter,
+ shakeEnabled: state.shakeEnabled,
+ shakeMode: state.shakeMode,
+ shakeZapscript: state.shakeZapscript,
+ customText: state.customText,
+ tourCompleted: state.tourCompleted
+ }),
+
+ // Callback when hydration completes
+ onRehydrateStorage: () => (state) => {
+ if (state) {
+ // Initialize sessionManager with hydrated values
+ sessionManager.setShouldRestart(state.restartScan);
+ sessionManager.setLaunchOnScan(state.launchOnScan);
+
+ state.setHasHydrated(true);
+ }
+ },
+
+ // Custom merge to prevent race conditions where empty store overwrites saved data
+ merge: (persistedState, currentState) => {
+ const persisted = (persistedState as Partial) || {};
+ return {
+ ...currentState,
+ ...persisted,
+ // Never persist the hydration flags or runtime-checked values
+ _hasHydrated: currentState._hasHydrated,
+ _proAccessHydrated: currentState._proAccessHydrated,
+ nfcAvailable: currentState.nfcAvailable,
+ _nfcAvailabilityHydrated: currentState._nfcAvailabilityHydrated,
+ cameraAvailable: currentState.cameraAvailable,
+ _cameraAvailabilityHydrated: currentState._cameraAvailabilityHydrated,
+ accelerometerAvailable: currentState.accelerometerAvailable,
+ _accelerometerAvailabilityHydrated: currentState._accelerometerAvailabilityHydrated
+ };
+ }
+ }
+ )
+);
+
+// Selectors for common use cases
+export const selectAppSettings = (state: PreferencesStore) => ({
+ restartScan: state.restartScan,
+ launchOnScan: state.launchOnScan,
+ launcherAccess: state.launcherAccess,
+ preferRemoteWriter: state.preferRemoteWriter,
+ setRestartScan: state.setRestartScan,
+ setLaunchOnScan: state.setLaunchOnScan,
+ setPreferRemoteWriter: state.setPreferRemoteWriter
+});
+
+export const selectShakeSettings = (state: PreferencesStore) => ({
+ shakeEnabled: state.shakeEnabled,
+ shakeMode: state.shakeMode,
+ shakeZapscript: state.shakeZapscript,
+ launcherAccess: state.launcherAccess,
+ setShakeEnabled: state.setShakeEnabled,
+ setShakeMode: state.setShakeMode,
+ setShakeZapscript: state.setShakeZapscript
+});
+
+export const selectCustomText = (state: PreferencesStore) => ({
+ customText: state.customText,
+ setCustomText: state.setCustomText
+});
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 9a131b51..dba43477 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -58,6 +58,12 @@ interface StatusState {
nfcModalOpen: boolean;
setNfcModalOpen: (nfcModalOpen: boolean) => void;
+ proPurchaseModalOpen: boolean;
+ setProPurchaseModalOpen: (proPurchaseModalOpen: boolean) => void;
+
+ writeOpen: boolean;
+ setWriteOpen: (writeOpen: boolean) => void;
+
safeInsets: SafeAreaInsets;
setSafeInsets: (insets: SafeAreaInsets) => void;
@@ -73,11 +79,6 @@ interface StatusState {
writeQueue: string;
setWriteQueue: (writeQueue: string) => void;
- // Grace period for connection state changes
- pendingDisconnection: boolean;
- gracePeriodTimer?: ReturnType;
- setConnectionStateWithGracePeriod: (state: ConnectionState) => void;
- clearGracePeriod: () => void;
resetConnectionState: () => void;
}
@@ -106,6 +107,7 @@ export const useStatusStore = create()((set) => ({
gamesIndex: {
exists: true,
indexing: false,
+ optimizing: false,
totalSteps: 0,
currentStep: 0,
currentStepDisplay: "",
@@ -131,6 +133,12 @@ export const useStatusStore = create()((set) => ({
nfcModalOpen: false,
setNfcModalOpen: (nfcModalOpen) => set({ nfcModalOpen }),
+ proPurchaseModalOpen: false,
+ setProPurchaseModalOpen: (proPurchaseModalOpen) => set({ proPurchaseModalOpen }),
+
+ writeOpen: false,
+ setWriteOpen: (writeOpen) => set({ writeOpen }),
+
safeInsets: defaultSafeAreaInsets,
setSafeInsets: (insets) => set({ safeInsets: insets }),
@@ -176,82 +184,7 @@ export const useStatusStore = create()((set) => ({
writeQueue: "",
setWriteQueue: (writeQueue) => set({ writeQueue }),
- // Grace period state and methods
- pendingDisconnection: false,
-
- setConnectionStateWithGracePeriod: (state) => {
- const currentState = useStatusStore.getState();
- const GRACE_PERIOD_MS = 2000; // 2 second grace period
-
- // Immediate state changes that bypass grace period
- if (state === ConnectionState.CONNECTED ||
- state === ConnectionState.ERROR ||
- state === ConnectionState.CONNECTING) {
- // Clear any pending disconnection
- if (currentState.gracePeriodTimer) {
- clearTimeout(currentState.gracePeriodTimer);
- }
- set({
- connectionState: state,
- connected: state === ConnectionState.CONNECTED,
- pendingDisconnection: false,
- gracePeriodTimer: undefined
- });
- return;
- }
-
- // Only apply grace period for disconnection states when currently connected
- if ((state === ConnectionState.RECONNECTING || state === ConnectionState.DISCONNECTED) &&
- currentState.connectionState === ConnectionState.CONNECTED) {
-
- // Clear any existing timer
- if (currentState.gracePeriodTimer) {
- clearTimeout(currentState.gracePeriodTimer);
- }
-
- // Set pending disconnection but don't change UI state yet
- const timer = setTimeout(() => {
- set({
- connectionState: state,
- connected: false,
- pendingDisconnection: false,
- gracePeriodTimer: undefined
- });
- }, GRACE_PERIOD_MS);
-
- set({
- pendingDisconnection: true,
- gracePeriodTimer: timer
- });
- } else {
- // Immediate change for other cases (e.g., not previously connected)
- set({
- connectionState: state,
- connected: false, // These states are never connected
- pendingDisconnection: false
- });
- }
- },
-
- clearGracePeriod: () => {
- const currentState = useStatusStore.getState();
- if (currentState.gracePeriodTimer) {
- clearTimeout(currentState.gracePeriodTimer);
- }
- set({
- pendingDisconnection: false,
- gracePeriodTimer: undefined
- });
- },
-
resetConnectionState: () => {
- const currentState = useStatusStore.getState();
-
- // Clear any existing grace period timer
- if (currentState.gracePeriodTimer) {
- clearTimeout(currentState.gracePeriodTimer);
- }
-
// Reset all connection-related state
set({
connected: false,
@@ -259,8 +192,6 @@ export const useStatusStore = create()((set) => ({
lastConnectionTime: null,
connectionError: "",
retryCount: 0,
- pendingDisconnection: false,
- gracePeriodTimer: undefined,
runQueue: null,
writeQueue: "",
// Reset media-related state that will be refetched on reconnect
@@ -268,6 +199,7 @@ export const useStatusStore = create()((set) => ({
gamesIndex: {
exists: true,
indexing: false,
+ optimizing: false,
totalSteps: 0,
currentStep: 0,
currentStepDisplay: "",
diff --git a/src/lib/tokenOperations.tsx b/src/lib/tokenOperations.tsx
new file mode 100644
index 00000000..01610657
--- /dev/null
+++ b/src/lib/tokenOperations.tsx
@@ -0,0 +1,86 @@
+import toast from "react-hot-toast";
+import { CoreAPI } from "./coreApi";
+import { TokenResponse } from "./models";
+import { sessionManager } from "./nfc";
+
+const zapUrls = [
+ "https://zpr.au",
+ "https://zaparoo.link",
+ "https://go.tapto.life"
+];
+
+const isZapUrl = (url: string) => {
+ return zapUrls.some((zapUrl) => url.toLowerCase().startsWith(zapUrl));
+};
+
+export const runToken = async (
+ uid: string,
+ text: string,
+ launcherAccess: boolean,
+ connected: boolean,
+ setLastToken: (token: TokenResponse) => void,
+ setProPurchaseModalOpen: (open: boolean) => void,
+ unsafe = false,
+ override = false
+): Promise => {
+ return new Promise((resolve) => {
+ if (uid === "" && text === "") {
+ return resolve(false);
+ }
+
+ const token = {
+ uid: uid,
+ text: text,
+ scanTime: new Date().toISOString(),
+ type: "",
+ data: ""
+ };
+ setLastToken(token);
+
+ if (!sessionManager.launchOnScan) {
+ return resolve(true);
+ }
+
+ const run = async () => {
+ // Only allow launch for Pro users, Zap URLs, or override
+ if (launcherAccess || isZapUrl(text) || override) {
+ CoreAPI.run({
+ uid: uid,
+ text: text,
+ unsafe: unsafe
+ })
+ .then(() => {
+ resolve(true);
+ })
+ .catch((e) => {
+ toast.error((to) => (
+ toast.dismiss(to.id)}
+ onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && toast.dismiss(to.id)}
+ role="button"
+ tabIndex={0}
+ >
+ {e.message}
+
+ ));
+ console.error("launch error", e);
+ resolve(false);
+ });
+ return;
+ } else {
+ // Non-Pro users without Zap URL should see Pro purchase modal
+ setProPurchaseModalOpen(true);
+ return resolve(false);
+ }
+ };
+
+ if (!connected) {
+ setTimeout(() => {
+ run();
+ }, 500);
+ } else {
+ run();
+ }
+ });
+};
diff --git a/src/lib/tourService.ts b/src/lib/tourService.ts
new file mode 100644
index 00000000..8fdeb9a6
--- /dev/null
+++ b/src/lib/tourService.ts
@@ -0,0 +1,188 @@
+import Shepherd from "shepherd.js";
+import type { NavigateOptions } from "@tanstack/react-router";
+import type { TFunction } from "i18next";
+
+export interface TourNavigate {
+ (opts: NavigateOptions): Promise;
+}
+
+/**
+ * Creates the Zaparoo app onboarding tour
+ *
+ * A quick 4-5 step passive guidance tour that introduces first-time users to:
+ * - Connecting to Zaparoo Core
+ * - Updating the media database
+ * - Creating cards
+ */
+export const createAppTour = (navigate: TourNavigate, t: TFunction, connected: boolean) => {
+ const TOTAL_STEPS = connected ? 4 : 5;
+
+ // Helper to format text with step indicator and progress bar
+ const formatText = (step: number, text: string) => {
+ const indicator = t("tour.stepIndicator", { current: step, total: TOTAL_STEPS });
+ const progress = (step / TOTAL_STEPS) * 100;
+ return `
+
+ ${text}
+ `;
+ };
+
+ const tour = new Shepherd.Tour({
+ useModalOverlay: true,
+ defaultStepOptions: {
+ cancelIcon: { enabled: true },
+ classes: "zaparoo-tour-step",
+ scrollTo: { behavior: "smooth", block: "center" },
+ },
+ });
+
+ // Step 1: Welcome
+ tour.addStep({
+ id: "welcome",
+ title: t("tour.welcome.title"),
+ text: formatText(1, t("tour.welcome.text")),
+ buttons: [
+ {
+ text: t("tour.buttons.skip"),
+ action: tour.cancel,
+ secondary: true,
+ },
+ {
+ text: t("tour.buttons.getStarted"),
+ action: tour.next,
+ },
+ ],
+ });
+
+ // Step 2: Device Address (only if not connected)
+ if (!connected) {
+ tour.addStep({
+ id: "device-address",
+ title: t("tour.deviceAddress.title"),
+ text: formatText(2, t("tour.deviceAddress.text")),
+ attachTo: {
+ element: '[data-tour="device-address"]',
+ on: "bottom",
+ },
+ beforeShowPromise: function () {
+ return new Promise((resolve) => {
+ navigate({ to: "/settings" }).then(() => {
+ // Small delay to ensure DOM is ready
+ setTimeout(resolve, 300);
+ });
+ });
+ },
+ buttons: [
+ {
+ text: t("tour.buttons.back"),
+ action: () => {
+ tour.hide();
+ navigate({ to: "/" }).then(() => {
+ setTimeout(() => tour.back(), 300);
+ });
+ },
+ secondary: true,
+ },
+ {
+ text: t("tour.buttons.next"),
+ action: tour.next,
+ },
+ ],
+ });
+ }
+
+ // Step 3 (or 2 if connected): Media Database Update
+ tour.addStep({
+ id: "media-database",
+ title: t("tour.mediaDatabase.title"),
+ text: formatText(connected ? 2 : 3, t("tour.mediaDatabase.text")),
+ attachTo: {
+ element: '[data-tour="update-database"]',
+ on: "top",
+ },
+ beforeShowPromise: connected ? function () {
+ return new Promise((resolve) => {
+ navigate({ to: "/settings" }).then(() => {
+ setTimeout(resolve, 300);
+ });
+ });
+ } : undefined,
+ buttons: [
+ {
+ text: t("tour.buttons.back"),
+ action: connected ? () => {
+ tour.hide();
+ navigate({ to: "/" }).then(() => {
+ setTimeout(() => tour.back(), 300);
+ });
+ } : tour.back,
+ secondary: true,
+ },
+ {
+ text: t("tour.buttons.next"),
+ action: tour.next,
+ },
+ ],
+ });
+
+ // Step 4 (or 3 if connected): Card Creation/Search
+ tour.addStep({
+ id: "create-cards",
+ title: t("tour.createCards.title"),
+ text: formatText(connected ? 3 : 4, t("tour.createCards.text")),
+ attachTo: {
+ element: '[data-tour="create-search"]',
+ on: "bottom",
+ },
+ beforeShowPromise: function () {
+ return new Promise((resolve) => {
+ navigate({ to: "/create" }).then(() => {
+ setTimeout(resolve, 300);
+ });
+ });
+ },
+ buttons: [
+ {
+ text: t("tour.buttons.back"),
+ action: () => {
+ tour.hide();
+ navigate({ to: "/settings" }).then(() => {
+ setTimeout(() => tour.back(), 300);
+ });
+ },
+ secondary: true,
+ },
+ {
+ text: t("tour.buttons.next"),
+ action: tour.next,
+ },
+ ],
+ });
+
+ // Step 5 (or 4 if connected): Complete - Navigate back to home
+ tour.addStep({
+ id: "complete",
+ title: t("tour.complete.title"),
+ text: formatText(connected ? 4 : 5, t("tour.complete.text")),
+ beforeShowPromise: function () {
+ return new Promise((resolve) => {
+ navigate({ to: "/" }).then(() => {
+ setTimeout(resolve, 300);
+ });
+ });
+ },
+ buttons: [
+ {
+ text: t("tour.buttons.finish"),
+ action: tour.complete,
+ },
+ ],
+ });
+
+ return tour;
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391d..290031c3 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,86 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
+
+/**
+ * Parse Go duration format string to hours and minutes
+ * Examples: "4h" => {hours: 4, minutes: 0}, "1h30m" => {hours: 1, minutes: 30}, "45m" => {hours: 0, minutes: 45}
+ * Also handles decimals: "39.945s" => {hours: 0, minutes: 1}, "2h0m48.945s" => {hours: 2, minutes: 1}
+ */
+export function parseDuration(duration: string): { hours: number; minutes: number } {
+ if (!duration || duration === "0") {
+ return { hours: 0, minutes: 0 };
+ }
+
+ let totalSeconds = 0;
+
+ // Match hours (e.g., "4h", "2h")
+ const hoursMatch = duration.match(/([\d.]+)h/);
+ if (hoursMatch) {
+ totalSeconds += parseFloat(hoursMatch[1]) * 3600;
+ }
+
+ // Match minutes (e.g., "30m", "0m")
+ const minutesMatch = duration.match(/([\d.]+)m/);
+ if (minutesMatch) {
+ totalSeconds += parseFloat(minutesMatch[1]) * 60;
+ }
+
+ // Match seconds (e.g., "48.945s", "39s")
+ const secondsMatch = duration.match(/([\d.]+)s/);
+ if (secondsMatch) {
+ totalSeconds += parseFloat(secondsMatch[1]);
+ }
+
+ const totalMinutes = Math.ceil(totalSeconds / 60);
+
+ return {
+ hours: Math.floor(totalMinutes / 60),
+ minutes: totalMinutes % 60
+ };
+}
+
+/**
+ * Format hours and minutes to Go duration string
+ * Examples: {hours: 4, minutes: 0} => "4h", {hours: 1, minutes: 30} => "1h30m", {hours: 0, minutes: 45} => "45m"
+ */
+export function formatDuration({ hours, minutes }: { hours: number; minutes: number }): string {
+ if (hours === 0 && minutes === 0) {
+ return "0";
+ }
+
+ const parts: string[] = [];
+
+ if (hours > 0) {
+ parts.push(`${hours}h`);
+ }
+
+ if (minutes > 0) {
+ parts.push(`${minutes}m`);
+ }
+
+ return parts.join("");
+}
+
+/**
+ * Format Go duration string for human-readable display
+ * Examples: "4h" => "4h", "1h30m" => "1h 30m", "45m" => "45m", "90s" => "2m"
+ */
+export function formatDurationDisplay(duration: string): string {
+ if (!duration || duration === "0") {
+ return "0m";
+ }
+
+ const { hours, minutes } = parseDuration(duration);
+ const parts: string[] = [];
+
+ if (hours > 0) {
+ parts.push(`${hours}h`);
+ }
+
+ if (minutes > 0) {
+ parts.push(`${minutes}m`);
+ }
+
+ return parts.length > 0 ? parts.join(" ") : "0m";
+}
diff --git a/src/lib/websocketManager.ts b/src/lib/websocketManager.ts
index e964bbb0..3fa80bb1 100644
--- a/src/lib/websocketManager.ts
+++ b/src/lib/websocketManager.ts
@@ -1,10 +1,10 @@
export enum WebSocketState {
- IDLE = 'idle',
- CONNECTING = 'connecting',
- CONNECTED = 'connected',
- RECONNECTING = 'reconnecting',
- DISCONNECTED = 'disconnected',
- ERROR = 'error'
+ IDLE = "idle",
+ CONNECTING = "connecting",
+ CONNECTED = "connected",
+ RECONNECTING = "reconnecting",
+ DISCONNECTED = "disconnected",
+ ERROR = "error"
}
export interface WebSocketManagerConfig {
@@ -16,6 +16,7 @@ export interface WebSocketManagerConfig {
reconnectBackoffMultiplier?: number;
maxReconnectInterval?: number;
pingMessage?: string;
+ connectionTimeout?: number;
}
export interface WebSocketManagerCallbacks {
@@ -35,9 +36,15 @@ export class WebSocketManager {
private pingTimer?: ReturnType;
private pongTimer?: ReturnType;
private reconnectTimer?: ReturnType;
+ private connectionTimer?: ReturnType;
private isDestroyed = false;
+ private messageQueue: string[] = [];
+ private readonly MAX_QUEUE_SIZE = 100;
- constructor(config: WebSocketManagerConfig, callbacks: WebSocketManagerCallbacks = {}) {
+ constructor(
+ config: WebSocketManagerConfig,
+ callbacks: WebSocketManagerCallbacks = {}
+ ) {
this.config = {
url: config.url,
pingInterval: config.pingInterval ?? 15000,
@@ -46,18 +53,22 @@ export class WebSocketManager {
maxReconnectAttempts: config.maxReconnectAttempts ?? Infinity,
reconnectBackoffMultiplier: config.reconnectBackoffMultiplier ?? 1.5,
maxReconnectInterval: config.maxReconnectInterval ?? 30000,
- pingMessage: config.pingMessage ?? 'ping'
+ pingMessage: config.pingMessage ?? "ping",
+ connectionTimeout: config.connectionTimeout ?? 10000
};
this.callbacks = callbacks;
}
connect(): void {
if (this.isDestroyed) {
- console.warn('Cannot connect: WebSocketManager has been destroyed');
+ console.warn("Cannot connect: WebSocketManager has been destroyed");
return;
}
- if (this.state === WebSocketState.CONNECTING || this.state === WebSocketState.CONNECTED) {
+ if (
+ this.state === WebSocketState.CONNECTING ||
+ this.state === WebSocketState.CONNECTED
+ ) {
return;
}
@@ -65,6 +76,46 @@ export class WebSocketManager {
this.createWebSocket();
}
+ /**
+ * Immediately reconnect without exponential backoff
+ * Used when app resumes from background
+ */
+ immediateReconnect(): void {
+ if (this.isDestroyed) {
+ console.warn("Cannot reconnect: WebSocketManager has been destroyed");
+ return;
+ }
+
+ // If already connected, do nothing
+ if (this.state === WebSocketState.CONNECTED && this.ws?.readyState === WebSocket.OPEN) {
+ console.log("Already connected, skipping immediate reconnect");
+ return;
+ }
+
+ console.log("Immediate reconnect triggered");
+
+ // Clear any pending reconnection timer
+ if (this.reconnectTimer) {
+ clearTimeout(this.reconnectTimer);
+ this.reconnectTimer = undefined;
+ }
+
+ // Reset reconnect attempts to get immediate connection
+ this.reconnectAttempts = 0;
+
+ // Close existing connection if any
+ this.cleanup();
+
+ // Add a delay to allow:
+ // 1. Old socket to fully close (ws.close() is async)
+ // 2. Mobile network stack to be ready after app resume (iOS/Android)
+ // 3. Android WebView JavaScript execution to fully resume
+ setTimeout(() => {
+ if (this.isDestroyed) return;
+ this.connect();
+ }, 1500); // 1.5 seconds - gives WebView time to fully wake up
+ }
+
disconnect(): void {
this.cleanup();
this.setState(WebSocketState.DISCONNECTED);
@@ -76,12 +127,52 @@ export class WebSocketManager {
this.setState(WebSocketState.IDLE);
}
- send(data: string): void {
+ send(data: string, options?: { queue?: boolean }): void {
+ const shouldQueue = options?.queue ?? true;
+
if (this.ws?.readyState === WebSocket.OPEN) {
this.ws.send(data);
+ } else if (shouldQueue) {
+ // Check if queue is at capacity
+ if (this.messageQueue.length >= this.MAX_QUEUE_SIZE) {
+ console.warn(
+ `Message queue full (${this.MAX_QUEUE_SIZE} messages). Discarding oldest message.`
+ );
+ this.messageQueue.shift(); // Remove oldest message
+ }
+ // Queue the message for sending once reconnected
+ console.debug("WebSocket not open, queuing message");
+ this.messageQueue.push(data);
} else {
- throw new Error(`Cannot send message: WebSocket is not open (state: ${this.ws?.readyState})`);
+ throw new Error(
+ `Cannot send message: WebSocket is not open (state: ${this.ws?.readyState})`
+ );
+ }
+ }
+
+ private flushMessageQueue(): void {
+ if (this.messageQueue.length === 0) {
+ return;
}
+
+ console.debug(`Flushing ${this.messageQueue.length} queued messages`);
+ const messages = [...this.messageQueue];
+ this.messageQueue = [];
+
+ messages.forEach((message) => {
+ try {
+ if (this.ws?.readyState === WebSocket.OPEN) {
+ this.ws.send(message);
+ } else {
+ // If connection closed during flush, re-queue remaining messages
+ this.messageQueue.push(message);
+ }
+ } catch (error) {
+ console.error("Failed to send queued message:", error);
+ // Re-queue failed message
+ this.messageQueue.push(message);
+ }
+ });
}
get readyState(): number | undefined {
@@ -93,15 +184,19 @@ export class WebSocketManager {
}
get isConnected(): boolean {
- return this.state === WebSocketState.CONNECTED && this.ws?.readyState === WebSocket.OPEN;
+ return (
+ this.state === WebSocketState.CONNECTED &&
+ this.ws?.readyState === WebSocket.OPEN
+ );
}
private createWebSocket(): void {
try {
this.ws = new WebSocket(this.config.url);
this.setupEventHandlers();
+ this.startConnectionTimeout();
} catch (error) {
- console.error('Failed to create WebSocket:', error);
+ console.error("Failed to create WebSocket:", error);
this.handleConnectionError();
}
}
@@ -110,22 +205,26 @@ export class WebSocketManager {
if (!this.ws) return;
this.ws.onopen = () => {
- console.debug('WebSocket connected');
+ console.debug("WebSocket connected");
+ this.clearConnectionTimeout();
this.reconnectAttempts = 0;
this.setState(WebSocketState.CONNECTED);
this.startHeartbeat();
+ this.flushMessageQueue();
this.callbacks.onOpen?.();
};
this.ws.onclose = () => {
- console.debug('WebSocket closed');
+ console.debug("WebSocket closed");
+ this.clearConnectionTimeout();
this.stopHeartbeat();
this.callbacks.onClose?.();
this.handleDisconnection();
};
this.ws.onerror = (error) => {
- console.error('WebSocket error:', error);
+ console.error("WebSocket error:", error);
+ this.clearConnectionTimeout();
this.callbacks.onError?.(error);
this.handleConnectionError();
};
@@ -135,7 +234,7 @@ export class WebSocketManager {
this.resetHeartbeat();
// Handle pong messages
- if (event.data === 'pong') {
+ if (event.data === "pong") {
this.clearPongTimeout();
return;
}
@@ -167,17 +266,31 @@ export class WebSocketManager {
}
private scheduleReconnect(): void {
- if (this.isDestroyed || this.reconnectAttempts >= this.config.maxReconnectAttempts) {
+ if (
+ this.isDestroyed ||
+ this.reconnectAttempts >= this.config.maxReconnectAttempts
+ ) {
this.setState(WebSocketState.DISCONNECTED);
return;
}
- // Calculate backoff delay
+ // Calculate backoff delay with jitter
const baseDelay = this.config.reconnectInterval;
- const backoffDelay = baseDelay * Math.pow(this.config.reconnectBackoffMultiplier, this.reconnectAttempts);
- const delay = Math.min(backoffDelay, this.config.maxReconnectInterval);
-
- console.debug(`Scheduling reconnect attempt ${this.reconnectAttempts + 1} in ${delay}ms`);
+ const backoffDelay =
+ baseDelay *
+ Math.pow(this.config.reconnectBackoffMultiplier, this.reconnectAttempts);
+ const cappedDelay = Math.min(
+ backoffDelay,
+ this.config.maxReconnectInterval
+ );
+
+ // Add random jitter (0-50% of the delay) to prevent synchronized reconnection attempts
+ const jitter = Math.random() * cappedDelay * 0.5;
+ const delay = Math.floor(cappedDelay + jitter);
+
+ console.debug(
+ `Scheduling reconnect attempt ${this.reconnectAttempts + 1} in ${delay}ms (base: ${cappedDelay}ms + jitter: ${Math.floor(jitter)}ms)`
+ );
this.reconnectTimer = setTimeout(() => {
if (this.isDestroyed) return;
@@ -196,7 +309,7 @@ export class WebSocketManager {
this.ws.send(this.config.pingMessage);
this.startPongTimeout();
} catch (error) {
- console.error('Failed to send ping:', error);
+ console.error("Failed to send ping:", error);
this.handleConnectionError();
}
}
@@ -223,7 +336,7 @@ export class WebSocketManager {
private startPongTimeout(): void {
this.clearPongTimeout();
this.pongTimer = setTimeout(() => {
- console.warn('Pong timeout - closing connection');
+ console.warn("Pong timeout - closing connection");
this.ws?.close();
}, this.config.pongTimeout);
}
@@ -235,8 +348,27 @@ export class WebSocketManager {
}
}
+ private startConnectionTimeout(): void {
+ this.clearConnectionTimeout();
+ this.connectionTimer = setTimeout(() => {
+ console.warn(`Connection timeout after ${this.config.connectionTimeout}ms - closing connection`);
+ // Close the WebSocket to trigger reconnection logic
+ if (this.ws && this.ws.readyState === WebSocket.CONNECTING) {
+ this.ws.close();
+ }
+ }, this.config.connectionTimeout);
+ }
+
+ private clearConnectionTimeout(): void {
+ if (this.connectionTimer) {
+ clearTimeout(this.connectionTimer);
+ this.connectionTimer = undefined;
+ }
+ }
+
private cleanup(): void {
this.stopHeartbeat();
+ this.clearConnectionTimeout();
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
@@ -250,10 +382,13 @@ export class WebSocketManager {
this.ws.onerror = null;
this.ws.onmessage = null;
- if (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING) {
+ if (
+ this.ws.readyState === WebSocket.OPEN ||
+ this.ws.readyState === WebSocket.CONNECTING
+ ) {
this.ws.close();
}
this.ws = null;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index acb5745e..485f0474 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -15,7 +15,8 @@ import { Route as CreateIndexRouteImport } from './routes/create.index'
import { Route as SettingsOnlineRouteImport } from './routes/settings.online'
import { Route as SettingsLogsRouteImport } from './routes/settings.logs'
import { Route as SettingsHelpRouteImport } from './routes/settings.help'
-import { Route as SettingsAdvancedRouteImport } from './routes/settings.advanced'
+import { Route as SettingsCoreRouteImport } from './routes/settings.core'
+import { Route as SettingsAppRouteImport } from './routes/settings.app'
import { Route as SettingsAboutRouteImport } from './routes/settings.about'
import { Route as CreateTextRouteImport } from './routes/create.text'
import { Route as CreateSearchRouteImport } from './routes/create.search'
@@ -53,9 +54,14 @@ const SettingsHelpRoute = SettingsHelpRouteImport.update({
path: '/settings/help',
getParentRoute: () => rootRouteImport,
} as any)
-const SettingsAdvancedRoute = SettingsAdvancedRouteImport.update({
- id: '/settings/advanced',
- path: '/settings/advanced',
+const SettingsCoreRoute = SettingsCoreRouteImport.update({
+ id: '/settings/core',
+ path: '/settings/core',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const SettingsAppRoute = SettingsAppRouteImport.update({
+ id: '/settings/app',
+ path: '/settings/app',
getParentRoute: () => rootRouteImport,
} as any)
const SettingsAboutRoute = SettingsAboutRouteImport.update({
@@ -97,7 +103,8 @@ export interface FileRoutesByFullPath {
'/create/search': typeof CreateSearchRoute
'/create/text': typeof CreateTextRoute
'/settings/about': typeof SettingsAboutRoute
- '/settings/advanced': typeof SettingsAdvancedRoute
+ '/settings/app': typeof SettingsAppRoute
+ '/settings/core': typeof SettingsCoreRoute
'/settings/help': typeof SettingsHelpRoute
'/settings/logs': typeof SettingsLogsRoute
'/settings/online': typeof SettingsOnlineRoute
@@ -112,7 +119,8 @@ export interface FileRoutesByTo {
'/create/search': typeof CreateSearchRoute
'/create/text': typeof CreateTextRoute
'/settings/about': typeof SettingsAboutRoute
- '/settings/advanced': typeof SettingsAdvancedRoute
+ '/settings/app': typeof SettingsAppRoute
+ '/settings/core': typeof SettingsCoreRoute
'/settings/help': typeof SettingsHelpRoute
'/settings/logs': typeof SettingsLogsRoute
'/settings/online': typeof SettingsOnlineRoute
@@ -128,7 +136,8 @@ export interface FileRoutesById {
'/create/search': typeof CreateSearchRoute
'/create/text': typeof CreateTextRoute
'/settings/about': typeof SettingsAboutRoute
- '/settings/advanced': typeof SettingsAdvancedRoute
+ '/settings/app': typeof SettingsAppRoute
+ '/settings/core': typeof SettingsCoreRoute
'/settings/help': typeof SettingsHelpRoute
'/settings/logs': typeof SettingsLogsRoute
'/settings/online': typeof SettingsOnlineRoute
@@ -145,7 +154,8 @@ export interface FileRouteTypes {
| '/create/search'
| '/create/text'
| '/settings/about'
- | '/settings/advanced'
+ | '/settings/app'
+ | '/settings/core'
| '/settings/help'
| '/settings/logs'
| '/settings/online'
@@ -160,7 +170,8 @@ export interface FileRouteTypes {
| '/create/search'
| '/create/text'
| '/settings/about'
- | '/settings/advanced'
+ | '/settings/app'
+ | '/settings/core'
| '/settings/help'
| '/settings/logs'
| '/settings/online'
@@ -175,7 +186,8 @@ export interface FileRouteTypes {
| '/create/search'
| '/create/text'
| '/settings/about'
- | '/settings/advanced'
+ | '/settings/app'
+ | '/settings/core'
| '/settings/help'
| '/settings/logs'
| '/settings/online'
@@ -191,7 +203,8 @@ export interface RootRouteChildren {
CreateSearchRoute: typeof CreateSearchRoute
CreateTextRoute: typeof CreateTextRoute
SettingsAboutRoute: typeof SettingsAboutRoute
- SettingsAdvancedRoute: typeof SettingsAdvancedRoute
+ SettingsAppRoute: typeof SettingsAppRoute
+ SettingsCoreRoute: typeof SettingsCoreRoute
SettingsHelpRoute: typeof SettingsHelpRoute
SettingsLogsRoute: typeof SettingsLogsRoute
SettingsOnlineRoute: typeof SettingsOnlineRoute
@@ -243,11 +256,18 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof SettingsHelpRouteImport
parentRoute: typeof rootRouteImport
}
- '/settings/advanced': {
- id: '/settings/advanced'
- path: '/settings/advanced'
- fullPath: '/settings/advanced'
- preLoaderRoute: typeof SettingsAdvancedRouteImport
+ '/settings/core': {
+ id: '/settings/core'
+ path: '/settings/core'
+ fullPath: '/settings/core'
+ preLoaderRoute: typeof SettingsCoreRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/settings/app': {
+ id: '/settings/app'
+ path: '/settings/app'
+ fullPath: '/settings/app'
+ preLoaderRoute: typeof SettingsAppRouteImport
parentRoute: typeof rootRouteImport
}
'/settings/about': {
@@ -303,7 +323,8 @@ const rootRouteChildren: RootRouteChildren = {
CreateSearchRoute: CreateSearchRoute,
CreateTextRoute: CreateTextRoute,
SettingsAboutRoute: SettingsAboutRoute,
- SettingsAdvancedRoute: SettingsAdvancedRoute,
+ SettingsAppRoute: SettingsAppRoute,
+ SettingsCoreRoute: SettingsCoreRoute,
SettingsHelpRoute: SettingsHelpRoute,
SettingsLogsRoute: SettingsLogsRoute,
SettingsOnlineRoute: SettingsOnlineRoute,
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 55c5bc00..f146eded 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -4,6 +4,7 @@ import React from "react";
import { SafeAreaHandler } from "@/lib/safeArea";
import { ErrorComponent } from "@/components/ErrorComponent.tsx";
import { BottomNav } from "../components/BottomNav";
+import { TourInitializer } from "../components/TourInitializer";
import { useBackButtonHandler } from "../hooks/useBackButtonHandler";
function BackHandler() {
@@ -48,6 +49,7 @@ export const Route = createRootRoute({
+
diff --git a/src/routes/create.custom.tsx b/src/routes/create.custom.tsx
index 0f5aa2f4..0b640b5a 100644
--- a/src/routes/create.custom.tsx
+++ b/src/routes/create.custom.tsx
@@ -1,7 +1,7 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
-import { Preferences } from "@capacitor/preferences";
+import { useShallow } from "zustand/react/shallow";
import { ZapScriptInput } from "@/components/ZapScriptInput.tsx";
import { CreateIcon } from "../lib/images";
import { Button } from "../components/wui/Button";
@@ -9,28 +9,16 @@ import { useSmartSwipe } from "../hooks/useSmartSwipe";
import { WriteModal } from "../components/WriteModal";
import { useNfcWriter, WriteAction } from "../lib/writeNfcHook";
import { PageFrame } from "../components/PageFrame";
-
-interface LoaderData {
- customText: string;
-}
+import { usePreferencesStore, selectCustomText } from "../lib/preferencesStore";
export const Route = createFileRoute("/create/custom")({
- loader: async (): Promise
=> {
- const customTextPreference = await Preferences.get({ key: "customText" });
-
- return {
- customText: customTextPreference.value || ""
- };
- },
- // Disable caching to ensure fresh preference is always read
- staleTime: 0,
- gcTime: 0,
component: CustomText
});
function CustomText() {
- const loaderData = Route.useLoaderData();
- const [customText, setCustomText] = useState(loaderData.customText);
+ const { customText, setCustomText } = usePreferencesStore(
+ useShallow(selectCustomText)
+ );
const nfcWriter = useNfcWriter();
const [writeOpen, setWriteOpen] = useState(false);
const closeWriteModal = async () => {
@@ -45,13 +33,6 @@ function CustomText() {
}
}, [nfcWriter]);
- useEffect(() => {
- const savePreference = async () => {
- await Preferences.set({ key: "customText", value: customText });
- };
- savePreference();
- }, [customText]);
-
const navigate = useNavigate();
const swipeHandlers = useSmartSwipe({
onSwipeRight: () => navigate({ to: "/create" }),
diff --git a/src/routes/create.index.tsx b/src/routes/create.index.tsx
index 27b638e2..ec822cb2 100644
--- a/src/routes/create.index.tsx
+++ b/src/routes/create.index.tsx
@@ -2,7 +2,6 @@ import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Capacitor } from "@capacitor/core";
-import { Nfc } from "@capawesome-team/capacitor-nfc";
import { ListPlusIcon, NfcIcon } from "lucide-react";
import { NextIcon, PlayIcon, SearchIcon, TextIcon } from "../lib/images";
import { useStatusStore } from "../lib/store";
@@ -11,6 +10,7 @@ import { Card } from "../components/wui/Card";
import { Button } from "../components/wui/Button";
import { WriteModal } from "../components/WriteModal";
import { PageFrame } from "../components/PageFrame";
+import { usePreferencesStore } from "../lib/preferencesStore";
export const Route = createFileRoute("/create/")({
component: Create
@@ -19,8 +19,7 @@ export const Route = createFileRoute("/create/")({
function Create() {
const connected = useStatusStore((state) => state.connected);
const playing = useStatusStore((state) => state.playing);
-
- const [nfcAvailable, setNfcAvailable] = useState(false);
+ const nfcAvailable = usePreferencesStore((state) => state.nfcAvailable);
const nfcWriter = useNfcWriter();
const [writeOpen, setWriteOpen] = useState(false);
const closeWriteModal = async () => {
@@ -36,29 +35,11 @@ function Create() {
}
}, [nfcWriter]);
- useEffect(() => {
- const checkNfcAvailability = async () => {
- if (Capacitor.isNativePlatform()) {
- try {
- const result = await Nfc.isAvailable();
- setNfcAvailable(result.nfc);
- } catch (error) {
- console.log("NFC availability check failed:", error);
- setNfcAvailable(false);
- }
- } else {
- setNfcAvailable(false);
- }
- };
-
- checkNfcAvailability();
- }, []);
-
return (
<>
-
+
} />
@@ -104,7 +85,7 @@ function Create() {
-
} />
+
} disabled={!connected} />
{t("create.mappingsHeading")}
@@ -131,10 +112,16 @@ function Create() {
-
+
-
} />
+
}
+ disabled={!Capacitor.isNativePlatform() || !nfcAvailable}
+ />
{t("create.nfcHeading")}
diff --git a/src/routes/create.search.tsx b/src/routes/create.search.tsx
index 42f8c1a4..9c5eb182 100644
--- a/src/routes/create.search.tsx
+++ b/src/routes/create.search.tsx
@@ -1,33 +1,61 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useMutation } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
import { Preferences } from "@capacitor/preferences";
-import { SearchResults } from "@/components/SearchResults.tsx";
+import classNames from "classnames";
+import { Folder, FileCode, Tag } from "lucide-react";
+import { VirtualSearchResults } from "@/components/VirtualSearchResults.tsx";
import { CopyButton } from "@/components/CopyButton.tsx";
import { BackToTop } from "@/components/BackToTop.tsx";
+import { TagBadge } from "@/components/TagBadge.tsx";
import { CoreAPI } from "../lib/coreApi.ts";
-import { CreateIcon, PlayIcon, SearchIcon } from "../lib/images";
+import {
+ CreateIcon,
+ PlayIcon,
+ SearchIcon,
+ HistoryIcon,
+ DeviceIcon
+} from "../lib/images";
import { useNfcWriter, WriteAction } from "../lib/writeNfcHook";
import { SearchResultGame, SystemsResponse } from "../lib/models";
import { SlideModal } from "../components/SlideModal";
import { Button } from "../components/wui/Button";
+import { HeaderButton } from "../components/wui/HeaderButton";
import { useSmartSwipe } from "../hooks/useSmartSwipe";
import { useStatusStore } from "../lib/store";
import { TextInput } from "../components/wui/TextInput";
import { WriteModal } from "../components/WriteModal";
import { PageFrame } from "../components/PageFrame";
-
+import {
+ SystemSelector,
+ SystemSelectorTrigger
+} from "../components/SystemSelector";
+import { TagSelector, TagSelectorTrigger } from "../components/TagSelector";
+import { useRecentSearches } from "../hooks/useRecentSearches";
+import { RecentSearchesModal } from "../components/RecentSearchesModal";
export const Route = createFileRoute("/create/search")({
loader: async (): Promise => {
- const [systemPreference, systemsResponse] = await Promise.all([
- Preferences.get({ key: "searchSystem" }),
- CoreAPI.systems()
- ]);
+ const [systemPreference, tagPreference, systemsResponse] =
+ await Promise.all([
+ Preferences.get({ key: "searchSystem" }),
+ Preferences.get({ key: "searchTags" }),
+ CoreAPI.systems()
+ ]);
+
+ let savedTags: string[] = [];
+ try {
+ if (tagPreference.value) {
+ savedTags = JSON.parse(tagPreference.value);
+ }
+ } catch (e) {
+ console.warn("Failed to parse saved tags preference:", e);
+ }
return {
systemQuery: systemPreference.value || "all",
+ tagQuery: savedTags,
systems: systemsResponse
};
},
@@ -39,14 +67,10 @@ export const Route = createFileRoute("/create/search")({
interface LoaderData {
systemQuery: string;
+ tagQuery: string[];
systems: SystemsResponse;
}
-interface SearchParams {
- query: string;
- system: string;
-}
-
function Search() {
const loaderData = Route.useLoaderData();
const gamesIndex = useStatusStore((state) => state.gamesIndex);
@@ -54,22 +78,58 @@ function Search() {
const connected = useStatusStore((state) => state.connected);
const [querySystem, setQuerySystem] = useState(loaderData.systemQuery);
+ const [queryTags, setQueryTags] = useState(loaderData.tagQuery);
const [query, setQuery] = useState("");
+ const [systemSelectorOpen, setSystemSelectorOpen] = useState(false);
+ const [tagSelectorOpen, setTagSelectorOpen] = useState(false);
+ const [recentSearchesOpen, setRecentSearchesOpen] = useState(false);
+
+ // State for tracking actual searched parameters and results
+ const [searchParams, setSearchParams] = useState<{
+ query: string;
+ system: string;
+ tags: string[];
+ } | null>(null);
+ const [isSearching, setIsSearching] = useState(false);
const scrollContainerRef = useRef(null);
- const search = useMutation({
- mutationFn: (sp: SearchParams) =>
- CoreAPI.mediaSearch({
- query: sp.query,
- systems: sp.system == "all" ? [] : [sp.system]
- })
- });
+ // Recent searches hook
+ const {
+ recentSearches,
+ addRecentSearch,
+ clearRecentSearches,
+ getSearchDisplayText
+ } = useRecentSearches();
+
+ // Manual search function
+ const performSearch = async () => {
+ if (!connected || !gamesIndex.exists || gamesIndex.indexing) {
+ return;
+ }
+ setIsSearching(true);
+ setSearchParams({
+ query: query,
+ system: querySystem,
+ tags: queryTags
+ });
+
+ // Add to recent searches
+ await addRecentSearch({
+ query: query,
+ system: querySystem,
+ tags: queryTags
+ });
+ };
const [selectedResult, setSelectedResult] = useState(
null
);
+ const [writeMode, setWriteMode] = useState<"path" | "zapScript">("zapScript");
+
+ // Check if search has valid parameters
+ const canSearch = connected && gamesIndex.exists && !gamesIndex.indexing;
const nfcWriter = useNfcWriter();
const [writeOpen, setWriteOpen] = useState(false);
@@ -92,12 +152,83 @@ function Search() {
});
}, [setGamesIndex]);
+ // Set default write mode when selected result changes
+ useEffect(() => {
+ if (selectedResult) {
+ setWriteMode(selectedResult.zapScript ? "zapScript" : "path");
+ }
+ }, [selectedResult]);
+
+ // Check if tags API is available for backwards compatibility
+ const { isError: tagsApiError } = useQuery({
+ queryKey: ["tagsAvailable"],
+ queryFn: () => CoreAPI.mediaTags([]),
+ retry: false,
+ staleTime: 60000, // Cache for 1 minute
+ enabled: connected // Only check when connected
+ });
+
const navigate = useNavigate();
const swipeHandlers = useSmartSwipe({
onSwipeRight: () => navigate({ to: "/create" }),
preventScrollOnSwipe: false
});
+ // Handle system selection from selector
+ const handleSystemSelect = async (systems: string[]) => {
+ const selectedSystem = systems.length === 1 ? systems[0] : "all";
+ setQuerySystem(selectedSystem);
+ setSelectedResult(null);
+ await Preferences.set({ key: "searchSystem", value: selectedSystem });
+ };
+
+ // Handle tag selection from selector
+ const handleTagSelect = async (tags: string[]) => {
+ setQueryTags(tags);
+ setSelectedResult(null);
+ await Preferences.set({ key: "searchTags", value: JSON.stringify(tags) });
+ };
+
+ // Clear all filters (system and tags) but keep search query
+ const handleClearFilters = async () => {
+ setQuerySystem("all");
+ setQueryTags([]);
+ setSelectedResult(null);
+ await Promise.all([
+ Preferences.set({ key: "searchSystem", value: "all" }),
+ Preferences.set({ key: "searchTags", value: JSON.stringify([]) })
+ ]);
+ };
+
+ // Handle selecting a recent search to prefill the form and execute search
+ const handleRecentSearchSelect = async (
+ recentSearch: (typeof recentSearches)[0]
+ ) => {
+ setQuery(recentSearch.query);
+ setQuerySystem(recentSearch.system);
+ setQueryTags(recentSearch.tags);
+ setSelectedResult(null);
+
+ // Save preferences to match the selected search
+ await Promise.all([
+ Preferences.set({ key: "searchSystem", value: recentSearch.system }),
+ Preferences.set({
+ key: "searchTags",
+ value: JSON.stringify(recentSearch.tags)
+ })
+ ]);
+
+ // Automatically execute the search
+ if (connected && gamesIndex.exists && !gamesIndex.indexing) {
+ setIsSearching(true);
+ setSearchParams({
+ query: recentSearch.query,
+ system: recentSearch.system,
+ tags: recentSearch.tags
+ });
+ }
+ };
+
return (
<>
navigate({ to: "/create" })}
scrollRef={scrollContainerRef}
+ headerRight={
+ setRecentSearchesOpen(true)}
+ disabled={recentSearches.length === 0}
+ active={recentSearchesOpen}
+ icon={}
+ title={t("create.search.recentSearches")}
+ aria-label={t("create.search.recentSearches")}
+ />
+ }
>
+
setQuery(v)}
type="search"
+ clearable={true}
disabled={!connected || !gamesIndex.exists || gamesIndex.indexing}
onKeyUp={(e) => {
if (e.key === "Enter" || e.keyCode === 13) {
e.currentTarget.blur();
- if (!(!connected || !gamesIndex.exists || gamesIndex.indexing || (query === "" && querySystem === "all"))) {
- search.mutate({
- query: query,
- system: querySystem
- });
+ if (canSearch) {
+ performSearch();
}
}
}}
/>
-
-
-
+
+
+
+ setSystemSelectorOpen(true)}
+ className={classNames({
+ "opacity-50":
+ !connected || !gamesIndex.exists || gamesIndex.indexing
+ })}
+ />
+
-
}
- disabled={!connected || !gamesIndex.exists || gamesIndex.indexing || (query === "" && querySystem === "all")}
- onClick={() => {
- console.log(query, querySystem);
- search.mutate({
- query: query,
- system: querySystem
- });
- }}
- />
+
+
+ setTagSelectorOpen(true)}
+ disabled={tagsApiError}
+ className={classNames({
+ "opacity-50":
+ !connected || !gamesIndex.exists || gamesIndex.indexing
+ })}
+ />
+
-
}
+ onClick={performSearch}
+ disabled={!canSearch || isSearching}
+ className="w-full"
/>
-
+
-
- {t("create.search.systemLabel")} {selectedResult?.system.name}
-
-
- {t("create.search.pathLabel")} {selectedResult?.path}{" "}
- {selectedResult?.path !== "" && (
-
+
+ {/* Primary Info */}
+
+
+
+
+
+ {t("create.search.systemLabel")}
+
+
+
+ {selectedResult?.system.name}
+
+
+ {selectedResult?.tags && selectedResult.tags.length > 0 && (
+
+
+
+
+ {t("create.search.tagsLabel")}
+
+
+
+ {selectedResult.tags.map((tag, tagIndex) => (
+
+ ))}
+
+
)}
-
-
+
+
+ {/* Technical Details - Selectable Options */}
+
+
+ {/* Actions */}
+
}
disabled={!selectedResult}
onClick={() => {
if (selectedResult) {
- nfcWriter.write(WriteAction.Write, selectedResult.path);
+ const textToWrite =
+ writeMode === "zapScript" && selectedResult.zapScript
+ ? selectedResult.zapScript
+ : selectedResult.path;
+ nfcWriter.write(WriteAction.Write, textToWrite);
setWriteOpen(true);
}
}}
@@ -208,9 +513,13 @@ function Search() {
disabled={!selectedResult || !connected}
onClick={() => {
if (selectedResult) {
+ const textToRun =
+ writeMode === "zapScript" && selectedResult.zapScript
+ ? selectedResult.zapScript
+ : selectedResult.path;
CoreAPI.run({
uid: "",
- text: selectedResult.path
+ text: textToRun
});
}
}}
@@ -218,11 +527,34 @@ function Search() {
-
+
+
setSystemSelectorOpen(false)}
+ onSelect={handleSystemSelect}
+ selectedSystems={querySystem === "all" ? [] : [querySystem]}
+ mode="single"
+ title={t("create.search.selectSystem")}
+ includeAllOption={false}
+ defaultSelection="all"
+ />
+ setTagSelectorOpen(false)}
+ onSelect={handleTagSelect}
+ selectedTags={queryTags}
+ systems={querySystem === "all" ? [] : [querySystem]}
+ title={t("create.search.selectTags")}
+ />
+ setRecentSearchesOpen(false)}
+ recentSearches={recentSearches}
+ onSearchSelect={handleRecentSearchSelect}
+ onClearHistory={clearRecentSearches}
+ getSearchDisplayText={getSearchDisplayText}
+ />
);
}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index fe8f4e2f..3a49abcf 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,14 +2,11 @@ import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { KeepAwake } from "@capacitor-community/keep-awake";
-import { Preferences } from "@capacitor/preferences";
import { useNfcWriter, WriteMethod } from "@/lib/writeNfcHook.tsx";
import { Status } from "@/lib/nfc.ts";
import { useProPurchase } from "@/components/ProPurchase.tsx";
import { WriteModal } from "@/components/WriteModal.tsx";
-import { useWriteQueueProcessor } from "@/hooks/useWriteQueueProcessor.tsx";
-import { useRunQueueProcessor } from "@/hooks/useRunQueueProcessor.tsx";
-import logoImage from "@/assets/lockup.png";
+import logoImage from "@/assets/lockup.webp";
import { cancelSession } from "../lib/nfc";
import { CoreAPI } from "../lib/coreApi.ts";
import { HistoryIcon } from "../lib/images";
@@ -23,30 +20,27 @@ import { NowPlayingInfo } from "../components/home/NowPlayingInfo";
import { HistoryModal } from "../components/home/HistoryModal";
import { StopConfirmModal } from "../components/home/StopConfirmModal";
import { useScanOperations } from "../hooks/useScanOperations";
-import { useAppSettings } from "../hooks/useAppSettings";
+import { usePreferencesStore } from "../lib/preferencesStore";
interface LoaderData {
restartScan: boolean;
launchOnScan: boolean;
launcherAccess: boolean;
preferRemoteWriter: boolean;
+ shakeMode: "random" | "custom";
+ shakeZapscript: string;
}
export const Route = createFileRoute("/")({
- loader: async (): Promise => {
- const [restartResult, launchResult, accessResult, remoteWriterResult] =
- await Promise.all([
- Preferences.get({ key: "restartScan" }),
- Preferences.get({ key: "launchOnScan" }),
- Preferences.get({ key: "launcherAccess" }),
- Preferences.get({ key: "preferRemoteWriter" })
- ]);
-
+ loader: (): LoaderData => {
+ const state = usePreferencesStore.getState();
return {
- restartScan: restartResult.value === "true",
- launchOnScan: launchResult.value !== "false",
- launcherAccess: accessResult.value === "true",
- preferRemoteWriter: remoteWriterResult.value === "true"
+ restartScan: state.restartScan,
+ launchOnScan: state.launchOnScan,
+ launcherAccess: state.launcherAccess,
+ preferRemoteWriter: state.preferRemoteWriter,
+ shakeMode: state.shakeMode,
+ shakeZapscript: state.shakeZapscript
};
},
ssr: false,
@@ -55,26 +49,31 @@ export const Route = createFileRoute("/")({
function Index() {
const initData = Route.useLoaderData();
-
- const { launcherAccess, preferRemoteWriter } = useAppSettings({ initData });
+ const launcherAccess = usePreferencesStore((state) => state.launcherAccess);
+ const preferRemoteWriter = usePreferencesStore(
+ (state) => state.preferRemoteWriter
+ );
const nfcWriter = useNfcWriter(WriteMethod.Auto, preferRemoteWriter);
- const [writeOpen, setWriteOpen] = useState(false);
+ const writeOpen = useStatusStore((state) => state.writeOpen);
+ const setWriteOpen = useStatusStore((state) => state.setWriteOpen);
+ const setWriteQueue = useStatusStore((state) => state.setWriteQueue);
const closeWriteModal = async () => {
setWriteOpen(false);
await nfcWriter.end();
- resetWriteQueue();
+ setWriteQueue("");
};
useEffect(() => {
// Only auto-close on successful write completion
if (nfcWriter.status === Status.Success) {
setWriteOpen(false);
}
- }, [nfcWriter.status]);
+ }, [nfcWriter.status, setWriteOpen]);
const { PurchaseModal, proPurchaseModalOpen, setProPurchaseModalOpen } =
useProPurchase(initData.launcherAccess);
const connected = useStatusStore((state) => state.connected);
+ const connectionState = useStatusStore((state) => state.connectionState);
const playing = useStatusStore((state) => state.playing);
const lastToken = useStatusStore((state) => state.lastToken);
const setLastToken = useStatusStore((state) => state.setLastToken);
@@ -87,8 +86,7 @@ function Index() {
scanStatus,
handleScanButton,
handleCameraScan,
- handleStopConfirm,
- runToken
+ handleStopConfirm
} = useScanOperations({
connected,
launcherAccess,
@@ -97,18 +95,6 @@ function Index() {
setWriteOpen
});
- useRunQueueProcessor({
- launcherAccess,
- setLastToken,
- setProPurchaseModalOpen,
- runToken
- });
-
- const { reset: resetWriteQueue } = useWriteQueueProcessor({
- nfcWriter,
- setWriteOpen
- });
-
const history = useQuery({
queryKey: ["history"],
queryFn: () => CoreAPI.history(),
@@ -167,7 +153,7 @@ function Index() {
/>
-
+
diff --git a/src/routes/settings.advanced.tsx b/src/routes/settings.advanced.tsx
deleted file mode 100644
index 2b45a2ee..00000000
--- a/src/routes/settings.advanced.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import { Capacitor } from "@capacitor/core";
-import { useEffect, useState } from "react";
-import { Nfc } from "@capawesome-team/capacitor-nfc";
-import { Preferences } from "@capacitor/preferences";
-import classNames from "classnames";
-import { CoreAPI } from "../lib/coreApi.ts";
-import { ToggleSwitch } from "../components/wui/ToggleSwitch";
-import { useSmartSwipe } from "../hooks/useSmartSwipe";
-import { useStatusStore } from "../lib/store";
-import { PageFrame } from "../components/PageFrame";
-import { UpdateSettingsRequest } from "../lib/models.ts";
-import { useAppSettings } from "../hooks/useAppSettings";
-import { BackIcon, CheckIcon } from "../lib/images";
-
-interface LoaderData {
- restartScan: boolean;
- launchOnScan: boolean;
- launcherAccess: boolean;
- preferRemoteWriter: boolean;
-}
-
-export const Route = createFileRoute("/settings/advanced")({
- loader: async (): Promise
=> {
- const [restartResult, launchResult, accessResult, remoteWriterResult] =
- await Promise.all([
- Preferences.get({ key: "restartScan" }),
- Preferences.get({ key: "launchOnScan" }),
- Preferences.get({ key: "launcherAccess" }),
- Preferences.get({ key: "preferRemoteWriter" }),
- ]);
-
- return {
- restartScan: restartResult.value === "true",
- launchOnScan: launchResult.value !== "false",
- launcherAccess: accessResult.value === "true",
- preferRemoteWriter: remoteWriterResult.value === "true",
- };
- },
- component: Advanced
-});
-
-function Advanced() {
- const initData = Route.useLoaderData();
- const connected = useStatusStore((state) => state.connected);
- const [hasLocalNFC, setHasLocalNFC] = useState(false);
-
- const { preferRemoteWriter, setPreferRemoteWriter } = useAppSettings({ initData });
-
- useEffect(() => {
- // Check if local NFC is available on native platforms
- if (Capacitor.isNativePlatform()) {
- Nfc.isAvailable()
- .then((result) => setHasLocalNFC(result.nfc))
- .catch(() => setHasLocalNFC(false));
- }
- }, []);
-
- const { data, refetch } = useQuery({
- queryKey: ["settings"],
- queryFn: () => CoreAPI.settings()
- });
-
- const update = useMutation({
- mutationFn: (params: UpdateSettingsRequest) =>
- CoreAPI.settingsUpdate(params),
- onSuccess: () => refetch()
- });
-
- const { t } = useTranslation();
-
- const navigate = useNavigate();
- const swipeHandlers = useSmartSwipe({
- onSwipeRight: () => navigate({ to: "/settings" }),
- preventScrollOnSwipe: false
- });
-
- return (
- navigate({ to: "/settings" })} className="cursor-pointer">
-
-
- }
- headerCenter={
- {t("settings.advanced.title")}
- }
- >
-
- update.mutate({ audioScanFeedback: v })}
- disabled={!connected}
- />
-
-
-
- update.mutate({ readersAutoDetect: v })}
- disabled={!connected}
- />
-
-
-
- update.mutate({ debugLogging: v })}
- disabled={!connected}
- />
-
-
- {Capacitor.isNativePlatform() && hasLocalNFC && (
-
-
-
- )}
-
-
-
{t("settings.modeLabel")}
-
-
-
-
- {data?.readersScanMode === "hold" && connected && (
-
{t("settings.insertHelp")}
- )}
-
*/}
- {/* */}
- {/* update.mutate({ readersScanIgnoreSystems: v.split(",") })*/}
- {/* }*/}
- {/* disabled={!connected}*/}
- {/* />*/}
- {/*
*/}
-
- );
-}
diff --git a/src/routes/settings.app.tsx b/src/routes/settings.app.tsx
new file mode 100644
index 00000000..82cfa2b0
--- /dev/null
+++ b/src/routes/settings.app.tsx
@@ -0,0 +1,284 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Capacitor } from "@capacitor/core";
+import { useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import classNames from "classnames";
+import { ToggleSwitch } from "../components/wui/ToggleSwitch";
+import { useSmartSwipe } from "../hooks/useSmartSwipe";
+import { useStatusStore } from "../lib/store";
+import { PageFrame } from "../components/PageFrame";
+import {
+ usePreferencesStore,
+ selectAppSettings,
+ selectShakeSettings
+} from "../lib/preferencesStore";
+import { BackIcon, CheckIcon } from "../lib/images";
+import { ScanSettings } from "../components/home/ScanSettings.tsx";
+import { SystemSelector } from "../components/SystemSelector";
+import { Button } from "../components/wui/Button";
+import { useProPurchase } from "../components/ProPurchase";
+import { ZapScriptInput } from "../components/ZapScriptInput";
+
+interface LoaderData {
+ restartScan: boolean;
+ launchOnScan: boolean;
+ launcherAccess: boolean;
+ preferRemoteWriter: boolean;
+ shakeEnabled: boolean;
+ shakeMode: "random" | "custom";
+ shakeZapscript: string;
+}
+
+export const Route = createFileRoute("/settings/app")({
+ loader: (): LoaderData => {
+ const state = usePreferencesStore.getState();
+ return {
+ restartScan: state.restartScan,
+ launchOnScan: state.launchOnScan,
+ launcherAccess: state.launcherAccess,
+ preferRemoteWriter: state.preferRemoteWriter,
+ shakeEnabled: state.shakeEnabled,
+ shakeMode: state.shakeMode,
+ shakeZapscript: state.shakeZapscript
+ };
+ },
+ component: AppSettings
+});
+
+function AppSettings() {
+ const initData = Route.useLoaderData();
+ const connected = useStatusStore((state) => state.connected);
+ const [systemPickerOpen, setSystemPickerOpen] = useState(false);
+ const nfcAvailable = usePreferencesStore((state) => state.nfcAvailable);
+ const accelerometerAvailable = usePreferencesStore((state) => state.accelerometerAvailable);
+
+ // Get app settings from store (useShallow prevents infinite re-renders)
+ const {
+ restartScan,
+ launchOnScan,
+ launcherAccess,
+ preferRemoteWriter,
+ setRestartScan,
+ setLaunchOnScan,
+ setPreferRemoteWriter
+ } = usePreferencesStore(useShallow(selectAppSettings));
+
+ // Get shake settings from store (useShallow prevents infinite re-renders)
+ const {
+ shakeEnabled,
+ shakeMode,
+ shakeZapscript,
+ setShakeEnabled,
+ setShakeMode,
+ setShakeZapscript
+ } = usePreferencesStore(useShallow(selectShakeSettings));
+
+ // Extract system name from zapscript for display
+ const getSystemFromZapscript = () => {
+ if (
+ shakeMode === "random" &&
+ shakeZapscript.startsWith("**launch.random:")
+ ) {
+ return shakeZapscript.replace("**launch.random:", "");
+ }
+ return "";
+ };
+
+ const shakeSystem = getSystemFromZapscript();
+
+ const { PurchaseModal, setProPurchaseModalOpen } = useProPurchase(
+ initData.launcherAccess
+ );
+
+ const { t } = useTranslation();
+
+ const navigate = useNavigate();
+ const swipeHandlers = useSmartSwipe({
+ onSwipeRight: () => navigate({ to: "/settings" }),
+ preventScrollOnSwipe: false
+ });
+
+ return (
+ navigate({ to: "/settings" })}
+ className="cursor-pointer"
+ >
+
+
+ }
+ headerCenter={
+ {t("settings.app.title")}
+ }
+ >
+
+
+
+ {Capacitor.isNativePlatform() && nfcAvailable && (
+
+ )}
+
+ {Capacitor.isNativePlatform() && accelerometerAvailable && (
+
+ {t("settings.app.shakeToLaunch")}
+ {!launcherAccess && (
+
+ {" "}
+ ({t("settings.app.proFeature")})
+
+ )}
+
+ }
+ value={shakeEnabled}
+ setValue={setShakeEnabled}
+ disabled={!launcherAccess || !connected}
+ onDisabledClick={() => {
+ if (!launcherAccess) {
+ setProPurchaseModalOpen(true);
+ }
+ }}
+ />
+ )}
+
+ {Capacitor.isNativePlatform() && accelerometerAvailable && shakeEnabled && launcherAccess && (
+ <>
+
+
+
+
+
+
+
+
+ {shakeSystem ? (
+
+ {shakeSystem === "all"
+ ? t("systemSelector.allSystems")
+ : shakeSystem}
+
+ ) : (
+ -
+ )}
+
+
+
+
+ )}
+
+ )}
+ {t("settings.core.title")}
+ }
+ >
+
+ update.mutate({ audioScanFeedback: v })}
+ disabled={!connected}
+ />
+
+
+
+ update.mutate({ readersAutoDetect: v })}
+ disabled={!connected}
+ />
+
+
+
+ update.mutate({ debugLogging: v })}
+ disabled={!connected}
+ />
+
+
+
+
{t("settings.modeLabel")}
+
+
+
+
+ {data?.readersScanMode === "hold" && connected && (
+
{t("settings.insertHelp")}
+ )}
+
*/}
+ {/* */}
+ {/* update.mutate({ readersScanIgnoreSystems: v.split(",") })*/}
+ {/* }*/}
+ {/* disabled={!connected}*/}
+ {/* />*/}
+ {/*
*/}
+
+ {/* Playtime Limits Section */}
+
+
+ );
+}
+
+function PlaytimeLimitsSection({ connected }: { connected: boolean }) {
+ const { t } = useTranslation();
+
+ // Local state for form inputs
+ const [dailyHours, setDailyHours] = useState("0");
+ const [dailyMinutes, setDailyMinutes] = useState("0");
+ const [sessionHours, setSessionHours] = useState("0");
+ const [sessionMinutes, setSessionMinutes] = useState("0");
+ const [resetMinutes, setResetMinutes] = useState("0");
+
+ // Debounce timers
+ const dailyTimeoutRef = useRef | undefined>(undefined);
+ const sessionTimeoutRef = useRef | undefined>(undefined);
+ const resetTimeoutRef = useRef | undefined>(undefined);
+
+ // Fetch playtime limits configuration
+ const { data: limitsConfig, refetch: refetchLimits } = useQuery({
+ queryKey: ["playtime", "limits"],
+ queryFn: () => CoreAPI.playtimeLimits(),
+ enabled: connected,
+ refetchInterval: false
+ });
+
+ // Fetch playtime status (for display)
+ const { data: playtimeStatus } = useQuery({
+ queryKey: ["playtime", "status"],
+ queryFn: () => CoreAPI.playtime(),
+ enabled: connected && limitsConfig?.enabled === true,
+ refetchInterval: limitsConfig?.enabled ? 30000 : false // Refresh every 30s when enabled
+ });
+
+ // Update mutation
+ const updateMutation = useMutation({
+ mutationFn: CoreAPI.playtimeLimitsUpdate.bind(CoreAPI),
+ onSuccess: () => {
+ refetchLimits();
+ }
+ });
+
+ // Initialize form values when data loads
+ useEffect(() => {
+ if (limitsConfig) {
+ const daily = parseDuration(limitsConfig.daily);
+ setDailyHours(String(daily.hours));
+ setDailyMinutes(String(daily.minutes));
+
+ const session = parseDuration(limitsConfig.session);
+ setSessionHours(String(session.hours));
+ setSessionMinutes(String(session.minutes));
+
+ const reset = parseDuration(limitsConfig.sessionReset);
+ setResetMinutes(String(reset.hours * 60 + reset.minutes));
+ }
+ }, [limitsConfig]);
+
+ // Auto-update daily limit when values change
+ useEffect(() => {
+ if (!limitsConfig) return;
+
+ if (dailyTimeoutRef.current) {
+ clearTimeout(dailyTimeoutRef.current);
+ }
+
+ dailyTimeoutRef.current = setTimeout(() => {
+ const daily = formatDuration({
+ hours: parseInt(dailyHours) || 0,
+ minutes: parseInt(dailyMinutes) || 0
+ });
+ updateMutation.mutate({ daily });
+ }, 500);
+
+ return () => {
+ if (dailyTimeoutRef.current) {
+ clearTimeout(dailyTimeoutRef.current);
+ }
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [dailyHours, dailyMinutes]);
+
+ // Auto-update session limit when values change
+ useEffect(() => {
+ if (!limitsConfig) return;
+
+ if (sessionTimeoutRef.current) {
+ clearTimeout(sessionTimeoutRef.current);
+ }
+
+ sessionTimeoutRef.current = setTimeout(() => {
+ const session = formatDuration({
+ hours: parseInt(sessionHours) || 0,
+ minutes: parseInt(sessionMinutes) || 0
+ });
+ updateMutation.mutate({ session });
+ }, 500);
+
+ return () => {
+ if (sessionTimeoutRef.current) {
+ clearTimeout(sessionTimeoutRef.current);
+ }
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [sessionHours, sessionMinutes]);
+
+ // Auto-update session reset when value changes
+ useEffect(() => {
+ if (!limitsConfig) return;
+
+ if (resetTimeoutRef.current) {
+ clearTimeout(resetTimeoutRef.current);
+ }
+
+ resetTimeoutRef.current = setTimeout(() => {
+ const resetMins = parseInt(resetMinutes) || 0;
+ const sessionReset = formatDuration({
+ hours: Math.floor(resetMins / 60),
+ minutes: resetMins % 60
+ });
+ updateMutation.mutate({ sessionReset });
+ }, 500);
+
+ return () => {
+ if (resetTimeoutRef.current) {
+ clearTimeout(resetTimeoutRef.current);
+ }
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [resetMinutes]);
+
+ if (!connected) {
+ return null;
+ }
+
+ const handleEnabledToggle = (enabled: boolean) => {
+ updateMutation.mutate({ enabled });
+ };
+
+ const getStateBadgeColor = (state: string) => {
+ switch (state) {
+ case "active":
+ return "bg-green-500/20 text-green-400";
+ case "cooldown":
+ return "bg-yellow-500/20 text-yellow-400";
+ case "reset":
+ default:
+ return "bg-gray-500/20 text-gray-400";
+ }
+ };
+
+ const getStateLabel = (state: string) => {
+ switch (state) {
+ case "active":
+ return t("settings.core.playtime.stateActive");
+ case "cooldown":
+ return t("settings.core.playtime.stateCooldown");
+ case "reset":
+ default:
+ return t("settings.core.playtime.stateReset");
+ }
+ };
+
+ return (
+
+
{t("settings.core.playtime.title")}
+
+
+
+ {limitsConfig?.enabled && (
+ <>
+ {/* Status Display */}
+ {playtimeStatus && (
+
+ {/* Session Status */}
+
+
+ {t("settings.core.playtime.currentSession")}
+
+ {getStateLabel(playtimeStatus.state)}
+
+
+
+ {t("settings.core.playtime.sessionDuration")}
+ {formatDurationDisplay(playtimeStatus.sessionDuration)}
+
+
+ {t("settings.core.playtime.sessionRemaining")}
+ {formatDurationDisplay(playtimeStatus.sessionRemaining)}
+
+ {playtimeStatus.cooldownRemaining && playtimeStatus.state === "cooldown" && (
+
+ {t("settings.core.playtime.cooldownRemaining")}
+ {formatDurationDisplay(playtimeStatus.cooldownRemaining)}
+
+ )}
+
+
+ {/* Daily Status */}
+
+
{t("settings.core.playtime.dailyUsage")}
+
+ {t("settings.core.playtime.dailyUsageToday")}
+ {formatDurationDisplay(playtimeStatus.dailyUsageToday)}
+
+
+ {t("settings.core.playtime.dailyRemaining")}
+ {formatDurationDisplay(playtimeStatus.dailyRemaining)}
+
+
+
+ )}
+
+ {/* Configuration Inputs */}
+
+ {/* Daily Limit */}
+
+
+
+
+
+
+
+
+ {/* Session Limit */}
+
+
+
+
+
+
+
+
+ {/* Session Reset Timeout */}
+
+
+
+
+ {t("settings.core.playtime.neverReset")}
+
+
+
+
+ )}
+
-
+
+ {
+ if (e.key === "Enter" && address !== getDeviceAddress()) {
+ handleDeviceAddressChange(address);
+ }
+ }}
+ />
+
-
+
{version.isSuccess && (
- <>
+
Platform: {version.data.platform}
Version: {version.data.version}
-
+
)}
{connectionError !== "" && (
-
{connectionError}
+
{connectionError}
)}
@@ -147,7 +130,10 @@ function Settings() {
{deviceHistory
.sort((a, b) => (a.address > b.address ? 1 : -1))
.map((entry) => (
-
+
{
@@ -173,14 +159,6 @@ function Settings() {
)}
-
-
@@ -254,9 +232,18 @@ function Settings() {
-
+ {Capacitor.isNativePlatform() && (
+
+
+
{t("settings.app.title")}
+
+
-
{t("settings.advanced.title")}
+
{t("settings.core.title")}
{t("settings.logs.title")}
@@ -186,30 +211,24 @@ function Logs() {
{logsQuery.data && (
<>
- }
title={t("settings.logs.copy")}
- >
-
-
-
+ }
title={t("settings.logs.download")}
- >
-
-
+ />
)}
-
+ />
}
scrollRef={scrollContainerRef}
@@ -228,20 +247,31 @@ function Logs() {
{/* Filters and Entry Count */}
-
- {Object.entries(levelFilters).map(([level, enabled]) => (
-
- ))}
+
+ setLevelFilters(prev => ({ ...prev, debug: state }))}
+ compact
+ />
+ setLevelFilters(prev => ({ ...prev, info: state }))}
+ compact
+ />
+ setLevelFilters(prev => ({ ...prev, warn: state }))}
+ compact
+ />
+ setLevelFilters(prev => ({ ...prev, error: state }))}
+ compact
+ />
{logsQuery.data && logEntries.length > 0 && (
@@ -288,16 +318,58 @@ function Logs() {
- {entry.message}
+ {entry.message && entry.message.length > MESSAGE_TRUNCATE_LENGTH ? (
+ <>
+ {expandedEntries.has(entry._index)
+ ? entry.message
+ : `${entry.message.slice(0, MESSAGE_TRUNCATE_LENGTH)}...`}
+
+
+ ) : (
+ entry.message
+ )}
{/* Additional fields */}
{Object.entries(entry).filter(([key]) =>
!['level', 'time', 'caller', 'message', '_index'].includes(key)
- ).map(([key, value]) => (
-
- {key}: {JSON.stringify(value)}
-
- ))}
+ ).map(([key, value]) => {
+ const fieldId = `${entry._index}_${key}`;
+ const valueStr = JSON.stringify(value);
+ const isExpanded = expandedFields.has(fieldId);
+ const needsTruncation = valueStr.length > MESSAGE_TRUNCATE_LENGTH;
+
+ return (
+
+ {key}:{" "}
+ {needsTruncation ? (
+ <>
+ {isExpanded
+ ? valueStr
+ : `${valueStr.slice(0, MESSAGE_TRUNCATE_LENGTH)}...`}
+
+
+ ) : (
+ valueStr
+ )}
+
+ );
+ })}
))}