// Journal2.jsx — «bok»-utgaven av journalen (aktiv journal, nås via #/journal) // «Planlegger»-oppslag: venstresiden har bokmerke-faner («I dag» / «Siste // sider»), månedskalender, dagens trackere (logbook_trackers) og fullførte // oppgaver/rutiner (todo_tasks + routines/routine_entries). Høyresiden er // skrivesiden med håndskrevet datolinje i rød blekk. // Datohjelpere (jToKey, jFromKey, jSameDay, J_MONTH, J_DAY_FULL, // J_MOOD_EMOJIS, jt, getJLang, jGetTrackerIcon) er definert øverst i filen. const { useState: useJ2State, useEffect: useJ2Effect, useRef: useJ2Ref, useMemo: useJ2Memo, } = React; // ── Delte hjelpere (tidligere definert i Journal.jsx) ──────────── // Journal.jsx er fjernet; disse små hjelperne følger nå med journalen. function getJLang() { return localStorage.getItem('el-lang') || 'no'; } const J_DAY_SHORT = { no: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'], en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], }; const J_DAY_FULL = { no: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'], en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], }; const J_MONTH = { no: ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober', 'november', 'desember'], en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], }; const J_MOOD_EMOJIS = ['😔', '😕', '😐', '🙂', '😄']; const J_MOODS = { no: ['Trist', 'Ned', 'Nøytral', 'Bra', 'Topp'], en: ['Sad', 'Down', 'Neutral', 'Good', 'Great'], }; function jt(lang) { return { moods: J_MOODS[lang] || J_MOODS.no }; } function jToKey(d) { const y = d.getFullYear(); const m = String(d.getMonth() + 1).padStart(2, '0'); const dd = String(d.getDate()).padStart(2, '0'); return `${y}-${m}-${dd}`; } function jFromKey(k) { const [y, m, d] = k.split('-').map(Number); return new Date(y, m - 1, d); } function jSameDay(a, b) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); } function jGetTrackerIcon(id, name) { const stored = localStorage.getItem(`el-tracker-icon-${id}`); if (stored) return stored; const n = (name || '').toLowerCase(); if (n.includes('søvn') || n.includes('sleep')) return '🌙'; if (n.includes('energi') || n.includes('energy')) return '⚡'; if (n.includes('vann') || n.includes('water')) return '💧'; if (n.includes('steg') || n.includes('step')) return '🏃'; if (n.includes('stress')) return '😰'; if (n.includes('fokus') || n.includes('focus')) return '🎯'; return '📊'; } const J2_I18N = { no: { loading: 'Åpner boken…', volume: 'Journal', moodLabel: 'Dagens stemning', noText: '(uten tekst)', placeholder: 'I dag så …', titlePlaceholder: 'Tittel på dagens side', words: 'ord', saved: 'Lagret i boken', saving: 'Blekket tørker…', prevDay: 'Forrige side', nextDay: 'Neste side', today: 'I dag', gotoToday: '↩ Til i dag', page: 'Side', tabToday: 'I dag', tabPages: 'Oversikt', toc: 'Innholdsfortegnelse', registerTitle: 'Oversikt', registerEmpty: 'Boken er fortsatt blank. Skriv din første side →', detailsBtn: 'Se detaljer', backToWrite: 'Tilbake til skriving', detailsTitle: 'Dagens oversikt', trend7: 'siste 7 dager', moodShort: 'Stemning', historyTitle: 'Utvikling', histLabel: 'Historikk', histTodayHint: 'Juster dagens verdi', backToDay: 'Tilbake til dagen', noReg: 'Ingen registrering', ofTarget: 'av', trackersLabel: 'Dagens trackere', noTrackers: 'Ingen trackere ennå — trykk på pennen for å legge til.', editTrackers: 'Rediger trackere', doneEditing: 'Ferdig', newTracker: 'Ny tracker…', archiveTracker: 'Arkiver tracker', typeCounter: 'Teller', typeScale: 'Skala 1–10', typeCheckbox: 'Avkrysning', typeText: 'Tekst', completedLabel: 'Fullført i dag', tasksLabel: 'Oppgaver', routinesLabel: 'Rutiner', goalsLabel: 'Mål', projectsLabel: 'Prosjekter', completedTitle: 'Fullført i dag', routineDevTitle: 'Utvikling', noTasksDay: 'Ingen oppgaver denne dagen.', noRoutinesDay: 'Ingen rutiner denne dagen.', noGoalsDone: 'Ingen mål-oppgaver fullført.', noProjDone: 'Ingen prosjekt-oppgaver fullført.', nothingToday: 'Ingen oppgaver eller rutiner denne dagen.', taskTag: 'oppgave', routineTag: 'rutine', onlyToday: 'Oppgaver kan bare hakes av på dagens side', tabClose: 'Lukk', closeBook: 'Lukk boken', openBook: 'Åpne boken', enterPin: 'PIN-kode', wrongPin: 'Feil PIN-kode', setPin: 'Sett PIN-kode', savePin: 'Lagre PIN', removePin: 'Fjern PIN-kode', pinHint: '4–6 sifre', cancel: 'Avbryt', themeLeather: 'Skinn', themeLab: 'Loggbok', themeGreen: 'Notatbok', settings: 'Innstillinger', bookColor: 'Bokfarge', customColor: 'Egen farge', fontLabel: 'Skrift', fontSerif: 'Klassisk', fontHand: 'Håndskrift', fontSans: 'Moderne', }, en: { loading: 'Opening the book…', volume: 'Journal', moodLabel: "Today's mood", noText: '(no text)', placeholder: 'Today I …', titlePlaceholder: "Title of today's page", words: 'words', saved: 'Saved in the book', saving: 'Ink is drying…', prevDay: 'Previous page', nextDay: 'Next page', today: 'Today', gotoToday: '↩ To today', page: 'Page', tabToday: 'Today', tabPages: 'Overview', toc: 'Table of contents', registerTitle: 'Overview', registerEmpty: 'The book is still blank. Write your first page →', detailsBtn: 'See details', backToWrite: 'Back to writing', detailsTitle: 'Day overview', trend7: 'last 7 days', moodShort: 'Mood', historyTitle: 'Trend', histLabel: 'History', histTodayHint: 'Adjust today’s value', backToDay: 'Back to the day', noReg: 'No entry', ofTarget: 'of', trackersLabel: "Today's trackers", noTrackers: 'No trackers yet — tap the pen to add one.', editTrackers: 'Edit trackers', doneEditing: 'Done', newTracker: 'New tracker…', archiveTracker: 'Archive tracker', typeCounter: 'Counter', typeScale: 'Scale 1–10', typeCheckbox: 'Checkbox', typeText: 'Text', completedLabel: 'Completed today', tasksLabel: 'Tasks', routinesLabel: 'Routines', goalsLabel: 'Goals', projectsLabel: 'Projects', completedTitle: 'Completed today', routineDevTitle: 'Trend', noTasksDay: 'No tasks on this day.', noRoutinesDay: 'No routines on this day.', noGoalsDone: 'No goal tasks completed.', noProjDone: 'No project tasks completed.', nothingToday: 'No tasks or routines on this day.', taskTag: 'task', routineTag: 'routine', onlyToday: "Tasks can only be checked off on today's page", tabClose: 'Close', closeBook: 'Close the book', openBook: 'Open the book', enterPin: 'PIN code', wrongPin: 'Wrong PIN code', setPin: 'Set PIN code', savePin: 'Save PIN', removePin: 'Remove PIN code', pinHint: '4–6 digits', cancel: 'Cancel', themeLeather: 'Leather', themeLab: 'Logbook', themeGreen: 'Notebook', settings: 'Settings', bookColor: 'Book colour', customColor: 'Custom colour', fontLabel: 'Font', fontSerif: 'Classic', fontHand: 'Handwriting', fontSans: 'Modern', }, }; function j2t(lang) { return J2_I18N[lang] || J2_I18N.no; } const J2_CAL_DOW = { no: ['M', 'T', 'O', 'T', 'F', 'L', 'S'], en: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], }; // Antall rader (månedsoverskrifter + innslag) per side i Oversikt-oppslaget const J2_REG_PER_PAGE = 10; // Pseudo-tracker for stemning, så den oppfører seg som de andre trackerne const J2_MOOD_ID = '__mood__'; // PIN-lås: samme Supabase-tabell (logbook_pin_settings) og localStorage- // nøkkel som v1-loggboken (scripts/logbook.js), så de to holder seg i sync. const J2_PIN_KEY = 'easylife/logbook-pin'; // «Opplåst nylig»-tidsstempel: når boken er låst opp med PIN, kan man hoppe // mellom sidene i Easylife i 15 minutter uten å taste koden på nytt. «Lukk» // nullstiller stempelet, så boken låser seg igjen umiddelbart. const J2_UNLOCK_KEY = 'el-j2-unlocked-at'; const J2_GRACE_MS = 15 * 60 * 1000; function j2WithinGrace() { try { const t = +localStorage.getItem(J2_UNLOCK_KEY) || 0; return t > 0 && (Date.now() - t) < J2_GRACE_MS; } catch (e) { return false; } } function j2MarkUnlocked() { try { localStorage.setItem(J2_UNLOCK_KEY, String(Date.now())); } catch (e) { /* ignorer */ } } function j2ClearUnlock() { try { localStorage.removeItem(J2_UNLOCK_KEY); } catch (e) { /* ignorer */ } } const J2_THEME_KEY = 'el-j2-theme'; const J2_THEMES = ['leather', 'lab', 'green', 'custom']; // Faste ekstra-farger i innstillingskortet (i tillegg til de tre forhåndsdefinerte // temaene og en fri fargevelger). const J2_CUSTOM_PRESETS = ['#7a2e3b', '#2e4a7a', '#6a4f8a', '#2f6e5e', '#3a3a40']; const J2_CUSTOM_COLOR_KEY = 'el-j2-custom-color'; // Skrifttype for selve skrivingen i boken. 'serif' = standarden (Fraunces). const J2_FONT_KEY = 'el-j2-font'; const J2_FONTS = ['serif', 'hand', 'sans']; const J2_FONT_OPTS = [ { key: 'serif', ff: "'Fraunces', serif" }, { key: 'hand', ff: "'Caveat', cursive" }, { key: 'sans', ff: "'Plus Jakarta Sans', sans-serif" }, ]; // ── Fargehjelpere for egendefinert bokfarge ── // Lager en koordinert omslagspalett (+ lesbart blekk) ut fra én grunnfarge. function j2HexToRgb(hex) { const h = String(hex || '').replace('#', ''); const v = h.length === 3 ? h.split('').map(c => c + c).join('') : h; const n = parseInt(v || '463322', 16); return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }; } function j2Shade(hex, amt) { // amt < 0 → mørkere mot svart, amt > 0 → lysere mot hvitt const { r, g, b } = j2HexToRgb(hex); const t = amt < 0 ? 0 : 255, p = Math.abs(amt); const f = c => Math.round((t - c) * p + c); const to = c => Math.max(0, Math.min(255, f(c))).toString(16).padStart(2, '0'); return `#${to(r)}${to(g)}${to(b)}`; } function j2CustomVars(hex) { const { r, g, b } = j2HexToRgb(hex); const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255; const ink = j2Shade(hex, lum > 0.45 ? -0.55 : -0.2); return { '--j2c-a': hex, '--j2c-b': j2Shade(hex, -0.18), '--j2c-c': j2Shade(hex, -0.4), '--j2c-bd': lum > 0.6 ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.22)', '--j2cov-text': lum > 0.62 ? '#3a352c' : '#f3eee2', '--j2rib-a': ink, '--j2rib-b': j2Shade(ink, 0.18), '--j2rib-c': j2Shade(ink, -0.15), '--j2p-a': '#faf6ec', '--j2p-b': '#f4eedd', '--j2p-c': '#ece3cd', '--j2ink': ink, '--j2tab-a': j2Shade(hex, -0.18), '--j2tab-b': j2Shade(hex, -0.4), }; } function j2ReadLocalPin() { try { const raw = localStorage.getItem(J2_PIN_KEY); if (raw) return JSON.parse(raw); } catch (e) { /* korrupt lokal verdi — ignorer */ } return null; } function j2WriteLocalPin(settings) { try { localStorage.setItem(J2_PIN_KEY, JSON.stringify(settings)); } catch (e) { /* full storage — ignorer */ } } // Skrivefelt for PIN: bevisst type="text" (ikke password) med autoComplete // av, slik at Google/nettleserens passordlagring aldri tilbyr seg å lagre // koden. Maskeringen gjøres med CSS (-webkit-text-security) i stedet. function J2PinInput({ value, onChange, onEnter, error, placeholder, autoFocus }) { const inputRef = useJ2Ref(null); // Aktiver feltet med en gang det vises, så koden kan tastes direkte uten å // måtte klikke i feltet først (gjelder opplåsing av en allerede satt PIN). useJ2Effect(() => { if (autoFocus && inputRef.current) { try { inputRef.current.focus(); } catch (e) { /* ignorer */ } } }, [autoFocus]); return ( onChange(e.target.value.replace(/\D/g, ''))} onKeyDown={e => { if (e.key === 'Enter') onEnter(); }} /> ); } const J2_DEMO_TRACKERS = [ { id: 'demo-trk-1', name: 'Vann', type: 'counter' }, { id: 'demo-trk-2', name: 'Energi', type: 'scale' }, { id: 'demo-trk-3', name: 'Trening', type: 'checkbox' }, { id: 'demo-trk-4', name: 'Søvn', type: 'scale' }, { id: 'demo-trk-5', name: 'Lesing', type: 'checkbox' }, { id: 'demo-trk-6', name: 'Skritt', type: 'counter' }, ]; function j2DayOfYear(d) { const start = new Date(d.getFullYear(), 0, 0); return Math.floor((d - start) / 86400000); } function j2FmtDate(d, lang) { const months = J_MONTH[lang] || J_MONTH.no; if (lang === 'en') return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`; return `${d.getDate()}. ${months[d.getMonth()]} ${d.getFullYear()}`; } function j2HasContent(v) { return !!((v.text || '').replace(/<[^>]*>/g, '').trim() || v.heading || v.mood != null); } // Skrevet innhold (tekst eller tittel). Brukt i innholdsfortegnelsen, som KUN // skal liste dager man faktisk har skrevet på — ikke dager med bare // tracker-/stemnings­registrering. function j2HasText(v) { return !!((v.text || '').replace(/<[^>]*>/g, '').trim() || (v.heading || '').trim()); } // ── Skrivefelt med linjert papir ───────────────────────────────── function J2Editor({ text, onChange, placeholder }) { const ref = useJ2Ref(null); const wrapRef = useJ2Ref(null); const thumbRef = useJ2Ref(null); useJ2Effect(() => { if (ref.current) ref.current.innerHTML = text || ''; }, []); // Elegant scroll-håndtak: boken «forlenger seg» som en scroll, og et slankt // sepia-håndtak viser hvor i teksten man er — kun når innholdet er lengre enn // én side. Håndtaket ligger i scroll-laget, så vi forskyver det med scrollTop // for å holde det fast i synsfeltet (uten ekstra wrapper). function updateThumb() { const w = wrapRef.current, t = thumbRef.current; if (!w || !t) return; const { scrollHeight, clientHeight, scrollTop } = w; if (scrollHeight <= clientHeight + 6) { t.style.opacity = '0'; return; } const pad = 6; const trackH = clientHeight - pad * 2; const thumbH = Math.max(30, trackH * (clientHeight / scrollHeight)); const maxOffset = trackH - thumbH; const ratio = scrollTop / (scrollHeight - clientHeight); const offset = pad + maxOffset * ratio; t.style.opacity = '1'; t.style.height = thumbH + 'px'; t.style.top = (scrollTop + offset) + 'px'; } useJ2Effect(() => { updateThumb(); const w = wrapRef.current; if (!w) return; const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updateThumb) : null; if (ro) ro.observe(w); return () => ro && ro.disconnect(); }, [text]); return (
{/* På mobil er .j2-editor-scroll absolutt-posisjonert (inset:0), så den får fast høyde av forelderen og ruller i stedet for å vokse med innholdet. På desktop er den statisk (uendret oppførsel). */}
{!text &&

{placeholder}

}
{ onChange(ref.current?.innerHTML || ''); updateThumb(); }} />
); } // ── Månedskalender på papir ────────────────────────────────────── function J2Cal({ month, onMonth, selected, today, entries, onPick, lang }) { const months = J_MONTH[lang] || J_MONTH.no; const dow = J2_CAL_DOW[lang] || J2_CAL_DOW.no; const first = new Date(month.getFullYear(), month.getMonth(), 1); const offset = (first.getDay() + 6) % 7; // mandag først const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate(); const cells = []; for (let i = 0; i < offset; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); function nav(step) { onMonth(new Date(month.getFullYear(), month.getMonth() + step, 1)); } return (
{months[month.getMonth()]} {month.getFullYear()}
{dow.map((l, i) => {l})} {cells.map((d, i) => { if (d == null) return ; const date = new Date(month.getFullYear(), month.getMonth(), d); const k = jToKey(date); const isFuture = date > today && !jSameDay(date, today); const cls = ['j2-cal-day']; if (jSameDay(date, selected)) cls.push('sel'); if (jSameDay(date, today)) cls.push('today'); if (isFuture) cls.push('future'); return ( ); })}
); } // ── Felles «verdi i ring»-logikk for alle tracker-typer ────────── // Gir samme visuelle språk overalt: tall for skala/teller, hake for // avkrysning, emoji for stemning, anførselstegn for tekst. function j2CircleData(type, value) { if (type === 'mood') { const has = value != null; return { content: has ? J_MOOD_EMOJIS[value] : '·', pct: has ? (value + 1) * 20 : 0, empty: !has, emoji: true }; } if (type === 'scale') { const has = value != null && value !== ''; return { content: has ? value : '–', pct: has ? value * 10 : 0, empty: !has }; } if (type === 'counter') { const has = value != null && value !== ''; return { content: has ? value : '–', pct: has ? Math.min(100, value * 10) : 0, empty: !has }; } if (type === 'checkbox') { return { content: value ? '✓' : '–', pct: value ? 100 : 0, empty: !value }; } const has = value != null && value !== ''; return { content: has ? '❝' : '–', pct: has ? 100 : 0, empty: !has }; } // ── Kompakt editor for valgt dag på utviklingssiden ────────────── function J2HistEditor({ type, value, onSet }) { if (type === 'counter') { return (
{value || 0}
); } if (type === 'checkbox') { return ( ); } if (type === 'text') { return ( onSet(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') e.target.blur(); }} /> ); } // skala 1–10 return (
{Array.from({ length: 10 }, (_, i) => ( ))}
); } // ── Sammendrags-flis: ring med resultat + navn under ───────────── // Brukes i den rolige oversikten på venstresiden («kun resultatet»). function J2SumTile({ name, type, value, pct, fraction, small, empty, emoji, onClick, title }) { // To moduser: tracker (type+value → ring) eller brøk (value+pct, f.eks 2/4) const c = type ? j2CircleData(type, value) : { content: value, pct: pct || 0, empty, emoji }; return ( ); } // ── Redigeringspanel for trackere ──────────────────────────────── function J2TrackerManage({ trackers, onRename, onArchive, onAdd, T }) { const [type, setType] = useJ2State('counter'); return (
{trackers.map(t => (
{jGetTrackerIcon(t.id, t.name)} { const v = e.target.value.trim(); if (v && v !== t.name) onRename(t.id, v); }} onKeyDown={e => { if (e.key === 'Enter') e.target.blur(); }} />
))}
onAdd(name, type)} />
); } // ══════════════════════════════════════════════════════════════════ // Journal2 — hovedside // ══════════════════════════════════════════════════════════════════ function Journal2() { const today = new Date(); const [selected, setSelected] = useJ2State(today); const [entries, setEntries] = useJ2State({}); const [loading, setLoading] = useJ2State(true); const [saveState, setSaveState] = useJ2State('idle'); // idle | saving | saved const [lang, setLang] = useJ2State(() => getJLang()); const [flipDir, setFlipDir] = useJ2State(0); // animasjonsretning ved sideblaing const [isNarrow, setIsNarrow] = useJ2State(() => window.innerWidth < 900); const [view, setView] = useJ2State('today'); // oppslaget: 'today' | 'overview' const [rightMode, setRightMode] = useJ2State('write'); // høyresiden i dag-oppslag: 'write' | 'details' | 'history' const [histTrk, setHistTrk] = useJ2State(null); // valgt tracker for utviklingssiden (kan være mood-pseudo) const [histPage, setHistPage] = useJ2State(0); // hvor langt tilbake i tid utviklingssiden blar const [histData, setHistData] = useJ2State(null); // { trackerId, days:[{key,val}] } const [histReturn, setHistReturn] = useJ2State('write'); // hvor utviklingssiden blar tilbake til const [regPage, setRegPage] = useJ2State(0); // oppslag-indeks i Oversikt (0 = side 1+2) const [calMonth, setCalMonth] = useJ2State(() => new Date(today.getFullYear(), today.getMonth(), 1)); const [trackers, setTrackers] = useJ2State([]); const [routineDefs, setRoutineDefs] = useJ2State([]); const [dayData, setDayData] = useJ2State({ vals: {}, tasks: [], routineDone: {}, goalsDone: [], projDone: [] }); const [manage, setManage] = useJ2State(false); // På mobil starter boken alltid LUKKET i midten (og auto-åpnes nedenfor hvis // ingen PIN er satt). På desktop beholdes dagens oppførsel (åpen med en gang). const [phase, setPhase] = useJ2State(() => (window.innerWidth < 900 ? 'closed' : 'open')); // open | closing | closed | opening const [theme, setTheme] = useJ2State(() => { const t = localStorage.getItem(J2_THEME_KEY); return J2_THEMES.includes(t) ? t : 'leather'; }); const [customColor, setCustomColor] = useJ2State( () => localStorage.getItem(J2_CUSTOM_COLOR_KEY) || '#6a4f8a' ); const [font, setFont] = useJ2State(() => { const f = localStorage.getItem(J2_FONT_KEY); return J2_FONTS.includes(f) ? f : 'serif'; }); const [settingsOpen, setSettingsOpen] = useJ2State(false); const [pinSettings, setPinSettings] = useJ2State({ enabled: false, pin: '' }); const [pinInput, setPinInput] = useJ2State(''); const [pinError, setPinError] = useJ2State(false); const [pinMode, setPinMode] = useJ2State('idle'); // idle | set const pendingRef = useJ2Ref(null); const saveTimerRef = useJ2Ref(null); const flushSaveRef = useJ2Ref(null); const dayCacheRef = useJ2Ref({}); const histCacheRef = useJ2Ref({}); const T = j2t(lang); const dayFull = J_DAY_FULL[lang] || J_DAY_FULL.no; useJ2Effect(() => { const onResize = () => setIsNarrow(window.innerWidth < 900); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); // Mobil: skjul app-toppen (logo + Jobb/Privat) og lås skjermen KUN når boken // er åpen (fullskjerm-skriving). Når boken er lukket vises den normale app- // banneren (samme som ellers i appen). CSS-en er scopet til smal skjerm, så // desktop påvirkes ikke. // j2-lock ligger på HELE journal-siden (også lukket bok): den låser body- // scroll på mobil slik at boken ikke kan dras opp under toppbanneret — // eventuell overflow ruller inni .j2-stage i stedet. useJ2Effect(() => { document.body.classList.add('j2-lock'); if (phase === 'closed') { document.body.classList.remove('j2-mobile'); } else { document.body.classList.add('j2-mobile'); } return () => document.body.classList.remove('j2-mobile', 'j2-lock'); }, [phase]); // Boken åpnes ikke lenger automatisk — brukeren slår den opp selv via // «Åpne boken» på omslaget (gjelder både mobil og desktop). useJ2Effect(() => { const handler = e => setLang(e.detail || getJLang()); window.addEventListener('el-lang-change', handler); return () => window.removeEventListener('el-lang-change', handler); }, []); // Flush usagrede endringer når siden forlates useJ2Effect(() => { const flush = () => flushSaveRef.current && flushSaveRef.current(); const onVis = () => { if (document.visibilityState === 'hidden') flush(); }; document.addEventListener('visibilitychange', onVis); window.addEventListener('pagehide', flush); return () => { document.removeEventListener('visibilitychange', onVis); window.removeEventListener('pagehide', flush); flush(); }; }, []); useJ2Effect(() => { loadData(); }, []); async function loadData() { setLoading(true); try { if (window.EASYLIFE_DEMO?.enabled) { const cached = localStorage.getItem('el-journal-v2-demo'); setEntries(cached ? JSON.parse(cached) : {}); setTrackers(J2_DEMO_TRACKERS); setRoutineDefs((window.EASYLIFE_DEMO.routines || []).map(r => ({ id: r.id, name: r.name }))); const localPin = j2ReadLocalPin(); if (localPin) { setPinSettings({ enabled: !!localPin.enabled, pin: localPin.pin || '' }); if (localPin.enabled) setPhase(j2WithinGrace() ? 'open' : 'closed'); } setLoading(false); return; } const uid = await window.ensureCurrentUserId(); if (!uid) { setEntries({}); setLoading(false); return; } const [{ data: logs }, { data: moods }, { data: trackerDefs }, { data: rDefs }, pinRes] = await Promise.all([ supabaseClient.from('logbook_entries') .select('entry_date, heading, notes') .eq('user_id', uid) .order('entry_date', { ascending: false }) .limit(120), supabaseClient.from('mood_entries') .select('entry_date, mood') .eq('user_id', uid) .order('entry_date', { ascending: false }) .limit(120), supabaseClient.from('logbook_trackers') .select('id, name, type, created_at') .eq('user_id', uid) .is('archived_at', null) .order('created_at', { ascending: true }), supabaseClient.from('routines') .select('id, name, position') .is('archived_at', null) .order('position', { ascending: true }) .limit(30), supabaseClient.from('logbook_pin_settings') .select('pin_code, pin_enabled') .eq('user_id', uid) .maybeSingle(), ]); const map = {}; (logs || []).forEach(r => { map[r.entry_date] = { ...(map[r.entry_date] || {}), text: r.notes || '', heading: r.heading || '' }; }); const moodMap = { low: 0, meh: 1, okay: 2, good: 3, great: 4, very_sad: 0, sad: 1, neutral: 2, happy: 3, very_happy: 4 }; (moods || []).forEach(r => { const idx = typeof r.mood === 'number' ? r.mood : moodMap[String(r.mood)]; if (idx != null) map[r.entry_date] = { ...(map[r.entry_date] || {}), mood: idx }; }); setEntries(map); setTrackers(trackerDefs || []); setRoutineDefs(rDefs || []); // PIN: Supabase er fasit, lokal kopi er fallback (samme som v1) const pinRow = pinRes && !pinRes.error ? pinRes.data : null; const pin = pinRow ? { enabled: !!pinRow.pin_enabled, pin: pinRow.pin_code || '' } : (j2ReadLocalPin() || { enabled: false, pin: '' }); setPinSettings(pin); j2WriteLocalPin(pin); // Innen 15-minutters-vinduet etter en opplåsing åpnes boken direkte, så // man kan hoppe mellom Easylife-sidene uten å taste PIN på nytt. if (pin.enabled) setPhase(j2WithinGrace() ? 'open' : 'closed'); } catch (e) { console.warn('[Journal2] load failed', e); setEntries({}); } finally { setLoading(false); } } const key = jToKey(selected); const entry = entries[key] || {}; const isToday = jSameDay(selected, today); // ── Dagsdata: trackerverdier, oppgaver og rutinestatus ────────── useJ2Effect(() => { if (loading) return; loadDay(key); }, [key, trackers, loading]); // Utviklingsdata for én tracker lastes når utviklingssiden er åpen useJ2Effect(() => { if (loading || rightMode !== 'history' || !histTrk) return; loadHist(histTrk, key, histPage); }, [rightMode, histTrk, histPage, key, loading]); // Kalenderen følger valgt dato useJ2Effect(() => { setCalMonth(m => (m.getFullYear() === selected.getFullYear() && m.getMonth() === selected.getMonth()) ? m : new Date(selected.getFullYear(), selected.getMonth(), 1)); }, [key]); async function loadDay(k) { const cached = dayCacheRef.current[k]; if (cached) { setDayData(cached); return; } if (window.EASYLIFE_DEMO?.enabled) { const isT = k === jToKey(today); const dvals = {}; trackers.forEach(t => { let h = 11; (t.id + k).split('').forEach(c => { h = (h * 31 + c.charCodeAt(0)) >>> 0; }); const ty = t.type || 'scale'; dvals[t.id] = ty === 'checkbox' ? h % 3 !== 0 : ty === 'counter' ? (h % 8) + 1 : (h % 10) + 1; }); const data = { vals: dvals, tasks: isT ? (window.EASYLIFE_DEMO.tasks || []).map(t => ({ id: t.id, name: t.name, done: !!t.completed })) : [], routineDone: isT ? Object.fromEntries((window.EASYLIFE_DEMO.routines || []).filter(r => r.completed).map(r => [r.id, true])) : {}, goalsDone: isT ? (window.EASYLIFE_DEMO.goalTodosDone || []).map(g => ({ id: g.id, name: g.name })) : [], projDone: isT ? (window.EASYLIFE_DEMO.projectTodosDone || []).map(p => ({ id: p.id, name: p.name })) : [], }; dayCacheRef.current[k] = data; setDayData(data); return; } try { const uid = await window.ensureCurrentUserId(); if (!uid) return; const next = jFromKey(k); next.setDate(next.getDate() + 1); const nextK = jToKey(next); const ids = trackers.map(t => t.id); const rids = routineDefs.map(r => r.id); const [tvRes, taskRes, reRes, goalRes, projRes] = await Promise.all([ ids.length ? supabaseClient.from('logbook_tracker_entries') .select('tracker_id, value_scale, value_text, value_counter, value_checkbox') .eq('user_id', uid) .eq('entry_date', k) .in('tracker_id', ids) : Promise.resolve({ data: [] }), supabaseClient.from('todo_tasks') .select('id, name, completed_at, due_date, position') .or(`due_date.eq.${k},and(completed_at.gte.${k},completed_at.lt.${nextK})`) .order('position', { ascending: true }), rids.length ? supabaseClient.from('routine_entries') .select('routine_id, status') .in('routine_id', rids) .eq('entry_date', k) : Promise.resolve({ data: [] }), // Mål-oppgaver (delmål-todos) fullført denne dagen — RLS begrenser til egne mål supabaseClient.from('goal_milestone_todos') .select('id, title, completed_at') .gte('completed_at', k) .lt('completed_at', nextK), // Prosjekt-oppgaver fullført denne dagen — RLS begrenser til egne prosjekter supabaseClient.from('project_todos') .select('id, name, completed_at') .gte('completed_at', k) .lt('completed_at', nextK), ]); const typeOf = {}; trackers.forEach(t => { typeOf[t.id] = t.type || 'scale'; }); const vals = {}; (tvRes.data || []).forEach(r => { const type = typeOf[r.tracker_id]; vals[r.tracker_id] = type === 'scale' ? r.value_scale : type === 'counter' ? r.value_counter : type === 'checkbox' ? r.value_checkbox : r.value_text; }); const data = { vals, tasks: (taskRes.data || []).map(t => ({ id: t.id, name: t.name, done: !!t.completed_at })), routineDone: Object.fromEntries((reRes.data || []).filter(e => e.status === 'done').map(e => [e.routine_id, true])), goalsDone: (goalRes.data || []).map(g => ({ id: g.id, name: g.title })), projDone: (projRes.data || []).map(p => ({ id: p.id, name: p.name })), }; dayCacheRef.current[k] = data; setDayData(data); } catch (e) { console.warn('[Journal2] day load failed', e); } } // Alle dager (stigende) i kalendermåneden `page` måneder før valgt dag function j2HistMonth(anchorK, page) { const a = jFromKey(anchorK); const first = new Date(a.getFullYear(), a.getMonth() - page, 1); const y = first.getFullYear(), mo = first.getMonth(); const n = new Date(y, mo + 1, 0).getDate(); const days = []; for (let d = 1; d <= n; d++) days.push(jToKey(new Date(y, mo, d))); return { y, mo, days }; } // Last per-dag-verdier for ÉN tracker (eller stemnings-pseudoen) for én måned async function loadHist(trk, anchorK, page) { const cacheKey = `${trk.id}|${anchorK.slice(0, 7)}|${page}`; const cached = histCacheRef.current[cacheKey]; if (cached) { setHistData(cached); return; } const { y, mo, days } = j2HistMonth(anchorK, page); const type = trk.type || 'scale'; const meta = { trackerId: trk.id, page, y, mo }; // Stemning leses fra journalinnslagene vi allerede har i minne if (trk.id === J2_MOOD_ID) { const data = { ...meta, days: days.map(k => ({ key: k, val: entries[k]?.mood ?? null })) }; histCacheRef.current[cacheKey] = data; setHistData(data); return; } // Rutiner: per-dag-status fra routine_entries (behandles som avkrysning) if (trk.source === 'routine') { if (window.EASYLIFE_DEMO?.enabled) { const data = { ...meta, days: days.map(k => { let h = 5; (trk.id + k).split('').forEach(c => { h = (h * 31 + c.charCodeAt(0)) >>> 0; }); return { key: k, val: h % 3 !== 0 ? true : null }; }), }; histCacheRef.current[cacheKey] = data; setHistData(data); return; } try { const { data: rows } = await supabaseClient.from('routine_entries') .select('entry_date, status') .eq('routine_id', trk.id) .gte('entry_date', days[0]) .lte('entry_date', days[days.length - 1]); const byDay = {}; (rows || []).forEach(r => { if (r.status === 'done') byDay[r.entry_date] = true; }); const data = { ...meta, days: days.map(k => ({ key: k, val: byDay[k] ? true : null })) }; histCacheRef.current[cacheKey] = data; setHistData(data); } catch (e) { console.warn('[Journal2] routine history load failed', e); } return; } if (window.EASYLIFE_DEMO?.enabled) { const data = { ...meta, days: days.map(k => { let h = 7; (trk.id + k).split('').forEach(c => { h = (h * 31 + c.charCodeAt(0)) >>> 0; }); // ~25 % av dagene er bevisst uten registrering (tom sirkel) if (h % 4 === 0) return { key: k, val: null }; const val = type === 'checkbox' ? h % 5 !== 0 : type === 'counter' ? (h % 6) + 1 : (h % 10) + 1; return { key: k, val }; }), }; histCacheRef.current[cacheKey] = data; setHistData(data); return; } try { const uid = await window.ensureCurrentUserId(); if (!uid) return; const { data: rows } = await supabaseClient.from('logbook_tracker_entries') .select('entry_date, value_scale, value_text, value_counter, value_checkbox') .eq('user_id', uid) .eq('tracker_id', trk.id) .gte('entry_date', days[0]) .lte('entry_date', days[days.length - 1]); const byDay = {}; (rows || []).forEach(r => { byDay[r.entry_date] = type === 'scale' ? r.value_scale : type === 'counter' ? r.value_counter : type === 'checkbox' ? r.value_checkbox : r.value_text; }); const data = { ...meta, days: days.map(k => ({ key: k, val: byDay[k] ?? null })) }; histCacheRef.current[cacheKey] = data; setHistData(data); } catch (e) { console.warn('[Journal2] history load failed', e); } } function patchDay(patch) { setDayData(prev => { const next = { ...prev, ...patch }; dayCacheRef.current[key] = next; return next; }); } async function setTrackerVal(tracker, val) { patchDay({ vals: { ...dayData.vals, [tracker.id]: val } }); // Hold utviklingssiden i synk med den nye verdien histCacheRef.current = {}; setHistData(prev => (prev && prev.trackerId === tracker.id) ? { ...prev, days: prev.days.map(d => d.key === key ? { ...d, val } : d) } : prev); if (window.EASYLIFE_DEMO?.enabled) return; try { const uid = await window.ensureCurrentUserId(); if (!uid) return; const type = tracker.type || 'scale'; await supabaseClient.from('logbook_tracker_entries').upsert({ user_id: uid, tracker_id: tracker.id, entry_date: key, value_scale: type === 'scale' ? val : null, value_text: type === 'text' ? val : null, value_counter: type === 'counter' ? val : null, value_checkbox: type === 'checkbox' ? !!val : null, }, { onConflict: 'tracker_id,entry_date' }); } catch (e) { console.warn('[Journal2] tracker save failed', e); } } async function toggleTask(t) { if (!isToday) return; const newVal = t.done ? null : new Date().toISOString(); patchDay({ tasks: dayData.tasks.map(x => x.id === t.id ? { ...x, done: !t.done } : x) }); if (window.EASYLIFE_DEMO?.enabled) return; try { await supabaseClient.from('todo_tasks').update({ completed_at: newVal }).eq('id', t.id); } catch (e) { console.warn('[Journal2] task toggle failed', e); } } async function toggleRoutine(rid) { const wasDone = !!dayData.routineDone[rid]; const nextDone = { ...dayData.routineDone }; if (wasDone) delete nextDone[rid]; else nextDone[rid] = true; patchDay({ routineDone: nextDone }); if (window.EASYLIFE_DEMO?.enabled) return; try { const uid = await window.ensureCurrentUserId(); if (!uid) return; if (wasDone) { await supabaseClient.from('routine_entries').delete().eq('routine_id', rid).eq('entry_date', key); } else { await supabaseClient.from('routine_entries') .upsert({ routine_id: rid, user_id: uid, entry_date: key, status: 'done' }, { onConflict: 'routine_id,entry_date' }); } } catch (e) { console.warn('[Journal2] routine toggle failed', e); } } // ── Rediger trackere (definisjoner) ───────────────────────────── async function addTracker(name, type) { if (window.EASYLIFE_DEMO?.enabled) { setTrackers(prev => [...prev, { id: 'demo-trk-' + Date.now(), name, type }]); return; } try { const uid = await window.ensureCurrentUserId(); if (!uid) return; const { data, error } = await supabaseClient.from('logbook_trackers') .insert({ user_id: uid, name, type }) .select() .single(); if (!error && data) setTrackers(prev => [...prev, data]); } catch (e) { console.warn('[Journal2] add tracker failed', e); } } async function renameTracker(id, name) { setTrackers(prev => prev.map(t => t.id === id ? { ...t, name } : t)); if (window.EASYLIFE_DEMO?.enabled) return; try { await supabaseClient.from('logbook_trackers').update({ name }).eq('id', id); } catch (e) { console.warn('[Journal2] rename tracker failed', e); } } async function archiveTracker(id) { setTrackers(prev => prev.filter(t => t.id !== id)); if (window.EASYLIFE_DEMO?.enabled) return; try { await supabaseClient.from('logbook_trackers') .update({ archived_at: new Date().toISOString() }) .eq('id', id); } catch (e) { console.warn('[Journal2] archive tracker failed', e); } } // ── Lukk/åpne boken + PIN-lås ─────────────────────────────────── function closeBook() { flushSave(); // «Lukk» låser boken igjen umiddelbart — nullstill 15-min-vinduet. j2ClearUnlock(); setPinInput(''); setPinError(false); setPinMode('idle'); setPhase('closing'); setTimeout(() => setPhase('closed'), 470); } function openBook() { if (pinSettings.enabled && pinInput !== pinSettings.pin) { setPinError(true); return; } // Start 15-min-vinduet ved hver vellykket opplåsing (kun når PIN er aktiv). if (pinSettings.enabled) j2MarkUnlocked(); setPinInput(''); setPinError(false); setPhase('opening'); setTimeout(() => setPhase('open'), 520); } // Auto-lås når 15-min-vinduet løper ut mens boken står åpen. useJ2Effect(() => { if (!pinSettings.enabled || phase !== 'open') return; const unlockedAt = +localStorage.getItem(J2_UNLOCK_KEY) || Date.now(); const remaining = J2_GRACE_MS - (Date.now() - unlockedAt); if (remaining <= 0) { closeBook(); return; } const id = setTimeout(() => closeBook(), remaining); return () => clearTimeout(id); }, [pinSettings.enabled, phase]); // Mobil «logg»-oppslag: oversiktssirkler. Klikk på en sirkel blar videre til // detaljer (oppgaver/rutiner) eller utvikling (trackere/stemning). function openOverview() { flushSave(); setFlipDir(1); setRightMode('overview'); } function closeOverview() { setFlipDir(-1); setRightMode('write'); } // Innholdsfortegnelse (TOC) som egen mobilside, nås fra oversikten. function openRegister() { flushSave(); setFlipDir(1); setRightMode('register'); } function closeRegister() { setFlipDir(-1); setRightMode('overview'); } async function persistPin(settings) { j2WriteLocalPin(settings); if (window.EASYLIFE_DEMO?.enabled) return; try { const uid = await window.ensureCurrentUserId(); if (!uid) return; await supabaseClient.from('logbook_pin_settings').upsert({ user_id: uid, pin_code: settings.pin, pin_enabled: settings.enabled, updated_at: new Date().toISOString(), }, { onConflict: 'user_id' }); } catch (e) { console.warn('[Journal2] pin save failed', e); } } function savePin() { const code = pinInput.trim(); if (!/^\d{4,6}$/.test(code)) { setPinError(true); return; } const s = { enabled: true, pin: code }; setPinSettings(s); setPinMode('idle'); setPinInput(''); setPinError(false); persistPin(s); } function removePin() { if (pinInput !== pinSettings.pin) { setPinError(true); return; } const s = { enabled: false, pin: '' }; setPinSettings(s); setPinInput(''); setPinError(false); persistPin(s); } function pickTheme(t) { setTheme(t); try { localStorage.setItem(J2_THEME_KEY, t); } catch (e) { /* ignorer */ } } function pickCustomColor(c) { setCustomColor(c); setTheme('custom'); try { localStorage.setItem(J2_CUSTOM_COLOR_KEY, c); localStorage.setItem(J2_THEME_KEY, 'custom'); } catch (e) { /* ignorer */ } } function pickFont(f) { setFont(f); try { localStorage.setItem(J2_FONT_KEY, f); } catch (e) { /* ignorer */ } } // ── Journaltekst/stemning (som før) ───────────────────────────── async function persistEntry(e, entryKey) { if (window.EASYLIFE_DEMO?.enabled) return; const uid = await window.ensureCurrentUserId(); if (!uid) return; try { if ('text' in e || 'heading' in e) { await supabaseClient.from('logbook_entries') .upsert({ user_id: uid, entry_date: entryKey, heading: e.heading || '', notes: e.text || '' }, { onConflict: 'user_id,entry_date' }); } if ('mood' in e && e.mood != null) { const moodNames = ['low', 'meh', 'okay', 'good', 'great']; await supabaseClient.from('mood_entries') .upsert({ user_id: uid, entry_date: entryKey, mood: moodNames[e.mood] || 'okay' }, { onConflict: 'user_id,entry_date' }); } setSaveState('saved'); setTimeout(() => setSaveState(s => (s === 'saved' ? 'idle' : s)), 2200); } catch (err) { console.warn('[Journal2] save failed', err); setSaveState('idle'); } } function flushSave() { if (saveTimerRef.current) { clearTimeout(saveTimerRef.current); saveTimerRef.current = null; } const p = pendingRef.current; pendingRef.current = null; if (p) persistEntry(p.entry, p.key); } flushSaveRef.current = flushSave; function update(patch) { const next = { ...entries, [key]: { ...entry, ...patch } }; setEntries(next); if (window.EASYLIFE_DEMO?.enabled) { localStorage.setItem('el-journal-v2-demo', JSON.stringify(next)); return; } if ('text' in patch || 'heading' in patch) { setSaveState('saving'); pendingRef.current = { key, entry: next[key] }; clearTimeout(saveTimerRef.current); saveTimerRef.current = setTimeout(() => { const p = pendingRef.current; pendingRef.current = null; saveTimerRef.current = null; if (p) persistEntry(p.entry, p.key); }, 900); } else { setSaveState('saving'); persistEntry({ ...next[key], ...patch }, key); } } function goTo(d, dir) { flushSave(); setFlipDir(dir); setSelected(d); } // Bla forbi tomme dager: finn neste/forrige dag med faktisk skrevet innhold // (jf. kalender-prikkene, som bruker samme j2HasContent-sjekk). Fremover // stopper søket senest på dagens dato — man skal aldri kunne bla inn i // fremtiden. Finnes ingen dag med innhold innenfor søkevinduet, faller vi // tilbake til å bla én dag av gangen som før. function findAdjacentEntryDay(from, dir) { const todayKey = jToKey(today); const d = new Date(from); for (let i = 0; i < 3650; i++) { d.setDate(d.getDate() + dir); const k = jToKey(d); if (dir > 0 && k >= todayKey) return new Date(d); if (entries[k] && j2HasContent(entries[k])) return new Date(d); } return null; } function goPrev() { const d = findAdjacentEntryDay(selected, -1) || new Date(selected.getFullYear(), selected.getMonth(), selected.getDate() - 1); goTo(d, -1); } function goNext() { if (isToday) return; const d = findAdjacentEntryDay(selected, 1) || new Date(selected.getFullYear(), selected.getMonth(), selected.getDate() + 1); goTo(d, 1); } // ── Mobil: sveip venstre/høyre for å bla mellom dager ── // Aktiv kun på de dag-baserte sidene (skriv / oppgaver / rutiner / fullført), // ikke i oversikt-/register-visningen som har sin egen navigasjon. const j2SwipeRef = useJ2Ref({ active: false, startX: 0, startY: 0, axis: null }); const j2SwipeEnabled = isNarrow && (rightMode === 'write' || rightMode === 'tasks' || rightMode === 'routines' || rightMode === 'completed'); function j2HandleTouchStart(e) { if (!j2SwipeEnabled) return; const t = e.touches[0]; j2SwipeRef.current = { active: true, startX: t.clientX, startY: t.clientY, axis: null }; } function j2HandleTouchMove(e) { if (!j2SwipeRef.current.active) return; const t = e.touches[0]; const dx = t.clientX - j2SwipeRef.current.startX; const dy = t.clientY - j2SwipeRef.current.startY; if (!j2SwipeRef.current.axis && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) { j2SwipeRef.current.axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y'; } } function j2HandleTouchEnd(e) { const s = j2SwipeRef.current; if (!s.active) return; if (s.axis === 'x') { const t = e.changedTouches[0]; const dx = t.clientX - s.startX; const threshold = 50; if (dx < -threshold) goNext(); else if (dx > threshold) goPrev(); } j2SwipeRef.current = { active: false, startX: 0, startY: 0, axis: null }; } function pickDay(d) { if (view === 'overview') { setView('today'); setRightMode('write'); } // På mobil nås kalenderen/TOC fra egne sider — gå tilbake til skrivesiden. if (isNarrow) setRightMode('write'); goTo(d, d < selected ? -1 : 1); } // Detalj-sider: hver «Fullført i dag»-flis blar over til sin egen side. function openDetailMode(mode) { if (rightMode === mode) return; flushSave(); setFlipDir(1); setRightMode(mode); } function openTasks() { openDetailMode('tasks'); } function openRoutines() { openDetailMode('routines'); } function openCompleted() { openDetailMode('completed'); } function closeDetail() { flushSave(); setFlipDir(-1); // På mobil nås detaljene fra «logg»-oversikten, så vi blar tilbake dit. setRightMode(isNarrow ? 'overview' : 'write'); } // Ett nivå dypere: utviklingssiden for én tracker, rutine eller stemning. // `back` sier hvilken side «tilbake» skal bla til. function openHistory(trk, back) { setFlipDir(1); setHistTrk(trk); setHistPage(0); setHistData(null); setHistReturn(back || (isNarrow ? 'overview' : 'write')); setRightMode('history'); } function closeHistory() { setFlipDir(-1); setHistTrk(null); setRightMode(histReturn); } function histGo(step) { const next = Math.max(0, histPage + step); // 0 = nyeste vindu, høyere = lenger tilbake if (next === histPage) return; setFlipDir(step > 0 ? -1 : 1); setHistPage(next); } const wordCount = (entry.text || '').replace(/<[^>]*>/g, '').trim().split(/\s+/).filter(Boolean).length; // Oversikt: alle sider med innhold som flat liste (månedsoverskrifter // er egne rader), delt opp i boksider à J2_REG_PER_PAGE rader. const regItems = useJ2Memo(() => { const list = Object.entries(entries) .filter(([, v]) => j2HasText(v)) .sort(([a], [b]) => b.localeCompare(a)); const items = []; let lastMk = null; list.forEach(([k, v]) => { const mk = k.slice(0, 7); if (mk !== lastMk) { items.push({ type: 'month', mk }); lastMk = mk; } items.push({ type: 'entry', k, v }); }); return items; }, [entries]); const regPagesArr = useJ2Memo(() => { const pages = []; for (let i = 0; i < regItems.length; i += J2_REG_PER_PAGE) pages.push(regItems.slice(i, i + J2_REG_PER_PAGE)); return pages.length ? pages : [[]]; }, [regItems]); const regSpreads = Math.max(1, Math.ceil(regPagesArr.length / 2)); function regGo(step) { const next = Math.min(regSpreads - 1, Math.max(0, regPage + step)); if (next === regPage) return; setFlipDir(step > 0 ? 1 : -1); setRegPage(next); } const moodLabels = jt(lang).moods; const dayShort = J_DAY_SHORT[lang] || J_DAY_SHORT.no; const months = J_MONTH[lang] || J_MONTH.no; if (loading) { return (
{T.loading}
); } // Oppgaver + rutiner for valgt dag (detaljsiden viser dem som lister) const taskItems = dayData.tasks.map(t => ({ key: 't' + t.id, kind: 'task', name: t.name, done: t.done, onToggle: () => toggleTask(t) })); const routineItems = routineDefs.map(r => ({ key: 'r' + r.id, kind: 'routine', name: r.name, done: !!dayData.routineDone[r.id], onToggle: () => toggleRoutine(r.id) })); const taskCount = taskItems.length; const taskDone = taskItems.filter(t => t.done).length; const routineDone = routineItems.filter(r => r.done).length; const goalsDoneCount = (dayData.goalsDone || []).length; const projDoneCount = (dayData.projDone || []).length; const isOverview = view === 'overview'; // Stemning behandles som en tracker, slik at den får samme sirkel og // utviklingsside som de andre. Den ligger først i listen. const moodTrk = { id: J2_MOOD_ID, name: T.moodShort, type: 'mood' }; const valOf = trk => ( trk.id === J2_MOOD_ID ? (entry.mood ?? null) : trk.source === 'routine' ? !!dayData.routineDone[trk.id] : dayData.vals[trk.id] ); // Mobil-navigasjon: ALLE sekundærknapper (Oversikt/I dag/tilbake) OG «Lukk» // ligger nå på TOPPEN. «Lukk» skyves helt til høyre (rett etter de andre // knappene) og holder seg klar av det røde bokmerket. Trackersiden har i // tillegg en midtstilt innholdsfortegnelse-knapp nederst (mobTocBar). const mobClose = ( ); const mobTop = (content) => (
{content} {mobClose}
); // Midtstilt innholdsfortegnelse-knapp nederst (kun trackersiden). const mobTocBar = (btn) =>
{btn}
; // ── Venstre side, fane «I dag»: kalender + trackere + fullført ── const todayPage = (
{dayFull[selected.getDay()]}
{selected.getDate()}
{months[selected.getMonth()]} {selected.getFullYear()}
{isToday ?
{T.today}
: }
❦

{T.trackersLabel}

{manage ? ( ) : (
openHistory(moodTrk)} /> {trackers.map(t => ( openHistory(t)} /> ))}
)}
❦

{T.completedLabel}

); // ── Oversikt: rader for én bokside (månedsoverskrifter + innslag) ── function regRows(items) { return items.map(it => { if (it.type === 'month') { const [y, m] = it.mk.split('-'); return
{months[parseInt(m, 10) - 1]} {y}
; } const d = jFromKey(it.k); const v = it.v; const preview = v.heading || (v.text || '').replace(/<[^>]*>/g, '').trim().slice(0, 38) || T.noText; return ( ); }); } // Oversikt-oppslaget: venstre bokside (side 1, 3, 5 …) const overviewLeft = (
{T.registerTitle}
{regItems.length === 0 &&

{T.registerEmpty}

} {regRows(regPagesArr[regPage * 2] || [])}
); // Faner som ligger MELLOM de stablede sidekantene (egne lag bak sidene): // «Lukk» som horisontal fane på toppen, «I dag»/«Oversikt» på fore-kanten. const bookTabs = (
); const leftPage = (
{isOverview ? overviewLeft : todayPage}
— {T.page} {isOverview ? regPage * 2 + 1 : j2DayOfYear(selected)} —
); // ── Høyre side: selve skrivesiden ── // På smale skjermer vises bare denne siden — da får den en kompakt // dato- og stemningslinje øverst, og «forrige side»-hjørnet flyttes hit. const writePage = (
); // ── Felles skall for detalj-sidene (oppgaver / rutiner / fullført) ── // Rutiner og oppgaver har nå hver sin side, og «Fullført i dag» har // en egen side med mål- og prosjekt-overskrifter. function detailShell(titleText, body, pageKey) { return (
); } // Oppgaver for dagen — egen side, kan hakes av på dagens side const tasksPage = detailShell(T.tasksLabel, (
{T.tasksLabel} {taskDone}/{taskCount}
{taskItems.length === 0 ?

{T.noTasksDay}

: (
{taskItems.map(item => (
{item.name}
))}
)}
), 'tasks-'); // Rutiner for dagen — egen side. Klikk på en rutine åpner utvikling pr. mnd. const routinesPage = detailShell(T.routinesLabel, (
{T.routinesLabel} {routineDone}/{routineDefs.length}
{routineDefs.length === 0 ?

{T.noRoutinesDay}

: (
{routineDefs.map(r => { const done = !!dayData.routineDone[r.id]; return (
); })}
)}
), 'routines-'); // «Fullført i dag» — mål- og prosjekt-oppgaver fullført denne dagen const completedPage = detailShell(T.completedTitle, (
{T.goalsLabel} {goalsDoneCount}
{goalsDoneCount === 0 ?

{T.noGoalsDone}

: (dayData.goalsDone || []).map(g => (
✓{g.name}
))}
{T.projectsLabel} {projDoneCount}
{projDoneCount === 0 ?

{T.noProjDone}

: (dayData.projDone || []).map(p => (
✓{p.name}
))}
), 'completed-'); // ── Utviklingssiden: én tracker, per-dag-sirkler for én måned ── const histType = histTrk ? (histTrk.type || 'mood') : 'scale'; const histReady = histData && histData.trackerId === (histTrk && histTrk.id); const histDaysArr = histReady ? histData.days : []; // Tre kolonner gjør at hele måneden får plass uten scroll på mobil const histThird = Math.ceil(histDaysArr.length / 3); const histCol1 = histDaysArr.slice(0, histThird); const histCol2 = histDaysArr.slice(histThird, histThird * 2); const histCol3 = histDaysArr.slice(histThird * 2); const histMonthLabel = histReady ? `${months[histData.mo]} ${histData.y}` : ''; function histDayCircle(d) { const dt = jFromKey(d.key); const future = dt > today && !jSameDay(dt, today); const isSel = jSameDay(dt, selected); const has = histType === 'checkbox' ? d.val === true : (d.val != null && d.val !== ''); const cd = j2CircleData(histType, d.val); // tre tilstander: registrert (fylt), forventet men tom (omriss), ikke forventet (grå dato) const state = has ? 'has' : future ? 'idle' : 'miss'; return (
{state === 'idle' ? '' : (has ? cd.content : '')} {dayShort[dt.getDay()].toLowerCase()} {dt.getDate()}.
); } const historyPage = (