Add in-app and OS notifications for new messages

Polls every 30s for unread messages on both kid and admin sides.
Kid app shows a tappable in-page toast and fires a browser OS
notification when a parent message arrives while the tab is open.
Admin app shows a toast and OS notification when a student replies.
Clicking the OS notification focuses the tab and opens the messages view.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-08-24 10:19:29 -04:00
1 parent 4ad11ea4ee
commit 44b481e177
4 files changed
+100

No files matched your search

+13
View File
@@ -1388,6 +1388,19 @@ body.bg-bubbles {
}
#toast.toast-error { background: var(--bad); }
#toast.toast-out { opacity: 0; transform: translateY(0.5rem); }
/* ---------- message notification toast (kid app) ---------- */
.msg-notif-toast {
position: fixed; top: 1rem; left: 50%; transform: translateX(-50%) translateY(-120%);
z-index: 9999; background: var(--accent); color: #fff;
padding: 0.75rem 1.4rem; border-radius: 14px;
font-weight: 700; font-size: 1rem; text-align: center;
box-shadow: 0 6px 24px rgba(0,0,0,0.22);
cursor: pointer; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s;
opacity: 0;
}
.msg-notif-toast.msg-notif-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.msg-notif-tap { font-size: 0.82rem; font-weight: 500; opacity: 0.85; margin-left: 0.5rem; }
.planner-pending { border: 2px dashed var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important; color: var(--accent) !important; opacity: 0.85; cursor: default; }
/* ---------- planner add-task modal ---------- */