From 74db80a17dcba7a442366999c0acc0d7abf37f7e Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Tue, 2 Apr 2024 08:17:30 -0400
Subject: [PATCH] client: refactor more components to use `setup` to simplify
 them (part 3)

---
 client/src/components/ClickToEdit.vue         | 128 ++++------
 .../src/components/ClientSettingsDialog.vue   |  77 +++---
 client/src/components/RoomSettingsForm.vue    | 237 ++++++++----------
 client/src/components/ToastNotification.vue   | 167 ++++++------
 .../WorkaroundPlaybackStatusUpdater.vue       |  49 ++--
 client/src/views/Home.vue                     |  31 +--
 6 files changed, 289 insertions(+), 400 deletions(-)

diff --git a/client/src/components/ClickToEdit.vue b/client/src/components/ClickToEdit.vue
index f880accb7..1ea41052a 100644
--- a/client/src/components/ClickToEdit.vue
+++ b/client/src/components/ClickToEdit.vue
@@ -20,93 +20,67 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, nextTick, Ref } from "vue";
-
-function valueFormatterDefault(value: number): string {
-	return value.toString();
-}
-
-function valueParserDefault(value: string): number {
-	return parseInt(value, 10);
-}
-
+<script lang="ts" setup generic="T extends string | number">
 /**
  * Provides a value display that can be clicked to edit.
  */
-const ClickToEdit = defineComponent({
-	name: "ClickToEdit",
-	emits: ["change", "update:modelValue"],
-	props: {
-		modelValue: {
-			type: [String, Number],
-			required: true,
-		},
-		valueFormatter: {
-			type: Function,
-			default: valueFormatterDefault,
-		},
-		valueParser: {
-			type: Function,
-			default: valueParserDefault,
-		},
-	},
-	setup(props, { emit }) {
-		const editor = ref<HTMLInputElement | undefined>();
-		const valueFormatter = ref(props.valueFormatter) as Ref<(value: number) => string>;
-		const valueParser = ref(props.valueParser) as Ref<(value: string) => number>;
+import { ref, nextTick, Ref } from "vue";
 
-		const editing = ref(false);
-		const valueDirty = ref();
-		const display: Ref<HTMLDivElement | undefined> = ref();
-		const editorWidth = ref(120);
+const props = withDefaults(
+	defineProps<{
+		valueFormatter?: (value: number) => string;
+		valueParser?: (value: string) => number;
+	}>(),
+	{
+		valueFormatter: (value: number): string => value.toString(),
+		valueParser: (value: string): number => parseInt(value, 10),
+	}
+);
 
-		async function activate() {
-			if (display.value) {
-				editorWidth.value = display.value.offsetWidth + 24;
-			}
-			console.info("modelValue", props.modelValue);
-			if (typeof props.modelValue === "number") {
-				valueDirty.value = valueFormatter.value(props.modelValue);
-			} else {
-				valueDirty.value = props.modelValue;
-			}
-			editing.value = true;
-			await nextTick();
-			editor.value?.focus();
-		}
+const model = defineModel<T>();
 
-		function apply() {
-			let outValue: string | number;
-			if (typeof props.modelValue === "number") {
-				outValue = valueParser.value(valueDirty.value);
-			} else {
-				outValue = valueDirty.value;
-			}
-			editing.value = false;
-			emit("change", outValue);
-			emit("update:modelValue", outValue);
-		}
+const emit = defineEmits<{
+	change: [value: T];
+}>();
 
-		function abort() {
-			editing.value = false;
-		}
+const editor = ref<HTMLInputElement | undefined>();
+const valueFormatter = ref(props.valueFormatter) as Ref<(value: number) => string>;
+const valueParser = ref(props.valueParser) as Ref<(value: string) => number>;
 
-		return {
-			editor,
-			display,
-			editing,
-			valueDirty,
-			editorWidth,
+const editing = ref(false);
+const valueDirty = ref("");
+const display: Ref<HTMLDivElement | undefined> = ref();
+const editorWidth = ref(120);
 
-			activate,
-			apply,
-			abort,
-		};
-	},
-});
+async function activate() {
+	if (display.value) {
+		editorWidth.value = display.value.offsetWidth + 24;
+	}
+	if (typeof model.value === "number") {
+		valueDirty.value = valueFormatter.value(model.value);
+	} else {
+		valueDirty.value = model.value ?? "";
+	}
+	editing.value = true;
+	await nextTick();
+	editor.value?.focus();
+}
+
+function apply() {
+	let outValue: T;
+	if (typeof model.value === "number") {
+		outValue = valueParser.value(valueDirty.value) as T;
+	} else {
+		outValue = valueDirty.value as T;
+	}
+	editing.value = false;
+	model.value = outValue;
+	emit("change", outValue);
+}
 
-export default ClickToEdit;
+function abort() {
+	editing.value = false;
+}
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/ClientSettingsDialog.vue b/client/src/components/ClientSettingsDialog.vue
index d79d15b8e..c9d60d8c1 100644
--- a/client/src/components/ClientSettingsDialog.vue
+++ b/client/src/components/ClientSettingsDialog.vue
@@ -50,10 +50,10 @@
 
 			<v-card-actions>
 				<v-spacer />
-				<v-btn color="primary" text @click="applySettings">
+				<v-btn color="primary" @click="applySettings">
 					{{ $t("common.save") }}
 				</v-btn>
-				<v-btn text @click="cancelSettings">
+				<v-btn @click="cancelSettings">
 					{{ $t("common.cancel") }}
 				</v-btn>
 			</v-card-actions>
@@ -61,8 +61,8 @@
 	</v-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, Ref, ref, watch } from "vue";
+<script lang="ts" setup>
+import { Ref, ref, watch } from "vue";
 import { useStore } from "@/store";
 import { SettingsState, RoomLayoutMode, Theme } from "@/stores/settings";
 import _ from "lodash";
@@ -73,54 +73,37 @@ type ExcludedFields = "volume" | "locale";
 type ExposedSettings = Omit<SettingsState, ExcludedFields>;
 const EXCLUDED: ExcludedFields[] = ["volume", "locale"];
 
-export const ClientSettingsDialog = defineComponent({
-	name: "ClientSettingsDialog",
-	setup() {
-		const show = ref(false);
-		const store = useStore();
-		const settings: Ref<ExposedSettings> = ref(loadSettings());
-		const sfx = useSfx();
+const show = ref(false);
+const store = useStore();
+const settings: Ref<ExposedSettings> = ref(loadSettings());
+const sfx = useSfx();
 
-		function loadSettings(): ExposedSettings {
-			const copy = _.cloneDeep(store.state.settings);
-			const filtered = _.omit(copy, EXCLUDED);
-			return filtered;
-		}
+function loadSettings(): ExposedSettings {
+	const copy = _.cloneDeep(store.state.settings);
+	const filtered = _.omit(copy, EXCLUDED);
+	return filtered;
+}
 
-		function applySettings() {
-			store.commit("settings/UPDATE", settings.value);
-			show.value = false;
-		}
+function applySettings() {
+	store.commit("settings/UPDATE", settings.value);
+	show.value = false;
+}
 
-		function cancelSettings() {
-			show.value = false;
-		}
+function cancelSettings() {
+	show.value = false;
+}
 
-		watch(show, () => {
-			settings.value = loadSettings();
-		});
-
-		store.subscribe(mutation => {
-			if (mutation.type === "settings/UPDATE") {
-				sfx.enabled = store.state.settings.sfxEnabled;
-				sfx.volume.value = store.state.settings.sfxVolume;
-			}
-		});
-
-		return {
-			show,
-			settings,
-
-			applySettings,
-			cancelSettings,
-			RoomLayoutMode,
-			Theme,
+watch(show, () => {
+	settings.value = loadSettings();
+});
 
-			layouts: enumKeys(RoomLayoutMode),
-			themes: enumKeys(Theme),
-		};
-	},
+store.subscribe(mutation => {
+	if (mutation.type === "settings/UPDATE") {
+		sfx.enabled = store.state.settings.sfxEnabled;
+		sfx.volume.value = store.state.settings.sfxVolume;
+	}
 });
 
-export default ClientSettingsDialog;
+const layouts = enumKeys(RoomLayoutMode);
+const themes = enumKeys(Theme);
 </script>
diff --git a/client/src/components/RoomSettingsForm.vue b/client/src/components/RoomSettingsForm.vue
index 22a2f8322..afdbde1d3 100644
--- a/client/src/components/RoomSettingsForm.vue
+++ b/client/src/components/RoomSettingsForm.vue
@@ -148,7 +148,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import _ from "lodash";
 import PermissionsEditor from "@/components/PermissionsEditor.vue";
 import { ToastStyle } from "@/models/toast";
@@ -157,149 +157,122 @@ import { Visibility, QueueMode, RoomSettings, Role, BehaviorOption } from "ott-c
 import { Grants } from "ott-common/permissions";
 import { granted } from "@/util/grants";
 import toast from "@/util/toast";
-import { defineComponent, onMounted, Ref, ref } from "vue";
+import { onMounted, Ref, ref } from "vue";
 import { useStore } from "@/store";
 import { useI18n } from "vue-i18n";
 import { OttApiResponseGetRoom } from "ott-common/models/rest-api";
 import { ALL_SKIP_CATEGORIES } from "ott-common/constants";
 
-const RoomSettingsForm = defineComponent({
-	name: "RoomSettingsForm",
-	components: {
-		PermissionsEditor,
-	},
-	setup() {
-		const store = useStore();
-		const { t } = useI18n();
+const store = useStore();
+const { t } = useI18n();
 
-		const isLoadingRoomSettings = ref(false);
-		const inputRoomSettings: Ref<RoomSettings> = ref<RoomSettings>({
-			title: "",
-			description: "",
-			visibility: Visibility.Public,
-			queueMode: QueueMode.Manual,
-			grants: new Grants(),
-			autoSkipSegmentCategories: Array.from([]),
-			restoreQueueBehavior: BehaviorOption.Prompt,
-			enableVoteSkip: false,
-		});
-
-		onMounted(async () => {
-			await loadRoomSettings();
-		});
-
-		async function loadRoomSettings() {
-			// we have to make an API request because visibility is not sent in sync messages.
-			isLoadingRoomSettings.value = true;
-			try {
-				const res = await API.get<OttApiResponseGetRoom>(`/room/${store.state.room.name}`);
-				const settings = res.data;
-				settings.grants = new Grants(res.data.grants);
-				inputRoomSettings.value = _.pick(
-					settings,
-					"title",
-					"description",
-					"visibility",
-					"queueMode",
-					"grants",
-					"autoSkipSegmentCategories",
-					"restoreQueueBehavior",
-					"enableVoteSkip"
-				);
-			} catch (err) {
-				toast.add({
-					content: t("room-settings.load-failed"),
-					duration: 5000,
-					style: ToastStyle.Error,
-				});
-			}
-			isLoadingRoomSettings.value = false;
-		}
+const isLoadingRoomSettings = ref(false);
+const inputRoomSettings: Ref<RoomSettings> = ref<RoomSettings>({
+	title: "",
+	description: "",
+	visibility: Visibility.Public,
+	queueMode: QueueMode.Manual,
+	grants: new Grants(),
+	autoSkipSegmentCategories: Array.from([]),
+	restoreQueueBehavior: BehaviorOption.Prompt,
+	enableVoteSkip: false,
+});
 
-		function getRoomSettingsSubmit() {
-			const propsToGrants = {
-				title: "set-title",
-				description: "set-description",
-				visibility: "set-visibility",
-				queueMode: "set-queue-mode",
-				autoSkipSegmentCategories: "other",
-				restoreQueueBehavior: "other",
-				enableVoteSkip: "other",
-			};
-			const blocked: (keyof RoomSettings)[] = [];
-			for (const prop of Object.keys(propsToGrants)) {
-				if (!granted(`configure-room.${propsToGrants[prop]}`)) {
-					blocked.push(prop as keyof typeof propsToGrants);
-				}
-			}
-			return _.omit(inputRoomSettings.value, blocked);
-		}
+onMounted(async () => {
+	await loadRoomSettings();
+});
 
-		/** Take room settings from the UI and submit them to the server. */
-		async function submitRoomSettings() {
-			isLoadingRoomSettings.value = true;
-			try {
-				await API.patch(`/room/${store.state.room.name}`, getRoomSettingsSubmit());
-				toast.add({
-					style: ToastStyle.Success,
-					content: t("room-settings.settings-applied").toString(),
-					duration: 4000,
-				});
-			} catch (e) {
-				console.log(e);
-				toast.add({
-					style: ToastStyle.Error,
-					content: e.response.data.error.message,
-					duration: 6000,
-				});
-			}
-			isLoadingRoomSettings.value = false;
-		}
+async function loadRoomSettings() {
+	// we have to make an API request because visibility is not sent in sync messages.
+	isLoadingRoomSettings.value = true;
+	try {
+		const res = await API.get<OttApiResponseGetRoom>(`/room/${store.state.room.name}`);
+		const settings = res.data;
+		settings.grants = new Grants(res.data.grants);
+		inputRoomSettings.value = _.pick(
+			settings,
+			"title",
+			"description",
+			"visibility",
+			"queueMode",
+			"grants",
+			"autoSkipSegmentCategories",
+			"restoreQueueBehavior",
+			"enableVoteSkip"
+		);
+	} catch (err) {
+		toast.add({
+			content: t("room-settings.load-failed"),
+			duration: 5000,
+			style: ToastStyle.Error,
+		});
+	}
+	isLoadingRoomSettings.value = false;
+}
 
-		async function claimOwnership() {
-			isLoadingRoomSettings.value = true;
-			try {
-				await API.patch(`/room/${store.state.room.name}`, {
-					claim: true,
-				});
-				toast.add({
-					style: ToastStyle.Success,
-					content: t("room-settings.now-own-the-room", {
-						room: store.state.room.name,
-					}).toString(),
-					duration: 4000,
-				});
-			} catch (e) {
-				console.log(e);
-				toast.add({
-					style: ToastStyle.Error,
-					content: e.response.data.error.message,
-					duration: 6000,
-				});
-			}
-			isLoadingRoomSettings.value = false;
+function getRoomSettingsSubmit() {
+	const propsToGrants = {
+		title: "set-title",
+		description: "set-description",
+		visibility: "set-visibility",
+		queueMode: "set-queue-mode",
+		autoSkipSegmentCategories: "other",
+		restoreQueueBehavior: "other",
+		enableVoteSkip: "other",
+	};
+	const blocked: (keyof RoomSettings)[] = [];
+	for (const prop of Object.keys(propsToGrants)) {
+		if (!granted(`configure-room.${propsToGrants[prop]}`)) {
+			blocked.push(prop as keyof typeof propsToGrants);
 		}
+	}
+	return _.omit(inputRoomSettings.value, blocked);
+}
 
-		return {
-			isLoadingRoomSettings,
-			inputRoomSettings,
-			ALL_SKIP_CATEGORIES,
-			loadRoomSettings,
-			getRoomSettingsSubmit,
-			submitRoomSettings,
-			claimOwnership,
-
-			store,
-			granted,
-			Visibility,
-			QueueMode,
-			Role,
-			BehaviorOption,
-		};
-	},
-});
+/** Take room settings from the UI and submit them to the server. */
+async function submitRoomSettings() {
+	isLoadingRoomSettings.value = true;
+	try {
+		await API.patch(`/room/${store.state.room.name}`, getRoomSettingsSubmit());
+		toast.add({
+			style: ToastStyle.Success,
+			content: t("room-settings.settings-applied").toString(),
+			duration: 4000,
+		});
+	} catch (e) {
+		console.log(e);
+		toast.add({
+			style: ToastStyle.Error,
+			content: e.response.data.error.message,
+			duration: 6000,
+		});
+	}
+	isLoadingRoomSettings.value = false;
+}
 
-export default RoomSettingsForm;
+async function claimOwnership() {
+	isLoadingRoomSettings.value = true;
+	try {
+		await API.patch(`/room/${store.state.room.name}`, {
+			claim: true,
+		});
+		toast.add({
+			style: ToastStyle.Success,
+			content: t("room-settings.now-own-the-room", {
+				room: store.state.room.name,
+			}).toString(),
+			duration: 4000,
+		});
+	} catch (e) {
+		console.log(e);
+		toast.add({
+			style: ToastStyle.Error,
+			content: e.response.data.error.message,
+			duration: 6000,
+		});
+	}
+	isLoadingRoomSettings.value = false;
+}
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/ToastNotification.vue b/client/src/components/ToastNotification.vue
index 25a4168f4..6dc752778 100644
--- a/client/src/components/ToastNotification.vue
+++ b/client/src/components/ToastNotification.vue
@@ -1,10 +1,7 @@
 <template>
 	<v-sheet :color="color" class="toast" elevation="12" aria-live="polite">
-		<v-icon class="toast-icon" v-if="toast.style === ToastStyle.Success">
-			mdi-check-bold
-		</v-icon>
-		<v-icon class="toast-icon" v-else-if="toast.style === ToastStyle.Error">
-			mdi-alert-circle
+		<v-icon class="toast-icon" v-if="!!icon">
+			{{ icon }}
 		</v-icon>
 		<span class="toast-content">
 			<ProcessedText :text="toast.content" :show-add-queue-tooltip="false" />
@@ -14,16 +11,21 @@
 			<v-btn variant="text" v-if="undoable" @click="undo">
 				{{ $t("common.undo") }}
 			</v-btn>
-			<v-btn variant="text" @click="close" size="x-small" icon aria-label="close">
+			<v-btn
+				variant="text"
+				@click="close"
+				size="x-small"
+				icon
+				:aria-label="$t('common.close')"
+			>
 				<v-icon>mdi-close</v-icon>
 			</v-btn>
 		</div>
 	</v-sheet>
 </template>
 
-<script lang="ts">
-import { PropType } from "vue";
-import { defineComponent, ref, toRefs, onMounted, onUnmounted, Ref, computed } from "vue";
+<script lang="ts" setup>
+import { ref, toRefs, onMounted, onUnmounted, Ref, computed } from "vue";
 import { Toast, ToastStyle } from "@/models/toast";
 import { RoomRequestType } from "ott-common/models/messages";
 import { API } from "@/common-http";
@@ -31,94 +33,77 @@ import toasts from "@/util/toast";
 import { useStore } from "@/store";
 import ProcessedText from "./ProcessedText.vue";
 
-const ToastNotification = defineComponent({
-	name: "ToastNotification",
-	props: {
-		toast: {
-			type: Object as PropType<Toast>,
-			required: true,
-		},
-		number: { type: Number },
-	},
-	components: {
-		ProcessedText,
-	},
-	setup(props) {
-		const { toast } = toRefs(props);
-		const store = useStore();
-		const padding = ref(8);
-		const closeTimeoutId: Ref<ReturnType<typeof setTimeout> | null> = ref(null);
-
-		onMounted(() => {
-			if (toast.value.duration) {
-				closeTimeoutId.value = setTimeout(() => {
-					close();
-				}, toast.value.duration);
-			}
-		});
+const props = defineProps<{ toast: Toast; number?: number }>();
 
-		onUnmounted(() => {
-			if (closeTimeoutId.value) {
-				clearTimeout(closeTimeoutId.value);
-			}
-		});
+const { toast } = toRefs(props);
+const store = useStore();
+const closeTimeoutId: Ref<ReturnType<typeof setTimeout> | null> = ref(null);
 
-		const color = computed(() => {
-			if (toast.value.style === ToastStyle.Success) {
-				return "success";
-			} else if (toast.value.style === ToastStyle.Error) {
-				return "error";
-			} else if (toast.value.style === ToastStyle.Important) {
-				return "warning";
-			}
-			return undefined;
-		});
+onMounted(() => {
+	if (toast.value.duration) {
+		closeTimeoutId.value = setTimeout(() => {
+			close();
+		}, toast.value.duration);
+	}
+});
 
-		const undoable = computed(() => {
-			if (!toast.value.event) {
-				return false;
-			}
-			const eventType = toast.value.event.request.type;
-			return (
-				eventType === RoomRequestType.SeekRequest ||
-				eventType === RoomRequestType.SkipRequest ||
-				eventType === RoomRequestType.AddRequest ||
-				eventType === RoomRequestType.RemoveRequest
-			);
-		});
+onUnmounted(() => {
+	if (closeTimeoutId.value) {
+		clearTimeout(closeTimeoutId.value);
+	}
+});
+
+const color = computed(() => {
+	if (toast.value.style === ToastStyle.Success) {
+		return "success";
+	} else if (toast.value.style === ToastStyle.Error) {
+		return "error";
+	} else if (toast.value.style === ToastStyle.Important) {
+		return "warning";
+	}
+	return undefined;
+});
+
+const icon = computed(() => {
+	if (toast.value.style === ToastStyle.Success) {
+		return "mdi-check-bold";
+	} else if (toast.value.style === ToastStyle.Error) {
+		return "mdi-alert-circle";
+	}
+	return undefined;
+});
 
-		async function undo() {
-			try {
-				await API.post(`/room/${store.state.room.name}/undo`, {
-					data: { event: toast.value.event },
-				});
-				close();
-			} catch (err) {
-				toasts.add({
-					style: ToastStyle.Error,
-					content: err.message,
-					duration: 4000,
-				});
-			}
-		}
-
-		function close() {
-			toasts.remove(toast.value.id);
-		}
-
-		return {
-			padding,
-			color,
-			undoable,
-
-			undo,
-			close,
-			ToastStyle,
-		};
-	},
+const undoable = computed(() => {
+	if (!toast.value.event) {
+		return false;
+	}
+	const eventType = toast.value.event.request.type;
+	return (
+		eventType === RoomRequestType.SeekRequest ||
+		eventType === RoomRequestType.SkipRequest ||
+		eventType === RoomRequestType.AddRequest ||
+		eventType === RoomRequestType.RemoveRequest
+	);
 });
 
-export default ToastNotification;
+async function undo() {
+	try {
+		await API.post(`/room/${store.state.room.name}/undo`, {
+			data: { event: toast.value.event },
+		});
+		close();
+	} catch (err) {
+		toasts.add({
+			style: ToastStyle.Error,
+			content: err.message,
+			duration: 4000,
+		});
+	}
+}
+
+function close() {
+	toasts.remove(toast.value.id);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/WorkaroundPlaybackStatusUpdater.vue b/client/src/components/WorkaroundPlaybackStatusUpdater.vue
index 85192f663..e62f9553d 100644
--- a/client/src/components/WorkaroundPlaybackStatusUpdater.vue
+++ b/client/src/components/WorkaroundPlaybackStatusUpdater.vue
@@ -1,42 +1,29 @@
-<template>
-	<span></span>
-</template>
-
-<script lang="ts">
-import { defineComponent, onUnmounted } from "vue";
+<script lang="ts" setup>
+import { onUnmounted } from "vue";
 import { useConnection } from "@/plugins/connection";
 import { useStore } from "@/store";
 import { PlayerStatus } from "ott-common/models/types";
 import _ from "lodash";
 
-export const WorkaroundPlaybackStatusUpdater = defineComponent({
-	name: "WorkaroundPlaybackStatusUpdater",
-	setup() {
-		const store = useStore();
-		const connection = useConnection();
-
-		const playbackStatusUnsub = store.subscribe(mutation => {
-			if (mutation.type === "PLAYBACK_STATUS") {
-				sendPlaybackStatusDebounced(mutation.payload);
-			}
-		});
+const store = useStore();
+const connection = useConnection();
 
-		function sendPlaybackStatus(status: PlayerStatus) {
-			connection.send({
-				action: "status",
-				status: status,
-			});
-		}
+const playbackStatusUnsub = store.subscribe(mutation => {
+	if (mutation.type === "PLAYBACK_STATUS") {
+		sendPlaybackStatusDebounced(mutation.payload);
+	}
+});
 
-		const sendPlaybackStatusDebounced = _.debounce(sendPlaybackStatus, 200, { maxWait: 500 });
+function sendPlaybackStatus(status: PlayerStatus) {
+	connection.send({
+		action: "status",
+		status: status,
+	});
+}
 
-		onUnmounted(() => {
-			playbackStatusUnsub();
-		});
+const sendPlaybackStatusDebounced = _.debounce(sendPlaybackStatus, 200, { maxWait: 500 });
 
-		return {};
-	},
+onUnmounted(() => {
+	playbackStatusUnsub();
 });
-
-export default WorkaroundPlaybackStatusUpdater;
 </script>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 2fe2253a5..65df62b16 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -178,35 +178,22 @@
 	</div>
 </template>
 
-<script>
-import { defineComponent, computed } from "vue";
+<script lang="ts" setup>
+import { computed } from "vue";
 import { createRoomHelper } from "@/util/roomcreator";
 import { useStore } from "@/store";
 
-export const HomeView = defineComponent({
-	name: "home",
-	setup() {
-		const store = useStore();
+const store = useStore();
 
-		const gitCommit = __COMMIT_HASH__;
+const gitCommit = __COMMIT_HASH__;
 
-		async function createTempRoom() {
-			await createRoomHelper(store);
-		}
-
-		const cardHeight = computed(() => {
-			return 180;
-		});
+async function createTempRoom() {
+	await createRoomHelper(store);
+}
 
-		return {
-			createTempRoom,
-			cardHeight,
-			gitCommit,
-		};
-	},
+const cardHeight = computed(() => {
+	return 180;
 });
-
-export default HomeView;
 </script>
 
 <style lang="scss" scoped>