How to create a window?

[MRegnard]

Hi!

I am trying to add an option in my local copy, and I almost did it.
This option I want is to change icons' style (from 2 possible styles). What I have for now is an option in the menu, which gives a simple text prompt. If the inputted text is the name of one of the two styles, then all works exactly as I want.

Obviously, this isn't a good solution. What I'd like to have, instead, is a Window with two buttons. One button for select the first style, one button for select the other one (and maybe a top-right close to simply close the window).

I think I basically know how it should work, but I'd like to have confirmation.

1. In src\components\modals, I must create a new VUE file, specifically for this window. This file will contain a function with this.$store.commit("setStyle", style);. I call this file, for example StyleChoiceModal.vue. (This will be the more complex step, but I think I can do it by inspiring from the other modals).
2. In index.js, in the modals, I add styleChoice: false,
3. In the Menu, instead of the simple prompt's click I currently use, I add a @click="toggleModal('styleChoice')

And I think that's all. Did I correctly understand how it works?
Thanks in advance.

[MRegnard]

EDIT: After my first test, it seems I forgot something, because it doesn't work, and I don't know why.

First, for my tests, I totally changed the file EditionModal.vue. This worked perfectly: clicking on Editions or on [E], I could change the icon style. Then, I tried to rename the file into "StyleChoiceModal.vue", and to make all changes I talked about in my previous message. But this time, with a new file, it didn't work.
This is the code of StyleChoiceModal.vue (without the CSS part):

<template>
  <Modal v-if="modals.styleChoice" @close="toggleModal('styleChoice')">
    <h3>Icon Style:</h3>
	<div class="allTheButtons">
      <template>
        <button @click="setStyle('original')">
	      <span>Original icons</span>
		  <img src="../../assets/icons/original/artist.png">
    	</button>
        <button @click="setStyle('official')">
	      <span>Actual official icons</span>
		  <img src="../../assets/icons/official/artist.png">
        </button>
      </template>
	</div>
  </Modal>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Modal from "./Modal";

export default {
  components: {
    Modal,
  },
  computed: {
    ...mapState(["modals", "locale", "editions"]),
  },
  methods: {
    setStyle(style) {
      this.$store.commit("setStyle", style);
      this.$store.commit("toggleModal");
    },
    ...mapMutations(["toggleModal", "setEdition"]),
  },
};
</script>

Did I forget something in this file? Or did I forget something else somewhere else?