feat: ✨ add multiselect

src/components/Feed/Episode.vue

@@ -33,7 +33,7 @@
 			</NcActionButton>
 		</template>
 		<template #extra>
-			<NcActions>
+			<NcActions v-if="displayActions">
 				<NcActionButton
 					v-if="episode.duration"
 					:aria-label="t('repod', 'Read')"
@@ -77,7 +77,12 @@
 			<NcAvatar
 				:display-name="episode.name"
 				:is-no-user="true"
-				:url="episode.image" />
+				:url="episode.image"
+				@click.stop="$emit('select', episode)">
+				<template #icon>
+					<CheckIcon v-if="selected" class="progress" :size="20" />
+				</template>
+			</NcAvatar>
 		</template>
 		<template #indicator>
 			<NcProgressBar
@@ -108,6 +113,7 @@ import {
 } from '../../utils/time.ts'
 import { hasEnded, isListening } from '../../utils/status.ts'
 import { mapActions, mapState } from 'pinia'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import type { EpisodeInterface } from '../../utils/types.ts'
 import Modal from '../Atoms/Modal.vue'
@@ -126,6 +132,7 @@ import { usePlayer } from '../../store/player.ts'
 export default {
 	name: 'Episode',
 	components: {
+		CheckIcon,
 		DownloadIcon,
 		Modal,
 		NcActionButton,
@@ -142,6 +149,10 @@ export default {
 		StopIcon,
 	},
 	props: {
+		displayActions: {
+			type: Boolean,
+			default: true,
+		},
 		episode: {
 			type: Object as () => EpisodeInterface,
 			required: true,
@@ -150,11 +161,16 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
 		url: {
 			type: String,
 			required: true,
 		},
 	},
+	emits: ['select'],
 	data: () => ({
 		loading: false,
 		modalEpisode: null as EpisodeInterface | null,

src/components/Feed/Episodes.vue

@@ -5,8 +5,11 @@
 			<Episode
 				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
+				:display-actions="!selected.length"
 				:episode="episode"
-				:url="url" />
+				:selected="selected.includes(episode)"
+				:url="url"
+				@select="select" />
 		</ul>
 	</div>
 </template>
@@ -34,6 +37,7 @@ export default {
 	data: () => ({
 		episodes: [] as EpisodeInterface[],
 		loading: true,
+		selected: [] as EpisodeInterface[],
 	}),
 	computed: {
 		...mapState(usePlayer, ['episode']),
@@ -88,6 +92,13 @@ export default {
 	methods: {
 		hasEnded,
 		isListening,
+		select(episode: EpisodeInterface) {
+			if (this.selected.includes(episode)) {
+				this.selected = this.selected.filter((e) => e !== episode)
+			} else {
+				this.selected.push(episode)
+			}
+		},
 	},
 }
 </script>