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:
1 parent
4ad11ea4ee
commit
44b481e177
4 files changed
+100
No files matched your search
@@ -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 ---------- */
|
||||
|
||||
Reference in new issue
Block a user