# Visual notification for unread messages in a topic

**URL:** <https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344>\
**Category:** How do I?\
**Tags:** design, xano\
**Created:** [July 22, 2025, 10:38am UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344 "2025-07-22T10:38:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Romain](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/romain/32/12889_2.png) [@Romain](https://community.weweb.io/u/Romain)\
**Post date:** [July 22, 2025, 10:38am UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344/1 "2025-07-22T10:38:14Z")

</div>

Hello everyone!

I would like to create a notification system for my forum that tells each user when there is a new topic, or a new one in a topic that they have not yet viewed.

My forum operates with two levels. Exactly like on this forum = on the left each “category” is marked with a blue dot if new topics/messages are present in the category. Then this blue dot is found next to the subject titles.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/aa85675d5c005832c579cdac6d33f0594ef5ee5e.png)

I have absolutely no idea where to start… Has anyone already created a forum with this type of notifications?

I use xano as backend.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/80c864d5237b1c131df626401158d0db36a73cb1.png)

Do not hesitate to ask me for any necessary information!

---

<div class="post-metadata">

**Author:** ![Romain](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/romain/32/12889_2.png) [@Romain](https://community.weweb.io/u/Romain)\
**Post date:** [July 23, 2025, 8:34am UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344/2 "2025-07-23T08:34:52Z")

</div>

Has anyone ever created a system like this?

If anyone knows of any documentation for creating this, that’s great too!

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [July 24, 2025, 5:32pm UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344/3 "2025-07-24T17:32:30Z")

</div>

Hi Romain 👋

A notification system is quite complex.

The majority of the logic will happen on your backEnd.

Here are a couple posts of members trying to figure out a solution:

> [@How to implement notifications for my web app dashboard?](https://community.weweb.io/t/how-to-implement-notifications-for-my-web-app-dashboard/13840):
>
> Hello everyone, I’m also trying to implement notifications to my web app dashboard, but I’m still figuring out how am I going to build this. Could you please share your thoughts on how to build it? Should I create a table to keep all notifications that are being sent? How to trigger notifications to specific users? How to manage notifications that have already been read by the user? I’m using an icon like this one to show that there are notifications for the user. [image] Thank you.

Using a third party service:

> [@Anyone using KNOCK with WeWeb for notifications?](https://community.weweb.io/t/anyone-using-knock-with-weweb-for-notifications/7168/3):
>
> Yeah - the NPM has dependencies so it appears to need a custom. There is a repo in VUE 3 for a feed so shouldn’t be a huge lift.

Other than that I tried asking ChatGpt on how you could start to create this system and this is what it came up with:

> **ChatGPT Answer**
>
> **🧠 How to build a Discourse-like notification system with Xano + WeWeb**
> 
> To build a forum notification system like Discourse (blue dots for new topics or unread replies), you’ll need:
> 
> * * *
> 
> ### 1. **Backend data model (Xano)**
> 
> Make sure you have:
> 
> • `Users` table  
> • `Topics` table  
> • `Posts` table (each topic can have multiple posts)  
> • `UserTopicView` table (logs when a user last viewed a topic)  
> • `UserCategoryView` table (optional, for category-level dots)
> 
> * * *
> 
> ### 2. **Logic to check unread content**
> 
> When user loads the app, run a query:
> 
> • For each topic in a category → check if the `last_post_date` is **after** the `last_viewed_date` in `UserTopicView`  
> • If yes → mark as unread  
> • Sum up unread topics to show a blue dot on category  
> • For each topic → show a dot if there are unread posts
> 
> * * *
> 
> ### 3. **On topic visit**
> 
> • When user visits a topic, call a Xano function that updates or inserts the `UserTopicView` record with the current timestamp
> 
> * * *
> 
> ### 4. **In WeWeb**
> 
> Use conditional logic:
> 
> • Show the 🔵 icon if `topic.last_post_date > user_view.last_viewed_date`  
> • You can use a custom query that fetches both the topic list and the user views (via `Xano joins` or post-processed logic)
> 
> * * *
> 
> ### 5. **Performance tip**
> 
> For scale, avoid calculating everything in real-time on the frontend. You can:
> 
> • Precompute unread status in Xano responses  
> • Or store a boolean `has_unread_posts` in your `UserTopicView`, updated via backend workflows or CRONs
> 
> * * *
> 
> ### 🧰 Bonus: Starter logic for Xano functions
> 
> - **GET unread topics** : Join `Topics` with `UserTopicView` using `user_id`. Return only where `Topics.last_post_date > UserTopicView.last_viewed_date` OR `UserTopicView` record doesn’t exist.
> - **Mark topic as read** : On topic page load, send a POST to update or insert the `UserTopicView`.

---

<div class="post-metadata">

**Author:** ![Romain](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/romain/32/12889_2.png) [@Romain](https://community.weweb.io/u/Romain)\
**Post date:** [July 25, 2025, 6:44am UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344/4 "2025-07-25T06:44:47Z")

</div>

Hi Augustin, and thank you for these links! I will investigate on this base, and if i’m stuck on something more specific i’ll be back here to reach some help ! 🙂

---

<div class="post-metadata">

**Author:** ![Romain](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/romain/32/12889_2.png) [@Romain](https://community.weweb.io/u/Romain)\
**Post date:** [August 18, 2025, 1:24pm UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344/5 "2025-08-18T13:24:44Z")

</div>

Hello everyone !

Here’s just a quick update that might be useful to someone else. I finally succeeded, and indeed it was “quite complex” for a beginner like me.

The hardest part was creating the query that retrieves the information on the last visit of a subject, to then compare it to the date of the last message posted and return to “unread” if this is the case.

In the same query I also counted the “unread” subjects for each category to return the categories to “notify”.

I share this request if it can help someone later…

It was difficult, but I learned a lot. Thanks for the initial help!

 ![Capture d’écran 2025-08-18 152044](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e232e28d6632d3381ab066f85c032aacb2f23898.png) ![Capture d’écran 2025-08-18 152118](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1229a5bebea25fd297496d20a0882c9b97f46a7c.png) ![Capture d’écran 2025-08-18 152145](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/576f9cc457dd5bd1f35a05c45d353f56569a26f0.png)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4306f0a6254a2bf09caea5999f39deeded360301.png)

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [August 18, 2025, 1:58pm UTC](https://community.weweb.io/t/visual-notification-for-unread-messages-in-a-topic/19344/6 "2025-08-18T13:58:48Z")

</div>

Hi Romain!

I’m glad you managed to solve it and also that you came back to update us. 🙏

I’m sure this will be super useful for others trying to achieve the same notification system.
