refactor(notifications): fix edit subscription dialog

Dialog did not work correctly and could not be patched.

See: BEDS-580

frontend/assets/css/main.scss

@@ -7,6 +7,9 @@ html {
   margin: 0;
   padding: 0;
 }
+ul {
+  padding-inline-start: 1.5rem;
+}
 body {
   @include standard_text;
   margin: 0;

frontend/components/bc/BcSettings.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="bc-settings">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bc-settings{
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+</style>

frontend/components/bc/BcSettingsRow.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps<{
+  hasBorderTop?: boolean,
+  hasPremiumGem?: boolean,
+  hasUnit?: boolean,
+  info?: string,
+  label: string,
+}>()
+const idCheckbox = useId()
+const checkbox = defineModel<boolean>('checkbox')
+const input = defineModel<string>('input')
+</script>
+
+<template>
+  <div
+    class="bc-settings-row"
+    :class="{ 'has-border-top': hasBorderTop }"
+  >
+    <span class="bc-settings-row--info">
+      <label
+        :for="idCheckbox"
+      >
+        {{ label }}
+      </label>
+      <BcTooltip
+        v-if="info || $slots.info"
+        tooltip-width="220px"
+        tooltip-text-align="left"
+      >
+        <FontAwesomeIcon :icon="faInfoCircle" />
+        <template #tooltip>
+          <slot name="info">
+            {{ info }}
+          </slot>
+        </template>
+      </BcTooltip>
+      <BcPremiumGem
+        v-if="hasPremiumGem"
+      />
+    </span>
+    <span class="bc-settings-row--action">
+      <LazyBcInputUnit
+        v-if="hasUnit"
+        v-model="input"
+        unit=" %"
+      />
+      <BcInputCheckbox
+        v-model="checkbox"
+        :input-id="idCheckbox"
+      />
+    </span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bc-settings-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.bc-settings-row--info {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center
+}
+.bc-settings-row--action {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.has-border-top {
+  border-top: 1px solid var(--dark-grey);
+  padding-top: 0.5rem;
+}
+</style>

frontend/components/bc/BcTranslation.vue

@@ -3,11 +3,13 @@ import type { MessageSchema } from '~/i18n.config'
 import type { KeyPaths } from '~/types/helper'
 
 defineProps<{
+  boldpath?: KeyPaths<MessageSchema>,
   /**
    * The path to the key in the translation file (e.g. en.json)
    */
   keypath: KeyPaths<MessageSchema>,
   linkpath?: KeyPaths<MessageSchema>,
+  listpath?: KeyPaths<MessageSchema>,
   tag?: keyof HTMLElementTagNameMap,
   /**
    * URL to link to
@@ -33,6 +35,9 @@ defineProps<{
     scope="global"
     :tag="tag || 'span'"
   >
+    <template #_bold>
+      <span v-if="boldpath" class="bc-translation-bold">{{ $t(boldpath) }}</span>
+    </template>
     <template #_link>
       <slot
         v-if="to && linkpath"
@@ -47,7 +52,20 @@ defineProps<{
         </BcLink>
       </slot>
     </template>
+    <template #_list>
+      <slot name="_list" :listpath>
+        <ul v-if="listpath">
+          <li v-for="item in $t(listpath).split('\n')" :key="item">
+            {{ item }}
+          </li>
+        </ul>
+      </slot>
+    </template>
   </I18nT>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.bc-translation-bold {
+  font-weight: 800;
+}
+</style>

frontend/components/bc/input/BcInputCheckbox.vue

@@ -15,9 +15,8 @@ const input = defineModel<boolean>()
 
 <template>
   <BcInputError :error>
-    <span>
+    <span v-if="label">
       <label
-        v-if="label"
         class="label"
         :for="id"
       >
@@ -38,6 +37,7 @@ const input = defineModel<boolean>()
     </span>
     <Checkbox
       v-model="input"
+      class="bc-input-ckeckbox__checkbox"
       :input-id="id"
       v-bind="$attrs"
       binary
@@ -52,4 +52,15 @@ const input = defineModel<boolean>()
 .bc-input-checkbox__info {
   margin-left: var(--padding);
 }
+.bc-input-ckeckbox__checkbox {
+  --outline-width: 0.125rem;
+  --outline-offset: 0.125rem;
+  margin: calc(var(--outline-width) + var(--outline-offset));
+}
+.bc-input-ckeckbox__checkbox:has(input:focus-visible) {
+  outline: var(--outline-width) solid var(--blue-500);
+  outline-offset: var(--outline-offset);
+  border-radius: 0.125rem;
+
+}
 </style>

frontend/components/bc/input/BcInputUnit.vue

@@ -23,7 +23,7 @@ const input = defineModel<string>()
 .bc-input-unit {
   display: flex;
   align-items: baseline;
-  gap: 0.375rem;
+  gap: 0.25rem;
 }
 :deep(.bc-input-unit__input) {
   -moz-appearance:textfield;

frontend/components/bc/premium/BcPremiumGem.vue

@@ -19,15 +19,15 @@ defineProps<{
       target="_blank"
       class="link"
     >
-      <div>
+      <span>
         <LazyBcScreenreaderOnly v-if="screenreaderText">
           {{ screenreaderText }}
         </LazyBcScreenreaderOnly>
         <FontAwesomeIcon
           :icon="faGem"
           class="gem"
         />
-      </div>
+      </span>
     </BcLink>
   </BcTooltip>
 </template>

frontend/components/bc/table/BcTablePopoutEdit.vue

@@ -20,8 +20,9 @@ defineProps<Props>()
     <slot name="content">
       <BcTooltip
         v-if="label"
+        tooltip-width="320px"
+        tooltip-text-align="left"
         :hide="!truncateText"
-        :fit-content="true"
         class="content"
         :text="label"
       >

frontend/components/dashboard/chart/SummaryChart.vue

@@ -110,7 +110,7 @@ const categories = computed<number[]>(() => {
   let step = 0
   switch (aggregation.value) {
     case 'epoch':
-      step = secondsPerEpoch()
+      step = secondsPerEpoch.value
       break
     case 'daily':
       step = ONE_DAY