--wip-- [skip ci]

frontend/components/bc/BcAccordion.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts" generic="T">
+defineProps<{
+  items?: T[],
+}>()
+const isOpen = ref(false)
+</script>
+
+<template>
+  <details
+    class="bc-accordion"
+    @click="isOpen = !isOpen"
+  >
+    <summary>
+      <span class="bc-accordion__heading">
+        <IconChevron
+          :direction="isOpen ? 'bottom' : 'right'"
+        />
+        <slot name="headingIcon" />
+        <slot name="heading" />
+      </span>
+    </summary>
+    <BcCard class="bc-accordion__content">
+      <ul class="bc-accordion-list">
+        <li
+          v-for="item in items"
+          :key="`${item}`"
+          class="bc-accordion-list__item"
+        >
+          <slot name="item" :item />
+        </li>
+      </ul>
+    </BcCard>
+  </details>
+</template>
+
+<style scoped lang="scss">
+// summary::marker {
+//   display: none;
+// }
+.bc-accordion {
+  summary {
+    list-style: none
+  }
+  summary::-webkit-details-marker{
+    display: none;
+  }
+}
+.bc-accordion__heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.bc-accordion__content {
+margin-top: 0.625rem;
+}
+.bc-accordion-list {
+  list-style: none;
+}
+.bc-accordion-list__item {
+  display: inline;
+}
+.bc-accordion-list__item:not(:last-child)::after {
+content: ', ';
+}
+</style>

frontend/components/bc/BcCard.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bc-card">
+    <slot />
+    <slot name="footer" />
+    <slot name="floating-action-button" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bc-card {
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: 0.625rem;
+  border: 1px solid var(--input-border-color);
+}
+</style>

frontend/components/bc/BcLink.vue

@@ -9,6 +9,7 @@ defineProps<{
 <template>
   <NuxtLink
     :to
+    class="link"
     :no-prefetch="true"
   >
     <template #default>

frontend/components/bc/BcText.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
+    isDimmed?: boolean,
     tag?: 'h2' | 'p' | 'span',
-    variant?: 'base' | 'lg',
+    variant?: 'base' | 'lg' | 'md' | 'sm',
   }>(), {
     tag: 'span',
     variant: 'base',
@@ -15,6 +16,9 @@ withDefaults(
     :is="tag"
     :class="{
       'variant-lg': variant === 'lg',
+      'variant-md': variant === 'md',
+      'variant-sm': variant === 'sm',
+      'is-dimmed': isDimmed,
     }"
   >
     <slot />
@@ -23,6 +27,19 @@ withDefaults(
 
 <style scoped lang="scss">
 @use '~/assets/css/breakpoints' as *;
+.is-dimmed {
+  opacity: 0.7;
+}
+
+.variant-sm {
+  font-size: 0.875rem;
+}
+.variant-md {
+  font-family: "Montserrat";
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
 .variant-lg {
   font-family: "Montserrat";
   font-size: 1.25rem;

frontend/components/bc/header/HeaderLogo.vue

@@ -5,13 +5,13 @@ defineProps<{
 </script>
 
 <template>
-  <BcLink
+  <NuxtLink
     to="/"
     :class="`${layoutAdaptability}-adaptability`"
   >
     <IconBeaconchainLogo alt="Beaconcha.in logo" />
     <span class="name">beaconcha.in</span>
-  </BcLink>
+  </NuxtLink>
 </template>
 
 <style lang="scss" scoped>

frontend/components/notifications/NotificationsDashboardDialogEntity.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faGlobe } from '@fortawesome/pro-solid-svg-icons'
+import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+
+// const model = defineModel(false)
+const { t: $t } = useTranslation()
+
+const {
+  // close,
+  props,
+} = useBcDialog<{ identifier: string } & Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id' | 'group_name'>>()
+
+const store = useNotificationsDashboardDetailsStore()
+
+const { data: details } = useAsyncData(() => store.getDetails({
+  // dashboard_id: props.value?.dashboard_id ?? 0,
+  dashboard_id: 5334, // 💀 (personal dashboard id) remove after development
+  epoch: props.value?.epoch ?? 0,
+  group_id: props.value?.group_id ?? 0,
+}))
+watch(details, () => {
+  // console.log(data)
+  // store.addDetails({
+  //   details: data.value,
+  //   identifier: props.value?.identifier ?? '',
+  // })
+})
+
+const validatorsBackOnline = computed(() => {
+  return details.value?.data?.validator_back_online
+})
+const groupsBackOnline = computed(() => {
+  return details.value?.data?.group_back_online
+})
+</script>
+
+<template>
+  <!-- <pre>
+    {{ details.data }}
+  </pre> -->
+  <div class="notifications-dashboard-dialog-entity">
+    <header>
+      <h2>
+        <BcText
+          variant="lg"
+        >
+          {{ $t('notifications.dashboards.dialog.entity.title') }}
+        </BcText>
+        <BcText
+          variant="md"
+          is-dimmed
+        >
+          ({{ $t('common.epoch') }} {{ props?.epoch }})
+        </BcText>
+      </h2>
+      <h3>
+        {{ props?.group_name }}
+      </h3>
+    </header>
+    <main
+      v-if="details?.data"
+      class="notifications-dashboard-dialog-entity__content"
+    >
+      <!-- <details v-for="(detailValue, detailKey) in details.data" :key="detailKey">
+      <summary>
+        {{ detailKey }}
+      </summary>
+      <p v-if="detailKey === 'validator_back_online'">
+        <span v-for="(value, index) in detailKey" :key="`${value}-${key}`">
+          {{ value }}
+          <br>
+          {{ key }}
+        </span>
+      </p>
+    </details> -->
+      <BcAccordion
+        :items="groupsBackOnline"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_back_online', [groupsBackOnline?.length ?? 0]) }}
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faGlobe" />
+        </template>
+        <template #item="{ item: group }">
+          <span>
+            {{ group.group_name }}
+          </span>
+          <span>
+            [{{ group.epoch_count }}&nbsp;{{ $t('common.epoch', group.epoch_count) }}]
+          </span>
+          <BcLink
+            :to="`/dashboard/${group.dashboard_id}`"
+          >
+            <!-- Todo: 🚨 put in dashboard name here -->
+            (Dashboard {{ group.dashboard_id }})
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        :items="validatorsBackOnline"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validator_back_online', [validatorsBackOnline?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: validator }">
+          <BcLink
+            :to="`/validator/{{ validator.index }}`"
+          >
+            {{ validator.index }}
+          </BcLink>
+          ({{ validator.epoch_count }} {{ $t('common.epoch', validator.epoch_count) }})<!--
+            this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+    </main>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.notifications-dashboard-dialog-entity {
+  min-width: 44rem;
+}
+.notifications-dashboard-dialog-entity__content {
+  margin-top: 1.25rem;
+}
+</style>

frontend/components/notifications/NotificationsDashboardsTable.vue

@@ -8,6 +8,7 @@ import type { DashboardType } from '~/types/dashboard'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 import type { ChainIDs } from '~/types/network'
 import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+import { NotificationsDashboardDialogEntity } from '#components'
 
 defineEmits<{ (e: 'openDialog'): void }>()
 
@@ -40,11 +41,6 @@ const colsVisible = computed(() => {
   }
 })
 
-const openDialog = () => {
-  // TODO: implement dialog
-  alert('not implemented yet 😪')
-}
-
 const getDashboardType = (isAccount: boolean): DashboardType => isAccount ? 'account' : 'validator'
 const { overview } = useNotificationsDashboardOverviewStore()
 const mapEventtypeToText = (eventType: NotificationDashboardsTableRow['event_types'][number]) => {
@@ -95,18 +91,37 @@ const mapEventtypeToText = (eventType: NotificationDashboardsTableRow['event_typ
 const textDashboardNotifications = (event_types: NotificationDashboardsTableRow['event_types']) => {
   return event_types.map(mapEventtypeToText).join(', ')
 }
+
+const dialog = useDialog()
+// const {
+//   dialogRef: dialog,
+// } = useBcDialog()
+
+const showDialog = (row: { identifier: string } & NotificationDashboardsTableRow) => {
+  dialog.open(NotificationsDashboardDialogEntity, {
+    data: {
+      dashboard_id: row.dashboard_id,
+      epoch: row.epoch,
+      group_id: row.group_id,
+      group_name: row.group_name,
+      identifier: row.identifier,
+    },
+  })
+}
 </script>
 
 <template>
   <div>
+    <!-- <LazyNotificationsDashboardDialogEntity
+      v-if="isVisible"
+      v-model="isVisible"
+      epoch="00000"
+    /> -->
     <BcTableControl
       :title="$t('notifications.dashboards.title')"
       :search-placeholder="$t('notifications.dashboards.search_placeholder')"
       @set-search="setSearch"
     >
-      <template #header-left>
-        NETWORK_SWITCHER_COMPONENT
-      </template>
       <template #table>
         <ClientOnly fallback-tag="span">
           <BcTable
@@ -217,11 +232,15 @@ const textDashboardNotifications = (event_types: NotificationDashboardsTableRow[
                       }}
                     </span>
                   </template>
-                  <FontAwesomeIcon
-                    class="link"
-                    :icon="faArrowUpRightFromSquare"
-                    @click="openDialog"
-                  />
+                  <BcButtonIcon
+                    screenreader-text="Open notification details"
+                    @click="showDialog(slotProps.data)"
+                  >
+                    <FontAwesomeIcon
+                      class="link"
+                      :icon="faArrowUpRightFromSquare"
+                    />
+                  </BcButtonIcon>
                 </div>
               </template>
             </Column>

frontend/locales/en.json

@@ -613,6 +613,11 @@
           "heading":"Delete all notifications",
           "paragraph": "Do you really want to delete all notifications for this dashboard?"
           },
+        "entity": {
+          "group_back_online": "Group back online ({0})",
+          "title": "Notifications",
+          "validator_back_online": "Validator back online ({0})"
+        },
         "heading_webhook": "Edit Webhook",
         "info_send_via_discord": {
           "_link": "Discord webhook",