Move link and unread button to the right

aleksis/core/assets/components/notifications/NotificationItem.vue

@@ -4,7 +4,8 @@
     :variables="{ id: this.notification.id }"
   >
     <template #default="{ mutate, loading, error }">
-      <v-list-item v-intersect="mutate">
+      <v-list-item :input-value="!notification.read">
+
         <v-list-item-content>
           <v-list-item-title>{{ notification.title }}</v-list-item-title>
 
@@ -18,10 +19,38 @@
           </v-list-item-subtitle>
         </v-list-item-content>
 
-        <v-list-item-action v-if="notification.link">
-          <v-btn text :href="notification.link">
-            {{ $t("notifications.more_information") }} →
-          </v-btn>
+        <v-list-item-action>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                icon
+                color="secondary"
+                v-if="!notification.read"
+                @click="mutate"
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>mdi-email-outline</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $t("notifications.mark_as_read") }}</span>
+          </v-tooltip>
+
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                icon
+                color="accent"
+                :href="notification.link"
+                v-if="notification.link"
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>mdi-open-in-new</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $t("notifications.more_information") }}</span>
+          </v-tooltip>
         </v-list-item-action>
 
         <v-list-item-icon>

aleksis/core/assets/components/notifications/myNotifications.graphql

@@ -8,6 +8,7 @@
       link
       created
       sender
+      read
     }
   }
 }

aleksis/core/assets/messages.json

@@ -2,7 +2,8 @@
   "en": {
     "notifications": {
       "more_information": "More information",
-      "no_notifications": "No notifications available yet."
+      "no_notifications": "No notifications available yet.",
+      "mark_as_read": "Mark as read"
     },
     "alerts": {
       "page_cached": "This page may contain outdated information since there is no internet connection."
@@ -40,7 +41,8 @@
   "de": {
     "notifications": {
       "more_information": "Mehr Informationen",
-      "no_notifications": "Keine Benachrichtigungen verfügbar."
+      "no_notifications": "Keine Benachrichtigungen verfügbar.",
+      "mark_as_read": "Als gelesen markieren"
     },
     "alerts": {
       "page_cached": "Diese Seite enthält vielleicht veraltete Informationen, da es keine Internetverbindung gibt."