fix(server backup settings): number input -> dropdown

apps/frontend/src/components/ui/servers/BackupSettingsModal.vue

@@ -4,8 +4,8 @@
       <div class="flex flex-col gap-2">
         <div class="font-semibold text-contrast">Auto backup</div>
         <p class="m-0">
-          Automatically create a backup of your server every
-          <strong>{{ autoBackupInterval == 1 ? "hour" : `${autoBackupInterval} hours` }}</strong>
+          Automatically create a backup of your server
+          <strong>{{ backupIntervalsLabel.toLowerCase() }}</strong>
         </p>
       </div>
 
@@ -22,54 +22,19 @@
         <div class="flex flex-col gap-2">
           <div class="font-semibold text-contrast">Interval</div>
           <p class="m-0">
-            The amount of hours between each backup. This will only backup your server if it has
-            been modified since the last backup.
+            The amount of time between each backup. This will only backup your server if it has been
+            modified since the last backup.
           </p>
         </div>
 
-        <div class="flex items-center gap-2 text-contrast">
-          <div
-            class="flex w-fit items-center rounded-xl border border-solid border-button-border bg-table-alternateRow"
-          >
-            <button
-              class="rounded-l-xl p-3 text-secondary enabled:hover:text-contrast [&&]:bg-transparent enabled:[&&]:hover:bg-button-bg"
-              :disabled="!autoBackupEnabled || isSaving"
-              @click="autoBackupInterval = Math.max(autoBackupInterval - 1, 1)"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="-2 0 18 2">
-                <path
-                  d="M18,12H6"
-                  transform="translate(-5 -11)"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                />
-              </svg>
-            </button>
-            <input
-              id="auto-backup-interval"
-              v-model="autoBackupInterval"
-              class="w-16 !appearance-none text-center [&&]:bg-transparent [&&]:focus:shadow-none"
-              type="number"
-              style="-moz-appearance: textfield; appearance: none"
-              min="1"
-              max="24"
-              step="1"
-              :disabled="!autoBackupEnabled || isSaving"
-            />
-
-            <button
-              class="rounded-r-xl p-3 text-secondary enabled:hover:text-contrast [&&]:bg-transparent enabled:[&&]:hover:bg-button-bg"
-              :disabled="!autoBackupEnabled || isSaving"
-              @click="autoBackupInterval = Math.min(autoBackupInterval + 1, 24)"
-            >
-              <PlusIcon />
-            </button>
-          </div>
-          {{ autoBackupInterval == 1 ? "hour" : "hours" }}
-        </div>
+        <UiServersTeleportDropdownMenu
+          :id="'interval-field'"
+          v-model="backupIntervalsLabel"
+          :disabled="!autoBackupEnabled || isSaving"
+          name="interval"
+          :options="Object.keys(backupIntervals)"
+          placeholder="Backup interval"
+        />
 
         <div class="mt-4 flex justify-start gap-4">
           <ButtonStyled color="brand">
@@ -92,7 +57,7 @@
 
 <script setup lang="ts">
 import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { PlusIcon, XIcon, SaveIcon } from "@modrinth/assets";
+import { XIcon, SaveIcon } from "@modrinth/assets";
 import { ref, computed } from "vue";
 import type { Server } from "~/composables/pyroServers";
 
@@ -104,27 +69,33 @@ const modal = ref<InstanceType<typeof NewModal>>();
 
 const initialSettings = ref<{ interval: number; enabled: boolean } | null>(null);
 const autoBackupEnabled = ref(false);
-const autoBackupInterval = ref(6);
 const isLoadingSettings = ref(true);
 const isSaving = ref(false);
 
-const validatedBackupInterval = computed(() => {
-  const roundedValue = Math.round(autoBackupInterval.value);
+const backupIntervals = {
+  "Every 3 hours": 3,
+  "Every 6 hours": 6,
+  "Every 12 hours": 12,
+  Daily: 24,
+};
+
+const backupIntervalsLabel = ref<keyof typeof backupIntervals>("Every 6 hours");
 
-  if (roundedValue < 1) {
-    return 1;
-  } else if (roundedValue > 24) {
-    return 24;
-  }
-  return roundedValue;
+const autoBackupInterval = computed({
+  get: () => backupIntervals[backupIntervalsLabel.value],
+  set: (value) => {
+    const [label] =
+      Object.entries(backupIntervals).find(([_, interval]) => interval === value) || [];
+    if (label) backupIntervalsLabel.value = label as keyof typeof backupIntervals;
+  },
 });
 
 const hasChanges = computed(() => {
   if (!initialSettings.value) return false;
 
   return (
     autoBackupEnabled.value !== initialSettings.value.enabled ||
-    autoBackupInterval.value !== initialSettings.value.interval
+    (initialSettings.value.enabled && autoBackupInterval.value !== initialSettings.value.interval)
   );
 });
 
@@ -182,10 +153,6 @@ const saveSettings = async () => {
   }
 };
 
-watch(autoBackupInterval, () => {
-  autoBackupInterval.value = validatedBackupInterval.value;
-});
-
 defineExpose({
   show: async () => {
     await fetchSettings();

apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue

@@ -72,6 +72,8 @@
                   :class="{
                     'bg-brand font-bold text-brand-inverted': selectedValue === item.option,
                     'bg-bg-raised': focusedOptionIndex === item.index,
+                    'rounded-b-xl': item.index === props.options.length - 1 && !isRenderingUp,
+                    'rounded-t-xl': item.index === 0 && isRenderingUp,
                   }"
                   :aria-selected="selectedValue === item.option"
                   @click="selectOption(item.option, item.index)"