From 57509c134b4d693cfd9ab72e60b45f6530415580 Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 28 Nov 2024 10:46:32 +0000
Subject: [PATCH 1/5] checkpoint

---
 web/src/ui/components/NavigationMobile.vue           | 2 +-
 web/src/ui/components/NotificationWorkoutComment.vue | 5 +++--
 web/src/utils/datetime.ts                            | 7 +++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/components/NavigationMobile.vue b/web/src/ui/components/NavigationMobile.vue
index 5ab68d85..7903dd5e 100644
--- a/web/src/ui/components/NavigationMobile.vue
+++ b/web/src/ui/components/NavigationMobile.vue
@@ -72,7 +72,7 @@ onMounted(() => {
         class="h-6 w-6"
       />
       <span
-        v-if="item.href === '/notifications'"
+        v-if="item.href === '/notifications' && unreadCount > 0"
         class="badge"
       >{{ unreadCount }}</span>
     </RouterLink>
diff --git a/web/src/ui/components/NotificationWorkoutComment.vue b/web/src/ui/components/NotificationWorkoutComment.vue
index c28bfa30..7c91c78a 100644
--- a/web/src/ui/components/NotificationWorkoutComment.vue
+++ b/web/src/ui/components/NotificationWorkoutComment.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Notification } from '@/proto/api/v1/users_pb.ts'
 
+import { formatUnixToRelativeDateTime } from '@/utils/datetime.ts'
 import { ChatBubbleLeftRightIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps<{
@@ -13,6 +14,7 @@ const props = defineProps<{
     :to="`/workouts/${props.notification.type.value?.workout?.id}`"
     class="flex w-full items-center gap-x-3"
   >
+    <ChatBubbleLeftRightIcon class="w-6 h-6" />
     <div class="w-full">
       <div>
         <span class="font-medium">
@@ -26,10 +28,9 @@ const props = defineProps<{
         workout
       </div>
       <p class="text-xs text-gray-700 mt-1">
-        1 week ago
+        {{ formatUnixToRelativeDateTime(props.notification.notifiedAtUnix) }}
       </p>
     </div>
-    <ChatBubbleLeftRightIcon class="w-6 h-6" />
   </RouterLink>
 </template>
 
diff --git a/web/src/utils/datetime.ts b/web/src/utils/datetime.ts
index bf4135ee..706af3dd 100644
--- a/web/src/utils/datetime.ts
+++ b/web/src/utils/datetime.ts
@@ -13,3 +13,10 @@ export const formatToRelativeDateTime = (date: Timestamp | undefined): string =>
   if (relative === '0 seconds ago') return 'Just now'
   return relative
 }
+
+export const formatUnixToRelativeDateTime = (timestamp: bigint | undefined): string => {
+  if (!timestamp) return ''
+  const relative = DateTime.fromSeconds(Number(timestamp)).toRelative()
+  if (relative === '0 seconds ago') return 'Just now'
+  return relative
+}

From 40348f3688ad651c834f23ee54d876d0b9f7526a Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 28 Nov 2024 10:47:20 +0000
Subject: [PATCH 2/5] checkpoint

---
 web/src/ui/components/NotificationWorkoutComment.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/ui/components/NotificationWorkoutComment.vue b/web/src/ui/components/NotificationWorkoutComment.vue
index 7c91c78a..6d5a29b3 100644
--- a/web/src/ui/components/NotificationWorkoutComment.vue
+++ b/web/src/ui/components/NotificationWorkoutComment.vue
@@ -17,12 +17,12 @@ const props = defineProps<{
     <ChatBubbleLeftRightIcon class="w-6 h-6" />
     <div class="w-full">
       <div>
-        <span class="font-medium">
+        <span class="font-semibold">
           {{ props.notification.type.value?.actor?.firstName }}
           {{ props.notification.type.value?.actor?.lastName }}
         </span>
         commented on your
-        <span class="font-medium">
+        <span class="font-semibold">
           {{ props.notification.type.value?.workout?.name }}
         </span>
         workout

From d61dcb17b67e2a1e74d6c0f1e859f10f27f29b75 Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 28 Nov 2024 10:57:43 +0000
Subject: [PATCH 3/5] checkpoint

---
 protobufs/api/v1/users.proto     |   5 +-
 server/pkg/pb/api/v1/users.pb.go | 172 ++++++++++++++++---------------
 server/pkg/repo/repo.go          |  33 +++++-
 server/rpc/v1/user.go            |  11 +-
 web/src/proto/api/v1/users_pb.ts |  13 ++-
 5 files changed, 142 insertions(+), 92 deletions(-)

diff --git a/protobufs/api/v1/users.proto b/protobufs/api/v1/users.proto
index 3c85110c..d6dbc8b1 100644
--- a/protobufs/api/v1/users.proto
+++ b/protobufs/api/v1/users.proto
@@ -75,8 +75,9 @@ message SearchResponse {
 }
 
 message ListNotificationsRequest {
-  bool only_unread = 1;
-  PaginationRequest pagination = 2 [(buf.validate.field).required = true];
+  bool unread_only = 1;
+  bool mark_as_read = 2;
+  PaginationRequest pagination = 3 [(buf.validate.field).required = true];
 }
 message ListNotificationsResponse {
   repeated Notification notifications = 1;
diff --git a/server/pkg/pb/api/v1/users.pb.go b/server/pkg/pb/api/v1/users.pb.go
index babe3463..f761c2f0 100644
--- a/server/pkg/pb/api/v1/users.pb.go
+++ b/server/pkg/pb/api/v1/users.pb.go
@@ -566,8 +566,9 @@ type ListNotificationsRequest struct {
 	sizeCache     protoimpl.SizeCache
 	unknownFields protoimpl.UnknownFields
 
-	OnlyUnread bool               `protobuf:"varint,1,opt,name=only_unread,json=onlyUnread,proto3" json:"only_unread,omitempty"`
-	Pagination *PaginationRequest `protobuf:"bytes,2,opt,name=pagination,proto3" json:"pagination,omitempty"`
+	UnreadOnly bool               `protobuf:"varint,1,opt,name=unread_only,json=unreadOnly,proto3" json:"unread_only,omitempty"`
+	MarkAsRead bool               `protobuf:"varint,2,opt,name=mark_as_read,json=markAsRead,proto3" json:"mark_as_read,omitempty"`
+	Pagination *PaginationRequest `protobuf:"bytes,3,opt,name=pagination,proto3" json:"pagination,omitempty"`
 }
 
 func (x *ListNotificationsRequest) Reset() {
@@ -600,9 +601,16 @@ func (*ListNotificationsRequest) Descriptor() ([]byte, []int) {
 	return file_api_v1_users_proto_rawDescGZIP(), []int{12}
 }
 
-func (x *ListNotificationsRequest) GetOnlyUnread() bool {
+func (x *ListNotificationsRequest) GetUnreadOnly() bool {
+	if x != nil {
+		return x.UnreadOnly
+	}
+	return false
+}
+
+func (x *ListNotificationsRequest) GetMarkAsRead() bool {
 	if x != nil {
-		return x.OnlyUnread
+		return x.MarkAsRead
 	}
 	return false
 }
@@ -861,84 +869,86 @@ var file_api_v1_users_proto_rawDesc = []byte{
 	0x72, 0x73, 0x12, 0x3a, 0x0a, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e,
 	0x18, 0x02, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1a, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e,
 	0x50, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e,
-	0x73, 0x65, 0x52, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x22, 0x7e,
-	0x0a, 0x18, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69,
-	0x6f, 0x6e, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x12, 0x1f, 0x0a, 0x0b, 0x6f, 0x6e,
-	0x6c, 0x79, 0x5f, 0x75, 0x6e, 0x72, 0x65, 0x61, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x08, 0x52,
-	0x0a, 0x6f, 0x6e, 0x6c, 0x79, 0x55, 0x6e, 0x72, 0x65, 0x61, 0x64, 0x12, 0x41, 0x0a, 0x0a, 0x70,
+	0x73, 0x65, 0x52, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x22, 0xa0,
+	0x01, 0x0a, 0x18, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74,
+	0x69, 0x6f, 0x6e, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x12, 0x1f, 0x0a, 0x0b, 0x75,
+	0x6e, 0x72, 0x65, 0x61, 0x64, 0x5f, 0x6f, 0x6e, 0x6c, 0x79, 0x18, 0x01, 0x20, 0x01, 0x28, 0x08,
+	0x52, 0x0a, 0x75, 0x6e, 0x72, 0x65, 0x61, 0x64, 0x4f, 0x6e, 0x6c, 0x79, 0x12, 0x20, 0x0a, 0x0c,
+	0x6d, 0x61, 0x72, 0x6b, 0x5f, 0x61, 0x73, 0x5f, 0x72, 0x65, 0x61, 0x64, 0x18, 0x02, 0x20, 0x01,
+	0x28, 0x08, 0x52, 0x0a, 0x6d, 0x61, 0x72, 0x6b, 0x41, 0x73, 0x52, 0x65, 0x61, 0x64, 0x12, 0x41,
+	0x0a, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18, 0x03, 0x20, 0x01,
+	0x28, 0x0b, 0x32, 0x19, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x50, 0x61, 0x67, 0x69,
+	0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x42, 0x06, 0xba,
+	0x48, 0x03, 0xc8, 0x01, 0x01, 0x52, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x22, 0x93, 0x01, 0x0a, 0x19, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69,
+	0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x12,
+	0x3a, 0x0a, 0x0d, 0x6e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73,
+	0x18, 0x01, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x14, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e,
+	0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x0d, 0x6e, 0x6f,
+	0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x12, 0x3a, 0x0a, 0x0a, 0x70,
 	0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18, 0x02, 0x20, 0x01, 0x28, 0x0b, 0x32,
-	0x19, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x50, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74,
-	0x69, 0x6f, 0x6e, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x42, 0x06, 0xba, 0x48, 0x03, 0xc8,
-	0x01, 0x01, 0x52, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x22, 0x93,
-	0x01, 0x0a, 0x19, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74,
-	0x69, 0x6f, 0x6e, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x12, 0x3a, 0x0a, 0x0d,
-	0x6e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x18, 0x01, 0x20,
-	0x03, 0x28, 0x0b, 0x32, 0x14, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4e, 0x6f, 0x74,
-	0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x0d, 0x6e, 0x6f, 0x74, 0x69, 0x66,
-	0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x12, 0x3a, 0x0a, 0x0a, 0x70, 0x61, 0x67, 0x69,
-	0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18, 0x02, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1a, 0x2e, 0x61,
-	0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x50, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e,
-	0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x52, 0x0a, 0x70, 0x61, 0x67, 0x69, 0x6e, 0x61,
-	0x74, 0x69, 0x6f, 0x6e, 0x22, 0x81, 0x02, 0x0a, 0x0c, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63,
-	0x61, 0x74, 0x69, 0x6f, 0x6e, 0x12, 0x0e, 0x0a, 0x02, 0x69, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28,
-	0x09, 0x52, 0x02, 0x69, 0x64, 0x12, 0x28, 0x0a, 0x10, 0x6e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x65,
-	0x64, 0x5f, 0x61, 0x74, 0x5f, 0x75, 0x6e, 0x69, 0x78, 0x18, 0x02, 0x20, 0x01, 0x28, 0x03, 0x52,
-	0x0e, 0x6e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x65, 0x64, 0x41, 0x74, 0x55, 0x6e, 0x69, 0x78, 0x12,
-	0x4e, 0x0a, 0x0f, 0x77, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x5f, 0x63, 0x6f, 0x6d, 0x6d, 0x65,
-	0x6e, 0x74, 0x18, 0x03, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x23, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76,
-	0x31, 0x2e, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x2e, 0x57,
-	0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x43, 0x6f, 0x6d, 0x6d, 0x65, 0x6e, 0x74, 0x48, 0x00, 0x52,
-	0x0e, 0x77, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x43, 0x6f, 0x6d, 0x6d, 0x65, 0x6e, 0x74, 0x1a,
-	0x5f, 0x0a, 0x0e, 0x57, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x43, 0x6f, 0x6d, 0x6d, 0x65, 0x6e,
-	0x74, 0x12, 0x22, 0x0a, 0x05, 0x61, 0x63, 0x74, 0x6f, 0x72, 0x18, 0x01, 0x20, 0x01, 0x28, 0x0b,
-	0x32, 0x0c, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x55, 0x73, 0x65, 0x72, 0x52, 0x05,
-	0x61, 0x63, 0x74, 0x6f, 0x72, 0x12, 0x29, 0x0a, 0x07, 0x77, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74,
-	0x18, 0x02, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x0f, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e,
-	0x57, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x52, 0x07, 0x77, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74,
-	0x42, 0x06, 0x0a, 0x04, 0x74, 0x79, 0x70, 0x65, 0x32, 0x96, 0x04, 0x0a, 0x0b, 0x55, 0x73, 0x65,
-	0x72, 0x53, 0x65, 0x72, 0x76, 0x69, 0x63, 0x65, 0x12, 0x3c, 0x0a, 0x03, 0x47, 0x65, 0x74, 0x12,
-	0x16, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x47, 0x65, 0x74, 0x55, 0x73, 0x65, 0x72,
-	0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x17, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31,
-	0x2e, 0x47, 0x65, 0x74, 0x55, 0x73, 0x65, 0x72, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65,
-	0x22, 0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x3d, 0x0a, 0x06, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77,
-	0x12, 0x15, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77,
-	0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x16, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31,
-	0x2e, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22,
-	0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x43, 0x0a, 0x08, 0x55, 0x6e, 0x66, 0x6f, 0x6c, 0x6c, 0x6f,
-	0x77, 0x12, 0x17, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x55, 0x6e, 0x66, 0x6f, 0x6c,
-	0x6c, 0x6f, 0x77, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x18, 0x2e, 0x61, 0x70, 0x69,
-	0x2e, 0x76, 0x31, 0x2e, 0x55, 0x6e, 0x66, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x52, 0x65, 0x73, 0x70,
-	0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x52, 0x0a, 0x0d, 0x4c, 0x69,
-	0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x72, 0x73, 0x12, 0x1c, 0x2e, 0x61, 0x70,
-	0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65,
-	0x72, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x1d, 0x2e, 0x61, 0x70, 0x69, 0x2e,
-	0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x72, 0x73,
-	0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x52,
-	0x0a, 0x0d, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x65, 0x73, 0x12,
-	0x1c, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c,
-	0x6c, 0x6f, 0x77, 0x65, 0x65, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x1d, 0x2e,
-	0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f,
-	0x77, 0x65, 0x65, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5,
-	0x18, 0x01, 0x12, 0x3d, 0x0a, 0x06, 0x53, 0x65, 0x61, 0x72, 0x63, 0x68, 0x12, 0x15, 0x2e, 0x61,
-	0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x53, 0x65, 0x61, 0x72, 0x63, 0x68, 0x52, 0x65, 0x71, 0x75,
-	0x65, 0x73, 0x74, 0x1a, 0x16, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x53, 0x65, 0x61,
-	0x72, 0x63, 0x68, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18,
-	0x01, 0x12, 0x5e, 0x0a, 0x11, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63,
-	0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x12, 0x20, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e,
-	0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e,
-	0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x21, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76,
-	0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69,
-	0x6f, 0x6e, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18,
-	0x01, 0x42, 0x8b, 0x01, 0x0a, 0x0a, 0x63, 0x6f, 0x6d, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31,
-	0x42, 0x0a, 0x55, 0x73, 0x65, 0x72, 0x73, 0x50, 0x72, 0x6f, 0x74, 0x6f, 0x50, 0x01, 0x5a, 0x38,
-	0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x63, 0x72, 0x6c, 0x73, 0x73,
-	0x6e, 0x2f, 0x67, 0x65, 0x74, 0x73, 0x74, 0x72, 0x6f, 0x6e, 0x67, 0x65, 0x72, 0x2f, 0x73, 0x65,
-	0x72, 0x76, 0x65, 0x72, 0x2f, 0x70, 0x6b, 0x67, 0x2f, 0x70, 0x62, 0x2f, 0x61, 0x70, 0x69, 0x2f,
-	0x76, 0x31, 0x3b, 0x61, 0x70, 0x69, 0x76, 0x31, 0xa2, 0x02, 0x03, 0x41, 0x58, 0x58, 0xaa, 0x02,
-	0x06, 0x41, 0x70, 0x69, 0x2e, 0x56, 0x31, 0xca, 0x02, 0x06, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x31,
-	0xe2, 0x02, 0x12, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x31, 0x5c, 0x47, 0x50, 0x42, 0x4d, 0x65, 0x74,
-	0x61, 0x64, 0x61, 0x74, 0x61, 0xea, 0x02, 0x07, 0x41, 0x70, 0x69, 0x3a, 0x3a, 0x56, 0x31, 0x62,
-	0x06, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
+	0x1a, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x50, 0x61, 0x67, 0x69, 0x6e, 0x61, 0x74,
+	0x69, 0x6f, 0x6e, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x52, 0x0a, 0x70, 0x61, 0x67,
+	0x69, 0x6e, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x22, 0x81, 0x02, 0x0a, 0x0c, 0x4e, 0x6f, 0x74, 0x69,
+	0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x12, 0x0e, 0x0a, 0x02, 0x69, 0x64, 0x18, 0x01,
+	0x20, 0x01, 0x28, 0x09, 0x52, 0x02, 0x69, 0x64, 0x12, 0x28, 0x0a, 0x10, 0x6e, 0x6f, 0x74, 0x69,
+	0x66, 0x69, 0x65, 0x64, 0x5f, 0x61, 0x74, 0x5f, 0x75, 0x6e, 0x69, 0x78, 0x18, 0x02, 0x20, 0x01,
+	0x28, 0x03, 0x52, 0x0e, 0x6e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x65, 0x64, 0x41, 0x74, 0x55, 0x6e,
+	0x69, 0x78, 0x12, 0x4e, 0x0a, 0x0f, 0x77, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x5f, 0x63, 0x6f,
+	0x6d, 0x6d, 0x65, 0x6e, 0x74, 0x18, 0x03, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x23, 0x2e, 0x61, 0x70,
+	0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x2e, 0x57, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x43, 0x6f, 0x6d, 0x6d, 0x65, 0x6e, 0x74,
+	0x48, 0x00, 0x52, 0x0e, 0x77, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x43, 0x6f, 0x6d, 0x6d, 0x65,
+	0x6e, 0x74, 0x1a, 0x5f, 0x0a, 0x0e, 0x57, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x43, 0x6f, 0x6d,
+	0x6d, 0x65, 0x6e, 0x74, 0x12, 0x22, 0x0a, 0x05, 0x61, 0x63, 0x74, 0x6f, 0x72, 0x18, 0x01, 0x20,
+	0x01, 0x28, 0x0b, 0x32, 0x0c, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x55, 0x73, 0x65,
+	0x72, 0x52, 0x05, 0x61, 0x63, 0x74, 0x6f, 0x72, 0x12, 0x29, 0x0a, 0x07, 0x77, 0x6f, 0x72, 0x6b,
+	0x6f, 0x75, 0x74, 0x18, 0x02, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x0f, 0x2e, 0x61, 0x70, 0x69, 0x2e,
+	0x76, 0x31, 0x2e, 0x57, 0x6f, 0x72, 0x6b, 0x6f, 0x75, 0x74, 0x52, 0x07, 0x77, 0x6f, 0x72, 0x6b,
+	0x6f, 0x75, 0x74, 0x42, 0x06, 0x0a, 0x04, 0x74, 0x79, 0x70, 0x65, 0x32, 0x96, 0x04, 0x0a, 0x0b,
+	0x55, 0x73, 0x65, 0x72, 0x53, 0x65, 0x72, 0x76, 0x69, 0x63, 0x65, 0x12, 0x3c, 0x0a, 0x03, 0x47,
+	0x65, 0x74, 0x12, 0x16, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x47, 0x65, 0x74, 0x55,
+	0x73, 0x65, 0x72, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x17, 0x2e, 0x61, 0x70, 0x69,
+	0x2e, 0x76, 0x31, 0x2e, 0x47, 0x65, 0x74, 0x55, 0x73, 0x65, 0x72, 0x52, 0x65, 0x73, 0x70, 0x6f,
+	0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x3d, 0x0a, 0x06, 0x46, 0x6f, 0x6c,
+	0x6c, 0x6f, 0x77, 0x12, 0x15, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x46, 0x6f, 0x6c,
+	0x6c, 0x6f, 0x77, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x16, 0x2e, 0x61, 0x70, 0x69,
+	0x2e, 0x76, 0x31, 0x2e, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e,
+	0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x43, 0x0a, 0x08, 0x55, 0x6e, 0x66, 0x6f,
+	0x6c, 0x6c, 0x6f, 0x77, 0x12, 0x17, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x55, 0x6e,
+	0x66, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x18, 0x2e,
+	0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x55, 0x6e, 0x66, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x52,
+	0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x52, 0x0a,
+	0x0d, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x72, 0x73, 0x12, 0x1c,
+	0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c,
+	0x6f, 0x77, 0x65, 0x72, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x1d, 0x2e, 0x61,
+	0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77,
+	0x65, 0x72, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04, 0x88, 0xb5, 0x18,
+	0x01, 0x12, 0x52, 0x0a, 0x0d, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65,
+	0x65, 0x73, 0x12, 0x1c, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74,
+	0x46, 0x6f, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x65, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74,
+	0x1a, 0x1d, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x46, 0x6f,
+	0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x65, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22,
+	0x04, 0x88, 0xb5, 0x18, 0x01, 0x12, 0x3d, 0x0a, 0x06, 0x53, 0x65, 0x61, 0x72, 0x63, 0x68, 0x12,
+	0x15, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e, 0x53, 0x65, 0x61, 0x72, 0x63, 0x68, 0x52,
+	0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x16, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x31, 0x2e,
+	0x53, 0x65, 0x61, 0x72, 0x63, 0x68, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04,
+	0x88, 0xb5, 0x18, 0x01, 0x12, 0x5e, 0x0a, 0x11, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69,
+	0x66, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x12, 0x20, 0x2e, 0x61, 0x70, 0x69, 0x2e,
+	0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63, 0x61, 0x74,
+	0x69, 0x6f, 0x6e, 0x73, 0x52, 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x1a, 0x21, 0x2e, 0x61, 0x70,
+	0x69, 0x2e, 0x76, 0x31, 0x2e, 0x4c, 0x69, 0x73, 0x74, 0x4e, 0x6f, 0x74, 0x69, 0x66, 0x69, 0x63,
+	0x61, 0x74, 0x69, 0x6f, 0x6e, 0x73, 0x52, 0x65, 0x73, 0x70, 0x6f, 0x6e, 0x73, 0x65, 0x22, 0x04,
+	0x88, 0xb5, 0x18, 0x01, 0x42, 0x8b, 0x01, 0x0a, 0x0a, 0x63, 0x6f, 0x6d, 0x2e, 0x61, 0x70, 0x69,
+	0x2e, 0x76, 0x31, 0x42, 0x0a, 0x55, 0x73, 0x65, 0x72, 0x73, 0x50, 0x72, 0x6f, 0x74, 0x6f, 0x50,
+	0x01, 0x5a, 0x38, 0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x63, 0x72,
+	0x6c, 0x73, 0x73, 0x6e, 0x2f, 0x67, 0x65, 0x74, 0x73, 0x74, 0x72, 0x6f, 0x6e, 0x67, 0x65, 0x72,
+	0x2f, 0x73, 0x65, 0x72, 0x76, 0x65, 0x72, 0x2f, 0x70, 0x6b, 0x67, 0x2f, 0x70, 0x62, 0x2f, 0x61,
+	0x70, 0x69, 0x2f, 0x76, 0x31, 0x3b, 0x61, 0x70, 0x69, 0x76, 0x31, 0xa2, 0x02, 0x03, 0x41, 0x58,
+	0x58, 0xaa, 0x02, 0x06, 0x41, 0x70, 0x69, 0x2e, 0x56, 0x31, 0xca, 0x02, 0x06, 0x41, 0x70, 0x69,
+	0x5c, 0x56, 0x31, 0xe2, 0x02, 0x12, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x31, 0x5c, 0x47, 0x50, 0x42,
+	0x4d, 0x65, 0x74, 0x61, 0x64, 0x61, 0x74, 0x61, 0xea, 0x02, 0x07, 0x41, 0x70, 0x69, 0x3a, 0x3a,
+	0x56, 0x31, 0x62, 0x06, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
 }
 
 var (
diff --git a/server/pkg/repo/repo.go b/server/pkg/repo/repo.go
index 1cd3ea61..0b9e35ba 100644
--- a/server/pkg/repo/repo.go
+++ b/server/pkg/repo/repo.go
@@ -1034,6 +1034,12 @@ func ListNotificationsWithOnlyUnread(onlyUnread bool) ListNotificationsOpt {
 	}
 }
 
+func ListNotificationsOrderByCreatedAtDESC() ListNotificationsOpt {
+	return func() qm.QueryMod {
+		return qm.OrderBy(fmt.Sprintf("%s DESC", orm.NotificationColumns.CreatedAt))
+	}
+}
+
 func (r *Repo) ListNotifications(ctx context.Context, opts ...ListNotificationsOpt) (orm.NotificationSlice, error) {
 	query := make([]qm.QueryMod, 0, len(opts))
 	for _, opt := range opts {
@@ -1059,7 +1065,7 @@ func CountNotificationsWithUserID(userID string) CountNotificationsOpt {
 	}
 }
 
-func CountNotificationsWithOnlyUnread(onlyUnread bool) CountNotificationsOpt {
+func CountNotificationsWithUnreadOnly(onlyUnread bool) CountNotificationsOpt {
 	return func() qm.QueryMod {
 		if !onlyUnread {
 			return nil
@@ -1086,8 +1092,29 @@ func (r *Repo) CountNotifications(ctx context.Context, opts ...CountNotification
 	return count, nil
 }
 
-func ListNotificationsOrderByCreatedAtDESC() ListNotificationsOpt {
+type MarkNotificationsAsReadOpt func() qm.QueryMod
+
+func MarkNotificationsAsReadByUserID(userID string) MarkNotificationsAsReadOpt {
 	return func() qm.QueryMod {
-		return qm.OrderBy(fmt.Sprintf("%s DESC", orm.NotificationColumns.CreatedAt))
+		return orm.NotificationWhere.UserID.EQ(userID)
+	}
+}
+
+func (r *Repo) MarkNotificationsAsRead(ctx context.Context, opts ...MarkNotificationsAsReadOpt) error {
+	query := make([]qm.QueryMod, 0, len(opts))
+	for _, opt := range opts {
+		query = append(query, opt())
+	}
+
+	if query == nil {
+		return nil
+	}
+
+	if _, err := orm.Notifications(query...).UpdateAll(ctx, r.executor(), orm.M{
+		orm.NotificationColumns.ReadAt: time.Now().UTC(),
+	}); err != nil {
+		return fmt.Errorf("notifications update: %w", err)
 	}
+
+	return nil
 }
diff --git a/server/rpc/v1/user.go b/server/rpc/v1/user.go
index f96a15d1..4272b035 100644
--- a/server/rpc/v1/user.go
+++ b/server/rpc/v1/user.go
@@ -164,7 +164,7 @@ func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Reques
 
 	total, err := h.repo.CountNotifications(ctx,
 		repo.CountNotificationsWithUserID(userID),
-		repo.CountNotificationsWithOnlyUnread(req.Msg.GetOnlyUnread()),
+		repo.CountNotificationsWithUnreadOnly(req.Msg.GetUnreadOnly()),
 	)
 	if err != nil {
 		log.Error("failed to count notifications", zap.Error(err))
@@ -175,7 +175,7 @@ func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Reques
 	notifications, err := h.repo.ListNotifications(ctx,
 		repo.ListNotificationsWithLimit(limit+1),
 		repo.ListNotificationsWithUserID(userID),
-		repo.ListNotificationsWithOnlyUnread(req.Msg.GetOnlyUnread()),
+		repo.ListNotificationsWithOnlyUnread(req.Msg.GetUnreadOnly()),
 		repo.ListNotificationsOrderByCreatedAtDESC(),
 	)
 	if err != nil {
@@ -223,6 +223,13 @@ func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Reques
 		return nil, connect.NewError(connect.CodeInternal, nil)
 	}
 
+	if req.Msg.GetMarkAsRead() {
+		if err = h.repo.MarkNotificationsAsRead(ctx, repo.MarkNotificationsAsReadByUserID(userID)); err != nil {
+			log.Error("failed to mark notifications as read", zap.Error(err))
+			return nil, connect.NewError(connect.CodeInternal, nil)
+		}
+	}
+
 	return &connect.Response[v1.ListNotificationsResponse]{
 		Msg: &v1.ListNotificationsResponse{
 			Notifications: parseNotificationSliceToPB(paginated.Items, payloads, users, workouts),
diff --git a/web/src/proto/api/v1/users_pb.ts b/web/src/proto/api/v1/users_pb.ts
index 5f886051..bca37056 100644
--- a/web/src/proto/api/v1/users_pb.ts
+++ b/web/src/proto/api/v1/users_pb.ts
@@ -17,7 +17,7 @@ import type { Message } from "@bufbuild/protobuf";
  * Describes the file api/v1/users.proto.
  */
 export const file_api_v1_users: GenFile = /*@__PURE__*/
-  fileDesc("ChJhcGkvdjEvdXNlcnMucHJvdG8SBmFwaS52MSImCg5HZXRVc2VyUmVxdWVzdBIUCgJpZBgBIAEoCUIIukgFcgOwAQEiLQoPR2V0VXNlclJlc3BvbnNlEhoKBHVzZXIYASABKAsyDC5hcGkudjEuVXNlciIsCg1Gb2xsb3dSZXF1ZXN0EhsKCWZvbGxvd19pZBgBIAEoCUIIukgFcgOwAQEiEAoORm9sbG93UmVzcG9uc2UiMAoPVW5mb2xsb3dSZXF1ZXN0Eh0KC3VuZm9sbG93X2lkGAEgASgJQgi6SAVyA7ABASISChBVbmZvbGxvd1Jlc3BvbnNlIjUKFExpc3RGb2xsb3dlcnNSZXF1ZXN0Eh0KC2ZvbGxvd2VyX2lkGAEgASgJQgi6SAVyA7ABASI4ChVMaXN0Rm9sbG93ZXJzUmVzcG9uc2USHwoJZm9sbG93ZXJzGAEgAygLMgwuYXBpLnYxLlVzZXIiNQoUTGlzdEZvbGxvd2Vlc1JlcXVlc3QSHQoLZm9sbG93ZWVfaWQYASABKAlCCLpIBXIDsAEBIjgKFUxpc3RGb2xsb3dlZXNSZXNwb25zZRIfCglmb2xsb3dlZXMYASADKAsyDC5hcGkudjEuVXNlciJeCg1TZWFyY2hSZXF1ZXN0EhYKBXF1ZXJ5GAEgASgJQge6SARyAhADEjUKCnBhZ2luYXRpb24YAiABKAsyGS5hcGkudjEuUGFnaW5hdGlvblJlcXVlc3RCBrpIA8gBASJdCg5TZWFyY2hSZXNwb25zZRIbCgV1c2VycxgBIAMoCzIMLmFwaS52MS5Vc2VyEi4KCnBhZ2luYXRpb24YAiABKAsyGi5hcGkudjEuUGFnaW5hdGlvblJlc3BvbnNlImYKGExpc3ROb3RpZmljYXRpb25zUmVxdWVzdBITCgtvbmx5X3VucmVhZBgBIAEoCBI1CgpwYWdpbmF0aW9uGAIgASgLMhkuYXBpLnYxLlBhZ2luYXRpb25SZXF1ZXN0Qga6SAPIAQEieAoZTGlzdE5vdGlmaWNhdGlvbnNSZXNwb25zZRIrCg1ub3RpZmljYXRpb25zGAEgAygLMhQuYXBpLnYxLk5vdGlmaWNhdGlvbhIuCgpwYWdpbmF0aW9uGAIgASgLMhouYXBpLnYxLlBhZ2luYXRpb25SZXNwb25zZSLNAQoMTm90aWZpY2F0aW9uEgoKAmlkGAEgASgJEhgKEG5vdGlmaWVkX2F0X3VuaXgYAiABKAMSPgoPd29ya291dF9jb21tZW50GAMgASgLMiMuYXBpLnYxLk5vdGlmaWNhdGlvbi5Xb3Jrb3V0Q29tbWVudEgAGk8KDldvcmtvdXRDb21tZW50EhsKBWFjdG9yGAEgASgLMgwuYXBpLnYxLlVzZXISIAoHd29ya291dBgCIAEoCzIPLmFwaS52MS5Xb3Jrb3V0QgYKBHR5cGUylgQKC1VzZXJTZXJ2aWNlEjwKA0dldBIWLmFwaS52MS5HZXRVc2VyUmVxdWVzdBoXLmFwaS52MS5HZXRVc2VyUmVzcG9uc2UiBIi1GAESPQoGRm9sbG93EhUuYXBpLnYxLkZvbGxvd1JlcXVlc3QaFi5hcGkudjEuRm9sbG93UmVzcG9uc2UiBIi1GAESQwoIVW5mb2xsb3cSFy5hcGkudjEuVW5mb2xsb3dSZXF1ZXN0GhguYXBpLnYxLlVuZm9sbG93UmVzcG9uc2UiBIi1GAESUgoNTGlzdEZvbGxvd2VycxIcLmFwaS52MS5MaXN0Rm9sbG93ZXJzUmVxdWVzdBodLmFwaS52MS5MaXN0Rm9sbG93ZXJzUmVzcG9uc2UiBIi1GAESUgoNTGlzdEZvbGxvd2VlcxIcLmFwaS52MS5MaXN0Rm9sbG93ZWVzUmVxdWVzdBodLmFwaS52MS5MaXN0Rm9sbG93ZWVzUmVzcG9uc2UiBIi1GAESPQoGU2VhcmNoEhUuYXBpLnYxLlNlYXJjaFJlcXVlc3QaFi5hcGkudjEuU2VhcmNoUmVzcG9uc2UiBIi1GAESXgoRTGlzdE5vdGlmaWNhdGlvbnMSIC5hcGkudjEuTGlzdE5vdGlmaWNhdGlvbnNSZXF1ZXN0GiEuYXBpLnYxLkxpc3ROb3RpZmljYXRpb25zUmVzcG9uc2UiBIi1GAFCiwEKCmNvbS5hcGkudjFCClVzZXJzUHJvdG9QAVo4Z2l0aHViLmNvbS9jcmxzc24vZ2V0c3Ryb25nZXIvc2VydmVyL3BrZy9wYi9hcGkvdjE7YXBpdjGiAgNBWFiqAgZBcGkuVjHKAgZBcGlcVjHiAhJBcGlcVjFcR1BCTWV0YWRhdGHqAgdBcGk6OlYxYgZwcm90bzM", [file_api_v1_options, file_api_v1_shared, file_api_v1_workouts, file_google_protobuf_timestamp, file_buf_validate_validate]);
+  fileDesc("ChJhcGkvdjEvdXNlcnMucHJvdG8SBmFwaS52MSImCg5HZXRVc2VyUmVxdWVzdBIUCgJpZBgBIAEoCUIIukgFcgOwAQEiLQoPR2V0VXNlclJlc3BvbnNlEhoKBHVzZXIYASABKAsyDC5hcGkudjEuVXNlciIsCg1Gb2xsb3dSZXF1ZXN0EhsKCWZvbGxvd19pZBgBIAEoCUIIukgFcgOwAQEiEAoORm9sbG93UmVzcG9uc2UiMAoPVW5mb2xsb3dSZXF1ZXN0Eh0KC3VuZm9sbG93X2lkGAEgASgJQgi6SAVyA7ABASISChBVbmZvbGxvd1Jlc3BvbnNlIjUKFExpc3RGb2xsb3dlcnNSZXF1ZXN0Eh0KC2ZvbGxvd2VyX2lkGAEgASgJQgi6SAVyA7ABASI4ChVMaXN0Rm9sbG93ZXJzUmVzcG9uc2USHwoJZm9sbG93ZXJzGAEgAygLMgwuYXBpLnYxLlVzZXIiNQoUTGlzdEZvbGxvd2Vlc1JlcXVlc3QSHQoLZm9sbG93ZWVfaWQYASABKAlCCLpIBXIDsAEBIjgKFUxpc3RGb2xsb3dlZXNSZXNwb25zZRIfCglmb2xsb3dlZXMYASADKAsyDC5hcGkudjEuVXNlciJeCg1TZWFyY2hSZXF1ZXN0EhYKBXF1ZXJ5GAEgASgJQge6SARyAhADEjUKCnBhZ2luYXRpb24YAiABKAsyGS5hcGkudjEuUGFnaW5hdGlvblJlcXVlc3RCBrpIA8gBASJdCg5TZWFyY2hSZXNwb25zZRIbCgV1c2VycxgBIAMoCzIMLmFwaS52MS5Vc2VyEi4KCnBhZ2luYXRpb24YAiABKAsyGi5hcGkudjEuUGFnaW5hdGlvblJlc3BvbnNlInwKGExpc3ROb3RpZmljYXRpb25zUmVxdWVzdBITCgt1bnJlYWRfb25seRgBIAEoCBIUCgxtYXJrX2FzX3JlYWQYAiABKAgSNQoKcGFnaW5hdGlvbhgDIAEoCzIZLmFwaS52MS5QYWdpbmF0aW9uUmVxdWVzdEIGukgDyAEBIngKGUxpc3ROb3RpZmljYXRpb25zUmVzcG9uc2USKwoNbm90aWZpY2F0aW9ucxgBIAMoCzIULmFwaS52MS5Ob3RpZmljYXRpb24SLgoKcGFnaW5hdGlvbhgCIAEoCzIaLmFwaS52MS5QYWdpbmF0aW9uUmVzcG9uc2UizQEKDE5vdGlmaWNhdGlvbhIKCgJpZBgBIAEoCRIYChBub3RpZmllZF9hdF91bml4GAIgASgDEj4KD3dvcmtvdXRfY29tbWVudBgDIAEoCzIjLmFwaS52MS5Ob3RpZmljYXRpb24uV29ya291dENvbW1lbnRIABpPCg5Xb3Jrb3V0Q29tbWVudBIbCgVhY3RvchgBIAEoCzIMLmFwaS52MS5Vc2VyEiAKB3dvcmtvdXQYAiABKAsyDy5hcGkudjEuV29ya291dEIGCgR0eXBlMpYECgtVc2VyU2VydmljZRI8CgNHZXQSFi5hcGkudjEuR2V0VXNlclJlcXVlc3QaFy5hcGkudjEuR2V0VXNlclJlc3BvbnNlIgSItRgBEj0KBkZvbGxvdxIVLmFwaS52MS5Gb2xsb3dSZXF1ZXN0GhYuYXBpLnYxLkZvbGxvd1Jlc3BvbnNlIgSItRgBEkMKCFVuZm9sbG93EhcuYXBpLnYxLlVuZm9sbG93UmVxdWVzdBoYLmFwaS52MS5VbmZvbGxvd1Jlc3BvbnNlIgSItRgBElIKDUxpc3RGb2xsb3dlcnMSHC5hcGkudjEuTGlzdEZvbGxvd2Vyc1JlcXVlc3QaHS5hcGkudjEuTGlzdEZvbGxvd2Vyc1Jlc3BvbnNlIgSItRgBElIKDUxpc3RGb2xsb3dlZXMSHC5hcGkudjEuTGlzdEZvbGxvd2Vlc1JlcXVlc3QaHS5hcGkudjEuTGlzdEZvbGxvd2Vlc1Jlc3BvbnNlIgSItRgBEj0KBlNlYXJjaBIVLmFwaS52MS5TZWFyY2hSZXF1ZXN0GhYuYXBpLnYxLlNlYXJjaFJlc3BvbnNlIgSItRgBEl4KEUxpc3ROb3RpZmljYXRpb25zEiAuYXBpLnYxLkxpc3ROb3RpZmljYXRpb25zUmVxdWVzdBohLmFwaS52MS5MaXN0Tm90aWZpY2F0aW9uc1Jlc3BvbnNlIgSItRgBQosBCgpjb20uYXBpLnYxQgpVc2Vyc1Byb3RvUAFaOGdpdGh1Yi5jb20vY3Jsc3NuL2dldHN0cm9uZ2VyL3NlcnZlci9wa2cvcGIvYXBpL3YxO2FwaXYxogIDQVhYqgIGQXBpLlYxygIGQXBpXFYx4gISQXBpXFYxXEdQQk1ldGFkYXRh6gIHQXBpOjpWMWIGcHJvdG8z", [file_api_v1_options, file_api_v1_shared, file_api_v1_workouts, file_google_protobuf_timestamp, file_buf_validate_validate]);
 
 /**
  * @generated from message api.v1.GetUserRequest
@@ -230,12 +230,17 @@ export const SearchResponseSchema: GenMessage<SearchResponse> = /*@__PURE__*/
  */
 export type ListNotificationsRequest = Message<"api.v1.ListNotificationsRequest"> & {
   /**
-   * @generated from field: bool only_unread = 1;
+   * @generated from field: bool unread_only = 1;
    */
-  onlyUnread: boolean;
+  unreadOnly: boolean;
 
   /**
-   * @generated from field: api.v1.PaginationRequest pagination = 2;
+   * @generated from field: bool mark_as_read = 2;
+   */
+  markAsRead: boolean;
+
+  /**
+   * @generated from field: api.v1.PaginationRequest pagination = 3;
    */
   pagination?: PaginationRequest;
 };

From 988649bcc0e1d66e777ee4c2ab2c89b33e7b4bc5 Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 28 Nov 2024 11:00:01 +0000
Subject: [PATCH 4/5] checkpoint

---
 web/src/ui/components/NavigationMobile.vue     | 5 +++--
 web/src/ui/notifications/ListNotifications.vue | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/components/NavigationMobile.vue b/web/src/ui/components/NavigationMobile.vue
index 7903dd5e..958e256d 100644
--- a/web/src/ui/components/NavigationMobile.vue
+++ b/web/src/ui/components/NavigationMobile.vue
@@ -43,10 +43,11 @@ const navigation = [
 
 const fetchUnreadNotifications = async () => {
   const req = create(ListNotificationsRequestSchema, {
-    onlyUnread: true,
+    markAsRead: false,
     pagination: {
       pageLimit: 1,
-    } as PaginationRequest
+    } as PaginationRequest,
+    unreadOnly: true,
   })
   const res = await UserClient.listNotifications(req)
   unreadCount.value = Number(res.pagination?.totalResults)
diff --git a/web/src/ui/notifications/ListNotifications.vue b/web/src/ui/notifications/ListNotifications.vue
index 02ff249c..5083637d 100644
--- a/web/src/ui/notifications/ListNotifications.vue
+++ b/web/src/ui/notifications/ListNotifications.vue
@@ -12,11 +12,12 @@ const pageToken = ref(new Uint8Array(0))
 
 const fetchUnreadNotifications = async () => {
   const req = create(ListNotificationsRequestSchema, {
-    onlyUnread: false,
+    markAsRead: true,
     pagination: {
       pageLimit: 100,
       pageToken: pageToken.value,
     } as PaginationRequest,
+    unreadOnly: false,
   })
 
   const res = await UserClient.listNotifications(req)

From 4a952c6bb8ac54f7cd8aeb801ffbfd7c7c7cfe05 Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 28 Nov 2024 11:20:54 +0000
Subject: [PATCH 5/5] disable cyclop lint

---
 server/rpc/v1/user.go                         |  2 +-
 web/src/main.ts                               |  5 +++
 web/src/stores/notifications.ts               | 34 +++++++++++++++++++
 web/src/ui/components/NavigationMobile.vue    | 33 ++++--------------
 .../ui/notifications/ListNotifications.vue    |  7 ++--
 5 files changed, 51 insertions(+), 30 deletions(-)
 create mode 100644 web/src/stores/notifications.ts

diff --git a/server/rpc/v1/user.go b/server/rpc/v1/user.go
index 4272b035..e281a703 100644
--- a/server/rpc/v1/user.go
+++ b/server/rpc/v1/user.go
@@ -158,7 +158,7 @@ func (h *userHandler) ListFollowees(ctx context.Context, req *connect.Request[v1
 	}, nil
 }
 
-func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Request[v1.ListNotificationsRequest]) (*connect.Response[v1.ListNotificationsResponse], error) {
+func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Request[v1.ListNotificationsRequest]) (*connect.Response[v1.ListNotificationsResponse], error) { //nolint:cyclop // TODO: Simplify this method.
 	log := xcontext.MustExtractLogger(ctx)
 	userID := xcontext.MustExtractUserID(ctx)
 
diff --git a/web/src/main.ts b/web/src/main.ts
index e379e96a..2ef607e4 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -3,6 +3,7 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
+import { useNotificationStore } from '@/stores/notifications.ts'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { RefreshAccessTokenOrLogout, ScheduleTokenRefresh } from '@/jwt/jwt'
 
@@ -18,9 +19,13 @@ app.use(pinia)
 
 const init = async () => {
   const authStore = useAuthStore()
+  const notificationStore = useNotificationStore()
   if (authStore.accessToken) {
     await RefreshAccessTokenOrLogout()
     authStore.setAccessTokenRefreshInterval(ScheduleTokenRefresh())
+
+    await notificationStore.fetchUnreadNotifications()
+    notificationStore.setRefreshInterval()
   }
 
   app.mount('#app')
diff --git a/web/src/stores/notifications.ts b/web/src/stores/notifications.ts
new file mode 100644
index 00000000..4ee7b6be
--- /dev/null
+++ b/web/src/stores/notifications.ts
@@ -0,0 +1,34 @@
+import type { PaginationRequest } from '@/proto/api/v1/shared_pb.ts'
+
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { create } from '@bufbuild/protobuf'
+import { UserClient } from '@/clients/clients.ts'
+import { ListNotificationsRequestSchema } from '@/proto/api/v1/users_pb.ts'
+
+export const useNotificationStore = defineStore(
+  'notifications',
+  () => {
+    const unreadCount = ref(0)
+    const refreshInterval = ref(0)
+
+    const fetchUnreadNotifications = async () => {
+      const req = create(ListNotificationsRequestSchema, {
+        markAsRead: false,
+        pagination: {
+          pageLimit: 1,
+        } as PaginationRequest,
+        unreadOnly: true,
+      })
+      const res = await UserClient.listNotifications(req)
+      unreadCount.value = Number(res.pagination?.totalResults)
+    }
+
+    const setRefreshInterval = () => {
+      // TODO: Implement Server-Sent Events for real-time updates.
+      refreshInterval.value = window.setInterval(fetchUnreadNotifications, 60000)
+    }
+
+    return { fetchUnreadNotifications, setRefreshInterval, unreadCount }
+  }
+)
diff --git a/web/src/ui/components/NavigationMobile.vue b/web/src/ui/components/NavigationMobile.vue
index 958e256d..ef259759 100644
--- a/web/src/ui/components/NavigationMobile.vue
+++ b/web/src/ui/components/NavigationMobile.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
-import type { PaginationRequest } from '@/proto/api/v1/shared_pb.ts'
-
-import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { create } from '@bufbuild/protobuf'
-import { UserClient } from '@/clients/clients.ts'
-import { ListNotificationsRequestSchema } from '@/proto/api/v1/users_pb.ts'
+import { useNotificationStore } from '@/stores/notifications.ts'
 import {
   BellIcon,
   BookOpenIcon,
@@ -22,7 +17,7 @@ import {
 } from '@heroicons/vue/24/solid'
 
 const route = useRoute()
-const unreadCount = ref(0)
+const notificationStore = useNotificationStore()
 
 const isActive = (basePath: string) => {
   return route.path.startsWith(basePath)
@@ -40,24 +35,6 @@ const navigation = [
   { href: '/notifications', icon: BellIcon, iconActive: BellSolidIcon, name: 'Notifications' },
   { href: '/profile', icon: UserIcon, iconActive: UserSolidIcon, name: 'Profile' },
 ]
-
-const fetchUnreadNotifications = async () => {
-  const req = create(ListNotificationsRequestSchema, {
-    markAsRead: false,
-    pagination: {
-      pageLimit: 1,
-    } as PaginationRequest,
-    unreadOnly: true,
-  })
-  const res = await UserClient.listNotifications(req)
-  unreadCount.value = Number(res.pagination?.totalResults)
-}
-
-onMounted(() => {
-  fetchUnreadNotifications()
-  // TODO: Implement Server-Sent Events for real-time updates.
-  setInterval(fetchUnreadNotifications, 60000)
-})
 </script>
 
 <template>
@@ -73,9 +50,11 @@ onMounted(() => {
         class="h-6 w-6"
       />
       <span
-        v-if="item.href === '/notifications' && unreadCount > 0"
+        v-if="item.href === '/notifications' && notificationStore.unreadCount > 0"
         class="badge"
-      >{{ unreadCount }}</span>
+      >
+        {{ notificationStore.unreadCount }}
+      </span>
     </RouterLink>
   </nav>
 </template>
diff --git a/web/src/ui/notifications/ListNotifications.vue b/web/src/ui/notifications/ListNotifications.vue
index 5083637d..9ddcfff1 100644
--- a/web/src/ui/notifications/ListNotifications.vue
+++ b/web/src/ui/notifications/ListNotifications.vue
@@ -4,11 +4,13 @@ import type { PaginationRequest } from '@/proto/api/v1/shared_pb.ts'
 import { onMounted, ref } from 'vue'
 import { create } from '@bufbuild/protobuf'
 import { UserClient } from '@/clients/clients.ts'
+import { useNotificationStore } from '@/stores/notifications.ts'
 import NotificationWorkoutComment from '@/ui/components/NotificationWorkoutComment.vue'
 import { ListNotificationsRequestSchema, type Notification } from '@/proto/api/v1/users_pb.ts'
 
 const notifications = ref([] as Notification[])
 const pageToken = ref(new Uint8Array(0))
+const notificationStore = useNotificationStore()
 
 const fetchUnreadNotifications = async () => {
   const req = create(ListNotificationsRequestSchema, {
@@ -29,8 +31,9 @@ const fetchUnreadNotifications = async () => {
   }
 }
 
-onMounted(() => {
-  fetchUnreadNotifications()
+onMounted(async () => {
+  await fetchUnreadNotifications()
+  await notificationStore.fetchUnreadNotifications()
 })
 </script>