Continue to work on Discover

src/components/Top.vue

@@ -1,5 +1,11 @@
 <template>
 	<fragment>
+		<p class="more">
+			<span>{{ t('repod', 'Discover') }}</span>
+			<NcButton v-if="showMore" @click="more">
+				{{ t('repod', 'More') }}
+			</NcButton>
+		</p>
 		<p>
 			<NcLoadingIcon v-if="loading" />
 			<ul v-if="!loading" class="tops">
@@ -7,11 +13,7 @@
 					<img :src="top.artworkUrl100" :alt="top.artistName" :title="top.artistName">
 				</li>
 			</ul>
-		</p>
+			<span class="caption">{{ t('repod', 'Suggests by iTunes') }}</span>
-		<p>
-			<NcButton v-if="showMore" @click="more">
-				{{ t('repod', 'More') }}
-			</NcButton>
 		</p>
 	</fragment>
 </template>
@@ -53,7 +55,7 @@ export default {
 				this.tops = top.data
 			} catch (e) {
 				console.error(e)
-				showError(t('repod', 'Could not fetch subscriptions'))
+				showError(t('repod', 'Could not fetch tops'))
 			}
 
 			this.loading = false
@@ -78,4 +80,16 @@ export default {
 		height: 100%;
 		width: 100%;
 	}
+
+	.more {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.caption {
+		float: right;
+		font-size: small;
+		margin: .5rem;
+	}
 </style>

src/views/Discover.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="main">
 		<p>
-			<NcTextField :label="t('repod', 'Find a podcast')" value="">
+			<NcTextField :value.sync="search" :label="t('repod', 'Find a podcast')">
 				<Magnify />
 			</NcTextField>
 		</p>
-		<Top />
+		<Top v-if="!search" />
 	</div>
 </template>
 
@@ -23,6 +23,7 @@ export default {
 	},
 	data() {
 		return {
+			search: '',
 		}
 	},
 	computed: {
@@ -39,6 +40,6 @@ export default {
 		margin: 11px 55px;
 		display: flex;
 		flex-direction: column;
-		gap: 2rem;
+		gap: 1rem;
 	}
 </style>