From c97e927a151f1c5291cc086b59e9ac6d00a9d237 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Wed, 7 Aug 2024 22:05:50 +0200
Subject: [PATCH] style: :lipstick: use the new extra-actions on NcListItem

---
 src/components/Feed/Episodes.vue | 104 +++++++++++++++----------------
 1 file changed, 50 insertions(+), 54 deletions(-)

diff --git a/src/components/Feed/Episodes.vue b/src/components/Feed/Episodes.vue
index c81be21..0c9df96 100644
--- a/src/components/Feed/Episodes.vue
+++ b/src/components/Feed/Episodes.vue
@@ -12,73 +12,69 @@
 				:name="episode.name"
 				:title="episode.description"
 				@click="modalEpisode = episode">
-				<template #actions>
-					<NcActionButton
+				<template #extra-actions>
+					<NcButton
 						v-if="!isCurrentEpisode(episode)"
 						:aria-label="t('repod', 'Play')"
-						:name="t('repod', 'Play')"
 						:title="t('repod', 'Play')"
 						@click="load(episode)">
 						<template #icon>
 							<PlayIcon :size="20" />
 						</template>
-					</NcActionButton>
-					<NcActionButton
+					</NcButton>
+					<NcButton
 						v-if="isCurrentEpisode(episode)"
 						:aria-label="t('repod', 'Stop')"
-						:name="t('repod', 'Stop')"
 						:title="t('repod', 'Stop')"
 						@click="load(null)">
 						<template #icon>
 							<StopIcon :size="20" />
 						</template>
-					</NcActionButton>
+					</NcButton>
 				</template>
-				<template #extra>
-					<NcActions>
-						<NcActionButton
-							v-if="episode.duration && !hasEnded(episode)"
-							:aria-label="t('repod', 'Mark as read')"
-							:disabled="loadingAction"
-							:name="t('repod', 'Mark as read')"
-							:title="t('repod', 'Mark as read')"
-							@click="markAs(episode, true)">
-							<template #icon>
-								<PlaylistPlayIcon :size="20" />
-							</template>
-						</NcActionButton>
-						<NcActionButton
-							v-if="episode.duration && hasEnded(episode)"
-							:aria-label="t('repod', 'Mark as unread')"
-							:disabled="loadingAction"
-							:name="t('repod', 'Mark as unread')"
-							:title="t('repod', 'Mark as unread')"
-							@click="markAs(episode, false)">
-							<template #icon>
-								<PlaylistRemoveIcon :size="20" />
-							</template>
-						</NcActionButton>
-						<NcActionLink
-							v-if="episode.link"
-							:href="episode.link"
-							:name="t('repod', 'Open website')"
-							target="_blank"
-							:title="t('repod', 'Open website')">
-							<template #icon>
-								<OpenInNewIcon :size="20" />
-							</template>
-						</NcActionLink>
-						<NcActionLink
-							v-if="episode.url"
-							:href="episode.url"
-							:name="t('repod', 'Download')"
-							target="_blank"
-							:title="t('repod', 'Download')">
-							<template #icon>
-								<DownloadIcon :size="20" />
-							</template>
-						</NcActionLink>
-					</NcActions>
+				<template #actions>
+					<NcActionButton
+						v-if="episode.duration && !hasEnded(episode)"
+						:aria-label="t('repod', 'Mark as read')"
+						:disabled="loadingAction"
+						:name="t('repod', 'Mark as read')"
+						:title="t('repod', 'Mark as read')"
+						@click="markAs(episode, true)">
+						<template #icon>
+							<PlaylistPlayIcon :size="20" />
+						</template>
+					</NcActionButton>
+					<NcActionButton
+						v-if="episode.duration && hasEnded(episode)"
+						:aria-label="t('repod', 'Mark as unread')"
+						:disabled="loadingAction"
+						:name="t('repod', 'Mark as unread')"
+						:title="t('repod', 'Mark as unread')"
+						@click="markAs(episode, false)">
+						<template #icon>
+							<PlaylistRemoveIcon :size="20" />
+						</template>
+					</NcActionButton>
+					<NcActionLink
+						v-if="episode.link"
+						:href="episode.link"
+						:name="t('repod', 'Open website')"
+						target="_blank"
+						:title="t('repod', 'Open website')">
+						<template #icon>
+							<OpenInNewIcon :size="20" />
+						</template>
+					</NcActionLink>
+					<NcActionLink
+						v-if="episode.url"
+						:href="episode.url"
+						:name="t('repod', 'Download')"
+						target="_blank"
+						:title="t('repod', 'Download')">
+						<template #icon>
+							<DownloadIcon :size="20" />
+						</template>
+					</NcActionLink>
 				</template>
 				<template #icon>
 					<NcAvatar
@@ -116,8 +112,8 @@
 import {
 	NcActionButton,
 	NcActionLink,
-	NcActions,
 	NcAvatar,
+	NcButton,
 	NcListItem,
 	NcModal,
 	NcProgressBar,
@@ -149,8 +145,8 @@ export default {
 		Modal,
 		NcActionButton,
 		NcActionLink,
-		NcActions,
 		NcAvatar,
+		NcButton,
 		NcListItem,
 		NcModal,
 		NcProgressBar,