Improve style after vue update

src/components/Atoms/List.vue

@@ -1,22 +0,0 @@
-<template>
-	<ul :class="episode ? 'margin' : ''">
-		<slot />
-	</ul>
-</template>
-
-<script>
-export default {
-	name: 'List',
-	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
-	},
-}
-</script>
-
-<style scoped>
-	.margin {
-		margin-bottom: 6rem;
-	}
-</style>

src/components/Discover/AddRss.vue

@@ -1,7 +1,6 @@
 <template>
 	<ul>
-		<NcAppNavigationNewItem :loading="loading"
+		<NcAppNavigationNewItem :name="t('Add a RSS link')"
-			:name="t('Add a RSS link')"
 			@new-item="addSubscription">
 			<template #icon>
 				<Plus :size="20" />
@@ -20,12 +19,6 @@ export default {
 		NcAppNavigationNewItem,
 		Plus,
 	},
-	data() {
-		return {
-			loading: false,
-			feedUrl: '',
-		}
-	},
 	methods: {
 		addSubscription(feedUrl) {
 			this.$router.push(btoa(feedUrl))

src/components/Discover/Search.vue

@@ -1,5 +1,7 @@
 <template>
-	<List>
+	<div>
+		<NcLoadingIcon v-if="loading" />
+		<ul v-if="!loading">
 			<NcListItem v-for="feed in feeds"
 				:key="feed.link"
 				:details="formatTimeAgo(new Date(feed.fetchedAtUnix*1000))"
@@ -14,12 +16,12 @@
 					{{ feed.author }}
 				</template>
 			</NcListItem>
-	</List>
+		</ul>
+	</div>
 </template>
 
 <script>
-import { NcAvatar, NcListItem } from '@nextcloud/vue'
+import { NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
-import List from '../Atoms/List.vue'
 import axios from '@nextcloud/axios'
 import { debounce } from '../../utils/debounce.js'
 import { formatTimeAgo } from '../../utils/time.js'
@@ -29,9 +31,9 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Search',
 	components: {
-		List,
 		NcAvatar,
 		NcListItem,
+		NcLoadingIcon,
 	},
 	props: {
 		value: {
@@ -42,6 +44,7 @@ export default {
 	data() {
 		return {
 			feeds: [],
+			loading: false,
 		}
 	},
 	watch: {
@@ -53,6 +56,7 @@ export default {
 		formatTimeAgo,
 		search: debounce(async function value() {
 			try {
+				this.loading = true
 				const currentSearch = this.value
 				const feeds = await axios.get(generateUrl('/apps/repod/search?value={value}', { value: currentSearch }))
 				if (currentSearch === this.value) {
@@ -61,6 +65,10 @@ export default {
 			} catch (e) {
 				console.error(e)
 				showError(t('Could not fetch search results'))
+			} finally {
+				if (this.feeds) {
+					this.loading = false
+				}
 			}
 		}, 200),
 		toUrl(url) {

src/components/Feed/Banner.vue

@@ -5,6 +5,7 @@
 			<NcAvatar class="avatar"
 				:display-name="author"
 				:is-no-user="true"
+				:size="128"
 				:url="imageUrl" />
 			<div class="infos">
 				<h2>{{ title }}</h2>
@@ -13,7 +14,7 @@
 				</a>
 				<br><br>
 				<p>
-					<small>{{ description }}</small>
+					<small>{{ description | stripHTML }}</small>
 				</p>
 			</div>
 			<NcAppNavigationNew v-if="!isSubscribed"

src/components/Feed/Episodes.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
-		<NcLoadingIcon v-if="loading" />
+		<NcLoadingIcon v-if="loading" class="loading" />
-		<List v-if="!loading">
+		<ul v-if="!loading">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.episodeGuid"
 				:active="isCurrentEpisode(episode)"
@@ -33,14 +33,13 @@
 					</NcActionButton>
 				</template>
 			</NcListItem>
-		</List>
+		</ul>
 	</div>
 </template>
 
 <script>
 import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
 import { formatTimeAgo, formatTimer } from '../../utils/time.js'
-import List from '../Atoms/List.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
@@ -50,7 +49,6 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Episodes',
 	components: {
-		List,
 		NcActionButton,
 		NcAvatar,
 		NcListItem,
@@ -101,4 +99,8 @@ export default {
 	.ended {
 		opacity: .5;
 	}
+
+	.loading {
+		margin: 2rem 0;
+	}
 </style>

src/components/Sidebar/Subscriptions.vue

@@ -9,11 +9,11 @@
 				</NcAppNavigationNew>
 			</router-link>
 			<NcLoadingIcon v-if="loading" />
-			<List v-if="!loading">
+			<ul v-if="!loading">
 				<Item v-for="subscriptionUrl of subscriptions"
 					:key="subscriptionUrl"
 					:url="subscriptionUrl" />
-			</List>
+			</ul>
 		</NcAppContentList>
 	</NcAppNavigation>
 </template>
@@ -26,7 +26,6 @@ import {
 	NcLoadingIcon,
 } from '@nextcloud/vue'
 import Item from './Item.vue'
-import List from '../Atoms/List.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { showError } from '@nextcloud/dialogs'
 
@@ -34,7 +33,6 @@ export default {
 	name: 'Subscriptions',
 	components: {
 		Item,
-		List,
 		NcAppContentList,
 		NcAppNavigation,
 		NcAppNavigationNew,

src/main.js

@@ -15,6 +15,12 @@ Vue.mixin({ methods: { t, n } })
 
 Vue.prototype.AppConfig = window.oc_appconfig
 
+Vue.filter('stripHTML', (value) => {
+	const div = document.createElement('div')
+	div.innerHTML = value
+	return div.textContent || div.innerText || ''
+})
+
 export default new Vue({
 	el: '#content',
 	router,

src/views/Feed.vue

@@ -1,6 +1,6 @@
 <template>
 	<NcAppContent>
-		<NcLoadingIcon v-if="loading" />
+		<NcLoadingIcon v-if="loading" class="loading" />
 		<NcEmptyContent v-if="failed" :name="t('Error loading feed')">
 			<template #icon>
 				<Alert />
@@ -59,3 +59,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+	.loading {
+		margin: 2rem 0;
+	}
+</style>