Repository: louislam/uptime-kuma
File: src/pages/StatusPage.vue (Vue)

Code before:
                </button>

                <!--
                <button v-if="isPublished" class="btn btn-light me-2" @click="">
                    <font-awesome-icon icon="save" />
                    {{ $t("Unpublish") }}
                </button>

                <button v-if="!isPublished" class="btn btn-info me-2" @click="">
                    <font-awesome-icon icon="save" />
                    {{ $t("Publish") }}
                </button>-->

                <!-- Set Default Language -->
                <!-- Set theme -->
                <button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
                    <font-awesome-icon icon="save" />
                    {{ $t("Switch to Light Theme") }}
                </button>

                <button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
                    <font-awesome-icon icon="save" />
                    {{ $t("Switch to Dark Theme") }}
                </button>

                <button v-if="tagsVisible == 'hidden'" class="btn btn-secondary me-2" @click="changeTagsVisibilty('visible')">
                    <font-awesome-icon icon="eye" />
                    {{ $t("Show Tags") }}
                </button>

                <button v-if="tagsVisible == 'visible'" class="btn btn-secondary me-2" @click="changeTagsVisibilty('hidden')">
                    <font-awesome-icon icon="eye-slash" />
                    {{ $t("Hide Tags") }}
                </button>
            </div>
        </div>

        <!-- Incident -->
        <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
            <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
            <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />

            <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
            <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />

            <!-- Incident Date -->
            <div class="date mt-3">
                Created: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
                <span v-if="incident.lastUpdatedDate">
                    Last Updated: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
                </span>

Review comment (suggestion):
So, if someone is using tabbing to navigate the UI, having 2 separate buttons for the options may cause some strange behavior. Can you combine these into one button that determines what is shown/done based on the current state? 

Also, if possible, please add a tool tip that says "currently displaying tags/not displaying tags". Different UIs treat what the icon represents differently. IIRC Most use it as "make it go to this state" but some others do "it is currently in this state". The button text should cover it, but having a tool tip basically eliminates the ambiguity all together.

Code after:
                </button>

                <!--
                <button v-if="isPublished" class="btn btn-light me-2" @click="">
                    <font-awesome-icon icon="save" />
                    {{ $t("Unpublish") }}
                </button>

                <button v-if="!isPublished" class="btn btn-info me-2" @click="">
                    <font-awesome-icon icon="save" />
                    {{ $t("Publish") }}
                </button>-->

                <!-- Set Default Language -->
                <!-- Set theme -->
                <button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
                    <font-awesome-icon icon="save" />
                    {{ $t("Switch to Light Theme") }}
                </button>

                <button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
                    <font-awesome-icon icon="save" />
                    {{ $t("Switch to Dark Theme") }}
                </button>

                <button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
                    <template v-if="tagsVisible">
                        <font-awesome-icon icon="eye-slash" />
                        {{ $t("Hide Tags") }}
                    </template>
                    <template v-else>
                        <font-awesome-icon icon="eye" />
                        {{ $t("Show Tags") }}
                    </template>
                </button>
            </div>
        </div>

        <!-- Incident -->
        <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
            <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
            <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />

            <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
            <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />

            <!-- Incident Date -->
            <div class="date mt-3">
                Created: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
                <span v-if="incident.lastUpdatedDate">
                    Last Updated: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})