Merge pull request 'Migrate to vue3 (fix #126)' (#127) from vue3 into main

Reviewed-on: #127
2024-08-17 12:24:26 +00:00 · 2024-08-17 12:24:26 +00:00 · 5b08cf970e
commit 5b08cf970e
parent 5917c59610 cf6dd25378
38 changed files with 3877 additions and 5652 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,5 +1,9 @@
 module.exports = {
-	extends: ['@nextcloud', 'plugin:prettier/recommended'],
+	extends: [
+		'@nextcloud',
+		'plugin:pinia/recommended',
+		'plugin:prettier/recommended',
+	],
 	rules: {
 		'jsdoc/require-jsdoc': 'off',
 		'vue/first-attribute-linebreak': 'off',
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -1,9 +0,0 @@
-In the Nextcloud community, participants from all over the world come together to create Free Software for a free internet. This is made possible by the support, hard work and enthusiasm of thousands of people, including those who create and use Nextcloud software.
-
-Our code of conduct offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere, and to explain how together we can strengthen and support each other.
-
-The Code of Conduct is shared by all contributors and users who engage with the Nextcloud team and its community services. It presents a summary of the shared values and “common sense” thinking in our community.
-
-You can find our full code of conduct on our website: https://nextcloud.com/code-of-conduct/
-
-Please, keep our CoC in mind when you contribute! That way, everyone can be a part of our community in a productive, positive, creative and fun way.
--- a/87
+++ b/87
@ -103,14 +103,14 @@ dist: build
 source:
 	rm -rf $(source_build_directory)
 	mkdir -p $(source_build_directory)
-	tar cvzf $(source_package_name).tar.gz \
+	tar -C .. -cvzf $(source_package_name).tar.gz \
 	--exclude-vcs \
-	--exclude="../$(app_name)/build" \
-	--exclude="../$(app_name)/js/node_modules" \
-	--exclude="../$(app_name)/node_modules" \
-	--exclude="../$(app_name)/*.log" \
-	--exclude="../$(app_name)/js/*.log" \
-	../$(app_name)
+	--exclude="$(app_name)/build" \
+	--exclude="$(app_name)/js/node_modules" \
+	--exclude="$(app_name)/node_modules" \
+	--exclude="$(app_name)/*.log" \
+	--exclude="$(app_name)/js/*.log" \
+	$(app_name)

 # Builds the source package for the app store, ignores php tests, js tests
 # and build related folders that are unnecessary for an appstore release
@ -118,42 +118,43 @@ source:
 appstore:
 	rm -rf $(appstore_build_directory)
 	mkdir -p $(appstore_build_directory)
-	tar cvzf $(appstore_package_name).tar.gz \
-	--exclude="../$(app_name)/build" \
-	--exclude="../$(app_name)/tests" \
-	--exclude="../$(app_name)/Makefile" \
-	--exclude="../$(app_name)/*.log" \
-	--exclude="../$(app_name)/phpunit*xml" \
-	--exclude="../$(app_name)/composer.*" \
-	--exclude="../$(app_name)/node_modules" \
-	--exclude="../$(app_name)/js/node_modules" \
-	--exclude="../$(app_name)/js/tests" \
-	--exclude="../$(app_name)/js/test" \
-	--exclude="../$(app_name)/js/*.log" \
-	--exclude="../$(app_name)/js/package.json" \
-	--exclude="../$(app_name)/js/bower.json" \
-	--exclude="../$(app_name)/js/karma.*" \
-	--exclude="../$(app_name)/js/protractor.*" \
-	--exclude="../$(app_name)/package.json" \
-	--exclude="../$(app_name)/bower.json" \
-	--exclude="../$(app_name)/karma.*" \
-	--exclude="../$(app_name)/protractor\.*" \
-	--exclude="../$(app_name)/.*" \
-	--exclude="../$(app_name)/js/.*" \
-	--exclude="../$(app_name)/webpack.js" \
-	--exclude="../$(app_name)/stylelint.config.js" \
-	--exclude="../$(app_name)/README.md" \
-	--exclude="../$(app_name)/package-lock.json" \
-	--exclude="../$(app_name)/LICENSE" \
-	--exclude="../$(app_name)/src" \
-	--exclude="../$(app_name)/stubs" \
-	--exclude="../$(app_name)/screens" \
-	--exclude="../$(app_name)/vendor" \
-	--exclude="../$(app_name)/translationfiles" \
-	--exclude="../$(app_name)/Dockerfile" \
-	--exclude="../$(app_name)/psalm.xml" \
-	--exclude="../$(app_name)/renovate.json" \
-	../$(app_name)
+	tar -C .. -cvzf $(appstore_package_name).tar.gz \
+	--exclude="$(app_name)/build" \
+	--exclude="$(app_name)/tests" \
+	--exclude="$(app_name)/Makefile" \
+	--exclude="$(app_name)/*.log" \
+	--exclude="$(app_name)/phpunit*xml" \
+	--exclude="$(app_name)/composer.*" \
+	--exclude="$(app_name)/node_modules" \
+	--exclude="$(app_name)/js/node_modules" \
+	--exclude="$(app_name)/js/tests" \
+	--exclude="$(app_name)/js/test" \
+	--exclude="$(app_name)/js/*.log" \
+	--exclude="$(app_name)/js/package.json" \
+	--exclude="$(app_name)/js/bower.json" \
+	--exclude="$(app_name)/js/karma.*" \
+	--exclude="$(app_name)/js/protractor.*" \
+	--exclude="$(app_name)/package.json" \
+	--exclude="$(app_name)/bower.json" \
+	--exclude="$(app_name)/karma.*" \
+	--exclude="$(app_name)/protractor\.*" \
+	--exclude="$(app_name)/.*" \
+	--exclude="$(app_name)/js/.*" \
+	--exclude="$(app_name)/webpack.js" \
+	--exclude="$(app_name)/stylelint.config.js" \
+	--exclude="$(app_name)/README.md" \
+	--exclude="$(app_name)/package-lock.json" \
+	--exclude="$(app_name)/LICENSE" \
+	--exclude="$(app_name)/src" \
+	--exclude="$(app_name)/stubs" \
+	--exclude="$(app_name)/screens" \
+	--exclude="$(app_name)/vendor" \
+	--exclude="$(app_name)/translationfiles" \
+	--exclude="$(app_name)/Dockerfile" \
+	--exclude="$(app_name)/psalm.xml" \
+	--exclude="$(app_name)/renovate.json" \
+	--exclude="$(app_name)/vite.config.mjs" \
+	$(app_name)

 # Start a nextcloud server on Docker to kickstart developement
 .PHONY: dev
--- a/composer.lock
+++ b/composer.lock
@ -1312,12 +1312,12 @@
            "source": {
                "type": "git",
                "url": "https://github.com/Roave/SecurityAdvisories.git",
-                "reference": "176422aa2c339a0f4e56b92862c67a94e2b584fb"
+                "reference": "251a4f1fefcc6e6cc90d50514fee6b6e3745cb3e"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/176422aa2c339a0f4e56b92862c67a94e2b584fb",
-                "reference": "176422aa2c339a0f4e56b92862c67a94e2b584fb",
+                "url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/251a4f1fefcc6e6cc90d50514fee6b6e3745cb3e",
+                "reference": "251a4f1fefcc6e6cc90d50514fee6b6e3745cb3e",
                "shasum": ""
            },
            "conflict": {
@ -1414,7 +1414,7 @@
                "codeigniter4/shield": "<1.0.0.0-beta8",
                "codiad/codiad": "<=2.8.4",
                "composer/composer": "<1.10.27|>=2,<2.2.24|>=2.3,<2.7.7",
-                "concrete5/concrete5": "<=9.3.2",
+                "concrete5/concrete5": "<9.3.3",
                "concrete5/core": "<8.5.8|>=9,<9.1",
                "contao-components/mediaelement": ">=2.14.2,<2.21.1",
                "contao/comments-bundle": ">=2,<4.13.40|>=5.0.0.0-RC1-dev,<5.3.4",
@ -1483,7 +1483,7 @@
                "ezsystems/ezplatform-graphql": ">=1.0.0.0-RC1-dev,<1.0.13|>=2.0.0.0-beta1,<2.3.12",
                "ezsystems/ezplatform-kernel": "<1.2.5.1-dev|>=1.3,<1.3.35",
                "ezsystems/ezplatform-rest": ">=1.2,<=1.2.2|>=1.3,<1.3.8",
-                "ezsystems/ezplatform-richtext": ">=2.3,<2.3.7.1-dev",
+                "ezsystems/ezplatform-richtext": ">=2.3,<2.3.7.1-dev|>=3.3,<3.3.40",
                "ezsystems/ezplatform-solr-search-engine": ">=1.7,<1.7.12|>=2,<2.0.2|>=3.3,<3.3.15",
                "ezsystems/ezplatform-user": ">=1,<1.0.1",
                "ezsystems/ezpublish-kernel": "<6.13.8.2-dev|>=7,<7.5.31",
@ -1564,6 +1564,7 @@
                "hyn/multi-tenant": ">=5.6,<5.7.2",
                "ibexa/admin-ui": ">=4.2,<4.2.3|>=4.6.0.0-beta1,<4.6.9",
                "ibexa/core": ">=4,<4.0.7|>=4.1,<4.1.4|>=4.2,<4.2.3|>=4.5,<4.5.6|>=4.6,<4.6.2",
+                "ibexa/fieldtype-richtext": ">=4.6,<4.6.10",
                "ibexa/graphql": ">=2.5,<2.5.31|>=3.3,<3.3.28|>=4.2,<4.2.3",
                "ibexa/post-install": "<=1.0.4",
                "ibexa/solr": ">=4.5,<4.5.4",
@ -1806,6 +1807,7 @@
                "pubnub/pubnub": "<6.1",
                "pusher/pusher-php-server": "<2.2.1",
                "pwweb/laravel-core": "<=0.3.6.0-beta",
+                "pxlrbt/filament-excel": "<2.3.3",
                "pyrocms/pyrocms": "<=3.9.1",
                "qcubed/qcubed": "<=3.1.1",
                "quickapps/cms": "<=2.0.0.0-beta2",
@ -1833,8 +1835,8 @@
                "serluck/phpwhois": "<=4.2.6",
                "sfroemken/url_redirect": "<=1.2.1",
                "sheng/yiicms": "<=1.2",
-                "shopware/core": "<6.5.8.8-dev|>=6.6.0.0-RC1-dev,<6.6.1",
-                "shopware/platform": "<6.5.8.8-dev|>=6.6.0.0-RC1-dev,<6.6.1",
+                "shopware/core": "<=6.5.8.12|>=6.6,<=6.6.5",
+                "shopware/platform": "<=6.5.8.12|>=6.6,<=6.6.5",
                "shopware/production": "<=6.3.5.2",
                "shopware/shopware": "<=5.7.17",
                "shopware/storefront": "<=6.4.8.1|>=6.5.8,<6.5.8.7-dev",
@ -2119,7 +2121,7 @@
                    "type": "tidelift"
                }
            ],
-            "time": "2024-08-05T22:04:39+00:00"
+            "time": "2024-08-14T19:05:08+00:00"
        },
        {
            "name": "sebastian/diff",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,11 +2,14 @@
  "name": "repod",
  "license": "AGPL-3.0-or-later",
  "scripts": {
-    "build": "NODE_ENV=production webpack --config webpack.js --progress",
-    "dev": "NODE_ENV=development webpack --config webpack.js --progress",
-    "watch": "NODE_ENV=development webpack --config webpack.js --progress --watch",
+    "build": "vite build --mode production",
+    "dev": "vite build --mode development",
+    "dev:watch": "vite build --mode development --watch",
+    "watch": "npm run dev:watch",
    "lint": "eslint src",
-    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css"
+    "lint:fix": "eslint src --fix",
+    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
+    "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix"
  },
  "browserslist": [
    "extends @nextcloud/browserslist-config"
@ -14,27 +17,27 @@
  "prettier": "@nextcloud/prettier-config",
  "dependencies": {
    "@nextcloud/axios": "^2.5.0",
-    "@nextcloud/dialogs": "^6.0.0",
    "@nextcloud/initial-state": "^2.2.0",
    "@nextcloud/l10n": "^3.1.0",
    "@nextcloud/router": "^3.0.1",
-    "@nextcloud/vue": "^8.16.0",
+    "@nextcloud/vite-config": "^2.2.2",
+    "@nextcloud/vue": "9.0.0-alpha.5",
    "dompurify": "^3.1.6",
    "linkify-html": "^4.1.3",
-    "vue": "^2",
+    "pinia": "^2.2.2",
+    "toastify-js": "^1.12.0",
+    "vite": "^5.4.1",
+    "vue": "^3.4.38",
    "vue-material-design-icons": "^5.3.0",
-    "vue-router": "^3",
-    "vuex": "^3"
+    "vue-router": "^4.4.3"
  },
  "devDependencies": {
    "@nextcloud/browserslist-config": "^3.0.1",
    "@nextcloud/eslint-config": "^8.4.1",
    "@nextcloud/prettier-config": "^1.1.0",
    "@nextcloud/stylelint-config": "^3.0.1",
-    "@nextcloud/webpack-vue-config": "^6.0.1",
    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-webpack-plugin": "^4.2.0",
-    "stylelint-webpack-plugin": "^5.0.1"
+    "eslint-plugin-pinia": "^0.2.0",
+    "eslint-plugin-prettier": "^5.2.1"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -8,12 +8,14 @@
 </template>

 <script>
-import '@nextcloud/dialogs/style.css'
+import 'toastify-js/src/toastify.css'
+import { mapActions, mapState } from 'pinia'
 import Bar from './components/Player/Bar.vue'
 import GPodder from './views/GPodder.vue'
 import { NcContent } from '@nextcloud/vue'
 import Subscriptions from './components/Sidebar/Subscriptions.vue'
 import { loadState } from '@nextcloud/initial-state'
+import { usePlayer } from './store/player.js'

 export default {
 	name: 'App',
@ -24,9 +26,22 @@ export default {
 		Subscriptions,
 	},
 	computed: {
+		...mapState(usePlayer, ['paused']),
 		gpodder() {
 			return loadState('repod', 'gpodder', false)
 		},
 	},
+	mounted() {
+		this.init()
+		setInterval(this.loop, 40000)
+	},
+	methods: {
+		...mapActions(usePlayer, ['init', 'time']),
+		loop() {
+			if (this.paused === false) {
+				this.time()
+			}
+		},
+	},
 }
 </script>
--- a/src/components/Atoms/AppContent.vue
+++ b/src/components/Atoms/AppContent.vue
@ -1,11 +1,13 @@
 <template>
-	<NcAppContent :class="episode ? 'padding' : ''">
+	<NcAppContent :class="{ padding: episode }">
 		<slot />
 	</NcAppContent>
 </template>

 <script>
 import { NcAppContent } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'AppContent',
@ -13,9 +15,7 @@ export default {
 		NcAppContent,
 	},
 	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
+		...mapState(usePlayer, ['episode']),
 	},
 }
 </script>
--- a/src/components/Atoms/AppNavigation.vue
+++ b/src/components/Atoms/AppNavigation.vue
@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation :class="episode ? 'padding' : ''">
+	<NcAppNavigation :class="{ padding: episode }">
 		<slot />
 		<template #list>
 			<slot name="list" />
@ -12,6 +12,8 @@

 <script>
 import { NcAppNavigation } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'AppNavigation',
@ -19,9 +21,7 @@ export default {
 		NcAppNavigation,
 	},
 	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
+		...mapState(usePlayer, ['episode']),
 	},
 }
 </script>
--- a/src/components/Atoms/Modal.vue
+++ b/src/components/Atoms/Modal.vue
@ -1,20 +1,25 @@
 <template>
-	<div>
+	<div class="flex">
 		<NcAvatar :display-name="name" :is-no-user="true" :size="256" :url="image" />
 		<h2>{{ name }}</h2>
 		<SafeHtml :source="description" />
-		<div>
+		<div class="flex">
 			<NcButton v-if="link" :href="link" target="_blank">
 				<template #icon>
 					<OpenInNewIcon :size="20" />
 				</template>
 				{{ title }}
 			</NcButton>
-			<NcButton v-if="url" :href="url" target="_blank">
+			<NcButton
+				v-if="url"
+				:download="filenameFromUrl(url)"
+				:href="url"
+				target="_blank">
 				<template #icon>
 					<DownloadIcon :size="20" />
 				</template>
-				{{ t('repod', 'Download') }} {{ size ? `(${episodeFileSize})` : '' }}
+				{{ t('repod', 'Download') }}
+				{{ size ? `(${humanFileSize(size)})` : '' }}
 			</NcButton>
 		</div>
 	</div>
@ -25,6 +30,7 @@ import { NcAvatar, NcButton } from '@nextcloud/vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import SafeHtml from './SafeHtml.vue'
+import { filenameFromUrl } from '../../utils/url.js'
 import { humanFileSize } from '../../utils/size.js'

 export default {
@ -66,16 +72,15 @@ export default {
 			required: true,
 		},
 	},
-	computed: {
-		episodeFileSize() {
-			return humanFileSize(this.size)
-		},
+	methods: {
+		filenameFromUrl,
+		humanFileSize,
 	},
 }
 </script>

 <style scoped>
-div {
+.flex {
 	align-items: center;
 	display: flex;
 	flex-direction: column;
--- a/src/components/Atoms/SafeHtml.vue
+++ b/src/components/Atoms/SafeHtml.vue
@ -3,15 +3,15 @@
 </template>

 <script>
+import dompurify from 'dompurify'
 import linkifyHtml from 'linkify-html'
-import { sanitize } from 'dompurify'

 export default {
 	name: 'SafeHtml',
 	directives: {
 		sanitize: {
-			inserted(el, binding) {
-				el.innerHTML = sanitize(
+			mounted(el, binding) {
+				el.innerHTML = dompurify.sanitize(
 					linkifyHtml(binding.value, {
 						nl2br: true,
 						target: '_blank',
--- a/src/components/Discover/Search.vue
+++ b/src/components/Discover/Search.vue
@ -19,7 +19,7 @@
 				</template>
 				<template #actions>
 					<NcActionButton
-						v-if="!isSubscribed(feed.link)"
+						v-if="!subscriptions.includes(feed.link)"
 						:aria-label="t('repod', 'Subscribe')"
 						:name="t('repod', 'Subscribe')"
 						:title="t('repod', 'Subscribe')"
@ -36,14 +36,16 @@

 <script>
 import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import axios from '@nextcloud/axios'
 import { debounce } from '../../utils/debounce.js'
 import { formatLocaleDate } from '../../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
+import { showError } from '../../utils/toast.js'
 import { toUrl } from '../../utils/url.js'
+import { useSubscriptions } from '../../store/subscriptions.js'

 export default {
 	name: 'Search',
@ -66,12 +68,16 @@ export default {
 			loading: false,
 		}
 	},
+	computed: {
+		...mapState(useSubscriptions, ['subscriptions']),
+	},
 	watch: {
 		value() {
 			this.search()
 		},
 	},
 	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
 		formatLocaleDate,
 		toUrl,
 		async addSubscription(url) {
@ -88,10 +94,7 @@ export default {
 				showError(t('repod', 'Error while adding the feed'))
 			}

-			this.$store.dispatch('subscriptions/fetch')
-		},
-		isSubscribed(url) {
-			return this.$store.state.subscriptions.subscriptions.includes(url)
+			this.fetch()
 		},
 		search: debounce(async function value() {
 			try {
--- a/src/components/Discover/Toplist.vue
+++ b/src/components/Discover/Toplist.vue
@ -16,7 +16,7 @@
 import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
+import { showError } from '../../utils/toast.js'
 import { toUrl } from '../../utils/url.js'

 export default {
--- a/src/components/Feed/Banner.vue
+++ b/src/components/Feed/Banner.vue
@ -23,7 +23,7 @@
 					<SafeHtml :source="description" />
 				</div>
 				<NcAppNavigationNew
-					v-if="!isSubscribed"
+					v-if="!subscriptions.includes(url)"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@ -37,13 +37,15 @@

 <script>
 import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
-import { showError, showSuccess } from '@nextcloud/dialogs'
+import { mapActions, mapState } from 'pinia'
+import { showError, showSuccess } from '../../utils/toast.js'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import RssIcon from 'vue-material-design-icons/Rss.vue'
 import SafeHtml from '../Atoms/SafeHtml.vue'
 import axios from '@nextcloud/axios'
 import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
+import { useSubscriptions } from '../../store/subscriptions.js'

 export default {
 	name: 'Banner',
@ -77,14 +79,13 @@ export default {
 		},
 	},
 	computed: {
+		...mapState(useSubscriptions, ['subscriptions']),
 		url() {
 			return decodeUrl(this.$route.params.url)
 		},
-		isSubscribed() {
-			return this.$store.state.subscriptions.subscriptions.includes(this.url)
-		},
 	},
 	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
 		async addSubscription() {
 			try {
 				await axios.post(
@ -99,7 +100,7 @@ export default {
 				showError(t('repod', 'Error while adding the feed'))
 			}

-			this.$store.dispatch('subscriptions/fetch')
+			this.fetch()
 		},
 		copyFeed() {
 			window.navigator.clipboard.writeText(this.url)
--- a/src/components/Feed/Episodes.vue
+++ b/src/components/Feed/Episodes.vue
@ -6,18 +6,20 @@
 				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
 				:active="isCurrentEpisode(episode)"
-				:class="hasEnded(episode) ? 'ended' : ''"
 				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
 				:force-display-actions="true"
+				:href="$route.href"
 				:name="episode.name"
+				:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
+				target="_self"
 				:title="episode.description"
 				@click="modalEpisode = episode">
-				<template #extra-actions>
+				<template #actions>
 					<NcActionButton
 						v-if="!isCurrentEpisode(episode)"
 						:aria-label="t('repod', 'Play')"
 						:title="t('repod', 'Play')"
-						@click="load(episode)">
+						@click="load(episode, url)">
 						<template #icon>
 							<PlayIcon :size="20" />
 						</template>
@ -32,49 +34,52 @@
 						</template>
 					</NcActionButton>
 				</template>
-				<template #actions>
-					<NcActionButton
-						v-if="episode.duration && !hasEnded(episode)"
-						:aria-label="t('repod', 'Mark as read')"
-						:disabled="loadingAction"
-						:name="t('repod', 'Mark as read')"
-						:title="t('repod', 'Mark as read')"
-						@click="markAs(episode, true)">
-						<template #icon>
-							<PlaylistPlayIcon :size="20" />
-						</template>
-					</NcActionButton>
-					<NcActionButton
-						v-if="episode.duration && hasEnded(episode)"
-						:aria-label="t('repod', 'Mark as unread')"
-						:disabled="loadingAction"
-						:name="t('repod', 'Mark as unread')"
-						:title="t('repod', 'Mark as unread')"
-						@click="markAs(episode, false)">
-						<template #icon>
-							<PlaylistRemoveIcon :size="20" />
-						</template>
-					</NcActionButton>
-					<NcActionLink
-						v-if="episode.link"
-						:href="episode.link"
-						:name="t('repod', 'Open website')"
-						target="_blank"
-						:title="t('repod', 'Open website')">
-						<template #icon>
-							<OpenInNewIcon :size="20" />
-						</template>
-					</NcActionLink>
-					<NcActionLink
-						v-if="episode.url"
-						:href="episode.url"
-						:name="t('repod', 'Download')"
-						target="_blank"
-						:title="t('repod', 'Download')">
-						<template #icon>
-							<DownloadIcon :size="20" />
-						</template>
-					</NcActionLink>
+				<template #extra>
+					<NcActions>
+						<NcActionButton
+							v-if="episode.duration && !hasEnded(episode)"
+							:aria-label="t('repod', 'Mark as read')"
+							:disabled="loadingAction"
+							:name="t('repod', 'Mark as read')"
+							:title="t('repod', 'Mark as read')"
+							@click="markAs(episode, true)">
+							<template #icon>
+								<PlaylistPlayIcon :size="20" />
+							</template>
+						</NcActionButton>
+						<NcActionButton
+							v-if="episode.duration && hasEnded(episode)"
+							:aria-label="t('repod', 'Mark as unread')"
+							:disabled="loadingAction"
+							:name="t('repod', 'Mark as unread')"
+							:title="t('repod', 'Mark as unread')"
+							@click="markAs(episode, false)">
+							<template #icon>
+								<PlaylistRemoveIcon :size="20" />
+							</template>
+						</NcActionButton>
+						<NcActionLink
+							v-if="episode.link"
+							:href="episode.link"
+							:name="t('repod', 'Open website')"
+							target="_blank"
+							:title="t('repod', 'Open website')">
+							<template #icon>
+								<OpenInNewIcon :size="20" />
+							</template>
+						</NcActionLink>
+						<NcActionLink
+							v-if="episode.url"
+							:download="filenameFromUrl(episode.url)"
+							:href="episode.url"
+							:name="t('repod', 'Download')"
+							target="_blank"
+							:title="t('repod', 'Download')">
+							<template #icon>
+								<DownloadIcon :size="20" />
+							</template>
+						</NcActionLink>
+					</NcActions>
 				</template>
 				<template #icon>
 					<NcAvatar
@ -112,18 +117,20 @@
 import {
 	NcActionButton,
 	NcActionLink,
+	NcActions,
 	NcAvatar,
 	NcListItem,
 	NcModal,
 	NcProgressBar,
 } from '@nextcloud/vue'
+import { decodeUrl, filenameFromUrl } from '../../utils/url.js'
 import {
 	durationToSeconds,
 	formatEpisodeTimestamp,
 	formatLocaleDate,
 } from '../../utils/time.js'
+import { mapActions, mapState } from 'pinia'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
-import { EventBus } from '../../store/bus.js'
 import Loading from '../Atoms/Loading.vue'
 import Modal from '../Atoms/Modal.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
@ -132,9 +139,10 @@ import PlaylistPlayIcon from 'vue-material-design-icons/PlaylistPlay.vue'
 import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
 import StopIcon from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
-import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
+import { showError } from '../../utils/toast.js'
+import { usePlayer } from '../../store/player.js'
+import { useSettings } from '../../store/settings.js'

 export default {
 	name: 'Episodes',
@ -144,6 +152,7 @@ export default {
 		Modal,
 		NcActionButton,
 		NcActionLink,
+		NcActions,
 		NcAvatar,
 		NcListItem,
 		NcModal,
@ -163,12 +172,8 @@ export default {
 		}
 	},
 	computed: {
-		currentEpisode() {
-			return this.$store.state.player.episode
-		},
-		filters() {
-			return this.$store.state.settings.filters
-		},
+		...mapState(usePlayer, ['episode']),
+		...mapState(useSettings, ['filters']),
 		filteredEpisodes() {
 			return this.episodes.filter((episode) => {
 				if (!this.filters.listened && this.hasEnded(episode)) {
@ -190,6 +195,15 @@ export default {
 			return decodeUrl(this.$route.params.url)
 		},
 	},
+	watch: {
+		episode() {
+			if (this.episode) {
+				this.episodes = this.episodes.map((e) =>
+					e.url === this.episode.url ? this.episode : e,
+				)
+			}
+		},
+	},
 	async mounted() {
 		try {
 			this.loading = true
@ -201,7 +215,6 @@ export default {
 			this.episodes = [...episodes.data].sort(
 				(a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date),
 			)
-			EventBus.$on('updateEpisodesList', this.updateList)
 		} catch (e) {
 			console.error(e)
 			showError(t('repod', 'Could not fetch episodes'))
@ -209,10 +222,9 @@ export default {
 			this.loading = false
 		}
 	},
-	destroyed() {
-		EventBus.$off('updateEpisodesList')
-	},
 	methods: {
+		...mapActions(usePlayer, ['load']),
+		filenameFromUrl,
 		formatLocaleDate,
 		hasEnded(episode) {
 			return (
@ -224,18 +236,17 @@ export default {
 			)
 		},
 		isCurrentEpisode(episode) {
-			return this.currentEpisode && this.currentEpisode.url === episode.url
+			return this.episode && this.episode.url === episode.url
 		},
 		isListening(episode) {
 			return (
 				episode.action &&
+				episode.action.action &&
 				episode.action.action.toLowerCase() === 'play' &&
+				episode.action.position > 0 &&
 				!this.hasEnded(episode)
 			)
 		},
-		load(episode) {
-			this.$store.dispatch('player/load', episode)
-		},
 		async markAs(episode, read) {
 			try {
 				this.loadingAction = true
@ -253,7 +264,9 @@ export default {
 					generateUrl('/apps/gpoddersync/episode_action/create'),
 					[episode.action],
 				)
-				this.updateList(episode)
+				if (read && this.episode && episode.url === this.episode.url) {
+					this.load(null)
+				}
 			} catch (e) {
 				console.error(e)
 				showError(t('repod', 'Could not change the status of the episode'))
@ -261,20 +274,11 @@ export default {
 				this.loadingAction = false
 			}
 		},
-		updateList(episode) {
-			this.episodes = this.episodes.map((e) =>
-				e.url === episode.url ? episode : e,
-			)
-		},
 	},
 }
 </script>

 <style scoped>
-.ended {
-	opacity: 0.4;
-}
-
 .progress {
 	margin-top: 0.4rem;
 }
--- a/src/components/Player/Bar.vue
+++ b/src/components/Player/Bar.vue
@ -1,10 +1,10 @@
 <template>
-	<div v-if="player.episode" class="footer">
-		<img class="background" :src="player.episode.image" />
-		<Loading v-if="!player.loaded" />
-		<ProgressBar v-if="player.loaded" />
-		<div v-if="player.loaded" class="player">
-			<img :src="player.episode.image" />
+	<div v-if="episode" class="footer">
+		<img class="background" :src="episode.image" />
+		<Loading v-if="!loaded" />
+		<ProgressBar v-if="loaded" />
+		<div v-if="loaded" class="player">
+			<img :src="episode.image" />
 			<Infos class="infos" />
 			<Controls class="controls" />
 			<Timer class="timer" />
@ -20,6 +20,8 @@ import Loading from '../Atoms/Loading.vue'
 import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.vue'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'Bar',
@ -32,9 +34,7 @@ export default {
 		Volume,
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['episode', 'loaded']),
 	},
 }
 </script>
--- a/src/components/Player/Controls.vue
+++ b/src/components/Player/Controls.vue
@ -1,21 +1,15 @@
 <template>
 	<div class="controls">
-		<PauseIcon
-			v-if="!player.paused"
-			class="pointer"
-			:size="50"
-			@click="$store.dispatch('player/pause')" />
-		<PlayIcon
-			v-if="player.paused"
-			class="pointer"
-			:size="50"
-			@click="$store.dispatch('player/play')" />
+		<PauseIcon v-if="!paused" class="pointer" :size="50" @click="pause" />
+		<PlayIcon v-if="paused" class="pointer" :size="50" @click="play" />
 	</div>
 </template>

 <script>
+import { mapActions, mapState } from 'pinia'
 import PauseIcon from 'vue-material-design-icons/Pause.vue'
 import PlayIcon from 'vue-material-design-icons/Play.vue'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'Controls',
@ -24,9 +18,10 @@ export default {
 		PlayIcon,
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['paused']),
+	},
+	methods: {
+		...mapActions(usePlayer, ['play', 'pause']),
 	},
 }
 </script>
--- a/src/components/Player/Infos.vue
+++ b/src/components/Player/Infos.vue
@ -1,20 +1,20 @@
 <template>
 	<div class="root">
 		<strong class="pointer" @click="modal = true">
-			{{ player.episode.name }}
+			{{ episode.name }}
 		</strong>
 		<router-link :to="hash">
-			<i>{{ player.episode.title }}</i>
+			<i>{{ episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
 			<Modal
-				:description="player.episode.description"
-				:image="player.episode.image"
-				:link="player.episode.link"
-				:name="player.episode.name"
-				:size="player.episode.size"
-				:title="player.episode.title"
-				:url="player.episode.url" />
+				:description="episode.description"
+				:image="episode.image"
+				:link="episode.link"
+				:name="episode.name"
+				:size="episode.size"
+				:title="episode.title"
+				:url="episode.url" />
 		</NcModal>
 	</div>
 </template>
@ -22,7 +22,9 @@
 <script>
 import Modal from '../Atoms/Modal.vue'
 import { NcModal } from '@nextcloud/vue'
+import { mapState } from 'pinia'
 import { toUrl } from '../../utils/url.js'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'Infos',
@ -36,11 +38,9 @@ export default {
 		}
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['episode', 'podcastUrl']),
 		hash() {
-			return toUrl(this.player.podcastUrl)
+			return toUrl(this.podcastUrl)
 		},
 	},
 }
--- a/src/components/Player/ProgressBar.vue
+++ b/src/components/Player/ProgressBar.vue
@ -1,20 +1,24 @@
 <template>
 	<input
 		class="progress"
-		:max="player.duration"
+		:max="duration"
 		min="0"
 		type="range"
-		:value="player.currentTime"
-		@change="(event) => $store.dispatch('player/seek', event.target.value)" />
+		:value="currentTime"
+		@change="(event) => seek(event.target.value)" />
 </template>

 <script>
+import { mapActions, mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'
+
 export default {
 	name: 'ProgressBar',
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['duration', 'currentTime']),
+	},
+	methods: {
+		...mapActions(usePlayer, ['seek']),
 	},
 }
 </script>
--- a/src/components/Player/Timer.vue
+++ b/src/components/Player/Timer.vue
@ -1,20 +1,20 @@
 <template>
 	<div>
-		<span>{{ formatTimer(new Date(player.currentTime * 1000)) }}</span>
+		<span>{{ formatTimer(new Date(currentTime * 1000)) }}</span>
 		<span>/</span>
-		<span>{{ formatTimer(new Date(player.duration * 1000)) }}</span>
+		<span>{{ formatTimer(new Date(duration * 1000)) }}</span>
 	</div>
 </template>

 <script>
 import { formatTimer } from '../../utils/time.js'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'Timer',
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['duration', 'currentTime']),
 	},
 	methods: {
 		formatTimer,
--- a/src/components/Player/Volume.vue
+++ b/src/components/Player/Volume.vue
@ -1,42 +1,42 @@
 <template>
 	<div>
 		<VolumeHighIcon
-			v-if="player.volume > 0.7"
+			v-if="volume > 0.7"
 			class="pointer"
 			:size="30"
 			@click="mute" />
 		<VolumeLowIcon
-			v-if="player.volume > 0 && player.volume <= 0.3"
+			v-if="volume > 0 && volume <= 0.3"
 			class="pointer"
 			:size="30"
 			@click="mute" />
 		<VolumeMediumIcon
-			v-if="player.volume > 0.3 && player.volume <= 0.7"
+			v-if="volume > 0.3 && volume <= 0.7"
 			class="pointer"
 			:size="30"
 			@click="mute" />
 		<VolumeMuteIcon
-			v-if="player.volume === 0"
+			v-if="volume === 0"
 			class="pointer"
 			:size="30"
-			@click="$store.dispatch('player/volume', volumeMuted)" />
+			@click="setVolume(volumeMuted)" />
 		<input
 			max="1"
 			min="0"
 			step="0.1"
 			type="range"
-			:value="player.volume"
-			@change="
-				(event) => $store.dispatch('player/volume', event.target.value)
-			" />
+			:value="volume"
+			@change="(event) => setVolume(event.target.value)" />
 	</div>
 </template>

 <script>
+import { mapActions, mapState } from 'pinia'
 import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
 import VolumeLowIcon from 'vue-material-design-icons/VolumeLow.vue'
 import VolumeMediumIcon from 'vue-material-design-icons/VolumeMedium.vue'
 import VolumeMuteIcon from 'vue-material-design-icons/VolumeMute.vue'
+import { usePlayer } from '../../store/player.js'

 export default {
 	name: 'Volume',
@ -52,14 +52,13 @@ export default {
 		}
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['volume']),
 	},
 	methods: {
+		...mapActions(usePlayer, ['setVolume']),
 		mute() {
-			this.volumeMuted = this.player.volume
-			this.$store.dispatch('player/volume', 0)
+			this.volumeMuted = this.volume
+			this.setVolume(0)
 		},
 	},
 }
--- a/src/components/Settings/Filters.vue
+++ b/src/components/Settings/Filters.vue
@ -5,40 +5,30 @@
 		:name="t('repod', 'Filtering episodes')">
 		<template #actions>
 			<NcActionCheckbox
-				:checked="all"
 				:disabled="all"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', {
-							listened: checked,
-							listening: checked,
-							unlistened: checked,
-						})
+				:model-value="all"
+				@change="
+					setFilters({
+						listened: true,
+						listening: true,
+						unlistened: true,
+					})
 				">
 				{{ t('repod', 'Show all') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:checked="filters.listened"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', { listened: checked })
-				">
+				:model-value="filters.listened"
+				@change="setFilters({ listened: !filters.listened })">
 				{{ t('repod', 'Listened') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:checked="filters.listening"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', { listening: checked })
-				">
+				:model-value="filters.listening"
+				@change="setFilters({ listening: !filters.listening })">
 				{{ t('repod', 'Listening') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:checked="filters.unlistened"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', { unlistened: checked })
-				">
+				:model-value="filters.unlistened"
+				@change="setFilters({ unlistened: !filters.unlistened })">
 				{{ t('repod', 'Unlistened') }}
 			</NcActionCheckbox>
 		</template>
@ -51,8 +41,11 @@

 <script>
 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 { getCookie } from '../../utils/cookies.js'
+import { useSettings } from '../../store/settings.js'

 export default {
 	name: 'Filters',
@ -63,6 +56,7 @@ export default {
 		NcActionCheckbox,
 	},
 	computed: {
+		...mapState(useSettings, ['filters']),
 		all() {
 			return (
 				this.filters.listened &&
@ -70,12 +64,15 @@ export default {
 				this.filters.unlistened
 			)
 		},
-		filters() {
-			return this.$store.state.settings.filters
-		},
 	},
 	mounted() {
-		this.$store.dispatch('settings/fetch')
+		try {
+			const filters = getCookie('repod.filters')
+			this.filters = JSON.parse(filters)
+		} catch {}
+	},
+	methods: {
+		...mapActions(useSettings, ['setFilters']),
 	},
 }
 </script>
--- a/src/components/Settings/Speed.vue
+++ b/src/components/Settings/Speed.vue
@ -3,27 +3,27 @@
 		<template #extra>
 			<div class="extra">
 				<MinusIcon class="pointer" :size="20" @click="changeRate(-0.1)" />
-				<NcCounterBubble class="counter">
-					x{{ player.rate }}
-				</NcCounterBubble>
+				<NcCounterBubble class="counter">x{{ rate }}</NcCounterBubble>
 				<PlusIcon class="pointer" :size="20" @click="changeRate(0.1)" />
 			</div>
 		</template>
 		<template #icon>
-			<SpeedometerSlowIcon v-if="player.rate < 1" :size="20" />
-			<SpeedometerMediumIcon v-if="player.rate === 1" :size="20" />
-			<SpeedometerIcon v-if="player.rate > 1" :size="20" />
+			<SpeedometerSlowIcon v-if="rate < 1" :size="20" />
+			<SpeedometerMediumIcon v-if="rate === 1" :size="20" />
+			<SpeedometerIcon v-if="rate > 1" :size="20" />
 		</template>
 	</NcAppNavigationItem>
 </template>

 <script>
 import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import MinusIcon from 'vue-material-design-icons/Minus.vue'
 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 { usePlayer } from '../../store/player.js'

 export default {
 	name: 'Speed',
@ -37,17 +37,13 @@ export default {
 		SpeedometerSlowIcon,
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['rate']),
 	},
 	methods: {
+		...mapActions(usePlayer, ['setRate']),
 		changeRate(diff) {
-			const newRate = (this.player.rate + diff).toPrecision(2)
-			this.$store.dispatch(
-				'player/rate',
-				newRate > 0 ? newRate : this.player.rate,
-			)
+			const newRate = (this.rate + diff).toPrecision(2)
+			this.setRate(newRate > 0 ? newRate : this.rate)
 		},
 	},
 }
--- a/src/components/Sidebar/Item.vue
+++ b/src/components/Sidebar/Item.vue
@ -31,8 +31,10 @@ import AlertIcon from 'vue-material-design-icons/Alert.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
+import { mapActions } from 'pinia'
+import { showError } from '../../utils/toast.js'
 import { toUrl } from '../../utils/url.js'
+import { useSubscriptions } from '../../store/subscriptions.js'

 export default {
 	name: 'Item',
@ -80,6 +82,7 @@ export default {
 		}
 	},
 	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
 		async deleteSubscription() {
 			if (
 				confirm(
@ -97,7 +100,7 @@ export default {
 					showError(t('repod', 'Error while removing the feed'))
 				} finally {
 					this.loading = false
-					this.$store.dispatch('subscriptions/fetch')
+					this.fetch()
 				}
 			}
 		},
--- a/src/components/Sidebar/Subscriptions.vue
+++ b/src/components/Sidebar/Subscriptions.vue
@ -30,12 +30,14 @@ import {
 	NcAppNavigationList,
 	NcAppNavigationNew,
 } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import AppNavigation from '../Atoms/AppNavigation.vue'
 import Item from './Item.vue'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import Settings from '../Settings/Settings.vue'
-import { showError } from '@nextcloud/dialogs'
+import { showError } from '../../utils/toast.js'
+import { useSubscriptions } from '../../store/subscriptions.js'

 export default {
 	name: 'Subscriptions',
@ -55,13 +57,11 @@ export default {
 		}
 	},
 	computed: {
-		subscriptions() {
-			return this.$store.state.subscriptions.subscriptions
-		},
+		...mapState(useSubscriptions, ['subscriptions']),
 	},
 	async mounted() {
 		try {
-			await this.$store.dispatch('subscriptions/fetch')
+			await this.fetch()
 		} catch (e) {
 			console.error(e)
 			showError(t('repod', 'Could not fetch subscriptions'))
@ -69,5 +69,8 @@ export default {
 			this.loading = false
 		}
 	},
+	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
+	},
 }
 </script>
--- a/src/main.js
+++ b/src/main.js
@ -1,13 +1,13 @@
 import { n, t } from '@nextcloud/l10n'
 import App from './App.vue'
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import router from './router.js'
-import store from './store/main.js'
+
+const Vue = createApp(App)
+const pinia = createPinia()

 Vue.mixin({ methods: { t, n } })
-
-const View = Vue.extend(App)
-new View({
-	router,
-	store,
-}).$mount('#content')
+Vue.use(pinia)
+Vue.use(router)
+Vue.mount('#content')
--- a/src/router.js
+++ b/src/router.js
@ -1,13 +1,10 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
 import Discover from './views/Discover.vue'
 import Feed from './views/Feed.vue'
-import Router from 'vue-router'
-import Vue from 'vue'
 import { generateUrl } from '@nextcloud/router'

-Vue.use(Router)
-
-const router = new Router({
-	base: generateUrl('apps/repod'),
+const router = createRouter({
+	history: createWebHashHistory(generateUrl('apps/repod')),
 	routes: [
 		{
 			path: '/',
--- a/src/store/bus.js
+++ b/src/store/bus.js
@ -1,3 +0,0 @@
-import Vue from 'vue'
-
-export const EventBus = new Vue()
--- a/src/store/main.js
+++ b/src/store/main.js
@ -1,17 +0,0 @@
-import Vuex, { Store } from 'vuex'
-import Vue from 'vue'
-import { player } from './player.js'
-import { settings } from './settings.js'
-import { subscriptions } from './subscriptions.js'
-
-Vue.use(Vuex)
-
-const store = new Store({
-	modules: {
-		player,
-		settings,
-		subscriptions,
-	},
-})
-
-export default store
--- a/src/store/player.js
+++ b/src/store/player.js
@ -1,25 +1,12 @@
-import { EventBus } from './bus.js'
 import axios from '@nextcloud/axios'
-import { decodeUrl } from '../utils/url.js'
+import { defineStore } from 'pinia'
 import { formatEpisodeTimestamp } from '../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
-import router from '../router.js'
-import store from './main.js'

 const audio = new Audio()
-audio.ondurationchange = () => store.commit('player/duration', audio.duration)
-audio.onended = () => store.dispatch('player/stop')
-audio.onloadeddata = () => store.commit('player/loaded', true)
-audio.onplay = () => store.dispatch('player/play')
-audio.onpause = () => store.dispatch('player/pause')
-audio.onratechange = () => store.commit('player/rate', audio.playbackRate)
-audio.onseeked = () => store.commit('player/currentTime', audio.currentTime)
-audio.ontimeupdate = () => store.commit('player/currentTime', audio.currentTime)
-audio.onvolumechange = () => store.commit('player/volume', audio.volume)

-export const player = {
-	namespaced: true,
-	state: {
+export const usePlayer = defineStore('player', {
+	state: () => ({
 		currentTime: null,
 		duration: null,
 		episode: null,
@ -29,119 +16,91 @@ export const player = {
 		volume: 1,
 		rate: 1,
 		started: 0,
-	},
-	mutations: {
-		action: (state, action) => {
-			state.episode.action = action
+	}),
+	actions: {
+		init() {
+			audio.ondurationchange = () => (this.duration = audio.duration)
+			audio.onended = () => this.stop()
+			audio.onloadeddata = () => (this.loaded = true)
+			audio.onpause = () => this.pause()
+			audio.onplay = () => this.play()
+			audio.onratechange = () => (this.rate = audio.playbackRate)
+			audio.onseeked = () => (this.currentTime = audio.currentTime)
+			audio.ontimeupdate = () => (this.currentTime = audio.currentTime)
+			audio.onvolumechange = () => (this.volume = audio.volume)
+		},
+		async load(episode, podcastUrl) {
+			this.episode = episode
+			this.podcastUrl = podcastUrl

-			if (action && action.position && action.position < action.total) {
-				audio.currentTime = action.position
-				state.started = audio.currentTime
-			}
-		},
-		currentTime: (state, currentTime) => {
-			state.currentTime = currentTime
-		},
-		duration: (state, duration) => {
-			state.duration = duration
-		},
-		episode: (state, episode) => {
-			state.episode = episode
-
-			if (episode) {
-				state.podcastUrl = decodeUrl(router.currentRoute.params.url)
-				audio.src = episode.url
+			if (this.episode) {
+				audio.src = this.episode.url
 				audio.load()
-				audio.play()
+
+				try {
+					const action = await axios.get(
+						generateUrl('/apps/repod/episodes/action?url={url}', {
+							url: this.episode.url,
+						}),
+					)
+
+					this.episode.action = action
+				} catch {}

 				if (
-					episode.action &&
-					episode.action.position &&
-					episode.action.position < episode.action.total
+					this.episode.action &&
+					this.episode.action.position &&
+					this.episode.action.position < this.episode.action.total
 				) {
-					audio.currentTime = episode.action.position
-					state.started = audio.currentTime
+					audio.currentTime = this.episode.action.position
+					this.started = audio.currentTime
 				}
+
+				audio.play()
 			} else {
-				state.loaded = false
-				state.podcastUrl = null
+				this.loaded = false
+				this.podcastUrl = null
 				audio.src = ''
 			}
 		},
-		loaded: (state, loaded) => {
-			state.loaded = loaded
-		},
-		paused: (state, paused) => {
-			state.paused = paused
-		},
-		volume: (state, volume) => {
-			state.volume = volume
-		},
-		rate: (state, rate) => {
-			state.rate = rate
-		},
-		started: (state, started) => {
-			state.started = started
-		},
-	},
-	actions: {
-		load: async (context, episode) => {
-			context.commit('episode', episode)
-			try {
-				const action = await axios.get(
-					generateUrl('/apps/repod/episodes/action?url={url}', {
-						url: episode.url,
-					}),
-				)
-				context.commit('action', action.data)
-			} catch {}
-		},
-		pause: (context) => {
+		pause() {
 			audio.pause()
-			context.commit('paused', true)
-			context.dispatch('time')
+			this.paused = true
+			this.time()
 		},
-		play: (context) => {
+		play() {
 			audio.play()
-			context.commit('paused', false)
-			context.commit('started', audio.currentTime)
+			this.paused = false
+			this.started = audio.currentTime
 		},
-		seek: (context, currentTime) => {
+		seek(currentTime) {
 			audio.currentTime = currentTime
-			context.dispatch('time')
+			this.time()
 		},
-		stop: (context) => {
-			context.dispatch('pause')
-			context.commit('episode', null)
+		stop() {
+			this.pause()
+			this.episode = null
 		},
-		time: async (context) => {
-			const episode = context.state.episode
-			episode.action = {
-				podcast: context.state.podcastUrl,
-				episode: context.state.episode.url,
-				guid: context.state.episode.guid,
+		time() {
+			this.episode.action = {
+				podcast: this.podcastUrl,
+				episode: this.episode.url,
+				guid: this.episode.guid,
 				action: 'play',
 				timestamp: formatEpisodeTimestamp(new Date()),
-				started: Math.round(context.state.started),
+				started: Math.round(this.started),
 				position: Math.round(audio.currentTime),
 				total: Math.round(audio.duration),
 			}
 			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
-				episode.action,
+				this.episode.action,
 			])
-			EventBus.$emit('updateEpisodesList', episode)
 		},
-		volume: (_, volume) => {
+		setVolume(volume) {
 			audio.volume = volume
 		},
-		rate: (_, rate) => {
+		setRate(rate) {
 			audio.playbackRate = rate
 		},
 	},
-}
-
-setInterval(() => {
-	if (player.state.paused === false) {
-		store.dispatch('player/time')
-	}
-}, 40000)
+})
--- a/src/store/settings.js
+++ b/src/store/settings.js
@ -1,28 +1,18 @@
-import { getCookie, setCookie } from '../utils/cookies.js'
+import { defineStore } from 'pinia'
+import { setCookie } from '../utils/cookies.js'

-export const settings = {
-	namespaced: true,
-	state: {
+export const useSettings = defineStore('settings', {
+	state: () => ({
 		filters: {
 			listened: true,
 			listening: true,
 			unlistened: true,
 		},
-	},
-	mutations: {
-		filters: (state, filters) => {
-			state.filters = { ...state.filters, ...filters }
-			setCookie('repod.filters', JSON.stringify(state.filters), 365)
-		},
-	},
+	}),
 	actions: {
-		fetch: (context) => {
-			try {
-				const filters = getCookie('repod.filters')
-				context.commit('filters', JSON.parse(filters))
-			} catch (e) {
-				// nothing
-			}
+		setFilters(filters) {
+			this.filters = { ...this.filters, ...filters }
+			setCookie('repod.filters', JSON.stringify(this.filters), 365)
 		},
 	},
-}
+})
--- a/src/store/subscriptions.js
+++ b/src/store/subscriptions.js
@ -1,28 +1,20 @@
 import axios from '@nextcloud/axios'
+import { defineStore } from 'pinia'
 import { generateUrl } from '@nextcloud/router'

-export const subscriptions = {
-	namespaced: true,
-	state: {
+export const useSubscriptions = defineStore('subscriptions', {
+	state: () => ({
 		subscriptions: [],
-	},
-	mutations: {
-		set: (state, subscriptions) => {
-			state.subscriptions = subscriptions
-		},
-	},
+	}),
 	actions: {
-		fetch: async (context) => {
+		async fetch() {
 			const metrics = await axios.get(
 				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
 			)
 			const subs = [...metrics.data.subscriptions].sort(
 				(a, b) => b.listenedSeconds - a.listenedSeconds,
 			)
-			context.commit(
-				'set',
-				subs.map((sub) => sub.url),
-			)
+			this.subscriptions = subs.map((sub) => sub.url)
 		},
 	},
-}
+})
--- a/src/utils/toast.js
+++ b/src/utils/toast.js
@ -0,0 +1,12 @@
+import toastify from 'toastify-js'
+
+export const showMessage = (text, backgroundColor) =>
+	toastify({
+		text,
+		backgroundColor,
+	}).showToast()
+
+export const showError = (text) => showMessage(text, 'var(--color-error)')
+export const showWarning = (text) => showMessage(text, 'var(--color-warning)')
+export const showInfo = (text) => showMessage(text, 'var(--color-primary)')
+export const showSuccess = (text) => showMessage(text, 'var(--color-success)')
--- a/src/utils/url.js
+++ b/src/utils/url.js
@ -1,3 +1,7 @@
 export const encodeUrl = (url) => encodeURIComponent(btoa(url))
 export const decodeUrl = (url) => atob(decodeURIComponent(url))
 export const toUrl = (url) => `/${encodeUrl(url)}`
+export const filenameFromUrl = (str) => {
+	const url = new URL(str)
+	return url.pathname.split('/').pop()
+}
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@ -1,7 +1,9 @@
 <template>
 	<AppContent class="main">
-		<NcTextField :label="t('repod', 'Find a podcast')" :value.sync="search">
-			<Magnify :size="20" />
+		<NcTextField v-model="search" :label="t('repod', 'Find a podcast')">
+			<template #icon>
+				<Magnify :size="20" />
+			</template>
 		</NcTextField>
 		<Search v-if="search" :value="search" />
 		<Toplist v-if="!search" type="hot" />
--- a/translationfiles/templates/repod.pot
+++ b/translationfiles/templates/repod.pot
@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Nextcloud 3.14159\n"
 "Report-Msgid-Bugs-To: translations\\@example.com\n"
-"POT-Creation-Date: 2024-07-15 14:40+0000\n"
+"POT-Creation-Date: 2024-08-09 10:10+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@ -48,8 +48,8 @@ msgid ""
 msgstr ""

 #: /app/specialVueFakeDummyForL10nScript.js:1
-#: /app/specialVueFakeDummyForL10nScript.js:29
-#: /app/specialVueFakeDummyForL10nScript.js:30
+#: /app/specialVueFakeDummyForL10nScript.js:27
+#: /app/specialVueFakeDummyForL10nScript.js:28
 msgid "Download"
 msgstr ""

@ -95,109 +95,107 @@ msgstr ""

 #: /app/specialVueFakeDummyForL10nScript.js:15
 #: /app/specialVueFakeDummyForL10nScript.js:16
-#: /app/specialVueFakeDummyForL10nScript.js:17
 msgid "Play"
 msgstr ""

+#: /app/specialVueFakeDummyForL10nScript.js:17
 #: /app/specialVueFakeDummyForL10nScript.js:18
-#: /app/specialVueFakeDummyForL10nScript.js:19
-#: /app/specialVueFakeDummyForL10nScript.js:20
 msgid "Stop"
 msgstr ""

+#: /app/specialVueFakeDummyForL10nScript.js:19
+#: /app/specialVueFakeDummyForL10nScript.js:20
 #: /app/specialVueFakeDummyForL10nScript.js:21
-#: /app/specialVueFakeDummyForL10nScript.js:22
-#: /app/specialVueFakeDummyForL10nScript.js:23
 msgid "Mark as read"
 msgstr ""

+#: /app/specialVueFakeDummyForL10nScript.js:22
+#: /app/specialVueFakeDummyForL10nScript.js:23
 #: /app/specialVueFakeDummyForL10nScript.js:24
-#: /app/specialVueFakeDummyForL10nScript.js:25
-#: /app/specialVueFakeDummyForL10nScript.js:26
 msgid "Mark as unread"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:27
-#: /app/specialVueFakeDummyForL10nScript.js:28
+#: /app/specialVueFakeDummyForL10nScript.js:25
+#: /app/specialVueFakeDummyForL10nScript.js:26
 msgid "Open website"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:31
+#: /app/specialVueFakeDummyForL10nScript.js:29
 msgid "Could not fetch episodes"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:32
+#: /app/specialVueFakeDummyForL10nScript.js:30
 msgid "Could not change the status of the episode"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:33
+#: /app/specialVueFakeDummyForL10nScript.js:31
 msgid "Export subscriptions"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:34
+#: /app/specialVueFakeDummyForL10nScript.js:32
 msgid "Filtering episodes"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:35
+#: /app/specialVueFakeDummyForL10nScript.js:33
 msgid "Show all"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:36
+#: /app/specialVueFakeDummyForL10nScript.js:34
 msgid "Listened"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:37
+#: /app/specialVueFakeDummyForL10nScript.js:35
 msgid "Listening"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:38
+#: /app/specialVueFakeDummyForL10nScript.js:36
 msgid "Unlistened"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:39
+#: /app/specialVueFakeDummyForL10nScript.js:37
 msgid "Import subscriptions"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:40
+#: /app/specialVueFakeDummyForL10nScript.js:38
 msgid "Import OPML file"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:41
+#: /app/specialVueFakeDummyForL10nScript.js:39
 msgid "Rate RePod ❤️"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:42
+#: /app/specialVueFakeDummyForL10nScript.js:40
 msgid "Playback speed"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:43
+#: /app/specialVueFakeDummyForL10nScript.js:41
 msgid "Are you sure you want to delete this subscription?"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:44
+#: /app/specialVueFakeDummyForL10nScript.js:42
 msgid "Error while removing the feed"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:45
+#: /app/specialVueFakeDummyForL10nScript.js:43
 msgid "Add a podcast"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:46
+#: /app/specialVueFakeDummyForL10nScript.js:44
 msgid "Could not fetch subscriptions"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:47
+#: /app/specialVueFakeDummyForL10nScript.js:45
 msgid "Find a podcast"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:48
+#: /app/specialVueFakeDummyForL10nScript.js:46
 msgid "Error loading feed"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:49
+#: /app/specialVueFakeDummyForL10nScript.js:47
 msgid "Missing required app"
 msgstr ""

-#: /app/specialVueFakeDummyForL10nScript.js:50
+#: /app/specialVueFakeDummyForL10nScript.js:48
 msgid "Install GPodder Sync"
 msgstr ""
--- a/vite.config.mjs
+++ b/vite.config.mjs
@ -0,0 +1,22 @@
+import { createAppConfig } from '@nextcloud/vite-config'
+import { defineConfig } from 'vite'
+
+const config = defineConfig(({ mode }) => ({
+	build: {
+		rollupOptions: {
+			output: {
+				entryFileNames: 'js/[name].js',
+				format: 'iife',
+				manualChunks: false,
+			},
+		},
+		sourcemap: mode === 'development',
+	},
+}))
+
+export default createAppConfig(
+	{
+		main: 'src/main.js',
+	},
+	{ config },
+)
--- a/webpack.js
+++ b/webpack.js
@ -1,31 +0,0 @@
-const webpackConfig = require('@nextcloud/webpack-vue-config')
-const ESLintPlugin = require('eslint-webpack-plugin')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
-const path = require('path')
-
-webpackConfig.entry = {
-	main: { import: path.join(__dirname, 'src', 'main.js'), filename: 'main.js' },
-}
-
-webpackConfig.plugins.push(
-	new ESLintPlugin({
-		extensions: ['js', 'vue'],
-		files: 'src',
-	}),
-)
-
-webpackConfig.plugins.push(
-	new StyleLintPlugin({
-		files: 'src/**/*.{css,scss,vue}',
-	}),
-)
-
-webpackConfig.module.rules.push({
-	test: /\.svg$/i,
-	type: 'asset/source',
-})
-
-webpackConfig.devtool =
-	webpackConfig.mode !== 'production' ? webpackConfig.devtool : false
-
-module.exports = webpackConfig