refactor(front): notifications

front/src/components/notifications/NotificationRow.vue

@@ -9,6 +9,11 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 interface Props {
   initialItem: Notification
 }
@@ -79,13 +84,13 @@ const notificationData = computed(() => {
             user: activity.object.target?.full_username }),
           acceptFollow: {
             buttonClass: 'success',
-            icon: 'check',
+            icon: 'bi-check',
             label: t('components.notifications.NotificationRow.button.approve'),
             handler: () => approveUserFollow(userFollow)
           },
           rejectFollow: {
             buttonClass: 'danger',
-            icon: 'x',
+            icon: 'bi-x',
             label: t('components.notifications.NotificationRow.button.reject'),
             handler: () => rejectUserFollow(userFollow)
           }
@@ -175,14 +180,19 @@ const rejectUserFollow = async (follow: components["schemas"]["Follow"]) => {
 </script>
 
 <template>
-  <tr :class="[{'disabled-row': item.is_read}]">
+  <Alert
-    <td>
+    :class="[{'disabled-row': item.is_read}]"
+    :green="item.is_read"
+    :yellow="!item.is_read"
+  >
+    <Layout
+      flex
+      gap-8
+    >
       <actor-link
         class="user"
         :actor="item.activity.actor"
       />
-    </td>
-    <td>
       <!-- TODO: Make sure `notificationData.detailUrl` has a type that satisfies `RouteLocationRaw` -->
       <!-- @vue-ignore -->
       <router-link
@@ -203,52 +213,53 @@ const rejectUserFollow = async (follow: components["schemas"]["Follow"]) => {
         v-else
         :html="notificationData.message"
       />
-      <template v-if="notificationData.acceptFollow">
+      <Spacer grow />
-&nbsp;
+      <human-date :date="item.activity.creation_date" />
-        <button
+      <Button
-          :class="['ui', 'basic', 'tiny', notificationData.acceptFollow.buttonClass || '', 'button']"
-          @click="handleAction(notificationData.acceptFollow?.handler)"
-        >
-          <i
-            v-if="notificationData.acceptFollow.icon"
-            :class="[notificationData.acceptFollow.icon, 'icon']"
-          />
-          {{ notificationData.acceptFollow.label }}
-        </button>
-        <button
-          :class="['ui', 'basic', 'tiny', notificationData.rejectFollow.buttonClass || '', 'button']"
-          @click="handleAction(notificationData.rejectFollow?.handler)"
-        >
-          <i
-            v-if="notificationData.rejectFollow.icon"
-            :class="[notificationData.rejectFollow.icon, 'icon']"
-          />
-          {{ notificationData.rejectFollow.label }}
-        </button>
-      </template>
-    </td>
-    <td><human-date :date="item.activity.creation_date" /></td>
-    <td class="read collapsing">
-      <a
         v-if="item.is_read"
         href=""
         :aria-label="labels.markUnread"
         class="discrete link"
         :title="labels.markUnread"
+        icon="bi-arrow-clockwise"
+        yellow
+        square-small
         @click.prevent="read = false"
-      >
+      />
-        <i class="redo icon" />
+      <Button
-      </a>
-      <a
         v-else
         href=""
         :aria-label="labels.markRead"
         class="discrete link"
         :title="labels.markRead"
+        icon="bi-check"
+        green
+        square-small
         @click.prevent="read = true"
+      />
+    </Layout>
+    <Spacer />
+    <template
+      v-if="notificationData.acceptFollow"
+      #actions
     >
-        <i class="check icon" />
+&nbsp;
-      </a>
+      <Button
-    </td>
+        :class="['ui', 'basic', 'tiny', notificationData.acceptFollow.buttonClass || '', 'button']"
-  </tr>
+        :icon="notificationData.acceptFollow.icon"
+        green
+        @click="handleAction(notificationData.acceptFollow?.handler)"
+      >
+        {{ notificationData.acceptFollow.label }}
+      </Button>
+      <Button
+        :class="['ui', 'basic', 'tiny', notificationData.rejectFollow.buttonClass || '', 'button']"
+        :icon="notificationData.rejectFollow.icon"
+        red
+        @click="handleAction(notificationData.rejectFollow?.handler)"
+      >
+        {{ notificationData.rejectFollow.label }}
+      </Button>
+    </template>
+  </Alert>
 </template>

front/src/views/Notifications.vue

@@ -20,7 +20,6 @@ import Header from '~/components/ui/Header.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Button from '~/components/ui/Button.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Table from '~/components/ui/Table.vue'
 
 const store = useStore()
 const supportMessage = useMarkdown(() => store.state.instance.settings.instance.support_message.value)
@@ -248,8 +247,9 @@ const markAllAsRead = async () => {
 
     <Loader v-if="isLoading" />
 
-    <Table
+    <Layout
       v-else-if="notifications.count > 0"
+      stack
       :grid-template-columns="['auto', 'auto', 'auto', 'auto']"
     >
       <notification-row
@@ -257,7 +257,7 @@ const markAllAsRead = async () => {
         :key="item.id"
         :initial-item="item"
       />
-    </Table>
+    </Layout>
     <p v-else-if="additionalNotifications === 0">
       {{ t('views.Notifications.empty.notifications') }}
     </p>