add config and move components

.eslintrc.js

@@ -1,5 +1,14 @@
 module.exports = {
-    rules: {
-        'no-console': 'off',
+  env: {
+    node: true,
   },
-};
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "prettier",
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  }
+}

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "semi": false,
+  "singleQuote": true,
+  "singleAttributePerLine": true,
+  "printWidth": 160
+}

package.json

@@ -1,25 +1,19 @@
 {
 	"license": "agpl",
 	"private": true,
+	"module": true,
 	"scripts": {
-		"build": "NODE_ENV=production ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"dev": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --config webpack.js",
-		"watch": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --watch --config webpack.js",
+		"build": "NODE_ENV=production ./node_modules/.bin/webpack-cli --progress --config webpack.config.js",
+		"dev": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --config webpack.config.js",
+		"watch": "NODE_ENV=development ./node_modules/.bin/webpack-cli --progress --watch --config webpack.config.js",
 		"lint": "./node_modules/.bin/eslint --ext .js,.vue src",
 		"lint:fix": "./node_modules/.bin/eslint --ext .js,.vue src --fix",
 		"stylelint": "./node_modules/.bin/stylelint src",
 		"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",
-		"@nextcloud/l10n": "^3.1.0",
-		"@nextcloud/vue": "^8.19.0",
-		"@vueuse/core": "^11.1.0",
-		"axios": "^1.6.7",
-		"trim": "^1.0.1"
+		"@nextcloud/vue": "^8.23.0",
+		"vue": "^3.5.13"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
@@ -28,46 +22,30 @@
 		"node": ">=16.0.0"
 	},
 	"devDependencies": {
-		"@babel/node": "^7.25.7",
-		"@babel/plugin-transform-private-methods": "^7.25.7",
-		"@babel/preset-typescript": "^7.24.7",
-		"@cypress/vue2": "^2.1.1",
-		"@cypress/webpack-preprocessor": "^6.0.2",
-		"@nextcloud/babel-config": "^1.2.0",
-		"@nextcloud/eslint-config": "^8.4.1",
-		"@nextcloud/stylelint-config": "^3.0.1",
-		"@nextcloud/typings": "^1.9.1",
-		"@nextcloud/webpack-vue-config": "^6.0.1",
-		"@simplewebauthn/types": "^10.0.0",
-		"@types/dockerode": "^3.3.29",
-		"@types/wait-on": "^5.3.4",
-		"@vue/tsconfig": "^0.5.1",
-		"babel-loader": "^9.2.1",
-		"babel-loader-exclude-node-modules-except": "^1.2.1",
-		"babel-plugin-module-resolver": "^5.0.2",
-		"colord": "^2.9.3",
-		"eslint-plugin-cypress": "^3.5.0",
-		"eslint-plugin-es": "^4.1.0",
-		"exports-loader": "^5.0.0",
+		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+		"@nextcloud/axios": "^2.5.1",
+		"@nextcloud/browserslist-config": "^3.0.1",
+		"@nextcloud/event-bus": "^3.3.1",
+		"@nextcloud/initial-state": "^2.2.0",
+		"@nextcloud/l10n": "^3.1.0",
+		"@symfony/webpack-encore": "^5.1.0",
+		"babel-loader": "^9.1.3",
+		"css-loader": "^7.1.2",
+		"eslint": "^9.19.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-vue": "^9.32.0",
 		"file-loader": "^6.2.0",
-		"handlebars-loader": "^1.7.3",
-		"jasmine-core": "~2.5.2",
-		"jasmine-sinon": "^0.4.0",
-		"jsdoc": "^4.0.2",
-		"raw-loader": "^4.0.2",
-		"sass": "^1.79.3",
-		"stylelint": "^16.9.0",
-		"stylelint-use-logical": "^2.1.2",
-		"ts-loader": "^9.5.0",
-		"ts-node": "^10.9.1",
-		"tslib": "^2.7.0",
-		"typescript": "^5.6.2",
-		"vue-loader": "^15.9.8",
-		"vue-template-compiler": "^2.7.16",
-		"wait-on": "^8.0.1",
+		"mini-css-extract-plugin": "^2.9.1",
+		"postcss-loader": "^8.1.1",
+		"prettier": "3.4.2",
+		"sass": "^1.78.0",
+		"sass-loader": "^16.0.1",
+		"source-map-loader": "^5.0.0",
+		"style-loader": "^4.0.0",
+		"vue-loader": "^17.4.2",
+		"vue-router": "^4.4.5",
 		"webpack": "^5.94.0",
-		"webpack-cli": "^5.0.2",
-		"webpack-merge": "^6.0.1",
-		"workbox-webpack-plugin": "^7.1.0"
+		"webpack-cli": "^5.1.4",
+		"webpack-notifier": "^1.15.0"
 	}
 }

src/components/SideMenuBigApp.vue

@@ -15,18 +15,16 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <li v-bind:class="classes">
-    <a v-bind:href="href" :target="target" v-bind:title="label">
-      <img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
-      <span class="side-menu-app-text" v-text="label"></span>
+  <li :class="classes">
+    <a :href="href" :target="target" :title="label">
+      <img class="side-menu-app-icon" :src="icon" :alt="label" />
+      <span class="side-menu-app-text">{{ label }}</span>
     </a>
   </li>
 </template>
 
-<script>
-export default {
-  name: 'SideMenuBigApp',
-  props: {
+<script setup>
+defineProps({
   label: {
     type: String,
     required: true
@@ -47,6 +45,5 @@ export default {
     type: String,
     required: false
   },
-  },
-}
+})
 </script>

src/menu.js

@@ -15,7 +15,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Vue from 'vue'
 import AppMenu from './AppMenu.vue'
 import SideMenu from './SideMenu.vue'
 import SideMenuBig from './SideMenuBig.vue'

src/menus/AppMenu.vue

@@ -0,0 +1,393 @@
+
+<!--
+  - @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <nav
+    class="app-menu show"
+    :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="appList.length"
+      >
+      <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"
+          :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="">
+          <div class="app-menu-entry--label">
+            {{ app.name }}
+            <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)"
+        :key="app.id"
+        :aria-label="appLabel(app)"
+        :aria-current="app.active ? 'page' : false"
+        :href="app.href"
+        :style="makeStyle(app)"
+        class="app-menu-popover-entry">
+        <template #icon>
+          <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>
+      </NcActionLink>
+    </NcActions>
+  </nav>
+</template>
+
+<script>
+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 defineComponent({
+  name: 'AppMenu',
+
+  components: {
+    NcActions,
+    NcActionLink,
+  },
+
+  setup() {
+    return {
+        t,
+        n,
+    }
+  },
+
+  data() {
+    return {
+      apps: null,
+      appList: [],
+      observer: null,
+      targetBlankApps: [],
+      hiddenLabels: true,
+      state: 1,
+    }
+  },
+
+  mounted() {
+    axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
+      .then((response) => response.data)
+      .then((data) => {
+        if (data.ocs.meta.statuscode !== 200) {
+          return
+        }
+
+        this.setApps(data.ocs.data)
+      })
+
+    this.targetBlankApps = window.targetBlankApps
+    this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
+    let timeout = null
+
+    window.addEventListener('resize', () => {
+      timeout = window.setTimeout(() => {
+        this.update()
+      }, 300)
+    })
+  },
+
+  methods: {
+    update() {
+      ++this.state
+    },
+
+    mainAppList() {
+      return this.appList.slice(0, this.appLimit())
+    },
+
+    popoverAppList() {
+      return this.appList.slice(this.appLimit())
+    },
+
+    appLimit() {
+      const maxApps = Math.floor(this.$root.$el.offsetWidth / 60)
+
+      if (maxApps < this.appList.length) {
+        // Ensure there is space for the overflow menu
+        return Math.max(maxApps - 1, 0)
+      }
+
+      return maxApps
+    },
+
+    setNavigationCounter(id, counter) {
+      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 (app.id === id) {
+            app.order = orders[id] || null
+            this.appList.push(app)
+          }
+        })
+      })
+    },
+
+    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 }) + ')' : '')
+    },
+
+    makeStyle(app) {
+      if (app.order !== null) {
+        return `order: ${app.order}`
+      }
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+$header-icon-size: 20px;
+
+.app-menu {
+  width: 100%;
+  display: flex;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+}
+
+.app-menu-main {
+  display: flex;
+  flex-wrap: nowrap;
+
+  .app-menu-entry {
+    width: 50px;
+    height: 50px;
+    position: relative;
+    display: flex;
+
+    &.app-menu-entry__active {
+      opacity: 1;
+
+      &::before {
+        content: " ";
+        position: absolute;
+        pointer-events: none;
+        border-bottom-color: var(--color-main-background);
+        transform: translateX(-50%);
+        width: 12px;
+        height: 5px;
+        border-radius: 3px;
+        background-color: var(--color-primary-text);
+        left: 50%;
+        bottom: 6px;
+        display: block;
+        transition: all 0.1s ease-in-out;
+        opacity: 1;
+      }
+
+      .app-menu-entry--label {
+        font-weight: bold;
+      }
+    }
+
+    a {
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      margin: 2px;
+      color: var(--color-primary-text);
+      position: relative;
+    }
+
+    img {
+      transition: margin 0.1s ease-in-out;
+      width: $header-icon-size;
+      height: $header-icon-size;
+      padding: calc((100% - $header-icon-size) / 2);
+      box-sizing: content-box;
+      filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
+    }
+
+    .app-menu-entry--label {
+      opacity: 0;
+      position: absolute;
+      font-size: 12px;
+      color: var(--color-primary-text);
+      text-align: center;
+      left: 50%;
+      top: 45%;
+      display: block;
+      min-width: 100%;
+      transform: translateX(-50%);
+      transition: all 0.1s ease-in-out;
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      letter-spacing: -0.5px;
+    }
+
+    &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
+    &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):focus-within {
+      opacity: 1;
+      .app-menu-entry--label {
+        opacity: 1;
+        font-weight: bolder;
+        bottom: 0;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  // Show labels
+  &:hover,
+  &:focus-within,
+  .app-menu-entry:hover,
+  .app-menu-entry:focus {
+    opacity: 1;
+  }
+
+  &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
+  &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
+  .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
+  .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
+    opacity: 1;
+
+    img {
+      margin-top: -8px;
+    }
+
+    .app-menu-entry--label {
+      opacity: 1;
+      bottom: 0;
+    }
+
+    &::before, .app-menu-entry::before {
+      opacity: 0;
+    }
+  }
+
+  &.app-menu-main__show-hovered .app-menu-entry:hover,
+  &.app-menu-main__show-hovered .app-menu-entry:focus {
+    img {
+      margin-top: -8px;
+    }
+
+    .app-menu-entry--label {
+      opacity: 1;
+      bottom: 0;
+    }
+
+    &::before, .app-menu-entry::before {
+      opacity: 0;
+    }
+  }
+}
+
+::v-deep .app-menu-more .button-vue--vue-tertiary {
+  opacity: .7;
+  margin: 3px;
+  filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
+
+  &:not([aria-expanded="true"]) {
+    color: var(--color-main-text);
+
+    &:hover {
+      opacity: 1;
+      background-color: transparent !important;
+    }
+  }
+
+    &:focus-visible {
+      opacity: 1;
+      outline: none !important;
+    }
+}
+
+.app-menu-popover-entry {
+  .app-icon {
+    position: relative;
+    height: 44px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
+
+    &.has-unread::after {
+      background-color: var(--color-main-text);
+    }
+
+    img {
+      width: $header-icon-size;
+      height: $header-icon-size;
+    }
+  }
+}
+
+.has-unread::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-primary-element-text);
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  top: 10px;
+  right: 10px;
+}
+
+.unread-counter {
+  display: none;
+}
+</style>

src/menus/SideMenuWithCategories.vue

@@ -52,7 +52,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </div>
 </template>
 
-<script>
+<script setup>
 import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
@@ -61,6 +61,8 @@ import AppSearch from './AppSearch'
 import SideMenuBigApp from './SideMenuBigApp'
 import { loadState } from '@nextcloud/initial-state'
 
+import { ref } from 'vue'
+
 export default {
   name: 'SideMenuWithCategories',
   components: {

tsconfig.json

@@ -1,33 +0,0 @@
-{
-	"extends": "@vue/tsconfig/tsconfig.json",
-	"include": ["./src/**/*.js"],
-	"compilerOptions": {
-		"types": ["node", "vue", "vue-router"],
-		"outDir": "./js/",
-		"target": "ESNext",
-		"module": "ESNext",
-		// Set module resolution to bundler and `noEmit` to be able to set `allowImportingTsExtensions`, so we can import Typescript with .ts extension
-		"moduleResolution": "Bundler",
-		"allowImportingTsExtensions": true,
-		"noEmit": true,
-		// Allow ts to import js files
-		"allowJs": true,
-		"allowSyntheticDefaultImports": true,
-		"declaration": false,
-		"noImplicitAny": false,
-		"resolveJsonModule": true,
-		"strict": true,
-	},
-	"vueCompilerOptions": {
-		"target": 2.7
-	},
-	"ts-node": {
-		// these options are overrides used only by ts-node
-		// same as our --compilerOptions flag and our TS_NODE_COMPILER_OPTIONS environment variable
-		"compilerOptions": {
-			"moduleResolution": "node",
-			"module": "commonjs",
-			"verbatimModuleSyntax": false
-		}
-	}
-}

webpack.config.js

@@ -0,0 +1,79 @@
+
+
+
+const Encore = require('@symfony/webpack-encore');
+
+// Manually configure the runtime environment if not already configured yet by the "encore" command.
+// It's useful when you use tools that rely on webpack.config.js file.
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
+
+Encore
+    // directory where compiled assets will be stored
+    .setOutputPath('[ext]')
+    // public path used by the web server to access the output path
+    .setPublicPath('/static')
+    // only needed for CDN's or subdirectory deploy
+    .setManifestKeyPrefix('build/')
+
+    /*
+     * ENTRY CONFIG
+     *
+     * Each entry will result in one JavaScript file (e.g. app.js)
+     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
+     */
+    .addEntry('admin', './src/admin.js')
+    .addEntry('menu', './src/menu.js')
+
+    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
+    .splitEntryChunks()
+
+    // will require an extra script tag for runtime.js
+    // but, you probably want this, unless you're building a single-page app
+    .enableSingleRuntimeChunk()
+
+    /*
+     * FEATURE CONFIG
+     *
+     * Enable & configure other features below. For a full
+     * list of features, see:
+     * https://symfony.com/doc/current/frontend.html#adding-more-features
+     */
+    .cleanupOutputBeforeBuild()
+    // .enableBuildNotifications()
+    .enableVueLoader(() => {}, {
+    })
+    .enableSourceMaps(!Encore.isProduction())
+    // enables hashed filenames (e.g. app.abc123.css)
+    .enableVersioning(Encore.isProduction())
+
+    .configureBabel((config) => {
+        config.plugins.push('@babel/plugin-syntax-dynamic-import');
+    })
+
+    .copyFiles({
+        from: './img',
+        to: 'dist/img/[path][name].[ext]'
+    })
+
+    // enables Sass/SCSS support
+    .enableSassLoader()
+
+    // uncomment if you use TypeScript
+    //.enableTypeScriptLoader()
+
+    // uncomment if you use React
+    //.enableReactPreset()
+
+    // uncomment to get integrity="..." attributes on your script & link tags
+    // requires WebpackEncoreBundle 1.4 or higher
+    //.enableIntegrityHashes(Encore.isProduction())
+
+    // uncomment if you're having problems with a jQuery plugin
+    //.autoProvidejQuery()
+;
+
+console.log(Encore.getWebpackConfig())
+
+module.exports = Encore.getWebpackConfig();

webpack.js

@@ -1,70 +0,0 @@
-const path = require('path')
-const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
-const {
-  VueLoaderPlugin
-} = require('vue-loader')
-// const StyleLintPlugin = require('stylelint-webpack-plugin')
-
-module.exports = {
-  devtool: "source-map",
-  entry: {
-    'admin': path.join(__dirname, 'src', 'admin.js'),
-    'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
-  },
-  output: {
-    path: path.resolve(__dirname, './js'),
-    publicPath: '/js',
-    filename: '[name].js?v=[chunkhash]',
-    chunkFilename: 'chunks/[name]-[chunkhash].js',
-  },
-  module: {
-    rules: [{
-        test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader'],
-      },
-      {
-        test: /\.scss$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-      },
-      {
-        test: /\.tsx?$/,
-        use: [
-          'babel-loader',
-          {
-            // Fix TypeScript syntax errors in Vue
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true,
-            },
-          },
-        ],
-        exclude: BabelLoaderExcludeNodeModulesExcept([]),
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'url-loader',
-        options: {
-          name: '[name].[ext]?[hash]',
-          limit: 8192,
-        },
-      },
-    ],
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    // new StyleLintPlugin(),
-  ],
-  resolve: {
-    extensions: ['.*', '.js', '.vue'],
-    symlinks: false,
-  },
-}