refactoring: update severals components

src/components/AppMenu.vue

@@ -1,4 +1,3 @@
-
 <!--
   - @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
   -
@@ -26,45 +25,70 @@
     :aria-label="t('core', 'Applications menu')"
   >
     <ul
+      v-if="appList.length"
       class="app-menu-main"
       :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
-      v-if="appList.length"
-      >
-      <li v-for="app in mainAppList(state)"
+    >
+      <li
+        v-for="app in mainAppList(state)"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
         :class="{ 'app-menu-entry__active': app.active, 'app-menu-entry__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
         :style="makeStyle(app)"
-        >
-        <a :href="app.href"
+      >
+        <a
+          :href="app.href"
           :class="{ 'has-unread': app.unread > 0 }"
           :aria-label="appLabel(app)"
           :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
-          :aria-current="app.active ? 'page' : false">
-          <img :src="app.icon" alt="">
+          :aria-current="app.active ? 'page' : false"
+        >
+          <img
+            :src="app.icon"
+            alt=""
+          />
           <div class="app-menu-entry--label">
             {{ app.name }}
-            <span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
+            <span
+              v-if="app.unread > 0"
+              class="hidden-visually unread-counter"
+              >{{ app.unread }}</span
+            >
           </div>
         </a>
       </li>
     </ul>
-    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')">
-      <NcActionLink v-for="app in popoverAppList(state)"
+    <NcActions
+      class="app-menu-more"
+      :aria-label="t('core', 'More apps')"
+    >
+      <NcActionLink
+        v-for="app in popoverAppList(state)"
         :key="app.id"
         :aria-label="appLabel(app)"
         :aria-current="app.active ? 'page' : false"
         :href="app.href"
         :style="makeStyle(app)"
-        class="app-menu-popover-entry">
+        class="app-menu-popover-entry"
+      >
         <template #icon>
-          <div class="app-icon" :class="{ 'has-unread': app.unread > 0 }">
-            <img :src="app.icon" alt="">
+          <div
+            class="app-icon"
+            :class="{ 'has-unread': app.unread > 0 }"
+          >
+            <img
+              :src="app.icon"
+              alt=""
+            />
           </div>
         </template>
         {{ app.name }}
-        <span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
+        <span
+          v-if="app.unread > 0"
+          class="hidden-visually unread-counter"
+          >{{ app.unread }}</span
+        >
       </NcActionLink>
     </NcActions>
   </nav>
@@ -91,8 +115,8 @@ export default defineComponent({
 
   setup() {
     return {
-        t,
-        n,
+      t,
+      n,
     }
   },
 
@@ -108,7 +132,8 @@ export default defineComponent({
   },
 
   mounted() {
-    axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
+    axios
+      .get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
       .then((response) => response.data)
       .then((data) => {
         if (data.ocs.meta.statuscode !== 200) {
@@ -181,16 +206,18 @@ export default defineComponent({
     },
 
     appLabel(app) {
-      return app.name
-        + (app.active ? ' (' + t('core', 'Currently open') + ')' : '')
-        + (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
+      return (
+        app.name +
+        (app.active ? ' (' + t('core', 'Currently open') + ')' : '') +
+        (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
+      )
     },
 
     makeStyle(app) {
       if (app.order !== null) {
         return `order: ${app.order}`
       }
-    }
+    },
   },
 })
 </script>
@@ -219,7 +246,7 @@ $header-icon-size: 20px;
       opacity: 1;
 
       &::before {
-        content: " ";
+        content: ' ';
         position: absolute;
         pointer-events: none;
         border-bottom-color: var(--color-main-background);
@@ -312,7 +339,8 @@ $header-icon-size: 20px;
       bottom: 0;
     }
 
-    &::before, .app-menu-entry::before {
+    &::before,
+    .app-menu-entry::before {
       opacity: 0;
     }
   }
@@ -328,18 +356,19 @@ $header-icon-size: 20px;
       bottom: 0;
     }
 
-    &::before, .app-menu-entry::before {
+    &::before,
+    .app-menu-entry::before {
       opacity: 0;
     }
   }
 }
 
 ::v-deep .app-menu-more .button-vue--vue-tertiary {
-  opacity: .7;
+  opacity: 0.7;
   margin: 3px;
   filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-  &:not([aria-expanded="true"]) {
+  &:not([aria-expanded='true']) {
     color: var(--color-main-text);
 
     &:hover {
@@ -348,10 +377,10 @@ $header-icon-size: 20px;
     }
   }
 
-    &:focus-visible {
-      opacity: 1;
-      outline: none !important;
-    }
+  &:focus-visible {
+    opacity: 1;
+    outline: none !important;
+  }
 }
 
 .app-menu-popover-entry {
@@ -376,7 +405,7 @@ $header-icon-size: 20px;
 }
 
 .has-unread::after {
-  content: "";
+  content: '';
   width: 8px;
   height: 8px;
   background-color: var(--color-primary-element-text);