backend/src/main/java/ovh/herisson/Clyde/EndPoints/NotificationController.java

@@ -13,10 +13,12 @@ import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.bind.annotation.RestController;
 
 import lombok.AllArgsConstructor;
+import ovh.herisson.Clyde.Repositories.NotificationRepository;
 import ovh.herisson.Clyde.Responses.UnauthorizedResponse;
 import ovh.herisson.Clyde.Services.AuthenticatorService;
 import ovh.herisson.Clyde.Tables.Notification;
 import ovh.herisson.Clyde.Tables.User;
+import ovh.herisson.Clyde.Tables.Notification.Status;
 
 @RestController
 @AllArgsConstructor
@@ -24,6 +26,7 @@ import ovh.herisson.Clyde.Tables.User;
 public class NotificationController {
 
 	private AuthenticatorService authServ;
+	private NotificationRepository notifRepo;
 
 	@GetMapping("/notifications")
 	public ResponseEntity<List<Notification>> getNotifications(@RequestHeader("Authorization") String token){
@@ -37,8 +40,13 @@ public class NotificationController {
 	}
 
 	@PostMapping("/notifications/{id}")
-	public ResponseStatus archiveNotification(@RequestHeader("Authorization") String token, @PathVariable long id){
-		return null;
+	public ResponseEntity<Notification> archiveNotification(@RequestHeader("Authorization") String token, @PathVariable long id){
+		User u = authServ.getUserFromToken(token);
+		Notification n = notifRepo.findById(id).orElse(null);
+		if(u == null || n.getUser() != u){
+            return new UnauthorizedResponse<>(null);
+		}
+		n.setStatus(Status.Archived);
+		return new ResponseEntity<>(HttpStatus.OK);
 	}
-	
 }

backend/src/main/java/ovh/herisson/Clyde/Repositories/NotificationRepository.java

@@ -4,5 +4,5 @@ import org.springframework.data.repository.CrudRepository;
 
 import ovh.herisson.Clyde.Tables.Notification;
 
-interface NotificationRepository extends CrudRepository<Notification, Long> {}
+public interface NotificationRepository extends CrudRepository<Notification, Long> {}
 

backend/src/main/java/ovh/herisson/Clyde/Tables/Notification.java

@@ -8,6 +8,8 @@ import com.fasterxml.jackson.annotation.JsonIgnore;
 
 import jakarta.annotation.Nullable;
 import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
 import jakarta.persistence.Id;
 import jakarta.persistence.ManyToOne;
 import lombok.Data;
@@ -18,12 +20,14 @@ import lombok.NoArgsConstructor;
 @Entity
 public class Notification {
 
-	private enum Status {
+	public enum Status {
 		Unread, 
 		Read,
+		Archived
 	}
 
 	@Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
 	private int id;
 	
 	private String subject;

backend/src/main/java/ovh/herisson/Clyde/Tables/User.java

@@ -9,6 +9,7 @@ import org.hibernate.annotations.OnDeleteAction;
 import org.hibernate.annotations.GenericGenerator;
 import ovh.herisson.Clyde.Tables.Msg.Discussion;
 import ovh.herisson.Clyde.Tables.Msg.Message;
+import ovh.herisson.Clyde.Tables.Notification.Status;
 
 import java.util.Date;
 import java.util.List;
@@ -77,4 +78,12 @@ public class User {
         this.password = password;
         this.role = Role.Student;
     }
+
+	public List<Notification> getNotifications(){
+		for(Notification n: this.notifications){
+			if(n.getStatus() == Status.Archived)
+				this.notifications.remove(n);
+		}
+		return this.notifications;
+	}
 }

frontend/src/App.vue

@@ -49,17 +49,17 @@ window.addEventListener('hashchange', () => {
             </a></li>
         <li style="float: right;" title=login>
             <a class="icon" href="#/login">
-                <div class="fa-solid fa-user" :style="Logged ? 'color: orange' : ''" style="margin-top: 7px; margin-bottom: 3px; "></div>
+                <div class="fa-solid fa-user" :style="Logged ? 'color: red' : ''" style="margin-top: 7px; margin-bottom: 3px; "></div>
             </a></li>
-        <li style="float: right;" title=notifications>
-            <a class="icon" @click.cancel="notification = !notification">
+        <li style="float: right;" title=notifications @click="notification = !notification">
+            <a class="icon">
                 <div class="fa-solid fa-bell" :style="notifications.length != 0 ? 'color:orange': '' " style="margin-top: 7px; margin-bottom: 3px;"></div>
 										<ul v-if=notification id="notification">
-												<li v-for="notif in notifications"> {{ i18n(notif.subject) }} - {{ notif.body }}</li>	
+												<li v-for="notif in notifications" @click="archiveNotification(notif.id)"> {{ i18n(notif.subject) }} - {{ notif.body }}</li>	
 										</ul>
             </a></li>
         <li @click="active=!active" class="option"style="float: right;" title=settings>
-            <a class="icon" >
+            <a class="icon">
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
                 <div v-if="active" class="dropdown">
                   <div class="dropdown-content">{{i18n("app.language")}}</div>
@@ -262,6 +262,23 @@ window.addEventListener('hashchange', () => {
 			background-color: white;
 			width: 300px;
 			height: 600px;
+			border-radius: 10px;
+			margin: 10px;
+		}
+
+		#notification > li{
+			color: black;
+			list-style: none;
+			font-size: 0.4em;
+			display: block;
+			background-color: #00FF00A0;
+			margin: 1px;
+			border-radius: 42px;
+			padding: 10px;
+		}
+
+		#notification > li:hover{
+				background-color: #00FF0000
 		}
     
 </style>