From e31c6c0e7403ea8f0cbf48f0cfa285005533bc03 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Fri, 21 Mar 2025 10:29:09 +0100
Subject: [PATCH] chore(front): Notifications

---
 front/src/ui/components/UserMenu.vue |  30 ++-
 front/src/views/Notifications.vue    | 312 +++++++++++++--------------
 2 files changed, 172 insertions(+), 170 deletions(-)

diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index a91e14ba6..425e82542 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -13,7 +13,8 @@ import Button from '~/components/ui/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue'
-import Link from '~/components/ui/Link.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Pill from '~/components/ui/Pill.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -75,13 +76,6 @@ const labels = computed(() => ({
       />
     </Button>
     <template #items>
-      <PopoverItem v-if="store.state.ui.notifications.inbox /* TODO: Check: + additionalNotifications */ > 0">
-        <Link :to="{name: 'notifications'}">
-          <i class="bi bi-inbox-fill" />
-          {{ store.state.ui.notifications.inbox /* TODO: Check: + additionalNotifications */ }}
-          {{ labels.notifications }}
-        </Link>
-      </PopoverItem>
       <PopoverItem
         v-if="store.state.auth.authenticated"
         :to="{name: 'profile.overview', params: { username: store.state.auth.username },}"
@@ -89,6 +83,26 @@ const labels = computed(() => ({
         <i class="bi bi-person-fill" />
         {{ labels.profile }}
       </PopoverItem>
+      <PopoverItem
+        v-if="store.state.auth.authenticated"
+        :to="{name: 'notifications'}"
+      >
+        <i class="bi bi-inbox-fill" />
+        {{ labels.notifications }}
+        <Spacer grow />
+        <div
+          v-if="store.state.ui.notifications.inbox > 0"
+          :title="labels.notifications"
+          style="
+            background: var(--fw-gray-400);
+            color: var(--fw-gray-800);
+            padding: 2px 7px;
+            border-radius: 10px;
+          "
+        >
+          {{ store.state.ui.notifications.inbox }}
+      </div>
+      </PopoverItem>
       <PopoverItem
         v-if="store.state.auth.authenticated"
         :to="{ path: '/settings' }"
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index fda12a49b..abb9473af 100644
--- a/front/src/views/Notifications.vue
+++ b/front/src/views/Notifications.vue
@@ -14,6 +14,15 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
 import useErrorHandler from '~/composables/useErrorHandler'
 import useMarkdown from '~/composables/useMarkdown'
 
+import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+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)
 const { t } = useI18n()
@@ -90,180 +99,159 @@ const markAllAsRead = async () => {
 </script>
 
 <template>
-  <main
+  <Layout
+    main
+    stack
     v-title="labels.title"
     class="main page-notifications"
   >
-    <section class="ui vertical aligned stripe segment">
-      <div class="ui container">
+    <div
+      v-if="additionalNotifications"
+    >
+      <Header :h1="t('views.Notifications.header.messages')" />
+      <Layout flex>
         <div
-          v-if="additionalNotifications"
-          class="ui container"
+          v-if="showInstanceSupportMessage"
         >
-          <h1 class="ui header">
-            {{ t('views.Notifications.header.messages') }}
-          </h1>
-          <div class="ui two column stackable grid">
-            <div
-              v-if="showInstanceSupportMessage"
-              class="column"
+          <Alert blue>
+            <h4 class="header">
+              {{ t('views.Notifications.header.instanceSupport') }}
+            </h4>
+            <sanitized-html :html="supportMessage" />
+          </Alert>
+          <div class="ui bottom attached segment">
+            <form
+              class="ui inline form"
+              @submit.prevent="setDisplayDate('instance_support_message_display_date', instanceSupportMessageDelay)"
             >
-              <div class="ui attached info message">
-                <h4 class="header">
-                  {{ t('views.Notifications.header.instanceSupport') }}
-                </h4>
-                <sanitized-html :html="supportMessage" />
-              </div>
-              <div class="ui bottom attached segment">
-                <form
-                  class="ui inline form"
-                  @submit.prevent="setDisplayDate('instance_support_message_display_date', instanceSupportMessageDelay)"
+              <div class="inline field">
+                <label for="instance-reminder-delay">
+                  {{ t('views.Notifications.label.reminder') }}
+                </label>
+                <select
+                  id="instance-reminder-delay"
+                  v-model="instanceSupportMessageDelay"
                 >
-                  <div class="inline field">
-                    <label for="instance-reminder-delay">
-                      {{ t('views.Notifications.label.reminder') }}
-                    </label>
-                    <select
-                      id="instance-reminder-delay"
-                      v-model="instanceSupportMessageDelay"
-                    >
-                      <option :value="30">
-                        {{ t('views.Notifications.option.delay.30') }}
-                      </option>
-                      <option :value="60">
-                        {{ t('views.Notifications.option.delay.60') }}
-                      </option>
-                      <option :value="90">
-                        {{ t('views.Notifications.option.delay.90') }}
-                      </option>
-                      <!-- NOTE: Postpone notification 100 years, so that the user never sees it -->
-                      <option :value="36500">
-                        {{ t('views.Notifications.option.delay.never') }}
-                      </option>
-                    </select>
-                    <button
-                      type="submit"
-                      class="ui right floated basic button"
-                    >
-                      {{ t('views.Notifications.button.submit') }}
-                    </button>
-                  </div>
-                </form>
-              </div>
-            </div>
-            <div
-              v-if="showFunkwhaleSupportMessage"
-              class="column"
-            >
-              <div class="ui info attached message">
-                <h4 class="header">
-                  {{ t('views.Notifications.header.funkwhaleSupport') }}
-                </h4>
-                <p>
-                  {{ t('views.Notifications.message.funkwhaleSupport') }}
-                </p>
-                <a
-                  href="https://funkwhale.audio/donate"
-                  target="_blank"
-                  rel="noopener"
-                  class="ui primary inverted button"
+                  <option :value="30">
+                    {{ t('views.Notifications.option.delay.30') }}
+                  </option>
+                  <option :value="60">
+                    {{ t('views.Notifications.option.delay.60') }}
+                  </option>
+                  <option :value="90">
+                    {{ t('views.Notifications.option.delay.90') }}
+                  </option>
+                  <!-- NOTE: Postpone notification 100 years, so that the user never sees it -->
+                  <option :value="36500">
+                    {{ t('views.Notifications.option.delay.never') }}
+                  </option>
+                </select>
+                <Button
+                  type="submit"
+                  secondary
                 >
-                  {{ t('views.Notifications.link.donate') }}
-                </a>
-                <a
-                  href="https://contribute.funkwhale.audio"
-                  target="_blank"
-                  rel="noopener"
-                  class="ui secondary inverted button"
-                >
-                  {{ t('views.Notifications.link.help') }}
-                </a>
+                  {{ t('views.Notifications.button.submit') }}
+                </Button>
               </div>
-              <div class="ui bottom attached segment">
-                <form
-                  class="ui inline form"
-                  @submit.prevent="setDisplayDate('funkwhale_support_message_display_date', funkwhaleSupportMessageDelay)"
-                >
-                  <div class="inline field">
-                    <label for="funkwhale-reminder-delay">
-                      {{ t('views.Notifications.label.reminder') }}
-                    </label>
-                    <select
-                      id="funkwhale-reminder-delay"
-                      v-model="funkwhaleSupportMessageDelay"
-                    >
-                      <option :value="30">
-                        {{ t('views.Notifications.option.delay.30') }}
-                      </option>
-                      <option :value="60">
-                        {{ t('views.Notifications.option.delay.60') }}
-                      </option>
-                      <option :value="90">
-                        {{ t('views.Notifications.option.delay.90') }}
-                      </option>
-                      <!-- NOTE: Postpone notification 100 years, so that the user never sees it -->
-                      <option :value="36500">
-                        {{ t('views.Notifications.option.delay.never') }}
-                      </option>
-                    </select>
-                    <button
-                      type="submit"
-                      class="ui right floated basic button"
-                    >
-                      {{ t('views.Notifications.button.submit') }}
-                    </button>
-                  </div>
-                </form>
-              </div>
-            </div>
+            </form>
           </div>
         </div>
-        <h1 class="ui header">
-          {{ t('views.Notifications.header.notifications') }}
-        </h1>
-        <div class="ui toggle checkbox">
-          <input
-            id="show-read-notifications"
-            v-model="filters.is_read"
-            type="checkbox"
+        <Alert
+          v-if="showFunkwhaleSupportMessage"
+          blue
+        >
+          <h4 class="header">
+            {{ t('views.Notifications.header.funkwhaleSupport') }}
+          </h4>
+          <p>
+            {{ t('views.Notifications.message.funkwhaleSupport') }}
+          </p>
+          <a
+            href="https://funkwhale.audio/donate"
+            target="_blank"
+            rel="noopener"
+            class="ui primary inverted button"
           >
-          <label for="show-read-notifications">{{ t('views.Notifications.label.showRead') }}</label>
-        </div>
-        <button
-          v-if="filters.is_read === false && notifications.count > 0"
-          class="ui basic labeled icon right floated button"
-          @click.prevent="markAllAsRead"
-        >
-          <i class="ui check icon" />
-          {{ t('views.Notifications.button.read') }}
-        </button>
-        <div class="ui hidden divider" />
+            {{ t('views.Notifications.link.donate') }}
+          </a>
+          <a
+            href="https://contribute.funkwhale.audio"
+            target="_blank"
+            rel="noopener"
+            class="ui secondary inverted button"
+          >
+            {{ t('views.Notifications.link.help') }}
+          </a>
+          <template #actions>
+            <form
+              class="ui inline form"
+              @submit.prevent="setDisplayDate('funkwhale_support_message_display_date', funkwhaleSupportMessageDelay)"
+            >
+              <Layout flex>
+                <label for="funkwhale-reminder-delay" style="align-self: center;">
+                  {{ t('views.Notifications.label.reminder') }}
+                </label>
+                <select
+                  id="funkwhale-reminder-delay"
+                  class="ui dropdown"
+                  style="margin-top: 0px;"
+                  v-model="funkwhaleSupportMessageDelay"
+                >
+                  <option :value="30">
+                    {{ t('views.Notifications.option.delay.30') }}
+                  </option>
+                  <option :value="60">
+                    {{ t('views.Notifications.option.delay.60') }}
+                  </option>
+                  <option :value="90">
+                    {{ t('views.Notifications.option.delay.90') }}
+                  </option>
+                  <!-- NOTE: Postpone notification 100 years, so that the user never sees it -->
+                  <option :value="36500">
+                    {{ t('views.Notifications.option.delay.never') }}
+                  </option>
+                </select>
+                <Button
+                  type="submit"
+                  primary
+                >
+                  {{ t('views.Notifications.button.submit') }}
+                </Button>
+              </Layout>
+            </form>
+          </template>
+        </Alert>
+      </Layout>
+    </div>
+    <Header :h1="t('views.Notifications.header.notifications')" />
+    <Toggle
+      id="show-read-notifications"
+      v-model="filters.is_read"
+      :label="t('views.Notifications.label.showRead')"
+    />
+    <Button
+      v-if="filters.is_read === false && notifications.count > 0"
+      secondary
+      @click.prevent="markAllAsRead"
+      icon="bi-check-all"
+    >
+      {{ t('views.Notifications.button.read') }}
+    </Button>
 
-        <div
-          v-if="isLoading"
-          :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
-        >
-          <div class="ui text loader">
-            {{ t('views.Notifications.loading.notifications') }}
-          </div>
-        </div>
+    <Loader v-if="isLoading" />
 
-        <table
-          v-else-if="notifications.count > 0"
-          class="ui table"
-        >
-          <tbody>
-            <notification-row
-              v-for="item in notifications.results"
-              :key="item.id"
-              :initial-item="item"
-            />
-          </tbody>
-        </table>
-        <p v-else-if="additionalNotifications === 0">
-          {{ t('views.Notifications.empty.notifications') }}
-        </p>
-      </div>
-    </section>
-  </main>
+    <Table
+      v-else-if="notifications.count > 0"
+      :gridTemplateColumns="['auto', 'auto', 'auto', 'auto']"
+    >
+        <notification-row
+          v-for="item in notifications.results"
+          :key="item.id"
+          :initial-item="item"
+        />
+    </Table>
+    <p v-else-if="additionalNotifications === 0">
+      {{ t('views.Notifications.empty.notifications') }}
+    </p>
+  </Layout>
 </template>