send songs in request body, not description

src/components/songs.vue

@@ -11,9 +11,9 @@
 	const copy = (title) => {
 		navigator.clipboard.writeText(title);
 	}
-	const paste = (title) => {
-		if(copiedSongs.value.indexOf(title) === -1){
-			copiedSongs.value.push(title)
+	const paste = (song) => {
+		if(copiedSongs.value.findIndex(copiedSong=>copiedSong.id === song.id) === -1){
+			copiedSongs.value.push(song)
 		}
 	}
 </script>
@@ -36,7 +36,7 @@
 					</a>
 					<br/>
 					<button @click="copy(song.title)">Copy</button>
-					<button @click="paste(song.title)">Paste</button>
+					<button @click="paste(song)">Paste</button>
 				</td>
 				<td>{{song.notes}}</td>
 			</tr>

src/components/timer.vue

@@ -40,7 +40,7 @@
 	} from '../libs/state.js'
 
 	const removeSong = (song) => {
-		copiedSongs.value = copiedSongs.value.filter(curr => curr !== song)
+		copiedSongs.value = copiedSongs.value.filter(curr => curr.id !== song.id)
 	}
 
 	export default {
@@ -71,13 +71,11 @@
 				const reqBody = {
 					description:description.value,
 					seconds: this.totalSeconds,
-					practice_category_id: currentWorkingCategory.value.id
+					practice_category_id: currentWorkingCategory.value.id,
 				}
 
-				if(reqBody.description && copiedSongs.value.length > 0){
-					reqBody.description += `: ${copiedSongs.value.join(', ')}`
-				} else if (copiedSongs.value.length > 0){
-					reqBody.description = `${copiedSongs.value.join(', ')}`
+				if(copiedSongs.value.length > 0){
+					reqBody.songs = copiedSongs.value
 				}
 
 				if(this.comments){
@@ -230,8 +228,9 @@
 		<label>Description</label>
 		<input v-model="description" ref="descriptionInput" type="text" maxlength="128"/>
 
+		<label>Songs</label>
 		<ul v-if="copiedSongs.length > 0">
-			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song}}</li>
+			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song.title}}</li>
 		</ul>
 
 		<label>Seconds</label>