store.openModal('help', {})} />
store.openModal('contactUs', {})} />
store.openModal('about', {})} last />
{/* sign out */}
Made with ♥ in 🇲🇻 for ThalFrndz v{TC.APP_VERSION}
);
}
/* Google "G" mark — official four-colour, used in the account row */
function GoogleG({ size = 18 }) {
return (
);
}
function ToggleRow({ icon, iconBg, iconColor, label, sub, value, onChange, last }) {
return (
{label}
{sub &&
{sub}
}
);
}
/* ---------- live photo resolution (Storage ref → signed URL) ---------- */
// Resolves a stored photo reference (or legacy inline string) to a URL we can
// paint. Inline / already-cached images show on the first frame; a private
// Storage ref is signed asynchronously and swapped in when ready.
function usePhotoUrl(photo) {
const [url, setUrl] = React.useState(() => window.TCFiles.immediateUrl(photo));
const key = window.TCFiles.keyOf(photo);
React.useEffect(() => {
let live = true;
window.TCFiles.resolveUrl(photo).then((u) => { if (live) setUrl(u); }).catch(() => {});
return () => { live = false; };
}, [key]);
return url;
}
function PatientAvatar({ patient, size }) {
const url = usePhotoUrl((patient && (patient.photo || patient.photoUrl)) || null);
return ;
}
/* ---------- profile + template + confirm sheets ---------- */
function EditProfileSheet({ store, close }) {
const p = store.patient;
const [f, setF] = React.useState({ name: p.name, preferredName: p.preferredName || '', dob: p.dob, sex: p.sex || p.monitoring && p.monitoring.sex || 'female' });
const existingPhoto = p.photo || p.photoUrl || null;
const [preview, setPreview] = React.useState(() => window.TCFiles.immediateUrl(existingPhoto));
const [picked, setPicked] = React.useState(undefined); // undefined = unchanged · null = removed · File = new
const [savingPhoto, setSavingPhoto] = React.useState(false);
const fileRef = React.useRef(null);
const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
// resolve a stored ref → signed URL for the live preview (once, on open)
React.useEffect(() => {
let live = true;
window.TCFiles.resolveUrl(existingPhoto).then((u) => { if (live && picked === undefined) setPreview(u); }).catch(() => {});
return () => { live = false; };
}, []);
const onPhoto = (e) => {
const file = e.target.files && e.target.files[0];
if (!file) return;
setPicked(file);
const r = new FileReader();
r.onload = () => setPreview(String(r.result));
r.readAsDataURL(file);
};
const removePhoto = () => { setPicked(null); setPreview(null); };
const AV = { bucket: 'avatars', folder: 'profile', kind: 'avatar', name: 'profile.jpg', maxDim: 512, quality: 0.85 };
const save = async () => {
if (savingPhoto) return;
let photoObj = existingPhoto;
if (picked === null) {
photoObj = null; // photo removed
} else if (picked) {
setSavingPhoto(true);
photoObj = await window.TCFiles.putImage(picked, AV); // new photo → Storage (or inline fallback)
setSavingPhoto(false);
} else if (typeof existingPhoto === 'string' && existingPhoto && window.TCsb && window.TCsb.isConfigured()) {
// migrate a legacy inlined base64 avatar up to Storage on next save
setSavingPhoto(true);
photoObj = await window.TCFiles.putImage(existingPhoto, AV);
setSavingPhoto(false);
}
store.mutate((d) => {
d.patient.name = f.name;
d.patient.preferredName = (f.preferredName || '').trim() || (f.name || '').trim().split(/\s+/)[0];
d.patient.dob = f.dob;
d.patient.sex = f.sex;
d.patient.monitoring = Object.assign({}, d.patient.monitoring, { sex: f.sex });
d.patient.photo = photoObj || null;
d.patient.photoUrl = null; // legacy base64 field retired
});
store.showToast('Profile updated', '🌱');
close();
};
return (
set('name', e.target.value)} />
set('preferredName', e.target.value)} placeholder="What should we call you?" />