From 63e2e5fdad93a2216eaec77f3aad50f78dc86d80 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 15 Jan 2024 17:25:03 +0100
Subject: [PATCH 01/19] `NotificationActions`: update CSS to be responsive

---
 .../Notifications/NotificationActions.vue     | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Notifications/NotificationActions.vue b/client/src/components/Notifications/NotificationActions.vue
index 438fafec1712..d574b5ab1796 100644
--- a/client/src/components/Notifications/NotificationActions.vue
+++ b/client/src/components/Notifications/NotificationActions.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faHourglassHalf } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BCol, BInputGroup, BRow } from "bootstrap-vue";
+import { BButton, BInputGroup } from "bootstrap-vue";
 import { formatDistanceToNow, parseISO } from "date-fns";
 
 import type { UserNotification } from "@/api/notifications";
@@ -34,9 +34,10 @@ function getNotificationExpirationTitle(notification: UserNotification) {
 </script>
 
 <template>
-    <BCol v-if="notification">
-        <BRow align-h="end" align-v="center">
-            <UtcDate class="mx-2" :date="notification.create_time" mode="elapsed" />
+    <div v-if="notification" class="notification-actions">
+        <div class="notification-actions-buttons">
+            <UtcDate :date="notification.create_time" mode="elapsed" />
+
             <BInputGroup>
                 <AsyncButton
                     v-if="!notification.seen_time"
@@ -44,6 +45,7 @@ function getNotificationExpirationTitle(notification: UserNotification) {
                     title="Mark as read"
                     icon="check"
                     :action="() => notificationsStore.updateNotification(notification, { seen: true })" />
+
                 <BButton
                     v-else-if="notification.expiration_time"
                     id="expiration-time-button"
@@ -52,12 +54,25 @@ function getNotificationExpirationTitle(notification: UserNotification) {
                     :title="getNotificationExpirationTitle(notification)">
                     <FontAwesomeIcon icon="hourglass-half" />
                 </BButton>
+
                 <AsyncButton
                     id="delete-button"
                     icon="trash"
                     title="Delete"
                     :action="() => notificationsStore.updateNotification(notification, { deleted: true })" />
             </BInputGroup>
-        </BRow>
-    </BCol>
+        </div>
+    </div>
 </template>
+
+<style scoped lang="scss">
+.notification-actions {
+    margin-left: auto;
+
+    .notification-actions-buttons {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+</style>

From ec73d08f005acf6d0a92631c5055b75f4ba11006 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 15 Jan 2024 17:29:17 +0100
Subject: [PATCH 02/19] `SharedItemNotification`: update CSS to be responsive

---
 .../Categories/SharedItemNotification.vue     | 47 +++++++++++++++----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Notifications/Categories/SharedItemNotification.vue b/client/src/components/Notifications/Categories/SharedItemNotification.vue
index 8b1ba9495bc6..9b52f9b8a05c 100644
--- a/client/src/components/Notifications/Categories/SharedItemNotification.vue
+++ b/client/src/components/Notifications/Categories/SharedItemNotification.vue
@@ -2,14 +2,13 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt, faRetweet } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BCol, BLink, BRow } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { SharedItemNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 import { absPath } from "@/utils/redirect";
 
-import Heading from "@/components/Common/Heading.vue";
 import NotificationActions from "@/components/Notifications/NotificationActions.vue";
 
 library.add(faExternalLinkAlt, faRetweet);
@@ -54,15 +53,19 @@ function markNotificationAsSeen() {
 </script>
 
 <template>
-    <BCol>
-        <BRow align-v="center">
-            <Heading size="md" :bold="!notification.seen_time" class="mb-0">
+    <div class="shared-item-notification">
+        <div class="shared-item-notification-header">
+            <div
+                :class="!props.notification.seen_time ? 'font-weight-bold' : ''"
+                class="shared-item-notification-title">
                 <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="retweet" />
                 {{ sharedItemType }} shared with you by <em>{{ content.owner_name }}</em>
-            </Heading>
+            </div>
+
             <NotificationActions :notification="notification" />
-        </BRow>
-        <BRow>
+        </div>
+
+        <div>
             <p id="notification-message" class="m-0">
                 <span>The user</span>
                 <b>{{ content.owner_name }}</b>
@@ -80,6 +83,30 @@ function markNotificationAsSeen() {
                 <em>{{ content.item_type }}</em>
                 <span> with you.</span>
             </p>
-        </BRow>
-    </BCol>
+        </div>
+    </div>
 </template>
+
+<style scoped lang="scss">
+.shared-item-notification {
+    container: shared-item-notification / inline-size;
+
+    width: 100%;
+    flex-grow: 1;
+
+    .shared-item-notification-title {
+        font-size: 1rem;
+    }
+
+    @container shared-item-notification (min-width: 576px) {
+        .shared-item-notification-header {
+            display: flex;
+            align-items: center;
+
+            .shared-item-notification-title {
+                font-size: 1.25rem;
+            }
+        }
+    }
+}
+</style>

From b96ef4be5d008e815ab2da10e9c59ae2ab532b09 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 15 Jan 2024 17:29:35 +0100
Subject: [PATCH 03/19] `MessageNotification`: update CSS to be responsive

---
 .../Categories/MessageNotification.vue        | 46 +++++++++++++++----
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Notifications/Categories/MessageNotification.vue b/client/src/components/Notifications/Categories/MessageNotification.vue
index ca62f44d8511..18eaae5af8ee 100644
--- a/client/src/components/Notifications/Categories/MessageNotification.vue
+++ b/client/src/components/Notifications/Categories/MessageNotification.vue
@@ -2,13 +2,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faInbox } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BCol, BRow } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { type MessageNotification } from "@/api/notifications";
 import { useMarkdown } from "@/composables/markdown";
 
-import Heading from "@/components/Common/Heading.vue";
 import NotificationActions from "@/components/Notifications/NotificationActions.vue";
 
 library.add(faInbox);
@@ -42,16 +40,44 @@ const notificationVariant = computed(() => {
 </script>
 
 <template>
-    <BCol>
-        <BRow align-v="center">
-            <Heading size="md" :bold="!props.options.notification.seen_time" class="mb-0">
+    <div class="message-notification">
+        <div class="message-notification-header">
+            <div
+                :class="!props.options.notification.seen_time ? 'font-weight-bold' : ''"
+                class="message-notification-title">
                 <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" />
                 {{ props.options.notification?.content?.subject }}
-            </Heading>
+            </div>
+
             <NotificationActions v-if="!props.options.previewMode" :notification="props.options.notification" />
-        </BRow>
-        <BRow>
+        </div>
+
+        <div>
             <span id="notification-message" v-html="renderMarkdown(props.options.notification.content.message)" />
-        </BRow>
-    </BCol>
+        </div>
+    </div>
 </template>
+
+<style scoped lang="scss">
+.message-notification {
+    container: message-notification / inline-size;
+
+    width: 100%;
+    flex-grow: 1;
+
+    .message-notification-title {
+        font-size: 1rem;
+    }
+
+    @container message-notification (min-width: 576px) {
+        .message-notification-header {
+            display: flex;
+            align-items: center;
+
+            .message-notification-title {
+                font-size: 1.25rem;
+            }
+        }
+    }
+}
+</style>

From c6736dcb2a278b01f0286c0b810c670d8013a075 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 15 Jan 2024 17:40:09 +0100
Subject: [PATCH 04/19] `NotificationsList`: update CSS

---
 .../Notifications/NotificationsList.vue       | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Notifications/NotificationsList.vue b/client/src/components/Notifications/NotificationsList.vue
index 978c8e253349..f4a59e8e0dff 100644
--- a/client/src/components/Notifications/NotificationsList.vue
+++ b/client/src/components/Notifications/NotificationsList.vue
@@ -144,29 +144,23 @@ function togglePreferences() {
                 No matching notifications with current filters.
             </BAlert>
 
-            <TransitionGroup name="notifications-list" tag="div">
-                <BCard
+            <TransitionGroup name="notifications-list" class="notifications-list" tag="div">
+                <div
                     v-for="item in filteredNotifications"
                     v-show="filteredNotifications.length > 0"
                     :key="item.id"
-                    class="my-2 notification-card"
+                    class="notification-card"
                     :class="!item.seen_time ? 'border-dark' : ''">
-                    <BRow align-h="start" align-v="center">
-                        <BCol cols="auto">
-                            <BButtonGroup>
-                                <FontAwesomeIcon
-                                    v-if="!item.seen_time"
-                                    size="sm"
-                                    class="unread-status position-absolute align-self-center mr-1"
-                                    icon="circle" />
-                                <BFormCheckbox
-                                    :checked="selectedNotificationIds.includes(item.id)"
-                                    @change="selectOrDeselectNotification([item])" />
-                            </BButtonGroup>
-                        </BCol>
-                        <NotificationItem :notification="item" />
-                    </BRow>
-                </BCard>
+                    <BButtonGroup>
+                        <FontAwesomeIcon v-if="!item.seen_time" size="sm" class="unread-status" icon="circle" />
+
+                        <BFormCheckbox
+                            :checked="selectedNotificationIds.includes(item.id)"
+                            @change="selectOrDeselectNotification([item])" />
+                    </BButtonGroup>
+
+                    <NotificationItem :notification="item" />
+                </div>
             </TransitionGroup>
         </div>
     </div>
@@ -175,9 +169,26 @@ function togglePreferences() {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.unread-status {
-    left: -1rem;
-    color: $brand-primary;
+.notifications-list {
+    padding-bottom: 0.5rem;
+
+    .notification-card {
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        margin-bottom: 0.5rem;
+        padding: 0.5rem;
+        background-color: transparent;
+        border: 1px solid #e5e5e5;
+        border-radius: 0.5rem;
+
+        .unread-status {
+            left: -1rem;
+            margin-right: 0.25rem;
+            color: $brand-primary;
+            align-self: center;
+        }
+    }
 }
 
 .notifications-list-enter-active {

From 71bfa75d10976e947ceac37d950775824773ed06 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 15 Jan 2024 17:41:09 +0100
Subject: [PATCH 05/19] create `NotificationsBox` component

---
 .../components/Panels/NotificationsBox.vue    | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 client/src/components/Panels/NotificationsBox.vue

diff --git a/client/src/components/Panels/NotificationsBox.vue b/client/src/components/Panels/NotificationsBox.vue
new file mode 100644
index 000000000000..f567a375186b
--- /dev/null
+++ b/client/src/components/Panels/NotificationsBox.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckDouble } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { useNotificationsStore } from "@/stores/notificationsStore";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import NotificationItem from "@/components/Notifications/NotificationItem.vue";
+
+library.add(faCheckDouble);
+
+const router = useRouter();
+const { confirm } = useConfirmDialog();
+
+const notificationsStore = useNotificationsStore();
+const { notifications, loadingNotifications } = storeToRefs(notificationsStore);
+
+const unreadNotifications = computed(() => {
+    return notifications.value.filter((notification) => !notification.seen_time);
+});
+
+async function onMarkAllAsRead() {
+    const confirmed = await confirm("Are you sure you want to mark all unread notifications as read?", {
+        title: "Mark all unread notifications as read?",
+    });
+
+    if (confirmed) {
+        await notificationsStore.updateBatchNotification({
+            notification_ids: unreadNotifications.value.map((n) => n.id),
+            changes: { seen: true },
+        });
+    }
+}
+
+function goToAllNotifications() {
+    router.push("/user/notifications");
+}
+</script>
+
+<template>
+    <div class="unified-panel" data-description="notifications" aria-labelledby="notifications-box-heading">
+        <div unselectable="on">
+            <div class="unified-panel-header-inner">
+                <nav class="d-flex justify-content-between mx-3 my-2">
+                    <h2 v-localize class="m-1 h-sm">Unread notifications</h2>
+
+                    <BButtonGroup>
+                        <BButton
+                            v-if="unreadNotifications.length > 0"
+                            v-b-tooltip.bottom.hover
+                            data-description="mark all as read"
+                            size="sm"
+                            variant="link"
+                            title="Mark all as read"
+                            @click="onMarkAllAsRead">
+                            <FontAwesomeIcon :icon="faCheckDouble" fixed-width />
+                        </BButton>
+                    </BButtonGroup>
+                </nav>
+
+                <BAlert v-if="loadingNotifications" key="loading-notifications" show class="mx-2">
+                    <LoadingSpan message="Loading notifications" />
+                </BAlert>
+
+                <div v-else-if="unreadNotifications.length" class="unified-panel-header-description mx-3 my-2">
+                    You have {{ unreadNotifications.length }} unread notifications.
+                </div>
+
+                <BAlert v-else key="no-notifications-message" show class="mx-2">
+                    No unread notifications to show.
+                </BAlert>
+            </div>
+        </div>
+
+        <TransitionGroup name="notifications-box-list" tag="div" class="unified-panel-body">
+            <div v-for="notification in unreadNotifications" :key="notification.id" class="notifications-box-card">
+                <NotificationItem :notification="notification" />
+            </div>
+        </TransitionGroup>
+
+        <BButton class="m-2" variant="primary" @click="goToAllNotifications"> All notifications </BButton>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.notifications-box-card {
+    margin: 0.5rem 0.25rem;
+    padding: 0.5rem 0.75rem;
+    background-color: white;
+    border: 1px solid #e5e5e5;
+    border-radius: 0.5rem;
+}
+
+.notifications-box-list-enter-active {
+    transition: all 0.5s ease;
+}
+
+.notifications-box-list-leave-active {
+    transition: all 0.3s ease;
+}
+
+.notifications-box-list-enter {
+    opacity: 0;
+    transform: translateY(-2rem);
+}
+
+.notifications-box-list-leave-to {
+    opacity: 0;
+    transform: translateY(-1rem);
+}
+</style>

From fdd498f2464d35641f07002f4270e8d608338374 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 15 Jan 2024 17:41:38 +0100
Subject: [PATCH 06/19] add `NotificationsBox` to `ActivityBar`

---
 client/src/components/ActivityBar/ActivityBar.vue        | 9 ++++++---
 .../components/ActivityBar/Items/NotificationItem.vue    | 2 --
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 9dc3cf03f173..0625ab342b13 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -17,6 +17,7 @@ import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import NotificationsBox from "@/components/Panels/NotificationsBox.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 
@@ -196,10 +197,9 @@ function toggleContextMenu(evt: MouseEvent) {
                     v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
                     icon="bell"
-                    :is-active="isActiveRoute('/user/notifications')"
+                    :is-active="isActiveSideBar('notifications')"
                     title="Notifications"
-                    to="/user/notifications"
-                    @click="onToggleSidebar()" />
+                    @click="onToggleSidebar('notifications')" />
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"
@@ -216,6 +216,9 @@ function toggleContextMenu(evt: MouseEvent) {
         <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
             <WorkflowBox />
         </FlexPanel>
+        <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
+            <NotificationsBox />
+        </FlexPanel>
         <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
             <ActivitySettings />
         </ContextMenu>
diff --git a/client/src/components/ActivityBar/Items/NotificationItem.vue b/client/src/components/ActivityBar/Items/NotificationItem.vue
index 1e2f6fd1b65e..84e5a05bceda 100644
--- a/client/src/components/ActivityBar/Items/NotificationItem.vue
+++ b/client/src/components/ActivityBar/Items/NotificationItem.vue
@@ -13,7 +13,6 @@ export interface Props {
     title: string;
     icon: string;
     isActive: boolean;
-    to: string;
 }
 
 defineProps<Props>();
@@ -37,6 +36,5 @@ const tooltip = computed(() =>
         :is-active="isActive"
         :title="title"
         :tooltip="tooltip"
-        :to="to"
         @click="emit('click')" />
 </template>

From d925c56ae94638b60741f49bf10578c239b38553 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:20:04 +0100
Subject: [PATCH 07/19] create `ActivityPanel` component for consistent ui

---
 .../src/components/Panels/ActivityPanel.vue   | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 client/src/components/Panels/ActivityPanel.vue

diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
new file mode 100644
index 000000000000..47480ba91d62
--- /dev/null
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+interface Props {
+    title: string;
+    goToAllTitle?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(["goToAll"]);
+</script>
+
+<template>
+    <div class="activity-panel" :data-description="props.title" aria-labelledby="activity-panel-heading">
+        <div class="activity-panel-header">
+            <nav unselectable="on" class="activity-panel-header-top">
+                <h2 id="activity-panel-heading" v-localize class="activity-panel-heading h-sm">{{ props.title }}</h2>
+
+                <slot name="header-buttons" />
+            </nav>
+
+            <slot name="header" class="activity-panel-header-description" />
+        </div>
+
+        <div class="activity-panel-body">
+            <slot />
+        </div>
+
+        <BButton
+            v-if="props.goToAllTitle"
+            class="activity-panel-footer"
+            variant="primary"
+            :data-description="`props.mainButtonText button`"
+            @click="emit('goToAll')">
+            {{ props.goToAllTitle }}
+        </BButton>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.activity-panel {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    padding: 0.5rem 0.25rem;
+    background-color: $brand-light;
+
+    .activity-panel-header {
+        padding-bottom: 0.5rem;
+
+        .activity-panel-header-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .activity-panel-heading {
+                margin: 0 !important;
+            }
+        }
+    }
+
+    .activity-panel-body {
+        flex-grow: 1;
+        height: 100%;
+        overflow-y: auto;
+        padding: 0.2rem 0.2rem;
+    }
+
+    .activity-panel-footer {
+        margin-top: 0.5rem;
+    }
+}
+</style>

From f99488e322eb6f78a617fa739e57947735fb2199 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:25:06 +0100
Subject: [PATCH 08/19] add `card-container` class to `ui.scss` base style

---
 client/src/style/scss/ui.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 30f090bd5ac2..35501d175c55 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -458,3 +458,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
         color: $brand-light;
     }
 }
+
+.card-container {
+    padding: 0.7rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    border: 0.1rem solid $brand-secondary;
+}

From e70f190f5d6ebcc61f8a4d5344ecd76b66e0ef54 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:30:26 +0100
Subject: [PATCH 09/19] rename `NotificationItem` to `NotificationCard` and add
 checkbox

---
 .../Notifications/NotificationCard.vue        | 60 +++++++++++++++++++
 .../Notifications/NotificationItem.vue        | 18 ------
 2 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/Notifications/NotificationCard.vue
 delete mode 100644 client/src/components/Notifications/NotificationItem.vue

diff --git a/client/src/components/Notifications/NotificationCard.vue b/client/src/components/Notifications/NotificationCard.vue
new file mode 100644
index 000000000000..99dc1da69a6d
--- /dev/null
+++ b/client/src/components/Notifications/NotificationCard.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { BFormCheckbox } from "bootstrap-vue";
+import { defineEmits } from "vue";
+
+import { type UserNotification } from "@/api/notifications";
+
+import MessageNotification from "./Categories/MessageNotification.vue";
+import SharedItemNotification from "./Categories/SharedItemNotification.vue";
+
+library.add(faCircle);
+
+const props = defineProps<{
+    selected?: boolean;
+    selectable?: boolean;
+    unreadBorder?: boolean;
+    notification: UserNotification;
+}>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+    <div
+        class="notification-card card-container"
+        :class="props.unreadBorder && !props.notification.seen_time ? 'border-dark' : ''">
+        <BFormCheckbox
+            v-if="props.selectable"
+            class="notification-card-select"
+            :checked="props.selected"
+            size="sm"
+            @change="emit('select', [props.notification])" />
+
+        <SharedItemNotification
+            v-if="props.notification.category === 'new_shared_item'"
+            :notification="props.notification" />
+
+        <MessageNotification v-else :options="{ notification: props.notification }" />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
+.notification-card {
+    display: flex;
+
+    .notification-card-select {
+        padding-top: 0.35rem;
+    }
+
+    .unread-status {
+        left: -1rem;
+        margin-right: 0.25rem;
+        color: $brand-primary;
+        align-self: center;
+    }
+}
+</style>
diff --git a/client/src/components/Notifications/NotificationItem.vue b/client/src/components/Notifications/NotificationItem.vue
deleted file mode 100644
index bf05199476ae..000000000000
--- a/client/src/components/Notifications/NotificationItem.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { type UserNotification } from "@/api/notifications";
-
-import MessageNotification from "./Categories/MessageNotification.vue";
-import SharedItemNotification from "./Categories/SharedItemNotification.vue";
-
-const props = defineProps<{
-    notification: UserNotification;
-}>();
-</script>
-
-<template>
-    <SharedItemNotification
-        v-if="props.notification.category === 'new_shared_item'"
-        :notification="props.notification" />
-
-    <MessageNotification v-else :options="{ notification: props.notification }" />
-</template>

From 3def865391d9ec67f7d074ed769885a986ad9a87 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:26:58 +0100
Subject: [PATCH 10/19] `NotificationsPanel`: update `ActivityPanel` and
 `NotificationCard`

---
 .../components/ActivityBar/ActivityBar.vue    |  4 +-
 ...icationsBox.vue => NotificationsPanel.vue} | 79 +++++++++----------
 2 files changed, 38 insertions(+), 45 deletions(-)
 rename client/src/components/Panels/{NotificationsBox.vue => NotificationsPanel.vue} (51%)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 0625ab342b13..cb39b997a593 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -17,7 +17,7 @@ import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import NotificationsBox from "@/components/Panels/NotificationsBox.vue";
+import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 
@@ -217,7 +217,7 @@ function toggleContextMenu(evt: MouseEvent) {
             <WorkflowBox />
         </FlexPanel>
         <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
-            <NotificationsBox />
+            <NotificationsPanel />
         </FlexPanel>
         <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
             <ActivitySettings />
diff --git a/client/src/components/Panels/NotificationsBox.vue b/client/src/components/Panels/NotificationsPanel.vue
similarity index 51%
rename from client/src/components/Panels/NotificationsBox.vue
rename to client/src/components/Panels/NotificationsPanel.vue
index f567a375186b..b0c0bd61cbe1 100644
--- a/client/src/components/Panels/NotificationsBox.vue
+++ b/client/src/components/Panels/NotificationsPanel.vue
@@ -11,7 +11,8 @@ import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import NotificationItem from "@/components/Notifications/NotificationItem.vue";
+import NotificationCard from "@/components/Notifications/NotificationCard.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
 library.add(faCheckDouble);
 
@@ -44,57 +45,49 @@ function goToAllNotifications() {
 </script>
 
 <template>
-    <div class="unified-panel" data-description="notifications" aria-labelledby="notifications-box-heading">
-        <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-localize class="m-1 h-sm">Unread notifications</h2>
-
-                    <BButtonGroup>
-                        <BButton
-                            v-if="unreadNotifications.length > 0"
-                            v-b-tooltip.bottom.hover
-                            data-description="mark all as read"
-                            size="sm"
-                            variant="link"
-                            title="Mark all as read"
-                            @click="onMarkAllAsRead">
-                            <FontAwesomeIcon :icon="faCheckDouble" fixed-width />
-                        </BButton>
-                    </BButtonGroup>
-                </nav>
-
-                <BAlert v-if="loadingNotifications" key="loading-notifications" show class="mx-2">
-                    <LoadingSpan message="Loading notifications" />
-                </BAlert>
-
-                <div v-else-if="unreadNotifications.length" class="unified-panel-header-description mx-3 my-2">
-                    You have {{ unreadNotifications.length }} unread notifications.
-                </div>
-
-                <BAlert v-else key="no-notifications-message" show class="mx-2">
-                    No unread notifications to show.
-                </BAlert>
+    <ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" @goToAll="goToAllNotifications">
+        <template v-slot:header-buttons>
+            <BButtonGroup>
+                <BButton
+                    v-b-tooltip.bottom.hover
+                    :disabled="!unreadNotifications.length"
+                    data-description="mark all as read"
+                    size="sm"
+                    variant="link"
+                    title="Mark all as read"
+                    @click="onMarkAllAsRead">
+                    <FontAwesomeIcon :icon="faCheckDouble" fixed-width />
+                </BButton>
+            </BButtonGroup>
+        </template>
+
+        <template v-slot:header>
+            <div v-if="!loadingNotifications && unreadNotifications.length">
+                You have {{ unreadNotifications.length }} unread notifications.
             </div>
-        </div>
+        </template>
 
-        <TransitionGroup name="notifications-box-list" tag="div" class="unified-panel-body">
+        <BAlert v-if="loadingNotifications" key="loading-notifications" show>
+            <LoadingSpan message="Loading notifications" />
+        </BAlert>
+
+        <BAlert v-else-if="!unreadNotifications.length" key="no-notifications-message" show>
+            No unread notifications to show.
+        </BAlert>
+
+        <TransitionGroup name="notifications-box-list" tag="div">
             <div v-for="notification in unreadNotifications" :key="notification.id" class="notifications-box-card">
-                <NotificationItem :notification="notification" />
+                <NotificationCard :notification="notification" />
             </div>
         </TransitionGroup>
-
-        <BButton class="m-2" variant="primary" @click="goToAllNotifications"> All notifications </BButton>
-    </div>
+    </ActivityPanel>
 </template>
 
 <style lang="scss" scoped>
+@import "theme/blue.scss";
+
 .notifications-box-card {
-    margin: 0.5rem 0.25rem;
-    padding: 0.5rem 0.75rem;
-    background-color: white;
-    border: 1px solid #e5e5e5;
-    border-radius: 0.5rem;
+    background-color: $body-bg;
 }
 
 .notifications-box-list-enter-active {

From 303e37ac15941903501de49f9d3038d1800dc56c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:32:28 +0100
Subject: [PATCH 11/19] update `NotificationsList` with `NotificationCard` and
 improve ui

---
 .../Notifications/NotificationsList.vue       | 163 ++++++++++--------
 1 file changed, 87 insertions(+), 76 deletions(-)

diff --git a/client/src/components/Notifications/NotificationsList.vue b/client/src/components/Notifications/NotificationsList.vue
index f4a59e8e0dff..945141215d9b 100644
--- a/client/src/components/Notifications/NotificationsList.vue
+++ b/client/src/components/Notifications/NotificationsList.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCircle, faHourglassHalf, faRetweet } from "@fortawesome/free-solid-svg-icons";
+import { faCog, faHourglassHalf, faRetweet } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup, BCard, BCol, BCollapse, BFormCheckbox, BRow } from "bootstrap-vue";
+import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
 import type { UserNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 
+import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import NotificationItem from "@/components/Notifications/NotificationItem.vue";
+import NotificationCard from "@/components/Notifications/NotificationCard.vue";
 import NotificationsPreferences from "@/components/User/Notifications/NotificationsPreferences.vue";
 
-library.add(faCircle, faHourglassHalf, faRetweet);
+library.add(faCog, faHourglassHalf, faRetweet);
 
 const notificationsStore = useNotificationsStore();
 const { notifications, loadingNotifications } = storeToRefs(notificationsStore);
@@ -65,19 +66,22 @@ function togglePreferences() {
 </script>
 
 <template>
-    <div aria-labelledby="notifications-list">
-        <div class="d-flex justify-content-between">
-            <h1 id="notifications-title" class="h-lg">Notifications</h1>
+    <div aria-labelledby="notifications-list" class="notifications-list-container">
+        <div class="notifications-list-header">
+            <Heading id="notifications-title" h1 separator inline size="xl" class="flex-grow-1 mb-2">
+                Notifications
+            </Heading>
+
             <BButton class="mb-2" variant="outline-primary" :pressed="preferencesOpen" @click="togglePreferences">
-                <FontAwesomeIcon icon="cog" />
+                <FontAwesomeIcon :icon="faCog" />
                 Notifications preferences
             </BButton>
         </div>
 
         <BCollapse v-model="preferencesOpen">
-            <BCard class="m-2">
-                <NotificationsPreferences v-if="preferencesOpen" header-size="h-md" />
-            </BCard>
+            <div class="notifications-list-preferences card-container">
+                <NotificationsPreferences v-if="preferencesOpen" header-size="h-md" :embedded="false" />
+            </div>
         </BCollapse>
 
         <BAlert v-if="loadingNotifications" show>
@@ -88,10 +92,10 @@ function togglePreferences() {
             No notifications to show.
         </BAlert>
 
-        <div v-else class="mx-1">
-            <BCard class="mb-2">
-                <BRow class="align-items-center" no-gutters>
-                    <BCol cols="1">
+        <div v-else class="notifications-list-body">
+            <div class="notifications-list-filter card-container">
+                <div class="notifications-list-filter-selection">
+                    <div>
                         <BFormCheckbox
                             :checked="allSelected"
                             :indeterminate="
@@ -101,65 +105,64 @@ function togglePreferences() {
                             @change="selectOrDeselectNotification(notifications)">
                             {{ haveSelected ? `${selectedNotificationIds.length} selected` : "Select all" }}
                         </BFormCheckbox>
-                    </BCol>
-                    <BCol v-if="haveSelected">
+                    </div>
+
+                    <div v-if="haveSelected">
                         <BButton size="sm" variant="outline-primary" @click="updateNotifications({ seen: true })">
                             <FontAwesomeIcon icon="check" />
                             Mark as read
                         </BButton>
+
                         <BButton size="sm" variant="outline-primary" @click="updateNotifications({ deleted: true })">
                             <FontAwesomeIcon icon="trash" />
                             Delete
                         </BButton>
-                    </BCol>
-                    <BCol>
-                        <BRow align-h="end" align-v="center">
-                            <span class="mx-2"> Filters: </span>
-                            <BButtonGroup>
-                                <BButton
-                                    id="show-unread-filter"
-                                    size="sm"
-                                    :pressed="showUnread"
-                                    variant="outline-primary"
-                                    @click="showUnread = !showUnread">
-                                    <FontAwesomeIcon icon="check" />
-                                    Unread
-                                </BButton>
-                                <BButton
-                                    id="show-shared-filter"
-                                    size="sm"
-                                    :pressed="showShared"
-                                    variant="outline-primary"
-                                    @click="showShared = !showShared">
-                                    <FontAwesomeIcon icon="retweet" />
-                                    Shared
-                                </BButton>
-                            </BButtonGroup>
-                        </BRow>
-                    </BCol>
-                </BRow>
-            </BCard>
+                    </div>
+                </div>
 
-            <BAlert v-show="filteredNotifications.length === 0" show variant="info">
-                No matching notifications with current filters.
-            </BAlert>
+                <div align-h="end" align-v="center">
+                    <span class="mx-2"> Filters: </span>
 
-            <TransitionGroup name="notifications-list" class="notifications-list" tag="div">
-                <div
-                    v-for="item in filteredNotifications"
-                    v-show="filteredNotifications.length > 0"
-                    :key="item.id"
-                    class="notification-card"
-                    :class="!item.seen_time ? 'border-dark' : ''">
                     <BButtonGroup>
-                        <FontAwesomeIcon v-if="!item.seen_time" size="sm" class="unread-status" icon="circle" />
+                        <BButton
+                            id="show-unread-filter"
+                            size="sm"
+                            :pressed="showUnread"
+                            variant="outline-primary"
+                            @click="showUnread = !showUnread">
+                            <FontAwesomeIcon icon="check" />
+                            Unread
+                        </BButton>
 
-                        <BFormCheckbox
-                            :checked="selectedNotificationIds.includes(item.id)"
-                            @change="selectOrDeselectNotification([item])" />
+                        <BButton
+                            id="show-shared-filter"
+                            size="sm"
+                            :pressed="showShared"
+                            variant="outline-primary"
+                            @click="showShared = !showShared">
+                            <FontAwesomeIcon icon="retweet" />
+                            Shared
+                        </BButton>
                     </BButtonGroup>
+                </div>
+            </div>
 
-                    <NotificationItem :notification="item" />
+            <BAlert v-show="filteredNotifications.length === 0" show variant="info">
+                No matching notifications with current filters.
+            </BAlert>
+
+            <TransitionGroup
+                v-show="filteredNotifications.length > 0"
+                name="notifications-list"
+                class="notifications-list"
+                tag="div">
+                <div v-for="item in filteredNotifications" :key="item.id">
+                    <NotificationCard
+                        selectable
+                        unread-border
+                        :notification="item"
+                        :selected="selectedNotificationIds?.includes(item.id)"
+                        @select="selectOrDeselectNotification" />
                 </div>
             </TransitionGroup>
         </div>
@@ -169,24 +172,32 @@ function togglePreferences() {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.notifications-list {
-    padding-bottom: 0.5rem;
-
-    .notification-card {
+.notifications-list-container {
+    .notifications-list-header {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        justify-content: start;
-        margin-bottom: 0.5rem;
-        padding: 0.5rem;
-        background-color: transparent;
-        border: 1px solid #e5e5e5;
-        border-radius: 0.5rem;
-
-        .unread-status {
-            left: -1rem;
-            margin-right: 0.25rem;
-            color: $brand-primary;
-            align-self: center;
+    }
+
+    .notifications-list-preferences {
+        margin: 0 0.5rem 1rem 0.5rem;
+    }
+
+    .notifications-list-body {
+        .notifications-list {
+            padding-bottom: 0.5rem;
+        }
+
+        .notifications-list-filter {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .notifications-list-filter-selection {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
         }
     }
 }

From 518ddd0954c03cd0dc6cbbdd927345de388adb78 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:32:53 +0100
Subject: [PATCH 12/19] update `NotificationAction` ui

---
 .../Notifications/NotificationActions.vue     | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Notifications/NotificationActions.vue b/client/src/components/Notifications/NotificationActions.vue
index d574b5ab1796..dd6251cadfc7 100644
--- a/client/src/components/Notifications/NotificationActions.vue
+++ b/client/src/components/Notifications/NotificationActions.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faHourglassHalf } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BInputGroup } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { formatDistanceToNow, parseISO } from "date-fns";
 
 import type { UserNotification } from "@/api/notifications";
@@ -35,15 +35,19 @@ function getNotificationExpirationTitle(notification: UserNotification) {
 
 <template>
     <div v-if="notification" class="notification-actions">
-        <div class="notification-actions-buttons">
-            <UtcDate :date="notification.create_time" mode="elapsed" />
+        <div class="notification-actions-body">
+            <BBadge v-b-tooltip pill>
+                <UtcDate :date="notification.create_time" mode="elapsed" />
+            </BBadge>
 
-            <BInputGroup>
+            <BButtonGroup class="notification-actions-buttons">
                 <AsyncButton
                     v-if="!notification.seen_time"
                     id="mark-as-read-button"
                     title="Mark as read"
                     icon="check"
+                    size="sm"
+                    class="inline-icon-button"
                     :action="() => notificationsStore.updateNotification(notification, { seen: true })" />
 
                 <BButton
@@ -51,16 +55,20 @@ function getNotificationExpirationTitle(notification: UserNotification) {
                     id="expiration-time-button"
                     v-b-tooltip.hover
                     variant="link"
+                    size="sm"
+                    class="inline-icon-button"
                     :title="getNotificationExpirationTitle(notification)">
-                    <FontAwesomeIcon icon="hourglass-half" />
+                    <FontAwesomeIcon icon="hourglass-half" fixed-width />
                 </BButton>
 
                 <AsyncButton
                     id="delete-button"
                     icon="trash"
                     title="Delete"
+                    size="sm"
+                    class="inline-icon-button"
                     :action="() => notificationsStore.updateNotification(notification, { deleted: true })" />
-            </BInputGroup>
+            </BButtonGroup>
         </div>
     </div>
 </template>
@@ -69,10 +77,15 @@ function getNotificationExpirationTitle(notification: UserNotification) {
 .notification-actions {
     margin-left: auto;
 
-    .notification-actions-buttons {
+    .notification-actions-body {
         display: flex;
+        gap: 0.5rem;
         align-items: center;
         justify-content: space-between;
+
+        .notification-actions-buttons {
+            gap: 0.5rem;
+        }
     }
 }
 </style>

From da340fc03c978f7f360245fbe8a7fdff7f1f541c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:33:38 +0100
Subject: [PATCH 13/19] update `MessageNotification` ui

---
 .../Notifications/Categories/MessageNotification.vue         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Notifications/Categories/MessageNotification.vue b/client/src/components/Notifications/Categories/MessageNotification.vue
index 18eaae5af8ee..9b6dcdfe1725 100644
--- a/client/src/components/Notifications/Categories/MessageNotification.vue
+++ b/client/src/components/Notifications/Categories/MessageNotification.vue
@@ -45,7 +45,7 @@ const notificationVariant = computed(() => {
             <div
                 :class="!props.options.notification.seen_time ? 'font-weight-bold' : ''"
                 class="message-notification-title">
-                <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" />
+                <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" fixed-width size="sm" />
                 {{ props.options.notification?.content?.subject }}
             </div>
 
@@ -67,6 +67,9 @@ const notificationVariant = computed(() => {
 
     .message-notification-title {
         font-size: 1rem;
+        display: flex;
+        gap: 0.2rem;
+        align-items: center;
     }
 
     @container message-notification (min-width: 576px) {

From 38f13cca0815b4f1cd5fac7e9cc02ae163769f9a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:34:55 +0100
Subject: [PATCH 14/19] update `NotificationPreferences` ui

---
 .../NotificationsPreferences.vue              | 218 +++++++++++-------
 1 file changed, 131 insertions(+), 87 deletions(-)

diff --git a/client/src/components/User/Notifications/NotificationsPreferences.vue b/client/src/components/User/Notifications/NotificationsPreferences.vue
index deda784f691b..5d6f0c3ca017 100644
--- a/client/src/components/User/Notifications/NotificationsPreferences.vue
+++ b/client/src/components/User/Notifications/NotificationsPreferences.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BCard, BCol, BFormCheckbox, BRow } from "bootstrap-vue";
+import { BAlert, BButton, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import {
@@ -19,15 +19,19 @@ import {
 } from "@/composables/utils/pushNotifications";
 
 import AsyncButton from "@/components/Common/AsyncButton.vue";
+import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faExclamationCircle);
 
-defineProps({
-    headerSize: {
-        type: String,
-        default: "h-lg",
-    },
+interface NotificationsPreferencesProps {
+    embedded?: boolean;
+    headerSize?: string;
+}
+
+const props = withDefaults(defineProps<NotificationsPreferencesProps>(), {
+    embedded: true,
+    headerSize: "h-lg",
 });
 
 const { config } = useConfig(true);
@@ -96,12 +100,23 @@ watch(
 
 <template>
     <section class="notifications-preferences">
-        <h1 v-localize :class="headerSize">Manage notifications preferences</h1>
-
-        <span v-if="config.enable_notification_system" v-localize class="mb-2">
+        <Heading
+            h1
+            :separator="props.embedded"
+            inline
+            size="xl"
+            class="notifications-preferences-header"
+            :class="headerSize">
+            Manage notifications preferences
+        </Heading>
+
+        <div v-if="config.enable_notification_system" v-localize class="notifications-preferences-description">
             You can manage notifications channels and preferences here.
-        </span>
-        <span v-else v-localize class="mb-2"> You can manage push notifications preferences here. </span>
+        </div>
+
+        <div v-else v-localize class="notifications-preferences-description">
+            You can manage push notifications preferences here.
+        </div>
 
         <BAlert v-if="errorMessage" show dismissible fade variant="warning" @dismissed="errorMessage = null">
             {{ errorMessage }}
@@ -111,89 +126,118 @@ watch(
             <LoadingSpan message="Loading notifications preferences" />
         </BAlert>
 
-        <BRow v-else-if="showPreferences" class="mx-1">
-            <BCol v-for="category in categories" :key="category">
-                <BCard class="my-2 px-2">
-                    <BRow align-h="between" align-v="center">
-                        <BCol cols="auto" class="mx-2">
-                            <BRow>
-                                <span v-localize class="category-title">{{ capitalizeWords(category) }}</span>
-                            </BRow>
-                            <BRow v-if="categoryDescriptionMap[category]">
-                                <span v-localize class="category-description">
-                                    {{ categoryDescriptionMap[category] }}
-                                </span>
-                            </BRow>
-                        </BCol>
-                        <BCol cols="auto" class="p-0">
-                            <BFormCheckbox
-                                v-model="notificationsPreferences[category].enabled"
-                                v-b-tooltip.hover
-                                :title="
-                                    notificationsPreferences[category].enabled
-                                        ? 'Disable notifications'
-                                        : 'Enable notifications'
-                                "
-                                switch />
-                        </BCol>
-                    </BRow>
-                    <BRow class="p-2">
-                        <BCol
-                            v-for="channel in Object.keys(notificationsPreferences[category].channels)"
-                            :key="channel"
-                            class="d-flex align-items-center">
-                            <BFormCheckbox
-                                v-model="notificationsPreferences[category].channels[channel]"
-                                v-localize
-                                :disabled="!notificationsPreferences[category].enabled">
-                                {{ capitalizeWords(channel) }}
-                            </BFormCheckbox>
-                            <FontAwesomeIcon
-                                v-if="channel === 'push'"
-                                v-b-tooltip.hover="'Push notifications need to be enabled'"
-                                class="mx-2"
-                                icon="exclamation-circle" />
-                        </BCol>
-                    </BRow>
-                </BCard>
-            </BCol>
-        </BRow>
-
-        <BRow v-if="!loading" class="m-1" align-h="center">
-            <BCard v-if="browserSupportsPushNotifications() && !pushNotificationsGranted" class="my-2">
-                Allow push and tab notifications. To disable, revoke the site notification privilege in your browser.
-                <BButton
-                    v-b-tooltip.hover
-                    class="mx-2"
-                    title="Enable push notifications"
-                    @click="onTogglePushNotifications">
-                    Enable push notifications
-                </BButton>
-            </BCard>
-            <BAlert
-                v-else-if="browserSupportsPushNotifications() && pushNotificationsGranted"
-                show
-                variant="info"
-                class="my-2">
-                <FontAwesomeIcon icon="check-circle" />
-                Push notifications are enabled. You can disable them by revoking the site notification privilege in your
-                browser.
-            </BAlert>
-            <BAlert v-else show variant="warning" class="my-2">
-                <FontAwesomeIcon icon="exclamation-circle" />
-                Push notifications are not supported by this browser. You can still receive in-app notifications.
-            </BAlert>
-        </BRow>
-
-        <BRow v-if="!loading && config.enable_notification_system" class="m-1" align-h="center">
+        <div v-else-if="showPreferences" class="notifications-preferences-body">
+            <div v-for="category in categories" :key="category" class="card-container">
+                <div class="category-header">
+                    <div>
+                        <div v-localize class="category-title">{{ capitalizeWords(category) }}</div>
+
+                        <div v-if="categoryDescriptionMap[category]" v-localize class="category-description">
+                            {{ categoryDescriptionMap[category] }}
+                        </div>
+                    </div>
+
+                    <BFormCheckbox
+                        v-model="notificationsPreferences[category].enabled"
+                        v-b-tooltip.hover
+                        :title="
+                            notificationsPreferences[category].enabled
+                                ? 'Disable notifications'
+                                : 'Enable notifications'
+                        "
+                        switch />
+                </div>
+
+                <div
+                    v-for="channel in Object.keys(notificationsPreferences[category].channels)"
+                    :key="channel"
+                    class="category-channel">
+                    <BFormCheckbox
+                        v-model="notificationsPreferences[category].channels[channel]"
+                        v-localize
+                        :disabled="!notificationsPreferences[category].enabled">
+                        {{ capitalizeWords(channel) }}
+                    </BFormCheckbox>
+
+                    <FontAwesomeIcon
+                        v-if="channel === 'push'"
+                        v-b-tooltip.hover="'Push notifications need to be enabled'"
+                        class="mx-2"
+                        icon="exclamation-circle" />
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-if="!loading && browserSupportsPushNotifications() && !pushNotificationsGranted"
+            class="card-container push-notifications-notice">
+            Allow push and tab notifications. To disable, revoke the site notification privilege in your browser.
+            <BButton
+                v-b-tooltip.hover
+                class="mx-2"
+                title="Enable push notifications"
+                @click="onTogglePushNotifications">
+                Enable push notifications
+            </BButton>
+        </div>
+
+        <BAlert
+            v-else-if="!loading && browserSupportsPushNotifications() && pushNotificationsGranted"
+            show
+            variant="info"
+            class="my-2">
+            <FontAwesomeIcon icon="check-circle" />
+            Push notifications are enabled. You can disable them by revoking the site notification privilege in your
+            browser.
+        </BAlert>
+
+        <BAlert v-else-if="!loading" show variant="warning" class="my-2">
+            <FontAwesomeIcon icon="exclamation-circle" />
+            Push notifications are not supported by this browser. You can still receive in-app notifications.
+        </BAlert>
+
+        <div v-if="!loading && config.enable_notification_system" class="d-flex justify-content-center">
             <AsyncButton :action="updateNotificationsPreferences" icon="save" variant="primary" size="md">
                 <span v-localize>Save</span>
             </AsyncButton>
-        </BRow>
+        </div>
     </section>
 </template>
 
 <style scoped lang="scss">
+.notifications-preferences {
+    .notifications-preferences-header {
+        flex-grow: 1;
+    }
+
+    .notifications-preferences-description {
+        margin-bottom: 1rem;
+    }
+
+    .notifications-preferences-body {
+        display: flex;
+        justify-content: space-around;
+
+        .category-header {
+            gap: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+        }
+
+        .category-channel {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .push-notifications-notice {
+        margin: 0.5rem auto;
+        width: fit-content;
+    }
+}
+
 .category-title {
     font-weight: bold;
 }

From 1afd4a8a1af2eb5f4897b4c188337ff98aabbe21 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:35:23 +0100
Subject: [PATCH 15/19] rename `WorkflowBox` to `WorkflowPanel`

---
 client/src/components/ActivityBar/ActivityBar.vue             | 4 ++--
 .../components/Panels/{WorkflowBox.vue => WorkflowPanel.vue}  | 0
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename client/src/components/Panels/{WorkflowBox.vue => WorkflowPanel.vue} (100%)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index cb39b997a593..f1aec81e937f 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -19,7 +19,7 @@ import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
-import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
+import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 
 const { config, isConfigLoaded } = useConfig();
 
@@ -214,7 +214,7 @@ function toggleContextMenu(evt: MouseEvent) {
             <ToolPanel />
         </FlexPanel>
         <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
-            <WorkflowBox />
+            <WorkflowPanel />
         </FlexPanel>
         <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
             <NotificationsPanel />
diff --git a/client/src/components/Panels/WorkflowBox.vue b/client/src/components/Panels/WorkflowPanel.vue
similarity index 100%
rename from client/src/components/Panels/WorkflowBox.vue
rename to client/src/components/Panels/WorkflowPanel.vue

From 1a045dc2a06b1e00341cebbbc6f7081aa4f6e401 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 22 Jan 2024 16:55:17 +0100
Subject: [PATCH 16/19] fix `NotificationsList` test error

---
 .../src/components/Notifications/NotificationCard.vue  |  9 +--------
 .../components/Notifications/NotificationsList.test.ts | 10 +++++++---
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Notifications/NotificationCard.vue b/client/src/components/Notifications/NotificationCard.vue
index 99dc1da69a6d..e6b71cdb667e 100644
--- a/client/src/components/Notifications/NotificationCard.vue
+++ b/client/src/components/Notifications/NotificationCard.vue
@@ -24,7 +24,7 @@ const emit = defineEmits(["select"]);
 <template>
     <div
         class="notification-card card-container"
-        :class="props.unreadBorder && !props.notification.seen_time ? 'border-dark' : ''">
+        :class="props.unreadBorder && !props.notification.seen_time ? 'border-dark unread-notification' : ''">
         <BFormCheckbox
             v-if="props.selectable"
             class="notification-card-select"
@@ -49,12 +49,5 @@ const emit = defineEmits(["select"]);
     .notification-card-select {
         padding-top: 0.35rem;
     }
-
-    .unread-status {
-        left: -1rem;
-        margin-right: 0.25rem;
-        color: $brand-primary;
-        align-self: center;
-    }
 }
 </style>
diff --git a/client/src/components/Notifications/NotificationsList.test.ts b/client/src/components/Notifications/NotificationsList.test.ts
index 4df924464e02..7c8d54a91ecb 100644
--- a/client/src/components/Notifications/NotificationsList.test.ts
+++ b/client/src/components/Notifications/NotificationsList.test.ts
@@ -1,6 +1,6 @@
 import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { setActivePinia } from "pinia";
 
@@ -22,9 +22,12 @@ async function mountNotificationsList() {
     const notificationsStore = useNotificationsStore(pinia);
     notificationsStore.notifications = mergeObjectListsById(FAKE_NOTIFICATIONS, []);
 
-    const wrapper = shallowMount(NotificationsList, {
+    const wrapper = mount(NotificationsList, {
         localVue,
         pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
     });
 
     await flushPromises();
@@ -34,9 +37,10 @@ async function mountNotificationsList() {
 describe("NotificationsList", () => {
     it("render and count unread notifications", async () => {
         const wrapper = await mountNotificationsList();
+
         expect(wrapper.findAll(".notification-card")).toHaveLength(messageCount + sharedItemCount);
 
-        const unreadNotification = wrapper.findAll(".unread-status");
+        const unreadNotification = wrapper.findAll(".unread-notification");
         expect(unreadNotification).toHaveLength(FAKE_NOTIFICATIONS.filter((n) => !n.seen_time).length);
     });
 

From 5b5635db209b738fe8d7852de3edece6f14b02b7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 23 Jan 2024 16:03:20 +0100
Subject: [PATCH 17/19] create `style.scss` using css grid for notification
 content

---
 .../Notifications/Categories/style.scss       | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 client/src/components/Notifications/Categories/style.scss

diff --git a/client/src/components/Notifications/Categories/style.scss b/client/src/components/Notifications/Categories/style.scss
new file mode 100644
index 000000000000..d00b1c48a8bd
--- /dev/null
+++ b/client/src/components/Notifications/Categories/style.scss
@@ -0,0 +1,39 @@
+.notification-container {
+    container: notification-content / inline-size;
+
+    width: 100%;
+    display: grid;
+    align-items: center;
+    grid-template-rows: auto auto auto;
+
+    .notification-title {
+        display: flex;
+        gap: 0.2rem;
+        font-size: 1rem;
+        flex-flow: wrap;
+        align-items: center;
+    }
+
+    @container notification-content (min-width: 576px) {
+        .notification-header {
+            .notification-title {
+                font-size: 1.25rem;
+            }
+        }
+
+        .notification-actions {
+            grid-area: 1/2;
+            justify-self: end;
+        }
+
+        .notification-message {
+            grid-column: 1/3;
+        }
+    }
+
+    @container notification-content (max-width: 576px) {
+        .notification-message {
+            margin-bottom: 0.5rem;
+        }
+    }
+}

From 80b0cd5946563acb7f209229ec56b866c3c6d0a2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 23 Jan 2024 16:04:00 +0100
Subject: [PATCH 18/19] update notification categories with new style file

---
 .../Categories/Categories.test.ts             |  7 +-
 .../Categories/MessageNotification.vue        | 49 ++++--------
 .../Categories/SharedItemNotification.vue     | 76 +++++++------------
 .../Notifications/NotificationActions.vue     |  4 +-
 4 files changed, 46 insertions(+), 90 deletions(-)

diff --git a/client/src/components/Notifications/Categories/Categories.test.ts b/client/src/components/Notifications/Categories/Categories.test.ts
index f471dbaa6149..1e3664fe8375 100644
--- a/client/src/components/Notifications/Categories/Categories.test.ts
+++ b/client/src/components/Notifications/Categories/Categories.test.ts
@@ -52,11 +52,8 @@ describe("Notifications categories", () => {
             notification,
         });
 
-        expect(wrapper.text()).toContain(
-            `${capitalizeFirstLetter(notification.content.item_type)} shared with you by ${
-                notification.content.owner_name
-            }`
-        );
+        expect(wrapper.text()).toContain(`${capitalizeFirstLetter(notification.content.item_type)}`);
+        expect(wrapper.text()).toContain(`shared with you by ${notification.content.owner_name}`);
 
         expect(wrapper.find("#notification-message").text()).toContain(
             `The user ${notification.content.owner_name} shared`
diff --git a/client/src/components/Notifications/Categories/MessageNotification.vue b/client/src/components/Notifications/Categories/MessageNotification.vue
index 9b6dcdfe1725..b313b961454b 100644
--- a/client/src/components/Notifications/Categories/MessageNotification.vue
+++ b/client/src/components/Notifications/Categories/MessageNotification.vue
@@ -40,47 +40,26 @@ const notificationVariant = computed(() => {
 </script>
 
 <template>
-    <div class="message-notification">
-        <div class="message-notification-header">
-            <div
-                :class="!props.options.notification.seen_time ? 'font-weight-bold' : ''"
-                class="message-notification-title">
-                <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" fixed-width size="sm" />
+    <div class="notification-container">
+        <div class="notification-header">
+            <div :class="!props.options.notification.seen_time ? 'font-weight-bold' : ''" class="notification-title">
+                <FontAwesomeIcon :class="`text-${notificationVariant}`" :icon="faInbox" fixed-width size="sm" />
                 {{ props.options.notification?.content?.subject }}
             </div>
-
-            <NotificationActions v-if="!props.options.previewMode" :notification="props.options.notification" />
         </div>
 
-        <div>
-            <span id="notification-message" v-html="renderMarkdown(props.options.notification.content.message)" />
-        </div>
+        <NotificationActions
+            v-if="!props.options.previewMode"
+            class="notification-actions"
+            :notification="props.options.notification" />
+
+        <span
+            id="notification-message"
+            class="notification-message"
+            v-html="renderMarkdown(props.options.notification.content.message)" />
     </div>
 </template>
 
 <style scoped lang="scss">
-.message-notification {
-    container: message-notification / inline-size;
-
-    width: 100%;
-    flex-grow: 1;
-
-    .message-notification-title {
-        font-size: 1rem;
-        display: flex;
-        gap: 0.2rem;
-        align-items: center;
-    }
-
-    @container message-notification (min-width: 576px) {
-        .message-notification-header {
-            display: flex;
-            align-items: center;
-
-            .message-notification-title {
-                font-size: 1.25rem;
-            }
-        }
-    }
-}
+@import "style.scss";
 </style>
diff --git a/client/src/components/Notifications/Categories/SharedItemNotification.vue b/client/src/components/Notifications/Categories/SharedItemNotification.vue
index 9b52f9b8a05c..b141c87ed308 100644
--- a/client/src/components/Notifications/Categories/SharedItemNotification.vue
+++ b/client/src/components/Notifications/Categories/SharedItemNotification.vue
@@ -34,6 +34,7 @@ const sharedItemType = computed(() => {
         return "Item";
     }
 });
+
 const notificationVariant = computed(() => {
     switch (props.notification.variant) {
         case "urgent":
@@ -53,60 +54,37 @@ function markNotificationAsSeen() {
 </script>
 
 <template>
-    <div class="shared-item-notification">
-        <div class="shared-item-notification-header">
-            <div
-                :class="!props.notification.seen_time ? 'font-weight-bold' : ''"
-                class="shared-item-notification-title">
-                <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="retweet" />
-                {{ sharedItemType }} shared with you by <em>{{ content.owner_name }}</em>
+    <div class="notification-container">
+        <div class="notification-header">
+            <div :class="!props.notification.seen_time ? 'font-weight-bold' : ''" class="notification-title">
+                <FontAwesomeIcon :class="`text-${notificationVariant}`" :icon="faRetweet" fixed-width size="sm" />
+                {{ sharedItemType }}
+                shared with you by <em>{{ content.owner_name }}</em>
             </div>
-
-            <NotificationActions :notification="notification" />
         </div>
 
-        <div>
-            <p id="notification-message" class="m-0">
-                <span>The user</span>
-                <b>{{ content.owner_name }}</b>
-                <span>shared </span>
-                <BLink
-                    v-b-tooltip.bottom
-                    :title="`View ${content.item_type} in new tab`"
-                    class="text-primary"
-                    :href="sharedItemUrl"
-                    target="_blank"
-                    @click="markNotificationAsSeen()">
-                    {{ content.item_name }}
-                    <FontAwesomeIcon icon="external-link-alt" />
-                </BLink>
-                <em>{{ content.item_type }}</em>
-                <span> with you.</span>
-            </p>
-        </div>
+        <NotificationActions class="notification-actions" :notification="notification" />
+
+        <p id="notification-message" class="notification-message">
+            <span>The user</span>
+            <b>{{ content.owner_name }}</b>
+            <span>shared </span>
+            <BLink
+                v-b-tooltip.bottom
+                :title="`View ${content.item_type} in new tab`"
+                class="text-primary"
+                :href="sharedItemUrl"
+                target="_blank"
+                @click="markNotificationAsSeen()">
+                {{ content.item_name }}
+                <FontAwesomeIcon :icon="faExternalLinkAlt" fixed-width size="sm" />
+            </BLink>
+            <em>{{ content.item_type }}</em>
+            <span> with you.</span>
+        </p>
     </div>
 </template>
 
 <style scoped lang="scss">
-.shared-item-notification {
-    container: shared-item-notification / inline-size;
-
-    width: 100%;
-    flex-grow: 1;
-
-    .shared-item-notification-title {
-        font-size: 1rem;
-    }
-
-    @container shared-item-notification (min-width: 576px) {
-        .shared-item-notification-header {
-            display: flex;
-            align-items: center;
-
-            .shared-item-notification-title {
-                font-size: 1.25rem;
-            }
-        }
-    }
-}
+@import "style.scss";
 </style>
diff --git a/client/src/components/Notifications/NotificationActions.vue b/client/src/components/Notifications/NotificationActions.vue
index dd6251cadfc7..ebcd9a469893 100644
--- a/client/src/components/Notifications/NotificationActions.vue
+++ b/client/src/components/Notifications/NotificationActions.vue
@@ -75,7 +75,9 @@ function getNotificationExpirationTitle(notification: UserNotification) {
 
 <style scoped lang="scss">
 .notification-actions {
-    margin-left: auto;
+    @container notification-content (max-width: 576px) {
+        grid-row: 3;
+    }
 
     .notification-actions-body {
         display: flex;

From 150f0bf6de25c9b51ae16a6848f61f70b5405618 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 31 Jan 2024 13:54:07 +0100
Subject: [PATCH 19/19] Update `NotificationCard`: remove compiler macro import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 client/src/components/Notifications/NotificationCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Notifications/NotificationCard.vue b/client/src/components/Notifications/NotificationCard.vue
index e6b71cdb667e..303fe41a1e2e 100644
--- a/client/src/components/Notifications/NotificationCard.vue
+++ b/client/src/components/Notifications/NotificationCard.vue
@@ -2,7 +2,6 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { BFormCheckbox } from "bootstrap-vue";
-import { defineEmits } from "vue";
 
 import { type UserNotification } from "@/api/notifications";