From fc86f62d93afc88a2068dbd79eb76d145ea116f5 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Fri, 13 Sep 2024 16:33:48 +0200
Subject: [PATCH] refactor: :recycle: typescript ok, need tests

---
 .eslintrc.js => .eslintrc.cjs               |  0
 lib/Controller/PageController.php           |  2 +-
 package.json                                |  9 +--
 src/App.vue                                 |  2 +-
 src/components/Discover/Toplist.vue         |  4 +-
 src/components/Feed/Banner.vue              | 35 ++++-------
 src/components/Feed/Episodes.vue            |  6 +-
 src/components/Feed/Favorite.vue            | 36 +++++-------
 src/components/Settings/Export.vue          |  4 +-
 src/components/Settings/Filters.vue         |  4 +-
 src/components/Settings/Import.vue          | 13 +++--
 src/components/Settings/Rate.vue            |  6 +-
 src/components/Settings/Settings.vue        |  2 +-
 src/components/Settings/Speed.vue           |  8 ++-
 src/components/Sidebar/Subscription.vue     | 65 +++++++++------------
 src/components/Sidebar/Subscriptions.vue    | 21 ++++---
 src/store/player.ts                         |  4 +-
 src/store/settings.ts                       |  2 +-
 src/store/subscriptions.ts                  |  4 +-
 src/utils/types.ts                          | 32 +++++-----
 src/views/Discover.vue                      |  6 +-
 src/views/Feed.vue                          | 22 +++----
 src/views/GPodder.vue                       |  6 +-
 src/views/Home.vue                          | 19 ++++--
 stylelint.config.js => stylelint.config.cjs |  0
 vite.config.ts                              |  5 --
 26 files changed, 157 insertions(+), 160 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (100%)
 rename stylelint.config.js => stylelint.config.cjs (100%)

diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 1788257..ee5b9bb 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -26,7 +26,7 @@ class PageController extends Controller
 	 * @NoCSRFRequired
 	 */
 	public function index(): TemplateResponse {
-		Util::addScript(Application::APP_ID, 'main');
+		Util::addScript(Application::APP_ID, Application::APP_ID . '-main');
 
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedImageDomain('*');
diff --git a/package.json b/package.json
index d5584ab..71b1f19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "repod",
   "license": "AGPL-3.0-or-later",
+  "type": "module",
   "scripts": {
     "build": "vue-tsc && vite build --mode production",
     "dev": "vite build --mode development",
@@ -11,9 +12,6 @@
     "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
     "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix"
   },
-  "browserslist": [
-    "extends @nextcloud/browserslist-config"
-  ],
   "prettier": "@nextcloud/prettier-config",
   "dependencies": {
     "@nextcloud/axios": "^2.5.0",
@@ -48,5 +46,8 @@
     "typescript": "5.5.4",
     "vue-eslint-parser": "^9.4.3",
     "vue-tsc": "^2.1.6"
-  }
+  },
+  "browserslist": [
+    "extends @nextcloud/browserslist-config"
+  ]
 }
diff --git a/src/App.vue b/src/App.vue
index 9c0a468..7208e46 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
 	</NcContent>
 </template>
 
-<script>
+<script lang="ts">
 import 'toastify-js/src/toastify.css'
 import { mapActions, mapState } from 'pinia'
 import Bar from './components/Player/Bar.vue'
diff --git a/src/components/Discover/Toplist.vue b/src/components/Discover/Toplist.vue
index 71fff17..acda9d0 100644
--- a/src/components/Discover/Toplist.vue
+++ b/src/components/Discover/Toplist.vue
@@ -51,8 +51,8 @@ export default {
 	async mounted() {
 		try {
 			this.loading = true
-			const tops = await axios.get(
-				generateUrl(`/apps/repod/toplist/${this.type}`),
+			const tops = await axios.get<PodcastDataInterface[]>(
+				generateUrl('/apps/repod/toplist/{type}', { type: this.type }),
 			)
 			this.tops = tops.data
 		} catch (e) {
diff --git a/src/components/Feed/Banner.vue b/src/components/Feed/Banner.vue
index 68560a6..3136e77 100644
--- a/src/components/Feed/Banner.vue
+++ b/src/components/Feed/Banner.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="header">
-		<img class="background" :src="imageUrl" />
+		<img class="background" :src="feed.imageUrl" />
 		<div class="content">
 			<div>
 				<NcAvatar
-					:display-name="author || title"
+					:display-name="feed.author || feed.title"
 					:is-no-user="true"
 					:size="128"
-					:url="imageUrl" />
+					:url="feed.imageUrl" />
 				<a class="feed" :href="url" @click.prevent="copyFeed">
 					<RssIcon :size="20" />
 					<i>{{ t('repod', 'Copy feed') }}</i>
@@ -15,12 +15,12 @@
 			</div>
 			<div class="inner">
 				<div class="infos">
-					<h2>{{ title }}</h2>
-					<a :href="link" target="_blank">
-						<i>{{ author }}</i>
+					<h2>{{ feed.title }}</h2>
+					<a :href="feed.link" target="_blank">
+						<i>{{ feed.author }}</i>
 					</a>
 					<br /><br />
-					<SafeHtml :source="description" />
+					<SafeHtml :source="feed.description || ''" />
 				</div>
 				<NcAppNavigationNew
 					v-if="!getSubByUrl(url)"
@@ -40,6 +40,7 @@ import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import { showError, showSuccess } from '../../utils/toast.ts'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import type { PodcastDataInterface } from '../../utils/types.ts'
 import RssIcon from 'vue-material-design-icons/Rss.vue'
 import SafeHtml from '../Atoms/SafeHtml.vue'
 import axios from '@nextcloud/axios'
@@ -58,24 +59,8 @@ export default {
 		SafeHtml,
 	},
 	props: {
-		author: {
-			type: String,
-			required: true,
-		},
-		description: {
-			type: String,
-			required: true,
-		},
-		imageUrl: {
-			type: String,
-			required: true,
-		},
-		link: {
-			type: String,
-			required: true,
-		},
-		title: {
-			type: String,
+		feed: {
+			type: Object as () => PodcastDataInterface,
 			required: true,
 		},
 	},
diff --git a/src/components/Feed/Episodes.vue b/src/components/Feed/Episodes.vue
index 52bd5ac..58c7e60 100644
--- a/src/components/Feed/Episodes.vue
+++ b/src/components/Feed/Episodes.vue
@@ -71,15 +71,15 @@ export default {
 	async mounted() {
 		try {
 			this.loading = true
-			const episodes = await axios.get(
+			const episodes = await axios.get<EpisodeInterface[]>(
 				generateUrl('/apps/repod/episodes/list?url={url}', {
 					url: this.url,
 				}),
 			)
 			this.episodes = [...episodes.data].sort(
 				(a, b) =>
-					new Date(b.pubDate?.date).getTime() -
-					new Date(a.pubDate?.date).getTime(),
+					new Date(b.pubDate?.date || '').getTime() -
+					new Date(a.pubDate?.date || '').getTime(),
 			)
 		} catch (e) {
 			console.error(e)
diff --git a/src/components/Feed/Favorite.vue b/src/components/Feed/Favorite.vue
index 9181ae1..3a26542 100644
--- a/src/components/Feed/Favorite.vue
+++ b/src/components/Feed/Favorite.vue
@@ -1,15 +1,15 @@
 <template>
 	<NcGuestContent class="guest">
-		<Loading v-if="!currentFavoriteData" />
+		<Loading v-if="!feed.data" />
 		<NcAvatar
-			v-if="currentFavoriteData"
+			v-if="feed.data"
 			class="avatar"
-			:display-name="currentFavoriteData.author || currentFavoriteData.title"
+			:display-name="feed.data.author || feed.data.title"
 			:is-no-user="true"
 			:size="222"
-			:url="currentFavoriteData.imageUrl" />
-		<div v-if="currentFavoriteData" class="list">
-			<h2 class="title">{{ currentFavoriteData.title }}</h2>
+			:url="feed.data.imageUrl" />
+		<div v-if="feed.data" class="list">
+			<h2 class="title">{{ feed.data.title }}</h2>
 			<Loading v-if="loading" />
 			<ul v-if="!loading">
 				<Episode
@@ -17,24 +17,22 @@
 					:key="episode.guid"
 					:episode="episode"
 					:one-line="true"
-					:url="url" />
+					:url="feed.metrics.url" />
 			</ul>
 		</div>
 	</NcGuestContent>
 </template>
 
 <script lang="ts">
+import type { EpisodeInterface, SubscriptionInterface } from '../../utils/types.ts'
 import { NcAvatar, NcGuestContent } from '@nextcloud/vue'
 import Episode from './Episode.vue'
-import type { EpisodeInterface } from '../../utils/types.ts'
 import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { hasEnded } from '../../utils/status.ts'
-import { mapState } from 'pinia'
 import { showError } from '../../utils/toast.ts'
 import { t } from '@nextcloud/l10n'
-import { useSubscriptions } from '../../store/subscriptions.ts'
 
 export default {
 	name: 'Favorite',
@@ -45,8 +43,8 @@ export default {
 		NcGuestContent,
 	},
 	props: {
-		url: {
-			type: String,
+		feed: {
+			type: Object as () => SubscriptionInterface,
 			required: true,
 		},
 	},
@@ -54,25 +52,19 @@ export default {
 		episodes: [] as EpisodeInterface[],
 		loading: true,
 	}),
-	computed: {
-		...mapState(useSubscriptions, ['getSubByUrl']),
-		currentFavoriteData() {
-			return this.getSubByUrl(this.url)?.data
-		},
-	},
 	async mounted() {
 		try {
 			this.loading = true
-			const episodes = await axios.get(
+			const episodes = await axios.get<EpisodeInterface[]>(
 				generateUrl('/apps/repod/episodes/list?url={url}', {
-					url: this.url,
+					url: this.feed.metrics.url,
 				}),
 			)
 			this.episodes = [...episodes.data]
 				.sort(
 					(a, b) =>
-						new Date(b.pubDate?.date).getTime() -
-						new Date(a.pubDate?.date).getTime(),
+						new Date(b.pubDate?.date || '').getTime() -
+						new Date(a.pubDate?.date || '').getTime(),
 				)
 				.filter((episode) => !this.hasEnded(episode))
 				.slice(0, 4)
diff --git a/src/components/Settings/Export.vue b/src/components/Settings/Export.vue
index 5387608..d961d6b 100644
--- a/src/components/Settings/Export.vue
+++ b/src/components/Settings/Export.vue
@@ -8,10 +8,11 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import ExportIcon from 'vue-material-design-icons/Export.vue'
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Export',
@@ -21,6 +22,7 @@ export default {
 	},
 	methods: {
 		generateUrl,
+		t,
 	},
 }
 </script>
diff --git a/src/components/Settings/Filters.vue b/src/components/Settings/Filters.vue
index d138faf..91c816d 100644
--- a/src/components/Settings/Filters.vue
+++ b/src/components/Settings/Filters.vue
@@ -39,11 +39,12 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
+import { t } from '@nextcloud/l10n'
 import { useSettings } from '../../store/settings.ts'
 
 export default {
@@ -66,6 +67,7 @@ export default {
 	},
 	methods: {
 		...mapActions(useSettings, ['setFilters']),
+		t,
 	},
 }
 </script>
diff --git a/src/components/Settings/Import.vue b/src/components/Settings/Import.vue
index 3b15fac..09c33ad 100644
--- a/src/components/Settings/Import.vue
+++ b/src/components/Settings/Import.vue
@@ -29,12 +29,13 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationItem, NcModal } from '@nextcloud/vue'
 import ImportIcon from 'vue-material-design-icons/Import.vue'
 import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Import',
@@ -50,11 +51,13 @@ export default {
 	}),
 	methods: {
 		generateUrl,
-		async importOpml(event) {
+		t,
+		async importOpml(event: Event) {
 			try {
-				const formData = new FormData(event.target)
-				this.importLoading = true
-				await axios.post(event.target.action, formData)
+				const target = event.target as HTMLFormElement
+				const formData = new FormData(target)
+				this.loading = true
+				await axios.post(target.action, formData)
 			} catch (e) {
 				console.error(e)
 			} finally {
diff --git a/src/components/Settings/Rate.vue b/src/components/Settings/Rate.vue
index d9db1e7..1870450 100644
--- a/src/components/Settings/Rate.vue
+++ b/src/components/Settings/Rate.vue
@@ -8,9 +8,10 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Rate',
@@ -18,5 +19,8 @@ export default {
 		NcAppNavigationItem,
 		StarIcon,
 	},
+	methods: {
+		t,
+	},
 }
 </script>
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 7d07062..816e33e 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -8,7 +8,7 @@
 	</NcAppNavigationSettings>
 </template>
 
-<script>
+<script lang="ts">
 import Export from './Export.vue'
 import Filters from './Filters.vue'
 import Import from './Import.vue'
diff --git a/src/components/Settings/Speed.vue b/src/components/Settings/Speed.vue
index aa022ee..d8806ae 100644
--- a/src/components/Settings/Speed.vue
+++ b/src/components/Settings/Speed.vue
@@ -15,7 +15,7 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import MinusIcon from 'vue-material-design-icons/Minus.vue'
@@ -23,6 +23,7 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import SpeedometerIcon from 'vue-material-design-icons/Speedometer.vue'
 import SpeedometerMediumIcon from 'vue-material-design-icons/SpeedometerMedium.vue'
 import SpeedometerSlowIcon from 'vue-material-design-icons/SpeedometerSlow.vue'
+import { t } from '@nextcloud/l10n'
 import { usePlayer } from '../../store/player.ts'
 
 export default {
@@ -41,8 +42,9 @@ export default {
 	},
 	methods: {
 		...mapActions(usePlayer, ['setRate']),
-		changeRate(diff) {
-			const newRate = (this.rate + diff).toPrecision(2)
+		t,
+		changeRate(diff: number) {
+			const newRate = parseFloat((this.rate + diff).toPrecision(2))
 			this.setRate(newRate > 0 ? newRate : this.rate)
 		},
 	},
diff --git a/src/components/Sidebar/Subscription.vue b/src/components/Sidebar/Subscription.vue
index fbc5634..0325b2a 100644
--- a/src/components/Sidebar/Subscription.vue
+++ b/src/components/Sidebar/Subscription.vue
@@ -1,18 +1,18 @@
 <template>
 	<NcAppNavigationItem
 		:loading="loading"
-		:name="feed ? feed.title : url"
+		:name="feed?.data?.title || url"
 		:to="toFeedUrl(url)">
 		<template #actions>
 			<NcActionButton
 				:aria-label="t('repod', 'Favorite')"
-				:model-value="isFavorite"
+				:model-value="feed?.isFavorite"
 				:name="t('repod', 'Favorite')"
 				:title="t('repod', 'Favorite')"
 				@update:modelValue="switchFavorite($event)">
 				<template #icon>
-					<StarPlusIcon v-if="!isFavorite" :size="20" />
-					<StarRemoveIcon v-if="isFavorite" :size="20" />
+					<StarPlusIcon v-if="!feed?.isFavorite" :size="20" />
+					<StarRemoveIcon v-if="feed?.isFavorite" :size="20" />
 				</template>
 			</NcActionButton>
 			<NcActionButton
@@ -27,27 +27,28 @@
 		</template>
 		<template #icon>
 			<NcAvatar
-				v-if="feed"
-				:display-name="feed.author || feed.title"
+				:display-name="feed?.data?.author || feed?.data?.title"
 				:is-no-user="true"
-				:url="feed.imageUrl" />
-			<StarIcon v-if="feed && isFavorite" class="star" :size="20" />
+				:url="feed?.data?.imageUrl" />
+			<StarIcon v-if="feed?.isFavorite" class="star" :size="20" />
 			<AlertIcon v-if="failed" />
 		</template>
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcActionButton, NcAppNavigationItem, NcAvatar } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import AlertIcon from 'vue-material-design-icons/Alert.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import type { PersonalSettingsPodcastDataInterface } from '../../utils/types.ts'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import StarPlusIcon from 'vue-material-design-icons/StarPlus.vue'
 import StarRemoveIcon from 'vue-material-design-icons/StarRemove.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
 import { toFeedUrl } from '../../utils/url.ts'
 import { useSubscriptions } from '../../store/subscriptions.ts'
 
@@ -72,26 +73,25 @@ export default {
 	data: () => ({
 		failed: false,
 		loading: true,
-		feed: null,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['getFavorites']),
-		isFavorite() {
-			return this.getFavorites.map((fav) => fav.url).includes(this.url)
+		...mapState(useSubscriptions, ['subs']),
+		feed() {
+			return this.subs.find((sub) => sub.metrics.url === this.url)
 		},
 	},
 	async mounted() {
 		try {
-			const podcastData = await axios.get(
-				generateUrl(
-					'/apps/gpoddersync/personal_settings/podcast_data?url={url}',
-					{
-						url: this.url,
-					},
-				),
-			)
-			this.feed = podcastData.data.data
-			this.editFavoriteData(this.url, podcastData.data.data)
+			const podcastData =
+				await axios.get<PersonalSettingsPodcastDataInterface>(
+					generateUrl(
+						'/apps/gpoddersync/personal_settings/podcast_data?url={url}',
+						{
+							url: this.url,
+						},
+					),
+				)
+			this.addFavoriteData(podcastData.data.data)
 		} catch (e) {
 			this.failed = true
 			console.error(e)
@@ -100,12 +100,8 @@ export default {
 		}
 	},
 	methods: {
-		...mapActions(useSubscriptions, [
-			'fetch',
-			'addFavorite',
-			'editFavoriteData',
-			'removeFavorite',
-		]),
+		...mapActions(useSubscriptions, ['fetch', 'addFavoriteData', 'setFavorite']),
+		t,
 		toFeedUrl,
 		async deleteSubscription() {
 			if (
@@ -123,23 +119,20 @@ export default {
 					console.error(e)
 					showError(t('repod', 'Error while removing the feed'))
 				} finally {
-					this.removeFavorite(this.url)
+					this.setFavorite(this.url, false)
 					this.loading = false
 					this.fetch()
 				}
 			}
 		},
-		switchFavorite(value) {
+		switchFavorite(value: boolean) {
 			if (value) {
-				if (this.getFavorites.length >= 10) {
+				if (this.subs.filter((sub) => sub.isFavorite).length >= 10) {
 					showError(t('repod', 'You can only have 10 favorites'))
 					return
 				}
-
-				this.addFavorite(this.url)
-			} else {
-				this.removeFavorite(this.url)
 			}
+			this.setFavorite(this.url, value)
 		},
 	},
 }
diff --git a/src/components/Sidebar/Subscriptions.vue b/src/components/Sidebar/Subscriptions.vue
index e16b68b..8fc9dfe 100644
--- a/src/components/Sidebar/Subscriptions.vue
+++ b/src/components/Sidebar/Subscriptions.vue
@@ -12,16 +12,13 @@
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
 					<Subscription
-						v-for="url of getFavorites.map((fav) => fav.url)"
-						:key="url"
-						:url="url" />
+						v-for="sub of subs.filter((sub) => sub.isFavorite)"
+						:key="sub.metrics.url"
+						:url="sub.metrics.url" />
 					<Subscription
-						v-for="url of getSubscriptions.filter(
-							(sub) =>
-								!getFavorites.map((fav) => fav.url).includes(sub),
-						)"
-						:key="url"
-						:url="url" />
+						v-for="sub of subs.filter((sub) => !sub.isFavorite)"
+						:key="sub.metrics.url"
+						:url="sub.metrics.url" />
 				</NcAppNavigationList>
 			</NcAppContentList>
 		</template>
@@ -31,7 +28,7 @@
 	</AppNavigation>
 </template>
 
-<script>
+<script lang="ts">
 import {
 	NcAppContentList,
 	NcAppNavigationList,
@@ -44,6 +41,7 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import Settings from '../Settings/Settings.vue'
 import Subscription from './Subscription.vue'
 import { showError } from '../../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
 import { useSubscriptions } from '../../store/subscriptions.ts'
 
 export default {
@@ -62,7 +60,7 @@ export default {
 		loading: true,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['getSubscriptions', 'getFavorites']),
+		...mapState(useSubscriptions, ['subs']),
 	},
 	async mounted() {
 		try {
@@ -76,6 +74,7 @@ export default {
 	},
 	methods: {
 		...mapActions(useSubscriptions, ['fetch']),
+		t,
 	},
 }
 </script>
diff --git a/src/store/player.ts b/src/store/player.ts
index f0a4e8e..2076e74 100644
--- a/src/store/player.ts
+++ b/src/store/player.ts
@@ -1,4 +1,4 @@
-import type { EpisodeInterface } from '../utils/types'
+import type { EpisodeActionInterface, EpisodeInterface } from '../utils/types'
 import axios from '@nextcloud/axios'
 import { defineStore } from 'pinia'
 import { formatEpisodeTimestamp } from '../utils/time'
@@ -39,7 +39,7 @@ export const usePlayer = defineStore('player', {
 				audio.load()
 
 				try {
-					const action = await axios.get(
+					const action = await axios.get<EpisodeActionInterface>(
 						generateUrl('/apps/repod/episodes/action?url={url}', {
 							url: this.episode.url,
 						}),
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 8d257de..a3af2ff 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -24,7 +24,7 @@ export const useSettings = defineStore('settings', {
 		}
 	},
 	actions: {
-		setFilters(filters: FiltersInterface) {
+		setFilters(filters: Partial<FiltersInterface>) {
 			this.filters = { ...this.filters, ...filters }
 			setCookie('repod.filters', JSON.stringify(this.filters), 365)
 		},
diff --git a/src/store/subscriptions.ts b/src/store/subscriptions.ts
index 691a11c..6230291 100644
--- a/src/store/subscriptions.ts
+++ b/src/store/subscriptions.ts
@@ -1,6 +1,6 @@
 import type {
+	PersonalSettingsMetricsInterface,
 	PodcastDataInterface,
-	PodcastMetricsInterface,
 	SubscriptionInterface,
 } from '../utils/types'
 import { getCookie, setCookie } from '../utils/cookies'
@@ -23,7 +23,7 @@ export const useSubscriptions = defineStore('subscriptions', {
 				favorites = JSON.parse(getCookie('repod.favorites') || '[]') || []
 			} catch {}
 
-			const metrics = await axios.get<PodcastMetricsInterface>(
+			const metrics = await axios.get<PersonalSettingsMetricsInterface>(
 				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
 			)
 			this.subs = [...metrics.data.subscriptions]
diff --git a/src/utils/types.ts b/src/utils/types.ts
index f8bd115..bcae018 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -47,23 +47,27 @@ export interface PodcastDataInterface {
 }
 
 export interface PodcastMetricsInterface {
-	subscriptions: [
-		{
-			url: string
-			listenedSeconds: number
-			actionCounts: {
-				delete: number
-				download: number
-				flattr: number
-				new: number
-				play: number
-			}
-		},
-	]
+	url: string
+	listenedSeconds: number
+	actionCounts: {
+		delete: number
+		download: number
+		flattr: number
+		new: number
+		play: number
+	}
 }
 
 export interface SubscriptionInterface {
 	data?: PodcastDataInterface
 	isFavorite: boolean
-	metrics: PodcastMetricsInterface['subscriptions'][0]
+	metrics: PodcastMetricsInterface
+}
+
+export interface PersonalSettingsMetricsInterface {
+	subscriptions: PodcastMetricsInterface[]
+}
+
+export interface PersonalSettingsPodcastDataInterface {
+	data: PodcastDataInterface
 }
diff --git a/src/views/Discover.vue b/src/views/Discover.vue
index c9113fa..1440016 100644
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@@ -12,13 +12,14 @@
 	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
 import AddRss from '../components/Discover/AddRss.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import { NcTextField } from '@nextcloud/vue'
 import Search from '../components/Discover/Search.vue'
 import Toplist from '../components/Discover/Toplist.vue'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Discover',
@@ -33,6 +34,9 @@ export default {
 	data: () => ({
 		search: '',
 	}),
+	methods: {
+		t,
+	},
 }
 </script>
 
diff --git a/src/views/Feed.vue b/src/views/Feed.vue
index 209ddcb..4705f73 100644
--- a/src/views/Feed.vue
+++ b/src/views/Feed.vue
@@ -6,27 +6,23 @@
 				<Alert />
 			</template>
 		</EmptyContent>
-		<Banner
-			v-if="feed"
-			:author="feed.author"
-			:description="feed.description"
-			:image-url="feed.imageUrl"
-			:link="feed.link"
-			:title="feed.title" />
+		<Banner v-if="feed" :feed="feed" />
 		<Episodes v-if="feed" />
 	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
 import Alert from 'vue-material-design-icons/Alert.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
 import Banner from '../components/Feed/Banner.vue'
 import EmptyContent from '../components/Atoms/EmptyContent.vue'
 import Episodes from '../components/Feed/Episodes.vue'
 import Loading from '../components/Atoms/Loading.vue'
+import type { PodcastDataInterface } from '../utils/types.ts'
 import axios from '@nextcloud/axios'
 import { decodeUrl } from '../utils/url.ts'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Feed',
@@ -41,16 +37,17 @@ export default {
 	data: () => ({
 		failed: false,
 		loading: true,
-		feed: null,
+		feed: null as PodcastDataInterface | null,
 	}),
 	computed: {
 		url() {
-			return decodeUrl(this.$route.params.url)
+			return decodeUrl(this.$route.params.url as string)
 		},
 	},
 	async mounted() {
 		try {
-			const podcastData = await axios.get(
+			this.loading = true
+			const podcastData = await axios.get<PodcastDataInterface>(
 				generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
 			)
 			this.feed = podcastData.data
@@ -61,5 +58,8 @@ export default {
 			this.loading = false
 		}
 	},
+	methods: {
+		t,
+	},
 }
 </script>
diff --git a/src/views/GPodder.vue b/src/views/GPodder.vue
index adf0f25..b113909 100644
--- a/src/views/GPodder.vue
+++ b/src/views/GPodder.vue
@@ -13,12 +13,13 @@
 	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
 import Alert from 'vue-material-design-icons/Alert.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
 import EmptyContent from '../components/Atoms/EmptyContent.vue'
 import { NcButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'GPodder',
@@ -33,5 +34,8 @@ export default {
 			return generateUrl('/settings/apps/installed/gpoddersync')
 		},
 	},
+	methods: {
+		t,
+	},
 }
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3d8546b..5158787 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
 	<AppContent>
 		<EmptyContent
-			v-if="!getFavorites.length"
+			v-if="!favorites.length"
 			:description="
 				t('repod', 'Pin some subscriptions to see their latest updates')
 			"
@@ -10,20 +10,21 @@
 				<StarOffIcon />
 			</template>
 		</EmptyContent>
-		<ul v-if="getFavorites.length">
-			<li v-for="url in getFavorites.map((fav) => fav.url)" :key="url">
-				<Favorite :url="url" />
+		<ul v-if="favorites.length">
+			<li v-for="favorite in favorites" :key="favorite.metrics.url">
+				<Favorite :feed="favorite" />
 			</li>
 		</ul>
 	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
 import AppContent from '../components/Atoms/AppContent.vue'
 import EmptyContent from '../components/Atoms/EmptyContent.vue'
 import Favorite from '../components/Feed/Favorite.vue'
 import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
 import { mapState } from 'pinia'
+import { t } from '@nextcloud/l10n'
 import { useSubscriptions } from '../store/subscriptions.ts'
 
 export default {
@@ -35,7 +36,13 @@ export default {
 		StarOffIcon,
 	},
 	computed: {
-		...mapState(useSubscriptions, ['getFavorites']),
+		...mapState(useSubscriptions, ['subs']),
+		favorites() {
+			return this.subs.filter((sub) => sub.isFavorite)
+		},
+	},
+	methods: {
+		t,
 	},
 }
 </script>
diff --git a/stylelint.config.js b/stylelint.config.cjs
similarity index 100%
rename from stylelint.config.js
rename to stylelint.config.cjs
diff --git a/vite.config.ts b/vite.config.ts
index 7687397..a1e705c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,11 +4,6 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 const config = defineConfig(({ mode }) => ({
 	build: {
-		rollupOptions: {
-			output: {
-				entryFileNames: 'js/[name].js',
-			},
-		},
 		sourcemap: mode !== 'production',
 	},
 	define: {