fix: use modal instead of menu inside of a split pane

Closes #234

.changeset/new-yaks-drop.md

@@ -1,6 +0,0 @@
----
-"@openstapps/backend": patch
-"@openstapps/logger": patch
----
-
-Updated nodemailer dependency

backend/backend/CHANGELOG.md

@@ -1,12 +1,5 @@
 # @openstapps/backend
 
-## 4.0.1
-
-### Patch Changes
-
-- b40ba7ad: Updated Elasticsearch dependency
-  - @openstapps/core@4.0.0
-
 ## 4.0.0
 
 ### Major Changes

backend/backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/backend",
   "description": "A reference implementation for a StApps backend",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-only",
@@ -43,11 +43,11 @@
     "test:unit": "cross-env NODE_CONFIG_ENV=elasticsearch ALLOW_NO_TRANSPORT=true STAPPS_LOG_LEVEL=0 mocha --exit"
   },
   "dependencies": {
-    "@elastic/elasticsearch": "8.14.1",
+    "@elastic/elasticsearch": "8.4.0",
     "@openstapps/core": "workspace:*",
     "@openstapps/core-tools": "workspace:*",
     "@openstapps/logger": "workspace:*",
-    "@types/body-parser": "1.19.6",
+    "@types/body-parser": "1.19.2",
     "@types/cors": "2.8.13",
     "@types/express": "4.17.17",
     "@types/geojson": "1.0.6",
@@ -56,20 +56,20 @@
     "@types/nodemailer": "6.4.7",
     "@types/promise-queue": "2.2.0",
     "@types/uuid": "8.3.4",
-    "body-parser": "1.20.3",
+    "body-parser": "1.20.2",
     "cors": "2.8.5",
     "cosmiconfig": "8.1.3",
     "deepmerge": "4.3.1",
-    "express": "4.21.2",
+    "express": "4.18.2",
     "express-prom-bundle": "6.6.0",
     "express-promise-router": "4.1.1",
     "got": "12.6.0",
     "moment": "2.30.1",
-    "morgan": "1.10.1",
+    "morgan": "1.10.0",
     "nock": "13.3.1",
     "node-cache": "5.1.2",
     "node-cron": "3.0.2",
-    "nodemailer": "6.9.9",
+    "nodemailer": "6.9.1",
     "prom-client": "14.1.1",
     "promise-queue": "2.2.5",
     "uuid": "8.3.2"
@@ -83,7 +83,7 @@
     "@types/chai": "4.3.20",
     "@types/chai-as-promised": "7.1.8",
     "@types/mocha": "10.0.10",
-    "@types/morgan": "1.9.10",
+    "@types/morgan": "1.9.4",
     "@types/sinon": "10.0.14",
     "@types/sinon-express-mock": "1.3.9",
     "@types/supertest": "2.0.12",

backend/database/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @openstapps/database
 
-## 4.0.1
-
-### Patch Changes
-
-- b40ba7ad: Updated Elasticsearch dependency
-
 ## 4.0.0
 
 ### Major Changes

backend/database/Dockerfile

@@ -1,4 +1,4 @@
-FROM elasticsearch:8.14.3
+FROM elasticsearch:8.4.2
 
 EXPOSE 9200
 EXPOSE 9300

backend/database/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstapps/database",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "files": [
     "config",

configuration/projectmanagement/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @openstapps/projectmanagement
 
-## 4.0.1
-
-### Patch Changes
-
-- b40ba7ad: Updated Elasticsearch dependency
-
 ## 4.0.0
 
 ### Major Changes

configuration/projectmanagement/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/projectmanagement",
   "description": "Main documentation and scripts for maintenance.",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",
@@ -41,6 +41,7 @@
     "@openstapps/collection-utils": "workspace:*",
     "@openstapps/gitlab-api": "workspace:*",
     "@openstapps/logger": "workspace:*",
+    "@slack/web-api": "6.8.1",
     "commander": "10.0.0",
     "date-fns": "3.6.0",
     "glob": "10.3.10",

configuration/projectmanagement/src/tasks/remind.ts

@@ -22,6 +22,7 @@ import {
   User,
 } from '@openstapps/gitlab-api';
 import {Logger} from '@openstapps/logger';
+import {WebClient} from '@slack/web-api';
 import {CONCURRENCY, GROUPS, MAX_DEPTH_FOR_REMINDER, NOTE_PREFIX, SLACK_CHANNEL} from '../configuration.js';
 import {mapAsyncLimit} from '@openstapps/collection-utils';
 
@@ -52,7 +53,8 @@ export async function remind(api: Api): Promise<void> {
   Logger.info(`Found ${mergeRequests.length} open merge requests.`);
 
   // instantiate slack client
-  const client = undefined;
+  const client =
+    process.env.SLACK_API_TOKEN === undefined ? undefined : new WebClient(process.env.SLACK_API_TOKEN);
 
   // get members of the main group
   const members = await api.getMembers(MembershipScope.GROUPS, GROUPS[0]);

examples/minimal-connector/CHANGELOG.md

@@ -1,13 +1,5 @@
 # @openstapps/minimal-connector
 
-## 4.0.1
-
-### Patch Changes
-
-- Updated dependencies [b40ba7ad]
-  - @openstapps/api@4.0.1
-  - @openstapps/core@4.0.0
-
 ## 4.0.0
 
 ### Major Changes

examples/minimal-connector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-connector",
   "description": "This is a minimal connector which serves as an example",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",

examples/minimal-deployment/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @openstapps/minimal-deployment
 
-## 4.0.1
-
-### Patch Changes
-
-- b40ba7ad: Updated Elasticsearch dependency
-
 ## 4.0.0
 
 ### Major Changes

examples/minimal-deployment/docker-compose.yml

@@ -1,21 +1,23 @@
+version: '3.7'
+
 x-development-variables: &development-variables
   NODE_ENV: "development"
   ALLOW_NO_TRANSPORT: "true"
 
 services:
   database:
-    image: registry.gitlab.com/openstapps/openstapps/database:4.0.1
+    image: registry.gitlab.com/openstapps/openstapps/database:3.0.0
     # If you need persistence for debugging purposes uncomment the following lines
-    # volumes:
+    #volumes:
     #  - ./database:/usr/share/elasticsearch/data
     expose:
       - 9200
     ports:
       - 127.0.0.1:9200:9200
     environment:
-    #  - bootstrap.memory_lock=true
-    #  - discovery.type=single-node
-      - "ES_JAVA_OPTS=-Xms4g -Xmx4g"
+      - bootstrap.memory_lock=true
+      - "ES_JAVA_OPTS=-Xms2g -Xmx2g"
+      - discovery.type=single-node
     ulimits:
       memlock:
         soft: -1
@@ -23,7 +25,7 @@ services:
     restart: unless-stopped
 
   backend:
-    image: registry.gitlab.com/openstapps/openstapps/backend:4.0.1
+    image: registry.gitlab.com/openstapps/openstapps/backend:3.1.0
     environment:
       <<: *development-variables
       ES_ADDR: "http://database:9200"
@@ -35,11 +37,10 @@ services:
     ports:
       - 127.0.0.1:3000:3000
     labels:
-      - stapps.version=4.0.0
+      - stapps.version=4.1.0
     restart: unless-stopped
     depends_on:
-      database:
-        condition: service_healthy
+      - database
     links:
       - database
 

examples/minimal-deployment/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstapps/minimal-deployment",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "files": [
     "database",

examples/minimal-plugin/CHANGELOG.md

@@ -1,15 +1,5 @@
 # @openstapps/minimal-plugin
 
-## 4.0.1
-
-### Patch Changes
-
-- b40ba7ad: Updated Elasticsearch dependency
-- Updated dependencies [b40ba7ad]
-  - @openstapps/api-plugin@4.0.1
-  - @openstapps/api@4.0.1
-  - @openstapps/core@4.0.0
-
 ## 4.0.0
 
 ### Major Changes

examples/minimal-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-plugin",
   "description": "Minimal Plugin",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",
@@ -34,7 +34,7 @@
     "@openstapps/core-tools": "workspace:*",
     "@openstapps/logger": "workspace:*",
     "commander": "10.0.0",
-    "express": "4.21.2",
+    "express": "4.18.2",
     "ts-node": "10.9.2"
   },
   "devDependencies": {

frontend/app/CHANGELOG.md

@@ -1,14 +1,5 @@
 # @openstapps/app
 
-## 4.0.1
-
-### Patch Changes
-
-- b40ba7ad: Updated Elasticsearch dependency
-- Updated dependencies [b40ba7ad]
-  - @openstapps/api@4.0.1
-  - @openstapps/core@4.0.0
-
 ## 4.0.0
 
 ### Major Changes

frontend/app/angular.json

@@ -40,16 +40,14 @@
                 "glob": "CHANGELOG.md",
                 "input": ".",
                 "output": "assets"
-              },
-              "src/manifest.webmanifest"
+              }
             ],
             "styles": [
               {
                 "input": "src/global.scss",
                 "inject": true
               }
-            ],
-            "serviceWorker": "ngsw-config.json"
+            ]
           },
           "configurations": {
             "production": {
@@ -129,8 +127,7 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              },
-              "src/manifest.webmanifest"
+              }
             ]
           }
         },

frontend/app/cypress/integration/app.spec.ts

@@ -26,7 +26,7 @@ describe('App', () => {
   it('should have a proper title', () => {
     cy.visit('/overview');
 
-    cy.title().should('equal', 'Goethe-Uni');
+    cy.title().should('equal', 'StApps');
   });
 
   it('should have a proper working navigation', () => {

frontend/app/cypress/integration/context-menu.spec.ts

@@ -14,8 +14,6 @@
  */
 
 describe('context menu', function () {
-  const contextMenuSelector = 'stapps-context-menu-modal';
-
   beforeEach(function () {
     cy.interceptSearch({
       extends: {query: 'a'},
@@ -35,21 +33,21 @@ describe('context menu', function () {
   });
 
   it('should sort', function () {
-    cy.get(contextMenuSelector).within(() => {
+    cy.get('stapps-context').within(() => {
       cy.contains('ion-item', 'Name').click();
       cy.wait('@search');
     });
   });
 
   it('should filter', function () {
-    cy.get(contextMenuSelector).within(() => {
+    cy.get('stapps-context').within(() => {
       cy.contains('ion-item', '(17) Akademische Veranstaltung').click();
       cy.wait('@search');
     });
   });
 
   it('should have a working delete button', function () {
-    cy.get(contextMenuSelector).within(() => {
+    cy.get('stapps-context').within(() => {
       cy.contains('ion-item', '(17) Akademische Veranstaltung').click();
 
       cy.get('.checkbox-checked').should('have.length', 1);
@@ -62,7 +60,7 @@ describe('context menu', function () {
   it('should truncate long category items', function () {
     cy.contains('ion-list', 'Akademische Veranstaltung / Kategorien').within(() => {
       cy.contains('ion-item', '(1) Tutorium').should('not.exist');
-      cy.get('ion-button').click();
+      cy.get('div > ion-button').click();
       cy.contains('ion-item', '(1) Tutorium').should('exist');
     });
   });

frontend/app/ngsw-config.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
-  "index": "/index.html",
-  "assetGroups": [
-    {
-      "name": "app",
-      "installMode": "prefetch",
-      "resources": {
-        "files": ["/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
-      }
-    },
-    {
-      "name": "assets",
-      "installMode": "lazy",
-      "updateMode": "prefetch",
-      "resources": {
-        "files": ["/assets/**", "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"]
-      }
-    }
-  ]
-}

frontend/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/app",
   "description": "The generic app tailored to fulfill needs of German universities, written using Ionic Framework.",
-  "version": "4.0.1",
+  "version": "4.0.0",
   "private": true,
   "license": "GPL-3.0-only",
   "author": "Karl-Philipp Wulfert <krlwlfrt@gmail.com>",
@@ -55,7 +55,6 @@
     "@angular/forms": "17.3.12",
     "@angular/platform-browser": "17.3.12",
     "@angular/router": "17.3.12",
-    "@angular/service-worker": "17.3.12",
     "@awesome-cordova-plugins/calendar": "6.6.0",
     "@awesome-cordova-plugins/core": "6.6.0",
     "@capacitor-community/screen-brightness": "6.0.0",
@@ -92,13 +91,13 @@
     "cordova-plugin-calendar": "5.1.6",
     "date-fns": "3.6.0",
     "deepmerge": "4.3.1",
-    "form-data": "4.0.4",
+    "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
     "ionicons": "7.4.0",
     "jsonpath-plus": "10.3.0",
     "maplibre-gl": "4.0.2",
-    "material-symbols": "0.27.2",
+    "material-symbols": "0.17.1",
     "moment": "2.30.1",
     "ngx-date-fns": "11.0.0",
     "ngx-logger": "5.0.12",

frontend/app/resources/logo_pwa.svg

@@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg2"
-   width="1024"
-   height="1024"
-   viewBox="0 0 1024 1024"
-   sodipodi:docname="logo_pwa.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-   xml:space="preserve"
-   inkscape:export-filename="../src/assets/icons/icon-512x512.png"
-   inkscape:export-xdpi="48"
-   inkscape:export-ydpi="48"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs6" /><sodipodi:namedview
-     id="namedview4"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="true"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="0.49999772"
-     inkscape:cx="454.00207"
-     inkscape:cy="347.00158"
-     inkscape:window-width="1504"
-     inkscape:window-height="1729"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g8" /><g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g8"><rect
-       style="fill:#00b5cc;fill-opacity:1;stroke-width:1.10978"
-       id="rect2351"
-       width="379.77051"
-       height="379.77051"
-       x="143.85109"
-       y="141.62936"
-       ry="50.263741"
-       sodipodi:insensitive="true" /><rect
-       style="fill:#3be40b;fill-opacity:1;stroke-width:1.11352"
-       id="rect2353"
-       width="154.14215"
-       height="154.14215"
-       x="580.75684"
-       y="367.25772"
-       ry="25.690359"
-       sodipodi:insensitive="true" /><rect
-       style="fill:#c90e20;fill-opacity:1;stroke-width:1.10084"
-       id="rect2355"
-       width="306.05032"
-       height="306.05032"
-       x="580.75684"
-       y="578.53516"
-       ry="35.743107"
-       sodipodi:insensitive="true" /><rect
-       style="fill:#e4a20b;fill-opacity:1;stroke-width:1.11912"
-       id="rect2357"
-       width="232.33018"
-       height="232.33018"
-       x="291.29138"
-       y="578.53516"
-       ry="33.509159"
-       sodipodi:insensitive="true" /></g></svg>

frontend/app/src/app/app.module.ts

@@ -15,7 +15,7 @@
 import {CommonModule, LocationStrategy, PathLocationStrategy, registerLocaleData} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
 import localeDe from '@angular/common/locales/de';
-import {APP_INITIALIZER, NgModule, isDevMode} from '@angular/core';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouteReuseStrategy} from '@angular/router';
 import {IonicRouteStrategy, Platform, provideIonicAngular, IonApp} from '@ionic/angular/standalone';
@@ -70,7 +70,6 @@ import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
 import maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
-import {ServiceWorkerModule} from '@angular/service-worker';
 
 registerLocaleData(localeDe);
 
@@ -183,12 +182,6 @@ export function createTranslateLoader(http: HttpClient) {
       level: environment.production ? NgxLoggerLevel.FATAL : NgxLoggerLevel.TRACE,
     }),
     IonApp,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: !isDevMode(),
-      // Register the ServiceWorker as soon as the application is stable
-      // or after 30 seconds (whichever comes first).
-      registrationStrategy: 'registerWhenStable:30000',
-    }),
   ],
   providers: [
     {

frontend/app/src/app/modules/data/data-icon.config.ts

@@ -33,7 +33,7 @@ export const DataIcons = {
   'id card': SCIcon.badge,
   'message': SCIcon.newspaper,
   'organization': SCIcon.business_center,
-  'periodical': SCIcon.news,
+  'periodical': SCIcon.feed,
   'person': SCIcon.person,
   'point of interest': SCIcon.pin_drop,
   'publication event': SCIcon.campaign,

frontend/app/src/app/modules/data/elements/favorite-button.component.html

@@ -19,6 +19,6 @@
     [size]="24"
     [fill]="(isFavorite$ | async) || false"
     [class.selected]="isFavorite$ | async"
-    name="star"
+    name="grade"
   ></ion-icon>
 </ion-button>

frontend/app/src/app/modules/data/elements/rating.html

@@ -31,7 +31,7 @@
         slot="icon-only"
         [size]="32"
         color="medium"
-        name="star"
+        name="grade"
       ></ion-icon>
     }
     <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>

frontend/app/src/app/modules/data/elements/title-card.component.html

@@ -42,11 +42,9 @@
     }
     <!-- TODO see above -->
     @if (item.description && item.type !== 'job posting' && buttonShown) {
-      <div class="read-more-container">
-        <ion-button shape="round" size="small" (click)="toggleDescriptionAccordion()">
-          READ_MORE...
-        </ion-button>
-      </div>
+      <ion-button expand="full" fill="clear" (click)="toggleDescriptionAccordion()">
+        <ion-icon [name]="buttonState" size="large"></ion-icon>
+      </ion-button>
     }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.scss

@@ -52,21 +52,3 @@ ion-card {
     --color: var(--ion-color-primary-contrast);
   }
 }
-
-.read-more-container {
-  position: relative;
-
-  display: flex;
-  justify-content: flex-end;
-
-  margin-top: -24px;
-
-  background: linear-gradient(to bottom, transparent, var(--ion-color-primary));
-
-  ion-button {
-    --background: var(--ion-color-primary-contrast);
-    --color: var(--ion-color-primary);
-
-    height: 8px;
-  }
-}

frontend/app/src/app/modules/data/elements/title-card.component.ts

@@ -18,8 +18,8 @@ import {SCThings} from '@openstapps/core';
 import {SCIcon} from '../../../util/ion-icon/icon';
 
 const AccordionButtonState = {
-  collapsed: SCIcon.unfold_more,
-  expanded: SCIcon.unfold_less,
+  collapsed: SCIcon.expand_more,
+  expanded: SCIcon.expand_less,
 };
 
 @Component({
@@ -44,7 +44,7 @@ export class TitleCardComponent implements OnInit, OnChanges {
 
   descriptionLinesTotal: number;
 
-  descriptionPreviewLines = 4;
+  descriptionPreviewLines = 3;
 
   descriptionLinesToDisplay = 0;
 

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -15,12 +15,7 @@
 import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Keyboard} from '@capacitor/keyboard';
-import {
-  AlertController,
-  AnimationBuilder,
-  AnimationController,
-  ModalController,
-} from '@ionic/angular/standalone';
+import {AlertController, AnimationBuilder, AnimationController, ModalController} from '@ionic/angular/standalone';
 import {Capacitor} from '@capacitor/core';
 import {
   SCFacet,
@@ -41,8 +36,8 @@ import {PositionService} from '../../map/position.service';
 import {ConfigProvider} from '../../config/config.provider';
 import {searchPageSwitchAnimation} from './search-page-switch-animation';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {ContextMenuModalComponent} from '../../menu/context/context-menu-modal.component';
-import {enterAnimation, leaveAnimation} from '../../menu/context/context-menu-modal.animations';
+import {ContextMenuModalComponent} from "../../menu/context/context-menu-modal.component";
+import {enterAnimation, leaveAnimation} from "../../menu/context/context-menu-modal.animations";
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -383,8 +378,8 @@ export class SearchPageComponent implements OnInit {
       cssClass: 'context-menu-modal',
       showBackdrop: true,
       backdropDismiss: true,
-      enterAnimation: (baseElement: HTMLElement) => enterAnimation(baseElement, this.animationController),
-      leaveAnimation: (baseElement: HTMLElement) => leaveAnimation(baseElement, this.animationController),
+      enterAnimation: (baseEl: HTMLElement) => enterAnimation(baseEl, this.animationController),
+      leaveAnimation: (baseEl: HTMLElement) => leaveAnimation(baseEl, this.animationController),
       componentProps: {
         contextMenuService: this.contextMenuService,
       },

frontend/app/src/app/modules/menu/context/context-menu-modal.animations.ts

@@ -1,27 +1,14 @@
-/*
- * Copyright (C) 2025 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * 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 General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
 import {Animation, AnimationController} from '@ionic/angular';
 
 /**
  * Defines the animation for showing a modal as a right-hand sidebar.
- * @param baseElement The root element of the modal (including Shadow DOM).
+ *
+ * @param baseEl The root element of the modal (including Shadow DOM).
  * @param animationCtrl The Ionic AnimationController.
  * @returns The configured Ionic animation.
  */
-export const enterAnimation = (baseElement: HTMLElement, animationCtrl: AnimationController): Animation => {
-  const root = baseElement.shadowRoot;
+export const enterAnimation = (baseEl: HTMLElement, animationCtrl: AnimationController): Animation => {
+  const root = baseEl.shadowRoot;
 
   const backdrop = root?.querySelector('ion-backdrop');
   const wrapper = root?.querySelector('.modal-wrapper');
@@ -35,6 +22,7 @@ export const enterAnimation = (baseElement: HTMLElement, animationCtrl: Animatio
       height: '100%',
       width: '304px',
       maxWidth: '75%',
+      margin: '0',
       opacity: '1',
     });
   }
@@ -51,7 +39,7 @@ export const enterAnimation = (baseElement: HTMLElement, animationCtrl: Animatio
 
   return animationCtrl
     .create()
-    .addElement(baseElement)
+    .addElement(baseEl)
     .duration(400)
     .easing('ease-out')
     .addAnimation([backdropAnimation, wrapperAnimation]);
@@ -59,10 +47,11 @@ export const enterAnimation = (baseElement: HTMLElement, animationCtrl: Animatio
 
 /**
  * Defines the animation for hiding a modal by sliding it out to the right.
- * @param baseElement The root element of the modal.
+ *
+ * @param baseEl The root element of the modal.
  * @param animationCtrl The Ionic AnimationController.
  * @returns The configured Ionic animation (reverse of enterAnimation).
  */
-export const leaveAnimation = (baseElement: HTMLElement, animationCtrl: AnimationController): Animation => {
-  return enterAnimation(baseElement, animationCtrl).direction('reverse');
+export const leaveAnimation = (baseEl: HTMLElement, animationCtrl: AnimationController): Animation => {
+  return enterAnimation(baseEl, animationCtrl).direction('reverse');
 };

frontend/app/src/app/modules/menu/context/context-menu-modal.component.spec.ts

@@ -1,179 +0,0 @@
-/*
- * Copyright (C) 2025 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * 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 General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-/* eslint-disable @typescript-eslint/no-non-null-assertion,@typescript-eslint/no-explicit-any */
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {FormsModule} from '@angular/forms';
-import {CommonModule} from '@angular/common';
-import {TranslateModule} from '@ngx-translate/core';
-import {IonicModule} from '@ionic/angular';
-import {SCThingType} from '@openstapps/core';
-import {ContextMenuModalComponent} from './context-menu-modal.component';
-import {ContextMenuService} from './context-menu.service';
-import {FilterContext, SortContext} from './context-type';
-import {provideIonicAngular, ModalController} from '@ionic/angular/standalone';
-import {BehaviorSubject, of} from 'rxjs';
-import {addIcons} from 'ionicons';
-import {swapVertical, trash} from 'ionicons/icons';
-
-describe('ContextMenuModalComponent', () => {
-  let fixture: ComponentFixture<ContextMenuModalComponent>;
-  let component: ContextMenuModalComponent;
-  let modalControllerSpy: jasmine.SpyObj<ModalController>;
-  let contextMenuServiceMock: Partial<ContextMenuService>;
-
-  // Register used icons (suppress warnings)
-  addIcons({
-    delete: trash,
-    sort: swapVertical,
-  });
-
-  beforeEach(async () => {
-    modalControllerSpy = jasmine.createSpyObj<ModalController>('ModalController', ['dismiss']);
-
-    contextMenuServiceMock = {
-      filterOptions: new BehaviorSubject<FilterContext | undefined>(getFilterContextType()),
-      sortOptions: new BehaviorSubject<SortContext | undefined>(getSortContextType()),
-      filterContextChanged$: of(getFilterContextType()),
-      sortContextChanged$: of(getSortContextType()),
-      contextFilterChanged: jasmine.createSpy(),
-      contextSortChanged: jasmine.createSpy(),
-    };
-
-    await TestBed.configureTestingModule({
-      declarations: [ContextMenuModalComponent],
-      imports: [CommonModule, FormsModule, TranslateModule.forRoot(), IonicModule.forRoot()],
-      providers: [
-        provideIonicAngular(),
-        {
-          provide: ModalController,
-          useValue: modalControllerSpy,
-        },
-        {
-          provide: ContextMenuService,
-          useValue: contextMenuServiceMock,
-        },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ContextMenuModalComponent);
-    component = fixture.componentInstance;
-
-    component.contextMenuService = contextMenuServiceMock as ContextMenuService;
-    component.translator = {
-      translatedPropertyValue: () => 'translated',
-    } as any;
-
-    fixture.detectChanges();
-  });
-
-  it('should create the component', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should load initial sort and filter context', () => {
-    expect(component.sortOption?.value).toBe('relevance');
-    expect(component.filterOption?.options?.length).toBeGreaterThan(0);
-  });
-
-  it('should display sort items', () => {
-    const sortItems = fixture.nativeElement.querySelectorAll('.sort-item');
-    expect(sortItems.length).toBe(component.sortOption.values.length);
-  });
-
-  it('should update and reverse sort value on click', () => {
-    const value = component.sortOption.values[1]; // "name", reversible
-    component.sortChanged(component.sortOption, value);
-    expect(component.sortOption.value).toBe('name');
-    expect(component.sortOption.reversed).toBeFalse();
-
-    component.sortChanged(component.sortOption, value);
-    expect(component.sortOption.reversed).toBeTrue();
-  });
-
-  it('should call contextFilterChanged when filter is reset', () => {
-    component.filterOption.options[0].buckets[0].checked = true;
-    component.resetFilter(component.filterOption);
-    const allUnchecked = component.filterOption.options.every(opt =>
-      opt.buckets.every(bucket => !bucket.checked),
-    );
-    expect(allUnchecked).toBeTrue();
-    expect(contextMenuServiceMock.contextFilterChanged).toHaveBeenCalled();
-  });
-
-  it('should dismiss the modal', () => {
-    component.dismiss();
-    expect(modalControllerSpy.dismiss).toHaveBeenCalled();
-  });
-});
-
-/**
- *
- */
-function getSortContextType(): SortContext {
-  return {
-    name: 'sort',
-    reversed: false,
-    value: 'relevance',
-    values: [
-      {value: 'relevance', reversible: false},
-      {value: 'name', reversible: true},
-      {value: 'date', reversible: true},
-      {value: 'type', reversible: true},
-    ],
-  };
-}
-
-/**
- *
- */
-function getFilterContextType(): FilterContext {
-  return {
-    name: 'filter',
-    compact: false,
-    options: facetsMock
-      .filter(facet => facet.buckets.length > 0)
-      .map((facet, i) => ({
-        buckets: facet.buckets.map(bucket => ({
-          count: bucket.count,
-          key: bucket.key,
-          checked: false,
-        })),
-        compact: false,
-        field: facet.field,
-        onlyOnType: facet.onlyOnType,
-        info: {
-          onlyOnType: facet.onlyOnType,
-          field: facet.field,
-          sortOrder: i,
-        },
-      })),
-  };
-}
-
-const facetsMock = [
-  {
-    buckets: [
-      {count: 10, key: 'lecture'},
-      {count: 5, key: 'seminar'},
-    ],
-    field: 'type',
-    onlyOnType: SCThingType.AcademicEvent,
-  },
-  {
-    buckets: [{count: 7, key: 'research'}],
-    field: 'categories',
-    onlyOnType: SCThingType.AcademicEvent,
-  },
-];

frontend/app/src/app/modules/menu/context/context-menu-modal.component.ts

@@ -1,43 +1,26 @@
-/*
- * Copyright (C) 2025 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * 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 General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
-import {SCLanguage, SCThingTranslator, SCThingType, SCTranslations} from '@openstapps/core';
+import {LangChangeEvent,TranslateService} from '@ngx-translate/core';
+import {SCLanguage,SCThingTranslator,SCThingType,SCTranslations} from '@openstapps/core';
 import {ContextMenuService} from './context-menu.service';
-import {FilterContext, FilterFacet, SortContext, SortContextOption} from './context-type.js';
+import {FilterContext,FilterFacet,SortContext,SortContextOption} from './context-type.js';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ModalController} from '@ionic/angular/standalone';
-import {Component, Input, OnInit, OnDestroy} from '@angular/core';
-import {Subject, takeUntil} from 'rxjs';
+import {Component,Input} from '@angular/core';
+import {Subject,takeUntil} from 'rxjs';
 
 @Component({
   selector: 'stapps-context-menu-modal',
   templateUrl: './context-menu-modal.html',
 })
-export class ContextMenuModalComponent implements OnInit, OnDestroy {
+export class ContextMenuModalComponent {
   @Input() contextMenuService: ContextMenuService;
 
   compactFilterOptionCount = 5;
 
   filterOption: FilterContext;
-
   sortOption: SortContext;
 
   language: keyof SCTranslations<SCLanguage>;
-
   translator: SCThingTranslator;
-
   scThingType = SCThingType;
 
   // Using a subject to manage subscriptions for clean-up
@@ -45,15 +28,17 @@ export class ContextMenuModalComponent implements OnInit, OnDestroy {
 
   constructor(
     private translateService: TranslateService,
-    private readonly modalController: ModalController,
+    private readonly modalCtrl: ModalController
   ) {
     this.language = this.translateService.currentLang as keyof SCTranslations<SCLanguage>;
     this.translator = new SCThingTranslator(this.language);
 
-    this.translateService.onLangChange.pipe(takeUntilDestroyed()).subscribe((event: LangChangeEvent) => {
-      this.language = event.lang as keyof SCTranslations<SCLanguage>;
-      this.translator = new SCThingTranslator(this.language);
-    });
+    this.translateService.onLangChange
+      .pipe(takeUntilDestroyed())
+      .subscribe((event: LangChangeEvent) => {
+        this.language = event.lang as keyof SCTranslations<SCLanguage>;
+        this.translator = new SCThingTranslator(this.language);
+      });
   }
 
   ngOnInit(): void {
@@ -68,17 +53,21 @@ export class ContextMenuModalComponent implements OnInit, OnDestroy {
     }
 
     // Move the subscription logic here. It's now safe to access this.contextMenuService.
-    this.contextMenuService.filterContextChanged$.pipe(takeUntil(this.destroy$)).subscribe(fc => {
-      if (fc) {
-        this.filterOption = fc;
-      }
-    });
+    this.contextMenuService.filterContextChanged$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(fc => {
+        if (fc) {
+          this.filterOption = fc;
+        }
+      });
 
-    this.contextMenuService.sortContextChanged$.pipe(takeUntil(this.destroy$)).subscribe(sc => {
-      if (sc) {
-        this.sortOption = sc;
-      }
-    });
+    this.contextMenuService.sortContextChanged$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(sc => {
+        if (sc) {
+          this.sortOption = sc;
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -122,6 +111,6 @@ export class ContextMenuModalComponent implements OnInit, OnDestroy {
   }
 
   dismiss() {
-    this.modalController.dismiss();
+    this.modalCtrl.dismiss();
   }
 }

frontend/app/src/app/modules/menu/context/context-menu-modal.html

@@ -1,22 +1,8 @@
-<!--
-~ Copyright (C) 2025 StApps
-~ This program is free software: you can redistribute it and/or modify it
-~ under the terms of the GNU General Public License as published by the Free
-~ Software Foundation, version 3.
-~
-~ 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 General Public License for
-~ more details.
-~
-~ You should have received a copy of the GNU General Public License along with
-~ this program. If not, see <https://www.gnu.org/licenses/>.
--->
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
-    <ion-label class="ion-padding-horizontal">
-      <h1 class="ion-padding-horizontal">{{ 'menu.context.title' | translate | titlecase }}</h1>
-    </ion-label>
+      <ion-label class="ion-padding-horizontal">
+        <h1 class="ion-padding-horizontal">{{ 'menu.context.title' | translate | titlecase }}</h1>
+      </ion-label>
   </ion-toolbar>
 </ion-header>
 
@@ -34,7 +20,7 @@
         (click)="sortChanged(sortOption, value)"
       >
         <ion-radio [value]="i">
-          {{ 'menu.context.sort.' + value.value | translate | titlecase }}
+          {{ ('menu.context.sort.' + value.value) | translate | titlecase }}
           <span *ngIf="sortOption.value === value.value && value.reversible">
             <ion-icon *ngIf="sortOption.reversed" name="arrow_downward"></ion-icon>
             <ion-icon *ngIf="!sortOption.reversed" name="arrow_upward"></ion-icon>
@@ -57,18 +43,12 @@
     <ion-list class="filter-group" *ngFor="let facet of facets">
       <ion-list-header class="h3">
         <ion-label>
-          <span *ngIf="facet.info.onlyOnType"
-            ><b>{{ facet.info.onlyOnType | titlecase }}</b> /
-          </span>
+          <span *ngIf="facet.info.onlyOnType"><b>{{ facet.info.onlyOnType | titlecase }}</b> / </span>
           {{ facet.info.field | titlecase }}
         </ion-label>
       </ion-list-header>
 
-      <ng-container
-        *ngFor="
-          let bucket of !facet.compact ? facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets
-        "
-      >
+      <ng-container *ngFor="let bucket of !facet.compact ? facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets">
         <ion-item>
           <ion-checkbox
             [(ngModel)]="bucket.checked"
@@ -85,18 +65,15 @@
             {{
               facet.field === 'type'
                 ? (getTranslatedPropertyValue($any(bucket.key), 'type') | titlecase)
-                : (facet.onlyOnType && getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key)
-                  | titlecase)
+                : (facet.onlyOnType &&
+              getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key)
+                | titlecase)
             }}
           </ion-checkbox>
         </ion-item>
       </ng-container>
 
-      <ion-button
-        *ngIf="!facet.compact && facet.buckets.length > compactFilterOptionCount"
-        fill="clear"
-        (click)="facet.compact = true"
-      >
+      <ion-button *ngIf="!facet.compact && facet.buckets.length > compactFilterOptionCount" fill="clear" (click)="facet.compact = true">
         {{ 'menu.context.filter.showAll' | translate }}
       </ion-button>
     </ion-list>

frontend/app/src/app/modules/menu/context/context-menu.component.spec.ts

@@ -0,0 +1,303 @@
+/*
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * 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 General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+/* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/ban-ts-comment */
+import {APP_BASE_HREF, CommonModule, Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {ChildrenOutletContexts, RouterModule, UrlSerializer} from '@angular/router';
+import {TranslateModule} from '@ngx-translate/core';
+import {SCFacet, SCThingType} from '@openstapps/core';
+import {ContextMenuComponent} from './context-menu.component';
+import {SettingsModule} from '../../settings/settings.module';
+import {ContextMenuService} from './context-menu.service';
+import {FilterContext, SortContext} from './context-type';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {provideIonicAngular} from '@ionic/angular/standalone';
+
+@Component({
+  template: `<ion-content id="foo"></ion-content><stapps-context contentId="foo"></stapps-context> `,
+})
+class ContextMenuContainerComponent {}
+
+describe('ContextMenuComponent', async () => {
+  let fixture: ComponentFixture<ContextMenuContainerComponent>;
+  let instance: ContextMenuComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContextMenuComponent, ContextMenuContainerComponent],
+      providers: [
+        provideIonicAngular(),
+        ChildrenOutletContexts,
+        Location,
+        UrlSerializer,
+        ContextMenuService,
+        {provide: LocationStrategy, useClass: PathLocationStrategy},
+        {provide: APP_BASE_HREF, useValue: '/'},
+      ],
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot(),
+        CommonModule,
+        SettingsModule,
+        RouterModule.forRoot([]),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContextMenuContainerComponent);
+    instance = fixture.debugElement.query(By.directive(ContextMenuComponent)).componentInstance;
+  });
+
+  it('should show items in sort context', () => {
+    instance.sortOption = getSortContextType();
+    fixture.detectChanges();
+    const sort: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-sort');
+    expect(sort!.querySelector('ion-radio')?.textContent).toContain('relevance');
+  });
+
+  it('should show items in filter context', () => {
+    instance.filterOption = getFilterContextType();
+    fixture.detectChanges();
+    const filter: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-filter');
+    const filterItem = filter.querySelector('.filter-group');
+    expect(filterItem!.querySelector('ion-list-header')!.textContent).toContain('Type');
+  });
+
+  it('should set sort context value and reverse on click', () => {
+    instance.sortOption = getSortContextType();
+    fixture.detectChanges();
+    const sort: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-sort');
+    // @ts-expect-error not relevant for this case
+    const sortItem: HTMLElement = sort.querySelectorAll('.sort-item')[1];
+    sortItem!.click();
+    expect(instance.sortOption.value).toEqual('name');
+    expect(instance.sortOption.reversed).toBe(false);
+
+    // click again for reverse
+    sortItem!.click();
+    expect(instance.sortOption.reversed).toBe(true);
+  });
+
+  it('should show all filterable facets', () => {
+    // get set facets with non empty buckets
+    const facets: SCFacet[] = getFilterContextType().options;
+
+    instance.filterOption = getFilterContextType();
+    fixture.detectChanges();
+    // get filter context div
+    const filter: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-filter');
+    // get all filter groups that represent a facet
+    const filterGroups = filter.querySelectorAll('.filter-group');
+
+    expect(filterGroups.length).toEqual(facets.length);
+
+    for (const facet of facets) {
+      let filterGroup;
+
+      // get filter option for facets field
+      // eslint-disable-next-line unicorn/no-array-for-each
+      filterGroups.forEach(element => {
+        if (
+          element
+            .querySelector('ion-list-header')!
+            .textContent!.toString()
+            .toLowerCase()
+            .includes(facet.field)
+        ) {
+          filterGroup = element;
+          return;
+        }
+      });
+
+      expect(filterGroup).toBeDefined();
+
+      const filterItems = filterGroup!.querySelectorAll('.filter-item-label');
+
+      if (filterItems.length !== facet.buckets.length) {
+        console.log(JSON.stringify(facet));
+      }
+      expect(filterItems.length).toEqual(facet.buckets.length);
+
+      // check all buckets are shown
+      for (const bucket of facet.buckets) {
+        let filterItem;
+
+        for (let i = 0; i < filterItems.length; i++) {
+          if (
+            filterItems.item(i).textContent!.toString().toLowerCase().indexOf(bucket.key.toLowerCase()) > 0
+          ) {
+            filterItem = filterItems.item(i);
+            break;
+          }
+        }
+        expect(filterItem).toBeDefined();
+      }
+    }
+  });
+
+  it('should reset filter', () => {
+    instance.filterOption = getFilterContextType();
+    instance.filterOption.options = [
+      {
+        field: 'type',
+        buckets: [{count: 10, key: 'date series', checked: true}],
+        info: {
+          onlyOnType: SCThingType.AcademicEvent,
+          field: 'date series',
+          sortOrder: 0,
+        },
+      },
+    ];
+
+    fixture.detectChanges();
+
+    // click reset button
+    const resetButton: HTMLElement = fixture.debugElement.nativeElement.querySelector('.resetFilterButton');
+    resetButton.click();
+
+    expect(instance.filterOption.options[0].buckets[0].checked).toEqual(false);
+  });
+});
+
+/**
+ *
+ */
+function getSortContextType(): SortContext {
+  return {
+    name: 'sort',
+    reversed: false,
+    value: 'relevance',
+    values: [
+      {
+        reversible: false,
+        value: 'relevance',
+      },
+      {
+        reversible: true,
+        value: 'name',
+      },
+      {
+        reversible: true,
+        value: 'date',
+      },
+      {
+        reversible: true,
+        value: 'type',
+      },
+    ],
+  };
+}
+
+/**
+ *
+ */
+function getFilterContextType(): FilterContext {
+  return {
+    name: 'filter',
+    compact: false,
+    options: facetsMock
+      .filter(facet => facet.buckets.length > 0)
+      .map((facet, i) => {
+        return {
+          buckets: facet.buckets.map(bucket => {
+            return {
+              count: bucket.count,
+              key: bucket.key,
+              checked: false,
+            };
+          }),
+          compact: false,
+          field: facet.field,
+          onlyOnType: facet.onlyOnType,
+          info: {
+            onlyOnType: facet.onlyOnType,
+            field: facet.field,
+            sortOrder: i,
+          },
+        };
+      }),
+  };
+}
+
+const facetsMock: SCFacet[] = [
+  {
+    buckets: [
+      {
+        count: 60,
+        key: 'academic event',
+      },
+      {
+        count: 160,
+        key: 'message',
+      },
+      {
+        count: 151,
+        key: 'date series',
+      },
+      {
+        count: 106,
+        key: 'dish',
+      },
+      {
+        count: 20,
+        key: 'building',
+      },
+    ],
+    field: 'type',
+  },
+  {
+    buckets: [
+      {
+        count: 12,
+        key: 'Max Mustermann',
+      },
+      {
+        count: 2,
+        key: 'Foo Bar',
+      },
+    ],
+    field: 'performers',
+    onlyOnType: SCThingType.AcademicEvent,
+  },
+  {
+    buckets: [
+      {
+        count: 5,
+        key: 'colloquium',
+      },
+      {
+        count: 15,
+        key: 'course',
+      },
+    ],
+    field: 'categories',
+    onlyOnType: SCThingType.AcademicEvent,
+  },
+  {
+    buckets: [
+      {
+        count: 5,
+        key: 'employees',
+      },
+      {
+        count: 15,
+        key: 'students',
+      },
+    ],
+    field: 'audiences',
+    onlyOnType: SCThingType.Message,
+  },
+];

frontend/app/src/app/modules/menu/context/context-menu.service.spec.ts

@@ -12,13 +12,14 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+
 import {TestBed} from '@angular/core/testing';
+
 import {ContextMenuService} from './context-menu.service';
 import {SCFacet} from '@openstapps/core';
 import {FilterContext, SortContext} from './context-type';
 import {ThingTranslateModule} from '../../../translation/thing-translate.module';
 import {TranslateModule} from '@ngx-translate/core';
-import {firstValueFrom, filter} from 'rxjs';
 
 describe('ContextMenuService', () => {
   let service: ContextMenuService;
@@ -35,39 +36,39 @@ describe('ContextMenuService', () => {
     expect(service).toBeTruthy();
   });
 
-  it('should update filterOptions', async () => {
+  it('should update filterOptions', done => {
+    service.filterContextChanged$.subscribe(result => {
+      expect(result).toBeDefined();
+      done();
+    });
     service.updateContextFilter(facetsMock);
-
-    const result = await firstValueFrom(service.filterContextChanged$.pipe(filter(Boolean)));
-
-    expect(result).toBeDefined();
   });
 
-  it('should update filterQuery', async () => {
+  it('should update filterQuery', done => {
+    service.filterContextChanged$.subscribe(result => {
+      expect(result).toBeDefined();
+      expect(service.contextFilter.options[0].buckets.length).toEqual(
+        filterContext.options[0].buckets.length,
+      );
+      done();
+    });
     service.updateContextFilter(facetsMock);
-    const result = await firstValueFrom(service.filterContextChanged$.pipe(filter(Boolean)));
-
-    expect(result).toBeDefined();
-
-    const current = service.contextFilter;
-
-    expect(current.options[0].buckets.length).toEqual(filterContext.options[0].buckets.length);
   });
 
-  it('should update sortOptions', async () => {
+  it('should update sortOptions', done => {
+    service.sortContextChanged$.subscribe(result => {
+      expect(result).toBeDefined();
+      done();
+    });
     service.setContextSort(sortContext);
-
-    const result = await firstValueFrom(service.sortContextChanged$.pipe(filter(Boolean)));
-
-    expect(result).toBeDefined();
   });
 
-  it('should update sortQuery', async () => {
+  it('should update sortQuery', done => {
+    service.sortContextChanged$.subscribe(result => {
+      expect(result).toBeDefined();
+      done();
+    });
     service.setContextSort(sortContext);
-
-    const result = await firstValueFrom(service.sortContextChanged$.pipe(filter(Boolean)));
-
-    expect(result).toBeDefined();
   });
 });
 

frontend/app/src/app/modules/menu/menu.module.ts

@@ -40,7 +40,7 @@ import {
   IonToolbar,
 } from '@ionic/angular/standalone';
 import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
-import {ContextMenuModalComponent} from './context/context-menu-modal.component';
+import {ContextMenuModalComponent} from "./context/context-menu-modal.component";
 
 /**
  * Menu module

frontend/app/src/app/modules/profile/page/my-courses.html

@@ -26,7 +26,7 @@
                 '_EVENT' | translate: {count: myCoursesDay[1].length}
             }}</ion-label
           >
-          <ion-icon class="ion-accordion-toggle-icon" name="keyboard_arrow_down"></ion-icon>
+          <ion-icon class="ion-accordion-toggle-icon" name="expand_more"></ion-icon>
         </ion-item>
         <ion-list class="ion-padding" slot="content">
           @if (myCoursesDay[1].length === 0) {

frontend/app/src/app/modules/schedule/page/calendar-view.html

@@ -14,10 +14,10 @@
 -->
 <div class="header">
   <ion-button fill="clear" class="left-button" (click)="mainSwiper.pageBackwards()">
-    <ion-icon slot="icon-only" name="chevron_backward"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_left"></ion-icon>
   </ion-button>
   <ion-button fill="clear" class="right-button" (click)="mainSwiper.pageForward()">
-    <ion-icon slot="icon-only" name="chevron_forward"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_right"></ion-icon>
   </ion-button>
   <infinite-swiper
     class="header-swiper"

frontend/app/src/app/modules/schedule/page/schedule-view.html

@@ -14,10 +14,10 @@
 -->
 <div class="header">
   <ion-button fill="clear" class="left-button" (click)="mainSwiper.swiperRef.slidePrev()">
-    <ion-icon slot="icon-only" name="chevron_backward"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_left"></ion-icon>
   </ion-button>
   <ion-button fill="clear" class="right-button" (click)="mainSwiper.swiperRef.slideNext()">
-    <ion-icon slot="icon-only" name="chevron_forward"></ion-icon>
+    <ion-icon slot="icon-only" name="chevron_right"></ion-icon>
   </ion-button>
   <swiper
     class="header-swiper"

frontend/app/src/app/modules/settings/page/settings-page.html

@@ -54,7 +54,7 @@
 
     <ion-button expand="block" (click)="presentResetAlert()" fill="outline">
       {{ 'settings.resetSettings' | translate }}
-      <ion-icon slot="start" name="history"></ion-icon>
+      <ion-icon slot="start" name="device_reset"></ion-icon>
     </ion-button>
   </div>
 </ion-content>

frontend/app/src/app/modules/storage/encrypted-storage.provider.ts

@@ -14,12 +14,10 @@ export class EncryptedStorageProvider {
    * @returns The value of the resource, if found
    */
   async get<T>(key: string): Promise<T | undefined> {
+    if (!Capacitor.isNativePlatform()) return undefined;
+
     try {
-      const jwt = JSON.parse(
-        await (Capacitor.isNativePlatform()
-          ? SecureStoragePlugin.get({key: `stapps:key:${key}`}).then(it => it.value)
-          : this.storageProvider.get<string>(`stapps:key:${key}`)),
-      );
+      const jwt = JSON.parse((await SecureStoragePlugin.get({key: `stapps:key:${key}`})).value);
       const aesKey = await crypto.subtle.importKey('jwk', jwt, {name: 'AES-GCM'}, true, [
         'encrypt',
         'decrypt',
@@ -50,6 +48,8 @@ export class EncryptedStorageProvider {
    * @returns A promise that resolves when the value is stored
    */
   async set<T>(key: string, value: T): Promise<void> {
+    if (!Capacitor.isNativePlatform()) return undefined;
+
     try {
       const compressionStream = new CompressionStream('gzip');
       const writer = compressionStream.writable.getWriter();
@@ -63,14 +63,11 @@ export class EncryptedStorageProvider {
         'decrypt',
       ]);
 
-      const exportedKey = JSON.stringify(await crypto.subtle.exportKey('jwk', aesKey));
       await Promise.all([
-        Capacitor.isNativePlatform()
-          ? SecureStoragePlugin.set({
-              key: `stapps:key:${key}`,
-              value: exportedKey,
-            })
-          : this.storageProvider.put(`stapps:key:${key}`, exportedKey),
+        SecureStoragePlugin.set({
+          key: `stapps:key:${key}`,
+          value: JSON.stringify(await crypto.subtle.exportKey('jwk', aesKey)),
+        }),
         this.storageProvider.put(`encrypted:${key}:iv`, iv),
       ]);
 
@@ -84,10 +81,10 @@ export class EncryptedStorageProvider {
   }
 
   async delete(key: string): Promise<void> {
+    if (!Capacitor.isNativePlatform()) return;
+
     await Promise.all([
-      Capacitor.isNativePlatform()
-        ? SecureStoragePlugin.remove({key: `stapps:key:${key}`})
-        : this.storageProvider.delete(`stapps:key:${key}`),
+      SecureStoragePlugin.remove({key: `stapps:key:${key}`}),
       this.storageProvider.delete(`encrypted:${key}:iv`),
       this.storageProvider.delete(`encrypted:${key}`),
     ]);

frontend/app/src/app/util/ion-icon/ion-icon-custom-component.ts

@@ -150,12 +150,12 @@ const iconMap = new Map<string, MaterialSymbol>([
   [menuSharp, SCIcon.menu],
   [searchOutline, SCIcon.search],
   [searchSharp, SCIcon.search],
-  [chevronExpand, SCIcon.keyboard_arrow_down],
-  [caretDownSharp, SCIcon.keyboard_arrow_down],
+  [chevronExpand, SCIcon.expand_more],
+  [caretDownSharp, SCIcon.expand_more],
   [close, SCIcon.close],
   [closeSharp, SCIcon.close],
   [closeCircle, SCIcon.cancel],
   [ellipsisHorizontal, SCIcon.more_horiz],
-  ['chevron-down-outline', SCIcon.keyboard_arrow_down],
+  ['chevron-down-outline', SCIcon.expand_more],
   ['arrow_back', SCIcon.arrow_back],
 ]);