Merge branch 'feat/player'

app/ui/RangeSlider.vue

@@ -3,20 +3,30 @@ interface SliderProps {
 	min?: number
 	max?: number
 	step?: number
+	dontUpdateImmediately?: boolean
 }
 
 const props = withDefaults(defineProps<SliderProps>(), {
 	min: 0,
 	max: 100,
 	step: 1,
+	dontUpdateImmediately: false,
 })
 
 const value = defineModel<number>()
 
 const sliderRef = useTemplateRef("slider-ref")
+
+const isDragging = ref(false)
+const localValue = ref<number | null>(null)
+
 const percentage = computed(() => {
+	const currentValue =
+		isDragging.value && props.dontUpdateImmediately
+			? (localValue.value ?? value.value ?? 0)
+			: (value.value ?? 0)
 	const range = props.max - props.min
-	return (((value.value ?? 0) - props.min) / range) * 100
+	return (((currentValue ?? 0) - props.min) / range) * 100
 })
 
 const updateFromEvent = (event: MouseEvent) => {
@@ -26,16 +36,27 @@ const updateFromEvent = (event: MouseEvent) => {
 	const x = event.clientX - rect.left
 	const ratio = Math.min(Math.max(x / rect.width, 0), 1)
 
-	value.value = props.min + ratio * (props.max - props.min)
+	const newValue = props.min + ratio * (props.max - props.min)
+
+	if (props.dontUpdateImmediately) localValue.value = newValue
+	else value.value = newValue
 }
 
 const onMouseDown = (event: MouseEvent) => {
+	isDragging.value = true
 	updateFromEvent(event)
 
 	const move = (e: MouseEvent) => updateFromEvent(e)
 	const up = () => {
 		window.removeEventListener("mousemove", move)
 		window.removeEventListener("mouseup", up)
+
+		isDragging.value = false
+
+		if (localValue.value != null && props.dontUpdateImmediately)
+			value.value = localValue.value
+
+		localValue.value = null
 	}
 
 	window.addEventListener("mousemove", move)
@@ -76,6 +97,5 @@ const onMouseDown = (event: MouseEvent) => {
 	height: 100%;
 	background: $color-accent;
 	border-radius: 999px;
-	transition: width 0.08s linear;
 }
 </style>

app/ui/Sidebar.vue

@@ -39,6 +39,7 @@
 		height: 100%;
 		overflow-y: auto;
 		padding: 2rem 3rem;
+		position: relative;
 	}
 }
 </style>

app/ui/ToastContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const { toasts, remove } = useToast()
+const song = useSong()
 </script>
 
 <template>
-	<div class="toast-container">
+	<div class="toast-container" :class="{ playerShown: song != undefined }">
 		<TransitionGroup name="toast">
 			<div
 				v-for="toast in toasts"
@@ -27,11 +28,17 @@ const { toasts, remove } = useToast()
 	right: 0;
 	z-index: 100;
 
-	padding: 20px;
+	padding: 2rem;
 
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+
+	transition: trasnform 0.2s ease-out;
+}
+
+.playerShown {
+	transform: translateY(-$player-height);
 }
 
 .toast {
@@ -44,7 +51,9 @@ const { toasts, remove } = useToast()
 
 	cursor: pointer;
 
-	transition: transform 0.2s ease, opacity 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		opacity 0.2s ease;
 }
 
 .toast-enter-from {