<commit_before><template>
    <div class="mb-2 text-center d-print-none">
        <div class="btn-group mx-2">
            <button
                v-for="item in scaleTypes"
                :key="item"
                :class="[
                    'btn btn-outline-secondary my-2',
                    item === scaleType ? 'active' : null,
                ]"
                @click="setScaleType(item)"
            >
                {{ t(item) }}
            </button>
        </div>

        <div class="btn-group mx-2">
            <button
                v-for="item in chordTypes"
                :key="item"
                :class="[
                    'btn btn-outline-secondary my-2',
                    item === chordType ? 'active' : null,
                ]"
                @click="setChordType(item)"
            >
                {{ item }}
            </button>
        </div>

        <div class="btn-group mx-2">
            <button
                class="btn btn-outline-secondary my-2"
                style="width: 2em"
                @click="toggleEnharmonics()"
            >
                {{ showEnharmonics ? '♯' : '♭' }}
            </button>

            <button
                :class="[
                    'btn btn-outline-secondary my-2',
                    showColors ? 'active' : null,
                ]"
                @click="toggleColors()"
            >
                <ColorsIcon />
            </button>

            <button
                class="btn btn-outline-secondary my-2"
                :title="t('saveImage')"
                @click="downloadImage()"
            >
                <DownloadIcon />
            </button>

            <button
                class="btn btn-outline-secondary my-2"
                :title="t('saveVoicing')"
                :disabled="!isModified"
                @click="saveUserChord()"
            >
                <PinIcon />
            </button>

            <button
                class="btn btn-outline-secondary my-2"
                :title="t('resetVoicing')"
                :disabled="!isUserChord"
                @click="resetUserChord()"
            >
                <ResetIcon />
            </button>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore } from '@/stores/main';
import ResetIcon from '@/components/icon/ResetIcon.vue';
import DownloadIcon from '@/components/icon/DownloadIcon.vue';<commit_msg>fix: improve userChord button disabled state<commit_after><template>
    <div class="mb-2 text-center d-print-none">
        <div class="btn-group mx-2">
            <button
                v-for="item in scaleTypes"
                :key="item"
                :class="[
                    'btn btn-outline-secondary my-2',
                    item === scaleType ? 'active' : null,
                ]"
                @click="setScaleType(item)"
            >
                {{ t(item) }}
            </button>
        </div>

        <div class="btn-group mx-2">
            <button
                v-for="item in chordTypes"
                :key="item"
                :class="[
                    'btn btn-outline-secondary my-2',
                    item === chordType ? 'active' : null,
                ]"
                @click="setChordType(item)"
            >
                {{ item }}
            </button>
        </div>

        <div class="btn-group mx-2">
            <button
                class="btn btn-outline-secondary my-2"
                style="width: 2em"
                @click="toggleEnharmonics()"
            >
                {{ showEnharmonics ? '♯' : '♭' }}
            </button>

            <button
                :class="[
                    'btn btn-outline-secondary my-2',
                    showColors ? 'active' : null,
                ]"
                @click="toggleColors()"
            >
                <ColorsIcon />
            </button>

            <button
                class="btn btn-outline-secondary my-2"
                :title="t('saveImage')"
                @click="downloadImage()"
            >
                <DownloadIcon />
            </button>

            <button
                class="btn btn-outline-secondary my-2"
                :title="t('saveVoicing')"
                :disabled="!isModified || !chordType"
                @click="saveUserChord()"
            >
                <PinIcon />
            </button>

            <button
                class="btn btn-outline-secondary my-2"
                :title="t('resetVoicing')"
                :disabled="!isUserChord"
                @click="resetUserChord()"
            >
                <ResetIcon />
            </button>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore } from '@/stores/main';
import ResetIcon from '@/components/icon/ResetIcon.vue';
import DownloadIcon from '@/components/icon/DownloadIcon.vue';
{'fraction_non_alphanumeric': 0.13280475718533202, 'fraction_numerical': 0.006342913776015857, 'mean_word_length': 1.104253544620517, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2465643', 'n_tokens_mistral': 1416, 'n_tokens_neox': 1313, 'n_words': 247}