Refactor notification component and add mark-as-read button

[Pdzly]

Replaces getPostImage function with useMemo for optimization and introduces a dedicated button to toggle notification read status. Refactor ensures better separation of concerns and an enhanced user experience with improved interactivity.

[isik-kaplan]

I was thinking about this, do you think it might make more sense to introduce another state on the backend that's is_viewed so we would have is_viewed and is_read, and when the api sends the notification it marks all of them as is viewed and we stop showing the hard-red notification symbol on the bell icon, and when they see the individual notifications they don't see hard read for viewed ones but they just see gray dots, and when you click "mark as all read" from the other PR you have they are marked as both is_viewed and is_read

I think that might be more elegant solution than having to click all one by one (which is made easier by this PR but still requires clicking one by one)

If that makes sense to you too we can merge the two PRs and go with what I described which would fix the current notifications

[Pdzly]

You mean the dot on the bell on the header? And if they got viewed then it will disappear? I guess that would be nice

[isik-kaplan]

Yep, that's the one

[Pdzly]

Ok then i have nothing against it, it would fix that "annoying" red icon, but still leave it to the user to use the "Mark all as read" or go through each

[Pdzly]

@isik-kaplan should i implement your suggestion here? Because this one solves the issue when you want only some of them read or even unread for any reason

[isik-kaplan]

@isik-kaplan should i implement your suggestion here? Because this one solves the issue when you want only some of them read or even unread for any reason

Yeah that'd be great, thank you

[Pdzly]

@isik-kaplan i would rather like to merge this as this is already a feature. And it would ibcrease the size of this PR a lot

[isik-kaplan]

If we implement what I tried to describe above do we even need to mark individual notifications as viewed? I was thinking this or that not both - though I'm not against having both either, just curious what you think here

[Pdzly]

If we implement what I tried to describe above do we even need to mark individual notifications as viewed? I was thinking this or that not both - though I'm not against having both either, just curious what you think here

Ohh i thought it would only remove the dot on the bell. I would not mark everything as read immediatly, as for example someone pinged you and you dont have time, but dont want it marked as read.

[isik-kaplan]

Oh it would remove the dot but it would also make all notifications marked as "viewed" but not "read" meaning that you'd have to go through 2 statuses.

For example:

When you have 2 new notification the big bell and each notification would have red markers

notification_id	is_viewed	is_read
1	false	false
2	false	false

When you open the notifications sheet/modal on front end we'd mark all is_viewed
The bell wouldn't have the red notification marker, would be just empty (or maybe gray marker?)
Individual notifications wouldn't have red markers but gray markers indicating is_viewed but not is_read

notification_id	is_viewed	is_read
1	true	false
2	true	false

and when you click on notification 2 to actually go to where it takes you, we'd remove all markers from that notification

notification_id	is_viewed	is_read
1	true	false
2	true	true

And we have the mark all as read button that'd make all of them marked as read

notification_id	is_viewed	is_read
1	true	true
2	true	true

Maybe swap is_viewed/is_read I can't decide which makes more sense. One of them means you saw it in the notification modal, the other means you visited the notification's target page.

---

I personally don't think it would be useful to have a button to mark individual notifications as is_read but I'm not against it either. Considering the above scenario would you still want to have the buttons on each notification?

[Pdzly]

I would personally still like to check of manually ( if i dont click on the notification itself ) and have the possibility to mark one as unread. The read would be just an attrivute for me that we can track them in two states viewed and read

If ALL are viewed then the bell wont have a red dot, if not read the notification still has the dot.