Reorganize components

src/components/Discover/Search.vue

@@ -20,8 +20,8 @@
 <script>
 import { NcAvatar, NcListItem } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
-import { debounce } from '../utils/debounce.js'
+import { debounce } from '../../utils/debounce.js'
-import { formatTimeAgo } from '../utils/time.js'
+import { formatTimeAgo } from '../../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 

src/components/Feed/Banner.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="header">
+		<img class="background" :src="imageUrl">
+		<div class="content">
+			<NcAvatar :display-name="author"
+				:is-no-user="true"
+				:url="imageUrl" />
+			<div class="infos">
+				<h1>{{ title }}</h1>
+				<a :href="link" target="_blank">
+					{{ author }}
+				</a>
+			</div>
+			<NcAppNavigationNew :text="t('Subscribe')">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+			</NcAppNavigationNew>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'Banner',
+	components: {
+		NcAvatar,
+		NcAppNavigationNew,
+		Plus,
+	},
+	props: {
+		author: {
+			type: String,
+			required: true,
+		},
+		imageUrl: {
+			type: String,
+			required: true,
+		},
+		link: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.header {
+		overflow: hidden;
+		position: relative;
+	}
+
+	.background {
+		filter: blur(.5rem) brightness(50%);
+		opacity: 0.4;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: auto;
+	}
+
+	.content {
+		position: relative;
+	}
+</style>

src/components/Sidebar/Item.vue

@@ -29,7 +29,7 @@ import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
-	name: 'FeedListItem',
+	name: 'Item',
 	components: {
 		Alert,
 		Delete,

src/views/Discover.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import AddRss from '../components/AddRss.vue'
+import AddRss from '../components/Discover/AddRss.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import { NcTextField } from '@nextcloud/vue'
-import Search from '../components/Search.vue'
+import Search from '../components/Discover/Search.vue'
-import TopList from '../components/TopList.vue'
+import TopList from '../components/Discover/TopList.vue'
 
 export default {
 	name: 'Discover',

src/views/Feed.vue

@@ -6,29 +6,18 @@
 				<Alert />
 			</template>
 		</NcEmptyContent>
-		<div v-if="feed" class="header">
+		<Banner v-if="feed"
-			<NcAvatar :display-name="feed.author"
+			:author="feed.author"
-				:is-no-user="true"
+			:image-url="feed.imageUrl"
-				:url="feed.imageUrl" />
+			:link="feed.link"
-			<div class="infos">
+			:title="feed.title" />
-				<h1>{{ feed.title }}</h1>
-				<a :href="feed.link" target="_blank">
-					{{ feed.author }}
-				</a>
-			</div>
-			<NcAppNavigationNew :text="t('Subscribe')">
-				<template #icon>
-					<Plus :size="20" />
-				</template>
-			</NcAppNavigationNew>
-		</div>
 	</fragment>
 </template>
 
 <script>
-import { NcAppNavigationNew, NcAvatar, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
+import Banner from '../components/Feed/Banner.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
@@ -36,11 +25,9 @@ export default {
 	name: 'Feed',
 	components: {
 		Alert,
-		NcAvatar,
+		Banner,
-		NcAppNavigationNew,
 		NcEmptyContent,
 		NcLoadingIcon,
-		Plus,
 	},
 	data() {
 		return {

src/views/Index.vue

@@ -11,7 +11,7 @@
 				</router-link>
 				<NcLoadingIcon v-if="loading" />
 				<ul v-if="!loading">
-					<FeedListItem v-for="subscriptionUrl of subscriptions"
+					<Item v-for="subscriptionUrl of subscriptions"
 						:key="subscriptionUrl"
 						:url="subscriptionUrl" />
 				</ul>
@@ -31,14 +31,14 @@ import {
 	NcAppNavigationNew,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
-import FeedListItem from '../components/FeedListItem.vue'
+import Item from '../components/Sidebar/Item.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'Index',
 	components: {
-		FeedListItem,
+		Item,
 		NcAppContent,
 		NcAppContentList,
 		NcAppNavigation,