feat: add general settings dialog and move language and currency there

Author: simonwep

src/app/components/base/dialog/Dialog.vue

@@ -1,5 +1,6 @@
 <template>
   <dialog ref="dialog" :class="classes" @transitionend="transitionEnd">
+    <div :class="$style.backdrop" />
     <div ref="content" :class="[$style.content, contentClass]">
       <h3 v-if="title" :class="$style.title">{{ title }}</h3>
       <slot />
@@ -41,10 +42,11 @@ watch(
   [toRef(props, 'open'), dialog],
   () => {
     if (props.open) {
-      dialog.value?.show();
+      dialog.value?.showModal();
       requestAnimationFrame(() => (visible.value = true));
     } else {
       visible.value = false;
+      requestAnimationFrame(() => dialog.value?.close());
     }
   },
   { immediate: true }
@@ -60,6 +62,7 @@ onMounted(() => {
 
 <style lang="scss" module>
 .dialog {
+  visibility: hidden;
   position: fixed;
   inset: 0 0 0 0;
   display: flex;
@@ -74,26 +77,30 @@ onMounted(() => {
   z-index: 1;
 }
 
-.dialog,
-.dialog[open]::backdrop {
-  visibility: hidden;
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  opacity: 0;
-  transition:
-    visibility 0s var(--transition-m),
-    opacity var(--transition-m);
+.backdrop {
+  position: absolute;
+  transition: all var(--transition-m);
+  inset: 0 0 0 0;
+  z-index: -1;
 }
 
-.dialog[open].open,
-.dialog[open].open::backdrop {
-  transition-delay: 0s;
+.dialog[open] {
+  visibility: visible;
+
+  .content {
+    transition: opacity var(--transition-m);
+  }
 }
 
-.dialog[open].open,
-.dialog[open].open::backdrop {
-  opacity: 1;
-  visibility: visible;
+.dialog[open].open {
+  .content {
+    opacity: 1;
+  }
+
+  .backdrop {
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+  }
 }
 
 .content {
@@ -102,6 +109,7 @@ onMounted(() => {
   padding: 16px 18px;
   border-radius: var(--border-radius-l);
   box-shadow: var(--dialog-box-shadow);
+  opacity: 0;
 }
 
 .title {

src/app/components/base/form/TextField.vue

@@ -97,7 +97,7 @@ const passwordBarColor = computed(() => {
   border: 1px solid var(--input-field-border);
   border-radius: var(--border-radius-m);
   height: 30px;
-  padding: 16px 12px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
   transition: all var(--input-field-transition);

src/app/components/base/select/Select.vue

@@ -0,0 +1,71 @@
+<template>
+  <div :class="$style.select">
+    <label :for="fieldId" :class="$style.label">{{ label }}</label>
+
+    <ContextMenu tooltip-position="bottom" :options="options" position="bottom" @select="modelValue = $event.id">
+      <template #default="{ toggle }">
+        <button :id="fieldId" :class="$style.btn" type="button" @click="toggle">
+          {{ currentValue }}
+        </button>
+      </template>
+    </ContextMenu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ContextMenuOption, ContextMenuOptionId } from '@components/base/context-menu/ContextMenu.types.ts';
+import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
+import { uuid } from '@utils';
+import { computed } from 'vue';
+
+const modelValue = defineModel<ContextMenuOptionId>();
+
+const props = defineProps<{
+  label: string;
+  options?: ContextMenuOption[];
+}>();
+
+const fieldId = uuid();
+const currentValue = computed(
+  () => props.options?.find((option) => option.id === modelValue.value)?.label ?? 'Select...'
+);
+</script>
+
+<style lang="scss" module>
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.label {
+  font-weight: var(--font-weight-l);
+  font-size: var(--font-size-xs);
+}
+
+.btn {
+  all: unset;
+  cursor: pointer;
+  background: var(--input-field-background);
+  border: 1px solid var(--input-field-border);
+  border-radius: var(--border-radius-m);
+  height: 30px;
+  width: 100%;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  transition: all var(--input-field-transition);
+  font-size: var(--input-field-font-size);
+
+  &:hover:not(:focus-within) {
+    border-color: var(--input-field-hover-border);
+    background: var(--input-field-hover-background);
+  }
+
+  &:focus-within {
+    box-shadow: 0 0 0 1px inset var(--input-field-hover-border);
+    border-color: var(--input-field-focus-border);
+    background: var(--input-field-focus-background);
+  }
+}
+</style>

src/app/pages/Frame.vue

@@ -24,8 +24,7 @@
       <ChangeYearButton :class="$style.btn" />
 
       <template v-if="media !== 'mobile'">
-        <ChangeLanguageButton :class="$style.btn" />
-        <ChangeCurrencyButton :class="$style.btn" />
+        <SettingsButton :class="$style.btn" />
         <InfoButton :class="$style.btn" />
       </template>
 
@@ -52,12 +51,11 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import AdminButton from './navigation/admin/AdminButton.vue';
 import CloudButton from './navigation/auth/CloudButton.vue';
-import ChangeCurrencyButton from './navigation/currency/ChangeCurrencyButton.vue';
 import InfoButton from './navigation/info/InfoButton.vue';
-import ChangeLanguageButton from './navigation/language/ChangeLanguageButton.vue';
 import ThemeButton from './navigation/theme/ThemeButton.vue';
 import ToolsButton from './navigation/tools/ToolsButton.vue';
 import ChangeYearButton from './navigation/year/ChangeYearButton.vue';
+import SettingsButton from './navigation/settings/SettingsButton.vue';
 import type { Component } from 'vue';
 
 const menu = ref<HTMLDivElement>();

src/app/pages/navigation/currency/ChangeCurrencyButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <Button
+    :tooltip="t('navigation.settings.settings')"
+    :class="classes"
+    textual
+    color="dimmed"
+    :icon="RiEqualizerLine"
+    @click="showSettingsDialog = true"
+  />
+  <SettingsDialog :open="showSettingsDialog" @close="showSettingsDialog = false" />
+</template>
+
+<script lang="ts" setup>
+import Button from '@components/base/button/Button.vue';
+import { RiEqualizerLine } from '@remixicon/vue';
+import { ClassNames } from '@utils';
+import { computed, ref } from 'vue';
+import SettingsDialog from '@app/pages/navigation/settings/SettingsDialog.vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  class?: ClassNames;
+}>();
+
+const { t } = useI18n();
+const showSettingsDialog = ref(false);
+
+const classes = computed(() => props.class);
+</script>

src/app/pages/navigation/language/ChangeLanguageButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <Dialog :open="open" :title="t('navigation.settings.settings')" @close="emit('close')">
+    <div :class="$style.settingsDialog">
+      <Select
+        :model-value="state.locale"
+        :label="t('navigation.settings.language')"
+        :options="locales"
+        @update:model-value="changeLocale($event as AvailableLocale)"
+      />
+
+      <Select
+        :model-value="state.currency"
+        :label="t('navigation.settings.currency')"
+        :options="currencies"
+        @update:model-value="changeCurrency($event as AvailableCurrency)"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import Dialog from '@components/base/dialog/Dialog.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { AvailableLocale, availableLocales, initialLocale } from '@i18n/index.ts';
+import { RiCheckLine } from '@remixicon/vue';
+import { useDataStore } from '@store/state';
+import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.types.ts';
+import Select from '@components/base/select/Select.vue';
+import { availableCurrencies, AvailableCurrency } from '@store/state/types.ts';
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+defineProps<{
+  open: boolean;
+}>();
+
+const { t, locale } = useI18n();
+const { changeCurrency, changeLocale, state } = useDataStore();
+
+const locales = computed<ContextMenuOption[]>(() => {
+  const displayNames = new Intl.DisplayNames(initialLocale, { type: 'language' });
+
+  return availableLocales.map((value) => ({
+    id: value,
+    icon: state.locale === value ? RiCheckLine : undefined,
+    label: displayNames.of(value)
+  }));
+});
+
+const currencies = computed<ContextMenuOption[]>(() =>
+  availableCurrencies.map((value) => ({
+    id: value,
+    icon: state.currency === value ? RiCheckLine : undefined,
+    label: `${formatNumber(locale.value, value, 'name')} (${formatNumber(locale.value, value)})`
+  }))
+);
+
+const formatNumber = (locale: string, currency: string, currencyDisplay?: Intl.NumberFormatOptionsCurrencyDisplay) => {
+  const symbol = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currencyDisplay,
+    currency
+  })
+    .formatToParts(0)
+    .find((x) => x.type === 'currency')?.value;
+
+  return symbol ? symbol[0].toUpperCase() + symbol.slice(1) : symbol;
+};
+</script>
+
+<style lang="scss" module>
+.settingsDialog {
+  width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>