feat: add switch button

src/components/ShowSelector.vue

-<template>
-  <div v-if="loaded.shows">
-    <AddShowModal ref="addShowModal" />
-
-    <div class="tw-flex tw-gap-2">
-      <v-select
-        v-if="shows.length > 0"
-        :model-value="show"
-        :options="showOptions"
-        label="name"
-        :clearable="false"
-        class="tw-w-56 tw-h-auto"
-        @update:model-value="show = $event"
-      >
-        <template #selected-option>{{ t('showSelector.selectShow') }}</template>
-        <template #option="show">
-          <span class="tw-block tw-py-1" :class="{ 'tw-opacity-75': !show.is_active }">
-            <span class="tw-block">{{ show.name }}</span>
-            <div class="tw-flex tw-gap-2 tw-justify-between">
-              <span class="tw-text-xs tw-font-bold tw-text-black/40">ID: {{ show.id }}</span>
-              <span
-                v-if="!show.is_active"
-                class="tw-text-sm tw-rounded-full tw-bg-black/10 tw-text-black/75 tw-px-2"
-                >{{ t('showSelector.inactiveShow') }}</span
-              >
-            </div>
-          </span>
-        </template>
-      </v-select>
-
-      <b-button
-        v-if="authStore.isSuperuser"
-        v-b-popover.hover.top="t('showCreator.title')"
-        variant="primary"
-        data-testid="show-selector:add-show"
-        @click="addShowModal.openModal()"
-      >
-        <template v-if="selectedShow">+</template>
-        <template v-else>{{ t('showCreator.title') }}</template>
-      </b-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { sort } from 'fast-sort'
-import { useStore } from 'vuex'
-import { computed, ref } from 'vue'
-
-// Move this into main.js if v-select is used a second time.
-import VSelect from 'vue-select'
-import 'vue-select/dist/vue-select.css'
-
-import { useSelectedShow } from '@/utilities'
-import AddShowModal from './shows/AddShowModal.vue'
-import { useI18n } from '@/i18n'
-import { useAuthStore } from '@/stores/auth'
-
-const store = useStore()
-const authStore = useAuthStore()
-const { t } = useI18n()
-const selectedShow = useSelectedShow()
-
-const addShowModal = ref()
-const loaded = computed(() => ({
-  shows: store.state.shows.loaded.shows,
-  types: store.state.shows.loaded.types,
-  fundingCategories: store.state.shows.loaded.fundingcategories,
-}))
-const shows = computed(() => store.state.shows.shows)
-const showOptions = computed(() => {
-  return sort(shows.value).by([
-    { desc: (show) => show.is_active },
-    { asc: (show) => show.name.toLowerCase() },
-  ])
-})
-const show = computed({
-  get() {
-    return selectedShow.value
-  },
-  set(selectedShow) {
-    store.commit('shows/switchShowById', selectedShow.id)
-  },
-})
-
-// TODO: not sure these belong here.
-if (!loaded.value.types) {
-  store.dispatch('shows/fetchMetaArray', { property: 'types', onlyActive: true })
-}
-
-if (!loaded.value.fundingCategories) {
-  store.dispatch('shows/fetchMetaArray', { property: 'fundingcategories', onlyActive: true })
-}
-</script>
-
-<style>
-.vs__dropdown-toggle {
-  height: 100%;
-  padding-top: 3px;
-}
-
-.vs--searchable .vs__dropdown-toggle {
-  cursor: default;
-}
-</style>

src/components/SwitchButton.vue

+<template>
+  <button
+    :id="id"
+    type="button"
+    role="switch"
+    :aria-checked="value"
+    class="tw-appearance-none tw-border-0 tw-py-[.5em] tw-px-[1em] tw-ring-black tw-relative first:tw-rounded-l last:tw-rounded-r"
+    :class="{
+      'tw-bg-aura-primary tw-text-white': value,
+      'tw-bg-gray-200': !value,
+      'focus:tw-z-10 focus:tw-ring-2 focus:tw-brightness-95': true,
+      'hover:tw-brightness-90': true,
+    }"
+    tabindex="0"
+    @click="value = !value"
+  >
+    <slot>{{ label }}</slot>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useId } from '@/util'
+
+const props = defineProps<{
+  modelValue: boolean
+  label?: string
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+const id = useId()
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: boolean) {
+    emit('update:modelValue', value)
+  },
+})
+</script>
+
+<script lang="ts">
+export default {
+  compatConfig: {
+    MODE: 3,
+  },
+}
+</script>