From 046f79623c83fae566c00f0eb951a7ea5725eb27 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 2 Nov 2026 17:33:57 +0100
Subject: [PATCH 1/2] refactor(user_status): migrate from vuex to pinia

Replace the vuex store with pinia setup stores, written in TypeScript.
The user status and backup status stores share their state handling
through a common composable. Both apps mounted by the menu entry point
(user menu and dashboard status) keep sharing one pinia instance.

Saving a predefined status message now awaits the request, so errors are
shown and the modal stays open, like for custom messages.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/user_status/src/UserStatus.spec.ts       |  55 ++++
 apps/user_status/src/UserStatus.vue           |  10 +-
 .../components/PredefinedStatusesList.spec.ts |  39 +++
 .../src/components/PredefinedStatusesList.vue |  15 +-
 .../src/components/SetStatusModal.vue         |  56 ++--
 apps/user_status/src/menu.js                  |   7 +-
 .../src/mixins/OnlineStatusMixin.js           |  16 +-
 .../src/services/predefinedStatusService.js   |   2 +-
 apps/user_status/src/store/index.js           |  18 --
 .../src/store/predefinedStatuses.js           |  54 ----
 .../src/store/predefinedStatuses.spec.ts      |  47 +++
 .../src/store/predefinedStatuses.ts           |  41 +++
 apps/user_status/src/store/statusState.ts     |  78 +++++
 .../user_status/src/store/userBackupStatus.js | 103 ------
 .../src/store/userBackupStatus.spec.ts        |  86 +++++
 .../user_status/src/store/userBackupStatus.ts |  55 ++++
 apps/user_status/src/store/userStatus.js      | 296 ------------------
 apps/user_status/src/store/userStatus.spec.ts | 159 ++++++++++
 apps/user_status/src/store/userStatus.ts      | 142 +++++++++
 19 files changed, 747 insertions(+), 532 deletions(-)
 create mode 100644 apps/user_status/src/UserStatus.spec.ts
 create mode 100644 apps/user_status/src/components/PredefinedStatusesList.spec.ts
 delete mode 100644 apps/user_status/src/store/index.js
 delete mode 100644 apps/user_status/src/store/predefinedStatuses.js
 create mode 100644 apps/user_status/src/store/predefinedStatuses.spec.ts
 create mode 100644 apps/user_status/src/store/predefinedStatuses.ts
 create mode 100644 apps/user_status/src/store/statusState.ts
 delete mode 100644 apps/user_status/src/store/userBackupStatus.js
 create mode 100644 apps/user_status/src/store/userBackupStatus.spec.ts
 create mode 100644 apps/user_status/src/store/userBackupStatus.ts
 delete mode 100644 apps/user_status/src/store/userStatus.js
 create mode 100644 apps/user_status/src/store/userStatus.spec.ts
 create mode 100644 apps/user_status/src/store/userStatus.ts

diff --git a/apps/user_status/src/UserStatus.spec.ts b/apps/user_status/src/UserStatus.spec.ts
new file mode 100644
index 0000000000000..0d58fc87fe73c
--- /dev/null
+++ b/apps/user_status/src/UserStatus.spec.ts
@@ -0,0 +1,55 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { cleanup, render } from '@testing-library/vue'
+import { createPinia } from 'pinia'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import UserStatus from './UserStatus.vue'
+import { useUserStatusStore } from './store/userStatus.ts'
+
+vi.mock('@nextcloud/auth')
+vi.mock('@nextcloud/initial-state', () => ({ loadState: vi.fn() }))
+
+describe('UserStatus', () => {
+	afterEach(cleanup)
+
+	it('shows the status from the initial state', async () => {
+		vi.mocked(loadState).mockReturnValue({
+			status: 'away',
+			statusIsUserDefined: true,
+			message: 'In a meeting',
+			icon: '📅',
+			clearAt: null,
+			messageIsPredefined: false,
+			messageId: null,
+		})
+
+		const component = render(UserStatus, {
+			props: { inline: true },
+			global: { plugins: [createPinia()] },
+		})
+
+		expect(await component.findByRole('button', { name: '📅 In a meeting' })).toBeTruthy()
+	})
+
+	it('updates the shared store from status events of the current user', async () => {
+		vi.mocked(loadState).mockReturnValue({ status: 'online', statusIsUserDefined: true, message: null, icon: null })
+
+		const pinia = createPinia()
+		const component = render(UserStatus, {
+			props: { inline: true },
+			global: { plugins: [pinia] },
+		})
+		expect(await component.findByRole('button', { name: 'Online' })).toBeTruthy()
+
+		emit('user_status:status.updated', { userId: 'other', status: 'dnd', message: 'Other user', icon: null })
+		emit('user_status:status.updated', { userId: 'test', status: 'dnd', message: null, icon: null })
+
+		expect(await component.findByRole('button', { name: 'Do not disturb' })).toBeTruthy()
+		expect(useUserStatusStore(pinia).status).toBe('dnd')
+	})
+})
diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index 789097407288d..5e8687ff7f7a3 100644
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@@ -82,10 +82,10 @@ export default {
 
 	/**
 	 * Loads the current user's status from initial state
-	 * and stores it in Vuex
+	 * and stores it in the user status store
 	 */
 	mounted() {
-		this.$store.dispatch('loadStatusFromInitialState')
+		this.userStatusStore.loadStatusFromInitialState()
 
 		if (OC.config.session_keepalive) {
 			this.stopHeartbeat = startHeartbeat((isAway) => this._backgroundHeartbeat(isAway))
@@ -127,9 +127,9 @@ export default {
 			try {
 				const status = await sendHeartbeat(isAway)
 				if (status?.userId) {
-					this.$store.dispatch('setStatusFromHeartbeat', status)
+					this.userStatusStore.loadStatusFromServer(status)
 				} else {
-					await this.$store.dispatch('reFetchStatusFromServer')
+					await this.userStatusStore.reFetchStatusFromServer()
 				}
 			} catch (error) {
 				logger.debug('Failed sending heartbeat, got: ' + error.response?.status)
@@ -138,7 +138,7 @@ export default {
 
 		handleUserStatusUpdated(state) {
 			if (getCurrentUser()?.uid === state.userId) {
-				this.$store.dispatch('setStatusFromObject', {
+				this.userStatusStore.loadStatusFromServer({
 					status: state.status,
 					icon: state.icon,
 					message: state.message,
diff --git a/apps/user_status/src/components/PredefinedStatusesList.spec.ts b/apps/user_status/src/components/PredefinedStatusesList.spec.ts
new file mode 100644
index 0000000000000..aefb837a27154
--- /dev/null
+++ b/apps/user_status/src/components/PredefinedStatusesList.spec.ts
@@ -0,0 +1,39 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { cleanup, render } from '@testing-library/vue'
+import { createPinia } from 'pinia'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import PredefinedStatusesList from './PredefinedStatusesList.vue'
+import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js'
+import { useUserStatusStore } from '../store/userStatus.ts'
+
+vi.mock('../services/predefinedStatusService.js', () => ({
+	fetchAllPredefinedStatuses: vi.fn(),
+}))
+
+describe('PredefinedStatusesList', () => {
+	afterEach(cleanup)
+
+	it('loads the predefined statuses and marks the current one as selected', async () => {
+		vi.mocked(fetchAllPredefinedStatuses).mockResolvedValue([
+			{ id: 'meeting', icon: '📅', message: 'In a meeting', clearAt: null },
+			{ id: 'sick', icon: '🤒', message: 'Out sick', clearAt: null },
+		])
+
+		const pinia = createPinia()
+		useUserStatusStore(pinia).loadStatusFromServer({ messageId: 'sick' })
+
+		const component = render(PredefinedStatusesList, {
+			global: { plugins: [pinia] },
+		})
+
+		const list = await component.findByRole('list', { name: 'Predefined statuses' })
+		expect(list.textContent).toContain('In a meeting')
+		expect(list.textContent).toContain('Out sick')
+		expect(fetchAllPredefinedStatuses).toHaveBeenCalledOnce()
+		expect(component.getByRole('radio', { checked: true, name: /Out sick/ })).toBeTruthy()
+	})
+})
diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue
index 068656c21ba25..d7ee19b3314d8 100644
--- a/apps/user_status/src/components/PredefinedStatusesList.vue
+++ b/apps/user_status/src/components/PredefinedStatusesList.vue
@@ -27,9 +27,11 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import PredefinedStatus from './PredefinedStatus.vue'
+import { usePredefinedStatusesStore } from '../store/predefinedStatuses.ts'
+import { useUserStatusStore } from '../store/userStatus.ts'
 
 export default {
 	name: 'PredefinedStatusesList',
@@ -47,12 +49,8 @@ export default {
 	},
 
 	computed: {
-		...mapState({
-			predefinedStatuses: (state) => state.predefinedStatuses.predefinedStatuses,
-			messageId: (state) => state.userStatus.messageId,
-		}),
-
-		...mapGetters(['statusesHaveLoaded']),
+		...mapState(usePredefinedStatusesStore, ['predefinedStatuses', 'statusesHaveLoaded']),
+		...mapState(useUserStatusStore, ['messageId']),
 	},
 
 	watch: {
@@ -69,10 +67,11 @@ export default {
 	 * when this component is mounted
 	 */
 	created() {
-		this.$store.dispatch('loadAllPredefinedStatuses')
+		this.loadAllPredefinedStatuses()
 	},
 
 	methods: {
+		...mapActions(usePredefinedStatusesStore, ['loadAllPredefinedStatuses']),
 		t,
 
 		/**
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index 8442b3762efae..0928c40cd34ba 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -90,6 +90,7 @@
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
+import { mapState, mapStores } from 'pinia'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import ClearAtSelect from './ClearAtSelect.vue'
@@ -100,6 +101,8 @@ import PreviousStatus from './PreviousStatus.vue'
 import { logger } from '../logger.ts'
 import OnlineStatusMixin from '../mixins/OnlineStatusMixin.js'
 import { getAllStatusOptions } from '../services/statusOptionsService.js'
+import { useUserBackupStatusStore } from '../store/userBackupStatus.ts'
+import { useUserStatusStore } from '../store/userStatus.ts'
 
 export default {
 	name: 'SetStatusModal',
@@ -141,16 +144,11 @@ export default {
 	},
 
 	computed: {
-		messageId() {
-			return this.$store.state.userStatus.messageId
-		},
-
-		icon() {
-			return this.$store.state.userStatus.icon
-		},
+		...mapStores(useUserBackupStatusStore),
+		...mapState(useUserStatusStore, ['messageId', 'icon']),
 
 		message() {
-			return this.$store.state.userStatus.message || ''
+			return this.userStatusStore.message || ''
 		},
 
 		hasBackupStatus() {
@@ -158,11 +156,11 @@ export default {
 		},
 
 		backupIcon() {
-			return this.$store.state.userBackupStatus.icon || ''
+			return this.userBackupStatusStore.icon || ''
 		},
 
 		backupMessage() {
-			return this.$store.state.userBackupStatus.message || ''
+			return this.userBackupStatusStore.message || ''
 		},
 
 		absencePageUrl() {
@@ -209,13 +207,13 @@ export default {
 	 * Loads the current status when a user opens dialog
 	 */
 	mounted() {
-		this.$store.dispatch('fetchBackupFromServer')
+		this.userBackupStatusStore.fetchBackupFromServer()
 
-		this.predefinedMessageId = this.$store.state.userStatus.messageId
-		if (this.$store.state.userStatus.clearAt !== null) {
+		this.predefinedMessageId = this.userStatusStore.messageId
+		if (this.userStatusStore.clearAt !== null) {
 			this.clearAt = {
 				type: '_time',
-				time: this.$store.state.userStatus.clearAt,
+				time: this.userStatusStore.clearAt,
 			}
 		}
 	},
@@ -237,11 +235,7 @@ export default {
 		 */
 		setIcon(icon) {
 			this.predefinedMessageId = null
-			this.$store.dispatch('setCustomMessage', {
-				message: this.message,
-				icon,
-				clearAt: this.clearAt,
-			})
+			this.userStatusStore.setCustomMessage(this.message, icon, this.clearAt)
 			this.$nextTick(() => {
 				this.$refs.customMessageInput.focus()
 			})
@@ -274,10 +268,7 @@ export default {
 		selectPredefinedMessage(status) {
 			this.predefinedMessageId = status.id
 			this.clearAt = status.clearAt
-			this.$store.dispatch('setPredefinedMessage', {
-				messageId: status.id,
-				clearAt: status.clearAt,
-			})
+			this.userStatusStore.setPredefinedMessage(status.id, status.clearAt)
 		},
 
 		/**
@@ -294,16 +285,9 @@ export default {
 				this.isSavingStatus = true
 
 				if (this.predefinedMessageId === null) {
-					await this.$store.dispatch('setCustomMessage', {
-						message: this.editedMessage,
-						icon: this.icon,
-						clearAt: this.clearAt,
-					})
+					await this.userStatusStore.setCustomMessage(this.editedMessage, this.icon, this.clearAt)
 				} else {
-					this.$store.dispatch('setPredefinedMessage', {
-						messageId: this.predefinedMessageId,
-						clearAt: this.clearAt,
-					})
+					await this.userStatusStore.setPredefinedMessage(this.predefinedMessageId, this.clearAt)
 				}
 			} catch (err) {
 				showError(t('user_status', 'There was an error saving the status'))
@@ -324,7 +308,7 @@ export default {
 			try {
 				this.isSavingStatus = true
 
-				await this.$store.dispatch('clearMessage')
+				await this.userStatusStore.clearMessage()
 			} catch (err) {
 				showError(t('user_status', 'There was an error clearing the status'))
 				logger.debug(err)
@@ -345,9 +329,7 @@ export default {
 			try {
 				this.isSavingStatus = true
 
-				await this.$store.dispatch('revertBackupFromServer', {
-					messageId: this.messageId,
-				})
+				await this.userBackupStatusStore.revertBackupFromServer(this.messageId)
 			} catch (err) {
 				showError(t('user_status', 'There was an error reverting the status'))
 				logger.debug(err)
@@ -356,7 +338,7 @@ export default {
 			}
 
 			this.isSavingStatus = false
-			this.predefinedMessageId = this.$store.state.userStatus?.messageId
+			this.predefinedMessageId = this.userStatusStore.messageId
 		},
 	},
 }
diff --git a/apps/user_status/src/menu.js b/apps/user_status/src/menu.js
index 1af70613464e5..20edc992c386e 100644
--- a/apps/user_status/src/menu.js
+++ b/apps/user_status/src/menu.js
@@ -4,12 +4,13 @@
  */
 
 import { subscribe } from '@nextcloud/event-bus'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import UserStatus from './UserStatus.vue'
-import store from './store/index.js'
 
 import './user-status-icons.css'
 
+const pinia = createPinia()
 const mountPoint = document.getElementById('user_status-menu-entry')
 
 /**
@@ -26,7 +27,7 @@ function mountMenuEntry() {
 	mountPoint.replaceWith(transparentMountPoint)
 
 	createApp(UserStatus)
-		.use(store)
+		.use(pinia)
 		.mount(transparentMountPoint)
 }
 
@@ -46,7 +47,7 @@ document.addEventListener('DOMContentLoaded', function() {
 		createApp(UserStatus, {
 			inline: true,
 		})
-			.use(store)
+			.use(pinia)
 			.mount(el)
 	})
 })
diff --git a/apps/user_status/src/mixins/OnlineStatusMixin.js b/apps/user_status/src/mixins/OnlineStatusMixin.js
index d62deb1330332..037d54b9a9aec 100644
--- a/apps/user_status/src/mixins/OnlineStatusMixin.js
+++ b/apps/user_status/src/mixins/OnlineStatusMixin.js
@@ -5,16 +5,18 @@
 
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
-import { mapState } from 'vuex'
+import { mapState, mapStores } from 'pinia'
 import { logger } from '../logger.ts'
+import { useUserStatusStore } from '../store/userStatus.ts'
 
 export default {
 	computed: {
-		...mapState({
-			statusType: (state) => state.userStatus.status,
-			statusIsUserDefined: (state) => state.userStatus.statusIsUserDefined,
-			customIcon: (state) => state.userStatus.icon,
-			customMessage: (state) => state.userStatus.message,
+		...mapStores(useUserStatusStore),
+		...mapState(useUserStatusStore, {
+			statusType: 'status',
+			statusIsUserDefined: 'statusIsUserDefined',
+			customIcon: 'icon',
+			customMessage: 'message',
 		}),
 
 		/**
@@ -65,7 +67,7 @@ export default {
 		 */
 		async changeStatus(statusType) {
 			try {
-				await this.$store.dispatch('setStatus', { statusType })
+				await this.userStatusStore.setStatus(statusType)
 			} catch (err) {
 				showError(t('user_status', 'There was an error saving the new status'))
 				logger.debug(err)
diff --git a/apps/user_status/src/services/predefinedStatusService.js b/apps/user_status/src/services/predefinedStatusService.js
index 54508aa58346d..8d489371ab52c 100644
--- a/apps/user_status/src/services/predefinedStatusService.js
+++ b/apps/user_status/src/services/predefinedStatusService.js
@@ -9,7 +9,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 /**
  * Fetches all predefined statuses from the server
  *
- * @return {Promise<void>}
+ * @return {Promise<object[]>}
  */
 async function fetchAllPredefinedStatuses() {
 	const url = generateOcsUrl('apps/user_status/api/v1/predefined_statuses?format=json')
diff --git a/apps/user_status/src/store/index.js b/apps/user_status/src/store/index.js
deleted file mode 100644
index e543317f41ec5..0000000000000
--- a/apps/user_status/src/store/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { createStore } from 'vuex'
-import predefinedStatuses from './predefinedStatuses.js'
-import userBackupStatus from './userBackupStatus.js'
-import userStatus from './userStatus.js'
-
-export default createStore({
-	modules: {
-		predefinedStatuses,
-		userStatus,
-		userBackupStatus,
-	},
-	strict: true,
-})
diff --git a/apps/user_status/src/store/predefinedStatuses.js b/apps/user_status/src/store/predefinedStatuses.js
deleted file mode 100644
index 11dfd77646cf7..0000000000000
--- a/apps/user_status/src/store/predefinedStatuses.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js'
-
-// eslint-disable-next-line antfu/top-level-function
-const state = () => ({
-	predefinedStatuses: [],
-})
-
-const mutations = {
-
-	/**
-	 * Adds a predefined status to the state
-	 *
-	 * @param {object} state The Vuex state
-	 * @param {object} status The status to add
-	 */
-	addPredefinedStatus(state, status) {
-		state.predefinedStatuses = [...state.predefinedStatuses, status]
-	},
-}
-
-const getters = {
-	statusesHaveLoaded(state) {
-		return state.predefinedStatuses.length > 0
-	},
-}
-
-const actions = {
-
-	/**
-	 * Loads all predefined statuses from the server
-	 *
-	 * @param {object} vuex The Vuex components
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} vuex.state -
-	 */
-	async loadAllPredefinedStatuses({ state, commit }) {
-		if (state.predefinedStatuses.length > 0) {
-			return
-		}
-
-		const statuses = await fetchAllPredefinedStatuses()
-		for (const status of statuses) {
-			commit('addPredefinedStatus', status)
-		}
-	},
-
-}
-
-export default { state, mutations, getters, actions }
diff --git a/apps/user_status/src/store/predefinedStatuses.spec.ts b/apps/user_status/src/store/predefinedStatuses.spec.ts
new file mode 100644
index 0000000000000..e6ef8a727af8a
--- /dev/null
+++ b/apps/user_status/src/store/predefinedStatuses.spec.ts
@@ -0,0 +1,47 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js'
+import { usePredefinedStatusesStore } from './predefinedStatuses.ts'
+
+vi.mock('../services/predefinedStatusService.js', () => ({
+	fetchAllPredefinedStatuses: vi.fn(),
+}))
+
+const statuses = [
+	{ id: 'meeting', icon: '📅', message: 'In a meeting', clearAt: { type: 'period', time: 3600 } },
+	{ id: 'sick', icon: '🤒', message: 'Out sick', clearAt: { type: 'end-of', time: 'day' } },
+]
+
+describe('predefined statuses store', () => {
+	beforeEach(() => {
+		vi.resetAllMocks()
+		setActivePinia(createPinia())
+	})
+
+	it('loads the predefined statuses', async () => {
+		vi.mocked(fetchAllPredefinedStatuses).mockResolvedValue(statuses)
+
+		const store = usePredefinedStatusesStore()
+		expect(store.statusesHaveLoaded).toBe(false)
+
+		await store.loadAllPredefinedStatuses()
+
+		expect(store.predefinedStatuses).toEqual(statuses)
+		expect(store.statusesHaveLoaded).toBe(true)
+	})
+
+	it('loads the predefined statuses only once', async () => {
+		vi.mocked(fetchAllPredefinedStatuses).mockResolvedValue(statuses)
+
+		const store = usePredefinedStatusesStore()
+		await store.loadAllPredefinedStatuses()
+		await store.loadAllPredefinedStatuses()
+
+		expect(fetchAllPredefinedStatuses).toHaveBeenCalledOnce()
+	})
+})
diff --git a/apps/user_status/src/store/predefinedStatuses.ts b/apps/user_status/src/store/predefinedStatuses.ts
new file mode 100644
index 0000000000000..c2d091272f027
--- /dev/null
+++ b/apps/user_status/src/store/predefinedStatuses.ts
@@ -0,0 +1,41 @@
+/*!
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IClearAt } from './statusState.ts'
+
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js'
+
+export interface IPredefinedStatus {
+	id: string
+	icon: string
+	message: string
+	clearAt: IClearAt | null
+	visible?: boolean
+}
+
+export const usePredefinedStatusesStore = defineStore('predefinedStatuses', () => {
+	const predefinedStatuses = ref<IPredefinedStatus[]>([])
+
+	const statusesHaveLoaded = computed(() => predefinedStatuses.value.length > 0)
+
+	/**
+	 * Load all predefined statuses from the server, unless they were already loaded.
+	 */
+	async function loadAllPredefinedStatuses() {
+		if (statusesHaveLoaded.value) {
+			return
+		}
+
+		predefinedStatuses.value = await fetchAllPredefinedStatuses() as IPredefinedStatus[]
+	}
+
+	return {
+		predefinedStatuses,
+		statusesHaveLoaded,
+		loadAllPredefinedStatuses,
+	}
+})
diff --git a/apps/user_status/src/store/statusState.ts b/apps/user_status/src/store/statusState.ts
new file mode 100644
index 0000000000000..7085893f126b6
--- /dev/null
+++ b/apps/user_status/src/store/statusState.ts
@@ -0,0 +1,78 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { ref } from 'vue'
+
+export interface IUserStatus {
+	/** Status (online / away / dnd / invisible / offline) */
+	status: string | null
+	/** Whether the status is user-defined */
+	statusIsUserDefined: boolean | null
+	/** A custom message set by the user */
+	message: string | null
+	/** The icon selected by the user */
+	icon: string | null
+	/** When to automatically clear the status (UNIX timestamp in seconds) */
+	clearAt: number | null
+	/** Whether the message is predefined (and can automatically be translated by Nextcloud) */
+	messageIsPredefined: boolean | null
+	/** The id of the message in case it's predefined */
+	messageId: string | null
+}
+
+export interface IClearAt {
+	type: 'period' | 'end-of' | '_time'
+	time: number | string
+}
+
+/**
+ * Reactive status state shared by the user status and the backup status stores.
+ */
+export function useStatusState() {
+	const status = ref<string | null>(null)
+	const statusIsUserDefined = ref<boolean | null>(null)
+	const message = ref<string | null>(null)
+	const icon = ref<string | null>(null)
+	const clearAt = ref<number | null>(null)
+	const messageIsPredefined = ref<boolean | null>(null)
+	const messageId = ref<string | null>(null)
+
+	/**
+	 * Load a status as returned by the server.
+	 * Only status, message and icon are always replaced, because partial updates
+	 * (e.g. from the Talk participant list) only carry those fields.
+	 *
+	 * @param data - The status to load
+	 */
+	function loadStatus(data: Partial<IUserStatus>) {
+		status.value = data.status ?? null
+		message.value = data.message ?? null
+		icon.value = data.icon ?? null
+
+		if (data.statusIsUserDefined !== undefined) {
+			statusIsUserDefined.value = data.statusIsUserDefined
+		}
+		if (data.clearAt !== undefined) {
+			clearAt.value = data.clearAt
+		}
+		if (data.messageIsPredefined !== undefined) {
+			messageIsPredefined.value = data.messageIsPredefined
+		}
+		if (data.messageId !== undefined) {
+			messageId.value = data.messageId
+		}
+	}
+
+	return {
+		status,
+		statusIsUserDefined,
+		message,
+		icon,
+		clearAt,
+		messageIsPredefined,
+		messageId,
+		loadStatus,
+	}
+}
diff --git a/apps/user_status/src/store/userBackupStatus.js b/apps/user_status/src/store/userBackupStatus.js
deleted file mode 100644
index c4fdd6ba6c80d..0000000000000
--- a/apps/user_status/src/store/userBackupStatus.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCurrentUser } from '@nextcloud/auth'
-import { emit } from '@nextcloud/event-bus'
-import {
-	fetchBackupStatus,
-	revertToBackupStatus,
-} from '../services/statusService.js'
-
-// eslint-disable-next-line antfu/top-level-function
-const state = () => ({
-	// Status (online / away / dnd / invisible / offline)
-	status: null,
-	// Whether the status is user-defined
-	statusIsUserDefined: null,
-	// A custom message set by the user
-	message: null,
-	// The icon selected by the user
-	icon: null,
-	// When to automatically clean the status
-	clearAt: null,
-	// Whether the message is predefined
-	// (and can automatically be translated by Nextcloud)
-	messageIsPredefined: null,
-	// The id of the message in case it's predefined
-	messageId: null,
-})
-
-const mutations = {
-	/**
-	 * Loads the status from initial state
-	 *
-	 * @param {object} state The Vuex state
-	 * @param {object} data The destructuring object
-	 * @param {string} data.status The status type
-	 * @param {boolean} data.statusIsUserDefined Whether or not this status is user-defined
-	 * @param {string} data.message The message
-	 * @param {string} data.icon The icon
-	 * @param {number} data.clearAt When to automatically clear the status
-	 * @param {boolean} data.messageIsPredefined Whether or not the message is predefined
-	 * @param {string} data.messageId The id of the predefined message
-	 */
-	loadBackupStatusFromServer(state, { status, statusIsUserDefined, message, icon, clearAt, messageIsPredefined, messageId }) {
-		state.status = status
-		state.message = message
-		state.icon = icon
-
-		// Don't overwrite certain values if the refreshing comes in via short updates
-		// E.g. from talk participant list which only has the status, message and icon
-		if (typeof statusIsUserDefined !== 'undefined') {
-			state.statusIsUserDefined = statusIsUserDefined
-		}
-		if (typeof clearAt !== 'undefined') {
-			state.clearAt = clearAt
-		}
-		if (typeof messageIsPredefined !== 'undefined') {
-			state.messageIsPredefined = messageIsPredefined
-		}
-		if (typeof messageId !== 'undefined') {
-			state.messageId = messageId
-		}
-	},
-}
-
-const getters = {}
-
-const actions = {
-	/**
-	 * Re-fetches the status from the server
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @return {Promise<void>}
-	 */
-	async fetchBackupFromServer({ commit }) {
-		try {
-			const status = await fetchBackupStatus(getCurrentUser()?.uid)
-			commit('loadBackupStatusFromServer', status)
-		} catch {
-			// Ignore missing user backup status
-		}
-	},
-
-	async revertBackupFromServer({ commit }, { messageId }) {
-		const status = await revertToBackupStatus(messageId)
-		if (status) {
-			commit('loadBackupStatusFromServer', {})
-			commit('loadStatusFromServer', status)
-			emit('user_status:status.updated', {
-				status: status.status,
-				message: status.message,
-				icon: status.icon,
-				clearAt: status.clearAt,
-				userId: getCurrentUser()?.uid,
-			})
-		}
-	},
-}
-
-export default { state, mutations, getters, actions }
diff --git a/apps/user_status/src/store/userBackupStatus.spec.ts b/apps/user_status/src/store/userBackupStatus.spec.ts
new file mode 100644
index 0000000000000..796782b2662d2
--- /dev/null
+++ b/apps/user_status/src/store/userBackupStatus.spec.ts
@@ -0,0 +1,86 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { emit } from '@nextcloud/event-bus'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as api from '../services/statusService.js'
+import { useUserBackupStatusStore } from './userBackupStatus.ts'
+import { useUserStatusStore } from './userStatus.ts'
+
+vi.mock('@nextcloud/auth')
+vi.mock('@nextcloud/event-bus', () => ({ emit: vi.fn() }))
+vi.mock('../services/statusService.js', () => ({
+	fetchBackupStatus: vi.fn(),
+	revertToBackupStatus: vi.fn(),
+}))
+
+const backupStatus = {
+	status: 'online',
+	statusIsUserDefined: true,
+	message: 'Working remotely',
+	icon: '🏡',
+	clearAt: null,
+	messageIsPredefined: true,
+	messageId: 'remote-work',
+}
+
+describe('user backup status store', () => {
+	beforeEach(() => {
+		vi.resetAllMocks()
+		setActivePinia(createPinia())
+	})
+
+	it('fetches the backup status of the current user', async () => {
+		vi.mocked(api.fetchBackupStatus).mockResolvedValue(backupStatus)
+
+		const store = useUserBackupStatusStore()
+		await store.fetchBackupFromServer()
+
+		expect(api.fetchBackupStatus).toHaveBeenCalledWith('test')
+		expect(store.$state).toEqual(backupStatus)
+	})
+
+	it('ignores a missing backup status', async () => {
+		vi.mocked(api.fetchBackupStatus).mockRejectedValue(new Error('404'))
+
+		const store = useUserBackupStatusStore()
+		await expect(store.fetchBackupFromServer()).resolves.toBeUndefined()
+		expect(store.message).toBeNull()
+	})
+
+	it('reverts to the backup status', async () => {
+		vi.mocked(api.fetchBackupStatus).mockResolvedValue(backupStatus)
+		vi.mocked(api.revertToBackupStatus).mockResolvedValue(backupStatus)
+
+		const store = useUserBackupStatusStore()
+		const userStatusStore = useUserStatusStore()
+		await store.fetchBackupFromServer()
+		await store.revertBackupFromServer('meeting')
+
+		expect(api.revertToBackupStatus).toHaveBeenCalledWith('meeting')
+		expect(store.message).toBeNull()
+		expect(store.icon).toBeNull()
+		expect(userStatusStore.$state).toEqual(backupStatus)
+		expect(emit).toHaveBeenCalledWith('user_status:status.updated', {
+			status: 'online',
+			message: 'Working remotely',
+			icon: '🏡',
+			clearAt: null,
+			userId: 'test',
+		})
+	})
+
+	it('keeps the current status if there is nothing to revert to', async () => {
+		vi.mocked(api.revertToBackupStatus).mockResolvedValue(undefined)
+
+		const userStatusStore = useUserStatusStore()
+		userStatusStore.loadStatusFromServer({ status: 'dnd', message: 'Focus', icon: '🎧' })
+		await useUserBackupStatusStore().revertBackupFromServer('meeting')
+
+		expect(userStatusStore.message).toBe('Focus')
+		expect(emit).not.toHaveBeenCalled()
+	})
+})
diff --git a/apps/user_status/src/store/userBackupStatus.ts b/apps/user_status/src/store/userBackupStatus.ts
new file mode 100644
index 0000000000000..b4efcb37f84e6
--- /dev/null
+++ b/apps/user_status/src/store/userBackupStatus.ts
@@ -0,0 +1,55 @@
+/*!
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { defineStore } from 'pinia'
+import { fetchBackupStatus, revertToBackupStatus } from '../services/statusService.js'
+import { useStatusState } from './statusState.ts'
+import { useUserStatusStore } from './userStatus.ts'
+
+/**
+ * The status the user had before it was set automatically (e.g. by a calendar event or an absence).
+ */
+export const useUserBackupStatusStore = defineStore('userBackupStatus', () => {
+	const { loadStatus, ...state } = useStatusState()
+
+	/**
+	 * Fetch the backup status from the server.
+	 */
+	async function fetchBackupFromServer() {
+		const uid = getCurrentUser()?.uid
+		if (!uid) {
+			return
+		}
+
+		try {
+			loadStatus(await fetchBackupStatus(uid))
+		} catch {
+			// Ignore missing user backup status
+		}
+	}
+
+	/**
+	 * Restore the backup status as the current user status.
+	 *
+	 * @param messageId - The message id of the current (automatically set) status
+	 */
+	async function revertBackupFromServer(messageId: string) {
+		const status = await revertToBackupStatus(messageId)
+		if (status) {
+			loadStatus({})
+
+			const userStatusStore = useUserStatusStore()
+			userStatusStore.loadStatusFromServer(status)
+			userStatusStore.emitStatusUpdated()
+		}
+	}
+
+	return {
+		...state,
+		fetchBackupFromServer,
+		revertBackupFromServer,
+	}
+})
diff --git a/apps/user_status/src/store/userStatus.js b/apps/user_status/src/store/userStatus.js
deleted file mode 100644
index 173b4a7a047ad..0000000000000
--- a/apps/user_status/src/store/userStatus.js
+++ /dev/null
@@ -1,296 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCurrentUser } from '@nextcloud/auth'
-import { emit } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
-import { getTimestampForClearAt } from '../services/clearAtService.js'
-import {
-	clearMessage,
-	fetchCurrentStatus,
-	setCustomMessage,
-	setPredefinedMessage,
-	setStatus,
-} from '../services/statusService.js'
-
-// eslint-disable-next-line antfu/top-level-function
-const state = () => ({
-	// Status (online / away / dnd / invisible / offline)
-	status: null,
-	// Whether the status is user-defined
-	statusIsUserDefined: null,
-	// A custom message set by the user
-	message: null,
-	// The icon selected by the user
-	icon: null,
-	// When to automatically clean the status
-	clearAt: null,
-	// Whether the message is predefined
-	// (and can automatically be translated by Nextcloud)
-	messageIsPredefined: null,
-	// The id of the message in case it's predefined
-	messageId: null,
-})
-
-const mutations = {
-
-	/**
-	 * Sets a new status
-	 *
-	 * @param {object} state The Vuex state
-	 * @param {object} data The destructuring object
-	 * @param {string} data.statusType The new status type
-	 */
-	setStatus(state, { statusType }) {
-		state.status = statusType
-		state.statusIsUserDefined = true
-	},
-
-	/**
-	 * Sets a message using a predefined message
-	 *
-	 * @param {object} state The Vuex state
-	 * @param {object} data The destructuring object
-	 * @param {string} data.messageId The messageId
-	 * @param {number | null} data.clearAt When to automatically clear the status
-	 * @param {string} data.message The message
-	 * @param {string} data.icon The icon
-	 */
-	setPredefinedMessage(state, { messageId, clearAt, message, icon }) {
-		state.messageId = messageId
-		state.messageIsPredefined = true
-
-		state.message = message
-		state.icon = icon
-		state.clearAt = clearAt
-	},
-
-	/**
-	 * Sets a custom message
-	 *
-	 * @param {object} state The Vuex state
-	 * @param {object} data The destructuring object
-	 * @param {string} data.message The message
-	 * @param {string} data.icon The icon
-	 * @param {number} data.clearAt When to automatically clear the status
-	 */
-	setCustomMessage(state, { message, icon, clearAt }) {
-		state.messageId = null
-		state.messageIsPredefined = false
-
-		state.message = message
-		state.icon = icon
-		state.clearAt = clearAt
-	},
-
-	/**
-	 * Clears the status
-	 *
-	 * @param {object} state The Vuex state
-	 */
-	clearMessage(state) {
-		state.messageId = null
-		state.messageIsPredefined = false
-
-		state.message = null
-		state.icon = null
-		state.clearAt = null
-	},
-
-	/**
-	 * Loads the status from initial state
-	 *
-	 * @param {object} state The Vuex state
-	 * @param {object} data The destructuring object
-	 * @param {string} data.status The status type
-	 * @param {boolean} data.statusIsUserDefined Whether or not this status is user-defined
-	 * @param {string} data.message The message
-	 * @param {string} data.icon The icon
-	 * @param {number} data.clearAt When to automatically clear the status
-	 * @param {boolean} data.messageIsPredefined Whether or not the message is predefined
-	 * @param {string} data.messageId The id of the predefined message
-	 */
-	loadStatusFromServer(state, { status, statusIsUserDefined, message, icon, clearAt, messageIsPredefined, messageId }) {
-		state.status = status
-		state.message = message
-		state.icon = icon
-
-		// Don't overwrite certain values if the refreshing comes in via short updates
-		// E.g. from talk participant list which only has the status, message and icon
-		if (typeof statusIsUserDefined !== 'undefined') {
-			state.statusIsUserDefined = statusIsUserDefined
-		}
-		if (typeof clearAt !== 'undefined') {
-			state.clearAt = clearAt
-		}
-		if (typeof messageIsPredefined !== 'undefined') {
-			state.messageIsPredefined = messageIsPredefined
-		}
-		if (typeof messageId !== 'undefined') {
-			state.messageId = messageId
-		}
-	},
-}
-
-const getters = {}
-
-const actions = {
-
-	/**
-	 * Sets a new status
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} vuex.state The Vuex state object
-	 * @param {object} data The data destructuring object
-	 * @param {string} data.statusType The new status type
-	 * @return {Promise<void>}
-	 */
-	async setStatus({ commit, state }, { statusType }) {
-		await setStatus(statusType)
-		commit('setStatus', { statusType })
-		emit('user_status:status.updated', {
-			status: state.status,
-			message: state.message,
-			icon: state.icon,
-			clearAt: state.clearAt,
-			userId: getCurrentUser()?.uid,
-		})
-	},
-
-	/**
-	 * Update status from 'user_status:status.updated' update.
-	 * This doesn't trigger another 'user_status:status.updated'
-	 * event.
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} vuex.state The Vuex state object
-	 * @param {string} status The new status
-	 * @return {Promise<void>}
-	 */
-	async setStatusFromObject({ commit }, status) {
-		commit('loadStatusFromServer', status)
-	},
-
-	/**
-	 * Sets a message using a predefined message
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} vuex.state The Vuex state object
-	 * @param {object} vuex.rootState The Vuex root state
-	 * @param {object} data The data destructuring object
-	 * @param {string} data.messageId The messageId
-	 * @param {object | null} data.clearAt When to automatically clear the status
-	 * @return {Promise<void>}
-	 */
-	async setPredefinedMessage({ commit, rootState, state }, { messageId, clearAt }) {
-		const resolvedClearAt = getTimestampForClearAt(clearAt)
-
-		await setPredefinedMessage(messageId, resolvedClearAt)
-		const status = rootState.predefinedStatuses.predefinedStatuses.find((status) => status.id === messageId)
-		const { message, icon } = status
-
-		commit('setPredefinedMessage', { messageId, clearAt: resolvedClearAt, message, icon })
-		emit('user_status:status.updated', {
-			status: state.status,
-			message: state.message,
-			icon: state.icon,
-			clearAt: state.clearAt,
-			userId: getCurrentUser()?.uid,
-		})
-	},
-
-	/**
-	 * Sets a custom message
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} vuex.state The Vuex state object
-	 * @param {object} data The data destructuring object
-	 * @param {string} data.message The message
-	 * @param {string} data.icon The icon
-	 * @param {object | null} data.clearAt When to automatically clear the status
-	 * @return {Promise<void>}
-	 */
-	async setCustomMessage({ commit, state }, { message, icon, clearAt }) {
-		const resolvedClearAt = getTimestampForClearAt(clearAt)
-
-		await setCustomMessage(message, icon, resolvedClearAt)
-		commit('setCustomMessage', { message, icon, clearAt: resolvedClearAt })
-		emit('user_status:status.updated', {
-			status: state.status,
-			message: state.message,
-			icon: state.icon,
-			clearAt: state.clearAt,
-			userId: getCurrentUser()?.uid,
-		})
-	},
-
-	/**
-	 * Clears the status
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} vuex.state The Vuex state object
-	 * @return {Promise<void>}
-	 */
-	async clearMessage({ commit, state }) {
-		await clearMessage()
-		commit('clearMessage')
-		emit('user_status:status.updated', {
-			status: state.status,
-			message: state.message,
-			icon: state.icon,
-			clearAt: state.clearAt,
-			userId: getCurrentUser()?.uid,
-		})
-	},
-
-	/**
-	 * Re-fetches the status from the server
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @return {Promise<void>}
-	 */
-	async reFetchStatusFromServer({ commit }) {
-		const status = await fetchCurrentStatus()
-		commit('loadStatusFromServer', status)
-	},
-
-	/**
-	 * Stores the status we got in the reply of the heartbeat
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 * @param {object} status The data destructuring object
-	 * @param {string} status.status The status type
-	 * @param {boolean} status.statusIsUserDefined Whether or not this status is user-defined
-	 * @param {string} status.message The message
-	 * @param {string} status.icon The icon
-	 * @param {number} status.clearAt When to automatically clear the status
-	 * @param {boolean} status.messageIsPredefined Whether or not the message is predefined
-	 * @param {string} status.messageId The id of the predefined message
-	 * @return {Promise<void>}
-	 */
-	async setStatusFromHeartbeat({ commit }, status) {
-		commit('loadStatusFromServer', status)
-	},
-
-	/**
-	 * Loads the server from the initial state
-	 *
-	 * @param {object} vuex The Vuex destructuring object
-	 * @param {Function} vuex.commit The Vuex commit function
-	 */
-	loadStatusFromInitialState({ commit }) {
-		const status = loadState('user_status', 'status')
-		commit('loadStatusFromServer', status)
-	},
-}
-
-export default { state, mutations, getters, actions }
diff --git a/apps/user_status/src/store/userStatus.spec.ts b/apps/user_status/src/store/userStatus.spec.ts
new file mode 100644
index 0000000000000..fda90fa151941
--- /dev/null
+++ b/apps/user_status/src/store/userStatus.spec.ts
@@ -0,0 +1,159 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as api from '../services/statusService.js'
+import { usePredefinedStatusesStore } from './predefinedStatuses.ts'
+import { useUserStatusStore } from './userStatus.ts'
+
+vi.mock('@nextcloud/auth')
+vi.mock('@nextcloud/event-bus', () => ({ emit: vi.fn() }))
+vi.mock('@nextcloud/initial-state', () => ({ loadState: vi.fn() }))
+vi.mock('../services/statusService.js', () => ({
+	clearMessage: vi.fn(),
+	fetchCurrentStatus: vi.fn(),
+	setCustomMessage: vi.fn(),
+	setPredefinedMessage: vi.fn(),
+	setStatus: vi.fn(),
+}))
+
+const serverStatus = {
+	status: 'away',
+	statusIsUserDefined: true,
+	message: 'In a meeting',
+	icon: '📅',
+	clearAt: 1700000000,
+	messageIsPredefined: true,
+	messageId: 'meeting',
+}
+
+describe('user status store', () => {
+	beforeEach(() => {
+		vi.resetAllMocks()
+		setActivePinia(createPinia())
+	})
+
+	it('loads the status from the initial state', () => {
+		vi.mocked(loadState).mockReturnValue(serverStatus)
+
+		const store = useUserStatusStore()
+		store.loadStatusFromInitialState()
+
+		expect(loadState).toHaveBeenCalledWith('user_status', 'status')
+		expect(store.$state).toEqual(serverStatus)
+	})
+
+	it('only replaces status, message and icon on partial updates', () => {
+		const store = useUserStatusStore()
+		store.loadStatusFromServer(serverStatus)
+		store.loadStatusFromServer({ status: 'online', message: 'Back', icon: '👋' })
+
+		expect(store.$state).toEqual({
+			...serverStatus,
+			status: 'online',
+			message: 'Back',
+			icon: '👋',
+		})
+		expect(emit).not.toHaveBeenCalled()
+	})
+
+	it('re-fetches the status from the server', async () => {
+		vi.mocked(api.fetchCurrentStatus).mockResolvedValue(serverStatus)
+
+		const store = useUserStatusStore()
+		await store.reFetchStatusFromServer()
+
+		expect(store.$state).toEqual(serverStatus)
+	})
+
+	it('sets the status type', async () => {
+		const store = useUserStatusStore()
+		await store.setStatus('dnd')
+
+		expect(api.setStatus).toHaveBeenCalledWith('dnd')
+		expect(store.status).toBe('dnd')
+		expect(store.statusIsUserDefined).toBe(true)
+		expect(emit).toHaveBeenCalledWith('user_status:status.updated', {
+			status: 'dnd',
+			message: null,
+			icon: null,
+			clearAt: null,
+			userId: 'test',
+		})
+	})
+
+	it('does not change the state if saving the status fails', async () => {
+		vi.mocked(api.setStatus).mockRejectedValue(new Error('network'))
+
+		const store = useUserStatusStore()
+		await expect(store.setStatus('dnd')).rejects.toThrow('network')
+
+		expect(store.status).toBeNull()
+		expect(emit).not.toHaveBeenCalled()
+	})
+
+	it('sets a predefined message', async () => {
+		usePredefinedStatusesStore().predefinedStatuses = [
+			{ id: 'meeting', icon: '📅', message: 'In a meeting', clearAt: null },
+			{ id: 'sick', icon: '🤒', message: 'Out sick', clearAt: null },
+		]
+
+		const store = useUserStatusStore()
+		await store.setPredefinedMessage('sick', { type: '_time', time: 1700000000 })
+
+		expect(api.setPredefinedMessage).toHaveBeenCalledWith('sick', 1700000000)
+		expect(store.$state).toMatchObject({
+			messageId: 'sick',
+			messageIsPredefined: true,
+			message: 'Out sick',
+			icon: '🤒',
+			clearAt: 1700000000,
+		})
+		expect(emit).toHaveBeenCalledWith('user_status:status.updated', expect.objectContaining({
+			message: 'Out sick',
+			icon: '🤒',
+			clearAt: 1700000000,
+		}))
+	})
+
+	it('sets a custom message', async () => {
+		const store = useUserStatusStore()
+		store.loadStatusFromServer(serverStatus)
+		await store.setCustomMessage('Lunch', '🍕', null)
+
+		expect(api.setCustomMessage).toHaveBeenCalledWith('Lunch', '🍕', null)
+		expect(store.$state).toMatchObject({
+			messageId: null,
+			messageIsPredefined: false,
+			message: 'Lunch',
+			icon: '🍕',
+			clearAt: null,
+		})
+		expect(emit).toHaveBeenCalledOnce()
+	})
+
+	it('clears the message', async () => {
+		const store = useUserStatusStore()
+		store.loadStatusFromServer(serverStatus)
+		await store.clearMessage()
+
+		expect(api.clearMessage).toHaveBeenCalledOnce()
+		expect(store.$state).toEqual({
+			...serverStatus,
+			messageId: null,
+			messageIsPredefined: false,
+			message: null,
+			icon: null,
+			clearAt: null,
+		})
+		expect(emit).toHaveBeenCalledWith('user_status:status.updated', expect.objectContaining({
+			status: 'away',
+			message: null,
+		}))
+	})
+})
diff --git a/apps/user_status/src/store/userStatus.ts b/apps/user_status/src/store/userStatus.ts
new file mode 100644
index 0000000000000..9b47a601322df
--- /dev/null
+++ b/apps/user_status/src/store/userStatus.ts
@@ -0,0 +1,142 @@
+/*!
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IClearAt, IUserStatus } from './statusState.ts'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { defineStore } from 'pinia'
+import { getTimestampForClearAt } from '../services/clearAtService.js'
+import * as api from '../services/statusService.js'
+import { usePredefinedStatusesStore } from './predefinedStatuses.ts'
+import { useStatusState } from './statusState.ts'
+
+export const useUserStatusStore = defineStore('userStatus', () => {
+	const state = useStatusState()
+	const { status, statusIsUserDefined, message, icon, clearAt, messageIsPredefined, messageId } = state
+
+	/**
+	 * Notify other components and apps about the changed status.
+	 */
+	function emitStatusUpdated() {
+		emit('user_status:status.updated', {
+			status: status.value,
+			message: message.value,
+			icon: icon.value,
+			clearAt: clearAt.value,
+			userId: getCurrentUser()?.uid,
+		})
+	}
+
+	/**
+	 * Load a status as returned by the server, e.g. from the heartbeat or a `user_status:status.updated` event.
+	 * This does not emit a `user_status:status.updated` event.
+	 *
+	 * @param data - The status to load
+	 */
+	function loadStatusFromServer(data: Partial<IUserStatus>) {
+		state.loadStatus(data)
+	}
+
+	/**
+	 * Load the status from the initial state.
+	 */
+	function loadStatusFromInitialState() {
+		loadStatusFromServer(loadState<IUserStatus>('user_status', 'status'))
+	}
+
+	/**
+	 * Re-fetch the status from the server.
+	 */
+	async function reFetchStatusFromServer() {
+		loadStatusFromServer(await api.fetchCurrentStatus())
+	}
+
+	/**
+	 * Set a new status type.
+	 *
+	 * @param statusType - The new status (online / away / dnd / invisible)
+	 */
+	async function setStatus(statusType: string) {
+		await api.setStatus(statusType)
+		status.value = statusType
+		statusIsUserDefined.value = true
+		emitStatusUpdated()
+	}
+
+	/**
+	 * Set the status message from a predefined status.
+	 *
+	 * @param newMessageId - The id of the predefined status
+	 * @param newClearAt - When to automatically clear the status
+	 */
+	async function setPredefinedMessage(newMessageId: string, newClearAt: IClearAt | null) {
+		const resolvedClearAt = getTimestampForClearAt(newClearAt)
+		await api.setPredefinedMessage(newMessageId, resolvedClearAt)
+
+		const predefinedStatus = usePredefinedStatusesStore().predefinedStatuses
+			.find(({ id }) => id === newMessageId)
+
+		messageId.value = newMessageId
+		messageIsPredefined.value = true
+		message.value = predefinedStatus?.message ?? null
+		icon.value = predefinedStatus?.icon ?? null
+		clearAt.value = resolvedClearAt
+		emitStatusUpdated()
+	}
+
+	/**
+	 * Set a custom status message.
+	 *
+	 * @param newMessage - The message
+	 * @param newIcon - The icon
+	 * @param newClearAt - When to automatically clear the status
+	 */
+	async function setCustomMessage(newMessage: string, newIcon: string | null, newClearAt: IClearAt | null) {
+		const resolvedClearAt = getTimestampForClearAt(newClearAt)
+		await api.setCustomMessage(newMessage, newIcon, resolvedClearAt)
+
+		messageId.value = null
+		messageIsPredefined.value = false
+		message.value = newMessage
+		icon.value = newIcon
+		clearAt.value = resolvedClearAt
+		emitStatusUpdated()
+	}
+
+	/**
+	 * Clear the status message.
+	 */
+	async function clearMessage() {
+		await api.clearMessage()
+
+		messageId.value = null
+		messageIsPredefined.value = false
+		message.value = null
+		icon.value = null
+		clearAt.value = null
+		emitStatusUpdated()
+	}
+
+	return {
+		status,
+		statusIsUserDefined,
+		message,
+		icon,
+		clearAt,
+		messageIsPredefined,
+		messageId,
+
+		emitStatusUpdated,
+		loadStatusFromServer,
+		loadStatusFromInitialState,
+		reFetchStatusFromServer,
+		setStatus,
+		setPredefinedMessage,
+		setCustomMessage,
+		clearMessage,
+	}
+})

From 492e2f95bbd13b88dc84db9023a6562c3b887739 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 2 Nov 2026 17:33:57 +0100
Subject: [PATCH 2/2] chore(deps): remove vuex from the Vue 3 frontend

No app built by the Vue 3 frontend uses vuex anymore. The legacy
frontend keeps its own vuex 3 dependency.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 package-lock.json | 19 -------------------
 package.json      |  1 -
 2 files changed, 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 67937a053c65e..205a96a435280 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,6 @@
         "sortablejs": "^1.15.7",
         "vue": "^3.5.44",
         "vue-router": "^5.0.6",
-        "vuex": "^4.1.0",
         "webdav": "^5.11.0"
       },
       "devDependencies": {
@@ -16257,24 +16256,6 @@
         }
       }
     },
-    "node_modules/vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
-    "node_modules/vuex/node_modules/@vue/devtools-api": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
-      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
-      "license": "MIT"
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-6.0.0.tgz",
diff --git a/package.json b/package.json
index f5a9d1eac3b4d..3024f019bf087 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
     "sortablejs": "^1.15.7",
     "vue": "^3.5.44",
     "vue-router": "^5.0.6",
-    "vuex": "^4.1.0",
     "webdav": "^5.11.0"
   },
   "devDependencies": {