// Shared UI primitives + icons + date helpers.
// All Babel scripts share the global window namespace; expose at the bottom.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------- icons (sized for inline use) ---------- */
const Icon = ({ name, size = 16, stroke = 1.6, ...rest }) => {
const paths = {
back: ,
chev: ,
pin: <>,
clock: <>,
ruler: ,
plus: <>,
check: ,
x: <>,
q: <>,
home: ,
feed: <>,
user: <>,
edit: <>,
bike: <>,
map: <>,
lock: <>,
unlock: <>,
spark: ,
cal: <>,
more: <>,
share: <>,
settings: <>,
};
return (
);
};
/* ---------- status bar ---------- */
const StatusBar = () => (
9:41
);
/* ---------- avatar (color from username) ---------- */
const avatarPalette = ['#D97757','#6B8E5A','#B85C3C','#7A8FBC','#C98A2E','#A06B9E','#5C8E84','#A8755A'];
const colorFor = (name) => {
if (!name) return avatarPalette[0];
let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
return avatarPalette[h % avatarPalette.length];
};
const Avatar = ({ name, size = 22, className = '' }) => (
{(name || '?').slice(0,1).toUpperCase()}
);
/* ---------- date utilities ---------- */
const dayName = (iso) => {
const d = new Date(iso + 'T12:00:00');
return d.toLocaleDateString(undefined, { weekday: 'short' }).toUpperCase();
};
const longDate = (iso) => {
const d = new Date(iso + 'T12:00:00');
return d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' });
};
const shortDate = (iso) => {
const d = new Date(iso + 'T12:00:00');
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
};
const dateRangeLabel = (start, end) => {
if (!end || end === start) return longDate(start);
const a = new Date(start + 'T12:00:00');
const b = new Date(end + 'T12:00:00');
const sameMonth = a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
const aStr = a.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
const bStr = sameMonth
? b.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric' })
: b.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
return `${aStr} – ${bStr}`;
};
const dateRangeShort = (start, end) => {
if (!end || end === start) return shortDate(start);
const a = new Date(start + 'T12:00:00');
const b = new Date(end + 'T12:00:00');
const sameMonth = a.getMonth() === b.getMonth();
const aStr = a.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
const bStr = sameMonth
? String(b.getDate())
: b.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
return `${aStr}–${bStr}`;
};
// ---------- ride field accessors (with back-compat for old `date`/`endDate`/`mode`) ----------
const earliestOf = (r) => r.earliestDate || r.date || null;
const latestOf = (r) => r.latestDate || r.endDate || r.date || null;
const hasWindow = (r) => !!r.windowStart;
const isTour = (r) => !!(r.tourDays && r.tourDays > 1);
const isMultiDay = isTour;
const dateSpan = (r) => {
const a = earliestOf(r), b = latestOf(r);
if (!a || !b) return 0;
return Math.round((new Date(b+'T12:00:00') - new Date(a+'T12:00:00'))/86400000) + 1;
};
const isFlexDate = (r) => dateSpan(r) > 1;
// Slot-encoding key used in rsvps[].slots:
// - allday rides: "YYYY-MM-DD"
// - windowed, single-day range: "HH:MM"
// - windowed, multi-day range: "YYYY-MM-DD HH:MM"
const slotKey = (date, time, isFlex) => time == null ? date : (isFlex ? `${date} ${time}` : time);
// All dates (YYYY-MM-DD) between start and end inclusive.
const datesBetween = (start, end) => {
const out = [];
if (!start || !end) return out;
const a = new Date(start + 'T12:00:00');
const b = new Date(end + 'T12:00:00');
while (a <= b) {
out.push(a.toISOString().slice(0,10));
a.setDate(a.getDate() + 1);
}
return out;
};
const startOfDay = (d) => { const x = new Date(d); x.setHours(0,0,0,0); return x; };
const daysBetween = (a, b) => Math.round((startOfDay(b) - startOfDay(a)) / 86400000);
const groupRides = (rides) => {
const today = startOfDay(new Date());
const groups = { today: [], tomorrow: [], thisWeek: [], nextWeek: [], later: [], past: [] };
rides.forEach(r => {
// Group by the locked date if locked, otherwise by the earliest possible date.
const anchor = r.lockedDate || earliestOf(r);
if (!anchor) { groups.later.push(r); return; }
const d = new Date(anchor + 'T12:00:00');
const diff = daysBetween(today, d);
const latestAnchor = latestOf(r);
const latestDiff = latestAnchor ? daysBetween(today, new Date(latestAnchor + 'T12:00:00')) : diff;
if (latestDiff < 0) groups.past.push(r);
else if (diff <= 0 && latestDiff >= 0) groups.today.push(r);
else if (diff === 1) groups.tomorrow.push(r);
else if (diff <= 6) groups.thisWeek.push(r);
else if (diff <= 13) groups.nextWeek.push(r);
else groups.later.push(r);
});
return groups;
};
/* ---------- time helpers ---------- */
const fmtTime = (hhmm) => {
if (!hhmm) return '';
const [h, m] = hhmm.split(':').map(Number);
const period = h >= 12 ? 'pm' : 'am';
const h12 = ((h + 11) % 12) + 1;
return m === 0 ? `${h12}${period}` : `${h12}:${String(m).padStart(2,'0')}${period}`;
};
const fmtDuration = (min) => {
if (!min) return '';
const h = Math.floor(min / 60), m = min % 60;
if (h && m) return `${h}h ${m}m`;
if (h) return `${h}h`;
return `${m}m`;
};
const slotsBetween = (start, end, stepMin = 30) => {
if (!start || !end) return [];
const [sh, sm] = start.split(':').map(Number);
const [eh, em] = end.split(':').map(Number);
let cur = sh * 60 + sm;
const endMin = eh * 60 + em;
const out = [];
while (cur < endMin) {
out.push(`${String(Math.floor(cur/60)).padStart(2,'0')}:${String(cur%60).padStart(2,'0')}`);
cur += stepMin;
}
return out;
};
/* ---------- ride helpers ---------- */
const rsvpSummary = (ride) => {
const r = ride.rsvps || {};
const going = [], maybe = [], cant = [];
Object.entries(r).forEach(([u, v]) => {
if (v.state === 'going') going.push(u);
else if (v.state === 'maybe') maybe.push(u);
else if (v.state === 'cant') cant.push(u);
});
return { going, maybe, cant };
};
// Recommend best (date, time) for any ride. time is null for allday rides.
// Picks the contiguous N-slot/N-day window maximizing (going) + 0.5*(maybe).
const recommendStart = (ride) => {
const rs = ride.rsvps || {};
const earliest = earliestOf(ride), latest = latestOf(ride);
if (!earliest || !latest) return null;
const dates = datesBetween(earliest, latest);
const flex = isFlexDate(ride);
const tour = isTour(ride);
const window = hasWindow(ride);
// Tour: pick the best contiguous N-day block. Slots are dates.
if (tour) {
const needed = ride.tourDays;
if (dates.length < needed) return null;
let best = { date: dates[0], score: -1 };
for (let i = 0; i + needed <= dates.length; i++) {
const win = dates.slice(i, i + needed);
let score = 0;
Object.values(rs).forEach(({ state, slots: us }) => {
if (state === 'cant') return;
const set = new Set(us || []);
const hits = win.filter(d => set.has(d)).length;
const ratio = hits / needed;
if (ratio === 1) score += (state === 'going' ? 1 : 0.5);
else score += (state === 'going' ? ratio * 0.6 : ratio * 0.3);
});
if (score > best.score) best = { date: win[0], score };
}
return { date: best.date, time: null };
}
// Allday + single date: nothing to recommend, RSVP is the answer.
if (!window && !flex) return null;
// Allday + flex date: pick best single date. Slots are dates.
if (!window && flex) {
let best = { date: dates[0], score: -1 };
dates.forEach(d => {
let score = 0;
Object.values(rs).forEach(({ state, slots: us }) => {
if (state === 'cant') return;
if ((us || []).includes(d)) score += (state === 'going' ? 1 : 0.5);
});
if (score > best.score) best = { date: d, score };
});
return { date: best.date, time: null };
}
// Windowed cases: find best contiguous slot window of duration.
const slots = slotsBetween(ride.windowStart, ride.windowEnd, 30);
const needed = Math.ceil((ride.durationMin || 60) / 30);
if (slots.length < needed) return null;
// Windowed + single date: slots stored as "HH:MM".
if (!flex) {
const fixedDate = dates[0];
let best = { time: slots[0], score: -1 };
for (let i = 0; i + needed <= slots.length; i++) {
const win = slots.slice(i, i + needed);
let score = 0;
Object.values(rs).forEach(({ state, slots: us }) => {
if (state === 'cant') return;
// accept "HH:MM" or "DATE HH:MM" defensively
const set = new Set((us || []).map(x => x.includes(' ') ? x.split(' ')[1] : x));
const hits = win.filter(s => set.has(s)).length;
const ratio = hits / needed;
if (ratio === 1) score += (state === 'going' ? 1 : 0.5);
else score += (state === 'going' ? ratio * 0.6 : ratio * 0.3);
});
if (score > best.score) best = { time: win[0], score };
}
return { date: fixedDate, time: best.time };
}
// Windowed + flex date: best (date, slot-window) combo. Slots are "DATE HH:MM".
let best = { date: dates[0], time: slots[0], score: -1 };
dates.forEach(d => {
for (let i = 0; i + needed <= slots.length; i++) {
const win = slots.slice(i, i + needed);
let score = 0;
Object.values(rs).forEach(({ state, slots: us }) => {
if (state === 'cant') return;
const set = new Set(us || []);
const hits = win.filter(s => set.has(`${d} ${s}`)).length;
const ratio = hits / needed;
if (ratio === 1) score += (state === 'going' ? 1 : 0.5);
else score += (state === 'going' ? ratio * 0.6 : ratio * 0.3);
});
if (score > best.score) best = { date: d, time: win[0], score };
}
});
return { date: best.date, time: best.time };
};
// Per-slot availability score, only meaningful for single-day windowed rides.
const slotHeat = (ride) => {
if (!hasWindow(ride)) return [];
const slots = slotsBetween(ride.windowStart, ride.windowEnd, 30);
const rs = ride.rsvps || {};
return slots.map(s => {
let n = 0;
Object.values(rs).forEach(({ state, slots: us }) => {
if (state === 'cant') return;
const has = (us || []).some(x => (x.includes(' ') ? x.split(' ')[1] : x) === s);
if (has) n += (state === 'going' ? 1 : 0.5);
});
return { slot: s, score: n };
});
};
const routeVoteCounts = (ride) => {
const counts = {};
(ride.routes || []).forEach(r => { counts[r.id] = 0; });
Object.values(ride.routeVotes || {}).forEach(rid => {
if (counts[rid] != null) counts[rid] += 1;
});
return counts;
};
// Compact display of a ride's "when". Used by cards + headers.
const summarizeWhen = (ride) => {
const e = earliestOf(ride), l = latestOf(ride);
const flex = isFlexDate(ride);
const tour = isTour(ride);
const win = hasWindow(ride);
if (ride.status === 'locked') {
if (tour && ride.lockedDate) {
const end = new Date(ride.lockedDate + 'T12:00:00'); end.setDate(end.getDate() + ride.tourDays - 1);
return `${shortDate(ride.lockedDate)}–${shortDate(end.toISOString().slice(0,10))}`;
}
if (ride.lockedDate && ride.lockedStart) return `${shortDate(ride.lockedDate)} · ${fmtTime(ride.lockedStart)}`;
if (ride.lockedDate) return shortDate(ride.lockedDate);
if (ride.lockedStart) return fmtTime(ride.lockedStart);
return 'Confirmed';
}
if (tour) return `${ride.tourDays}d tour · ${dateRangeShort(e, l)} window`;
if (flex && win) return `${dateRangeShort(e, l)} · ${fmtTime(ride.windowStart)}–${fmtTime(ride.windowEnd)}`;
if (flex) return dateRangeShort(e, l);
if (win) return `${shortDate(e)} · ${fmtTime(ride.windowStart)}–${fmtTime(ride.windowEnd)}`;
return `${shortDate(e)} · all day`;
};
// Build a "Open in Maps" link from either an address string or a paste-in URL.
const mapsLinkFor = (q) => {
if (!q) return null;
if (/^https?:\/\//i.test(q)) return q;
return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(q)}`;
};
// Build an embeddable Maps URL. Returns null for share URLs (can't embed without key).
const mapsEmbedFor = (q, zoom = 14) => {
if (!q) return null;
if (/^https?:\/\//i.test(q)) return null;
return `https://www.google.com/maps?q=${encodeURIComponent(q)}&z=${zoom}&output=embed`;
};
const leadingRoute = (ride) => {
if (!ride.routes || ride.routes.length === 0) return null;
const counts = routeVoteCounts(ride);
let best = ride.routes[0], bestN = counts[best.id] || 0;
ride.routes.forEach(r => {
if ((counts[r.id] || 0) > bestN) { best = r; bestN = counts[r.id]; }
});
return bestN > 0 ? best : ride.routes[0];
};
// Export to window for sibling Babel scripts.
Object.assign(window, {
Icon, StatusBar, Avatar, colorFor,
dayName, longDate, shortDate, dateRangeLabel, dateRangeShort,
isMultiDay, isTour, hasWindow, isFlexDate, dateSpan, earliestOf, latestOf, slotKey,
datesBetween,
groupRides, daysBetween, startOfDay,
fmtTime, fmtDuration, slotsBetween,
rsvpSummary, recommendStart, slotHeat, summarizeWhen,
routeVoteCounts, leadingRoute, mapsLinkFor, mapsEmbedFor,
});