chore: Adds a settings button to the notification settings from the notification popup (#6233)

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -25,6 +25,14 @@
           >
             {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
           </woot-button>
+          <woot-button
+            color-scheme="secondary"
+            variant="smooth"
+            size="tiny"
+            class-names="action-button"
+            icon="settings"
+            @click="openAudioNotificationSettings"
+          />
           <woot-button
             color-scheme="secondary"
             variant="link"
@@ -199,6 +207,22 @@ export default {
     onMarkAllDoneClick() {
       this.$store.dispatch('notifications/readAll');
     },
+    openAudioNotificationSettings() {
+      this.$router.push({ name: 'profile_settings_index' });
+      this.closeNotificationPanel();
+      this.$nextTick(() => {
+        const audioSettings = document.getElementById(
+          'profile-settings-notifications'
+        );
+        if (audioSettings) {
+          // TODO [ref](https://github.com/chatwoot/chatwoot/pull/6233#discussion_r1069636890)
+          audioSettings.scrollIntoView(
+            { behavior: 'smooth', block: 'start' },
+            150
+          );
+        }
+      });
+    },
     closeNotificationPanel() {
       this.$emit('close');
     },
@@ -244,13 +268,13 @@ export default {
   .total-count {
     padding: var(--space-smaller) var(--space-small);
     background: var(--b-50);
-    border-radius: var(--border-radius-rounded);
+    border-radius: var(--border-radius-normal);
     font-size: var(--font-size-micro);
     font-weight: var(--font-weight-bold);
+    margin-left: var(--space-smaller);
   }
 
   .action-button {
-    padding: var(--space-micro) var(--space-small);
     margin-right: var(--space-small);
   }
 }

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="profile-settings-notifications">
     <div class="profile--settings--row row">
       <div class="columns small-3 ">
         <h4 class="block-title">