feat: new color system

Closes #223

backend/backend/config/b-tu/elasticsearchrc.js

@@ -8,7 +8,8 @@ const config = {
     database: {
       name: 'elasticsearch',
       query: {
-        fields: ["name"]
+        minMatch: '60%',
+        queryType: 'query_string',
       },
     },
   },

backend/backend/config/default/backend/boostings.js

@@ -39,7 +39,7 @@ const boostings = {
       type: SCThingType.AcademicEvent,
     },
     {
-      factor: 2,
+      factor: 1.6,
       type: SCThingType.Building,
     },
     {
@@ -85,7 +85,7 @@ const boostings = {
   ],
   place: [
     {
-      factor: 3,
+      factor: 2,
       type: SCThingType.Building,
     },
     {

backend/backend/config/default/elasticsearchrc.js

@@ -17,21 +17,12 @@ const config = {
       name: 'elasticsearch',
       version: '8.4.2',
       query: {
-        type: 'best_fields',
-        fields: [
-          'identifiers^20',
-          'name^10',
-          'translations.*.name^10',
-          'alternateNames^10',
-          'translations.*.alternateNames^10',
-          'description^2',
-          'translations.*.description^2',
-          'categories^5',
-        ],
-      },
-      searchAsYouTypeQuery: {
-        type: 'phrase_prefix',
-        fields: ['name.completion', 'name.completion._2gram', 'name.completion._3gram'],
+        minMatch: '75%',
+        queryType: 'dis_max',
+        matchBoosting: 1.3,
+        fuzziness: 'AUTO',
+        cutoffFrequency: 0,
+        tieBreaker: 0,
       },
     },
   },

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

@@ -20,8 +20,6 @@ import {
   IndicesGetAliasResponse,
   SearchHit,
   SearchResponse,
-  SearchTermSuggest,
-  SearchTermSuggestOption,
 } from '@elastic/elasticsearch/lib/api/types.js';
 import {SCConfigFile, SCSearchQuery, SCSearchResponse, SCThings, SCUuid} from '@openstapps/core';
 import {Logger} from '@openstapps/logger';
@@ -49,9 +47,6 @@ import {
 import {noUndefined} from './util/no-undefined.js';
 import {retryCatch, RetryOptions} from './util/retry.js';
 import {Feature, Point, Polygon} from 'geojson';
-import {parseSuggestions} from './util/parse-suggestions.js';
-import {buildScoringFunctions} from './query/boost/scoring-functions.js';
-import {buildFilter} from './query/filter.js';
 
 /**
  * A database interface for elasticsearch
@@ -360,39 +355,6 @@ export class Elasticsearch implements Database {
     throw new Error('You tried to PUT an non-existing object. PUT is only supported on existing objects.');
   }
 
-  public async searchAsYouType(parameters: SCSearchQuery): Promise<SCSearchResponse> {
-    const result = await this.client.search({
-      _source: 'name',
-      query: {
-        function_score: {
-          functions: buildScoringFunctions(this.config.internal.boostings, parameters.context),
-          query: {
-            bool: {
-              must: {
-                multi_match: {
-                  query: parameters.query,
-                  type: 'bool_prefix',
-                  fields: ['name.completion', 'name.completion._2gram', 'name.completion._3gram'],
-                },
-              },
-              should: [],
-              filter: parameters.filter === undefined ? undefined : buildFilter(parameters.filter),
-            },
-          },
-          score_mode: 'max',
-          boost_mode: 'multiply',
-        },
-      },
-      index: ACTIVE_INDICES_ALIAS,
-      allow_no_indices: true,
-      size: 5,
-    });
-
-    const suggestions = result.hits.hits.map(it => (it._source as any).name);
-    console.log(suggestions);
-    console.log(result.took);
-  }
-
   /**
    * Search all indexed data
    * @param parameters search query
@@ -402,23 +364,18 @@ export class Elasticsearch implements Database {
       throw new TypeError('Database is undefined. You have to configure the query build');
     }
 
-    const esConfig = this.config.internal.database as object as ElasticsearchConfig;
+    const esConfig: ElasticsearchConfig = {
+      name: this.config.internal.database.name as 'elasticsearch',
+      version: this.config.internal.database.version as string,
+      query: this.config.internal.database.query as
+        | ElasticsearchQueryDisMaxConfig
+        | ElasticsearchQueryQueryStringConfig
+        | undefined,
+    };
 
     const response: SearchResponse<SCThings> = await this.client.search({
       aggs: aggregations,
       query: buildQuery(parameters, this.config, esConfig),
-      suggest:
-        parameters.query === undefined
-          ? undefined
-          : {
-              text: parameters.query,
-              terms: {
-                term: {
-                  field: 'name',
-                  suggest_mode: 'missing',
-                },
-              },
-            },
       from: parameters.from,
       index: ACTIVE_INDICES_ALIAS,
       allow_no_indices: true,
@@ -438,7 +395,6 @@ export class Elasticsearch implements Database {
         response.aggregations === undefined
           ? []
           : parseAggregations(response.aggregations as Record<AggregateName, AggregationsMultiTermsBucket>),
-      suggestions: response.suggest === undefined ? undefined : parseSuggestions(response.suggest),
       pagination: {
         count: response.hits.hits.length,
         offset: typeof parameters.from === 'number' ? parameters.from : 0,

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

@@ -30,21 +30,84 @@ export const buildQuery = function buildQuery(
   defaultConfig: SCConfigFile,
   elasticsearchConfig: ElasticsearchConfig,
 ): QueryDslQueryContainer {
-  return {
+  // if config provides a minMatch parameter, we use query_string instead of a match query
+  let query;
+  if (elasticsearchConfig.query === undefined) {
+    query = {
+      query_string: {
+        analyzer: 'search_german',
+        default_field: 'name',
+        minimum_should_match: '90%',
+        query: typeof parameters.query === 'string' ? parameters.query : '*',
+      },
+    };
+  } else if (elasticsearchConfig.query.queryType === 'query_string') {
+    query = {
+      query_string: {
+        analyzer: 'search_german',
+        default_field: 'name',
+        minimum_should_match: elasticsearchConfig.query.minMatch,
+        query: typeof parameters.query === 'string' ? parameters.query : '*',
+      },
+    };
+  } else if (elasticsearchConfig.query.queryType === 'dis_max') {
+    if (typeof parameters.query === 'string' && parameters.query !== '*') {
+      query = {
+        dis_max: {
+          boost: 1.2,
+          queries: [
+            {
+              match: {
+                name: {
+                  boost: elasticsearchConfig.query.matchBoosting,
+                  fuzziness: elasticsearchConfig.query.fuzziness,
+                  query: parameters.query,
+                },
+              },
+            },
+            {
+              query_string: {
+                default_field: 'name',
+                minimum_should_match: elasticsearchConfig.query.minMatch,
+                query: parameters.query,
+              },
+            },
+          ],
+          tie_breaker: elasticsearchConfig.query.tieBreaker,
+        },
+      };
+    }
+  } else {
+    throw new Error(
+      'Unsupported query type. Check your config file and reconfigure your elasticsearch query',
+    );
+  }
+
+  const functionScoreQuery: QueryDslQueryContainer = {
     function_score: {
       functions: buildScoringFunctions(defaultConfig.internal.boostings, parameters.context),
       query: {
         bool: {
-          must:
-            parameters.query === undefined || parameters.query === '' || parameters.query === '*'
-              ? {match_all: {}}
-              : {multi_match: {...elasticsearchConfig.query, query: parameters.query}},
+          minimum_should_match: 0, // if we have no should, nothing can match
+          must: [],
           should: [],
-          filter: parameters.filter === undefined ? undefined : buildFilter(parameters.filter),
         },
       },
-      score_mode: 'max',
-      boost_mode: 'multiply',
+      score_mode: 'multiply',
     },
   };
+
+  const mustMatch = functionScoreQuery.function_score?.query?.bool?.must;
+
+  if (Array.isArray(mustMatch)) {
+    if (query !== undefined) {
+      mustMatch.push(query);
+    }
+
+    if (parameters.filter !== undefined) {
+      mustMatch.push(buildFilter(parameters.filter));
+    }
+  }
+
+  return functionScoreQuery;
 };

backend/backend/src/storage/elasticsearch/types/elasticsearch-config.ts

@@ -13,7 +13,68 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QueryDslMultiMatchQuery} from '@elastic/elasticsearch/lib/api/types.js';
+/**
+ * A configuration for using the Dis Max Query
+ *
+ * See https://www.elastic.co/guide/en/elasticsearch/reference/5.5/query-dsl-dis-max-query.html for further
+ * explanation of what the parameters mean
+ */
+export interface ElasticsearchQueryDisMaxConfig {
+  /**
+   * Relative (to a total number of documents) or absolute number to exclude meaningless matches that frequently appear
+   */
+  cutoffFrequency: number;
+
+  /**
+   * The maximum allowed Levenshtein Edit Distance (or number of edits)
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/common-options.html#fuzziness
+   */
+  fuzziness: number | string;
+
+  /**
+   * Increase the importance (relevance score) of a field
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/mapping-boost.html
+   */
+  matchBoosting: number;
+
+  /**
+   * Minimal number (or percentage) of words that should match in a query
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-minimum-should-match.html
+   */
+  minMatch: string;
+
+  /**
+   * Type of the query - in this case 'dis_max' which is a union of its subqueries
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-dis-max-query.html
+   */
+  queryType: 'dis_max';
+
+  /**
+   * Changes behavior of default calculation of the score when multiple results match
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-multi-match-query.html#tie-breaker
+   */
+  tieBreaker: number;
+}
+
+/**
+ * A configuration for using Query String Query
+ *
+ * See https://www.elastic.co/guide/en/elasticsearch/reference/5.5/query-dsl-query-string-query.html for further
+ * explanation of what the parameters mean
+ */
+export interface ElasticsearchQueryQueryStringConfig {
+  /**
+   * Minimal number (or percentage) of words that should match in a query
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-minimum-should-match.html
+   */
+  minMatch: string;
+
+  /**
+   * Type of the query - in this case 'query_string' which uses a query parser in order to parse content
+   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-query-string-query.html
+   */
+  queryType: 'query_string';
+}
 
 /**
  * An config file for the elasticsearch database interface
@@ -44,12 +105,7 @@ export interface ElasticsearchConfig {
   /**
    * Configuration for using queries
    */
-  query: Omit<QueryDslMultiMatchQuery, 'query'>;
-
-  /**
-   *
-   */
-  searchAsYouTypeQuery: Omit<QueryDslMultiMatchQuery, 'query'>;
+  query?: ElasticsearchQueryDisMaxConfig | ElasticsearchQueryQueryStringConfig;
 
   /**
    * Version of the used elasticsearch

backend/backend/src/storage/elasticsearch/util/parse-suggestions.ts

@@ -1,28 +0,0 @@
-import {
-  SearchSuggest,
-  SearchTermSuggest,
-  SearchTermSuggestOption,
-  SuggestionName,
-} from '@elastic/elasticsearch/lib/api/types.js';
-import {SCSearchSuggestions} from '@openstapps/core';
-
-/**
- * Parse ES Suggestions to SC Search Suggestions
- */
-export function parseSuggestions(suggest: Record<SuggestionName, SearchSuggest[]>): SCSearchSuggestions {
-  const termsSuggestions =
-    suggest.terms === undefined
-      ? []
-      : (suggest.terms as SearchTermSuggest[])
-          ?.map(
-            ({text, options}) =>
-              [
-                text,
-                (options as SearchTermSuggestOption[] | undefined)?.map(({text}) => text) ?? [],
-              ] as const,
-          )
-          .filter(([, suggestions]) => suggestions.length > 0) ?? [];
-  return {
-    terms: termsSuggestions.length === 0 ? undefined : Object.fromEntries(termsSuggestions),
-  };
-}

flake.nix

@@ -4,68 +4,86 @@
     nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
     flake-utils.url = "github:numtide/flake-utils";
   };
-  outputs = {
-    self,
-    nixpkgs,
-    flake-utils,
-  }: let
-    aapt2buildToolsVersion = "33.0.2";
-  in
-    flake-utils.lib.eachDefaultSystem (system: let
-      pkgs = import nixpkgs {
-        inherit system;
-        overlays = [
-          (final: prev: rec {
-            fontMin = prev.python311.withPackages (ps: with ps; [brotli 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 {
-                url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
-                hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
+  outputs =
+    {
+      self,
+      nixpkgs,
+      flake-utils,
+    }:
+    let
+      aapt2buildToolsVersion = "33.0.2";
+    in
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+          overlays = [
+            (final: prev: rec {
+              fontMin = prev.python311.withPackages (
+                ps:
+                with ps;
+                [
+                  brotli
+                  fonttools
+                ]
+                ++ (with fonttools.optional-dependencies; [ woff ])
+              );
+              android = prev.androidenv.composeAndroidPackages {
+                buildToolsVersions = [
+                  "34.0.0"
+                  aapt2buildToolsVersion
+                ];
+                platformVersions = [ "34" ];
               };
-            });
-            nodejs = prev.nodejs_18;
-          })
-        ];
-        config = {
-          allowUnfree = true;
-          android_sdk.accept_license = true;
+              cypress = prev.cypress.overrideAttrs (cyPrev: rec {
+                version = "13.2.0";
+                src = prev.fetchzip {
+                  url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
+                  hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
+                };
+              });
+              nodejs = prev.nodejs_18;
+              corepack = prev.corepack_18;
+            })
+          ];
+          config = {
+            allowUnfree = true;
+            android_sdk.accept_license = true;
+          };
         };
-      };
-      androidFhs = pkgs.buildFHSUserEnv {
-        name = "android-env";
-        targetPkgs = pkgs: with pkgs; [];
-        runScript = "bash";
-        profile = ''
-          export ALLOW_NINJA_ENV=true
-          export USE_CCACHE=1
-          export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
-        '';
-      };
-    in {
-      devShell = pkgs.mkShell rec {
-        nativeBuildInputs = [androidFhs];
-        buildInputs = with pkgs; [
-          nodejs
-          corepack
-          # tools
-          curl
-          jq
-          fontMin
-          cypress
-          # android
-          jdk17
-          android.androidsdk
-        ];
-        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";
-      };
-    });
+        androidFhs = pkgs.buildFHSUserEnv {
+          name = "android-env";
+          targetPkgs = pkgs: with pkgs; [ ];
+          runScript = "bash";
+          profile = ''
+            export ALLOW_NINJA_ENV=true
+            export USE_CCACHE=1
+            export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
+          '';
+        };
+      in
+      {
+        devShell = pkgs.mkShell rec {
+          nativeBuildInputs = [ androidFhs ];
+          buildInputs = with pkgs; [
+            nodejs
+            corepack
+            # tools
+            curl
+            jq
+            fontMin
+            cypress
+            # android
+            jdk17
+            android.androidsdk
+          ];
+          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/package.json

@@ -82,6 +82,7 @@
     "@ionic/angular": "7.8.0",
     "@ionic/storage-angular": "4.0.0",
     "@maplibre/ngx-maplibre-gl": "17.4.1",
+    "@material/material-color-utilities": "0.3.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.1",

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

@@ -71,6 +71,7 @@ import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
 import maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
+import {ThemeProvider} from './util/theme.provider';
 
 registerLocaleData(localeDe);
 
@@ -89,6 +90,7 @@ export function initializerFactory(
   defaultAuthService: DefaultAuthService,
   paiaAuthService: PAIAAuthService,
   dateFnsConfigurationService: DateFnsConfigurationService,
+  _themeProvider: ThemeProvider,
 ) {
   return async () => {
     try {
@@ -213,6 +215,7 @@ export function createTranslateLoader(http: HttpClient) {
         DefaultAuthService,
         PAIAAuthService,
         DateFnsConfigurationService,
+        ThemeProvider,
       ],
       useFactory: initializerFactory,
     },

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

@@ -67,7 +67,8 @@ describe('ConfigProvider', () => {
 
   it('should fetch app configuration', async () => {
     spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(sampleIndexResponse));
-    const result = await configProvider.fetch();
+    await configProvider.fetch();
+    const result = configProvider.config;
     expect(result).toEqual(sampleIndexResponse);
   });
 
@@ -110,7 +111,7 @@ describe('ConfigProvider', () => {
     expect(storageProviderSpy.has).toHaveBeenCalled();
     expect(storageProviderSpy.get).toHaveBeenCalledTimes(0);
     expect(configProvider.client.handshake).toHaveBeenCalled();
-    expect(await configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
+    expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
   });
 
   it('should throw error on failed initialisation', async () => {
@@ -192,4 +193,31 @@ describe('ConfigProvider', () => {
 
     expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
   });
+
+  it('should fetch new config from remote on init', async () => {
+    storageProviderSpy.has.and.returnValue(Promise.resolve(true));
+    storageProviderSpy.get.and.returnValue(Promise.resolve(sampleIndexResponse));
+    spyOn(configProvider, 'fetch');
+    await configProvider.init();
+
+    expect(configProvider.fetch).toHaveBeenCalled();
+  });
+
+  it('should update the local config with the one from remote', async () => {
+    storageProviderSpy.has.and.returnValue(Promise.resolve(true));
+    storageProviderSpy.get.and.returnValue(Promise.resolve(sampleIndexResponse));
+    const newConfig = structuredClone(sampleIndexResponse);
+    newConfig.app.name = 'New app name';
+    spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(newConfig));
+    await configProvider.init();
+
+    // Validate that the initial configuration is loaded
+    expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
+
+    // Fetch the new configuration from the remote
+    await configProvider.fetch();
+
+    // Validate that the new configuration is now set
+    expect(configProvider.getValue('name')).toEqual(newConfig.app.name);
+  });
 });

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

@@ -83,17 +83,20 @@ export class ConfigProvider {
   /**
    * Fetches configuration from backend
    */
-  async fetch(): Promise<SCIndexResponse> {
+  async fetch(): Promise<void> {
     try {
       const isOffline = await firstValueFrom(this.internetConnectionService.offline$);
       if (isOffline) {
         throw new Error('Device is offline.');
       } else {
-        return await this.client.handshake(this.scVersion);
+        const fetchedConfig: SCIndexResponse = await this.client.handshake(this.scVersion);
+        await this.set(fetchedConfig);
+        this.logger.log(`Configuration updated from remote`);
       }
     } catch (error) {
       const error_ = error instanceof Error ? new ConfigFetchError(error.message) : new ConfigFetchError();
-      throw error_;
+      this.logger.warn(`Failed to fetch remote configuration:`, error_);
+      throw error_; // Rethrow the error to handle it in init()
     }
   }
 
@@ -121,40 +124,33 @@ export class ConfigProvider {
 
   /**
    * Initialises the ConfigProvider
-   * @throws ConfigInitError if no configuration could be loaded.
-   * @throws WrongConfigVersionInStorage if fetch failed and saved config has wrong SCVersion
+   * @throws ConfigInitError if no configuration could be loaded both locally and remote.
    */
   async init(): Promise<void> {
-    let loadError;
-    let fetchError;
-    // load saved configuration
     try {
+      // Attempt to load the configuration from local storage
       this.config = await this.loadLocal();
       this.firstSession = false;
       this.logger.log(`initialised configuration from storage`);
+
+      // Check if the stored configuration has the correct version
       if (this.config.backend.SCVersion.split('.')[0] !== this.scVersion.split('.')[0]) {
-        loadError = new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
+        throw new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
       }
-    } catch (error) {
-      loadError = error;
-    }
-    // fetch remote configuration from backend
-    try {
-      const fetchedConfig: SCIndexResponse = await this.fetch();
-      await this.set(fetchedConfig);
-      this.logger.log(`initialised configuration from remote`);
-    } catch (error) {
-      fetchError = error;
-    }
-    // check for occurred errors and throw them
-    if (loadError !== undefined && fetchError !== undefined) {
-      throw new ConfigInitError();
-    }
-    if (loadError !== undefined) {
+
+      // Fetch the remote configuration in a non-blocking manner
+      void this.fetch();
+    } catch (loadError) {
       this.logger.warn(loadError);
-    }
-    if (fetchError !== undefined) {
-      this.logger.warn(fetchError);
+
+      try {
+        // If local loading fails, immediately try to fetch the configuration from remote
+        await this.fetch();
+      } catch (fetchError) {
+        this.logger.warn(`Failed to fetch remote configuration:`, fetchError);
+        // If both local loading and remote fetching fail, throw ConfigInitError
+        throw new ConfigInitError();
+      }
     }
   }
 

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

@@ -24,7 +24,6 @@ import {
   SCSearchQuery,
   SCSearchSort,
   SCThings,
-  SCSearchSuggestions,
 } from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import {combineLatest, Subject} from 'rxjs';
@@ -111,8 +110,6 @@ export class SearchPageComponent implements OnInit {
    */
   items: Promise<SCThings[]>;
 
-  suggestions: SCSearchSuggestions | undefined;
-
   /**
    * Page size of queries
    */
@@ -222,7 +219,6 @@ export class SearchPageComponent implements OnInit {
 
     try {
       const result = await this.dataProvider.search(searchOptions);
-      this.suggestions = result.suggestions;
       this.singleTypeResponse = result.facets.find(facet => facet.field === 'type')?.buckets.length === 1;
       if (append) {
         // append results
@@ -287,12 +283,6 @@ export class SearchPageComponent implements OnInit {
     this.contextMenuService.updateContextFilter(facets);
   }
 
-  applySuggestion(target: string, suggestion: string) {
-    this.queryText = this.queryText.replaceAll(target, suggestion);
-    this.suggestions = undefined;
-    this.searchStringChanged(this.queryText);
-  }
-
   ngOnInit(defaultListeners = true) {
     this.initialize();
     this.contextMenuService.setContextSort({

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

@@ -69,23 +69,7 @@
 </ion-header>
 
 <ion-content class="content">
-  <div class="suggestions">
-    @if (suggestions?.terms; as terms) {
-      <span>{{ 'search.SUGGESTIONS' | translate }}: </span>
-      @for (suggestion of terms | keyvalue; track suggestion) {
-        @for (term of suggestion.value; track term) {
-          @if ($index == 0) {
-            <b (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</b>
-          } @else {
-            <span (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</span>
-          }
-        }
-      }
-    }
-  </div>
-
   <div
-    class="hint"
     [class.no-results]="!showDefaultData && !items && !loading"
     [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
   >

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

@@ -46,7 +46,7 @@ ion-content {
   --background: var(--ion-background-color);
 }
 
-.content > .hint {
+.content > div {
   height: 100%;
 
   ion-label.centered-message-container {
@@ -60,19 +60,3 @@ ion-content {
 ion-header {
   background: var(--ion-color-primary);
 }
-
-.suggestions {
-  padding: var(--spacing-md);
-  padding-block-end: 0;
-}
-
-.suggestion {
-  cursor: pointer;
-}
-
-.suggestion + .suggestion::before {
-  cursor: text;
-  content: ',';
-  padding-inline-end: 0.25ch;
-  font-weight: normal;
-}

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

@@ -80,13 +80,12 @@
         </ion-item>
         <ion-item>
           <ion-checkbox
-            class="ion-text-wrap"
             color="primary"
             label-placement="end"
             justify="start"
             [(ngModel)]="termsAgree"
             name="termsAgree"
-            >{{ 'feedback.form.termsAgree.0' | translate }}</ion-checkbox
+            ><span class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }}</span></ion-checkbox
           >
         </ion-item>
         <ion-item lines="none">
@@ -104,7 +103,9 @@
             justify="start"
             [(ngModel)]="protocolDataAgree"
             name="protocolDataAgree"
-            >{{ 'feedback.form.protocolDataAgree' | translate }}</ion-checkbox
+            ><span class="ion-text-wrap">{{
+              'feedback.form.protocolDataAgree' | translate
+            }}</span></ion-checkbox
           >
         </ion-item>
         <ion-card>

frontend/app/src/app/util/media-query.pipe.ts

@@ -1,6 +1,7 @@
 import {PipeTransform} from '@angular/core';
 import {Pipe} from '@angular/core';
-import {Observable, fromEvent, map, startWith} from 'rxjs';
+import {Observable} from 'rxjs';
+import {fromMediaQuery} from './rxjs/from-media-query';
 
 @Pipe({
   name: 'mediaQuery',
@@ -9,10 +10,6 @@ import {Observable, fromEvent, map, startWith} from 'rxjs';
 })
 export class MediaQueryPipe implements PipeTransform {
   transform(query: string): Observable<boolean> {
-    const match = window.matchMedia(query);
-    return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
-      map(event => event.matches),
-      startWith(match.matches),
-    );
+    return fromMediaQuery(query);
   }
 }

frontend/app/src/app/util/rxjs/from-media-query.ts

@@ -0,0 +1,38 @@
+import {Observable, combineLatest, defer, distinctUntilChanged, fromEvent, map, startWith} from 'rxjs';
+
+/**
+ * Lazily creates an Observable that emits whether the given media query matches.
+ * @example
+ * fromMediaQuery('(prefers-color-scheme: dark)').subscribe(matches => console.log(matches))
+ */
+export function fromMediaQuery(query: string): Observable<boolean> {
+  return defer(() => {
+    const match = window.matchMedia(query);
+    return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
+      map(event => event.matches),
+      startWith(match.matches),
+    );
+  });
+}
+
+/**
+ * Like `fromMediaQuery`, but combines multiple matches.
+ * Since the list of values may not be exhaustive, the result can be `undefined`
+ * @example
+ * fromMediaQueryValues('prefers-color-scheme', ['dark', 'light']).subscribe(value => console.log(value))
+ */
+export function fromMediaQueryValues<T extends string>(
+  property: string,
+  values: T[],
+): Observable<T | undefined> {
+  return defer(() =>
+    combineLatest(
+      values.map(value =>
+        fromMediaQuery(`(${property}: ${value})`).pipe(map(matches => [value, matches] as const)),
+      ),
+    ).pipe(
+      map(matches => matches.find(([, matches]) => matches)?.[0]),
+      distinctUntilChanged(),
+    ),
+  );
+}

frontend/app/src/app/util/theme-ionic-utils.ts

@@ -0,0 +1,288 @@
+import {Hct, argbFromHex, hexFromArgb} from '@material/material-color-utilities';
+import {
+  IonTheme,
+  IonThemeColorDarkLight,
+  IonThemeOptions,
+  ThemeCustomColor,
+  ThemeCustomColorOptions,
+} from './theme-types';
+import {dynamicScheme, makeCustomColor} from './theme-utils';
+
+/**
+ * Turn a custom material color to a color that can be used in Ionic
+ */
+export function ionColorFromCustomColor(color: ThemeCustomColor): IonThemeColorDarkLight {
+  return {
+    palette: color.palette,
+    light: {
+      color: color.light.color,
+      colorContrast: color.light.onColor,
+      colorShade: color.fixed.dim,
+      colorTint: color.fixed.color,
+    },
+    dark: {
+      color: color.dark.color,
+      colorContrast: color.dark.onColor,
+      colorShade: color.fixed.dim,
+      colorTint: color.fixed.color,
+    },
+  };
+}
+
+/**
+ * Create an Ionic theme
+ */
+export function makeIonicTheme(options: IonThemeOptions): IonTheme {
+  const light = dynamicScheme(
+    options.variant,
+    Hct.fromInt(options.sourceColor),
+    false,
+    options.contrastLevel,
+  );
+  const dark = dynamicScheme(options.variant, Hct.fromInt(options.sourceColor), true, options.contrastLevel);
+  const customColorOptions: Omit<ThemeCustomColorOptions, 'color'> = {
+    blend: true,
+    sourceColor: options.sourceColor,
+    variant: options.variant,
+    contrastLevel: options.contrastLevel,
+  };
+
+  return {
+    success: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#00ff00'), ...customColorOptions})),
+    warning: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ffdd00'), ...customColorOptions})),
+    danger: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ff4444'), ...customColorOptions})),
+    primary: {
+      palette: light.primaryPalette,
+      light: {
+        color: light.primary,
+        colorContrast: light.onPrimary,
+        colorShade: light.primaryFixedDim,
+        colorTint: light.primaryFixed,
+      },
+      dark: {
+        color: dark.primary,
+        colorContrast: dark.onPrimary,
+        colorShade: dark.primaryFixedDim,
+        colorTint: dark.primaryFixed,
+      },
+    },
+    secondary: {
+      palette: light.secondaryPalette,
+      light: {
+        color: light.secondary,
+        colorContrast: light.onSecondary,
+        colorShade: light.secondaryFixedDim,
+        colorTint: light.secondaryFixed,
+      },
+      dark: {
+        color: dark.secondary,
+        colorContrast: dark.onSecondary,
+        colorShade: dark.secondaryFixedDim,
+        colorTint: dark.secondaryFixed,
+      },
+    },
+    tertiary: {
+      palette: light.tertiaryPalette,
+      light: {
+        color: light.tertiary,
+        colorContrast: light.onTertiary,
+        colorShade: light.tertiaryFixedDim,
+        colorTint: light.tertiaryFixed,
+      },
+      dark: {
+        color: dark.tertiary,
+        colorContrast: dark.onTertiary,
+        colorShade: dark.tertiaryFixedDim,
+        colorTint: dark.tertiaryFixed,
+      },
+    },
+    light: {
+      palette: light.neutralPalette,
+      light: {
+        color: light.neutralPalette.tone(90),
+        colorContrast: light.onSurface,
+        colorShade: light.neutralPalette.tone(85),
+        colorTint: light.neutralPalette.tone(95),
+      },
+      dark: {
+        color: dark.surfaceContainerLowest,
+        colorContrast: dark.onSurface,
+        // TODO: find a better color for these
+        colorShade: dark.surfaceBright,
+        colorTint: dark.surfaceBright,
+      },
+    },
+    medium: {
+      palette: light.neutralVariantPalette,
+      light: {
+        color: light.neutralPalette.tone(50),
+        colorContrast: light.onSurfaceVariant,
+        colorShade: light.neutralPalette.tone(45),
+        colorTint: light.neutralPalette.tone(55),
+      },
+      dark: {
+        color: dark.surfaceVariant,
+        colorContrast: dark.onSurfaceVariant,
+        // TODO: find a better color for these
+        colorShade: dark.surfaceContainerLow,
+        colorTint: dark.surfaceContainerHigh,
+      },
+    },
+    dark: {
+      palette: light.neutralPalette,
+      light: {
+        color: light.surfaceContainerHigh,
+        colorContrast: light.onSurface,
+        colorShade: light.surfaceContainerHighest,
+        colorTint: light.surfaceContainer,
+      },
+      dark: {
+        color: dark.surfaceContainerHighest,
+        colorContrast: dark.onSurface,
+        // TODO: find a better color for these
+        colorShade: dark.surfaceDim,
+        colorTint: dark.surfaceDim,
+      },
+    },
+    background: {
+      palette: light.neutralPalette,
+      light: {
+        backgroundColor: light.background,
+        textColor: light.onBackground,
+        boxShadowColor: light.shadow,
+        placeholderColor: light.onSurfaceVariant,
+      },
+      dark: {
+        backgroundColor: dark.background,
+        textColor: dark.onBackground,
+        boxShadowColor: dark.shadow,
+        placeholderColor: dark.onSurfaceVariant,
+      },
+    },
+    item: {
+      palette: light.neutralPalette,
+      light: {
+        itemBackground: light.surface,
+        itemColor: light.onSurface,
+        cardBackground: light.surfaceContainer,
+        itemBorderColor: light.outline,
+        borderColor: light.outline,
+      },
+      dark: {
+        itemBackground: dark.surface,
+        itemColor: dark.onSurface,
+        cardBackground: dark.surfaceContainer,
+        itemBorderColor: dark.outline,
+        borderColor: dark.outline,
+      },
+    },
+  };
+}
+
+/**
+ * Simple color
+ */
+function color(element: HTMLElement, name: string, argb: number) {
+  element.style.setProperty(name, hexFromArgb(argb));
+}
+
+/**
+ * Color, in RGB
+ */
+function colorRgb(element: HTMLElement, name: string, argb: number) {
+  element.style.setProperty(name, `${(argb >> 16) & 0xff}, ${(argb >> 8) & 0xff}, ${argb & 0xff}`);
+}
+
+/**
+ * Apply the Ionic color to an element
+ */
+export function applyIonicAccentColor(
+  element: HTMLElement,
+  name: string,
+  colors: IonThemeColorDarkLight,
+  dark: boolean,
+) {
+  const operations = [
+    ['', dark ? colors.dark : colors.light],
+    ['-dark', colors.dark],
+    ['-light', colors.light],
+  ] as const;
+
+  for (const [suffix, colors] of operations) {
+    color(element, `--ion-color-${name}${suffix}`, colors.color);
+    color(element, `--ion-color-${name}-contrast${suffix}`, colors.colorContrast);
+    color(element, `--ion-color-${name}-shade${suffix}`, colors.colorShade);
+    color(element, `--ion-color-${name}-tint${suffix}`, colors.colorTint);
+
+    colorRgb(element, `--ion-color-${name}-rgb${suffix}`, colors.color);
+    colorRgb(element, `--ion-color-${name}-contrast-rgb${suffix}`, colors.colorContrast);
+    colorRgb(element, `--ion-color-${name}-shade-rgb${suffix}`, colors.colorShade);
+    colorRgb(element, `--ion-color-${name}-tint-rgb${suffix}`, colors.colorTint);
+  }
+}
+
+/**
+ * Apply the theme
+ */
+export function applyIonicTheme(element: HTMLElement, theme: IonTheme, dark: boolean) {
+  applyIonicAccentColor(element, 'primary', theme.primary, dark);
+  applyIonicAccentColor(element, 'secondary', theme.secondary, dark);
+  applyIonicAccentColor(element, 'tertiary', theme.tertiary, dark);
+  applyIonicAccentColor(element, 'success', theme.success, dark);
+  applyIonicAccentColor(element, 'warning', theme.warning, dark);
+  applyIonicAccentColor(element, 'danger', theme.danger, dark);
+  applyIonicAccentColor(element, 'dark', theme.dark, dark);
+  applyIonicAccentColor(element, 'medium', theme.medium, dark);
+  applyIonicAccentColor(element, 'light', theme.light, dark);
+
+  const backgroundOps = [
+    ['', dark ? theme.background.dark : theme.background.light],
+    ['-dark', theme.background.dark],
+    ['-light', theme.background.light],
+  ] as const;
+
+  for (const [suffix, background] of backgroundOps) {
+    color(element, `--ion-background-color${suffix}`, background.backgroundColor);
+    color(element, `--ion-text-color${suffix}`, background.textColor);
+    color(element, `--ion-box-shadow-color${suffix}`, background.boxShadowColor);
+    color(element, `--ion-placeholder-color${suffix}`, background.placeholderColor);
+
+    colorRgb(element, `--ion-background-color-rgb${suffix}`, background.backgroundColor);
+    colorRgb(element, `--ion-text-color-rgb${suffix}`, background.textColor);
+    colorRgb(element, `--ion-box-shadow-color-rgb${suffix}`, background.boxShadowColor);
+    colorRgb(element, `--ion-placeholder-color-rgb${suffix}`, background.placeholderColor);
+  }
+
+  const stepOps = [
+    ['', dark ? true : false],
+    ['-dark', true],
+    ['-light', false],
+  ] as const;
+
+  for (const [suffix, reverse] of stepOps) {
+    for (let i = 5; i < 100; i += 5) {
+      const ionicTone = 10 * (reverse ? 100 - i : i);
+      color(element, `--ion-color-step-${ionicTone}${suffix}`, theme.background.palette.tone(i));
+    }
+  }
+
+  const itemOps = [
+    ['', dark ? theme.item.dark : theme.item.light],
+    ['-dark', theme.item.dark],
+    ['-light', theme.item.light],
+  ] as const;
+
+  for (const [suffix, item] of itemOps) {
+    color(element, `--ion-item-background${suffix}`, item.itemBackground);
+    color(element, `--ion-card-background${suffix}`, item.cardBackground);
+    color(element, `--ion-item-border-color${suffix}`, item.itemBorderColor);
+    color(element, `--ion-border-color${suffix}`, item.borderColor);
+    color(element, `--ion-item-color${suffix}`, item.itemColor);
+
+    colorRgb(element, `--ion-item-background-rgb${suffix}`, item.itemBackground);
+    colorRgb(element, `--ion-card-background-rgb${suffix}`, item.cardBackground);
+    colorRgb(element, `--ion-item-border-color-rgb${suffix}`, item.itemBorderColor);
+    colorRgb(element, `--ion-border-color-rgb${suffix}`, item.borderColor);
+    colorRgb(element, `--ion-item-color-rgb${suffix}`, item.itemColor);
+  }
+}

frontend/app/src/app/util/theme-types.ts

@@ -0,0 +1,109 @@
+import {TonalPalette} from '@material/material-color-utilities';
+
+export const THEME_VARIANTS = [
+  'content',
+  'neutral',
+  'rainbow',
+  'vibrant',
+  'fidelity',
+  'expressive',
+  'monochrome',
+  'tonal-spot',
+  'fruit-salad',
+] as const;
+export type ThemeVariant = (typeof THEME_VARIANTS)[number];
+
+export interface ThemeCustomColorOptions {
+  color: number;
+  blend: boolean;
+  sourceColor: number;
+  variant: ThemeVariant;
+  contrastLevel: number;
+}
+
+export interface ThemeColorNormal {
+  color: number;
+  onColor: number;
+  container: number;
+  onContainer: number;
+}
+
+/**
+ * Palette that can be used in both light and dark mode.
+ * Caution: check contrast level before using
+ * @see https://m3.material.io/styles/color/roles#26b6a882-064d-4668-b096-c51142477850
+ */
+export interface ThemeColorFixed {
+  color: number;
+  onColor: number;
+  /**
+   * Lower emphasis against fixed color
+   */
+  onVariant: number;
+  dim: number;
+}
+
+export interface ThemeCustomColor {
+  color: number;
+  source: number;
+  palette: TonalPalette;
+  light: ThemeColorNormal;
+  dark: ThemeColorNormal;
+  fixed: ThemeColorFixed;
+}
+
+export interface IonThemeOptions {
+  sourceColor: number;
+  contrastLevel: number;
+  variant: ThemeVariant;
+}
+
+export interface IonThemeColor {
+  color: number;
+  colorContrast: number;
+  colorShade: number;
+  colorTint: number;
+}
+
+export interface IonThemeColorDarkLight {
+  palette: TonalPalette;
+  dark: IonThemeColor;
+  light: IonThemeColor;
+}
+
+export interface IonThemeBackground {
+  backgroundColor: number;
+  textColor: number;
+  boxShadowColor: number;
+  placeholderColor: number;
+}
+
+export interface IonThemeItem {
+  itemBackground: number;
+  cardBackground: number;
+  itemBorderColor: number;
+  borderColor: number;
+  itemColor: number;
+}
+
+export interface IonTheme {
+  primary: IonThemeColorDarkLight;
+  secondary: IonThemeColorDarkLight;
+  tertiary: IonThemeColorDarkLight;
+  success: IonThemeColorDarkLight;
+  warning: IonThemeColorDarkLight;
+  danger: IonThemeColorDarkLight;
+  dark: IonThemeColorDarkLight;
+  medium: IonThemeColorDarkLight;
+  light: IonThemeColorDarkLight;
+  background: {
+    palette: TonalPalette;
+    light: IonThemeBackground;
+    dark: IonThemeBackground;
+  };
+  item: {
+    palette: TonalPalette;
+    light: IonThemeItem;
+    dark: IonThemeItem;
+  };
+}

frontend/app/src/app/util/theme-utils.ts

@@ -0,0 +1,93 @@
+import {
+  Blend,
+  Hct,
+  SchemeContent,
+  SchemeExpressive,
+  SchemeFidelity,
+  SchemeFruitSalad,
+  SchemeMonochrome,
+  SchemeNeutral,
+  SchemeRainbow,
+  SchemeTonalSpot,
+  SchemeVibrant,
+} from '@material/material-color-utilities';
+import {ThemeCustomColor, ThemeCustomColorOptions, ThemeVariant} from './theme-types';
+
+export const DEFAULT_CONTRAST = 0;
+export const GLOBAL_CONTRAST = {
+  'more': 4,
+  'less': 0,
+  'no-preference': 0,
+};
+
+/**
+ * Creates a DynamicScheme based on the variant.
+ */
+export function dynamicScheme(
+  variant: ThemeVariant,
+  sourceColorHct: Hct,
+  isDark: boolean,
+  contrastLevel: number,
+) {
+  switch (variant) {
+    case 'content': {
+      return new SchemeContent(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'neutral': {
+      return new SchemeNeutral(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'rainbow': {
+      return new SchemeRainbow(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'vibrant': {
+      return new SchemeVibrant(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'fidelity': {
+      return new SchemeFidelity(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'expressive': {
+      return new SchemeExpressive(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'monochrome': {
+      return new SchemeMonochrome(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'tonal-spot': {
+      return new SchemeTonalSpot(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'fruit-salad': {
+      return new SchemeFruitSalad(sourceColorHct, isDark, contrastLevel);
+    }
+  }
+}
+
+/**
+ * Create a custom color that works with the theme
+ */
+export function makeCustomColor(options: ThemeCustomColorOptions): ThemeCustomColor {
+  const color = options.blend ? Blend.harmonize(options.color, options.sourceColor) : options.color;
+  const light = dynamicScheme(options.variant, Hct.fromInt(color), false, options.contrastLevel);
+  const dark = dynamicScheme(options.variant, Hct.fromInt(color), true, options.contrastLevel);
+  return {
+    color,
+    source: options.color,
+    palette: light.primaryPalette,
+    light: {
+      color: light.primary,
+      onColor: light.onPrimary,
+      container: light.primaryContainer,
+      onContainer: light.onPrimaryContainer,
+    },
+    dark: {
+      color: dark.primary,
+      onColor: dark.onPrimary,
+      container: dark.primaryContainer,
+      onContainer: dark.onPrimaryContainer,
+    },
+    fixed: {
+      color: light.primaryFixed,
+      onColor: light.onPrimaryFixed,
+      dim: light.primaryFixedDim,
+      onVariant: light.onPrimaryFixedVariant,
+    },
+  };
+}

frontend/app/src/app/util/theme.provider.ts

@@ -0,0 +1,61 @@
+import {Injectable} from '@angular/core';
+import {fromMediaQuery, fromMediaQueryValues} from './rxjs/from-media-query';
+import {BehaviorSubject, Observable, combineLatest, distinctUntilChanged, map} from 'rxjs';
+import {argbFromHex} from '@material/material-color-utilities';
+import {applyIonicTheme, makeIonicTheme} from './theme-ionic-utils';
+import {DEFAULT_CONTRAST, GLOBAL_CONTRAST} from './theme-utils';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {ThemeVariant} from './theme-types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeProvider {
+  prefersDark = fromMediaQuery('(prefers-color-scheme: dark)');
+
+  constrastPreference = fromMediaQueryValues('prefers-contrast', ['more', 'less', 'no-preference']);
+
+  // TODO: fetch the color from somewhere
+  settingThemeColor = new BehaviorSubject<string>('#3880FF');
+
+  settingThemeVariant = new BehaviorSubject<ThemeVariant>('content');
+
+  settingThemeContrast = new BehaviorSubject<number | undefined>(undefined);
+
+  settingThemeMode = new BehaviorSubject<'light' | 'dark' | undefined>(undefined);
+
+  themeSourceColor = this.settingThemeColor.pipe(map(argbFromHex));
+
+  themeVariant = this.settingThemeVariant.asObservable();
+
+  themeContrastLevel: Observable<number> = combineLatest([
+    this.constrastPreference,
+    this.settingThemeContrast,
+  ]).pipe(
+    map(([prefersContrast, customContrast]) =>
+      customContrast === undefined
+        ? prefersContrast === undefined
+          ? DEFAULT_CONTRAST
+          : GLOBAL_CONTRAST[prefersContrast]
+        : customContrast,
+    ),
+    distinctUntilChanged(),
+  );
+
+  themeIsDark = combineLatest([this.prefersDark, this.settingThemeMode]).pipe(
+    map(([prefersDark, customMode]) => (customMode === undefined ? prefersDark : customMode === 'dark')),
+    distinctUntilChanged(),
+  );
+
+  ionicTheme = combineLatest([this.themeContrastLevel, this.themeVariant, this.themeSourceColor]).pipe(
+    map(([contrastLevel, variant, sourceColor]) => makeIonicTheme({variant, sourceColor, contrastLevel})),
+  );
+
+  constructor() {
+    combineLatest([this.ionicTheme, this.themeIsDark])
+      .pipe(takeUntilDestroyed())
+      .subscribe(([theme, isDark]) => {
+        applyIonicTheme(document.documentElement, theme, isDark);
+      });
+  }
+}

frontend/app/src/assets/i18n/de.json

@@ -422,8 +422,7 @@
       "placeholder": "Veranstaltungen, Personen, Orte und mehr"
     },
     "instruction": "Finde alle Informationen rund ums Studium und den Campus",
-    "nothing_found": "Keine Ergebnisse",
-    "SUGGESTIONS": "Meintest du"
+    "nothing_found": "Keine Ergebnisse"
   },
   "hebisSearch": {
     "title": "Bibliothekssuche",

frontend/app/src/assets/i18n/en.json

@@ -422,8 +422,7 @@
       "placeholder": "Events, places, persons and more"
     },
     "instruction": "Find all information related to your studies and campus",
-    "nothing_found": "No results",
-    "SUGGESTIONS": "Did you mean"
+    "nothing_found": "No results"
   },
   "hebisSearch": {
     "title": "Library Search",

frontend/app/src/environments/environment.ts

@@ -18,7 +18,7 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  backend_url: 'http://localhost:3000',
+  backend_url: 'https://mobile.server.uni-frankfurt.de',
   app_host: 'mobile.app.uni-frankfurt.de',
   custom_url_scheme: 'de.anyschool.app',
   backend_version: '999.0.0',

frontend/app/src/theme/colors.scss

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 @import './util/color-system';
-
+/*
 @include ion-color(primary, #3880ff);
 @include ion-color(secondary, #32db64);
 @include ion-color(tertiary, #f4a942);
@@ -26,6 +26,7 @@
 
 @include ion-background-color(#f5f5f5, #000);
 @include ion-item-color(#fff, #0e0e0e);
+*/
 
 :root {
   --calender-lecture-card: var(--ion-color-primary-tint);

packages/api-cli/README.md

@@ -23,7 +23,7 @@ node ./lib/cli.js e2e http://localhost:3000
 Example to clone the full database
 
 ```shell
-node app.js copy "*" -a "999.0.0" https://mobile.server.uni-frankfurt.de http://localhost:3000 100
+node app.js copy "*" https://mobile.app.uni-frankfurt.de http://localhost:3000 100
 ```
 
 ### Program arguments

packages/core/package.json

@@ -97,8 +97,6 @@
             "date",
             "validatable",
             "filterable",
-            "suggestable",
-            "completable",
             "inheritTags",
             "minLength",
             "pattern",

packages/core/src/protocol/search/result.ts

@@ -24,11 +24,6 @@ export interface SCSearchResult {
    */
   data: SCThings[];
 
-  /**
-   * Suggestions for query corrections
-   */
-  suggestions?: SCSearchSuggestions;
-
   /**
    * Facets (aggregations over all matching data)
    */
@@ -45,18 +40,6 @@ export interface SCSearchResult {
   stats: SCSearchResultSearchEngineStats;
 }
 
-/**
- * Seach suggestions
- *
- * Not to be confused with search-as-you-type suggestions
- */
-export interface SCSearchSuggestions {
-  /**
-   * Suggestions for query terms that might have been misspelled
-   */
-  terms?: Record<string, string[]>;
-}
-
 /**
  * Stores information about Pagination
  */

packages/core/src/things/abstract/thing.ts

@@ -63,7 +63,7 @@ export interface SCThingWithoutReferences {
   /**
    * Alternate names of the thing
    * @filterable
-   * @text
+   * @keyword
    */
   alternateNames?: string[];
 
@@ -92,8 +92,6 @@ export interface SCThingWithoutReferences {
    * @filterable
    * @minLength 1
    * @sortable ducet
-   * @completable
-   * @suggestable
    * @text
    */
   name: string;
@@ -242,8 +240,6 @@ export interface SCThingTranslatableProperties {
    * Translation of the name of the thing
    * @sortable ducet
    * @text
-   * @suggestable
-   * @completable
    */
   name?: string;
   /**

packages/es-mapping-generator/src/config/fieldmap.ts

@@ -43,27 +43,6 @@ export const fieldmap: ElasticsearchFieldmap = {
     },
     ignore: ['price'],
   },
-  suggestable: {
-    default: {
-      trigram: {
-        type: 'text',
-        analyzer: 'trigram',
-      },
-      reverse: {
-        type: 'text',
-        analyzer: 'reverse',
-      },
-    },
-    ignore: [],
-  },
-  completable: {
-    default: {
-      completion: {
-        type: 'search_as_you_type',
-      },
-    },
-    ignore: [],
-  },
 };
 
 export const filterableTagName = 'filterable';

packages/es-mapping-generator/src/config/settings.ts

@@ -19,27 +19,4 @@ export const settings: IndicesPutTemplateRequest['settings'] = {
   'max_result_window': 30_000,
   'number_of_replicas': 0,
   'number_of_shards': 1,
-  'index': {
-    analysis: {
-      analyzer: {
-        trigram: {
-          type: 'custom',
-          tokenizer: 'standard',
-          filter: ['lowercase', 'shingle'],
-        },
-        reverse: {
-          type: 'custom',
-          tokenizer: 'standard',
-          filter: ['lowercase', 'reverse'],
-        },
-      },
-      filter: {
-        shingle: {
-          type: 'shingle',
-          min_shingle_size: 2,
-          max_shingle_size: 3,
-        },
-      },
-    },
-  },
 };

pnpm-lock.yaml

@@ -791,6 +791,9 @@ importers:
       '@maplibre/ngx-maplibre-gl':
         specifier: 17.4.1
         version: 17.4.1(@angular/common@17.3.0)(@angular/core@17.3.0)(maplibre-gl@4.0.2)(rxjs@7.8.1)
+      '@material/material-color-utilities':
+        specifier: 0.3.0
+        version: 0.3.0
       '@ngx-translate/core':
         specifier: 15.0.0
         version: 15.0.0(@angular/common@17.3.0)(@angular/core@17.3.0)(rxjs@7.8.1)
@@ -5522,7 +5525,7 @@ packages:
       object-assign: 4.1.1
       open: 8.4.0
       proxy-middleware: 0.15.0
-      send: 0.18.0
+      send: 0.19.0
       serve-index: 1.9.1
     transitivePeerDependencies:
       - supports-color
@@ -7067,6 +7070,10 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@material/material-color-utilities@0.3.0:
+    resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
+    dev: false
+
   /@ngtools/webpack@17.3.0(@angular/compiler-cli@17.3.0)(typescript@5.4.2)(webpack@5.90.3):
     resolution: {integrity: sha512-wNTCDPPEtjP4mxYerLVLCMwOCTEOD2HqZMVXD8pJbarrGPMuoyglUZuqNSIS5KVqR+fFez6JEUnMvC3QSqf58w==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -18928,6 +18935,27 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /send@0.19.0:
+    resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
     dependencies: