feat: 🚧 wip on showing favorites

lib/Controller/PageController.php

@@ -8,10 +8,15 @@ use OCA\RePod\AppInfo\Application;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\IConfig;
 use OCP\Util;
 
 class PageController extends Controller
 {
+	public function __construct(
+		private IConfig $config
+	) {}
+
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
@@ -23,6 +28,13 @@ class PageController extends Controller
 		$csp->addAllowedImageDomain('*');
 		$csp->addAllowedMediaDomain('*');
 
+		if ($this->config->getSystemValueBool('debug', false)) {
+			/** @psalm-suppress DeprecatedInterface */
+			$csp->allowEvalScript();
+			$csp->addAllowedConnectDomain('*');
+			$csp->addAllowedScriptDomain('*');
+		}
+
 		$response = new TemplateResponse(Application::APP_ID, 'main');
 		$response->setContentSecurityPolicy($csp);
 

package.json

@@ -38,6 +38,7 @@
     "@nextcloud/stylelint-config": "^3.0.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-pinia": "^0.2.0",
-    "eslint-plugin-prettier": "^5.2.1"
+    "eslint-plugin-prettier": "^5.2.1",
+    "vite-plugin-vue-devtools": "^7.3.8"
   }
 }

src/components/Discover/Search.vue

@@ -62,12 +62,10 @@ export default {
 			required: true,
 		},
 	},
-	data() {
-		return {
-			feeds: [],
-			loading: false,
-		}
-	},
+	data: () => ({
+		feeds: [],
+		loading: false,
+	}),
 	computed: {
 		...mapState(useSubscriptions, ['subs']),
 	},

src/components/Discover/Toplist.vue

@@ -30,12 +30,10 @@ export default {
 			required: true,
 		},
 	},
-	data() {
-		return {
-			loading: true,
-			tops: [],
-		}
-	},
+	data: () => ({
+		loading: true,
+		tops: [],
+	}),
 	computed: {
 		title() {
 			switch (this.type) {

src/components/Feed/Episodes.vue

@@ -158,14 +158,12 @@ export default {
 		PlaylistRemoveIcon,
 		StopIcon,
 	},
-	data() {
-		return {
-			episodes: [],
-			loading: true,
-			loadingAction: false,
-			modalEpisode: null,
-		}
-	},
+	data: () => ({
+		episodes: [],
+		loading: true,
+		loadingAction: false,
+		modalEpisode: null,
+	}),
 	computed: {
 		...mapState(usePlayer, ['episode']),
 		...mapState(useSettings, ['filters']),

src/components/Home/Item.vue

@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<Loading v-if="!currentFavoriteData" class="loading" />
+		<NcAvatar v-if="currentFavoriteData" />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'pinia';
+import Loading from '../Atoms/Loading.vue'
+import { NcAvatar } from '@nextcloud/vue'
+import { useSubscriptions } from '../../store/subscriptions';
+
+export default {
+	name: 'Item',
+	components: {
+		Loading,
+		NcAvatar,
+	},
+	props: {
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+    computed: {
+        ...mapState(useSubscriptions, ['favs']),
+        currentFavoriteData() {
+            return this.favs.find((fav) => fav.url === this.url)?.data
+        },
+    }
+}
+</script>

src/components/Player/Infos.vue

@@ -32,11 +32,9 @@ export default {
 		Modal,
 		NcModal,
 	},
-	data() {
-		return {
-			modal: false,
-		}
-	},
+	data: () => ({
+		modal: false,
+	}),
 	computed: {
 		...mapState(usePlayer, ['episode', 'podcastUrl']),
 		hash() {

src/components/Player/Volume.vue

@@ -46,11 +46,9 @@ export default {
 		VolumeMediumIcon,
 		VolumeMuteIcon,
 	},
-	data() {
-		return {
-			volumeMuted: 0,
-		}
-	},
+	data: () => ({
+		volumeMuted: 0,
+	}),
 	computed: {
 		...mapState(usePlayer, ['volume']),
 	},

src/components/Settings/Import.vue

@@ -44,12 +44,10 @@ export default {
 		NcAppNavigationItem,
 		NcModal,
 	},
-	data() {
-		return {
-			loading: false,
-			modal: false,
-		}
-	},
+	data: () => ({
+		loading: false,
+		modal: false,
+	}),
 	methods: {
 		generateUrl,
 		async importOpml(event) {

src/components/Sidebar/Item.vue

@@ -69,20 +69,18 @@ export default {
 			required: true,
 		},
 	},
-	data() {
-		return {
-			failed: false,
-			loading: true,
-			feed: null,
-		}
-	},
+	data: () => ({
+		failed: false,
+		loading: true,
+		feed: null,
+	}),
 	computed: {
-		...mapState(useSubscriptions, ['favorites']),
+		...mapState(useSubscriptions, ['favs']),
 		hash() {
 			return toUrl(this.url)
 		},
 		isFavorite() {
-			return this.favorites.includes(this.url)
+			return this.favs.map((fav) => fav.url).includes(this.url)
 		},
 	},
 	async mounted() {
@@ -96,6 +94,7 @@ export default {
 				),
 			)
 			this.feed = podcastData.data.data
+			this.editFavoriteData(this.url, podcastData.data.data)
 		} catch (e) {
 			this.failed = true
 			console.error(e)
@@ -104,7 +103,7 @@ export default {
 		}
 	},
 	methods: {
-		...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'removeFavorite']),
+		...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'editFavoriteData', 'removeFavorite']),
 		async deleteSubscription() {
 			if (
 				confirm(
@@ -129,7 +128,7 @@ export default {
 		},
 		switchFavorite(value) {
 			if (value) {
-				if (this.favorites.length >= 10) {
+				if (this.favs.length >= 10) {
 					showError(t('repod', 'You can only have 10 favorites'))
 					return
 				}

src/components/Sidebar/Subscriptions.vue

@@ -11,7 +11,18 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Item v-for="url of subs" :key="url" :url="url" />
+					<Item
+						v-for="url of favs
+							.sort((fav) => fav.lastPub)
+							.map((fav) => fav.url)"
+						:key="url"
+						:url="url" />
+					<Item
+						v-for="url of subs.filter(
+							(sub) => !favs.map((fav) => fav.url).includes(sub),
+						)"
+						:key="url"
+						:url="url" />
 				</NcAppNavigationList>
 			</NcAppContentList>
 		</template>
@@ -48,13 +59,11 @@ export default {
 		PlusIcon,
 		Settings,
 	},
-	data() {
-		return {
-			loading: true,
-		}
-	},
+	data: () => ({
+		loading: true,
+	}),
 	computed: {
-		...mapState(useSubscriptions, ['subs']),
+		...mapState(useSubscriptions, ['subs', 'favs']),
 	},
 	async mounted() {
 		try {

src/store/subscriptions.js

@@ -6,7 +6,7 @@ import { generateUrl } from '@nextcloud/router'
 export const useSubscriptions = defineStore('subscriptions', {
 	state: () => ({
 		subs: [],
-		favorites: [],
+		favs: [],
 	}),
 	actions: {
 		async fetch() {
@@ -19,16 +19,30 @@ export const useSubscriptions = defineStore('subscriptions', {
 			this.subs = subs.map((sub) => sub.url)
 
 			try {
-				this.favorites = JSON.parse(getCookie('repod.favorites')) || []
+				const favs = JSON.parse(getCookie('repod.favorites')) || []
+				this.favs = favs.map((url) => ({ url }))
 			} catch {}
 		},
 		addFavorite(url) {
-			this.favorites.push(url)
-			setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
+			this.favs.push({ url })
+			setCookie(
+				'repod.favorites',
+				JSON.stringify(this.favs.map((fav) => fav.url)),
+				365,
+			)
+		},
+		editFavoriteData(url, data) {
+			this.favs = this.favs.map((fav) =>
+				fav.url === url ? { ...fav, ...data } : fav,
+			)
 		},
 		removeFavorite(url) {
-			this.favorites = this.favorites.filter((favorite) => favorite !== url)
-			setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
+			this.favs = this.favs.filter((fav) => fav.url !== url)
+			setCookie(
+				'repod.favorites',
+				JSON.stringify(this.favs.map((fav) => fav.url)),
+				365,
+			)
 		},
 	},
 })

src/views/Discover.vue

@@ -30,11 +30,9 @@ export default {
 		Search,
 		Toplist,
 	},
-	data() {
-		return {
-			search: '',
-		}
-	},
+	data: () => ({
+		search: '',
+	}),
 }
 </script>
 

src/views/Feed.vue

@@ -41,13 +41,11 @@ export default {
 		Loading,
 		NcEmptyContent,
 	},
-	data() {
-		return {
-			failed: false,
-			loading: true,
-			feed: null,
-		}
-	},
+	data: () => ({
+		failed: false,
+		loading: true,
+		feed: null,
+	}),
 	computed: {
 		url() {
 			return decodeUrl(this.$route.params.url)

src/views/Home.vue

@@ -1,23 +1,50 @@
 <template>
-	<AppContent class="content">
-		<Loading />
+	<AppContent>
+		<NcEmptyContent
+			v-if="!favs.length"
+			class="empty"
+			:description="
+				t('repod', 'Pin some subscriptions to see their latest updates')
+			"
+			:name="t('repod', 'No favorites')">
+			<template #icon>
+				<StarOffIcon :size="20" />
+			</template>
+		</NcEmptyContent>
+		<ul v-if="favs.length">
+			<li
+				v-for="url in favs.sort((fav) => fav.lastPub).map((fav) => fav.url)"
+				:key="url">
+				<Item :url="url" />
+			</li>
+		</ul>
 	</AppContent>
 </template>
 
 <script>
 import AppContent from '../components/Atoms/AppContent.vue'
-import Loading from '../components/Atoms/Loading.vue'
+import Item from '../components/Home/Item.vue'
+import { NcEmptyContent } from '@nextcloud/vue'
+import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
+import { mapState } from 'pinia'
+import { useSubscriptions } from '../store/subscriptions.js'
 
 export default {
 	name: 'Home',
 	components: {
 		AppContent,
-		Loading,
+		Item,
+		NcEmptyContent,
+		StarOffIcon,
 	},
-	data() {
-		return {
-			loading: true,
-		}
+	computed: {
+		...mapState(useSubscriptions, ['favs']),
 	},
 }
 </script>
+
+<style scoped>
+.empty {
+	height: 100%;
+}
+</style>

vite.config.mjs

@@ -1,5 +1,6 @@
 import { createAppConfig } from '@nextcloud/vite-config'
 import { defineConfig } from 'vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 const config = defineConfig(({ mode }) => ({
 	build: {
@@ -10,8 +11,12 @@ const config = defineConfig(({ mode }) => ({
 				manualChunks: false,
 			},
 		},
-		sourcemap: mode === 'development',
+		sourcemap: mode !== 'production',
 	},
+	define: {
+		__VUE_PROD_DEVTOOLS__: mode !== 'production'
+	  },
+	plugins: [vueDevTools()],
 }))
 
 export default createAppConfig(