// MA-Trip — running web app shell.
// Stack-based screen router + event-delegated [data-nav] navigation.
const {
HomeScreen, ItineraryScreen, MemoriesScreen, MemoryDetailScreen, AddMemoryScreen,
MapScreen, RemindersScreen, BudgetScreen, DocumentsScreen, PackingScreen, PlanningScreen,
SpotsScreen,
useStore, A,
} = window;
const TripStatsScreen = window.TripStatsScreen;
// Universal media renderer — handles "idb://..." refs, dataURLs, and remote URLs.
// Falls back to a soft skeleton while async-resolving IDB blobs.
function MediaImg({ src, alt = "", style, className, onClick, draggable, fallback }) {
const initial = (window.MaMedia && window.MaMedia.resolveSync)
? window.MaMedia.resolveSync(src) : (src || null);
const [resolved, setResolved] = React.useState(initial);
const [errored, setErrored] = React.useState(false);
React.useEffect(() => {
let alive = true;
setErrored(false);
if (!src) { setResolved(null); return; }
if (window.MaMedia && window.MaMedia.isRef && window.MaMedia.isRef(src)) {
const cached = window.MaMedia.resolveSync(src);
if (cached) { setResolved(cached); return; }
window.MaMedia.getURL(src).then(url => {
if (!alive) return;
if (url) setResolved(url);
else { setErrored(true); console.warn("[MediaImg] IDB ref missing:", src); }
}).catch(err => {
if (!alive) return;
setErrored(true);
console.warn("[MediaImg] IDB resolve failed:", src, err);
});
} else {
setResolved(src);
}
return () => { alive = false; };
}, [src]);
if (errored) {
return (
תמונה חסרה
);
}
if (!resolved) {
return (
{fallback || null}
);
}
return (
{
setErrored(true);
// Drop the bad blob URL from the global cache so future reads of the
// same ref don't keep returning a broken URL (and so it can be GC'd).
if (window.MaMedia && window.MaMedia.isRef && window.MaMedia.isRef(src)) {
const id = window.MaMedia.refToId(src);
const cache = window.MaMedia._urlCache;
if (id && cache && cache.has(id)) {
try { URL.revokeObjectURL(cache.get(id)); } catch (e) {}
cache.delete(id);
}
}
}} />
);
}
window.MediaImg = MediaImg;
function ColorSheet({ sheet }) {
const COLORS = window.COLORS || [];
return (
);
}
const ROUTES = {
home: HomeScreen,
plan: ItineraryScreen,
mem: MemoriesScreen,
memory: MemoryDetailScreen,
add: AddMemoryScreen,
planning: PlanningScreen,
map: MapScreen,
reminders: RemindersScreen,
budget: BudgetScreen,
docs: DocumentsScreen,
packing: PackingScreen,
spots: SpotsScreen,
stats: TripStatsScreen,
};
// Which tab to highlight for each route. null = no tab bar (e.g., modal-style screens).
const TAB_BY_ROUTE = {
home: { active: "home" },
plan: { active: "plan" },
mem: { active: "mem" },
budget: { active: "budget" },
planning: { active: "plan" },
map: { active: "plan" },
reminders: { active: "home" },
docs: { active: "home" },
packing: { active: "home" },
spots: { active: "plan" },
stats: { active: "home" },
memory: null,
add: null,
};
const SCREEN_TITLES = {
home: "בית",
plan: "מסלול",
mem: "זיכרונות",
memory: "זיכרון",
add: "זיכרון חדש",
planning: "תכנון",
map: "מפה",
reminders: "תזכורות",
budget: "תקציב",
docs: "מסמכים",
packing: "אריזה",
spots: "מקומות",
stats: "סיכום",
};
function App() {
const [stack, setStack] = React.useState(["home"]);
const current = stack[stack.length - 1];
const frameRef = React.useRef(null);
const screenWrapRef = React.useRef(null);
const prevDepthRef = React.useRef(1);
const [navDir, setNavDir] = React.useState("fwd");
const currentUserId = useStore(s => s.currentUserId);
const isFirstNavRef = React.useRef(true);
React.useEffect(() => {
if (frameRef.current) frameRef.current.scrollTop = 0;
// Skip the slide-in animation on the very first mount (otherwise Home
// gets a forward slide animation that feels like a "navigation" instead
// of the initial app paint).
if (isFirstNavRef.current) {
isFirstNavRef.current = false;
prevDepthRef.current = stack.length;
} else {
const depth = stack.length;
if (depth < prevDepthRef.current) setNavDir("back");
else setNavDir("fwd");
prevDepthRef.current = depth;
}
// Move focus to the new screen so screen-reader / keyboard users land
// in the new context instead of staying on the previous (now-hidden)
// element. tabIndex=-1 is set on the wrapper so .focus() works.
const rafId = requestAnimationFrame(() => {
const el = screenWrapRef.current;
if (el && typeof el.focus === "function") {
try { el.focus({ preventScroll: true }); } catch (_) { try { el.focus(); } catch (_) {} }
}
});
// Per-route document title so browser history / VoiceOver page-title
// announcements reflect the current screen.
const label = SCREEN_TITLES[current];
document.title = label ? `${label} — MA-Trip` : "MA-Trip";
return () => cancelAnimationFrame(rafId);
}, [current, stack.length]);
React.useEffect(() => {
// Surface any state-load error captured before A existed (see store.jsx loadState).
if (window.__maTripLoadError && A && A.showToast) {
A.showToast("שגיאה בטעינת הנתונים — חלק מהמידע אולי לא נטען", "error");
window.__maTripLoadError = null;
}
if (A && A.tryImportFromHash) setTimeout(() => A.tryImportFromHash(), 200);
// fetchRates now throws on network failure (so PTR can surface it).
// Boot path is fire-and-forget — swallow here.
if (A && A.fetchRates) A.fetchRates().catch(e => console.warn("[fetchRates boot]", e));
// Migrations chain: legacy dataURL → IDB blobs first, THEN encrypt any
// remaining plaintext. Sequencing prevents a race where the encrypt sweep
// snapshots IDB before legacy migration is done writing new plaintext records.
if (A && A.migrateLegacyMedia) {
setTimeout(async () => {
try { await A.migrateLegacyMedia(); }
catch (e) { console.warn("[MaMedia] legacy migration failed:", e); }
if (window.MaMedia && window.MaMedia.migrateUnencrypted) {
try { await window.MaMedia.migrateUnencrypted(); }
catch (e) { console.warn("[MaMedia] encrypt migration failed:", e); }
}
}, 600);
}
// Email-confirmation handler — when the user clicks the link in their
// signup email, they land at `/#confirm=`. Detect that,
// call the worker to mark the account active, then clear the hash + toast.
(async () => {
try {
const m = /^#?confirm=(.+)$/.exec(location.hash || "");
if (!m || !window.MaApi || !window.MaApi.confirmEmail) return;
const token = decodeURIComponent(m[1]);
try { history.replaceState(null, "", location.pathname + location.search); } catch (e) {}
const resp = await window.MaApi.confirmEmail(token);
if (resp && resp.ok) {
A.showToast("המייל אומת — אפשר להתחבר עם המייל והסיסמא", "info");
}
} catch (e) {
const map = {
"missing-token": "קישור אישור חסר",
"invalid-token": "קישור אישור לא תקין",
"token-already-used":"הקישור כבר נוצל — אפשר להתחבר",
"token-expired": "קישור פג תוקף — הירשמי שוב",
};
A.showToast(map[e.code] || ("אישור נכשל: " + (e.code || e.message)), "error");
}
})();
// Skip the boot me() call when auth is bypassed — guaranteed 401 for
// local-only users, wasted round-trip on every load.
const realAuth = !!(window.MA_REAL_AUTH);
if (window.MaApi && realAuth) {
window.MaApi.me().then(
(resp) => {
if (resp && resp.user) {
window.Store.set(s => ({
...s,
currentUserId: resp.user.id,
accounts: [
...(s.accounts || []).filter(a => a.id !== resp.user.id),
{ id: resp.user.id, name: resp.user.name, email: resp.user.email, color: resp.user.color, createdAt: Date.now() },
],
}));
}
},
(err) => {
if (err && err.status && err.status !== 401) {
console.warn("[MaApi] me() failed:", err);
}
},
);
}
}, []);
// A11y: promote every `data-nav` div to a focusable button-like element
// so VoiceOver/TalkBack/Tab nav can reach it. Re-runs on DOM mutations,
// debounced with requestAnimationFrame so typing in a sheet doesn't trigger
// a querySelectorAll per keystroke.
React.useEffect(() => {
if (!frameRef.current) return;
const frame = frameRef.current;
let scheduled = false;
const promote = () => {
scheduled = false;
frame.querySelectorAll("[data-nav]").forEach(el => {
const tag = el.tagName;
if (tag === "BUTTON" || tag === "A") return;
if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
if (!el.hasAttribute("role")) el.setAttribute("role", "button");
});
};
const schedule = () => {
if (scheduled) return;
scheduled = true;
requestAnimationFrame(promote);
};
promote();
const obs = new MutationObserver(schedule);
obs.observe(frame, { childList: true, subtree: true, attributeFilter: ["data-nav"] });
return () => obs.disconnect();
}, [currentUserId]);
// Pull-to-refresh: only triggers when scrollTop is 0 at touchstart AND the
// touch did NOT start on a horizontally-scrollable child (day strip, photo
// strip). Surface real success/failure instead of a constant success toast.
React.useEffect(() => {
if (!frameRef.current) return;
const frame = frameRef.current;
const indicator = document.createElement("div");
indicator.className = "ma-ptr-indicator";
indicator.setAttribute("aria-hidden", "true");
frame.appendChild(indicator);
let startY = null;
let startX = null;
let dragging = false;
let dy = 0;
const TRIGGER = 64;
const MAX = 110;
const H_TOLERANCE = 12; // px — if horizontal travel exceeds this, bail (horizontal scroll wins)
const isInsideHorizontalScroller = (target) => {
let el = target;
while (el && el !== frame) {
if (el.scrollWidth > el.clientWidth + 4) return true;
el = el.parentElement;
}
return false;
};
const resetIndicator = () => {
indicator.style.transition = "transform .25s ease, opacity .25s ease";
indicator.style.transform = "translateX(-50%) scaleY(0)";
indicator.style.opacity = "0";
indicator.classList.remove("ready");
setTimeout(() => { indicator.style.transition = ""; }, 280);
};
const onTouchStart = (e) => {
if (frame.scrollTop > 2) return;
if (isInsideHorizontalScroller(e.target)) return;
startY = e.touches[0].clientY;
startX = e.touches[0].clientX;
dragging = true;
dy = 0;
};
const onTouchMove = (e) => {
if (!dragging || startY == null) return;
const cy = e.touches[0].clientY;
const cx = e.touches[0].clientX;
const dx = Math.abs(cx - startX);
const raw = cy - startY;
// Cancel pull if horizontal travel exceeded tolerance — user is scrolling sideways.
if (dx > H_TOLERANCE && raw < dx) {
dragging = false; startY = null; dy = 0;
indicator.style.transform = "translateX(-50%) scaleY(0)";
indicator.style.opacity = "0";
indicator.classList.remove("ready");
return;
}
if (raw <= 0) { dy = 0; indicator.style.transform = "translateX(-50%) scaleY(0)"; indicator.style.opacity = "0"; return; }
dy = Math.min(MAX, raw * 0.55);
const ratio = Math.min(1, dy / TRIGGER);
indicator.style.transform = `translateX(-50%) scaleY(${ratio})`;
indicator.style.opacity = String(ratio);
indicator.classList.toggle("ready", dy >= TRIGGER);
};
const onTouchEnd = async () => {
if (!dragging) { resetIndicator(); return; }
const fired = dy >= TRIGGER;
dragging = false;
startY = null;
dy = 0;
resetIndicator();
if (!fired) return;
if (window._haptic) window._haptic("tap");
let okCount = 0, errCount = 0;
try { if (A && A.fetchRates) { await A.fetchRates(); okCount++; } } catch (e) { console.warn("[ptr] fetchRates:", e); errCount++; }
try { if (A && A.pullSync) { await A.pullSync(); okCount++; } } catch (e) { console.warn("[ptr] pullSync:", e); errCount++; }
if (A && A.showToast) {
if (errCount > 0 && okCount === 0) A.showToast("עדכון נכשל", "error");
else A.showToast("עודכן", "info");
}
};
frame.addEventListener("touchstart", onTouchStart, { passive: true });
frame.addEventListener("touchmove", onTouchMove, { passive: true });
frame.addEventListener("touchend", onTouchEnd, { passive: true });
frame.addEventListener("touchcancel", onTouchEnd, { passive: true });
return () => {
// Reset all drag state on cleanup so a re-mounted indicator doesn't
// inherit a stuck "ready" state from an in-flight drag.
dragging = false; startY = null; startX = null; dy = 0;
frame.removeEventListener("touchstart", onTouchStart);
frame.removeEventListener("touchmove", onTouchMove);
frame.removeEventListener("touchend", onTouchEnd);
frame.removeEventListener("touchcancel", onTouchEnd);
try { frame.removeChild(indicator); } catch (e) {}
};
// No real deps — `A`, `frameRef` are stable; rebinding on currentUserId
// change was thrashing the listeners.
}, []);
// Expose programmatic back navigation so non-React code (store actions)
// can pop the route after destructive mutations (e.g. deleteMemory while
// the user is on the memory detail screen) — was causing "stuck on the
// deleted item" feel because the route stack still pointed at memory.
React.useEffect(() => {
window._maNavBack = () => setStack(s => (s.length > 1 ? s.slice(0, -1) : s));
window._maNavTo = (id) => { if (ROUTES[id]) setStack([id]); };
return () => {
if (window._maNavBack) delete window._maNavBack;
if (window._maNavTo) delete window._maNavTo;
};
}, []);
// ─── Swipe-back gesture (iOS-native pattern) ────────────────────
// Left-edge touch + drag right within 500ms = pop stack. Disabled when
// a sheet is open or only one screen on the stack. Honors horizontal
// scrollers (day picker, spots row) by ignoring touches that started
// inside them — matches the PTR effect's behavior.
React.useEffect(() => {
const frame = frameRef.current;
if (!frame) return;
let sx = 0, sy = 0, st = 0, armed = false;
const isInsideHScroll = (target) => {
let el = target;
while (el && el !== frame) {
if (el.scrollWidth > el.clientWidth + 4) return true;
el = el.parentElement;
}
return false;
};
const sheetOpen = () => {
const s = window.Store && window.Store.state;
return !!(s && (s.actionSheet || s.editSheet || s.confirmSheet || s.spotMapPicker));
};
const onStart = (e) => {
if (sheetOpen()) { armed = false; return; }
const t = e.touches[0];
sx = t.clientX; sy = t.clientY; st = Date.now();
// Edge-arm: only fire on touches that started within 28px of the
// left edge so day-strip / horizontal lists keep their swipe.
armed = sx < 28 && !isInsideHScroll(e.target);
};
const onEnd = (e) => {
if (!armed) return;
armed = false;
const t = e.changedTouches[0];
const dx = t.clientX - sx;
const dy = Math.abs(t.clientY - sy);
const dt = Date.now() - st;
if (dx > 80 && dy < 60 && dt < 500) {
setStack(s => (s.length > 1 ? s.slice(0, -1) : s));
if (window._haptic) window._haptic("tap");
}
};
frame.addEventListener("touchstart", onStart, { passive: true });
frame.addEventListener("touchend", onEnd, { passive: true });
frame.addEventListener("touchcancel", () => { armed = false; }, { passive: true });
return () => {
frame.removeEventListener("touchstart", onStart);
frame.removeEventListener("touchend", onEnd);
};
}, []);
function onClick(e) {
const el = e.target.closest("[data-nav]");
if (!el) return;
const id = el.getAttribute("data-nav");
const replace = el.getAttribute("data-nav-replace") === "1";
if (id === "back") {
e.preventDefault();
if (window._haptic) window._haptic("tap");
setStack(s => {
if (s.length > 1) return s.slice(0, -1);
if (s[0] !== "home") return ["home"];
return s;
});
return;
}
if (!ROUTES[id]) return;
e.preventDefault();
if (window._haptic) window._haptic("tap");
if (replace) {
if (current !== id) setStack([id]);
// Tapping the active tab scrolls the current screen back to the top —
// iOS-native pattern, helps when the user is deep in a long list.
else if (frameRef.current && frameRef.current.scrollTop > 0) {
frameRef.current.scrollTo({ top: 0, behavior: "smooth" });
}
} else if (current !== id) {
setStack(s => [...s, id]);
}
}
// Keyboard activation for non-button [data-nav] elements.
// Enter/Space triggers the same click flow above.
function onKeyDown(e) {
if (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar") return;
const t = e.target;
const tag = t.tagName;
if (tag === "BUTTON" || tag === "A" || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
const el = t.closest("[data-nav]");
if (!el) return;
e.preventDefault();
el.click();
}
const Render = ROUTES[current] || HomeScreen;
const tabCfg = TAB_BY_ROUTE[current];
const TabBar = window.TabBar;
const seenOnboarding = useStore(s => s.seenOnboarding);
if (!currentUserId && window.AuthScreen) {
return (
);
}
// First-time experience — show OnboardingScreen until user dismisses or completes
// (it stores seenOnboarding=true on either Skip or "let's start" CTA).
if (!seenOnboarding && window.OnboardingScreen) {
return (
);
}
return (
{/* TabBar is HOISTED outside .ma-frame so the screen-transition animation
(transform + filter on .ma-screen-anim) can't drag it into a temporary
compositor layer on iOS Safari. Stays viewport-fixed and rock-stable
across all home↔plan↔mem↔budget swaps. */}
{tabCfg && TabBar && (