feat: Add scaling toggle to achievement progress

This commit introduces a new feature that allows users to toggle the scaling of the achievement progress bars on the achievement details page.

- Adds a toggle switch next to the "Achievement Progress" heading.
- When toggled, the progress bars are scaled to the highest achievement count among all users, instead of the achievement's target value.
- This provides a better visual representation of user progress when the target value is very high.

Author: google-labs-jules[bot]

app/components/ToggleButton.vue

@@ -0,0 +1,81 @@
+<template>
+	<label class="switch">
+		<input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+		<span class="slider round"></span>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		value: {
+			type: Boolean,
+			required: true,
+		},
+	},
+};
+</script>
+
+<style scoped>
+.switch {
+	position: relative;
+	display: inline-block;
+	width: 30px;
+	height: 17px;
+	vertical-align: middle;
+	margin-left: 0.5rem;
+}
+
+.switch input {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #ccc;
+	-webkit-transition: .4s;
+	transition: .4s;
+}
+
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 13px;
+	width: 13px;
+	left: 2px;
+	bottom: 2px;
+	background-color: white;
+	-webkit-transition: .4s;
+	transition: .4s;
+}
+
+input:checked + .slider {
+	background-color: #2196F3;
+}
+
+input:focus + .slider {
+	box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+	-webkit-transform: translateX(13px);
+	-ms-transform: translateX(13px);
+	transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+	border-radius: 17px;
+}
+
+.slider.round:before {
+	border-radius: 50%;
+}
+</style>