feat: update to node 22

TSConfig options prevent Angular from compiling the app. This is
specifically harsh with the noUnused* rules, which require you to
strictly remove any unused variables even in dev mode while testing.
Since this case is already covered by ESLint, the TSConfig option was
removed.

.changeset/fair-monkeys-tickle.md

@@ -1,9 +0,0 @@
----
-"@openstapps/node-builder": patch
-"@openstapps/database": patch
-"@openstapps/node-base": patch
-"@openstapps/backend": patch
-"@openstapps/app": patch
----
-
-pin alpine version to 3.18 and add healthchecks

.changeset/good-eggs-add.md

@@ -1,5 +0,0 @@
----
-"@openstapps/prettier-config": patch
----
-
-Update Prettier to 3.1.1

.changeset/nine-bears-speak.md

@@ -1,6 +0,0 @@
----
-"@openstapps/backend": minor
-"@openstapps/core": minor
----
-
-Add the ability to filter by existence of a field

.changeset/old-bottles-hide.md

@@ -1,5 +0,0 @@
----
-"@openstapps/backend": patch
----
-
-Backend unit tests break every year

.gitignore

@@ -102,7 +102,6 @@ typings/
 
 # ignore lib
 lib
-dist
 
 # ignore docs
 docs

.syncpackrc.cjs

@@ -2,7 +2,13 @@
 
 /** @type {import('syncpack').RcFile} */
 const config = {
-  semverGroups: [{range: ''}],
+  semverGroups: [
+    {
+      range: '',
+      dependencies: ['**'],
+      packages: ['**'],
+    }
+  ],
   source: ['package.json', '**/package.json'],
   indent: '  ',
   sortFirst: [

.tool-versions

@@ -1,3 +1,3 @@
-nodejs 18.19.1
+nodejs 22.2.0
 pnpm 8.15.4
-python 3.11.5
+python 3.11.5

backend/backend/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @openstapps/backend
 
+## 3.2.0
+
+### Minor Changes
+
+- 912ae422: Add the ability to filter by existence of a field
+
+### Patch Changes
+
+- 689ac68b: pin alpine version to 3.18 and add healthchecks
+- e8d72683: Backend unit tests break every year
+- Updated dependencies [912ae422]
+  - @openstapps/core@4.0.0
+  - @openstapps/core-tools@3.0.0
+  - @openstapps/logger@3.0.0
+
 ## 3.1.2
 
 ### Patch Changes

backend/backend/config/f-u/version-history/2.5.0.de.md

@@ -0,0 +1,15 @@
+# Goethe-Uni App 2.5
+
+Die Goethe-Uni App ist noch besser geworden!
+
+## Komplett neue Kartenansicht
+
+Wir haben die Karte überarbeitet, um eine klarere und schnellere Übersicht zu bieten.
+
+## Deutschlandticket mit an Bord
+
+Wenn du das Upgrade des Semesterticket zum Deutschlandticket gemacht hast und eingeloggt bist, findet es sich jetzt auch in der App.
+
+## Bibliotheksdienste sind wieder voll funktionsfähig
+
+Aufgrund einiger Adhoc-Änderungen im Bibliothekssystem haben wir die App so angepasst, dass sie damit umgehen kann.

backend/backend/config/f-u/version-history/2.5.0.en.md

@@ -0,0 +1,15 @@
+# Goethe-Uni App 2.5
+
+The Goethe-Uni App got even better!
+
+## Completelty new map view
+
+We overhauled the map to offer you a clearer and faster and overview.
+
+## Deutschlandticket included
+
+If you upgraded your Semesterticket to a Deutschlandticket it will now reside in the App if you are logged in.
+
+## Library services are fully functional again
+
+Due to some adhoc changes in the library system we adjusted the app to handle them properly.

backend/backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/backend",
   "description": "A reference implementation for a StApps backend",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-only",

backend/backend/src/storage/database.ts

@@ -13,15 +13,34 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-import {SCConfigFile, SCSearchQuery, SCSearchResponse, SCThings, SCUuid} from '@openstapps/core';
+import {
+  SCConfigFile,
+  SCPlace,
+  SCPlaceWithoutReferences,
+  SCSearchQuery,
+  SCSearchResponse,
+  SCThingWithCategoriesWithoutReferences,
+  SCThings,
+  SCUuid,
+} from '@openstapps/core';
 import {MailQueue} from '../notification/mail-queue.js';
 import {Bulk} from './bulk-storage.js';
+import {FeatureCollection, Point, Polygon} from 'geojson';
 
 /**
  * Creates an instance of a database
  */
 export type DatabaseConstructor = new (config: SCConfigFile, mailQueue?: MailQueue) => Database;
 
+export type SupplementaryGeoJSON = FeatureCollection<Point | Polygon, SupplementaryGeoJSONThing>;
+export type SupplementaryGeoJSONThing = Pick<
+  Extract<SCThings, SCPlace>,
+  Exclude<
+    keyof SCPlaceWithoutReferences | keyof SCThingWithCategoriesWithoutReferences<never, never>,
+    'geo' | 'origin' | 'translations'
+  >
+>;
+
 /**
  * Defines what one database class needs to have defined
  */
@@ -82,4 +101,9 @@ export interface Database {
    * @param params Parameters which form a search query to search the backend data
    */
   search(parameters: SCSearchQuery): Promise<SCSearchResponse>;
+
+  /**
+   * Get geo info for display on a map
+   */
+  geo(): Promise<SupplementaryGeoJSON>;
 }

backend/backend/src/storage/elasticsearch/elasticsearch.ts

@@ -26,7 +26,7 @@ import {Logger} from '@openstapps/logger';
 import moment from 'moment';
 import {MailQueue} from '../../notification/mail-queue.js';
 import {Bulk} from '../bulk-storage.js';
-import {Database} from '../database.js';
+import {Database, SupplementaryGeoJSON, SupplementaryGeoJSONThing} from '../database.js';
 import {parseAggregations} from './aggregations.js';
 import * as Monitoring from './monitoring.js';
 import {buildQuery} from './query/query.js';
@@ -46,6 +46,7 @@ import {
 } from './util/index.js';
 import {noUndefined} from './util/no-undefined.js';
 import {retryCatch, RetryOptions} from './util/retry.js';
+import {Feature, Point, Polygon} from 'geojson';
 
 /**
  * A database interface for elasticsearch
@@ -405,4 +406,49 @@ export class Elasticsearch implements Database {
       },
     };
   }
+
+  async geo(): Promise<SupplementaryGeoJSON> {
+    const searchResponse = await this.client.search<Extract<SCThings, {geo: unknown}>>({
+      body: {
+        query: {
+          exists: {
+            field: 'geo',
+          },
+        },
+      },
+      from: 0,
+      allow_no_indices: true,
+      index: ACTIVE_INDICES_ALIAS,
+      size: 1,
+    });
+
+    return {
+      type: 'FeatureCollection',
+      features: searchResponse.hits.hits
+        .map(thing => {
+          return thing._source?.geo
+            ? ({
+                id: Number(thing._source.identifiers?.['OSM']) || undefined,
+                type: 'Feature',
+                geometry: thing._source.geo.polygon ?? thing._source.geo.point,
+                properties: {
+                  name: thing._source.name,
+                  sameAs: thing._source.sameAs,
+                  image: thing._source.image,
+                  alternateNames: thing._source.alternateNames,
+                  description: thing._source.description,
+                  identifiers: thing._source.identifiers,
+                  categories: thing._source.categories,
+                  categorySpecificValues: thing._source.categorySpecificValues,
+                  openingHours: thing._source.openingHours,
+                  address: thing._source.address,
+                  uid: thing._source.uid,
+                  type: thing._source.type,
+                },
+              } satisfies Feature<Polygon | Point, SupplementaryGeoJSONThing>)
+            : undefined;
+        })
+        .filter(noUndefined),
+    };
+  }
 }

backend/backend/src/storage/elasticsearch/query/filters/geo.ts

@@ -19,14 +19,29 @@ import {QueryDslSpecificQueryContainer} from '../../types/util.js';
  * Converts a geo filter to elasticsearch syntax
  * @param filter A search filter for the retrieval of the data
  */
-export function buildGeoFilter(filter: SCGeoFilter): QueryDslSpecificQueryContainer<'geo_shape'> {
+export function buildGeoFilter(filter: SCGeoFilter): QueryDslSpecificQueryContainer<'bool'> {
   return {
-    geo_shape: {
+    bool: {
-      ignore_unmapped: true,
+      should: [
-      [`${filter.arguments.field}.polygon`]: {
+        {
-        shape: filter.arguments.shape,
+          geo_shape: {
-        relation: filter.arguments.spatialRelation,
+            ignore_unmapped: true,
-      },
+            [`${filter.arguments.field}.polygon`]: {
+              shape: filter.arguments.shape,
+              relation: filter.arguments.spatialRelation,
+            },
+          },
+        } satisfies QueryDslSpecificQueryContainer<'geo_shape'>,
+        {
+          geo_shape: {
+            ignore_unmapped: true,
+            [`${filter.arguments.field}.point`]: {
+              shape: filter.arguments.shape,
+              relation: filter.arguments.spatialRelation,
+            },
+          },
+        } satisfies QueryDslSpecificQueryContainer<'geo_shape'>,
+      ],
     },
   };
 }

backend/backend/test/common.ts

@@ -22,7 +22,7 @@ import http from 'http';
 import {MailQueue} from '../src/notification/mail-queue.js';
 import {Bulk, BulkStorage} from '../src/storage/bulk-storage.js';
 import getPort from 'get-port';
-import {Database} from '../src/storage/database.js';
+import {Database, SupplementaryGeoJSON} from '../src/storage/database.js';
 import {v4} from 'uuid';
 import {backendConfig} from '../src/config.js';
 import {getIndexUID} from '../src/storage/elasticsearch/util/index.js';
@@ -58,7 +58,6 @@ export async function startApp(): Promise<Express> {
  * An elasticsearch mock
  */
 export class ElasticsearchMock implements Database {
-  // @ts-expect-error never read
   private bulk: Bulk | undefined;
 
   private storageMock = new Map<string, SCThings>();
@@ -67,6 +66,10 @@ export class ElasticsearchMock implements Database {
     // Nothing to do here
   }
 
+  geo(): Promise<SupplementaryGeoJSON> {
+    throw new Error('Method not implemented.');
+  }
+
   bulkCreated(bulk: Bulk): Promise<void> {
     this.bulk = bulk;
     return Promise.resolve(undefined);

backend/backend/test/routes/search-route.spec.ts

@@ -44,7 +44,6 @@ describe('Search route', async function () {
   });
 
   it('should reject GET, PUT with a valid search query', async function () {
-    // const expectedParams = JSON.parse(JSON.stringify(defaultParams));
     const {status} = await testApp.get('/search').set('Accept', 'application/json').send({
       query: 'Some search terms',
     });

backend/backend/test/storage/elasticsearch/query.spec.ts

@@ -479,18 +479,39 @@ describe('Query', function () {
     it('should build geo filter for shapes and points', function () {
       const filter = buildFilter(searchFilters.geoPoint);
       const expectedFilter = {
-        geo_shape: {
+        bool: {
-          'geo.polygon': {
+          should: [
-            relation: undefined,
+            {
-            shape: {
+              geo_shape: {
-              type: 'envelope',
+                'geo.polygon': {
-              coordinates: [
+                  relation: undefined,
-                [50.123, 8.123],
+                  shape: {
-                [50.123, 8.123],
+                    coordinates: [
-              ],
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
             },
-          },
+            {
-          'ignore_unmapped': true,
+              geo_shape: {
+                'geo.point': {
+                  relation: undefined,
+                  shape: {
+                    coordinates: [
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
+            },
+          ],
         },
       };
 
@@ -500,18 +521,39 @@ describe('Query', function () {
     it('should build geo filter for shapes only', function () {
       const filter = buildFilter(searchFilters.geoShape);
       const expectedFilter = {
-        geo_shape: {
+        bool: {
-          'geo.polygon': {
+          should: [
-            relation: 'contains',
+            {
-            shape: {
+              geo_shape: {
-              type: 'envelope',
+                'geo.polygon': {
-              coordinates: [
+                  relation: 'contains',
-                [50.123, 8.123],
+                  shape: {
-                [50.123, 8.123],
+                    coordinates: [
-              ],
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
             },
-          },
+            {
-          'ignore_unmapped': true,
+              geo_shape: {
+                'geo.point': {
+                  relation: 'contains',
+                  shape: {
+                    coordinates: [
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
+            },
+          ],
         },
       };
 

backend/database/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @openstapps/database
 
+## 3.2.0
+
+### Patch Changes
+
+- 689ac68b: pin alpine version to 3.18 and add healthchecks
+
 ## 3.0.0
 
 ### Patch Changes

backend/database/package.json

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

configuration/prettier-config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @openstapps/prettier-config
 
+## 3.2.0
+
+### Patch Changes
+
+- dbb55850: Update Prettier to 3.1.1
+
 ## 3.0.0
 
 ### Major Changes
@@ -30,7 +36,7 @@
 
   ```js
   #!/usr/bin/env node
-  import './lib/app.js';
+  import "./lib/app.js";
   ```
 
 - 64caebaf: Migrate to ESM
@@ -69,11 +75,14 @@
 - 64caebaf: Migrated changelogs to changeset format
 
   ```js
-  import fs from 'fs';
+  import fs from "fs";
 
-  const path = 'packages/logger/CHANGELOG.md';
+  const path = "packages/logger/CHANGELOG.md";
 
-  fs.writeFileSync(path, fs.readFileSync(path, 'utf8').replace(/^#+\s+\[/gm, '## ['));
+  fs.writeFileSync(
+    path,
+    fs.readFileSync(path, "utf8").replace(/^#+\s+\[/gm, "## ["),
+  );
   ```
 
 - 98546a97: Migrate away from @openstapps/configuration
@@ -115,7 +124,7 @@
 
   ```js
   #!/usr/bin/env node
-  import './lib/app.js';
+  import "./lib/app.js";
   ```
 
 - 64caebaf: Migrate to ESM
@@ -154,11 +163,14 @@
 - 64caebaf: Migrated changelogs to changeset format
 
   ```js
-  import fs from 'fs';
+  import fs from "fs";
 
-  const path = 'packages/logger/CHANGELOG.md';
+  const path = "packages/logger/CHANGELOG.md";
 
-  fs.writeFileSync(path, fs.readFileSync(path, 'utf8').replace(/^#+\s+\[/gm, '## ['));
+  fs.writeFileSync(
+    path,
+    fs.readFileSync(path, "utf8").replace(/^#+\s+\[/gm, "## ["),
+  );
   ```
 
 - 98546a97: Migrate away from @openstapps/configuration

configuration/prettier-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/prettier-config",
   "description": "StApps Prettier Config",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "type": "module",
   "license": "GPL-3.0-only",
   "repository": "git@gitlab.com:openstapps/prettier-config.git",

configuration/tsconfig/tsconfig.json

@@ -19,15 +19,21 @@
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
     "noImplicitReturns": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "outDir": "../../../lib/",
-    "lib": ["ES2022", "DOM"],
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
     "strict": true,
     "target": "ES2022"
   },
   "ts-node": {
     "transpileOnly": true
   },
-  "exclude": ["../../../app.js", "../../../lib/"]
+  "exclude": [
+    "../../../app.js",
+    "../../../lib/"
+  ]
 }

examples/minimal-connector/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @openstapps/minimal-connector
 
+## 3.2.0
+
+### Patch Changes
+
+- Updated dependencies [912ae422]
+  - @openstapps/core@4.0.0
+  - @openstapps/api@4.0.0
+  - @openstapps/logger@3.0.0
+
 ## 3.1.1
 
 ### Patch 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": "3.1.1",
+  "version": "3.2.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",

examples/minimal-plugin/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @openstapps/minimal-plugin
 
+## 3.2.0
+
+### Patch Changes
+
+- Updated dependencies [912ae422]
+  - @openstapps/core@4.0.0
+  - @openstapps/api@4.0.0
+  - @openstapps/api-plugin@4.0.0
+  - @openstapps/core-tools@3.0.0
+  - @openstapps/logger@3.0.0
+
 ## 3.1.1
 
 ### Patch Changes

examples/minimal-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-plugin",
   "description": "Minimal Plugin",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",

flake.lock

@@ -5,11 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1701680307,
+        "lastModified": 1710146030,
-        "narHash": "sha256-kAuep2h5ajznlPMD9rnQyffWG8EM/C73lejGofXvdM8=",
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "4022d587cbbfd70fe950c1e2083a02621806a725",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
         "type": "github"
       },
       "original": {
@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1701626906,
+        "lastModified": 1717112898,
-        "narHash": "sha256-ugr1QyzzwNk505ICE4VMQzonHQ9QS5W33xF2FXzFQ00=",
+        "narHash": "sha256-7R2ZvOnvd9h8fDd65p0JnB7wXfUvreox3xFdYWd1BnY=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "0c6d8c783336a59f4c59d4a6daed6ab269c4b361",
+        "rev": "6132b0f6e344ce2fe34fc051b72fb46e34f668e0",
         "type": "github"
       },
       "original": {

flake.nix

@@ -4,72 +4,85 @@
     nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
     flake-utils.url = "github:numtide/flake-utils";
   };
-  outputs = {
+  outputs =
-    self,
+    {
-    nixpkgs,
+      self,
-    flake-utils,
+      nixpkgs,
-  }: let
+      flake-utils,
-    aapt2buildToolsVersion = "33.0.2";
+    }:
-  in
+    let
-    flake-utils.lib.eachDefaultSystem (system: let
+      aapt2buildToolsVersion = "33.0.2";
-      pkgs = import nixpkgs {
+    in
-        inherit system;
+    flake-utils.lib.eachDefaultSystem (
-        overlays = [
+      system:
-          (final: prev: rec {
+      let
-            fontMin = prev.python311.withPackages (ps: with ps; [brotli fonttools] ++ (with fonttools.optional-dependencies; [woff]));
+        pkgs = import nixpkgs {
-            android = prev.androidenv.composeAndroidPackages {
+          inherit system;
-              buildToolsVersions = ["30.0.3" aapt2buildToolsVersion];
+          overlays = [
-              platformVersions = ["33"];
+            (final: prev: rec {
-            };
+              fontMin = prev.python311.withPackages (
-            cypress = prev.cypress.overrideAttrs (cyPrev: rec {
+                ps:
-              version = "13.2.0";
+                with ps;
-              src = prev.fetchzip {
+                [
-                url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
+                  brotli
-                hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
+                  fonttools
+                ]
+                ++ (with fonttools.optional-dependencies; [ woff ])
+              );
+              android = prev.androidenv.composeAndroidPackages {
+                buildToolsVersions = [
+                  "30.0.3"
+                  aapt2buildToolsVersion
+                ];
+                platformVersions = [ "33" ];
               };
-            });
+              cypress = prev.cypress.overrideAttrs (cyPrev: rec {
-          })
+                version = "13.2.0";
-        ];
+                src = prev.fetchzip {
-        config = {
+                  url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
-          allowUnfree = true;
+                  hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
-          android_sdk.accept_license = true;
+                };
+              });
+              nodejs = prev.nodejs_22;
+            })
+          ];
+          config = {
+            allowUnfree = true;
+            android_sdk.accept_license = true;
+          };
         };
-      };
+        androidFhs = pkgs.buildFHSUserEnv {
-      androidFhs = pkgs.buildFHSUserEnv {
+          name = "android-env";
-        name = "android-env";
+          targetPkgs = pkgs: with pkgs; [ ];
-        targetPkgs = pkgs: with pkgs; [];
+          runScript = "bash";
-        runScript = "bash";
+          profile = ''
-        profile = ''
+            export ALLOW_NINJA_ENV=true
-          export ALLOW_NINJA_ENV=true
+            export USE_CCACHE=1
-          export USE_CCACHE=1
+            export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
-          export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
+          '';
-        '';
+        };
-      };
+      in
-    in {
+      {
-      devShell = pkgs.mkShell rec {
+        devShell = pkgs.mkShell rec {
-        nativeBuildInputs = [androidFhs];
+          nativeBuildInputs = [ androidFhs ];
-        buildInputs = with pkgs; [
+          buildInputs = with pkgs; [
-          nodejs-18_x
+            nodejs
-          nodePackages.pnpm
+            corepack
-          # tools
+            # tools
-          curl
+            curl
-          jq
+            jq
-          fontMin
+            fontMin
-          # browsers
+            cypress
-          firefox
+            # android
-          google-chrome
+            jdk17
-          epiphany # Safari-ish browser
+            android.androidsdk
-          cypress
+          ];
-          # android
+          ANDROID_JAVA_HOME = "${pkgs.jdk.home}";
-          jdk17
+          ANDROID_SDK_ROOT = "${pkgs.android.androidsdk}/libexec/android-sdk";
-          android.androidsdk
+          GRADLE_OPTS = "-Dorg.gradle.project.android.aapt2FromMavenOverride=${ANDROID_SDK_ROOT}/build-tools/${aapt2buildToolsVersion}/aapt2";
-          musl
+          CYPRESS_INSTALL_BINARY = "0";
-        ];
+          CYPRESS_RUN_BINARY = "${pkgs.cypress}/bin/Cypress";
-        ANDROID_JAVA_HOME = "${pkgs.jdk.home}";
+        };
-        ANDROID_SDK_ROOT = "${pkgs.android.androidsdk}/libexec/android-sdk";
+      }
-        GRADLE_OPTS = "-Dorg.gradle.project.android.aapt2FromMavenOverride=${ANDROID_SDK_ROOT}/build-tools/${aapt2buildToolsVersion}/aapt2";
+    );
-        CYPRESS_INSTALL_BINARY = "0";
-        CYPRESS_RUN_BINARY = "${pkgs.cypress}/bin/Cypress";
-      };
-    });
 }

frontend/app/.prettierignore

@@ -11,7 +11,6 @@ log.txt
 *.sublime-workspace
 .vscode/*
 npm-debug.log*
-.browser-data
 
 # This file is sometimes created automatically, even though
 # we actually use the capacitor.config.ts

frontend/app/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @openstapps/app
 
+## 3.2.0
+
+### Patch Changes
+
+- 689ac68b: pin alpine version to 3.18 and add healthchecks
+- Updated dependencies [912ae422]
+  - @openstapps/core@4.0.0
+  - @openstapps/api@4.0.0
+  - @openstapps/collection-utils@3.0.0
+
 ## 3.1.2
 
 ### Patch Changes

frontend/app/ICONS.md

@@ -21,10 +21,10 @@ as usual.
 
 The modified `ion-icon` comes with a few extra features:
 
-- `[style.--fill]` controls the fill color of the icon.
+- `[fill]` controls the fill color of the icon.
-- `[style.--weight]` controls the font weight of the icon.
+- `[weight]` controls the font weight of the icon.
-- `[style.--size]` controls the font size of the icon.
+- `[size]` controls the font size of the icon.
-- `[style.--grade]` controls the font grade of the icon.
+- `[grade]` controls the font grade of the icon.
 
 All of these attributes are animated as described
 [here](https://developers.google.com/fonts/docs/material_symbols).
@@ -50,7 +50,8 @@ the config file.
 Icon font minification is done automatically, but requires you to
 follow a few simple rules:
 
-1. Use the Proxy object to reference icon names in TypeScript files and code
+1. Use the type-safe proxy for referencing icon names in
+   TypeScript files and code
 
 ```ts
 SCIcon.icon_name;

frontend/app/angular.json

@@ -21,10 +21,13 @@
             "allowedCommonJsDependencies": [
               "moment",
               "opening_hours",
-              "leaflet",
+              "localforage",
-              "leaflet.markercluster",
+              "i18next",
-              "localforge",
+              "semver",
-              "guid-typescript"
+              "suncalc",
+              "guid-typescript",
+              "fast-deep-equal",
+              "maplibre-gl"
             ],
             "aot": true,
             "assets": [
@@ -32,24 +35,13 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "assets/"
               }
             ],
             "styles": [
-              {
-                "input": "src/theme/variables.scss",
-                "inject": true
-              },
               {
                 "input": "src/global.scss",
                 "inject": true
-              },
+              }
-              "./node_modules/leaflet/dist/leaflet.css",
-              "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
             ]
           },
           "configurations": {
@@ -132,11 +124,6 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "assets/"
               }
             ]
           }

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

@@ -16,7 +16,7 @@
 describe('favorites', function () {
   beforeEach(() => {
     cy.interceptSearch({
-      extends: {query: 'a'},
+      extends: {query: 'test'},
       fixture: 'search/generic',
       alias: 'search',
     });
@@ -29,7 +29,7 @@ describe('favorites', function () {
   it('should add a favorite', function () {
     cy.visit('/search');
     cy.patchSearchPage();
-    cy.get('ion-searchbar').type('a');
+    cy.get('ion-searchbar').type('test');
     let text!: string;
     cy.get('stapps-data-list-item')
       .first()
@@ -40,7 +40,9 @@ describe('favorites', function () {
             text = it;
           });
         cy.get('stapps-favorite-button').click();
-        cy.get('stapps-favorite-button > ion-button > ion-icon').should('have.class', 'selected');
+        cy.get('stapps-favorite-button > ion-button > ion-icon')
+          .invoke('attr', 'ng-reflect-fill')
+          .should('eq', 'true');
       });
     cy.visit('/favorites');
     cy.get('stapps-data-list-item').within(() => {

frontend/app/icons.config.mjs

@@ -12,9 +12,9 @@
  * 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 type {IconConfig} from './scripts/icon-config';
 
-const config: IconConfig = {
+/** @type {import('./scripts/icon-config').IconConfig} */
+const config = {
   inputPath: 'node_modules/material-symbols/material-symbols-rounded.woff2',
   outputPath: 'src/assets/icons.min.woff2',
   htmlGlob: 'src/**/*.html',
@@ -38,10 +38,6 @@ const config: IconConfig = {
       'work',
     ],
   },
-  codePoints: {
-    ios_share: 'e6b8',
-    fact_check: 'f0c5',
-  },
 };
 
 export default config;

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": "3.1.2",
+  "version": "3.2.0",
   "private": true,
   "license": "GPL-3.0-only",
   "author": "Karl-Philipp Wulfert <krlwlfrt@gmail.com>",
@@ -21,7 +21,7 @@
     "build:prod": "ng build --configuration=production",
     "build:stats": "ng build --configuration=production --stats-json",
     "changelog": "conventional-changelog -p angular -i src/assets/about/CHANGELOG.md -s -r 0",
-    "check-icons": "ts-node scripts/check-icon-correctness.ts",
+    "check-icons": "node scripts/check-icon-correctness.mjs",
     "chromium:no-cors": "chromium --disable-web-security --user-data-dir=\".browser-data/chromium\"",
     "chromium:virtual-host": "chromium --host-resolver-rules=\"MAP mobile.app.uni-frankfurt.de:* localhost:8100\" --ignore-certificate-errors",
     "cypress:open": "cypress open",
@@ -35,10 +35,10 @@
     "e2e": "ng e2e",
     "format": "prettier . -c",
     "format:fix": "prettier --write .",
-    "licenses": "license-checker --json > src/assets/about/licenses.json && ts-node ./scripts/accumulate-licenses.ts && git add src/assets/about/licenses.json",
+    "licenses": "license-checker --json > src/assets/about/licenses.json && node ./scripts/accumulate-licenses.mjs && git add src/assets/about/licenses.json",
     "lint": "ng lint && stylelint \"**/*.scss\"",
     "lint:fix": "eslint --fix -c .eslintrc.json --ignore-path .eslintignore --ext .ts,.html src/ && stylelint --fix \"**/*.scss\"",
-    "minify-icons": "ts-node-esm scripts/minify-icon-font.ts",
+    "minify-icons": "node scripts/minify-icon-font.mjs",
     "postinstall": "jetify && echo \"skipping jetify in production mode\"",
     "preview": "http-server www --p 8101 -o",
     "push": "git push && git push origin \"v$npm_package_version\"",
@@ -59,8 +59,6 @@
     "@angular/forms": "17.3.0",
     "@angular/platform-browser": "17.3.0",
     "@angular/router": "17.3.0",
-    "@asymmetrik/ngx-leaflet": "17.0.0",
-    "@asymmetrik/ngx-leaflet-markercluster": "17.0.0",
     "@awesome-cordova-plugins/calendar": "6.6.0",
     "@awesome-cordova-plugins/core": "6.6.0",
     "@capacitor/app": "5.0.7",
@@ -81,6 +79,7 @@
     "@ionic-native/core": "5.36.0",
     "@ionic/angular": "7.8.0",
     "@ionic/storage-angular": "4.0.0",
+    "@maplibre/ngx-maplibre-gl": "17.4.1",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.1",
@@ -96,17 +95,16 @@
     "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
-    "ionicons": "7.2.1",
     "jsonpath-plus": "6.0.1",
-    "leaflet": "1.9.4",
+    "maplibre-gl": "4.0.2",
-    "leaflet.markercluster": "1.5.3",
+    "material-symbols": "0.17.1",
-    "material-symbols": "0.17.0",
     "moment": "2.30.1",
     "ngx-date-fns": "11.0.0",
     "ngx-logger": "5.0.12",
     "ngx-markdown": "17.1.1",
     "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
+    "pmtiles": "3.0.3",
     "rxjs": "7.8.1",
     "semver": "7.6.0",
     "swiper": "8.4.5",
@@ -148,8 +146,6 @@
     "@types/karma": "6.3.8",
     "@types/karma-coverage": "2.0.3",
     "@types/karma-jasmine": "4.0.5",
-    "@types/leaflet": "1.9.8",
-    "@types/leaflet.markercluster": "1.5.4",
     "@types/node": "18.15.3",
     "@types/semver": "7.5.8",
     "@typescript-eslint/eslint-plugin": "7.2.0",
@@ -176,7 +172,7 @@
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "stylelint": "16.2.1",
+    "stylelint": "16.3.1",
     "stylelint-config-clean-order": "5.4.1",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-recommended-scss": "14.0.0",

frontend/app/scripts/accumulate-licenses.mjs

@@ -12,33 +12,34 @@
  * 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 fs from 'fs';
+import {readFileSync, writeFileSync} from 'fs';
-import {omit} from '../src/app/_helpers/collections/omit';
+import {omit, pickBy} from '@openstapps/collection-utils';
-import {pickBy} from '../src/app/_helpers/collections/pick';
 
 /**
  * accumulate and transform licenses based on two license files
+ * @param {string} path
+ * @param {string} additionalLicensesPath
  */
-function accumulateFile(path: string, additionalLicensesPath: string) {
+function accumulateFile(path, additionalLicensesPath) {
-  const packageJson = JSON.parse(fs.readFileSync('./package.json').toString());
+  const packageJson = JSON.parse(readFileSync('./package.json').toString());
   const dependencies = packageJson.dependencies;
 
   console.log(`Accumulating licenses from ${path}`);
 
-  fs.writeFileSync(
+  writeFileSync(
     path,
     JSON.stringify(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      Object.entries<any>({
+      Object.entries({
-        ...pickBy(JSON.parse(fs.readFileSync(path).toString()), (_, key: string) => {
+        ...pickBy(JSON.parse(readFileSync(path).toString()), (_, key) => {
-          const parts = key.split('@');
+          const parts = /** @type {string} */ (key).split('@');
 
           return dependencies[parts.slice(0, -1).join('@')] === parts[parts.length - 1];
         }),
-        ...JSON.parse(fs.readFileSync(additionalLicensesPath).toString()),
+        ...JSON.parse(readFileSync(additionalLicensesPath).toString()),
       })
         .map(([key, value]) => ({
-          licenseText: value.licenseFile && fs.readFileSync(value.licenseFile, 'utf8'),
+          licenseText: value.licenseFile && readFileSync(value.licenseFile, 'utf8'),
           name: key,
           ...omit(value, 'licenseFile', 'path'),
         }))

frontend/app/scripts/check-icon-correctness.mjs

@@ -12,18 +12,20 @@
  * 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 fontkit, {Font} from 'fontkit';
+import {openSync} from 'fontkit';
-import config from '../icons.config';
+import config from '../icons.config.mjs';
 import {existsSync} from 'fs';
-import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons';
+import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons.mjs';
+import {fetchCodePointMap} from './get-code-points.mjs';
 
 const commandName = '"npm run minify-icons"';
-const originalFont = fontkit.openSync(config.inputPath);
 if (!existsSync(config.outputPath)) {
   console.error(`Minified font not found. Run ${commandName} first.`);
   process.exit(-1);
 }
-const modifiedFont = fontkit.openSync(config.outputPath);
+
+/** @type {import('fontkit').Font} */
+const modifiedFont = openSync(config.outputPath);
 
 let success = true;
 
@@ -48,25 +50,16 @@ async function checkAll() {
 }
 
 /**
- *
+ * @param {Record<string, string[]>} icons
  */
-function check(icons: Record<string, string[]>) {
+async function check(icons) {
-  for (const [purpose, iconSet] of Object.entries(icons)) {
+  const codePoints = await fetchCodePointMap();
-    for (const icon of iconSet) {
+
-      if (!hasIcon(originalFont, icon)) {
+  for (const icon of Object.values(icons).flat()) {
-        success = false;
+    const codePoint = codePoints.get(icon);
-        console.error(`${purpose}: ${icon} does not exist. Typo?`);
+    if (!codePoint) throw new Error(`"${icon}" is not a valid icon`);
-      } else if (!hasIcon(modifiedFont, icon)) {
+    if (!modifiedFont.getGlyph(Number.parseInt(codePoint, 16))) {
-        success = false;
+      throw new Error(`"${icon}" (code point ${codePoint}) is missing`);
-        console.error(`${purpose}: ${icon} not found in minified font. Run ${commandName} to regenerate it.`);
-      }
     }
   }
 }
-
-/**
- *
- */
-function hasIcon(font: Font, icon: string) {
-  return font.layout(icon).glyphs.some(it => it.isLigature);
-}

frontend/app/scripts/gather-used-icons.mjs

@@ -14,34 +14,39 @@
  */
 import {glob} from 'glob';
 import {readFileSync} from 'fs';
-import {matchPropertyContent, matchTagProperties} from '../src/app/util/ion-icon/icon-match';
+import {
+  matchPropertyAccess,
+  matchPropertyContent,
+  matchTagProperties,
+} from '../src/app/util/ion-icon/icon-match.mjs';
 
 /**
- *
+ * @returns {Promise<Record<string, string[]>>}
  */
-export async function getUsedIconsHtml(pattern = 'src/**/*.html'): Promise<Record<string, string[]>> {
+export async function getUsedIconsHtml(pattern = 'src/**/*.html') {
   return Object.fromEntries(
     (await glob(pattern))
       .map(file => [
         file,
-        (readFileSync(file, 'utf8')
+        readFileSync(file, 'utf8')
           .match(matchTagProperties('ion-icon'))
           ?.flatMap(match => {
             return match.match(matchPropertyContent(['name', 'md', 'ios']));
           })
-          .filter(it => !!it) as string[]) || [],
+          .filter(it => !!it) || [],
       ])
-      .filter(([, values]) => values.length > 0),
+      .filter(([, values]) => values && values.length > 0),
   );
 }
 
 /**
- *
+ * @returns {Promise<Record<string, string[]>>}
  */
-export async function getUsedIconsTS(pattern = 'src/**/*.ts'): Promise<Record<string, string[]>> {
+export async function getUsedIconsTS(pattern = 'src/**/*.ts') {
+  const regex = matchPropertyAccess('SCIcon');
   return Object.fromEntries(
     (await glob(pattern))
-      .map(file => [file, readFileSync(file, 'utf8').match(/(?<=Icon`)[\w-]+(?=`)/g) || []])
+      .map(file => [file, readFileSync(file, 'utf8').match(regex) || []])
-      .filter(([, values]) => values.length > 0),
+      .filter(([, values]) => values && values.length > 0),
   );
 }

frontend/app/scripts/get-code-points.mjs

@@ -0,0 +1,23 @@
+const url =
+  'https://raw.githubusercontent.com/google/material-design-icons/master/' +
+  'variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints';
+
+export async function fetchCodePointMap() {
+  const icons = await fetch(url)
+    .then(it => it.text())
+    .then(it => new Map(it.split('\n').map(it => /** @type {[string, string]} */ (it.split(' ')))));
+  if (icons.size < 100) throw new Error(`Code point map is very small, is the URL incorrect? ${url}`);
+  return icons;
+}
+
+/**
+ * @param {string[]} icons
+ */
+export async function getCodePoints(icons) {
+  const codePoints = await fetchCodePointMap();
+  return icons.map(icon => {
+    const code = codePoints.get(icon);
+    if (!code) throw new Error(`Code point for icon ${icon} not found`);
+    return code;
+  });
+}

frontend/app/scripts/icon-config.d.mts

@@ -19,5 +19,4 @@ export interface IconConfig {
   inputPath: string;
   outputPath: string;
   additionalIcons?: {[purpose: string]: string[]};
-  codePoints?: {[name: string]: string};
 }

frontend/app/scripts/minify-icon-font.mjs

@@ -14,16 +14,17 @@
  */
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import fontkit from 'fontkit';
 import {exec} from 'child_process';
-import config from '../icons.config';
+import config from '../icons.config.mjs';
 import {statSync} from 'fs';
-import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons';
+import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons.mjs';
+import {getCodePoints} from './get-code-points.mjs';
 
 /**
- *
+ * @param {string[] | string} command
+ * @returns {Promise<string>}
  */
-async function run(command: string[] | string): Promise<string> {
+async function run(command) {
   const fullCommand = Array.isArray(command) ? command.join(' ') : command;
   console.log(`>> ${fullCommand}`);
 
@@ -44,7 +45,8 @@ async function run(command: string[] | string): Promise<string> {
  *
  */
 async function minifyIconFont() {
-  const icons = new Set<string>();
+  /** @type {Set<string>} */
+  const icons = new Set();
 
   for (const iconSet of [
     ...Object.values(config.additionalIcons || []),
@@ -56,35 +58,7 @@ async function minifyIconFont() {
     }
   }
 
-  console.log('Icons used:', [...icons.values()].sort());
+  const glyphs = ['5f-7a', '30-39', ...(await getCodePoints([...icons]))].sort();
-  const font = fontkit.openSync(config.inputPath);
-
-  const glyphs: string[] = ['5f-7a', '30-39'];
-  for (const icon of icons) {
-    const iconGlyphs = font.layout(icon).glyphs;
-    if (iconGlyphs.length === 0) {
-      console.error(`${icon} not found in font. Typo?`);
-      process.exit(-1);
-    }
-
-    const codePoints = iconGlyphs
-      .flatMap(it => font.stringsForGlyph(it.id))
-      .flatMap(it => [...it])
-      .map(it => it.codePointAt(0)!.toString(16));
-
-    if (codePoints.length === 0) {
-      if (config.codePoints?.[icon]) {
-        glyphs.push(config.codePoints[icon]);
-      } else {
-        console.log();
-        console.error(`${icon} code point could not be determined. Add it to config.codePoints.`);
-        process.exit(-1);
-      }
-    }
-
-    glyphs.push(...codePoints);
-  }
-  glyphs.sort();
 
   console.log(
     await run([
@@ -114,8 +88,10 @@ minifyIconFont();
 
 /**
  * Bytes to respective units
+ * @param {number} value
+ * @returns {string}
  */
-function toByteUnit(value: number): string {
+function toByteUnit(value) {
   if (value < 1024) {
     return `${value}B`;
   } else if (value < 1024 * 1024) {

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

@@ -25,11 +25,11 @@ import moment from 'moment';
 import 'moment/min/locales';
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import SwiperCore, {FreeMode, Navigation} from 'swiper';
+
 import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {CatalogModule} from './modules/catalog/catalog.module';
-import {ConfigModule} from './modules/config/config.module';
 import {ConfigProvider} from './modules/config/config.provider';
 import {DashboardModule} from './modules/dashboard/dashboard.module';
 import {DataModule} from './modules/data/data.module';
@@ -61,14 +61,16 @@ import {RoutingStackService} from './util/routing-stack.service';
 import {SCLanguageCode, SCSettingValue} from '@openstapps/core';
 import {DefaultAuthService} from './modules/auth/default-auth.service';
 import {PAIAAuthService} from './modules/auth/paia/paia-auth.service';
+import {IonIconModule} from './util/ion-icon/ion-icon.module';
 import {NavigationModule} from './modules/menu/navigation/navigation.module';
 import {browserFactory, SimpleBrowser} from './util/browser.factory';
 import {getDateFnsLocale} from './translation/dfns-locale';
 import {setDefaultOptions} from 'date-fns';
 import {DateFnsConfigurationService} from 'ngx-date-fns';
-import {SCIcon} from './util/ion-icon/icon';
 import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
+import maplibregl from 'maplibre-gl';
+import {Protocol} from 'pmtiles';
 
 registerLocaleData(localeDe);
 
@@ -90,6 +92,7 @@ export function initializerFactory(
 ) {
   return async () => {
     try {
+      maplibregl.addProtocol('pmtiles', new Protocol().tile);
       initLogger(logger);
       await storageProvider.init();
       await configProvider.init();
@@ -150,13 +153,11 @@ export function createTranslateLoader(http: HttpClient) {
     BrowserAnimationsModule,
     CatalogModule,
     CommonModule,
-    ConfigModule,
     DashboardModule,
     DataModule,
     HebisModule,
-    IonicModule.forRoot({
+    IonicModule.forRoot(),
-      backButtonIcon: SCIcon.arrow_back,
+    IonIconModule,
-    }),
     JobModule,
     FavoritesModule,
     LibraryModule,

frontend/app/src/app/modules/about/about-licenses.html

@@ -29,12 +29,7 @@
         <ion-card-header>
           <ion-card-title>
             {{ license.name }}
-            <ion-icon
+            <ion-icon [size]="16" [weight]="300" class="supertext-icon" name="open_in_browser"></ion-icon>
-              [size]="16"
-              [style.--weight]="300"
-              class="supertext-icon"
-              name="open_in_browser"
-            ></ion-icon>
           </ion-card-title>
           @if (license.authors || license.publisher) {
             <ion-card-subtitle> {{ license.authors || license.publisher }} </ion-card-subtitle>

frontend/app/src/app/modules/about/about-page/about-page-content.html

@@ -49,7 +49,7 @@
 @if (content.type === 'router link') {
   <ion-item [routerLink]="content.link">
     @if (content.icon) {
-      <ion-icon [name]="content.icon" slot="start"></ion-icon>
+      <ion-icon [name]="$any(content.icon)" slot="start"></ion-icon>
     }
     <ion-label>{{ 'title' | translateSimple: content }}</ion-label>
   </ion-item>

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

@@ -19,7 +19,6 @@ import {FormsModule} from '@angular/forms';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
-import {ConfigProvider} from '../config/config.provider';
 import {AboutPageComponent} from './about-page/about-page.component';
 import {MarkdownModule} from 'ngx-markdown';
 import {AboutPageContentComponent} from './about-page/about-page-content.component';
@@ -29,6 +28,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 import {AboutLicenseModalComponent} from './about-license-modal.component';
 import {AboutChangelogComponent} from './about-changelog.component';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 
 const settingsRoutes: Routes = [
   {path: 'about', component: AboutPageComponent},
@@ -52,8 +52,9 @@ const settingsRoutes: Routes = [
   ],
   imports: [
     CommonModule,
+    IonIconModule,
     FormsModule,
-    IonicModule,
+    IonicModule.forRoot(),
     TranslateModule.forChild(),
     ThingTranslateModule.forChild(),
     RouterModule.forChild(settingsRoutes),
@@ -62,6 +63,5 @@ const settingsRoutes: Routes = [
     ScrollingModule,
     UtilModule,
   ],
-  providers: [ConfigProvider],
 })
 export class AboutModule {}

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

@@ -35,6 +35,7 @@ import {AssessmentsProvider} from './assessments.provider';
 import {AssessmentsSimpleDataListComponent} from './list/assessments-simple-data-list.component';
 import {ProtectedRoutes} from '../auth/protected.routes';
 import {AssessmentsTreeListComponent} from './list/assessments-tree-list.component';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {UtilModule} from '../../util/util.module';
 
 const routes: ProtectedRoutes = [
@@ -68,6 +69,7 @@ const routes: ProtectedRoutes = [
   imports: [
     CommonModule,
     FormsModule,
+    IonIconModule,
     IonicModule,
     RouterModule.forChild(routes),
     TranslateModule,

frontend/app/src/app/modules/calendar/add-event-review-modal.html

@@ -67,7 +67,7 @@
   <div class="horizontal-flex">
     <ion-button fill="clear" (click)="export()">
       {{ 'share' | translate }}
-      <ion-icon slot="end" name="share"></ion-icon>
+      <ion-icon slot="end" md="share" ios="ios_share"></ion-icon>
     </ion-button>
     @if (isWeb) {
       <ion-button fill="outline" (click)="download()">

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

@@ -25,13 +25,15 @@ import {FormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MomentModule} from 'ngx-moment';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 
 @NgModule({
   declarations: [AddEventReviewModalComponent],
   imports: [
-    IonicModule,
+    IonicModule.forRoot(),
     TranslateModule.forChild(),
     ThingTranslateModule.forChild(),
+    IonIconModule,
     FormsModule,
     CommonModule,
     MomentModule,

frontend/app/src/app/modules/catalog/catalog.component.scss

@@ -15,7 +15,6 @@
 
 ion-segment-button {
   max-width: 100%;
-  text-transform: none;
 }
 
 .margin-top {

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

@@ -23,6 +23,7 @@ import {DataModule} from '../data/data.module';
 import {SettingsProvider} from '../settings/settings.provider';
 import {CatalogComponent} from './catalog.component';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 
 const catalogRoutes: Routes = [
   {path: 'catalog', component: CatalogComponent},
@@ -35,10 +36,11 @@ const catalogRoutes: Routes = [
 @NgModule({
   declarations: [CatalogComponent],
   imports: [
-    IonicModule,
+    IonicModule.forRoot(),
     FormsModule,
     TranslateModule.forChild(),
     RouterModule.forChild(catalogRoutes),
+    IonIconModule,
     CommonModule,
     MomentModule,
     DataModule,

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

@@ -1,27 +0,0 @@
-/*
- * Copyright (C) 2019 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 {NgModule} from '@angular/core';
-import {DataModule} from '../data/data.module';
-import {StorageModule} from '../storage/storage.module';
-import {ConfigProvider} from './config.provider';
-
-/**
- * TODO
- */
-@NgModule({
-  imports: [StorageModule, DataModule],
-  providers: [ConfigProvider],
-})
-export class ConfigModule {}

frontend/app/src/app/modules/config/config.provider.spec.ts

@@ -104,9 +104,9 @@ describe('ConfigProvider', () => {
 
   it('should throw error on wrong config version in storage', async () => {
     storageProviderSpy.has.and.returnValue(Promise.resolve(true));
-    const wrongConfig = JSON.parse(JSON.stringify(sampleIndexResponse));
+    const wrongConfig = structuredClone(sampleIndexResponse);
     wrongConfig.backend.SCVersion = '0.1.0';
-    storageProviderSpy.get.and.returnValue(wrongConfig);
+    storageProviderSpy.get.and.returnValue(Promise.resolve(wrongConfig));
     spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(sampleIndexResponse));
     await configProvider.init();
 

frontend/app/src/app/modules/config/config.provider.ts

@@ -73,6 +73,7 @@ export class ConfigProvider {
     swHttpClient: StAppsWebHttpClient,
     private readonly logger: NGXLogger,
   ) {
+    console.log('config init');
     this.client = new Client(swHttpClient, environment.backend_url, environment.backend_version);
   }
 

frontend/app/src/app/modules/dashboard/dashboard.component.html

@@ -20,7 +20,7 @@
 </ion-header>
 <div #schedule class="schedule">
   <a [routerLink]="['/schedule/week-overview']">
-    <ion-icon [size]="36" [style.--weight]="300" name="calendar_month"></ion-icon>
+    <ion-icon [size]="36" [weight]="300" name="calendar_month"></ion-icon>
     <ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
   </a>
   <!-- Avoid structural directives here, they might interfere with the collapse animation -->

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

@@ -30,6 +30,7 @@ import {MensaSectionContentComponent} from './sections/mensa-section/mensa-secti
 import {FavoritesSectionComponent} from './sections/favorites-section/favorites-section.component';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {NewsModule} from '../news/news.module';
 import {JobSectionComponent} from './sections/jobs-section/job-section.component';
 import {JobModule} from '../jobs/jobs.module';
@@ -55,7 +56,8 @@ const catalogRoutes: Routes = [
     JobSectionComponent,
   ],
   imports: [
-    IonicModule,
+    IonicModule.forRoot(),
+    IonIconModule,
     FormsModule,
     TranslateModule.forChild(),
     RouterModule.forChild(catalogRoutes),

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.component.ts

@@ -26,6 +26,7 @@ import {AddEventStates, AddEventStatesMap} from './add-event-action-chip.config'
 import {EditEventSelectionComponent} from '../edit-event-selection.component';
 import {AddEventReviewModalComponent} from '../../../calendar/add-event-review-modal.component';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {MaterialSymbol} from 'material-symbols';
 
 /**
  * Shows a horizontal list of action chips
@@ -55,12 +56,12 @@ export class AddEventActionChipComponent {
   /**
    * Icon
    */
-  icon: string;
+  icon: MaterialSymbol;
 
   /**
    * Current state of icon fill
    */
-  iconFill: 1 | 0;
+  iconFill: boolean;
 
   /**
    * Label

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.config.ts

@@ -25,30 +25,30 @@ export enum AddEventStates {
 export const AddEventStatesMap = {
   [AddEventStates.ADDED_ALL]: {
     icon: SCIcon.event_available,
-    fill: 1,
+    fill: true,
     label: 'data.chips.add_events.ADDED_ALL',
     disabled: false,
     color: 'success',
   },
   [AddEventStates.ADDED_SOME]: {
     icon: SCIcon.event,
-    fill: 1,
+    fill: true,
     label: 'data.chips.add_events.ADDED_SOME',
     disabled: false,
     color: 'success',
   },
   [AddEventStates.REMOVED_ALL]: {
     icon: SCIcon.calendar_today,
-    fill: 0,
+    fill: false,
     label: 'data.chips.add_events.REMOVED_ALL',
     disabled: false,
     color: 'primary',
   },
   [AddEventStates.UNAVAILABLE]: {
     icon: SCIcon.event_busy,
-    fill: 0,
+    fill: false,
     label: 'data.chips.add_events.UNAVAILABLE',
     disabled: true,
     color: 'dark',
   },
-} as const;
+};

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.html

@@ -22,7 +22,7 @@
       [color]="color"
       [outline]="true"
     >
-      <ion-icon [name]="icon" [style.--fill]="iconFill"></ion-icon>
+      <ion-icon [name]="icon" [fill]="iconFill"></ion-icon>
       <ion-label>{{ label | translate }}</ion-label>
       <stapps-edit-modal #editModal (save)="selection.save()">
         <ng-template>

frontend/app/src/app/modules/data/chips/filter/chip-filter.component.html

@@ -16,7 +16,7 @@
 @if (displayValue) {
   <ion-chip [class.active]="active" (click)="emitToggle(value)">
     @if (active) {
-      <ion-icon class="ion-color" name="check_circle" [style.--fill]="1"></ion-icon>
+      <ion-icon class="ion-color" name="check_circle" [fill]="true"></ion-icon>
     }
     <ion-label>{{ displayValue }}</ion-label>
   </ion-chip>

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

@@ -14,8 +14,9 @@
  */
 import {SCThingType} from '@openstapps/core';
 import {SCIcon} from '../../util/ion-icon/icon';
+import {MaterialSymbol} from 'material-symbols';
 
-export const DataIcons: Record<SCThingType, string> = {
+export const DataIcons = {
   'academic event': SCIcon.school,
   'assessment': SCIcon.fact_check,
   'article': SCIcon.article,
@@ -47,4 +48,4 @@ export const DataIcons: Record<SCThingType, string> = {
   'video': SCIcon.movie,
   'diff': SCIcon.difference,
   'job posting': SCIcon.work,
-};
+} satisfies Record<SCThingType, MaterialSymbol>;

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

@@ -31,7 +31,7 @@ export class DataIconPipe implements PipeTransform {
   /**
    * Provide the icon name from the data type
    */
-  transform(type: SCThingType): string {
+  transform(type: SCThingType) {
     return this.typeIconMap[type];
   }
 }

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

@@ -17,19 +17,19 @@ import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {LeafletModule} from '@asymmetrik/ngx-leaflet';
 import {IonicModule, Platform} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {MarkdownModule} from 'ngx-markdown';
 import {MomentModule} from 'ngx-moment';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {SimpleBrowser, browserFactory} from '../../util/browser.factory';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {RoutingStackService} from '../../util/routing-stack.service';
 import {UtilModule} from '../../util/util.module';
 import {CalendarService} from '../calendar/calendar.service';
 import {ScheduleProvider} from '../calendar/schedule.provider';
 import {GeoNavigationDirective} from '../map/geo-navigation.directive';
-import {MapWidgetComponent} from '../map/widget/map-widget.component';
+import {MapWidgetComponent} from '../map/map-widget.component';
 import {MenuModule} from '../menu/menu.module';
 import {SettingsProvider} from '../settings/settings.provider';
 import {StorageModule} from '../storage/storage.module';
@@ -141,7 +141,6 @@ import {ShareButtonComponent} from './elements/share-button.component';
     FoodDataListComponent,
     LocateActionChipComponent,
     LongInlineTextComponent,
-    MapWidgetComponent,
     MessageDetailContentComponent,
     MessageListItemComponent,
     JobPostingDetailContentComponent,
@@ -186,11 +185,12 @@ import {ShareButtonComponent} from './elements/share-button.component';
     CommonModule,
     DataRoutingModule,
     FormsModule,
+    MapWidgetComponent,
     HttpClientModule,
-    IonicModule,
+    IonicModule.forRoot(),
-    LeafletModule,
     MarkdownModule.forRoot(),
     MenuModule,
+    IonIconModule,
     MomentModule.forRoot({
       relativeTimeThresholdOptions: {
         m: 59,

frontend/app/src/app/modules/data/detail/data-detail-content.scss

@@ -14,6 +14,10 @@
  */
 @import '../../../../theme/util/mixins';
 
+:host {
+  display: contents;
+}
+
 stapps-origin-detail {
   // css hack to make the element stick to the bottom of the scroll container even
   // when the content is not filling it
@@ -49,13 +53,10 @@ stapps-origin-detail {
       background: var(--ion-color-primary);
     }
 
-    // Firefox doesn't support this yet...
+    & > .expand-when-space,
-    @supports selector(:has(*)) {
+    &:has(> .expand-when-space) {
-      & > .expand-when-space,
+      flex: 1;
-      &:has(> .expand-when-space) {
+      height: unset;
-        flex: 1;
-        height: unset;
-      }
     }
   }
 }

frontend/app/src/app/modules/data/detail/data-detail.scss

@@ -17,7 +17,6 @@ ion-content > div {
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 100%;
 }
 
 ion-title {

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

@@ -13,10 +13,11 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-button (click)="toggle($event)" color="medium" size="small" fill="clear">
+<ion-button (click)="toggle($event)" fill="clear" shape="round">
   <ion-icon
     slot="icon-only"
-    [style.--fill]="(isFavorite$ | async) ? 1 : 0"
+    [size]="24"
+    [fill]="(isFavorite$ | async) || false"
     [class.selected]="isFavorite$ | async"
     name="grade"
   ></ion-icon>

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

@@ -13,22 +13,25 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-:host {
+ion-button {
-  ion-button {
+  --background-activated: currentcolor;
-    --border-radius: 50%;
+  --background-hover: currentcolor;
+  --background-focused: currentcolor;
 
-    width: 50px;
+  aspect-ratio: 1;
-    height: 50px;
+  color: inherit;
-  }
+}
 
-  .selected {
+.selected {
-    // TODO
+  color: #fbc02d;
-    color: #fbc02d;
+}
-  }
 
-  @media (hover: hover) {
+@media (hover: hover) {
-    ion-button:hover ::ng-deep stapps-icon {
+  ion-button:hover ::ng-deep stapps-icon {
-      --fill: 1;
+    --fill: 1 !important;
-    }
   }
 }
+
+::ng-deep ion-item stapps-favorite-button ion-button {
+  color: var(--ion-color-medium) !important;
+}

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

@@ -12,7 +12,7 @@
  * 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 {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCIndexableThings} from '@openstapps/core';
 import {FavoritesService} from '../../favorites/favorites.service';
 import {Observable} from 'rxjs';
@@ -25,6 +25,7 @@ import {map, take} from 'rxjs/operators';
   selector: 'stapps-favorite-button',
   templateUrl: './favorite-button.component.html',
   styleUrls: ['./favorite-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FavoriteButtonComponent {
   /**

frontend/app/src/app/modules/data/elements/origin-detail.component.ts

@@ -21,6 +21,7 @@ import {SCThingUserOrigin, SCThingRemoteOrigin} from '@openstapps/core';
 @Component({
   selector: 'stapps-origin-detail',
   templateUrl: 'origin-detail.html',
+  styleUrl: 'origin-detail.scss',
 })
 export class OriginDetailComponent {
   /**

frontend/app/src/app/modules/data/elements/origin-detail.html

@@ -14,71 +14,61 @@
 -->
 
 @if (origin.type === 'user') {
-  <ion-card>
+  <h3>
-    <ion-card-header
+    {{ 'data.types.origin.TITLE' | translate | sentencecase }}:
-      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
+    {{ 'data.types.origin.USER' | translate | sentencecase }}
-      {{ 'data.types.origin.USER' | translate | titlecase }}</ion-card-header
+  </h3>
-    >
+  <p>
-    <ion-card-content>
+    {{ 'data.types.origin.detail.CREATED' | translate | sentencecase }}:
-      <p>
+    {{ origin.created | amDateFormat: 'll' }}
-        {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}:
+  </p>
-        {{ origin.created | amDateFormat: 'll' }}
+  @if (origin.updated) {
-      </p>
+    <p>
-      @if (origin.updated) {
+      {{ 'data.types.origin.detail.UPDATED' | translate | sentencecase }}:
-        <p>
+      {{ origin.updated | amDateFormat: 'll' }}
-          {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}:
+    </p>
-          {{ origin.updated | amDateFormat: 'll' }}
+  }
-        </p>
+  @if (origin.modified) {
-      }
+    <p>
-      @if (origin.modified) {
+      {{ 'data.types.origin.detail.MODIFIED' | translate | sentencecase }}:
-        <p>
+      {{ origin.modified | amDateFormat: 'll' }}
-          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
+    </p>
-          {{ origin.modified | amDateFormat: 'll' }}
+  }
-        </p>
+  @if (origin.maintainer) {
-      }
+    <p>
-      @if (origin.maintainer) {
+      {{ 'data.types.origin.detail.MAINTAINER' | translate | sentencecase }}:
-        <p>
+      <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-          {{ 'data.types.origin.detail.MAINTAINER' | translate }}:
+    </p>
-          <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
+  }
-        </p>
-      }
-    </ion-card-content>
-  </ion-card>
 }
 @if (origin.type === 'remote') {
-  <ion-card>
+  <h3>
-    <ion-card-header
+    {{ 'data.types.origin.TITLE' | translate | sentencecase }}:
-      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
+    {{ 'data.types.origin.REMOTE' | translate | sentencecase }}
-      {{ 'data.types.origin.REMOTE' | translate | titlecase }}</ion-card-header
+  </h3>
-    >
+  <p>
-    <ion-card-content>
+    {{ 'data.types.origin.detail.INDEXED' | translate | sentencecase }}:
-      <p>
+    {{ origin.indexed | amDateFormat: 'll' }}
-        {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}:
+  </p>
-        {{ origin.indexed | amDateFormat: 'll' }}
+  @if (origin.modified) {
-      </p>
+    <p>
-      @if (origin.modified) {
+      {{ 'data.types.origin.detail.MODIFIED' | translate | sentencecase }}:
-        <p>
+      {{ origin.modified | amDateFormat: 'll' }}
-          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
+    </p>
-          {{ origin.modified | amDateFormat: 'll' }}
+  }
-        </p>
+  @if (origin.name) {
-      }
+    <p>{{ 'data.types.origin.detail.MAINTAINER' | translate | sentencecase }}: {{ origin.name }}</p>
-      @if (origin.name) {
+  }
-        <p>{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
+  @if (origin.maintainer) {
-      }
+    <p>
-      @if (origin.maintainer) {
+      {{ 'data.types.origin.detail.MAINTAINER' | translate | sentencecase }}:
-        <p>
+      <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-          {{ 'data.types.origin.detail.MAINTAINER' | translate | titlecase }}:
+    </p>
-          <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
+  }
-        </p>
+  @if (origin.responsibleEntity) {
-      }
+    <p>
-      @if (origin.responsibleEntity) {
+      {{ 'data.types.origin.detail.RESPONSIBLE' | translate | sentencecase }}:
-        <p>
+      <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{ origin.responsibleEntity.name }}</a>
-          {{ 'data.types.origin.detail.RESPONSIBLE' | translate | titlecase }}:
+    </p>
-          <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{
+  }
-            origin.responsibleEntity.name
-          }}</a>
-        </p>
-      }
-    </ion-card-content>
-  </ion-card>
 }

frontend/app/src/app/modules/data/elements/origin-detail.scss

@@ -0,0 +1,15 @@
+:host {
+  padding: var(--spacing-lg);
+  padding-top: 0;
+}
+
+h3 {
+  font-weight: bold;
+}
+
+h3,
+p {
+  margin: 0;
+  font-size: 0.8em;
+  opacity: 0.8;
+}

frontend/app/src/app/modules/data/elements/share-button.html

@@ -1,4 +1,4 @@
 <ion-button size="small" fill="clear" (click)="share() && toast.present()">
-  <ion-icon [size]="24" slot="icon-only" name="share"></ion-icon>
+  <ion-icon [size]="24" slot="icon-only" name="share" ios="ios_share"></ion-icon>
 </ion-button>
 <ion-toast [message]="'toast.TITLE_COPIED' | translate" #toast [duration]="2000"></ion-toast>

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

@@ -16,7 +16,6 @@
 import {Component, ElementRef, HostListener, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {SCIcon} from '../../../util/ion-icon/icon';
-import {MaterialSymbol} from 'material-symbols';
 
 const AccordionButtonState = {
   collapsed: SCIcon.expand_more,
@@ -36,7 +35,8 @@ export class TitleCardComponent implements OnInit, OnChanges {
 
   @ViewChild('accordionTextArea') accordionTextArea: ElementRef;
 
-  buttonState: MaterialSymbol = AccordionButtonState.collapsed;
+  buttonState: (typeof AccordionButtonState)[keyof typeof AccordionButtonState] =
+    AccordionButtonState.collapsed;
 
   buttonShown = true;
 

frontend/app/src/app/modules/data/list/search-page.scss

@@ -38,7 +38,6 @@ ion-toolbar:first-of-type {
     ion-button {
       width: 50%;
       margin: 0;
-      text-transform: none;
     }
   }
 }

frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.html

@@ -14,7 +14,7 @@
 -->
 @if (isInCalendar | async) {
   <ion-chip outline="true" color="success" (click)="removeFromCalendar()">
-    <ion-icon name="event_available" [style.--fill]="1"></ion-icon>
+    <ion-icon name="event_available" [fill]="true"></ion-icon>
     <ion-label>{{ 'chips.addEvent.addedToEvents' | translate }}</ion-label>
   </ion-chip>
 } @else {
@@ -68,5 +68,5 @@
   </ion-card>
 }
 @if (item.inPlace && item.inPlace.geo) {
-  <stapps-map-widget [place]="item.inPlace"></stapps-map-widget>
+  <stapps-map-widget [place]="$any(item.inPlace)"></stapps-map-widget>
 }

frontend/app/src/app/modules/data/types/place/place-list-item.component.ts

@@ -17,7 +17,6 @@ import {PositionService} from '../../../map/position.service';
 import {filter, Observable} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
 import {map} from 'rxjs/operators';
-import {LatLng, geoJSON} from 'leaflet';
 import {trigger, transition, style, animate} from '@angular/animations';
 
 /**
@@ -39,13 +38,14 @@ export class PlaceListItemComponent {
   @Input() set item(item: PlaceTypes) {
     this._item = item;
     if (!isSCFloor(item) && hasValidLocation(item)) {
-      this.distance = this.positionService.watchCurrentLocation().pipe(
+      this.distance = this.positionService.geoLocation.pipe(
-        map(position =>
+        map(
-          new LatLng(position.latitude, position.longitude).distanceTo(
+          position =>
-            geoJSON(item.geo.point).getBounds().getCenter(),
+            Math.hypot(
-          ),
+              position.coords.latitude - item.geo.point.coordinates[1],
+              position.coords.longitude - item.geo.point.coordinates[0],
+            ) * 111_139,
         ),
-
         filter(it => it !== undefined),
       );
     }

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts

@@ -12,7 +12,6 @@
  * 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 moment, {Moment} from 'moment';
 import {AfterViewInit, Component, DestroyRef, inject, Input} from '@angular/core';
 import {SCDish, SCISO8601Date, SCPlace} from '@openstapps/core';
 import {PlaceMensaService} from './place-mensa-service';
@@ -53,11 +52,6 @@ export class PlaceMensaDetailComponent implements AfterViewInit {
    */
   selectedDay: string;
 
-  /**
-   * First day to display menu items for
-   */
-  startingDay: Moment;
-
   destroy$ = inject(DestroyRef);
 
   constructor(
@@ -65,9 +59,7 @@ export class PlaceMensaDetailComponent implements AfterViewInit {
     protected router: Router,
     readonly routerOutlet: IonRouterOutlet,
     private readonly dataRoutingService: DataRoutingService,
-  ) {
+  ) {}
-    this.startingDay = moment().startOf('day');
-  }
 
   ngAfterViewInit() {
     if (!this.openAsModal) {

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.scss

@@ -13,10 +13,6 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-ion-segment-button {
-  text-transform: none;
-}
-
 ion-segment {
   overflow: auto;
   justify-content: space-between;

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

@@ -22,6 +22,7 @@ import {MenuModule} from '../menu/menu.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {DataModule} from '../data/data.module';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 
 const favoritesRoutes: Routes = [
   {
@@ -39,6 +40,7 @@ const favoritesRoutes: Routes = [
     MenuModule,
     TranslateModule,
     DataModule,
+    IonIconModule,
     UtilModule,
   ],
   declarations: [FavoritesPageComponent],

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

@@ -21,6 +21,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {TranslateModule} from '@ngx-translate/core';
 import {MarkdownModule} from 'ngx-markdown';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 
 const feedbackRoutes: Routes = [
   {
@@ -34,6 +35,7 @@ const feedbackRoutes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    IonIconModule,
     RouterModule.forChild(feedbackRoutes),
     TranslateModule,
     MarkdownModule,

frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts

@@ -27,6 +27,7 @@ import {HebisDetailComponent} from './hebis-detail.component';
 import {Observable, of} from 'rxjs';
 import {StorageProvider} from '../../storage/storage.provider';
 import {IonicModule} from '@ionic/angular';
+import {IonIconModule} from '../../../util/ion-icon/ion-icon.module';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 
 const translations: any = {data: {detail: {TITLE: 'Foo'}}};
@@ -68,6 +69,7 @@ describe('HebisDetailComponent', () => {
         HebisRoutingModule,
         HebisModule,
         IonicModule,
+        IonIconModule,
         TranslateModule.forRoot({
           loader: {provide: TranslateLoader, useClass: TranslateFakeLoader},
         }),

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

@@ -34,6 +34,7 @@ import {HebisRoutingModule} from './hebis-routing.module';
 import {DataModule} from '../data/data.module';
 import {DaiaAvailabilityComponent} from './daia-availability/daia-availability.component';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {DaiaHoldingComponent} from './daia-availability/daia-holding.component';
 
 /**
@@ -52,8 +53,9 @@ import {DaiaHoldingComponent} from './daia-availability/daia-holding.component';
     DataModule,
     FormsModule,
     HebisRoutingModule,
+    IonIconModule,
     HttpClientModule,
-    IonicModule,
+    IonicModule.forRoot(),
     MarkdownModule.forRoot(),
     MenuModule,
     MomentModule.forRoot({

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

@@ -5,7 +5,7 @@ import {TranslateModule} from '@ngx-translate/core';
 import {MomentModule} from 'ngx-moment';
 import {DataModule} from '../data/data.module';
 import {UtilModule} from '../../util/util.module';
-import {ConfigProvider} from '../config/config.provider';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {RouterModule, Routes} from '@angular/router';
 import {JobsPageComponent} from './page/jobs-page.component';
@@ -15,15 +15,15 @@ const jobsRoutes: Routes = [{path: 'jobs', component: JobsPageComponent}];
 @NgModule({
   declarations: [JobsPageComponent],
   imports: [
-    IonicModule,
+    IonicModule.forRoot(),
     ThingTranslateModule.forChild(),
     TranslateModule.forChild(),
     RouterModule.forChild(jobsRoutes),
+    IonIconModule,
     CommonModule,
     MomentModule,
     DataModule,
     UtilModule,
   ],
-  providers: [ConfigProvider],
 })
 export class JobModule {}

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

@@ -32,6 +32,7 @@ import {MomentModule} from 'ngx-moment';
 import {FeeItemComponent} from './account/elements/fee-item/fee-item.component';
 import {DataModule} from '../data/data.module';
 import {UtilModule} from '../../util/util.module';
+import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 
 const routes: ProtectedRoutes | Routes = [
   {
@@ -71,6 +72,7 @@ const routes: ProtectedRoutes | Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    IonIconModule,
     RouterModule.forChild(routes),
     TranslateModule,
     MomentModule,

frontend/app/src/app/modules/map/cluster-leaves.pipe.ts

@@ -0,0 +1,51 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {Feature, Point} from 'geojson';
+import {MapGeoJSONFeature, type GeoJSONSource} from 'maplibre-gl';
+import {combineLatest, distinctUntilChanged, map, mergeMap, from, Observable, ReplaySubject} from 'rxjs';
+import {SCFeatureProperties} from './feature-collection.pipe';
+
+@Pipe({
+  name: 'mglClusterLeaves',
+  standalone: true,
+  pure: true,
+})
+export class MglClusterLeavesPipe implements PipeTransform {
+  source = new ReplaySubject<string>(1);
+
+  feature = new ReplaySubject<MapGeoJSONFeature>(1);
+
+  limit = new ReplaySubject<number>(1);
+
+  offset = new ReplaySubject<number>(1);
+
+  leaves: Observable<Feature<Point, SCFeatureProperties>[]> = combineLatest([
+    this.source.pipe(
+      distinctUntilChanged(),
+      map(source => this.mapService.getSource(source) as GeoJSONSource),
+    ),
+    this.feature.pipe(distinctUntilChanged(it => it.properties.cluster_id)),
+    this.limit.pipe(distinctUntilChanged()),
+    this.offset.pipe(distinctUntilChanged()),
+  ]).pipe(
+    mergeMap(([source, feature, limit, offset]) =>
+      from(source.getClusterLeaves(feature.properties.cluster_id, limit, offset)),
+    ),
+  );
+
+  constructor(private mapService: MapService) {}
+
+  transform(
+    source: string,
+    feature: MapGeoJSONFeature,
+    limit = 0,
+    offset = 0,
+  ): Observable<Feature<Point, SCFeatureProperties>[]> {
+    // MapLibre triggers change detection when the map moves, so this is to prevent flicker
+    this.source.next(source);
+    this.feature.next(feature);
+    this.limit.next(limit);
+    this.offset.next(offset);
+    return this.leaves;
+  }
+}

frontend/app/src/app/modules/map/controls/attribution.component.ts

@@ -0,0 +1,38 @@
+import {animate, style, transition, trigger} from '@angular/animations';
+import {AsyncPipe} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {map, delay, Subject, race, mergeWith} from 'rxjs';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+
+@Component({
+  selector: 'stapps-map-attribution',
+  templateUrl: './attribution.html',
+  styleUrl: './attribution.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [IonicModule, IonIconModule, AsyncPipe],
+  animations: [
+    trigger('fade', [
+      transition(':enter', [
+        style({opacity: 0, scale: '0.8 1'}),
+        animate('0.2s ease', style({opacity: 1, scale: 1})),
+      ]),
+      transition(':leave', [
+        style({opacity: 1, scale: 1}),
+        animate('0.2s ease', style({opacity: 0, scale: '0.8 1'})),
+      ]),
+    ]),
+  ],
+})
+export class AttributionComponent {
+  @Input() direction: 'left' | 'right' = 'right';
+
+  manualVisible = new Subject<void>();
+
+  hideAttribution = race(
+    this.manualVisible,
+    inject(MapService).mapCreated$.pipe(delay(5000), mergeWith(this.manualVisible)),
+  ).pipe(map((_, i) => i % 2 === 0));
+}

frontend/app/src/app/modules/map/controls/attribution.html

@@ -0,0 +1,8 @@
+@if ((hideAttribution | async) === null) {
+  <ion-button [attr.direction]="direction" @fade class="attribution" color="light"
+    >© OpenStreetMap</ion-button
+  >
+}
+<ion-button class="info" shape="round" color="light" (click)="this.manualVisible.next()">
+  <ion-icon slot="icon-only" name="info"></ion-icon>
+</ion-button>

frontend/app/src/app/modules/map/controls/attribution.scss

@@ -0,0 +1,36 @@
+:host {
+  position: relative;
+}
+
+ion-button {
+  height: 28px;
+  min-height: 28px;
+  margin: 0;
+  font-size: 10px;
+}
+
+ion-button.info {
+  --padding-start: 4px;
+  --padding-end: 4px;
+}
+
+ion-button.attribution {
+  position: absolute;
+  top: -3px;
+
+  &[direction='right'] {
+    --border-radius: 0 14px 14px 0;
+    --padding-start: 14px;
+
+    left: 16px;
+    transform-origin: 0 0;
+  }
+
+  &[direction='left'] {
+    --border-radius: 14px 0 0 14px;
+    --padding-end: 14px;
+
+    right: 16px;
+    transform-origin: 100% 0;
+  }
+}

frontend/app/src/app/modules/map/controls/compass-control.component.ts

@@ -0,0 +1,40 @@
+import {AsyncPipe} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {MapEventType} from 'maplibre-gl';
+import {map, mergeMap, fromEventPattern, merge} from 'rxjs';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+
+@Component({
+  selector: 'stapps-compass-control',
+  templateUrl: './compass-control.html',
+  styleUrl: './compass-control.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe, IonicModule, IonIconModule],
+})
+export class CompassControlComponent {
+  transform = this.mapService.mapCreated$.pipe(
+    mergeMap(() =>
+      merge(
+        fromEventPattern<MapEventType['rotate']>(
+          handler => this.mapService.mapInstance.on('rotate', handler),
+          handler => this.mapService.mapInstance.off('rotate', handler),
+        ),
+        fromEventPattern<MapEventType['pitch']>(
+          handler => this.mapService.mapInstance.on('pitch', handler),
+          handler => this.mapService.mapInstance.off('pitch', handler),
+        ),
+      ),
+    ),
+    map(event => {
+      const pitch = event.target.transform.pitch;
+      const angle = event.target.transform.angle;
+
+      return `rotateX(${pitch}deg) rotateZ(${angle}rad)`;
+    }),
+  );
+
+  constructor(readonly mapService: MapService) {}
+}

frontend/app/src/app/modules/map/controls/compass-control.html

@@ -0,0 +1,7 @@
+<ion-fab-button (click)="mapService.mapInstance.resetNorthPitch()" size="small" color="light">
+  <svg [style.transform]="transform | async" width="24" height="24" viewBox="0 0 32 32">
+    >
+    <path d="m8.5 15 6.56-13.13a1.05 1.05 180 0 1 1.88 0L23.5 15 16 12.5Z" />
+    <path d="m8.5 15 6.56-13.13a1.05 1.05 180 0 1 1.88 0L23.5 15 16 12.5Z" transform="rotate(180 16 16)" />
+  </svg>
+</ion-fab-button>

frontend/app/src/app/modules/map/controls/compass-control.scss

@@ -0,0 +1,11 @@
+path {
+  stroke: none;
+
+  &:first-child {
+    fill: var(--ion-color-primary);
+  }
+
+  &:last-child {
+    fill: var(--ion-color-medium);
+  }
+}

frontend/app/src/app/modules/map/controls/geolocate-control.component.ts

@@ -0,0 +1,91 @@
+import {AsyncPipe} from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {FitBoundsOptions, GeolocateControl, GeolocateControlOptions} from 'maplibre-gl';
+import {Map as MapLibre} from 'maplibre-gl';
+import {BehaviorSubject} from 'rxjs';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+
+type WatchState = InstanceType<typeof GeolocateControl>['_watchState'];
+
+class CustomGeolocateControl extends GeolocateControl {
+  constructor(
+    public _container: HTMLElement,
+    watchState: BehaviorSubject<WatchState>,
+    options: GeolocateControlOptions,
+  ) {
+    super(options);
+    Object.defineProperty(this, '_watchState', {
+      get() {
+        return watchState.value;
+      },
+      set(value: WatchState) {
+        watchState.next(value);
+      },
+    });
+  }
+
+  override onAdd(map: MapLibre): HTMLElement {
+    const container = this._container;
+    this._container = document.createElement('div');
+    this._map = map;
+    this._setupUI(true);
+    this._container = container;
+    return this._container;
+  }
+
+  override onRemove() {}
+}
+
+@Component({
+  selector: 'stapps-geolocate-control',
+  templateUrl: './geolocate-control.html',
+  styleUrl: './geolocate-control.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe, IonicModule, IonIconModule],
+})
+export class GeolocateControlComponent implements AfterContentInit, OnDestroy {
+  @Input() position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  @Input() positionOptions?: PositionOptions;
+
+  @Input() fitBoundsOptions?: FitBoundsOptions;
+
+  @Input() trackUserLocation?: boolean;
+
+  @Input() showUserLocation?: boolean;
+
+  @ViewChild('content', {static: true}) content: ElementRef;
+
+  watchState = new BehaviorSubject<WatchState>('OFF');
+
+  control: CustomGeolocateControl;
+
+  constructor(private mapService: MapService) {}
+
+  ngAfterContentInit() {
+    this.control = new CustomGeolocateControl(this.content.nativeElement, this.watchState, {
+      positionOptions: this.positionOptions,
+      fitBoundsOptions: this.fitBoundsOptions,
+      trackUserLocation: this.trackUserLocation,
+      showUserLocation: this.showUserLocation,
+    });
+    this.mapService.mapCreated$.subscribe(() => {
+      this.mapService.addControl(this.control, this.position);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.mapService.removeControl(this.control);
+  }
+}

frontend/app/src/app/modules/map/controls/geolocate-control.html

@@ -0,0 +1,18 @@
+<div #content class="maplibregl-ctrl">
+  <ion-fab-button color="light" (click)="control.trigger()">
+    @switch (watchState | async) {
+      @case ('ACTIVE_LOCK') {
+        <ion-icon name="my_location" color="primary"></ion-icon>
+      }
+      @case ('BACKGROUND') {
+        <ion-icon name="location_searching"></ion-icon>
+      }
+      @case ('WAITING_ACTIVE') {
+        <ion-icon name="location_searching"></ion-icon>
+      }
+      @default {
+        <ion-icon name="location_disabled"></ion-icon>
+      }
+    }
+  </ion-fab-button>
+</div>

frontend/app/src/app/modules/map/elements/building-markers.component.ts

@@ -0,0 +1,86 @@
+import {ChangeDetectionStrategy, Component, Input, Optional} from '@angular/core';
+import {GeoJSONSourceComponent, LayerComponent, MapService} from '@maplibre/ngx-maplibre-gl';
+import {FeatureCollection, Polygon} from 'geojson';
+import {SCFeatureProperties} from '../feature-collection.pipe';
+import {
+  FillLayerSpecification,
+  LineLayerSpecification,
+  MapLayerMouseEvent,
+  SymbolLayerSpecification,
+} from 'maplibre-gl';
+import {DataRoutingService} from '../../data/data-routing.service';
+import {MapDataProvider} from '../map-data.provider';
+import {fromEvent, map, startWith, Observable} from 'rxjs';
+import {AsyncPipe} from '@angular/common';
+
+/**
+ * Get a CCS variable value
+ */
+function getCssVariable(color: string) {
+  return getComputedStyle(document.documentElement).getPropertyValue(color);
+}
+
+@Component({
+  selector: 'stapps-building-markers',
+  templateUrl: './building-markers.html',
+  styleUrl: './building-markers.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [GeoJSONSourceComponent, LayerComponent, AsyncPipe],
+})
+export class BuildingMarkersComponent {
+  accentColor = getCssVariable('--ion-color-primary');
+
+  haloColor = fromEvent<MediaQueryListEvent>(
+    window.matchMedia('(prefers-color-scheme: dark)'),
+    'change',
+  ).pipe(
+    map(() => getCssVariable('--ion-background-color')),
+    startWith(getCssVariable('--ion-background-color')),
+  );
+
+  buildingPaint: LineLayerSpecification['paint'] = {
+    'line-color': this.accentColor,
+    'line-width': 2,
+  };
+
+  buildingFillPaint: FillLayerSpecification['paint'] = {
+    'fill-color': `${this.accentColor}22`,
+  };
+
+  buildingLabelLayout: SymbolLayerSpecification['layout'] = {
+    'text-field': '{name}',
+    'text-font': ['barlow-700-normal'],
+    'text-max-width': 8,
+    'text-size': 13,
+  };
+
+  buildingLabelPaint: Observable<SymbolLayerSpecification['paint']> = this.haloColor.pipe(
+    map(haloColor => ({
+      'text-color': this.accentColor,
+      'text-halo-color': haloColor,
+      'text-halo-width': 1,
+    })),
+  );
+
+  @Input({required: true}) data: FeatureCollection<Polygon, SCFeatureProperties>;
+
+  constructor(
+    @Optional() readonly dataProvider: MapDataProvider | null,
+    readonly dataRoutingService: DataRoutingService,
+    readonly mapService: MapService,
+  ) {}
+
+  async featureClick(event: MapLayerMouseEvent) {
+    if (this.dataProvider === null) return;
+
+    if (event.originalEvent.target !== event.target._canvas) return;
+    const feature = event.features?.[0];
+    if (!feature) return;
+
+    const item = this.dataProvider.current.value?.data.find(it => it.uid === feature.properties.uid);
+    if (item === undefined) return;
+
+    this.dataRoutingService.emitChildEvent(item);
+  }
+}

frontend/app/src/app/modules/map/elements/building-markers.html

@@ -0,0 +1,26 @@
+<mgl-geojson-source id="polygons" [data]="data"></mgl-geojson-source>
+<mgl-layer
+  id="stapps-building-fill"
+  type="fill"
+  source="polygons"
+  before="poi_label"
+  [paint]="buildingFillPaint"
+  (layerClick)="featureClick($event)"
+  (layerMouseEnter)="dataProvider !== null && mapService.changeCanvasCursor('pointer')"
+  (layerMouseLeave)="dataProvider !== null && mapService.changeCanvasCursor('grab')"
+></mgl-layer>
+<mgl-layer
+  id="stapps-building-outline"
+  type="line"
+  source="polygons"
+  before="poi_label"
+  [paint]="buildingPaint"
+></mgl-layer>
+<mgl-layer
+  id="stapps-building-label"
+  type="symbol"
+  source="polygons"
+  after="poi_label"
+  [paint]="(buildingLabelPaint | async) || {}"
+  [layout]="buildingLabelLayout"
+></mgl-layer>

frontend/app/src/app/modules/map/elements/poi-marker.component.ts

@@ -0,0 +1,43 @@
+import {ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, Optional} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+import {MapIconDirective} from '../map-icon.directive';
+import {Feature, Point} from 'geojson';
+import {SCFeatureProperties} from '../feature-collection.pipe';
+import {MapDataProvider} from '../map-data.provider';
+import {DataRoutingService} from '../../data/data-routing.service';
+import {AddWordBreakOpportunitiesPipe} from '../../../util/word-break-opportunities.pipe';
+
+@Component({
+  selector: 'stapps-poi-marker',
+  templateUrl: './poi-marker.html',
+  styleUrl: './poi-marker.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [IonicModule, IonIconModule, MapIconDirective, AddWordBreakOpportunitiesPipe],
+})
+export class PoiMarkerComponent implements OnInit {
+  @Input({required: true}) feature: Feature<Point, SCFeatureProperties>;
+
+  @HostBinding('disabled') disabled = this.dataProvider === null;
+
+  fontSize = 0;
+
+  constructor(
+    @Optional() readonly dataProvider: MapDataProvider | null,
+    readonly dataRoutingService: DataRoutingService,
+  ) {}
+
+  async featureClick() {
+    if (this.dataProvider === null) return;
+
+    const item = this.dataProvider.current.value?.data.find(it => it.uid === this.feature.properties.uid);
+    if (item === undefined) return;
+
+    this.dataRoutingService.emitChildEvent(item);
+  }
+
+  ngOnInit() {
+    this.fontSize = Math.max(10, 12 - Math.max(0, this.feature.properties.name.length - 16));
+  }
+}

frontend/app/src/app/modules/map/elements/poi-marker.html

@@ -0,0 +1,9 @@
+<ion-button shape="round" (click)="featureClick()">
+  <ion-icon
+    slot="start"
+    [size]="16"
+    [fill]="true"
+    [name]="feature.properties.category | stappsMapIcon"
+  ></ion-icon>
+  <ion-label>{{ feature.properties.name | addWordBreakOpportunities }}</ion-label>
+</ion-button>