Allow to set a default account

CHANGELOG.md

@@ -14,6 +14,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Possibility to set a default account
+
 ### Changed
 - The style has been entirely reworked using Bootstrap instead of Bulma
 - It is now impossible to include the separator in the dedicated name

src/accounts.js

@@ -1,5 +1,5 @@
 export function sortAccounts(accounts) {
-	accounts.value.sort((a, b) => {
+	accounts.sort((a, b) => {
 		const va = `${a.localPart}@${a.domain}`;
 		const vb = `${b.localPart}@${b.domain}`;
 		return va.localeCompare(vb);

src/locales/en.json

@@ -71,6 +71,8 @@
 	},
 	"manageAccounts": {
 		"title": "Accounts",
+		"isDefault": "default",
+		"setDefault": "Set default",
 		"delete": "@:invariants.controls.delete",
 		"close": "@:invariants.controls.close"
 	}

src/locales/fr.json

@@ -71,6 +71,8 @@
 	},
 	"manageAccounts": {
 		"title": "Comptes",
+		"isDefault": "défaut",
+		"setDefault": "Définir par défaut",
 		"delete": "@:invariants.controls.delete",
 		"close": "@:invariants.controls.close"
 	}

src/views/AddAccountView.vue

@@ -62,6 +62,7 @@ const addAccount = () => {
 				separator: separator.value,
 				domain: domainName.value,
 				key: key,
+				isDefault: false,
 			};
 			accounts.value.push(newAccount);
 			return toMainView();

src/views/MainView.vue

@@ -11,8 +11,12 @@ import LayoutComponent from '../components/LayoutComponent.vue';
 import NavBarComponent from '../components/NavBarComponent.vue';
 
 const router = useRouter();
-const accounts = sortAccounts(useStorage('sake-accounts', []));
-const selectedAccountId = ref(accounts.value[0].id);
+const accounts = useStorage('sake-accounts', []);
+const sortedAccounts = computed(() => sortAccounts(accounts.value));
+const selectedAccountId = ref((() => {
+	const def = accounts.value.find((a) => a.isDefault);
+	return def ? def.id : accounts.value[0].id;
+})());
 const subAddrName = ref('');
 
 const fromRawAccount = (raw_account) => {
@@ -63,7 +67,7 @@ const resetForm = () => {
 		<div class="mb-3">
 			<label class="form-label" for="account-name">{{ $t("main.account") }}</label>
 			<select class="form-select" id="account-name" v-model="selectedAccountId">
-				<option v-for="account in accounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
+				<option v-for="account in sortedAccounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
 			</select>
 		</div>
 

src/views/ManageAccountsView.vue

@@ -1,16 +1,24 @@
 <script setup>
 import { sortAccounts } from '../accounts';
+import { computed } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core';
 import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
 import LayoutComponent from '../components/LayoutComponent.vue';
 
 const router = useRouter();
-const accounts = sortAccounts(useStorage('sake-accounts', []));
+const accounts = useStorage('sake-accounts', []);
+const sortedAccounts = computed(() => sortAccounts(accounts.value));
 
 const deleteAccount = (accountId) => {
 	return router.push(`/delete-account/${accountId}`);
 };
+const setDefaultAccount = (accountId) => {
+	accounts.value = accounts.value.map((a) => {
+		a.isDefault = a.id === accountId;
+		return a;
+	});
+};
 const toMainView = () => {
 	return router.push('/');
 };
@@ -22,11 +30,13 @@ const toMainView = () => {
 
 		<table class="table">
 				<tbody>
-					<tr v-for="account in accounts">
+					<tr v-for="account in sortedAccounts">
 						<th class="text-end align-middle">
+							<span class="badge text-bg-primary" v-if="account.isDefault">{{ $t("manageAccounts.isDefault") }}</span>
 							{{ account.localPart }}@{{ account.domain }}
 						</th>
 						<th>
+							<button type="button" class="btn btn-primary me-2" @click="setDefaultAccount(account.id)" v-if="!account.isDefault">{{ $t("manageAccounts.setDefault") }}</button>
 							<button type="button" class="btn btn-danger" @click="deleteAccount(account.id)">{{ $t("manageAccounts.delete") }}</button>
 						</th>
 					</tr>