From 78e927d65a8578379f5e7d90739ad7582fb4ad92 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 09:52:11 +0100
Subject: [PATCH 1/7] refactor(TitleBar): rename DesktopHeader to TitleBar

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../{DesktopHeader.vue => TitleBar.vue}       | 26 +++++++++----------
 src/talk/renderer/desktop.app.js              |  6 ++---
 src/talk/renderer/talk.html                   |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)
 rename src/talk/renderer/{DesktopHeader.vue => TitleBar.vue} (85%)
diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/TitleBar.vue
similarity index 85%
rename from src/talk/renderer/DesktopHeader.vue
rename to src/talk/renderer/TitleBar.vue
index 1a121e53..798bf6db 100644
--- a/src/talk/renderer/DesktopHeader.vue
+++ b/src/talk/renderer/TitleBar.vue
@@ -55,24 +55,24 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<header id="header" class="header">
-		<div class="header__inner">
+	<header id="header" class="title-bar">
+		<div class="title-bar__inner">
 			<div v-if="!OS.isMac"
-				class="header__title-wrapper"
+				class="title-bar__title-wrapper"
 				role="button"
 				tabindex="0"
 				@click="pushToRoot">
-				<span class="header__title">Nextcloud Talk</span>
-				<span v-if="isPreview" class="header__preview-badge">Preview</span>
+				<span class="title-bar__title">Nextcloud Talk</span>
+				<span v-if="isPreview" class="title-bar__preview-badge">Preview</span>
 			</div>
 
 			<div class="spacer" />
 
-			<div class="header__item" data-theme-dark>
+			<div class="title-bar__item" data-theme-dark>
 				<MainMenu />
 			</div>
 
-			<div class="header__item">
+			<div class="title-bar__item">
 				<UserMenu :user="user" @logout="logout" />
 			</div>
 		</div>
@@ -80,7 +80,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.header {
+.title-bar {
 	height: var(--header-height);
 	margin-bottom: calc(-1 * var(--header-height));
 	box-sizing: border-box;
@@ -88,7 +88,7 @@ onUnmounted(() => {
 	user-select: none;
 }
 
-.header__inner {
+.title-bar__inner {
 	padding: 0 calc(var(--body-container-margin) + 4px) 0 var(--body-container-margin);
 	display: flex;
 	align-items: center;
@@ -98,13 +98,13 @@ onUnmounted(() => {
 	width: env(titlebar-area-width, 100%);
 }
 
-.header__item {
+.title-bar__item {
 	width: var(--header-height); /* Make it square */
 	display: flex;
 	justify-content: center;
 }
 
-.header__title-wrapper {
+.title-bar__title-wrapper {
 	display: flex;
 	align-items: center;
 	height: 100%;
@@ -116,12 +116,12 @@ onUnmounted(() => {
 	}
 }
 
-.header__title {
+.title-bar__title {
 	font-size: 18px;
 	font-weight: bold;
 }
 
-.header__preview-badge {
+.title-bar__preview-badge {
 	margin-inline-start: var(--default-grid-baseline);
 }
 
diff --git a/src/talk/renderer/desktop.app.js b/src/talk/renderer/desktop.app.js
index e4ccac42..1757dd37 100644
--- a/src/talk/renderer/desktop.app.js
+++ b/src/talk/renderer/desktop.app.js
@@ -5,7 +5,7 @@
 
 import Vue from 'vue'
 import { createPinia, PiniaVuePlugin } from 'pinia'
-import DesktopHeader from './DesktopHeader.vue'
+import TitleBar from './TitleBar.vue'
 
 /**
  * @return {import('vue').ComponentPublicInstance}
@@ -13,7 +13,7 @@ import DesktopHeader from './DesktopHeader.vue'
 export function createDesktopApp() {
 	Vue.use(PiniaVuePlugin)
 
-	const DesktopHeaderApp = Vue.extend(DesktopHeader)
+	const TitleBarApp = Vue.extend(TitleBar)
 
-	return new DesktopHeaderApp({ pinia: createPinia() }).$mount('#desktop-header')
+	return new TitleBarApp({ pinia: createPinia() }).$mount('#title-bar')
 }
diff --git a/src/talk/renderer/talk.html b/src/talk/renderer/talk.html
index 03f6db03..3b2eeffd 100644
--- a/src/talk/renderer/talk.html
+++ b/src/talk/renderer/talk.html
@@ -12,7 +12,7 @@
 </head>
 <body>
 	<div id="skip-actions"></div>
-	<div id="desktop-header"></div>
+	<div id="title-bar"></div>
 	<div id="content"></div>
 </body>
 </html>

From 7b430bb4eb53d5c8b7cbc328da5003f1d35bab21 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 09:56:44 +0100
Subject: [PATCH 2/7] refactor(TitleBar): move files to a new module folder

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/talk/renderer/{ => TitleBar}/TitleBar.vue                   | 0
 src/talk/renderer/{ => TitleBar}/components/MainMenu.vue        | 0
 src/talk/renderer/{ => TitleBar}/components/ThemeLogo.vue       | 0
 src/talk/renderer/{ => TitleBar}/components/UiMenu.vue          | 0
 src/talk/renderer/{ => TitleBar}/components/UiMenuItem.vue      | 0
 src/talk/renderer/{ => TitleBar}/components/UiMenuSeparator.vue | 0
 src/talk/renderer/{ => TitleBar}/components/UserMenu.vue        | 0
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename src/talk/renderer/{ => TitleBar}/TitleBar.vue (100%)
 rename src/talk/renderer/{ => TitleBar}/components/MainMenu.vue (100%)
 rename src/talk/renderer/{ => TitleBar}/components/ThemeLogo.vue (100%)
 rename src/talk/renderer/{ => TitleBar}/components/UiMenu.vue (100%)
 rename src/talk/renderer/{ => TitleBar}/components/UiMenuItem.vue (100%)
 rename src/talk/renderer/{ => TitleBar}/components/UiMenuSeparator.vue (100%)
 rename src/talk/renderer/{ => TitleBar}/components/UserMenu.vue (100%)

diff --git a/src/talk/renderer/TitleBar.vue b/src/talk/renderer/TitleBar/TitleBar.vue
similarity index 100%
rename from src/talk/renderer/TitleBar.vue
rename to src/talk/renderer/TitleBar/TitleBar.vue
diff --git a/src/talk/renderer/components/MainMenu.vue b/src/talk/renderer/TitleBar/components/MainMenu.vue
similarity index 100%
rename from src/talk/renderer/components/MainMenu.vue
rename to src/talk/renderer/TitleBar/components/MainMenu.vue
diff --git a/src/talk/renderer/components/ThemeLogo.vue b/src/talk/renderer/TitleBar/components/ThemeLogo.vue
similarity index 100%
rename from src/talk/renderer/components/ThemeLogo.vue
rename to src/talk/renderer/TitleBar/components/ThemeLogo.vue
diff --git a/src/talk/renderer/components/UiMenu.vue b/src/talk/renderer/TitleBar/components/UiMenu.vue
similarity index 100%
rename from src/talk/renderer/components/UiMenu.vue
rename to src/talk/renderer/TitleBar/components/UiMenu.vue
diff --git a/src/talk/renderer/components/UiMenuItem.vue b/src/talk/renderer/TitleBar/components/UiMenuItem.vue
similarity index 100%
rename from src/talk/renderer/components/UiMenuItem.vue
rename to src/talk/renderer/TitleBar/components/UiMenuItem.vue
diff --git a/src/talk/renderer/components/UiMenuSeparator.vue b/src/talk/renderer/TitleBar/components/UiMenuSeparator.vue
similarity index 100%
rename from src/talk/renderer/components/UiMenuSeparator.vue
rename to src/talk/renderer/TitleBar/components/UiMenuSeparator.vue
diff --git a/src/talk/renderer/components/UserMenu.vue b/src/talk/renderer/TitleBar/components/UserMenu.vue
similarity index 100%
rename from src/talk/renderer/components/UserMenu.vue
rename to src/talk/renderer/TitleBar/components/UserMenu.vue

From 7d11d1372de974658f037e4bb947bfaada9de942 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 09:57:47 +0100
Subject: [PATCH 3/7] refactor(TitleBar): update imports after moving files

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/talk/renderer/TitleBar/TitleBar.vue             | 10 +++++-----
 src/talk/renderer/TitleBar/components/ThemeLogo.vue |  2 +-
 src/talk/renderer/TitleBar/components/UserMenu.vue  | 10 +++++-----
 src/talk/renderer/desktop.app.js                    |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/talk/renderer/TitleBar/TitleBar.vue b/src/talk/renderer/TitleBar/TitleBar.vue
index 798bf6db..0da332de 100644
--- a/src/talk/renderer/TitleBar/TitleBar.vue
+++ b/src/talk/renderer/TitleBar/TitleBar.vue
@@ -1,16 +1,16 @@
 <!--
   - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
--->
+  -->
 
 <script setup>
 import { onMounted, onUnmounted } from 'vue'
 import MainMenu from './components/MainMenu.vue'
 import UserMenu from './components/UserMenu.vue'
-import { appData } from '../../app/AppData.js'
-import { useUserStatusStore } from './UserStatus/userStatus.store.js'
-import { useAppConfigStore } from './Settings/appConfig.store.ts'
-import { useUserStatusHeartbeat } from './UserStatus/useUserStatusHeartbeat.js'
+import { appData } from '../../../app/AppData.js'
+import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
+import { useAppConfigStore } from '../Settings/appConfig.store.ts'
+import { useUserStatusHeartbeat } from '../UserStatus/useUserStatusHeartbeat.js'
 
 useUserStatusStore()
 useUserStatusHeartbeat()
diff --git a/src/talk/renderer/TitleBar/components/ThemeLogo.vue b/src/talk/renderer/TitleBar/components/ThemeLogo.vue
index b7a6f9ce..90efa85e 100644
--- a/src/talk/renderer/TitleBar/components/ThemeLogo.vue
+++ b/src/talk/renderer/TitleBar/components/ThemeLogo.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { appData } from '../../../app/AppData.js'
+import { appData } from '../../../../app/AppData.js'
 
 const props = defineProps({
 	size: {
diff --git a/src/talk/renderer/TitleBar/components/UserMenu.vue b/src/talk/renderer/TitleBar/components/UserMenu.vue
index 9d7e08dd..c45982a5 100644
--- a/src/talk/renderer/TitleBar/components/UserMenu.vue
+++ b/src/talk/renderer/TitleBar/components/UserMenu.vue
@@ -1,7 +1,7 @@
 <!--
   - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
--->
+  -->
 
 <script setup>
 import { computed, ref, watch } from 'vue'
@@ -25,10 +25,10 @@ import ThemeLogo from './ThemeLogo.vue'
 import UiMenu from './UiMenu.vue'
 import UiMenuItem from './UiMenuItem.vue'
 import UiMenuSeparator from './UiMenuSeparator.vue'
-import UserStatusDialog from '../UserStatus/UserStatusDialog.vue'
-import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
-import { userStatusTranslations } from '../UserStatus/userStatus.utils.js'
-import { appData } from '../../../app/AppData.js'
+import UserStatusDialog from '../../UserStatus/UserStatusDialog.vue'
+import { useUserStatusStore } from '../../UserStatus/userStatus.store.js'
+import { userStatusTranslations } from '../../UserStatus/userStatus.utils.js'
+import { appData } from '../../../../app/AppData.js'
 
 const props = defineProps({
 	user: {
diff --git a/src/talk/renderer/desktop.app.js b/src/talk/renderer/desktop.app.js
index 1757dd37..0b382d50 100644
--- a/src/talk/renderer/desktop.app.js
+++ b/src/talk/renderer/desktop.app.js
@@ -5,7 +5,7 @@
 
 import Vue from 'vue'
 import { createPinia, PiniaVuePlugin } from 'pinia'
-import TitleBar from './TitleBar.vue'
+import TitleBar from './TitleBar/TitleBar.vue'
 
 /**
  * @return {import('vue').ComponentPublicInstance}

From 6a76d6e2a530bfe744f57317c016a2f703d4f71e Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 10:55:13 +0100
Subject: [PATCH 4/7] refactor(UserStatus): rename .js file to .ts

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/talk/renderer/Settings/appConfig.store.ts                 | 2 +-
 src/talk/renderer/TitleBar/TitleBar.vue                       | 4 ++--
 src/talk/renderer/TitleBar/components/UserMenu.vue            | 4 ++--
 src/talk/renderer/UserStatus/components/UserStatusForm.vue    | 4 ++--
 .../renderer/UserStatus/components/UserStatusFormClearAt.vue  | 2 +-
 .../UserStatus/components/UserStatusFormPredefinedOption.vue  | 2 +-
 .../UserStatus/components/UserStatusFormStatusType.vue        | 2 +-
 src/talk/renderer/UserStatus/{useIdle.js => useIdle.ts}       | 0
 .../{useUserStatusHeartbeat.js => useUserStatusHeartbeat.ts}  | 2 +-
 .../{userStatus.service.js => userStatus.service.ts}          | 0
 .../UserStatus/{userStatus.store.js => userStatus.store.ts}   | 2 +-
 .../UserStatus/{userStatus.utils.js => userStatus.utils.ts}   | 0
 src/talk/renderer/notifications/notifications.store.js        | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)
 rename src/talk/renderer/UserStatus/{useIdle.js => useIdle.ts} (100%)
 rename src/talk/renderer/UserStatus/{useUserStatusHeartbeat.js => useUserStatusHeartbeat.ts} (96%)
 rename src/talk/renderer/UserStatus/{userStatus.service.js => userStatus.service.ts} (100%)
 rename src/talk/renderer/UserStatus/{userStatus.store.js => userStatus.store.ts} (99%)
 rename src/talk/renderer/UserStatus/{userStatus.utils.js => userStatus.utils.ts} (100%)

diff --git a/src/talk/renderer/Settings/appConfig.store.ts b/src/talk/renderer/Settings/appConfig.store.ts
index 98c2fbb9..5b536d66 100644
--- a/src/talk/renderer/Settings/appConfig.store.ts
+++ b/src/talk/renderer/Settings/appConfig.store.ts
@@ -9,7 +9,7 @@ import { readonly, ref, set, watch, watchEffect } from 'vue'
 import { defineStore } from 'pinia'
 import { getAppConfig } from '../../../shared/appConfig.service.ts'
 import { setInitialState } from '../../../shared/initialState.service.js'
-import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
+import { useUserStatusStore } from '../UserStatus/userStatus.store.ts'
 
 export const useAppConfigStore = defineStore('appConfig', () => {
 	const appConfig: Ref<AppConfig> = ref(getAppConfig())
diff --git a/src/talk/renderer/TitleBar/TitleBar.vue b/src/talk/renderer/TitleBar/TitleBar.vue
index 0da332de..2b98122c 100644
--- a/src/talk/renderer/TitleBar/TitleBar.vue
+++ b/src/talk/renderer/TitleBar/TitleBar.vue
@@ -8,9 +8,9 @@ import { onMounted, onUnmounted } from 'vue'
 import MainMenu from './components/MainMenu.vue'
 import UserMenu from './components/UserMenu.vue'
 import { appData } from '../../../app/AppData.js'
-import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
+import { useUserStatusStore } from '../UserStatus/userStatus.store.ts'
 import { useAppConfigStore } from '../Settings/appConfig.store.ts'
-import { useUserStatusHeartbeat } from '../UserStatus/useUserStatusHeartbeat.js'
+import { useUserStatusHeartbeat } from '../UserStatus/useUserStatusHeartbeat.ts'
 
 useUserStatusStore()
 useUserStatusHeartbeat()
diff --git a/src/talk/renderer/TitleBar/components/UserMenu.vue b/src/talk/renderer/TitleBar/components/UserMenu.vue
index c45982a5..cc501695 100644
--- a/src/talk/renderer/TitleBar/components/UserMenu.vue
+++ b/src/talk/renderer/TitleBar/components/UserMenu.vue
@@ -26,8 +26,8 @@ import UiMenu from './UiMenu.vue'
 import UiMenuItem from './UiMenuItem.vue'
 import UiMenuSeparator from './UiMenuSeparator.vue'
 import UserStatusDialog from '../../UserStatus/UserStatusDialog.vue'
-import { useUserStatusStore } from '../../UserStatus/userStatus.store.js'
-import { userStatusTranslations } from '../../UserStatus/userStatus.utils.js'
+import { useUserStatusStore } from '../../UserStatus/userStatus.store.ts'
+import { userStatusTranslations } from '../../UserStatus/userStatus.utils.ts'
 import { appData } from '../../../../app/AppData.js'
 
 const props = defineProps({
diff --git a/src/talk/renderer/UserStatus/components/UserStatusForm.vue b/src/talk/renderer/UserStatus/components/UserStatusForm.vue
index c8ebb030..5d45e173 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusForm.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusForm.vue
@@ -9,12 +9,12 @@ import { storeToRefs } from 'pinia'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import { translate as t } from '@nextcloud/l10n'
-import { useUserStatusStore } from '../userStatus.store.js'
+import { useUserStatusStore } from '../userStatus.store.ts'
 import UserStatusFormClearAt from './UserStatusFormClearAt.vue'
 import UserStatusFormCustomMessage from './UserStatusFormCustomMessage.vue'
 import UserStatusFormStatusType from './UserStatusFormStatusType.vue'
 import UserStatusFormPredefinedOption from './UserStatusFormPredefinedOption.vue'
-import { convertPredefinedStatusToUserStatus } from '../userStatus.utils.js'
+import { convertPredefinedStatusToUserStatus } from '../userStatus.utils.ts'
 
 const emit = defineEmits(['submit'])
 
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue b/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue
index 3fe4cb82..5c3a098d 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue
@@ -7,7 +7,7 @@
 import { computed } from 'vue'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import { translate as t } from '@nextcloud/l10n'
-import { clearAtToLabel, getTimestampForPredefinedClearAt } from '../userStatus.utils.js'
+import { clearAtToLabel, getTimestampForPredefinedClearAt } from '../userStatus.utils.ts'
 
 const props = defineProps({
 	clearAt: {
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue b/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue
index f96dc3f7..28cf1448 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import { clearAtToLabel } from '../userStatus.utils.js'
+import { clearAtToLabel } from '../userStatus.utils.ts'
 
 defineProps({
 	userStatus: {
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue b/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue
index f3824533..809c0497 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue
@@ -6,7 +6,7 @@
 <script setup>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
-import { userStatusTranslations } from '../userStatus.utils.js'
+import { userStatusTranslations } from '../userStatus.utils.ts'
 
 defineProps({
 	status: {
diff --git a/src/talk/renderer/UserStatus/useIdle.js b/src/talk/renderer/UserStatus/useIdle.ts
similarity index 100%
rename from src/talk/renderer/UserStatus/useIdle.js
rename to src/talk/renderer/UserStatus/useIdle.ts
diff --git a/src/talk/renderer/UserStatus/useUserStatusHeartbeat.js b/src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts
similarity index 96%
rename from src/talk/renderer/UserStatus/useUserStatusHeartbeat.js
rename to src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts
index 312dad8a..d6b7001f 100644
--- a/src/talk/renderer/UserStatus/useUserStatusHeartbeat.js
+++ b/src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts
@@ -5,7 +5,7 @@
 
 import { onBeforeUnmount, watch } from 'vue'
 import { useUserStatusStore } from './userStatus.store.js'
-import { useIdle } from './useIdle.js'
+import { useIdle } from './useIdle.ts'
 
 /** How often to update the user status */
 const USER_STATUS_UPDATE_INTERVAL = 5 * 60 * 1000 // 5 minutes
diff --git a/src/talk/renderer/UserStatus/userStatus.service.js b/src/talk/renderer/UserStatus/userStatus.service.ts
similarity index 100%
rename from src/talk/renderer/UserStatus/userStatus.service.js
rename to src/talk/renderer/UserStatus/userStatus.service.ts
diff --git a/src/talk/renderer/UserStatus/userStatus.store.js b/src/talk/renderer/UserStatus/userStatus.store.ts
similarity index 99%
rename from src/talk/renderer/UserStatus/userStatus.store.js
rename to src/talk/renderer/UserStatus/userStatus.store.ts
index f54750de..822ee32c 100644
--- a/src/talk/renderer/UserStatus/userStatus.store.js
+++ b/src/talk/renderer/UserStatus/userStatus.store.ts
@@ -12,7 +12,7 @@ import {
 	revertToBackupStatus,
 	heartbeatUserStatus,
 	updateUserStatus, fetchBackupStatus,
-} from './userStatus.service.js'
+} from './userStatus.service.ts'
 
 const cacheUserStatus = (userStatus) => localStorage.setItem('TalkDesktop:userStatus', JSON.stringify(userStatus))
 const restoreUserStatus = () => JSON.parse(localStorage.getItem('TalkDesktop:userStatus'))
diff --git a/src/talk/renderer/UserStatus/userStatus.utils.js b/src/talk/renderer/UserStatus/userStatus.utils.ts
similarity index 100%
rename from src/talk/renderer/UserStatus/userStatus.utils.js
rename to src/talk/renderer/UserStatus/userStatus.utils.ts
diff --git a/src/talk/renderer/notifications/notifications.store.js b/src/talk/renderer/notifications/notifications.store.js
index e090b5f5..3a808572 100644
--- a/src/talk/renderer/notifications/notifications.store.js
+++ b/src/talk/renderer/notifications/notifications.store.js
@@ -19,7 +19,7 @@ import { generateFilePath } from '@nextcloud/router'
 import { t } from '@nextcloud/l10n'
 import { getNotificationsData } from './notifications.service.js'
 import { appData } from '../../../app/AppData.js'
-import { useUserStatusStore } from '../UserStatus/userStatus.store.js'
+import { useUserStatusStore } from '../UserStatus/userStatus.store.ts'
 import { checkCurrentUserHasPendingCall } from '../../../callbox/renderer/callbox.service.ts'
 import { getAppConfigValue } from '../../../shared/appConfig.service.ts'
 import { subscribeBroadcast } from '../../../shared/broadcast.service.ts'

From 2e1ca3d63ece9a7804a1213d40786709e2f002ea Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 16:58:41 +0100
Subject: [PATCH 5/7] refactor(UserStatus): migrate to TS

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../renderer/UserStatus/UserStatusDialog.vue  |   8 +-
 .../UserStatus/components/UserStatusForm.vue  |  45 +++--
 .../components/UserStatusFormClearAt.vue      |  27 +--
 .../UserStatusFormCustomMessage.vue           |  39 ++---
 .../UserStatusFormPredefinedOption.vue        |  18 +-
 .../components/UserStatusFormStatusType.vue   |  20 +--
 src/talk/renderer/UserStatus/useIdle.ts       |  29 ++--
 .../UserStatus/useUserStatusHeartbeat.ts      |  18 +-
 .../renderer/UserStatus/userStatus.service.ts | 104 ++++++------
 .../renderer/UserStatus/userStatus.store.ts   | 157 ++++++++++++------
 .../renderer/UserStatus/userStatus.types.ts   |  70 ++++----
 .../renderer/UserStatus/userStatus.utils.ts   |  33 ++--
 12 files changed, 326 insertions(+), 242 deletions(-)

diff --git a/src/talk/renderer/UserStatus/UserStatusDialog.vue b/src/talk/renderer/UserStatus/UserStatusDialog.vue
index 06dcddee..311a3dd7 100644
--- a/src/talk/renderer/UserStatus/UserStatusDialog.vue
+++ b/src/talk/renderer/UserStatus/UserStatusDialog.vue
@@ -3,13 +3,15 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import { translate as t } from '@nextcloud/l10n'
-import { useUserStatusStore } from './userStatus.store.js'
+import { useUserStatusStore } from './userStatus.store.ts'
 import UserStatusForm from './components/UserStatusForm.vue'
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{
+	(event: 'close'): void
+}>()
 
 const userStatusStore = useUserStatusStore()
 </script>
diff --git a/src/talk/renderer/UserStatus/components/UserStatusForm.vue b/src/talk/renderer/UserStatus/components/UserStatusForm.vue
index 5d45e173..01e2b5c2 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusForm.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusForm.vue
@@ -3,7 +3,8 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
+import type { PredefinedUserStatus, UserStatusPrivate } from '../userStatus.types.ts'
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -16,13 +17,12 @@ import UserStatusFormStatusType from './UserStatusFormStatusType.vue'
 import UserStatusFormPredefinedOption from './UserStatusFormPredefinedOption.vue'
 import { convertPredefinedStatusToUserStatus } from '../userStatus.utils.ts'
 
-const emit = defineEmits(['submit'])
+const emit = defineEmits<{
+	(event: 'submit'): void
+}>()
 
 const userStatusStore = useUserStatusStore()
-
-/** @type {import('vue').Ref<import('./userStatus.types.ts').UserStatus>} */
-const userStatus = ref({ ...userStatusStore.userStatus })
-
+const userStatus = ref<UserStatusPrivate>({ ...userStatusStore.userStatus! })
 const backupStatus = ref(userStatusStore.backupStatus ? { ...userStatusStore.backupStatus } : null)
 
 const isDirty = ref(false)
@@ -30,20 +30,30 @@ const isDirty = ref(false)
 const { predefinedStatuses } = storeToRefs(userStatusStore)
 
 const statusIsUserDefined = computed(() => userStatus.value.icon || userStatus.value.message)
-
 const isClear = computed(() => userStatus.value.status === 'online' && !userStatus.value.icon && !userStatus.value.message)
 
-const patchStatus = (newUserStatus) => {
+/**
+ * Patch the user status with the new values
+ * @param newUserStatus - New user status values
+ */
+function patchStatus(newUserStatus: Partial<UserStatusPrivate>) {
 	isDirty.value = true
 	backupStatus.value = null
 	Object.assign(userStatus.value, newUserStatus)
 }
 
-const selectPredefinedStatus = (status) => {
+/**
+ * Select a predefined status
+ * @param status - Predefined status to select
+ */
+function selectPredefinedStatus(status: PredefinedUserStatus) {
 	patchStatus(convertPredefinedStatusToUserStatus(status))
 }
 
-const clearUserStatusCustomMessage = () => {
+/**
+ * Clear the custom message
+ */
+function clearUserStatusCustomMessage() {
 	patchStatus({
 		messageId: null,
 		messageIsPredefined: false,
@@ -53,17 +63,23 @@ const clearUserStatusCustomMessage = () => {
 	})
 }
 
-const save = async () => {
+/**
+ * Save the user status
+ */
+async function save() {
 	const isSuccess = await userStatusStore.saveUserStatus(userStatus.value)
 	if (isSuccess) {
 		emit('submit')
 	}
 }
 
-const revertStatus = async () => {
+/**
+ * Revert the user status from the backup
+ */
+async function revertStatus() {
 	await userStatusStore.revertUserStatusFromBackup()
 	backupStatus.value = null
-	userStatus.value = { ...userStatusStore.userStatus }
+	userStatus.value = { ...userStatusStore.userStatus! }
 	isDirty.value = true
 }
 </script>
@@ -77,10 +93,9 @@ const revertStatus = async () => {
 		</NcNoteCard>
 
 		<UserStatusFormCustomMessage class="user-status-form__row"
-			:disabled="backupStatus"
+			:disabled="!!backupStatus"
 			:message="userStatus.message"
 			:icon="userStatus.icon"
-
 			@update:message="patchStatus({ message: $event })"
 			@update:icon="patchStatus({ icon: $event })" />
 
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue b/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue
index 5c3a098d..d682b7ce 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormClearAt.vue
@@ -3,22 +3,23 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import { translate as t } from '@nextcloud/l10n'
 import { clearAtToLabel, getTimestampForPredefinedClearAt } from '../userStatus.utils.ts'
 
-const props = defineProps({
-	clearAt: {
-		type: Number,
-		required: false,
-		default: null,
-	},
-	disabled: Boolean,
+const props = withDefaults(defineProps<{
+	clearAt?: number | null,
+	disabled?: boolean,
+}>(), {
+	clearAt: null,
+	disabled: false,
 })
 
-const emit = defineEmits(['update:clearAt'])
+const emit = defineEmits<{
+	(event: 'update:clearAt', value: number | null): void
+}>()
 
 const clearAtOptions = [{
 	label: t('talk_desktop', 'Don\'t clear'),
@@ -53,11 +54,15 @@ const clearAtOptions = [{
 		type: 'end-of',
 		time: 'week',
 	},
-}]
+}] as const
 
 const clearAtAsLabel = computed(() => clearAtToLabel(props.clearAt))
 
-const handleSelected = (option) => {
+/**
+ * Handle the selected option
+ * @param option - selected option
+ */
+function handleSelected(option: typeof clearAtOptions[number]) {
 	emit('update:clearAt', getTimestampForPredefinedClearAt(option.clearAt))
 }
 </script>
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormCustomMessage.vue b/src/talk/renderer/UserStatus/components/UserStatusFormCustomMessage.vue
index 138c2ad0..e0410f56 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormCustomMessage.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormCustomMessage.vue
@@ -3,41 +3,32 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import { translate as t } from '@nextcloud/l10n'
 import IconEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 
-defineProps({
-	icon: {
-		type: [String, null],
-		required: false,
-		default: null,
-	},
-	message: {
-		type: [String, null],
-		required: false,
-		default: null,
-	},
-	disabled: Boolean,
+withDefaults(defineProps<{
+	icon?: string | null,
+	message?: string | null,
+	disabled?: boolean,
+}>(), {
+	icon: null,
+	message: null,
+	disabled: false,
 })
 
-const emit = defineEmits(['update:icon', 'update:message'])
-
-const handleUserStatusEmojiChange = (icon) => {
-	emit('update:icon', icon)
-}
-
-const handleUserStatusMessageChange = (message) => {
-	emit('update:message', message)
-}
+const emit = defineEmits<{
+	(event: 'update:icon', value: string | null): void,
+	(event: 'update:message', value: string | null): void,
+}>()
 </script>
 
 <template>
 	<div class="user-status-form-custom-message">
-		<NcEmojiPicker @select="handleUserStatusEmojiChange">
+		<NcEmojiPicker @select="emit('update:icon', $event)">
 			<NcButton :aria-label="t('talk_desktop', 'Emoji for your status message')" type="tertiary" :disabled="disabled">
 				<template #icon>
 					<template v-if="icon">
@@ -52,7 +43,7 @@ const handleUserStatusMessageChange = (message) => {
 			maxlength="80"
 			:disabled="disabled"
 			:model-value="message ?? ''"
-			@update:model-value="handleUserStatusMessageChange" />
+			@update:model-value="emit('update:message', $event)" />
 	</div>
 </template>
 
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue b/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue
index 28cf1448..4ed3ff4c 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormPredefinedOption.vue
@@ -3,19 +3,21 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
+import type { PredefinedUserStatus, UserStatusBackup } from '../userStatus.types.ts'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { clearAtToLabel } from '../userStatus.utils.ts'
 
-defineProps({
-	userStatus: {
-		type: Object,
-		required: true,
-	},
-	pressed: Boolean,
+withDefaults(defineProps<{
+	userStatus: PredefinedUserStatus | UserStatusBackup,
+	pressed?: boolean,
+}>(), {
+	pressed: false,
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits<{
+	(event: 'click'): void
+}>()
 </script>
 
 <template>
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue b/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue
index 809c0497..832dd8c5 100644
--- a/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue
+++ b/src/talk/renderer/UserStatus/components/UserStatusFormStatusType.vue
@@ -3,24 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
-import { userStatusTranslations } from '../userStatus.utils.ts'
+import { userStatusStatusTypes, userStatusTranslations } from '../userStatus.utils.ts'
+import type { UserStatusStatusType } from '../userStatus.types.ts'
 
-defineProps({
-	status: {
-		type: String,
-		required: true,
-	},
-})
+defineProps<{
+	status: UserStatusStatusType,
+}>()
 
-const emit = defineEmits(['update:status'])
+const emit = defineEmits<{
+	(event: 'update:status', value: UserStatusStatusType): void
+}>()
 </script>
 
 <template>
 	<div class="user-status-form-status">
-		<NcButton v-for="option in ['online', 'away', 'dnd', 'offline']"
+		<NcButton v-for="option in userStatusStatusTypes"
 			:key="option"
 			type="tertiary"
 			alignment="start"
diff --git a/src/talk/renderer/UserStatus/useIdle.ts b/src/talk/renderer/UserStatus/useIdle.ts
index 1eae0f6f..923c40ac 100644
--- a/src/talk/renderer/UserStatus/useIdle.ts
+++ b/src/talk/renderer/UserStatus/useIdle.ts
@@ -5,31 +5,40 @@
 
 import { onBeforeUnmount, ref } from 'vue'
 
-const WINDOW_ACTIVE_EVENTS = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
+const WINDOW_ACTIVE_EVENTS = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'] as const
 
 /**
- * Hook to detect if the user is active or away (idle)
- *
- * @param {number} timeout - How long user is considered active, default is 1 minute
- * @return {{ isIdle: import('vue').Ref<boolean> }}
+ * Hook to detect whether the user is active or away (idle)
+ * @param options - Options
+ * @param options.timeout - How long user is considered active, default is 1 minute
  */
 export function useIdle({ timeout = 1000 * 60 }) {
 	const isIdle = ref(false)
 
-	let isActiveTimeout = null
+	let isActiveTimeout: number | undefined
 
-	const markInactive = () => {
+	/**
+	 * Mark user as inactive
+	 */
+	function markInactive() {
 		isIdle.value = true
 		clearTimeout(isActiveTimeout)
 	}
 
-	const markActive = () => {
+	/**
+	 * Mark user as active
+	 */
+	function markActive() {
 		isIdle.value = false
 		clearTimeout(isActiveTimeout)
-		isActiveTimeout = setTimeout(markInactive, timeout)
+		// TODO: separate tsconfig for main process (Node.js Environment) and renderer process (Browser Environment)
+		isActiveTimeout = setTimeout(markInactive, timeout) as unknown as number
 	}
 
-	const handleVisibilityChange = () => {
+	/**
+	 * Handle visibility change
+	 */
+	function handleVisibilityChange() {
 		if (document.hidden) {
 			markInactive()
 		} else {
diff --git a/src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts b/src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts
index d6b7001f..3e1b7518 100644
--- a/src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts
+++ b/src/talk/renderer/UserStatus/useUserStatusHeartbeat.ts
@@ -4,7 +4,7 @@
  */
 
 import { onBeforeUnmount, watch } from 'vue'
-import { useUserStatusStore } from './userStatus.store.js'
+import { useUserStatusStore } from './userStatus.store.ts'
 import { useIdle } from './useIdle.ts'
 
 /** How often to update the user status */
@@ -14,23 +14,27 @@ const USER_STATUS_UPDATE_INTERVAL = 5 * 60 * 1000 // 5 minutes
 const USER_STATUS_ACTIVE_TIMEOUT = 2 * 60 * 1000 // 2 minutes
 
 /**
- * Hook to update the user status in the background
- *
- * @return {{ isIdle: import('vue').Ref<boolean> }}
+ * Composable to update the user status in the background
  */
 export function useUserStatusHeartbeat() {
 	const userStatusStore = useUserStatusStore()
 	const { isIdle } = useIdle({ timeout: USER_STATUS_ACTIVE_TIMEOUT })
 
-	const heartbeat = () => userStatusStore.updateUserStatusWithHeartbeat(isIdle.value)
+	/**
+	 * Send a heartbeat
+	 */
+	function heartbeat() {
+		userStatusStore.updateUserStatusWithHeartbeat(isIdle.value)
+	}
 
-	let heartbeatInterval
+	let heartbeatInterval: number | undefined
 	const restartHeartbeat = () => {
 		if (heartbeatInterval) {
 			clearInterval(heartbeatInterval)
 		}
 		heartbeat()
-		heartbeatInterval = setInterval(heartbeat, USER_STATUS_UPDATE_INTERVAL)
+		// TODO: fix when main and renderer process have separate tsconfig
+		heartbeatInterval = setInterval(heartbeat, USER_STATUS_UPDATE_INTERVAL) as unknown as number
 	}
 
 	watch(isIdle, () => {
diff --git a/src/talk/renderer/UserStatus/userStatus.service.ts b/src/talk/renderer/UserStatus/userStatus.service.ts
index 3ebf947e..90631b52 100644
--- a/src/talk/renderer/UserStatus/userStatus.service.ts
+++ b/src/talk/renderer/UserStatus/userStatus.service.ts
@@ -3,58 +3,66 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type {
+	PredefinedUserStatus,
+	UserStatusPrivate,
+	UserStatusStatusType,
+	UserStatusBackup,
+} from './userStatus.types.ts'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 
+// TODO: add types to @nextcloud/types or @nextcloud/axios
+type OcsResponse<T> = {
+	'meta': {
+		'status': string,
+		'statuscode': number,
+		'message': string,
+	},
+	ocs: {
+		data: T
+	}
+}
+
 /**
- * Fetches all predefined statuses from the server
- *
- * @return {Promise<import('./userStatus.types.ts').PredefinedUserStatus[]>}
+ * Fetch all predefined statuses
  */
 export async function fetchAllPredefinedStatuses() {
-	const response = await axios.get(generateOcsUrl('apps/user_status/api/v1/predefined_statuses?format=json'))
+	const response = await axios.get<OcsResponse<PredefinedUserStatus[]>>(generateOcsUrl('apps/user_status/api/v1/predefined_statuses?format=json'))
 	return response.data.ocs.data
 }
 
 /**
- * Fetches the current user status
- *
- * @return {Promise<import('./userStatus.types.ts').UserStatusPrivate>}
+ * Fetch the current user status
  */
 export async function fetchCurrentUserStatus() {
-	const response = await axios.get(generateOcsUrl('apps/user_status/api/v1/user_status'))
+	const response = await axios.get<OcsResponse<UserStatusPrivate>>(generateOcsUrl('apps/user_status/api/v1/user_status'))
 	return response.data.ocs.data
 }
 
 /**
- * Fetches the current user-status
- *
- * @param {string} userId - User id
- * @return {Promise<import('./userStatus.types.ts').UserStatus>}
+ * Fetch the current user backup status
+ * @param userId - User id
  */
-export async function fetchBackupStatus(userId) {
-	const response = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId: '_' + userId }))
+export async function fetchBackupStatus(userId: string) {
+	const response = await axios.get<OcsResponse<UserStatusBackup>>(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId: '_' + userId }))
 	return response.data.ocs.data
 }
 
 /**
- * Sets the status
- *
- * @param {import('./userStatus.types.ts').UserStatusStatusType} statusType The status
- * @return {Promise<void>}
+ * Set the user status's status
+ * @param statusType - Status
  */
-export async function putUserStatusStatus(statusType) {
+export async function putUserStatusStatus(statusType: UserStatusStatusType) {
 	await axios.put(generateOcsUrl('apps/user_status/api/v1/user_status/status'), { statusType })
 }
 
 /**
- * Sets a message based on our predefined statuses
- *
- * @param {string} messageId The id of the message, taken from predefined status service
- * @param {number | null} clearAt When to automatically clean the status
- * @return {Promise<void>}
+ * Set user status message based on predefined statuses
+ * @param messageId - ID of the message, taken from predefined status service
+ * @param clearAt - When to automatically clean the status
  */
-export async function putUserStatusPredefinedMessage(messageId, clearAt = null) {
+export async function putUserStatusPredefinedMessage(messageId: string, clearAt: number | null = null) {
 	await axios.put(generateOcsUrl('apps/user_status/api/v1/user_status/message/predefined?format=json'), {
 		messageId,
 		clearAt,
@@ -62,14 +70,12 @@ export async function putUserStatusPredefinedMessage(messageId, clearAt = null)
 }
 
 /**
- * Sets a custom message
- *
- * @param {string} message The user-defined message
- * @param {string | null} statusIcon The user-defined icon
- * @param {number | null} clearAt When to automatically clean the status
- * @return {Promise<void>}
+ * Set custom user status message
+ * @param message - User-defined message
+ * @param statusIcon - User-defined icon
+ * @param clearAt - When to automatically clean the status
  */
-export async function putUserStatusCustomMessage(message, statusIcon = null, clearAt = null) {
+export async function putUserStatusCustomMessage(message: string | null, statusIcon: string | null = null, clearAt: number | null = null) {
 	await axios.put(generateOcsUrl('apps/user_status/api/v1/user_status/message/custom?format=json'), {
 		message,
 		statusIcon,
@@ -78,22 +84,18 @@ export async function putUserStatusCustomMessage(message, statusIcon = null, cle
 }
 
 /**
- * Clears the current status of the user
- *
- * @return {Promise<void>}
+ * Clear the current user status
  */
 export async function deleteUserStatusMessage() {
 	await axios.delete(generateOcsUrl('apps/user_status/api/v1/user_status/message?format=json'))
 }
 
 /**
- * Updates the user status, including the online status, the custom message and removing the custom message
- *
- * @param {import('./userStatus.types.ts').UserStatus} oldUserStatus - The current user status
- * @param {import('./userStatus.types.ts').UserStatus} newUserStatus - The new user status
- * @return {Promise<void>}
+ * Update the user status, including online status, a custom message, or removing a custom message
+ * @param oldUserStatus - Current user status
+ * @param newUserStatus - New user status
  */
-export async function updateUserStatus(oldUserStatus, newUserStatus) {
+export async function updateUserStatus(oldUserStatus: UserStatusPrivate, newUserStatus: UserStatusPrivate) {
 	const hasStatusChanged = newUserStatus.status !== oldUserStatus.status
 	const hasPredefinedMessageChanged = newUserStatus.messageIsPredefined && newUserStatus.messageId !== oldUserStatus.messageId
 	const hasCustomMessageChanged = newUserStatus.message !== oldUserStatus.message || newUserStatus.icon !== oldUserStatus.icon || newUserStatus.clearAt !== oldUserStatus.clearAt
@@ -119,24 +121,20 @@ export async function updateUserStatus(oldUserStatus, newUserStatus) {
 }
 
 /**
- * Revert the automated status
- *
- * @param {string} messageId - The id of the message that should be reverted
- * @return {Promise<import('./userStatus.types.ts').UserStatus>}
+ * Revert the automated (backup) status
+ * @param messageId - ID of the message that should be reverted
  */
-export async function revertToBackupStatus(messageId) {
-	const response = await axios.delete(generateOcsUrl('apps/user_status/api/v1/user_status/revert/{messageId}', { messageId }))
+export async function revertToBackupStatus(messageId: string) {
+	const response = await axios.delete<OcsResponse<UserStatusPrivate>>(generateOcsUrl('apps/user_status/api/v1/user_status/revert/{messageId}', { messageId }))
 	return response.data.ocs.data
 }
 
 /**
- * Send a heartbeat and returns the current user status
- *
- * @param {boolean} isAway - Whether the user is away
- * @return {Promise<import('./userStatus.types.ts').UserStatus|null>}
+ * Send a heartbeat and get the current user status again
+ * @param isAway - Whether the user is away
  */
-export async function heartbeatUserStatus(isAway) {
-	const response = await axios.put(generateOcsUrl('apps/user_status/api/v1/heartbeat?format=json'), {
+export async function heartbeatUserStatus(isAway: boolean) {
+	const response = await axios.put<OcsResponse<UserStatusPrivate> | null>(generateOcsUrl('apps/user_status/api/v1/heartbeat?format=json'), {
 		status: isAway ? 'away' : 'online',
 	})
 	// If 204 No content - return null
diff --git a/src/talk/renderer/UserStatus/userStatus.store.ts b/src/talk/renderer/UserStatus/userStatus.store.ts
index 822ee32c..d0f5615c 100644
--- a/src/talk/renderer/UserStatus/userStatus.store.ts
+++ b/src/talk/renderer/UserStatus/userStatus.store.ts
@@ -2,6 +2,12 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type {
+	PredefinedUserStatus,
+	UserStatusBackup,
+	UserStatusPrivate,
+	UserStatusPublic,
+} from './userStatus.types.ts'
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { emit, subscribe } from '@nextcloud/event-bus'
@@ -11,61 +17,124 @@ import {
 	fetchCurrentUserStatus,
 	revertToBackupStatus,
 	heartbeatUserStatus,
-	updateUserStatus, fetchBackupStatus,
+	updateUserStatus,
+	fetchBackupStatus,
 } from './userStatus.service.ts'
 
-const cacheUserStatus = (userStatus) => localStorage.setItem('TalkDesktop:userStatus', JSON.stringify(userStatus))
-const restoreUserStatus = () => JSON.parse(localStorage.getItem('TalkDesktop:userStatus'))
-
-const cachePredefinedStatuses = (userStatus) => localStorage.setItem('TalkDesktop:predefinedStatuses', JSON.stringify(userStatus))
-const restorePredefinedStatuses = () => JSON.parse(localStorage.getItem('TalkDesktop:predefinedStatuses'))
+declare module '@nextcloud/event-bus' {
+	interface NextcloudEvents {
+		'user_status:status.updated': UserStatusPublic
+	}
+}
 
-export const useUserStatusStore = defineStore('userStatus', () => {
-	/** @type {import('vue').Ref<import('./userStatus.types.ts').UserStatus|null>} */
-	const userStatus = ref(null)
+/**
+ * Cache the user status in local storage
+ * @param userStatus - User status
+ */
+function cacheUserStatus(userStatus: UserStatusPrivate) {
+	localStorage.setItem('TalkDesktop:userStatus', JSON.stringify(userStatus))
+}
 
-	/** @type {import('vue').Ref<import('./userStatus.types.ts').PredefinedUserStatus[]|null>} */
-	const predefinedStatuses = ref(restorePredefinedStatuses())
+/**
+ * Restore the user status from local storage
+ */
+function restoreUserStatus(): UserStatusPrivate | null {
+	// @ts-expect-error - JSON parse type is invalid in lib.ts, `null` is a valid value to parse
+	return JSON.parse(localStorage.getItem('TalkDesktop:userStatus'))
+}
 
-	/** @type {import('vue').Ref<null|object>} */
-	const backupStatus = ref(null)
+/**
+ * Cache the predefined statuses in local storage
+ * @param predefinedStatuses - Predefined statuses
+ */
+function cachePredefinedStatuses(predefinedStatuses: PredefinedUserStatus[]) {
+	localStorage.setItem('TalkDesktop:predefinedStatuses', JSON.stringify(predefinedStatuses))
+}
 
-	const isDnd = computed(() => userStatus.value?.status === 'dnd')
+/**
+ * Restore the predefined statuses from local storage
+ */
+function restorePredefinedStatuses(): PredefinedUserStatus[] | null {
+	// @ts-expect-error - JSON parse type is invalid in lib.ts, `null` is a valid value to parse
+	return JSON.parse(localStorage.getItem('TalkDesktop:predefinedStatuses'))
+}
 
-	const emitUserStatusUpdated = () => emit('user_status:status.updated', {
-		status: userStatus.value.status,
-		message: userStatus.value.message,
-		icon: userStatus.value.icon,
-		clearAt: userStatus.value.clearAt,
-		userId: userStatus.value.userId,
+/**
+ * Emit the user status update event
+ * @param userStatus - User status
+ */
+function emitUserStatusUpdated(userStatus: UserStatusPublic) {
+	emit('user_status:status.updated', {
+		status: userStatus.status,
+		message: userStatus.message,
+		icon: userStatus.icon,
+		clearAt: userStatus.clearAt,
+		userId: userStatus.userId,
 	})
+}
+
+export const useUserStatusStore = defineStore('userStatus', () => {
+	const userStatus = ref<UserStatusPrivate | null>(null)
+	const predefinedStatuses = ref<PredefinedUserStatus[] | null>(restorePredefinedStatuses())
+	const backupStatus = ref<UserStatusBackup | null>(null)
+
+	const isDnd = computed(() => userStatus.value?.status === 'dnd')
 
 	subscribe('user_status:status.updated', (newUserStatus) => {
-		if (newUserStatus.userId === getCurrentUser().uid) {
+		if (newUserStatus.userId === getCurrentUser()!.uid) {
 			patchUserStatus(newUserStatus, false)
 		}
 	})
 
-	const setUserStatus = (newUserStatus, withEmit = true) => {
+	// Restore the user status from cache
+	const cachedStatus = restoreUserStatus()
+	if (cachedStatus) {
+		setUserStatus(cachedStatus, true)
+	}
+
+	watch(userStatus, (newUserStatus) => cacheUserStatus(newUserStatus!), { deep: true })
+
+	const initPromise = (async () => {
+		await updateUserStatusWithHeartbeat(false, true)
+
+		predefinedStatuses.value = await fetchAllPredefinedStatuses()
+		cachePredefinedStatuses(predefinedStatuses.value)
+	})()
+
+	/**
+	 * Set the user status
+	 * @param newUserStatus - New user status
+	 * @param withEmit - Whether to emit the update event
+	 */
+	function setUserStatus(newUserStatus: UserStatusPrivate, withEmit: boolean = true) {
 		userStatus.value = newUserStatus
 		backupStatus.value = null
 		if (withEmit) {
-			emitUserStatusUpdated()
+			emitUserStatusUpdated(userStatus.value)
 		}
 	}
 
-	const patchUserStatus = (newUserStatus, withEmit = true) => {
-		Object.assign(userStatus.value, newUserStatus)
+	/**
+	 * Patch the user status
+	 * @param newUserStatus - New user status
+	 * @param withEmit - Whether to emit the update event
+	 */
+	function patchUserStatus(newUserStatus: Partial<UserStatusPrivate>, withEmit: boolean = true) {
+		Object.assign(userStatus.value!, newUserStatus)
 		backupStatus.value = null
 		if (withEmit) {
-			emitUserStatusUpdated()
+			emitUserStatusUpdated(userStatus.value!)
 		}
 	}
 
-	const saveUserStatus = async (newUserStatus) => {
+	/**
+	 * Save the user status
+	 * @param newUserStatus - New user status
+	 */
+	async function saveUserStatus(newUserStatus: UserStatusPrivate) {
 		try {
 			const newUserStatusDto = { ...newUserStatus }
-			await updateUserStatus(userStatus.value, newUserStatusDto)
+			await updateUserStatus(userStatus.value!, newUserStatusDto)
 			setUserStatus(newUserStatus)
 			return true
 		} catch {
@@ -73,40 +142,34 @@ export const useUserStatusStore = defineStore('userStatus', () => {
 		}
 	}
 
-	const revertUserStatusFromBackup = async () => {
-		await revertToBackupStatus(userStatus.value.messageId)
+	/**
+	 * Revert the user status from the backup
+	 */
+	async function revertUserStatusFromBackup() {
+		await revertToBackupStatus(userStatus.value!.messageId!)
 		setUserStatus(await fetchCurrentUserStatus())
 		backupStatus.value = null
 	}
 
-	const updateUserStatusWithHeartbeat = async (isAway, forceFetchStatus = false) => {
+	/**
+	 * Update the user status with a heartbeat
+	 * @param isAway - Whether the user is away
+	 * @param forceFetchStatus - Whether to force fetch the current status
+	 */
+	async function updateUserStatusWithHeartbeat(isAway: boolean, forceFetchStatus: boolean = false) {
 		const status = await heartbeatUserStatus(isAway)
 
 		if (status) {
 			setUserStatus(status)
-			backupStatus.value = await fetchBackupStatus(getCurrentUser().uid).catch(() => null)
+			backupStatus.value = await fetchBackupStatus(getCurrentUser()!.uid).catch(() => null)
 		} else if (forceFetchStatus) {
 			// heartbeat returns the status only if it has changed
 			// Request explicitly if forced to fetch status
 			setUserStatus(await fetchCurrentUserStatus())
-			backupStatus.value = await fetchBackupStatus(getCurrentUser().uid).catch(() => null)
+			backupStatus.value = await fetchBackupStatus(getCurrentUser()!.uid).catch(() => null)
 		}
 	}
 
-	const cachedStatus = restoreUserStatus()
-	if (cachedStatus) {
-		setUserStatus(cachedStatus, true)
-	}
-
-	watch(userStatus, (newUserStatus) => cacheUserStatus(newUserStatus), { deep: true })
-
-	const initPromise = (async () => {
-		await updateUserStatusWithHeartbeat(false, true)
-
-		predefinedStatuses.value = await fetchAllPredefinedStatuses()
-		cachePredefinedStatuses(predefinedStatuses.value)
-	})()
-
 	return {
 		initPromise,
 		userStatus,
diff --git a/src/talk/renderer/UserStatus/userStatus.types.ts b/src/talk/renderer/UserStatus/userStatus.types.ts
index f6929706..5471e2c9 100644
--- a/src/talk/renderer/UserStatus/userStatus.types.ts
+++ b/src/talk/renderer/UserStatus/userStatus.types.ts
@@ -3,66 +3,64 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-export type UserStatusStatusType = 'online' | 'away' | 'dnd' | 'invisible' | 'offline';
+export type UserStatusStatusType = 'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'
 
-export type UserStatusBase = {
-	/** So-called status type or online status */
-	status: UserStatusStatusType,
+/** Generic User Status - base for different cases */
+type UserStatusBase = {
 	/** The id of the user */
 	userId: string,
+	/** So-called status type or online status */
+	status: UserStatusStatusType,
 	/** Whether the status is user-defined with a custom message/icon */
 	statusIsUserDefined: boolean,
-	/** A custom message set by the user */
-	message: string|null,
-	/** The emoji symbol selected by the user */
-	icon: string|null,
+	/** Custom message set by the user */
+	message: string | null,
+	/** Custom emoji symbol selected by the user */
+	icon: string | null,
 	/** When to automatically remove the status */
-	clearAt: number|null,
+	clearAt: number | null,
 	/** Whether the message is predefined */
 	messageIsPredefined: boolean,
-	/** The id of the message in case it's predefined */
-	messageId: string|null,
+	/** ID of the predefined message */
+	messageId: string | null,
 }
 
-export type UserStatusCustomBase = UserStatusBase & {
-	statusIsUserDefined: true,
+/** User Status without any additional values except the status type */
+type UserStatusClean = UserStatusBase & {
+	statusIsUserDefined: false,
+	message: null,
+	icon: null,
+	clearAt: null,
 	messageIsPredefined: false,
 	messageId: null,
 }
 
-export type UserStatusCustomWithIcon = UserStatusCustomBase & {
-	message: string | null,
-	icon: string,
-}
-
-export type UserStatusCustomWithMessage = UserStatusCustomBase & {
-	message: string,
-	icon: string | null,
-}
-
-export type UserStatusCustom = UserStatusCustomWithIcon | UserStatusCustomWithMessage;
+/** User Status set by user with at least a custom icon or message */
+type UserStatusCustom = UserStatusBase & {
+	statusIsUserDefined: true,
+	messageIsPredefined: false,
+	messageId: null,
+} & ({ icon: string } | { message: string })
 
-export type UserStatusPredefined = UserStatusBase & {
+/** User Status set from predefined statuses */
+type UserStatusPredefined = UserStatusBase & {
 	statusIsUserDefined: true,
 	messageIsPredefined: true,
 	messageId: string,
 }
 
-export type UserStatusNonCustom = UserStatusBase & {
-	statusIsUserDefined: false,
-	message: null,
-	icon: null,
-	clearAt: null,
-	messageIsPredefined: false,
-	messageId: null,
-}
+export type UserStatusPrivate = UserStatusCustom | UserStatusPredefined | UserStatusClean
+
+export type UserStatusPublic = Pick<UserStatusPrivate, 'userId' | 'message' | 'icon' | 'clearAt' | 'status'>
 
-export type UserStatus = UserStatusCustom | UserStatusPredefined | UserStatusNonCustom;
+export type UserStatus = UserStatusPrivate | UserStatusClean
 
-export type UserStatusPrivate = Omit<UserStatus, 'messageId' | 'messageIsPredefined' | 'statusIsUserDefined'>
+export type UserStatusBackup = UserStatusPublic & {
+	userId: `_${string}`,
+}
 
 /**
- * The configuration for the predefined status message clearAt field
+ * Configuration for the predefined status message clearAt field
  */
 
 export type ClearAtPredefinedConfigForEndOf = {
diff --git a/src/talk/renderer/UserStatus/userStatus.utils.ts b/src/talk/renderer/UserStatus/userStatus.utils.ts
index 0926cb7b..87db61a0 100644
--- a/src/talk/renderer/UserStatus/userStatus.utils.ts
+++ b/src/talk/renderer/UserStatus/userStatus.utils.ts
@@ -3,25 +3,26 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { ClearAtPredefinedConfig, PredefinedUserStatus, UserStatus, UserStatusStatusType } from './userStatus.types.ts'
 import moment from '@nextcloud/moment'
 import { translate as t } from '@nextcloud/l10n'
 
-/** @type {Record<import('./userStatus.types.ts').UserStatusStatusType, string>} */
-export const userStatusTranslations = {
+export const userStatusStatusTypes: UserStatusStatusType[] = ['online', 'away', 'busy', 'dnd', 'invisible', 'offline'] as const
+
+export const userStatusTranslations: Record<UserStatusStatusType, string> = {
 	online: t('talk_desktop', 'Online'),
 	away: t('talk_desktop', 'Away'),
 	busy: t('talk_desktop', 'Away'),
 	dnd: t('talk_desktop', 'Do not disturb'),
 	invisible: t('talk_desktop', 'Invisible'),
 	offline: t('talk_desktop', 'Offline'),
-}
+} as const
 
 /**
  * Get a human-readable string for the user status
- *
- * @param {import('./userStatus.types.ts').UserStatus} userStatus - The user status
+ * @param userStatus - User status
  */
-export function getVisibleUserStatus(userStatus) {
+export function getVisibleUserStatus(userStatus: UserStatus) {
 	if (!userStatus) {
 		return ''
 	}
@@ -35,11 +36,10 @@ export function getVisibleUserStatus(userStatus) {
 
 /**
  * Convert predefined clearAt config into UserStatus.clearAt value
- *
- * @param {import('./userStatus.types.ts').ClearAtPredefinedConfig|number|null} clearAt - The clear-at config
- * @return {number|null} - The UNIX timestamp in seconds or null if not defined
+ * @param clearAt - Clear-at config
+ * @return UNIX timestamp in seconds or null if not defined
  */
-export function getTimestampForPredefinedClearAt(clearAt) {
+export function getTimestampForPredefinedClearAt(clearAt: ClearAtPredefinedConfig | number | null) {
 	if (!clearAt) {
 		return null
 	}
@@ -68,11 +68,10 @@ export function getTimestampForPredefinedClearAt(clearAt) {
 
 /**
  * Convert clearAt config to human-readable label
- *
- * @param {import('./userStatus.types.ts').ClearAtPredefinedConfig|number|null} clearAt - The clearAt config
- * @return {string} - human-readable string
+ * @param clearAt - clearAt config
+ * @return Human-readable string
  */
-export function clearAtToLabel(clearAt) {
+export function clearAtToLabel(clearAt: ClearAtPredefinedConfig | number | null) {
 	// Clear At is not set
 	if (!clearAt) {
 		return t('talk_desktop', 'Don\'t clear')
@@ -104,11 +103,9 @@ export function clearAtToLabel(clearAt) {
 
 /**
  * Convert a predefined status into a user status
- *
- * @param {import('./userStatus.types.ts').PredefinedUserStatus} predefinedStatus - The predefined status
- * @return {Partial<import('./userStatus.types.ts').UserStatus>} - The user status
+ * @param predefinedStatus - Predefined status
  */
-export function convertPredefinedStatusToUserStatus(predefinedStatus) {
+export function convertPredefinedStatusToUserStatus(predefinedStatus: PredefinedUserStatus): Partial<UserStatus> {
 	return {
 		icon: predefinedStatus.icon,
 		message: predefinedStatus.message,

From 7acda151ada5f80557d3dc594357840b11c3231a Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 17:09:32 +0100
Subject: [PATCH 6/7] refactor(TitleBar): migrate to TS

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/talk/renderer/TitleBar/TitleBar.vue       | 11 ++---
 .../renderer/TitleBar/components/MainMenu.vue |  5 +--
 .../TitleBar/components/ThemeLogo.vue         | 16 +++----
 .../renderer/TitleBar/components/UiMenu.vue   |  5 +--
 .../TitleBar/components/UiMenuItem.vue        | 21 ++++-----
 .../TitleBar/components/UiMenuSeparator.vue   |  5 ++-
 .../renderer/TitleBar/components/UserMenu.vue | 44 ++++++++++---------
 .../{desktop.app.js => desktop.app.ts}        |  0
 src/talk/renderer/talk.main.js                |  2 +-
 9 files changed, 54 insertions(+), 55 deletions(-)
 rename src/talk/renderer/{desktop.app.js => desktop.app.ts} (100%)

diff --git a/src/talk/renderer/TitleBar/TitleBar.vue b/src/talk/renderer/TitleBar/TitleBar.vue
index 2b98122c..315bbef1 100644
--- a/src/talk/renderer/TitleBar/TitleBar.vue
+++ b/src/talk/renderer/TitleBar/TitleBar.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
   -->
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 import MainMenu from './components/MainMenu.vue'
 import UserMenu from './components/UserMenu.vue'
@@ -18,7 +18,8 @@ useAppConfigStore()
 
 const isPreview = false
 
-const user = appData.userMetadata
+// TODO: add a proper type for userMetadata
+const user = appData.userMetadata! as { id: string; 'display-name': string }
 const OS = window.systemInfo
 
 /**
@@ -37,9 +38,9 @@ function logout() {
 
 /**
  * Handle the global escape key to unselect any chat
- * @param {KeyboardEvent} event - Keyboard event
+ * @param event - Keyboard event
  */
-function handleGlobalEscape(event) {
+function handleGlobalEscape(event: KeyboardEvent) {
 	if (event.key === 'Escape' && document.activeElement === document.body) {
 		pushToRoot()
 	}
@@ -129,6 +130,6 @@ onUnmounted(() => {
 	flex: 1 0 auto;
 	height: 100%;
 	/* Allow to drag the window using header */
-	app-region: drag;
+	-webkit-app-region: drag;
 }
 </style>
diff --git a/src/talk/renderer/TitleBar/components/MainMenu.vue b/src/talk/renderer/TitleBar/components/MainMenu.vue
index ad0c418d..9f7730c6 100644
--- a/src/talk/renderer/TitleBar/components/MainMenu.vue
+++ b/src/talk/renderer/TitleBar/components/MainMenu.vue
@@ -3,21 +3,18 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
   -->
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
-
 import IconCog from 'vue-material-design-icons/Cog.vue'
 import IconReload from 'vue-material-design-icons/Reload.vue'
 import IconWeb from 'vue-material-design-icons/Web.vue'
 import IconBug from 'vue-material-design-icons/Bug.vue'
 import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import IconMenu from 'vue-material-design-icons/Menu.vue'
-
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 
diff --git a/src/talk/renderer/TitleBar/components/ThemeLogo.vue b/src/talk/renderer/TitleBar/components/ThemeLogo.vue
index 90efa85e..35cddd22 100644
--- a/src/talk/renderer/TitleBar/components/ThemeLogo.vue
+++ b/src/talk/renderer/TitleBar/components/ThemeLogo.vue
@@ -3,22 +3,22 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
   -->
 
-<script setup>
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 import { appData } from '../../../../app/AppData.js'
 
-const props = defineProps({
-	size: {
-		type: [Number, String],
-		default: 20,
-	},
+const props = withDefaults(defineProps<{
+	size: number | string
+}>(), {
+	size: 20,
 })
 
 const theming = appData.capabilities.theming
 const logoUrl = theming.logo
 const primaryColor = theming.color
 
-const cssVars = computed(() => ({
+const cssVars = computed<CSSProperties>(() => ({
 	'--ThemeLogo-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
 	'--ThemeLogo-background-color': primaryColor,
 }))
@@ -30,7 +30,7 @@ const cssVars = computed(() => ({
 	</span>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .theme-logo {
 	display: flex;
 	align-items: stretch;
diff --git a/src/talk/renderer/TitleBar/components/UiMenu.vue b/src/talk/renderer/TitleBar/components/UiMenu.vue
index 325b7d67..ee55e07e 100644
--- a/src/talk/renderer/TitleBar/components/UiMenu.vue
+++ b/src/talk/renderer/TitleBar/components/UiMenu.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup>
+<script setup lang="ts">
 </script>
 
 <template>
@@ -15,9 +15,6 @@
 </template>
 
 <style scoped>
-.menu {
-}
-
 .menu__inner {
 	display: flex;
 	flex-direction: column;
diff --git a/src/talk/renderer/TitleBar/components/UiMenuItem.vue b/src/talk/renderer/TitleBar/components/UiMenuItem.vue
index acf2e914..d7f4b675 100644
--- a/src/talk/renderer/TitleBar/components/UiMenuItem.vue
+++ b/src/talk/renderer/TitleBar/components/UiMenuItem.vue
@@ -3,21 +3,22 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script>
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+withDefaults(defineProps<{
+	tag: string | Component
+}>(), {
+	tag: 'button',
+})
+</script>
+
+<script lang="ts">
 export default {
 	inheritAttrs: false,
 }
 </script>
 
-<script setup>
-defineProps({
-	tag: {
-		type: [String, Object, Function],
-		default: 'button',
-	},
-})
-</script>
-
 <template>
 	<li class="menu-item">
 		<component :is="tag" class="menu-item__action unstyled-action" v-bind="$attrs">
diff --git a/src/talk/renderer/TitleBar/components/UiMenuSeparator.vue b/src/talk/renderer/TitleBar/components/UiMenuSeparator.vue
index 1458e747..39e2e5aa 100644
--- a/src/talk/renderer/TitleBar/components/UiMenuSeparator.vue
+++ b/src/talk/renderer/TitleBar/components/UiMenuSeparator.vue
@@ -3,13 +3,14 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script setup></script>
+<script setup lang="ts">
+</script>
 
 <template>
 	<li class="menu-item-separator" />
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .menu-item-separator {
 	border-top: 1px solid var(--color-border-dark);
 	margin: 2px 0;
diff --git a/src/talk/renderer/TitleBar/components/UserMenu.vue b/src/talk/renderer/TitleBar/components/UserMenu.vue
index cc501695..9bdbdf7d 100644
--- a/src/talk/renderer/TitleBar/components/UserMenu.vue
+++ b/src/talk/renderer/TitleBar/components/UserMenu.vue
@@ -3,50 +3,47 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
   -->
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
-
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
-
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconEmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import IconPencil from 'vue-material-design-icons/Pencil.vue'
 import IconLogout from 'vue-material-design-icons/Logout.vue'
-
 import ThemeLogo from './ThemeLogo.vue'
 import UiMenu from './UiMenu.vue'
 import UiMenuItem from './UiMenuItem.vue'
 import UiMenuSeparator from './UiMenuSeparator.vue'
 import UserStatusDialog from '../../UserStatus/UserStatusDialog.vue'
 import { useUserStatusStore } from '../../UserStatus/userStatus.store.ts'
-import { userStatusTranslations } from '../../UserStatus/userStatus.utils.ts'
+import { userStatusTranslations, userStatusStatusTypes } from '../../UserStatus/userStatus.utils.ts'
 import { appData } from '../../../../app/AppData.js'
+import type { UserStatusStatusType } from '../../UserStatus/userStatus.types.ts'
 
-const props = defineProps({
-	user: {
-		type: Object,
-		required: true,
-	},
-})
+const props = defineProps<{
+	// TODO: define a proper type for userMetadata
+	user: { id: string; 'display-name': string }
+}>()
 
-const emit = defineEmits(['logout'])
+const emit = defineEmits<{
+	(event: 'logout'): void
+}>()
 
 const userStatusStore = useUserStatusStore()
 const { userStatus } = storeToRefs(userStatusStore)
-const serverUrl = appData.serverUrl
+const serverUrl = appData.serverUrl! as string
 const serverUrlShort = serverUrl.replace(/^https?:\/\//, '')
 const theming = appData.capabilities.theming
 
 const isOpen = ref(false)
-const userMenuContainer = ref(null)
+const userMenuContainer = ref<HTMLElement | null>(null)
 const isUserStatusDialogOpen = ref(false)
 const userStatusSubMenuOpen = ref(false)
 
@@ -59,12 +56,16 @@ watch(isOpen, () => {
 
 const userProfileLink = computed(() => generateUrl('/u/{userid}', { userid: props.user.id }))
 
+// Vue 2 doesn't allow using types in templates
+// TODO: Vue 3: return back to template
+const popoverHideTriggers = (triggers: string[]) => [...triggers, 'click']
+
 /**
  * Handle user status type change
- * @param {string} status - new user status
+ * @param status - new user status
  */
-function handleUserStatusChange(status) {
-	userStatusStore.saveUserStatus({ ...userStatus.value, status })
+function handleUserStatusChange(status: UserStatusStatusType) {
+	userStatusStore.saveUserStatus({ ...userStatus.value!, status })
 	userStatusSubMenuOpen.value = false
 }
 </script>
@@ -74,7 +75,7 @@ function handleUserStatusChange(status) {
 		<NcPopover v-if="userMenuContainer"
 			:shown.sync="isOpen"
 			:container="userMenuContainer"
-			:popper-hide-triggers="triggers => [...triggers, 'click']"
+			:popper-hide-triggers="popoverHideTriggers"
 			:triggers="[]"
 			no-auto-focus>
 			<template #trigger="{ attrs }">
@@ -103,7 +104,7 @@ function handleUserStatusChange(status) {
 							</template>
 							{{ t('talk_desktop', 'Back') }}
 						</UiMenuItem>
-						<UiMenuItem v-for="status in ['online', 'away', 'dnd', 'invisible']"
+						<UiMenuItem v-for="status in userStatusStatusTypes"
 							:key="status"
 							tag="button"
 							@click.native.stop="handleUserStatusChange(status)">
@@ -111,6 +112,7 @@ function handleUserStatusChange(status) {
 								<NcUserStatusIcon :status="status" />
 							</template>
 							{{ userStatusTranslations[status] }}
+							<!-- @vue-expect-error This menu can only be open from a button with v-if="userStatus", but in Vue 2 we cannot add type assertion -->
 							<template v-if="status === userStatus.status" #action-icon>
 								<IconCheck :size="20" />
 							</template>
diff --git a/src/talk/renderer/desktop.app.js b/src/talk/renderer/desktop.app.ts
similarity index 100%
rename from src/talk/renderer/desktop.app.js
rename to src/talk/renderer/desktop.app.ts
diff --git a/src/talk/renderer/talk.main.js b/src/talk/renderer/talk.main.js
index a73e7d14..a5799c21 100644
--- a/src/talk/renderer/talk.main.js
+++ b/src/talk/renderer/talk.main.js
@@ -13,7 +13,7 @@ import { initTalkHashIntegration } from './init.js'
 import { setupWebPage } from '../../shared/setupWebPage.js'
 import { subscribeBroadcast } from '../../shared/broadcast.service.ts'
 import { createViewer } from './Viewer/Viewer.js'
-import { createDesktopApp } from './desktop.app.js'
+import { createDesktopApp } from './desktop.app.ts'
 import { registerTalkDesktopSettingsSection } from './Settings/index.ts'
 import { openConversation } from './utils/talk.service.ts'
 

From 1cfca9600614e49416b9b8aec291338a69f84488 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 Jan 2025 18:26:40 +0100
Subject: [PATCH 7/7] refactor(TitleBar): use useHotKey

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/global.d.ts                         | 15 +++++++++++++++
 src/talk/renderer/TitleBar/TitleBar.vue | 21 +++------------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index d8119957..2c0b2cc6 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -28,6 +28,21 @@ declare module '@nextcloud/vue/dist/Components/*.js' {
 	const component: Component
 	export default component
 }
+declare module '@nextcloud/vue/dist/Composables/useHotKey.js' {
+	export function useHotKey(
+		keysOrFilter: string | string[] | ((event: KeyboardEvent) => boolean) | true,
+		callback: (event: KeyboardEvent) => void,
+		options?: {
+			push?: boolean
+			prevent?: boolean
+			stop?: boolean
+			ctrl?: boolean
+			alt?: boolean
+			shift?: boolean
+			caseSensitive?: boolean
+		}
+	): () => void
+}
 
 // Built-time constants
 declare const IS_DESKTOP: true
diff --git a/src/talk/renderer/TitleBar/TitleBar.vue b/src/talk/renderer/TitleBar/TitleBar.vue
index 315bbef1..ff586137 100644
--- a/src/talk/renderer/TitleBar/TitleBar.vue
+++ b/src/talk/renderer/TitleBar/TitleBar.vue
@@ -4,7 +4,7 @@
   -->
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 import MainMenu from './components/MainMenu.vue'
 import UserMenu from './components/UserMenu.vue'
 import { appData } from '../../../app/AppData.js'
@@ -36,23 +36,8 @@ function logout() {
 	window.TALK_DESKTOP.logout()
 }
 
-/**
- * Handle the global escape key to unselect any chat
- * @param event - Keyboard event
- */
-function handleGlobalEscape(event: KeyboardEvent) {
-	if (event.key === 'Escape' && document.activeElement === document.body) {
-		pushToRoot()
-	}
-}
-
-onMounted(() => {
-	window.addEventListener('keydown', handleGlobalEscape, { capture: true })
-})
-
-onUnmounted(() => {
-	window.removeEventListener('keydown', handleGlobalEscape, { capture: true })
-})
+// Unselect chat by escape key
+useHotKey('Escape', pushToRoot)
 </script>
 
 <template>
