update app version

Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/370

.gitea/issue_template/ISSUE_TEMPLATE.yml

@@ -26,7 +26,7 @@ body:
     id: configuration
     attributes:
       label: Configuration
-      description: Export the configuration using the admin page and copy/paste here ([documentation](https://deblan.gitnet.page/side_menu_doc/tips/#export-the-configuration)).
+      description: Export the configuration using the admin page and copy/paste here ([documentation](https://deblan.gitnet.page/side_menu_doc/docs/FAQ/export-config/)).
       value: |
         ```
         {

.woodpecker/.build.yml

@@ -7,16 +7,10 @@ when:
   branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
 
 steps:
-  "Install dependencies":
-    image: node:16
-    pull: true
-    commands:
-      - npm i
-
   "Build JS":
-    image: node:16
+    image: node:20
     commands:
-      - npm run build
+      - make build
 
   "Build translations":
     image: deblan/php:8.3

CHANGELOG.md

@@ -1,5 +1,26 @@
 ## [Unreleased]
 
+## 4.0.1
+### Fixed
+* fix top menu labels (fix #368)
+* fix #369: The menu is displayed even if there are no apps
+
+## 4.0.0
+### Added
+* add compatibility with NC30
+
+## 3.13.1
+### Fixed
+* fix #354: remove the opener when the menu is always displayed
+* fix extra margin between the logo and the opener
+
+## 3.13.0
+### Added
+* show apps generated with Tables (fix #349)
+* add constructor property promotion
+### Fixed
+* remove .app-navigation--close translationX for always-displayed menu (fix #348)
+
 ## 3.12.0
 ### Added
 * add compatibility with NC29

appinfo/info.xml

@@ -32,7 +32,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>3.12.0</version>
+    <version>4.0.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -54,8 +54,8 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_big_menu.png</screenshot>
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png</screenshot>
     <dependencies>
-        <nextcloud min-version="25" max-version="29"/>
-        <php min-version="7.4"/>
+        <nextcloud min-version="30" max-version="30"/>
+        <php min-version="8.0"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

bin/import_config.php

@@ -1,21 +1,75 @@
 <?php
-/**
- * Imports a json configuration into a sqlite database.
- *
- * Usage:
- *   php bin/import_config.php /path/to/config.json /path/to/owncloud.db
- */
 
-$configFile = $argv[1];
-$databaseFile = $argv[2];
+function showUsageAndExit(int $code)
+{
+    global $argv;
 
-$content = file_get_contents($configFile);
-$config = json_decode($content, true);
+    echo "${argv[0]} [--help] --config /path/to/config/config.php --file /path/to/config.json\n";
 
-$pdo = new \Pdo(sprintf('sqlite:%s', $databaseFile));
-$stmt = $pdo->prepare('UPDATE oc_appconfig SET configvalue=:value WHERE configkey=:key and appid=:appId');
+    exit($code);
+}
 
-foreach ($config as $key => $value) {
+function value(string $shortName, string $longName, array $options, bool $required = true): ?string
+{
+    $value = $options[$shortName] ?? $options[$longName] ?? null;
+
+    if (is_array($value)) {
+        echo "To much --{$longName}\n";
+        showUsageAndExit(1);
+    }
+
+    if (empty($value) && $required) {
+        echo "--{$longName} is missing\n";
+        showUsageAndExit(1);
+    }
+
+    return $value;
+}
+
+$options = getopt('t:f:c:h', [
+    'type:',
+    'file:',
+    'config:',
+    'help',
+]);
+
+$help = value('h', 'help', $options, false);
+$config = value('c', 'config', $options);
+$file = value('f', 'file', $options);
+
+if (!is_readable($config) && !is_file($config)) {
+    echo "No such file: {$config}\n";
+
+    exit(1);
+}
+
+if (!is_readable($file) && !is_file($file)) {
+    echo "No such file: {$file}\n";
+
+    exit(1);
+}
+
+$appConfig = json_decode(file_get_contents($file), true);
+
+require $config;
+
+if ('mysql' === $CONFIG['dbtype']) {
+    $pdo = new \PDO(
+        'mysql:host='.$CONFIG['dbhost'].';dbname='.$CONFIG['dbname'],
+        $CONFIG['dbuser'],
+        $CONFIG['dbpassword']
+    );
+} elseif ($CONFIG['dbtype']) {
+    $pdo = new \PDO(sprintf('sqlite:%s', $CONFIG['datadirectory'].'/owncloud.db'));
+} else {
+    echo "dbtype is not valid\n";
+
+    exit(1);
+}
+
+$stmt = $pdo->prepare('UPDATE '.$CONFIG['dbtableprefix'].'appconfig SET configvalue=:value WHERE configkey=:key and appid=:appId');
+
+foreach ($appConfig as $key => $value) {
     $stmt->execute([
         'appId' => 'side_menu',
         'key' => $key,

css/sideMenu.css

@@ -89,6 +89,10 @@
 .side-menu-opener span {
   position: relative;
   left: 50px;
+  display: block;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 }
 
 .side-menu-opener:active, .side-menu-opener:focus {
@@ -221,6 +225,11 @@
 .side-menu-category-title {
   padding-left: 10px;
   color: var(--side-menu-text-color, #fff);
+  font-weight: bold;
+  font-size: 20px;
+  margin-bottom: 12px;
+  line-height: 30px;
+  margin-top: 0;
 }
 
 .side-menu-loader {
@@ -293,8 +302,9 @@
   display: inline;
 }
 
-.side-menu-always-displayed .app-navigation--close {
-  transform: translateX(calc(-100% + 50px));
+.side-menu-always-displayed .app-navigation-toggle-wrapper {
+  right: 0 !important;
+  margin-left: 0 !important;
 }
 
 #side-menu.side-menu-with-categories {

lib/Controller/AdminSettingController.php

@@ -22,37 +22,25 @@ use OCA\SideMenu\AppInfo\Application;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\DataDownloadResponse;
 use OCP\AppFramework\Http\RedirectResponse;
-use OCP\AppFramework\Http\Response;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 
 class AdminSettingController extends Controller
 {
-    /**
-     * @var IConfig
-     */
-    protected $config;
-
-    /**
-     * @var IURLGenerator
-     */
-    protected $urlGenerator;
-
-    public function __construct($appName, IRequest $request, IConfig $config, IURLGenerator $urlGenerator)
-    {
+    public function __construct(
+        $appName,
+        IRequest $request,
+        protected IConfig $config,
+        protected IURLGenerator $urlGenerator
+    ) {
         parent::__construct($appName, $request);
-
-        $this->config = $config;
-        $this->urlGenerator = $urlGenerator;
     }
 
     /**
      * @NoCSRFRequired
-     *
-     * @return RedirectResponse
      */
-    public function removeCache()
+    public function removeCache(): RedirectResponse
     {
         $this->config->setAppValue(Application::APP_ID, 'cache-categories', '[]');
 
@@ -63,10 +51,8 @@ class AdminSettingController extends Controller
 
     /**
      * @NoCSRFRequired
-     *
-     * @return Response
      */
-    public function exportConfiguration()
+    public function exportConfiguration(): DataDownloadResponse
     {
         $keys = $this->config->getAppKeys(Application::APP_ID);
         $appConfig = [];

lib/Controller/AppController.php

@@ -29,28 +29,14 @@ use OCP\IUserSession;
 
 class AppController extends Controller
 {
-    /**
-     * @var ConfigProxy
-     */
-    protected $config;
-
-    /**
-     * @var AppRepository
-     */
-    protected $appRepository;
-
     public function __construct(
         string $appName,
         IRequest $request,
-        AppRepository $appRepository,
-        IURLGenerator $urlGenerator,
-        ConfigProxy $config
+        protected AppRepository $appRepository,
+        protected IURLGenerator $urlGenerator,
+        protected ConfigProxy $config
     ) {
         parent::__construct($appName, $request);
-
-        $this->appRepository = $appRepository;
-        $this->urlGenerator = $urlGenerator;
-        $this->config = $config;
     }
 
     /**

lib/Controller/CssController.php

@@ -32,49 +32,26 @@ use OCP\IUserSession;
 
 class CssController extends Controller
 {
-    /**
-     * @var ConfigProxy
-     */
-    protected $config;
-
-    /**
-     * @var User
-     */
-    protected $user;
-
-    /**
-     * @var ThemingDefaults
-     */
-    protected $theming;
-
-    /**
-     * @var Color
-     */
-    protected $color;
+    protected ?User $user;
 
     public function __construct(
         string $appName,
         IRequest $request,
-        ConfigProxy $config,
-        ThemingDefaults $theming,
-        Color $color
+        protected ConfigProxy $config,
+        protected ThemingDefaults $theming,
+        protected Color $color
     ) {
         parent::__construct($appName, $request);
 
         $this->user = OC::$server[IUserSession::class]->getUser();
-        $this->config = $config;
-        $this->theming = $theming;
-        $this->color = $color;
     }
 
     /**
      * @NoAdminRequired
      * @NoCSRFRequired
      * @PublicPage
-     *
-     * @return Response
      */
-    public function stylesheet()
+    public function stylesheet(): TemplateResponse
     {
         $response = new TemplateResponse(Application::APP_ID, 'css/stylesheet', $this->getConfig(), 'blank');
         $response->addHeader('Content-Type', 'text/css');
@@ -107,15 +84,15 @@ class CssController extends Controller
             $isDarkThemeUserEnabled = 'dark' === $this->config->getUserValue($this->user, 'theme', '', 'accessibility');
             $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark');
 
-            $isBreezeDarkUserEnabled = '1' === $isBreezeDarkUserEnabled ||
-                ($isBreezeDarkGlobalEnabled && '' === $isBreezeDarkUserEnabled);
+            $isBreezeDarkUserEnabled = '1' === $isBreezeDarkUserEnabled
+                || ($isBreezeDarkGlobalEnabled && '' === $isBreezeDarkUserEnabled);
         } else {
             $isDarkThemeUserEnabled = false;
             $isBreezeDarkUserEnabled = false;
         }
 
-        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) ||
-            ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
+        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled)
+            || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
 
         $primaryColor = $this->theming->getColorPrimary();
         $lightenPrimaryColor = $this->color->adjustBrightness($primaryColor, 0.2);

lib/Controller/JsController.php

@@ -32,32 +32,14 @@ use OCP\L10N\IFactory;
 
 class JsController extends Controller
 {
-    /**
-     * @var ConfigProxy
-     */
-    protected $config;
-
-    /**
-     * @var User
-     */
-    protected $user;
-
-    /**
-     * @var ThemingDefaults
-     */
-    protected $themingDefaults;
-
-    /**
-     * @var IFactory
-     */
-    protected $l10nFactory;
+    protected ?User $user;
 
     public function __construct(
         string $appName,
         IRequest $request,
-        ConfigProxy $config,
-        ThemingDefaults $themingDefaults,
-        IFactory $l10nFactory
+        protected ConfigProxy $config,
+        protected ThemingDefaults $themingDefaults,
+        protected IFactory $l10nFactory
     ) {
         parent::__construct($appName, $request);
 

lib/Controller/NavController.php

@@ -19,7 +19,6 @@
 namespace OCA\SideMenu\Controller;
 
 use OC;
-use OC\App\AppStore\Fetcher\CategoryFetcher;
 use OC\URLGenerator;
 use OCA\SideMenu\Service\AppRepository;
 use OCA\SideMenu\Service\CategoryRepository;
@@ -32,57 +31,24 @@ use OCP\L10N\IFactory;
 
 class NavController extends Controller
 {
-    /**
-     * @var ConfigProxy
-     */
-    protected $config;
-
-    /**
-     * @var AppRepository
-     */
-    protected $appRepository;
-
-    /**
-     * @var IFactory
-     */
-    protected $l10nFactory;
-
-    /**
-     * @var CategoryFetcher
-     */
-    protected $categoryFetcher;
-
-    /**
-     * @var URLGenerator
-     */
-    protected $router;
-
     public function __construct(
         string $appName,
         IRequest $request,
-        ConfigProxy $config,
-        AppRepository $appRepository,
-        CategoryRepository $categoryRepository,
-        URLGenerator $router,
-        IFactory $l10nFactory
+        protected ConfigProxy $config,
+        protected AppRepository $appRepository,
+        protected CategoryRepository $categoryRepository,
+        protected URLGenerator $router,
+        protected IFactory $l10nFactory
     ) {
         parent::__construct($appName, $request);
-
-        $this->config = $config;
-        $this->appRepository = $appRepository;
-        $this->categoryRepository = $categoryRepository;
-        $this->l10nFactory = $l10nFactory;
-        $this->router = $router;
     }
 
     /**
      * @NoAdminRequired
      * @NoCSRFRequired
      * @PublicPage
-     *
-     * @return JSONResponse
      */
-    public function items()
+    public function items(): JSONResponse
     {
         $user = OC::$server[IUserSession::class]->getUser();
         $items = [];
@@ -189,11 +155,11 @@ class NavController extends Controller
 
         usort($items, function ($a, $b) use ($categoriesLabels) {
             foreach ($categoriesLabels as $key => $value) {
-                if ($a['categoryId'] === 'other') {
+                if ('other' === $a['categoryId']) {
                     return -1;
                 }
 
-                if ($b['categoryId'] === 'other') {
+                if ('other' === $b['categoryId']) {
                     return 1;
                 }
 

lib/Controller/PersonalSettingController.php

@@ -21,40 +21,20 @@ namespace OCA\SideMenu\Controller;
 use OCA\SideMenu\AppInfo\Application;
 use OCA\SideMenu\Service\ConfigProxy;
 use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\Response;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IUserSession;
 
 class PersonalSettingController extends Controller
 {
-    /**
-     * @var IConfig
-     */
-    protected $config;
-
-    /**
-     * @var ConfigProxy
-     */
-    protected $configProxy;
-
-    /**
-     * @var IUserSession
-     */
-    protected $userSession;
-
     public function __construct(
         $appName,
         IRequest $request,
-        IConfig $config,
-        ConfigProxy $configProxy,
-        IUserSession $userSession
+        protected IConfig $config,
+        protected ConfigProxy $configProxy,
+        protected IUserSession $userSession
     ) {
         parent::__construct($appName, $request);
-
-        $this->config = $config;
-        $this->configProxy = $configProxy;
-        $this->userSession = $userSession;
     }
 
     /**
@@ -63,10 +43,8 @@ class PersonalSettingController extends Controller
      *
      * @param mixed $name
      * @param mixed $value
-     *
-     * @return Response
      */
-    public function valueSet($name, $value)
+    public function valueSet($name, $value): array
     {
         $doSave = false;
         $user = $this->userSession->getUser();

lib/Service/AppRepository.php

@@ -3,7 +3,12 @@
 namespace OCA\SideMenu\Service;
 
 use OC\User\User;
+use OCA\SideMenu\AppInfo\Application;
+use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\INavigationManager;
+use OCP\IUserSession;
 use OCP\L10N\IFactory;
 
 /**
@@ -13,51 +18,25 @@ use OCP\L10N\IFactory;
  */
 class AppRepository
 {
-    /**
-     * @var \OC_App
-     */
-    protected $ocApp;
-
-    /**
-     * @var IFactory
-     */
-    protected $l10nFactory;
-
-    /**
-     * @var ConfigProxy
-     */
-    protected $config;
-
-    /**
-     * @var CategoryRepository
-     */
-    protected $categoryRepository;
-
-    /**
-     * @var INavigationManager
-     */
-    protected $navigationManager;
-
     public function __construct(
-        \OC_App $ocApp,
-        INavigationManager $navigationManager,
-        IFactory $l10nFactory,
-        ConfigProxy $config,
-        CategoryRepository $categoryRepository
+        protected \OC_App $ocApp,
+        protected INavigationManager $navigationManager,
+        protected IFactory $l10nFactory,
+        protected ConfigProxy $config,
+        protected CategoryRepository $categoryRepository,
+        protected IEventDispatcher $dispatcher,
+        protected IUserSession $userSession,
     ) {
-        $this->ocApp = $ocApp;
-        $this->l10nFactory = $l10nFactory;
-        $this->config = $config;
-        $this->navigationManager = $navigationManager;
-        $this->categoryRepository = $categoryRepository;
+        $this->dispatcher->dispatchTyped(new BeforeTemplateRenderedEvent(
+            $this->userSession->isLoggedIn(),
+            new TemplateResponse(Application::APP_NAME, '')
+        ));
     }
 
     /**
      * Retrieves visibles apps.
-     *
-     * @return array
      */
-    public function getVisibleApps()
+    public function getVisibleApps(): array
     {
         $navigation = $this->navigationManager->getAll();
         $appCategoriesCustom = $this->config->getAppValueArray('apps-categories-custom', '[]');
@@ -90,6 +69,14 @@ class AppRepository
                         'external_links',
                     ],
                 ];
+            } elseif ('tables_application' === substr($app['id'], 0, 18)) {
+                $visibleApps[$app['id']] = [
+                    'id' => $app['id'],
+                    'name' => $this->getAppName($app),
+                    'href' => $app['href'],
+                    'icon' => $app['icon'],
+                    'category' => [],
+                ];
             } elseif ('files' === $app['id']) {
                 $visibleApps[$app['id']] = [
                     'id' => $app['id'],
@@ -110,7 +97,7 @@ class AppRepository
         return $visibleApps;
     }
 
-    public function getAppName($app)
+    public function getAppName($app): string
     {
         return $this->config->getAppValue(
             'app.navigation.name',
@@ -119,7 +106,7 @@ class AppRepository
         );
     }
 
-    public function getOrderedApps(?User $user = null)
+    public function getOrderedApps(?User $user = null): array
     {
         $apps = $this->getVisibleApps();
         $orders = $this->config->getAppValueArray('apps-order', '[]');

lib/Service/CategoryRepository.php

@@ -15,51 +15,19 @@ use OCP\L10N\IFactory;
  */
 class CategoryRepository
 {
-    /**
-     * @var CategoryFetcher
-     */
-    protected $categoryFetcher;
-
-    /**
-     * @var IFactory
-     */
-    protected $l10nFactory;
-
-    /**
-     * @var ConfigProxy
-     */
-    protected $config;
-
-    /**
-     * @var IConfig
-     */
-    protected $iConfig;
-
-    /**
-     * @var IUserSession
-     */
-    protected $userSession;
-
     public function __construct(
-        CategoryFetcher $categoryFetcher,
-        ConfigProxy $config,
-        IConfig $iConfig,
-        IFactory $l10nFactory,
-        IUserSession $userSession
+        protected CategoryFetcher $categoryFetcher,
+        protected ConfigProxy $config,
+        protected IConfig $iConfig,
+        protected IFactory $l10nFactory,
+        protected IUserSession $userSession
     ) {
-        $this->categoryFetcher = $categoryFetcher;
-        $this->l10nFactory = $l10nFactory;
-        $this->config = $config;
-        $this->iConfig = $iConfig;
-        $this->userSession = $userSession;
     }
 
     /**
      * Retrieves categories.
-     *
-     * @return array
      */
-    public function getOrderedCategories()
+    public function getOrderedCategories(): array
     {
         $currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
         $type = $this->config->getAppValue('categories-order-type', 'default');

lib/Service/ConfigProxy.php

@@ -13,12 +13,7 @@ use OCP\IConfig;
  */
 class ConfigProxy
 {
-    /**
-     * @var IConfig
-     */
-    protected $config;
-
-    public function __construct(IConfig $config)
+    public function __construct(protected IConfig $config)
     {
         $this->config = $config;
     }

lib/Service/LangRepository.php

@@ -11,12 +11,7 @@ use OCP\IDBConnection;
  */
 class LangRepository
 {
-    /**
-     * @var IDBConnection
-     */
-    protected $db;
-
-    public function __construct(IDBConnection $db)
+    public function __construct(protected IDBConnection $db)
     {
         $this->db = $db;
     }

lib/Settings/Admin.php

@@ -21,75 +21,27 @@ namespace OCA\SideMenu\Settings;
 use OCA\SideMenu\AppInfo\Application;
 use OCA\SideMenu\Service\AppRepository;
 use OCA\SideMenu\Service\CategoryRepository;
+use OCA\SideMenu\Service\Color;
 use OCA\SideMenu\Service\ConfigProxy;
+use OCA\SideMenu\Service\LangRepository;
+use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IL10N;
 use OCP\ILogger;
 use OCP\Settings\ISettings;
-use OCA\Theming\ThemingDefaults;
-use OCA\SideMenu\Service\Color;
-use OCA\SideMenu\Service\LangRepository;
 
 class Admin implements ISettings
 {
-    /**
-     * @var IL10N
-     */
-    private $l;
-
-    /**
-     * @var ILogger
-     */
-    private $logger;
-
-    /**
-     * @var ConfigProxy
-     */
-    private $config;
-
-    /**
-     * @var AppRepository
-     */
-    private $appRepository;
-
-    /**
-     * @var CategoryRepository
-     */
-    private $categoryRepository;
-
-    /**
-     * @var ThemingDefaults
-     */
-    protected $theming;
-
-    /**
-     * @var Color
-     */
-    protected $color;
-
-    /**
-     * @var LangRepository
-     */
-    protected $langRepository;
-
     public function __construct(
-        IL10N $l,
-        ILogger $logger,
-        ConfigProxy $config,
-        AppRepository $appRepository,
-        CategoryRepository $categoryRepository,
-        ThemingDefaults $theming,
-        Color $color,
-        LangRepository $langRepository
+        protected IL10N $l,
+        protected ILogger $logger,
+        protected ConfigProxy $config,
+        protected AppRepository $appRepository,
+        protected CategoryRepository $categoryRepository,
+        protected ThemingDefaults $theming,
+        protected Color $color,
+        protected LangRepository $langRepository
     ) {
-        $this->l = $l;
-        $this->logger = $logger;
-        $this->config = $config;
-        $this->appRepository = $appRepository;
-        $this->categoryRepository = $categoryRepository;
-        $this->theming = $theming;
-        $this->color = $color;
-        $this->langRepository = $langRepository;
     }
 
     /**

lib/Settings/AdminSection.php

@@ -25,51 +25,22 @@ use OCP\Settings\IIconSection;
 
 class AdminSection implements IIconSection
 {
-    /**
-     * @var IL10N
-     */
-    private $l;
-
-    /**
-     * @var IURLGenerator
-     */
-    private $url;
-
-    public function __construct(IURLGenerator $url, IL10N $l)
-    {
-        $this->url = $url;
-        $this->l = $l;
+    public function __construct(
+        protected IURLGenerator $url,
+        protected IL10N $l
+    ) {
     }
 
-    /**
-     * returns the ID of the section. It is supposed to be a lower case string,
-     * e.g. 'ldap'.
-     *
-     * @returns string
-     */
     public function getID()
     {
         return Application::APP_ID;
     }
 
-    /**
-     * returns the translated name as it should be displayed, e.g. 'LDAP / AD
-     * integration'. Use the L10N service to translate it.
-     *
-     * @return string
-     */
     public function getName()
     {
         return $this->l->t(Application::APP_NAME);
     }
 
-    /**
-     * @return int whether the form should be rather on the top or bottom of
-     *             the settings navigation. The sections are arranged in ascending order of
-     *             the priority values. It is required to return a value between 0 and 99.
-     *
-     * E.g.: 70
-     */
     public function getPriority()
     {
         return 70;

lib/Settings/Personal.php

@@ -29,43 +29,13 @@ use OCP\Settings\ISettings;
 
 class Personal implements ISettings
 {
-    /**
-     * @var IL10N
-     */
-    private $l;
-
-    /**
-     * @var ILogger
-     */
-    private $logger;
-
-    /**
-     * @var ConfigProxy
-     */
-    private $config;
-
-    /**
-     * @var IUserSession
-     */
-    private $userSession;
-
-    /**
-     * @var AppRepository
-     */
-    private $appRepository;
-
     public function __construct(
-        IL10N $l,
-        ILogger $logger,
-        ConfigProxy $config,
-        IUserSession $userSession,
-        AppRepository $appRepository
+        protected IL10N $l,
+        protected ILogger $logger,
+        protected ConfigProxy $config,
+        protected IUserSession $userSession,
+        protected AppRepository $appRepository
     ) {
-        $this->l = $l;
-        $this->logger = $logger;
-        $this->config = $config;
-        $this->userSession = $userSession;
-        $this->appRepository = $appRepository;
     }
 
     /**

lib/Settings/PersonalSection.php

@@ -26,34 +26,13 @@ use OCP\Settings\IIconSection;
 
 class PersonalSection implements IIconSection
 {
-    /**
-     * @var IL10N
-     */
-    private $l;
-
-    /**
-     * @var IURLGenerator
-     */
-    private $url;
-
-    /**
-     * @var ConfigProxy
-     */
-    private $configProxy;
-
-    public function __construct(IURLGenerator $url, IL10N $l, ConfigProxy $configProxy)
-    {
-        $this->url = $url;
-        $this->l = $l;
-        $this->configProxy = $configProxy;
+    public function __construct(
+        protected IURLGenerator $url,
+        protected IL10N $l,
+        protected ConfigProxy $configProxy
+    ) {
     }
 
-    /**
-     * returns the ID of the section. It is supposed to be a lower case string,
-     * e.g. 'ldap'.
-     *
-     * @returns string
-     */
     public function getID()
     {
         if ($this->configProxy->getAppValueBool('force', '0')) {
@@ -63,12 +42,6 @@ class PersonalSection implements IIconSection
         return Application::APP_ID;
     }
 
-    /**
-     * returns the translated name as it should be displayed, e.g. 'LDAP / AD
-     * integration'. Use the L10N service to translate it.
-     *
-     * @return string
-     */
     public function getName()
     {
         if ($this->configProxy->getAppValueBool('force', '0')) {
@@ -78,13 +51,6 @@ class PersonalSection implements IIconSection
         return $this->l->t(Application::APP_NAME);
     }
 
-    /**
-     * @return int whether the form should be rather on the top or bottom of
-     *             the settings navigation. The sections are arranged in ascending order of
-     *             the priority values. It is required to return a value between 0 and 99.
-     *
-     * E.g.: 70
-     */
     public function getPriority()
     {
         if ($this->configProxy->getAppValueBool('force', '0')) {

package.json

@@ -11,9 +11,15 @@
 		"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",
-		"vue": "^2.6.11"
+		"trim": "^1.0.1"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
@@ -22,42 +28,46 @@
 		"node": ">=16.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.9.0",
-		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.9.0",
-		"@nextcloud/axios": "^2.3.0",
-		"@nextcloud/browserslist-config": "^2.3.0",
-		"@nextcloud/eslint-config": "^8.1.2",
-		"@nextcloud/initial-state": "^2.0.0",
-		"@nextcloud/l10n": "^2.1.0",
-		"@nextcloud/vue": "^7.12.1",
-		"babel-eslint": "^10.1.0",
-		"babel-loader": "^8.1.0",
-		"css-loader": "^6.10.0",
-		"eslint": "^8.0.0",
-		"eslint-config-standard": "^17.0.0",
-		"eslint-import-resolver-webpack": "^0.12.1",
-		"eslint-plugin-import": "^2.20.0",
-		"eslint-plugin-nextcloud": "^0.3.0",
-		"eslint-plugin-node": "^10.0.0",
-		"eslint-plugin-promise": "^6.0.0",
-		"eslint-plugin-standard": "^4.0.1",
-		"eslint-plugin-vue": "^9.0.0",
-		"eslint-webpack-plugin": "^3.0.0",
-		"file-loader": "^6.0.0",
-		"sass": "^1.49.9",
-		"sass-loader": "^13.0.2",
-		"stylelint": "^14.0.0",
-		"stylelint-config-recommended-scss": "^7.0.0",
-		"stylelint-scss": "^4.0.0",
-		"stylelint-webpack-plugin": "^3.3.0",
-		"url-loader": "^4.0.0",
-		"vue-loader": "^15",
-		"vue-style-loader": "^4.1.3",
-		"vue-template-compiler": "^2.7.13",
-		"webpack": "^5.0.0",
-		"webpack-cli": "^4.0.0",
-		"webpack-merge": "^4.2.2",
-		"webpack-node-externals": "^1.7.2"
+		"@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",
+		"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",
+		"webpack": "^5.94.0",
+		"webpack-cli": "^5.0.2",
+		"webpack-merge": "^6.0.1",
+		"workbox-webpack-plugin": "^7.1.0"
 	}
 }

src/AdminCategoriesCustom.vue

@@ -84,9 +84,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 </style>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 export default {
   name: 'AdminCategoriesCustom',

src/AppMenu.vue

@@ -28,9 +28,9 @@
     <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(state)"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
@@ -50,8 +50,8 @@
         </a>
       </li>
     </ul>
-    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')" v-if="apps !== null">
-      <NcActionLink v-for="app in popoverAppList()"
+    <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"
@@ -71,92 +71,128 @@
 </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 {
+export default defineComponent({
   name: 'AppMenu',
+
   components: {
-    NcActions, NcActionLink,
+    NcActions,
+    NcActionLink,
   },
+
+  setup() {
+    return {
+        t,
+        n,
+    }
+  },
+
   data() {
     return {
       apps: null,
-      appLimit: 0,
+      appList: [],
       observer: null,
       targetBlankApps: [],
-      hiddenLabels: true
+      hiddenLabels: true,
+      state: 1,
     }
   },
+
   mounted() {
-    const ncApps = loadState('core', 'apps', {})
-    this.apps = {}
-    let orders = {}
+    axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
+      .then((response) => response.data)
+      .then((data) => {
+        if (data.ocs.meta.statuscode !== 200) {
+          return
+        }
 
-    window.menuAppsOrder.forEach((app, order) => {
-      orders[app] = order + 1
-    })
-
-    Array.from(window.topMenuApps).forEach((id) => {
-      if (ncApps.hasOwnProperty(id)) {
-        this.apps[id] = ncApps[id]
-        this.apps[id].order = orders[id] || null
-      }
-    })
+        this.setApps(data.ocs.data)
+      })
 
     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()
+    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 }) + ')' : '')
     },
-    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>
@@ -304,7 +340,7 @@ $header-icon-size: 20px;
   filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
   &:not([aria-expanded="true"]) {
-    color: var(--color-primary-element-text);
+    color: var(--color-main-text);
 
     &:hover {
       opacity: 1;

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 = () => {

src/SideMenu.vue

@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar" />
       <AppSearch v-model:search="search" />
-      <OpenerButton />
+      <OpenerButton v-if="!alwaysDisplayed" />
       <Logo
         v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
         v-bind:image="logo"
@@ -39,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <ul class="side-menu-apps-list" :class="{'side-menu-apps-list--with-settings': !!settings}">
       <SideMenuApp
         v-for="(app, key) in apps"
-        v-if="!hiddenApps.includes(app.id) && searchMatch(app.name)"
+        v-if="searchMatch(app.name)"
         v-bind:classes="{'side-menu-app': true, 'active': app.active}"
         v-bind:key="key"
         v-bind:icon="app.icon"
@@ -94,17 +94,16 @@ export default {
         orders[app] = order + 1
       })
 
-      for (let id in ncApps) {
-        if (window.topMenuApps.includes(id) && !window.topSideMenuApps.includes(id)) {
+      for (let app of ncApps) {
+        if (window.topMenuApps.includes(app.id) && !window.topSideMenuApps.includes(app.id)) {
           continue
         }
 
-        if (this.hiddenApps.includes(id)) {
+        if (this.hiddenApps.includes(app.id)) {
           continue
         }
 
-        let app = ncApps[id]
-        app.order = orders[id] || null
+        app.order = orders[app.id] || null
 
         finalApps.push(app)
       }

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', {

tsconfig.json

@@ -0,0 +1,33 @@
+{
+	"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.js

@@ -1,54 +1,70 @@
 const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
+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=[hash]',
-        chunkFilename: 'chunks/[name]-[hash].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: /\.js$/,
-                loader: 'babel-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.(png|jpg|gif|svg)$/,
-                loader: 'url-loader',
-                options: {
-                    name: '[name].[ext]?[hash]',
-                    limit: 8192,
-                },
+  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,
             },
+          },
         ],
-    },
-    plugins: [
-        new VueLoaderPlugin(),
-        new StyleLintPlugin(),
+        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,
+        },
+      },
     ],
-    resolve: {
-        extensions: ['*', '.js', '.vue'],
-        symlinks: false,
-    },
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    // new StyleLintPlugin(),
+  ],
+  resolve: {
+    extensions: ['.*', '.js', '.vue'],
+    symlinks: false,
+  },
 }