fix(SearchQueryItem): design now more closely aligned to SongItem's

Signed-off-by: Jonathan Graham <theflametrooper@gmail.com>

frontend/src/components/AddToPlaylistDropdown.vue

@@ -145,8 +145,9 @@ export default {
 		},
 		hasSong(playlist) {
 			return (
-				playlist.songs.map(song => song._id).indexOf(this.song._id) !==
-				-1
+				playlist.songs
+					.map(song => song.youtubeId)
+					.indexOf(this.song.youtubeId) !== -1
 			);
 		},
 		createPlaylist() {

frontend/src/components/SearchQueryItem.vue

@@ -17,8 +17,37 @@
 				</a>
 			</div>
 		</div>
+
 		<div class="universal-item-actions">
-			<slot name="actions" />
+			<tippy
+				:touch="true"
+				:interactive="true"
+				placement="left"
+				theme="songActions"
+				ref="songActions"
+				trigger="click"
+			>
+				<i
+					class="material-icons action-dropdown-icon"
+					content="Song Options"
+					v-tippy
+					>more_horiz</i
+				>
+
+				<template #content>
+					<div class="icons-group">
+						<a
+							target="_blank"
+							:href="`https://www.youtube.com/watch?v=${result.id}`"
+							content="View on Youtube"
+							v-tippy
+						>
+							<div class="youtube-icon"></div>
+						</a>
+						<slot name="actions" />
+					</div>
+				</template>
+			</tippy>
 		</div>
 	</div>
 </template>
@@ -35,10 +64,6 @@ export default {
 </script>
 
 <style lang="scss">
-.search-query-item .universal-item-actions i {
-	color: var(--white) !important;
-}
-
 .search-query-actions-enter-active {
 	transition: all 0.2s ease;
 }
@@ -61,7 +86,7 @@ export default {
 <style lang="scss" scoped>
 .night-mode {
 	.search-query-item {
-		background-color: var(--dark-grey-3) !important;
+		background-color: var(--dark-grey-2) !important;
 		border: 0 !important;
 	}
 }
@@ -94,12 +119,12 @@ export default {
 		width: calc(100% - 65px);
 
 		.item-title {
-			font-size: 16px;
+			font-size: 20px;
 		}
 
 		.item-description {
 			margin: 0;
-			font-size: 12px;
+			font-size: 14px;
 		}
 
 		*:not(i) {

frontend/src/components/SongItem.vue

@@ -270,6 +270,10 @@ export default {
 }
 
 .song-item {
+	&:not(:last-of-type) {
+		margin-bottom: 10px;
+	}
+
 	.thumbnail-and-info,
 	.duration-and-actions {
 		display: flex;

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="youtube-tab section">
-		<div class="musare-songs">
+		<div>
 			<label class="label"> Search for a song on Musare </label>
 			<div class="control is-grouped input-with-button">
 				<p class="control is-expanded">
@@ -19,12 +19,16 @@
 					>
 				</p>
 			</div>
-			<div v-if="musareSearch.results.length > 0">
+			<div
+				v-if="musareSearch.results.length > 0"
+				class="song-query-results"
+			>
 				<song-item
 					v-for="song in musareSearch.results"
 					:key="song._id"
 					:song="song"
 				/>
+
 				<button
 					v-if="resultsLeftCount > 0"
 					class="button is-primary load-more-button"
@@ -35,6 +39,8 @@
 			</div>
 		</div>
 
+		<br v-if="musareSearch.results.length > 0" />
+
 		<div>
 			<label class="label"> Search for a song from YouTube </label>
 			<div class="control is-grouped input-with-button">
@@ -61,15 +67,28 @@
 
 			<div
 				v-if="youtubeSearch.songs.results.length > 0"
-				id="song-query-results"
+				class="song-query-results"
 			>
 				<search-query-item
-					v-for="(result, index) in youtubeSearch.songs.results"
+					v-for="result in youtubeSearch.songs.results"
 					:key="result.id"
 					:result="result"
 				>
 					<template #actions>
-						<transition name="search-query-actions" mode="out-in">
+						<add-to-playlist-dropdown
+							:song="{ youtubeId: result.id }"
+							placement="top-end"
+						>
+							<template #button>
+								<i
+									class="material-icons add-to-playlist-icon"
+									content="Add Song to Playlist"
+									v-tippy
+									>playlist_add</i
+								>
+							</template>
+						</add-to-playlist-dropdown>
+						<!-- <transition name="search-query-actions" mode="out-in">
 							<a
 								class="button is-success"
 								v-if="result.isAddedToQueue"
@@ -95,7 +114,7 @@
 								>
 								Add to playlist
 							</a>
-						</transition>
+						</transition> -->
 					</template>
 				</search-query-item>
 
@@ -118,10 +137,11 @@ import SearchYoutube from "@/mixins/SearchYoutube.vue";
 import SearchMusare from "@/mixins/SearchMusare.vue";
 
 import SongItem from "@/components/SongItem.vue";
-import SearchQueryItem from "../../../SearchQueryItem.vue";
+import AddToPlaylistDropdown from "@/components/AddToPlaylistDropdown.vue";
+import SearchQueryItem from "@/components/SearchQueryItem.vue";
 
 export default {
-	components: { SearchQueryItem, SongItem },
+	components: { SearchQueryItem, SongItem, AddToPlaylistDropdown },
 	mixins: [SearchYoutube, SearchMusare],
 	computed: {
 		...mapState("modals/editPlaylist", {
@@ -165,7 +185,7 @@ export default {
 
 <style lang="scss" scoped>
 .youtube-tab {
-	#song-query-results {
+	.song-query-results {
 		padding: 10px;
 		margin-top: 10px;
 		border: 1px solid var(--light-grey-3);
@@ -186,7 +206,7 @@ export default {
 }
 
 @media screen and (max-width: 1300px) {
-	.youtube-tab #song-query-results,
+	.youtube-tab .song-query-results,
 	.section {
 		max-width: 100% !important;
 	}