show apps on top menu

package.json

@@ -11,6 +11,7 @@
 		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
+		"@nextcloud/axios": "^2.5.1",
 		"@nextcloud/browserslist-config": "^3.0.1",
 		"@nextcloud/event-bus": "^3.3.1",
 		"@nextcloud/initial-state": "^2.2.0",

src/AppMenu.vue

@@ -23,14 +23,15 @@
 <template>
   <nav
     class="app-menu show"
+    ref="nav"
     :aria-label="t('core', 'Applications menu')"
   >
     <ul
       class="app-menu-main"
       :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
-      v-if="apps !== null"
+      v-if="appList.length"
       >
-      <li v-for="app in mainAppList()"
+      <li v-for="app in mainAppList"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
@@ -70,93 +71,122 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import type { INavigationEntry } from '../types/navigation'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { n, t } from '@nextcloud/l10n'
+import { useElementSize } from '@vueuse/core'
+import { defineComponent, ref } from 'vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 
-export default {
+
+export default defineComponent({
   name: 'AppMenu',
+
   components: {
     NcActions, NcActionLink,
   },
+
+  setup() {
+    return {
+        t,
+        n,
+    }
+  },
+
   data() {
     return {
       apps: null,
-      appLimit: 0,
+      appList: [],
       observer: null,
       targetBlankApps: [],
       hiddenLabels: true
     }
   },
+
+  computed: {
+    appLimit() {
+      const maxApps = Math.floor(this.$root.$el.offsetWidth / 50)
+
+      if (maxApps < this.appList.length) {
+        // Ensure there is space for the overflow menu
+        return Math.max(maxApps - 1, 0)
+      }
+
+      return maxApps
+    },
+
+    mainAppList() {
+      return this.appList.slice(0, this.appLimit)
+    },
+
+    popoverAppList() {
+      return this.appList.slice(this.appLimit)
+    },
+  },
+
   mounted() {
-    const ncApps = loadState('core', 'apps', {})
+    axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
-    this.apps = {}
+	  .then(({ data }) => {
+        if (data.ocs.meta.statuscode !== 200) {
+          return
+        }
+
+        this.setApps(data.ocs.data)
+	  })
+  },
+
+  beforeDestroy() {
+    unsubscribe('nextcloud:app-menu.refresh', this.setApps)
+  },
+
+  methods: {
+    setNavigationCounter(id: string, counter: number) {
+      const app = this.appList.find(({ app }) => app === id)
+      if (app) {
+        this.$set(app, 'unread', counter)
+      } else {
+        logger.warn(`Could not find app "${id}" for setting navigation count`)
+      }
+    },
+
+    setApps(apps) {
+      this.appList = []
       let orders = {}
 
       window.menuAppsOrder.forEach((app, order) => {
         orders[app] = order + 1
       })
 
+      apps.forEach((app) => {
         Array.from(window.topMenuApps).forEach((id) => {
-      if (ncApps.hasOwnProperty(id)) {
+          if (app.id === id) {
-        this.apps[id] = ncApps[id]
+            app.order = orders[id] || null
-        this.apps[id].order = orders[id] || null
+            this.appList.push(app)
           }
         })
+      })
+    },
 
-    this.targetBlankApps = window.targetBlankApps
-    this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
-    this.observer = new ResizeObserver(this.resize)
-    this.observer.observe(this.$el)
-    this.resize()
-  },
-  beforeDestroy() {
-    this.observer.disconnect()
-  },
-  methods: {
     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 }) + ')' : '')
-    },
-    appList() {
-      let items = Object.values(this.apps)
-
-      items.sort((a, b) => {
-        return a.order < b.order ? -1 : 1;
-      })
-
-      return items
-    },
-    mainAppList() {
-      return this.appList().slice(0, this.appLimit)
-    },
-    popoverAppList() {
-      return this.appList().slice(this.appLimit)
-    },
-    setNavigationCounter(id, counter) {
-      this.$set(this.apps[id], 'unread', counter)
-    },
-    resize() {
-      const availableWidth = this.$el.offsetWidth
-      let appCount = Math.floor(availableWidth / 50) - 1
-      const popoverAppCount = this.appList.length - appCount
-      if (popoverAppCount === 1) {
-        appCount--
     }
-      if (appCount < 1) {
+
-        appCount = 0
-      }
-      this.appLimit = appCount
-    },
     makeStyle(app) {
       if (app.order !== null) {
         return `order: ${app.order}`
       }
     }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/SideMenu.js

@@ -21,12 +21,10 @@ import SideMenu from './SideMenu.vue'
 import SideMenuBig from './SideMenuBig.vue'
 import SideMenuWithCategories from './SideMenuWithCategories.vue'
 import PageLoader from './PageLoader'
-import SMcreateElement from './lib/createElement'
 
 Vue.prototype.OC = OC
 Vue.prototype.t = OC.L10N.translate
 
-window.SMcreateElement = SMcreateElement
 window.PageLoader = PageLoader
 
 const mountSideMenuComponent = () => {

templates/js/script.php

@@ -1,5 +1,7 @@
 <?php
 
+header('Content-type: text/javascript');
+
 $display = 'default';
 
 if ($_['always-displayed']) {
@@ -12,6 +14,24 @@ if ($_['always-displayed']) {
 
 ?>
 
+const SMcreateElement = (tagName, attributes) => {
+  const element = document.createElement(tagName)
+
+  if (typeof attributes === 'object') {
+    for (let i in attributes) {
+      if (i === 'text') {
+        element.textContent = attributes[i]
+      } else if (i === 'html') {
+        element.innerHTML = attributes[i]
+      } else {
+        element.setAttribute(i, attributes[i])
+      }
+    }
+  }
+
+  return element
+}
+
 (function() {
   const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
   const sideMenuOpener = SMcreateElement('button', {