AstralRinth/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue

<template>
	<div class="h-full w-full">
		<div class="h-full w-full gap-2 overflow-y-auto">
			<div class="card flex flex-col gap-4">
				<h1 class="m-0 text-lg font-bold text-contrast">Server preferences</h1>
				<p class="m-0">Preferences apply per server and changes are only saved in your browser.</p>
				<div
					v-for="(prefConfig, key) in preferences"
					:key="key"
					class="flex items-center justify-between gap-2"
				>
					<label :for="`pref-${key}`" class="flex flex-col gap-2">
						<div class="flex flex-row gap-2">
							<span class="text-lg font-bold text-contrast">{{ prefConfig.displayName }}</span>
							<div
								v-if="prefConfig.implemented === false"
								class="hidden items-center gap-1 rounded-full bg-table-alternateRow p-1 px-1.5 text-xs font-semibold sm:flex"
							>
								Coming Soon
							</div>
						</div>
						<span>{{ prefConfig.description }}</span>
					</label>
					<input
						:id="`pref-${key}`"
						v-model="newUserPreferences[key]"
						class="switch stylized-toggle flex-none"
						type="checkbox"
						:disabled="prefConfig.implemented === false"
					/>
				</div>
			</div>
		</div>
		<SaveBanner
			:is-visible="hasUnsavedChanges"
			:server="props.server"
			:is-updating="false"
			:save="savePreferences"
			:reset="resetPreferences"
		/>
	</div>
</template>

<script setup lang="ts">
import { injectNotificationManager } from '@modrinth/ui'
import { useStorage } from '@vueuse/core'

import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'

const { addNotification } = injectNotificationManager()
const route = useNativeRoute()
const serverId = route.params.id as string

const props = defineProps<{
	server: ModrinthServer
}>()

const preferences = {
	ramAsNumber: {
		displayName: 'RAM as bytes',
		description:
			"When enabled, RAM will be displayed as bytes instead of a percentage in your server's Overview.",
		implemented: true,
	},
	hideSubdomainLabel: {
		displayName: 'Hide subdomain label',
		description: 'When enabled, the subdomain label will be hidden from the server header.',
		implemented: true,
	},
	autoRestart: {
		displayName: 'Auto restart',
		description: 'When enabled, your server will automatically restart if it crashes.',
		implemented: false,
	},
	powerDontAskAgain: {
		displayName: 'Power actions confirmation',
		description: 'When enabled, you will be prompted before stopping and restarting your server.',
		implemented: true,
	},
} as const

type PreferenceKeys = keyof typeof preferences

type UserPreferences = {
	[K in PreferenceKeys]: boolean
}

const defaultPreferences: UserPreferences = {
	ramAsNumber: false,
	hideSubdomainLabel: false,
	autoRestart: false,
	powerDontAskAgain: false,
}

const userPreferences = useStorage<UserPreferences>(
	`pyro-server-${serverId}-preferences`,
	defaultPreferences,
)

const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)))

const hasUnsavedChanges = computed(() => {
	return JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value)
})

const savePreferences = () => {
	userPreferences.value = { ...newUserPreferences.value }
	addNotification({
		type: 'success',
		title: 'Preferences saved',
		text: 'Your preferences have been saved.',
	})
}

const resetPreferences = () => {
	newUserPreferences.value = { ...userPreferences.value }
}
</script>

<style scoped>
.stylized-toggle:checked::after {
	background: var(--color-accent-contrast) !important;
}
</style>