);
}
// Large, finger-friendly − / value / + control for picking an hour.
// Full-width split layout (NN/g): big −/+ targets pinned to the edges so they
// can never be clipped on narrow screens, with the label + value centered.
function HourStepper({ label, value, onDec, onInc, decDisabled, incDisabled }) {
const StepBtn = ({ onClick, disabled, children, side }) => (
);
return (
−
{label}{window.fmtHour(value)}
+
);
}
// Wochenplan
function SheetWochenplan({ open, onClose }) {
const t = window.t;
const [slots, setSlots] = React.useState(() => JSON.parse(JSON.stringify(window.WEEKLY.me)));
// moods: { [dow]: Set of moodIds } — multi-select, loaded from Firestore
const [moods, setMoods] = React.useState(() => {
const saved = window.__MY_MOODS;
if (saved && Object.keys(saved).length) {
// clone Sets so edits don't mutate the cached copy
return Object.fromEntries(Object.entries(saved).map(([k, v]) => [k, new Set(v)]));
}
return {};
});
const toggleMood = (dow, mood) => {
setMoods(prev => {
const cur = new Set(prev[dow] || []);
if (cur.has(mood)) cur.delete(mood); else cur.add(mood);
return { ...prev, [dow]: cur };
});
};
// Per-day group selection (multi-select) — only relevant with >1 group.
// Shape: { [dow]: Set }. Defaults to all of my groups for each day.
const myGroups = window.GROUPS.filter(g => g.memberIds.includes('me'));
const [dayGroups, setDayGroups] = React.useState(() => {
const saved = window.__MY_WEEKLY_GROUPS || {};
return Object.fromEntries(
Object.entries(saved).map(([k, v]) => [Number(k), new Set(v)])
);
});
const groupsForDay = (dow) =>
dayGroups[dow] || new Set(myGroups.map(g => g.id));
const toggleDayGroup = (dow, gid) => {
setDayGroups(prev => {
const next = new Set(prev[dow] || myGroups.map(g => g.id));
if (next.has(gid)) next.delete(gid); else next.add(gid);
return { ...prev, [dow]: next };
});
};
// Selectable hour span: 14:00 (2pm) … 27:00 (3am next day) = 13 one-hour steps.
const HOUR_MIN = 14;
const HOUR_MAX = 27;
const setFrom = (dow, val) => setSlots(prev => {
const cur = prev[dow];
if (!cur || cur.length !== 2) return prev;
const nf = Math.max(HOUR_MIN, Math.min(val, cur[1] - 1));
return { ...prev, [dow]: [nf, cur[1]] };
});
const setTo = (dow, val) => setSlots(prev => {
const cur = prev[dow];
if (!cur || cur.length !== 2) return prev;
const nt = Math.min(HOUR_MAX, Math.max(val, cur[0] + 1));
return { ...prev, [dow]: [cur[0], nt] };
});
const addSlot = (dow) => setSlots(prev => ({ ...prev, [dow]: [20, 23] }));
const clearSlot = (dow) => setSlots(prev => ({ ...prev, [dow]: [] }));
return (
{/* Who is backing the currently selected game. A member who both picked
AND voted for it shows up twice (once per contribution). */}
{voteGameId && (() => {
const backers = window.sessionGameBackers(session, voteGameId);
const game = window.GAMES_BY_ID[voteGameId];
return (