Pic does something

src/components/TopItem.vue

@@ -0,0 +1,49 @@
+<template>
+	<a @click="addSubscription">
+		<img :src="imgUrl" :alt="author" :title="author">
+	</a>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+
+export default {
+	name: 'TopItem',
+	components: {},
+	props: {
+		xmlUrl: {
+			type: String,
+			required: true,
+		},
+		imgUrl: {
+			type: String,
+			required: true,
+		},
+		author: {
+			type: String,
+			required: true,
+		},
+	},
+	methods: {
+		async addSubscription() {
+			try {
+				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.xmlUrl], remove: [] })
+			} catch (e) {
+				console.error(e)
+				showError(t('Error while adding the feed'))
+			}
+
+			this.$store.dispatch('subscriptions/fetch')
+		},
+	},
+}
+</script>
+
+<style scoped>
+	img {
+		height: 100%;
+		width: 100%;
+	}
+</style>

src/components/TopList.vue

@@ -12,7 +12,7 @@
 			<NcLoadingIcon v-if="loading" />
 			<ul v-if="!loading" class="tops">
 				<li v-for="top in tops" :key="top.id">
-					<img :src="top.imgURL" :alt="top.author" :title="top.author">
+					<TopItem :xml-url="top.xmlURL" :img-url="top.imgURL" :author="top.author" />
 				</li>
 			</ul>
 			<span class="caption">{{ t('Suggests by fyyd') }}</span>
@@ -22,15 +22,17 @@
 
 <script>
 import { NcLoadingIcon, NcSelect } from '@nextcloud/vue'
+import TopItem from './TopItem.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
-	name: 'Top',
+	name: 'TopList',
 	components: {
 		NcLoadingIcon,
 		NcSelect,
+		TopItem,
 	},
 	data() {
 		return {
@@ -72,11 +74,6 @@ export default {
 		flex-basis: 15%;
 	}
 
-	.tops li img {
-		height: 100%;
-		width: 100%;
-	}
-
 	.select {
 		min-width: 160px;
 	}

src/views/Discover.vue

@@ -5,7 +5,7 @@
 				<Magnify :size="20" />
 			</NcTextField>
 		</p>
-		<Top v-if="!search" />
+		<TopList v-if="!search" />
 		<AddRss v-if="!search" />
 	</div>
 </template>
@@ -14,7 +14,7 @@
 import AddRss from '../components/AddRss.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import { NcTextField } from '@nextcloud/vue'
-import Top from '../components/Top.vue'
+import TopList from '../components/TopList.vue'
 
 export default {
 	name: 'Discover',
@@ -22,7 +22,7 @@ export default {
 		AddRss,
 		Magnify,
 		NcTextField,
-		Top,
+		TopList,
 	},
 	data() {
 		return {