Do not re-define allowedColorModes

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The style has been entirely reworked using Bootstrap instead of Bulma
 - It is now impossible to include the separator in the dedicated name
 - When adding a new account, error messages are displayed alongside each affected elements whenever possible
+- By default, the new sub-address form reset button switches to the default account
 
 ## Fixed
 - Invalid preferences are now automatically corrected

src/const.js

@@ -6,3 +6,4 @@ export const allowedLocales = [
 	'en',
 	'fr',
 ];
+export const resetToDefaultAccount = true;

src/locales/en.json

@@ -53,6 +53,7 @@
 		"title": "Preferences",
 		"language": "Language",
 		"colorMode": "Theme",
+		"resetToDefault": "Switch to the default account when the new sub-address form is reset",
 		"lightTheme": "Light",
 		"darkTheme": "Dark",
 		"close": "@:invariants.controls.close"

src/locales/fr.json

@@ -53,6 +53,7 @@
 		"title": "Préférences",
 		"language": "Langue",
 		"colorMode": "Thème",
+		"resetToDefault": "Basculer sur le compte par défaut lorsque le formulaire de sous-adresse est réinitialisé",
 		"lightTheme": "Clair",
 		"darkTheme": "Sombre",
 		"close": "@:invariants.controls.close"

src/views/ConfigView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { allowedColorModes, resetToDefaultAccount } from '../const';
 import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -10,10 +11,7 @@ const router = useRouter();
 const stored_locale = useStorage('sake-locale', '');
 const { t, locale } = useI18n({ useScope: 'global' });
 const colorMode = useStorage('sake-color-mode');
-const allowedColorModes = [
+const resetToDefault = useStorage('sake-reset-to-default', resetToDefaultAccount);
-	'light',
-	'dark',
-];
 
 const toMainView = () => {
 	return router.push('/');
@@ -45,6 +43,12 @@ watch(colorMode, async (newColorMode) => {
 				<option v-for="mode in allowedColorModes" :key="mode" :value="mode">{{ $t(`config.${mode}Theme`) }}</option>
 			</select>
 		</div>
+		<div class="mb-3">
+			<div class="form-check form-switch">
+				<input class="form-check-input" type="checkbox" role="switch" id="app-reset-to-default" v-model="resetToDefault">
+				<label class="form-check-label" for="app-reset-to-default">{{ $t("config.resetToDefault") }}</label>
+			</div>
+		</div>
 
 		<ButtonGroupComponent>
 			<button type="button" class="btn btn-secondary" @click="toMainView">{{ $t("about.close") }}</button>

src/views/MainView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { sortAccounts } from '../accounts';
+import { resetToDefaultAccount } from '../const';
 import { ref, computed } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
@@ -12,11 +13,13 @@ import NavBarComponent from '../components/NavBarComponent.vue';
 
 const router = useRouter();
 const accounts = useStorage('sake-accounts', []);
+const resetToDefault = useStorage('sake-reset-to-default', resetToDefaultAccount);
 const sortedAccounts = computed(() => sortAccounts(accounts.value));
-const selectedAccountId = ref((() => {
+const getDefaultAccount = () => {
 	const def = accounts.value.find((a) => a.isDefault);
 	return def ? def.id : accounts.value[0].id;
-})());
+};
+const selectedAccountId = ref(getDefaultAccount());
 const subAddrName = ref('');
 
 const fromRawAccount = (raw_account) => {
@@ -56,6 +59,9 @@ const copyAddr = () => {
 };
 const resetForm = () => {
 	subAddrName.value = '';
+	if (resetToDefault.value) {
+		selectedAccountId.value = getDefaultAccount();
+	}
 };
 </script>