Added more info to list view

package-lock.json

@@ -12,7 +12,8 @@
 				"@nextcloud/dialogs": "^3.1.2",
 				"@nextcloud/router": "^2.0.0",
 				"@nextcloud/vue": "^5.3.1",
-				"vue": "^2.7.0"
+				"vue": "^2.7.7",
+				"vue-material-design-icons": "^5.1.2"
 			},
 			"devDependencies": {
 				"@nextcloud/babel-config": "^1.0.0",
@@ -2521,9 +2522,9 @@
 			}
 		},
 		"node_modules/@vue/compiler-sfc": {
-			"version": "2.7.4",
+			"version": "2.7.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
-			"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==",
+			"integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
 			"dependencies": {
 				"@babel/parser": "^7.18.4",
 				"postcss": "^8.4.14",
@@ -10867,11 +10868,11 @@
 			"peer": true
 		},
 		"node_modules/vue": {
-			"version": "2.7.4",
+			"version": "2.7.7",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
-			"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==",
+			"integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
 			"dependencies": {
-				"@vue/compiler-sfc": "2.7.4",
+				"@vue/compiler-sfc": "2.7.7",
 				"csstype": "^3.1.0"
 			}
 		},
@@ -11023,9 +11024,9 @@
 			}
 		},
 		"node_modules/vue-material-design-icons": {
-			"version": "5.1.1",
+			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
-			"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
+			"integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
 		},
 		"node_modules/vue-multiselect": {
 			"version": "2.1.6",
@@ -13552,9 +13553,9 @@
 			}
 		},
 		"@vue/compiler-sfc": {
-			"version": "2.7.4",
+			"version": "2.7.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
-			"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==",
+			"integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
 			"requires": {
 				"@babel/parser": "^7.18.4",
 				"postcss": "^8.4.14",
@@ -20002,11 +20003,11 @@
 			"peer": true
 		},
 		"vue": {
-			"version": "2.7.4",
+			"version": "2.7.7",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
-			"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==",
+			"integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
 			"requires": {
-				"@vue/compiler-sfc": "2.7.4",
+				"@vue/compiler-sfc": "2.7.7",
 				"csstype": "^3.1.0"
 			}
 		},
@@ -20120,9 +20121,9 @@
 			}
 		},
 		"vue-material-design-icons": {
-			"version": "5.1.1",
+			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
-			"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
+			"integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
 		},
 		"vue-multiselect": {
 			"version": "2.1.6",

package.json

@@ -30,7 +30,8 @@
 		"@nextcloud/dialogs": "^3.1.2",
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^5.3.1",
-		"vue": "^2.7.0"
+		"vue": "^2.7.7",
+		"vue-material-design-icons": "^5.1.2"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"

src/views/PersonalSettingsPage.vue

@@ -2,30 +2,64 @@
 	<div class="gpoddersync_settings">
 		<SettingsSection :title="t('gpoddersync', 'Synced subscriptions')"
 			:description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')">
-			<span>Hello <span class="red_text">world</span> :)</span>
+			<div v-if="subscriptions.length > 0">
-			<ul>
+				<ul>
-				<ListItem v-for="sub in subscriptions"
+					<ListItem v-for="sub in subscriptions"
-					:key="sub.url"
+						:key="sub.url"
-					:title="sub.podcast?.title ?? sub.url">
+						:title="sub.podcast?.title ?? sub.url"
+						:details="formatSubscriptionDetails(sub)">
+						<template #icon>
+							<Avatar :size="44"
+								:url="sub.podcast?.image"
+								:display-name="sub.podcast?.author" />
+						</template>
+						<template #subtitle>
+							{{ sub.podcast?.description }}
+						</template>
+						<template #actions>
+							<ActionLink :href="sub.podcast?.link"
+								target="_blank"
+								icon="icon-external">
+								Podcast's homepage
+							</ActionLink>
+							<ActionLink :href="sub.url"
+								target="_blank">
+								<template #icon>
+									<Rss />
+								</template>
+								RSS feed
+							</ActionLink>
+						</template>
+					</ListItem>
+				</ul>
+			</div>
+			<div v-if="subscriptions.length === 0 && !isLoading">
+				<EmptyContent>
+					No subscriptions
 					<template #icon>
-						<Avatar :size="44"
+						<Podcast />
-							:url="sub.podcast?.image"
-							:display-name="sub.podcast?.author" />
 					</template>
-					<template #subtitle>
+					<template #desc>
-						{{ sub.podcast?.description }}
+						Start syncing podcasts from your favorite podcast client, such as
+						<a class="link" href="https://antennapod.org/" target="_blank">Antennapod</a>,
+						and then refresh this page to see them pop up here.
 					</template>
-				</ListItem>
+				</EmptyContent>
-			</ul>
+			</div>
 		</SettingsSection>
 	</div>
 </template>
 
 <script>
+import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import ListItem from '@nextcloud/vue/dist/Components/ListItem'
 import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
 
+import Podcast from 'vue-material-design-icons/Podcast'
+import Rss from 'vue-material-design-icons/Rss.vue'
+
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
@@ -33,8 +67,12 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'PersonalSettingsPage',
 	components: {
+		ActionLink,
 		Avatar,
+		EmptyContent,
 		ListItem,
+		Podcast,
+		Rss,
 		SettingsSection,
 	},
 	data() {
@@ -57,11 +95,26 @@ export default {
 			this.isLoading = false
 		}
 	},
+	methods: {
+		formatSubscriptionDetails(sub) {
+			if (sub.listenedSeconds <= 0) {
+				return '(no time listened)'
+			}
+			const hours = Math.floor(sub.listenedSeconds / 3600)
+			const modMinutes = Math.floor(sub.listenedSeconds / 60) % 60
+			if (hours === 0) {
+				const modSeconds = sub.listenedSeconds % 60
+				return `(${modMinutes}min ${modSeconds}s listened)`
+			}
+			return `(${hours}h ${modMinutes}min listened)`
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
-.red_text {
+a.link {
-	color: red;
+	text-decoration: underline;
+	color: var(--color-primary-element-light);
 }
 </style>