Table of Contents

Language Selection SubMenu

The submenu locates on the Preference Menu Dropdown. It is the only place the application offers for changing the interface language. What that choice sets in motion — the message bundles, the locale applied before the first frame, the single switch function and everything that re-renders behind it — is Internationalization; this page covers the gesture.

The submenu's model is the application-state store rather than a service handed down by the parent component: it reads the current code and the available-code list from that store and calls the store's language action. Both values are hydrated by the store's server-preferences load, which the shell layout runs on mount — a separate path from the one that decides which locale the first painted frame uses.

Layout

  • Language Selection SubMenu

    • Language Row — one plain row per code in the store's available-code list, so the rows are whatever the server reports rather than a fixed set of three. Each carries the language's own name from a hard-coded label map, falling back to the raw code for anything the map does not name, with that code beneath it as a caption; the row matching the current language is drawn in the active state. No row carries a radio button or a checkbox.

    The parent entry captions the current language, so it reads without opening the submenu.

Choosing a row closes the popup and makes one call, the store's language action. The store writes the new code optimistically, POSTs it, adopts the current and available lists the server echoes back, and only then switches the live catalogue — so the interface text flips after the server has accepted the value, and the confirmation toast already reads in the language just picked. A rejected write rolls the store back and changes no interface text at all.

Source Code Path

See HiNC App Anatomy for git repository links.

Web Application

HiNC-2025-webservice (Quasar CLI SPA):

  • wwwroot-src/src/components/AppMenuBar.vue — the nested Preference → Language ▸ popup: the row loop over the available codes, the hard-coded self-name map, the active-row marker, and the handler whose single call is the store's language action.
  • wwwroot-src/src/stores/appState.ts — the current-code and available-code state, the language action with its optimistic write, its POST-then-apply order and its rollback, and the server-preferences load the shell layout runs on mount.
  • wwwroot-src/src/api/preference.ts — the typed wrappers over the two language endpoints.
  • Environments/PreferenceController.cs — GET /api/preference/language and its POST twin, both answering success, current and available; languageCode is the name of a field in the POST request body only. An unlisted code is rejected with 400, and an accepted one is written to the persisted UserConfig.LanguageCode and saved.

See Also