Repository: louislam/uptime-kuma
File: src/components/MonitorList.vue (Vue)

Code before:
<template>
    <div class="shadow-box mb-3" :style="boxStyle">
        <div class="list-header">
            <div class="header-top">
                <div class="select-checkbox-wrapper">
                    <input
                        v-if="!selectMode"
                        v-model="selectMode"
                        class="form-check-input"
                        type="checkbox"
                        :aria-label="$t('Select')"
                    />
                    <input
                        v-if="selectMode"
                        v-model="selectAll"
                        class="form-check-input"
                        type="checkbox"
                        :aria-label="$t('selectAllMonitors')"
                    />
                </div>

                <div class="header-filter">
                    <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
                </div>

                <div class="search-wrapper ms-auto">
                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
                        <font-awesome-icon icon="times" />
                    </a>
                    <form>
                        <input
                            v-model="searchText"
                            class="form-control search-input"
                            :placeholder="$t('Search...')"
                            :aria-label="$t('Search monitored sites')"
                            autocomplete="off"
                        />
                    </form>

Review comment (suggestion):
the UX here is really nice and a huge improvement.
What do you think about this change in addition


```suggestion
                    <input
                        v-if="!selectMode"
                        v-model="selectMode"
                        @change="selectAll = selectMode"
                        class="form-check-input"
                        type="checkbox"
                        :aria-label="$t('selectAllMonitorsAria')"
                    />
```

Code after:
<template>
    <div class="shadow-box mb-3" :style="boxStyle">
        <div class="list-header">
            <div class="header-top">
                <div class="select-checkbox-wrapper">
                    <input
                        v-if="!selectMode"
                        v-model="selectMode"
                        class="form-check-input"
                        type="checkbox"
                        :aria-label="$t('selectAllMonitorsAria')"
                        @change="selectAll = selectMode"
                    />
                    <input
                        v-else
                        v-model="selectAll"
                        class="form-check-input"
                        type="checkbox"
                        :aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
                    />
                </div>

                <div class="header-filter">
                    <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
                </div>

                <div class="search-wrapper ms-auto">
                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
                        <font-awesome-icon icon="times" />
                    </a>
                    <form>
                        <input
                            v-model="searchText"
                            class="form-control search-input"
                            :placeholder="$t('Search...')"
                            :aria-label="$t('Search monitored sites')"
                            autocomplete="off"
                        />