feat(useGetToken): add composable to use in components

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/App.vue

@@ -39,6 +39,7 @@ import SettingsDialog from './components/SettingsDialog/SettingsDialog.vue'
 import ConfirmDialog from './components/UIShared/ConfirmDialog.vue'
 import { useActiveSession } from './composables/useActiveSession.js'
 import { useDocumentTitle } from './composables/useDocumentTitle.ts'
+import { useGetToken } from './composables/useGetToken.ts'
 import { useHashCheck } from './composables/useHashCheck.js'
 import { useIsInCall } from './composables/useIsInCall.js'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
@@ -73,6 +74,7 @@ export default {
 		provide('Talk:isMainApp', true)
 
 		return {
+			token: useGetToken(),
 			isInCall: useIsInCall(),
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
 			isMobile: useIsMobile(),
@@ -135,15 +137,6 @@ export default {
 			return !this.isLeavingAfterSessionIssue && this.isInCall
 		},
 
-		/**
-		 * The current conversation token
-		 *
-		 * @return {string} The token.
-		 */
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		/**
 		 * The current conversation
 		 *

src/FilesSidebarCallViewApp.vue

@@ -16,6 +16,7 @@
 
 <script>
 import LoadingComponent from './components/LoadingComponent.vue'
+import { useGetToken } from './composables/useGetToken.ts'
 import { useHashCheck } from './composables/useHashCheck.js'
 import { useIsInCall } from './composables/useIsInCall.js'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
@@ -41,6 +42,7 @@ export default {
 		return {
 			isInCall: useIsInCall(),
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
+			token: useGetToken(),
 		}
 	},
 
@@ -64,10 +66,6 @@ export default {
 			return this.fileInfo.id
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		fileIdForToken() {
 			return this.$store.getters.getFileIdForToken()
 		},

src/FilesSidebarTabApp.vue

@@ -34,6 +34,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import LoadingComponent from './components/LoadingComponent.vue'
+import { useGetToken } from './composables/useGetToken.ts'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
 import { EventBus } from './services/EventBus.ts'
 import { getFileConversation } from './services/filesIntegrationServices.js'
@@ -64,6 +65,7 @@ export default {
 		return {
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -89,10 +91,6 @@ export default {
 			return this.fileInfo.id
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		fileIdForToken() {
 			return this.$store.getters.getFileIdForToken()
 		},

src/PublicShareAuthRequestPasswordButton.vue

@@ -26,6 +26,7 @@
 import { t } from '@nextcloud/l10n'
 import { Fragment } from 'vue-frag'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import { useGetToken } from './composables/useGetToken.ts'
 import { getPublicShareAuthConversationToken } from './services/publicShareAuthService.js'
 import { checkBrowser } from './utils/browserCheck.ts'
 
@@ -45,6 +46,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			token: useGetToken(),
+		}
+	},
+
 	data() {
 		return {
 			isRequestLoading: false,
@@ -60,10 +67,6 @@ export default {
 			}
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		isRequestInProgress() {
 			return this.isRequestLoading || !!this.token
 		},

src/PublicShareAuthSidebar.vue

@@ -36,6 +36,7 @@ import PollViewer from './components/PollViewer/PollViewer.vue'
 import InternalSignalingHint from './components/RightSidebar/InternalSignalingHint.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 import TransitionWrapper from './components/UIShared/TransitionWrapper.vue'
+import { useGetToken } from './composables/useGetToken.ts'
 import { useHashCheck } from './composables/useHashCheck.js'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
 import { EventBus } from './services/EventBus.ts'
@@ -67,6 +68,7 @@ export default {
 		return {
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -79,10 +81,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},

src/PublicShareSidebar.vue

@@ -50,6 +50,7 @@ import InternalSignalingHint from './components/RightSidebar/InternalSignalingHi
 import CallButton from './components/TopBar/CallButton.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 import TransitionWrapper from './components/UIShared/TransitionWrapper.vue'
+import { useGetToken } from './composables/useGetToken.ts'
 import { useHashCheck } from './composables/useHashCheck.js'
 import { useIsInCall } from './composables/useIsInCall.js'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
@@ -99,6 +100,7 @@ export default {
 			isInCall: useIsInCall(),
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -111,10 +113,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},

src/Recording.vue

@@ -10,6 +10,7 @@
 
 <script>
 import CallView from './components/CallView/CallView.vue'
+import { useGetToken } from './composables/useGetToken.ts'
 import { useSoundsStore } from './stores/sounds.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
@@ -23,20 +24,10 @@ export default {
 	setup() {
 		return {
 			soundsStore: useSoundsStore(),
+			token: useGetToken(),
 		}
 	},
 
-	computed: {
-		/**
-		 * The current conversation token
-		 *
-		 * @return {string} The token.
-		 */
-		token() {
-			return this.$store.getters.getToken()
-		},
-	},
-
 	async beforeMount() {
 		if (this.$route.name === 'recording') {
 			await this.$store.dispatch('updateToken', this.$route.params.token)

src/components/CallView/shared/EmptyCallView.vue

@@ -32,6 +32,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import IconLink from 'vue-material-design-icons/Link.vue'
 import IconPhone from 'vue-material-design-icons/Phone.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
@@ -64,11 +65,13 @@ export default {
 		},
 	},
 
-	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
+	setup() {
+		return {
+			token: useGetToken(),
+		}
+	},
 
+	computed: {
 		isConnecting() {
 			return this.$store.getters.isConnecting(this.token)
 		},

src/components/ChatView.vue

@@ -68,6 +68,7 @@ import MessagesList from './MessagesList/MessagesList.vue'
 import NewMessage from './NewMessage/NewMessage.vue'
 import NewMessageUploadEditor from './NewMessage/NewMessageUploadEditor.vue'
 import TransitionWrapper from './UIShared/TransitionWrapper.vue'
+import { useGetToken } from '../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT } from '../constants.ts'
 import { getTalkConfig } from '../services/CapabilitiesManager.ts'
 import { EventBus } from '../services/EventBus.ts'
@@ -108,6 +109,7 @@ export default {
 	setup(props) {
 		provide('chatView:isSidebar', props.isSidebar)
 		return {
+			token: useGetToken(),
 			chatExtrasStore: useChatExtrasStore(),
 			actorStore: useActorStore(),
 		}
@@ -158,10 +160,6 @@ export default {
 			}
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},

src/components/ConversationSettings/DangerZone.vue

@@ -105,6 +105,7 @@ import { ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 
 const supportsArchive = hasTalkFeature('local', 'archived-conversations-v2')
@@ -144,6 +145,7 @@ export default {
 			isLeaveConversationDialogOpen,
 			isDeleteConversationDialogOpen,
 			isDeleteChatDialogOpen,
+			token: useGetToken(),
 		}
 	},
 
@@ -152,10 +154,6 @@ export default {
 			return '#conversation-settings-container'
 		},
 
-		token() {
-			return this.conversation.token
-		},
-
 		leaveConversationDialogMessage() {
 			return t('spreed', 'Do you really want to leave "{displayName}"?', this.conversation, undefined, {
 				escape: false,
@@ -202,7 +200,7 @@ export default {
 			this.isLeaveConversationDialogOpen = false
 
 			try {
-				await this.$store.dispatch('removeCurrentUserFromConversation', { token: this.token })
+				await this.$store.dispatch('removeCurrentUserFromConversation', { token: this.conversation.token })
 				this.hideConversationSettings()
 			} catch (error) {
 				if (error?.response?.status === 400) {
@@ -219,13 +217,13 @@ export default {
 		async deleteConversation() {
 			this.isDeleteConversationDialogOpen = false
 
-			if (this.token === this.$store.getters.getToken()) {
+			if (this.token === this.conversation.token) {
 				this.$router.push({ name: 'root' })
 				this.$store.dispatch('updateToken', '')
 			}
 
 			try {
-				await this.$store.dispatch('deleteConversationFromServer', { token: this.token })
+				await this.$store.dispatch('deleteConversationFromServer', { token: this.conversation.token })
 				// Close the settings
 				this.hideConversationSettings()
 			} catch (error) {
@@ -239,7 +237,7 @@ export default {
 		 */
 		async clearChatHistory() {
 			try {
-				await this.$store.dispatch('clearConversationHistory', { token: this.token })
+				await this.$store.dispatch('clearConversationHistory', { token: this.conversation.token })
 				this.isDeleteChatDialogOpen = false
 				// Close the settings
 				this.hideConversationSettings()

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -91,6 +91,7 @@ import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import Message from 'vue-material-design-icons/Message.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import BridgePart from './BridgePart.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import {
 	editBridge,
 	getBridge,
@@ -115,6 +116,7 @@ export default {
 	setup() {
 		return {
 			matterbridgeTypes,
+			token: useGetToken(),
 		}
 	},
 
@@ -132,10 +134,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		options() {
 			return Object.entries(this.matterbridgeTypes).map(([type, value]) => ({
 				type,

src/components/ConversationSettings/SipSettings.vue

@@ -33,6 +33,7 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { WEBINAR } from '../../constants.ts'
 
 export default {
@@ -42,6 +43,12 @@ export default {
 		NcCheckboxRadioSwitch,
 	},
 
+	setup() {
+		return {
+			token: useGetToken(),
+		}
+	},
+
 	data() {
 		return {
 			isSipLoading: false,
@@ -49,10 +56,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},

src/components/LeftSidebar/LeftSidebar.vue

@@ -291,6 +291,7 @@ import InvitationHandler from './InvitationHandler.vue'
 import OpenConversationsList from './OpenConversationsList/OpenConversationsList.vue'
 import SearchConversationsResults from './SearchConversationsResults/SearchConversationsResults.vue'
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { ATTENDEE, CONVERSATION } from '../../constants.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
@@ -379,6 +380,7 @@ export default {
 		const isMobile = useIsMobile()
 
 		return {
+			token: useGetToken(),
 			initializeNavigation,
 			resetNavigation,
 			leftSidebar,
@@ -431,10 +433,6 @@ export default {
 			return this.$store.getters.conversationsList
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		emptyContentLabel() {
 			if (this.isFiltered) {
 				return t('spreed', 'No matches found')

src/components/LobbyScreen.vue

@@ -42,6 +42,7 @@ import NcRichText from '@nextcloud/vue/components/NcRichText'
 import RoomService from 'vue-material-design-icons/RoomService.vue'
 import GuestWelcomeWindow from './GuestWelcomeWindow.vue'
 import SetGuestUsername from './SetGuestUsername.vue'
+import { useGetToken } from '../composables/useGetToken.ts'
 import { useActorStore } from '../stores/actor.ts'
 import { futureRelativeTime, ONE_DAY_IN_MS } from '../utils/formattedTime.ts'
 
@@ -59,15 +60,11 @@ export default {
 	setup() {
 		return {
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
 	computed: {
-
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},

src/components/MediaSettings/MediaSettings.vue

@@ -226,6 +226,7 @@ import MediaDevicesSpeakerTest from './MediaDevicesSpeakerTest.vue'
 import MediaSettingsTabs from './MediaSettingsTabs.vue'
 import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
 import { useDevices } from '../../composables/useDevices.js'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useId } from '../../composables/useId.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { AVATAR, CALL, CONFIG, PARTICIPANT, VIRTUAL_BACKGROUND } from '../../constants.ts'
@@ -339,6 +340,7 @@ export default {
 			supportStartWithoutMedia,
 			supportDefaultBlurVirtualBackground,
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -368,7 +370,7 @@ export default {
 
 		guestName() {
 			return this.guestNameStore.getGuestName(
-				this.$store.getters.getToken(),
+				this.token,
 				this.actorStore.actorId,
 			)
 		},
@@ -377,10 +379,6 @@ export default {
 			return this.actorStore.userId
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		showMediaSettings() {
 			return this.settingsStore.getShowMediaSettings(this.token)
 		},

src/components/NewMessage/NewMessageAbsenceInfo.vue

@@ -51,6 +51,7 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { AVATAR } from '../../constants.ts'
 
 export default {
@@ -81,6 +82,7 @@ export default {
 		return {
 			AVATAR,
 			isDarkTheme,
+			token: useGetToken(),
 		}
 	},
 
@@ -93,10 +95,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		userAbsenceCaption() {
 			return t('spreed', '{user} is out of office and might not respond.', { user: this.displayName }, undefined, {
 				escape: false,

src/components/NewMessage/NewMessageAudioRecorder.vue

@@ -51,6 +51,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import Microphone from 'vue-material-design-icons/Microphone.vue'
 import { useAudioEncoder } from '../../composables/useAudioEncoder.ts'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { mediaDevicesManager } from '../../utils/webrtc/index.js'
 
 export default {
@@ -76,6 +77,7 @@ export default {
 		const encoderReady = useAudioEncoder()
 		return {
 			encoderReady,
+			token: useGetToken(),
 		}
 	},
 
@@ -273,8 +275,7 @@ export default {
 		},
 
 		generateFileName() {
-			const token = this.$store.getters.getToken()
-			const conversation = this.$store.getters.conversation(token).name
+			const conversation = this.$store.getters.conversation(this.token).name
 				.replace(/\/\\:%/gi, ' ') // Replace chars that are not allowed on the filesystem
 				.replace(/ +/gi, ' ') // Replace multiple replacement spaces with 1
 			const today = new Date()

src/components/NewMessage/NewMessageChatSummary.vue

@@ -66,6 +66,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import IconMessageBulleted from 'vue-material-design-icons/MessageBulleted.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useStore } from '../../composables/useStore.js'
 import { TASK_PROCESSING } from '../../constants.ts'
 import { deleteTaskById, getTaskById } from '../../services/coreService.ts'
@@ -95,7 +96,8 @@ const cancelling = ref(false)
 const store = useStore()
 const chatExtrasStore = useChatExtrasStore()
 
-const token = computed(() => store.getters.getToken())
+const token = useGetToken()
+
 const chatSummaryMessage = ref('')
 
 watch(chatSummaryMessage, () => {

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -86,6 +86,7 @@ import AudioPlayer from '../MessagesList/MessagesGroup/Message/MessagePart/Audio
 import FilePreview from '../MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 import NewMessage from './NewMessage.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useId } from '../../composables/useId.ts'
 import { MESSAGE } from '../../constants.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
@@ -112,14 +113,11 @@ export default {
 			modalContainerId,
 			isDraggingOver,
 			dialogHeaderId,
+			token: useGetToken(),
 		}
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		supportMediaCaption() {
 			return hasTalkFeature(this.token, 'media-caption')
 		},

src/components/PollViewer/PollEditor.vue

@@ -128,6 +128,7 @@ import IconFileDownload from 'vue-material-design-icons/FileDownload.vue'
 import IconFileEdit from 'vue-material-design-icons/FileEdit.vue'
 import IconFileUpload from 'vue-material-design-icons/FileUpload.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useStore } from '../../composables/useStore.js'
 import { POLL } from '../../constants.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
@@ -152,6 +153,7 @@ const supportPollDrafts = hasTalkFeature(props.token, 'talk-polls-drafts')
 
 const store = useStore()
 const pollsStore = usePollsStore()
+const currentConversationToken = useGetToken()
 
 const isOpenedFromDraft = ref(false)
 const editingDraftId = ref<number | null>(null)
@@ -174,7 +176,7 @@ const createPollLabel = computed(() => {
 		return t('spreed', 'Save')
 	}
 
-	return store.getters.getToken() !== props.token
+	return currentConversationToken.value !== props.token
 		? t('spreed', 'Create poll in {name}', { name: store.getters.conversation(props.token).displayName }, undefined, { escape: false, sanitize: false })
 		: t('spreed', 'Create poll')
 })

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -71,6 +71,7 @@ import MenuDown from 'vue-material-design-icons/MenuDown.vue'
 import MenuRight from 'vue-material-design-icons/MenuRight.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import { EventBus } from '../../../services/EventBus.ts'
 import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.ts'
@@ -122,6 +123,7 @@ export default {
 	setup() {
 		return {
 			breakoutRoomsStore: useBreakoutRoomsStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -151,7 +153,7 @@ export default {
 		},
 
 		showJoinButton() {
-			return this.roomToken !== this.$store.getters.getToken()
+			return this.roomToken !== this.token
 		},
 
 		canFullModerate() {

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -128,6 +128,7 @@ import Play from 'vue-material-design-icons/Play.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 import BreakoutRoomsParticipantsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { useId } from '../../../composables/useId.ts'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
@@ -185,6 +186,7 @@ export default {
 		return {
 			isInCall: useIsInCall(),
 			breakoutRoomsStore: useBreakoutRoomsStore(),
+			token: useGetToken(),
 			showParticipantsEditor,
 			isSendMessageDialogOpened,
 			dialogHeaderId,
@@ -210,7 +212,7 @@ export default {
 		},
 
 		isInBreakoutRoom() {
-			return this.mainToken !== this.$store.getters.getToken()
+			return this.mainToken !== this.token
 		},
 
 		manageBreakoutRoomsTitle() {

src/components/RightSidebar/InternalSignalingHint.vue

@@ -8,6 +8,7 @@ import { t } from '@nextcloud/l10n'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconNetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { useStore } from '../../composables/useStore.js'
 import { CONVERSATION } from '../../constants.ts'
@@ -15,9 +16,10 @@ import { EventBus } from '../../services/EventBus.ts'
 
 const store = useStore()
 const isInCall = useIsInCall()
+const token = useGetToken()
 
 const isGroupConversation = computed(() => {
-	return [CONVERSATION.TYPE.GROUP, CONVERSATION.TYPE.PUBLIC].includes(store.getters.conversation(store.getters.getToken())?.type)
+	return [CONVERSATION.TYPE.GROUP, CONVERSATION.TYPE.PUBLIC].includes(store.getters.conversation(token.value)?.type)
 })
 const show = ref(false)
 

src/components/RightSidebar/Participants/Participant.vue

@@ -343,6 +343,7 @@ import VideoIcon from 'vue-material-design-icons/Video.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import DialpadPanel from '../../UIShared/DialpadPanel.vue'
 import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { ATTENDEE, CONVERSATION, PARTICIPANT, WEBINAR } from '../../../constants.ts'
 import {
@@ -419,6 +420,7 @@ export default {
 		return {
 			isInCall: useIsInCall(),
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -603,10 +605,6 @@ export default {
 			return this.canBeModerated && this.participant.attendeePin ? readableNumber(this.participant.attendeePin) : ''
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		currentParticipant() {
 			return this.$store.getters.conversation(this.token) || {
 				sessionId: '0',

src/components/RightSidebar/Participants/ParticipantsList.vue

@@ -22,6 +22,7 @@ import { inject } from 'vue'
 import SelectableParticipant from '../../BreakoutRoomsEditor/SelectableParticipant.vue'
 import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 import Participant from './Participant.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 
 export default {
 	name: 'ParticipantsList',
@@ -61,6 +62,7 @@ export default {
 
 		return {
 			selectedParticipants,
+			token: useGetToken(),
 		}
 	},
 
@@ -69,10 +71,6 @@ export default {
 			return this.isSearchResult ? 'SelectableParticipant' : 'Participant'
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		showUserStatus() {
 			return this.items.length < 100
 		},

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -86,6 +86,7 @@ import ParticipantsListVirtual from './ParticipantsListVirtual.vue'
 import ParticipantsSearchResults from './ParticipantsSearchResults.vue'
 import { useArrowNavigation } from '../../../composables/useArrowNavigation.js'
 import { useGetParticipants } from '../../../composables/useGetParticipants.js'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { useId } from '../../../composables/useId.ts'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { useSortParticipants } from '../../../composables/useSortParticipants.js'
@@ -157,6 +158,7 @@ export default {
 			cancelableGetParticipants,
 			sidebarStore: useSidebarStore(),
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -209,10 +211,6 @@ export default {
 			return !!this.token && this.show
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},

src/components/RightSidebar/RightSidebar.vue

@@ -140,6 +140,7 @@ import RightSidebarContent from './RightSidebarContent.vue'
 import SearchMessagesTab from './SearchMessages/SearchMessagesTab.vue'
 import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
 import SipSettings from './SipSettings.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT, WEBINAR } from '../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { useActorStore } from '../../stores/actor.ts'
@@ -236,6 +237,7 @@ export default {
 			sidebarContent,
 			sidebarStore: useSidebarStore(),
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -261,10 +263,6 @@ export default {
 			return this.isSidebarAvailable && this.show
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},

src/components/RightSidebar/RightSidebarContent.vue

@@ -27,6 +27,7 @@ import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 import IconOfficeBuilding from 'vue-material-design-icons/OfficeBuilding.vue'
 import CalendarEventSmall from '../UIShared/CalendarEventSmall.vue'
 import LocalTime from '../UIShared/LocalTime.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useStore } from '../../composables/useStore.js'
 import { CONVERSATION } from '../../constants.ts'
 import { getConversationAvatarOcsUrl } from '../../services/avatarService.ts'
@@ -61,7 +62,7 @@ const isDarkTheme = useIsDarkTheme()
 const profileLoading = ref(false)
 const profileImageFailed = ref(false)
 
-const token = computed(() => store.getters.getToken())
+const token = useGetToken()
 
 const conversation = computed<Conversation>(() => {
 	return store.getters.conversation(token.value) ?? store.getters.dummyConversation

src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue

@@ -31,6 +31,7 @@ import SearchBox from '../../UIShared/SearchBox.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 import SearchMessageItem from './SearchMessageItem.vue'
 import { useArrowNavigation } from '../../../composables/useArrowNavigation.js'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { useStore } from '../../../composables/useStore.js'
 import { ATTENDEE } from '../../../constants.ts'
@@ -74,7 +75,7 @@ const isSearchExhausted = ref(false)
 const store = useStore()
 const isInCall = useIsInCall()
 
-const token = computed(() => store.getters.getToken())
+const token = useGetToken()
 const participantsInitialised = computed(() => store.getters.participantsInitialised(token.value))
 const participants = computed<UserFilterObject>(() => {
 	return store.getters.participantsList(token.value)

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -87,6 +87,7 @@ import IconPoll from 'vue-material-design-icons/Poll.vue'
 import LoadingComponent from '../../LoadingComponent.vue'
 import SharedItems from './SharedItems.vue'
 import SharedItemsBrowser from './SharedItemsBrowser.vue'
+import { useGetToken } from '../../../composables/useGetToken.ts'
 import { CONVERSATION } from '../../../constants.ts'
 import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../../services/EventBus.ts'
@@ -134,6 +135,7 @@ export default {
 			sharedItemTitle,
 			sharedItemsOrder,
 			sharedItemsWithPreviewLimit,
+			token: useGetToken(),
 		}
 	},
 
@@ -151,10 +153,6 @@ export default {
 			return this.actorStore.userId
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token)
 		},

src/components/SetGuestUsername.vue

@@ -46,6 +46,7 @@ import escapeHtml from 'escape-html'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import { useGetToken } from '../composables/useGetToken.ts'
 import { useActorStore } from '../stores/actor.ts'
 import { useGuestNameStore } from '../stores/guestName.js'
 
@@ -63,6 +64,7 @@ export default {
 		return {
 			guestNameStore,
 			actorStore: useActorStore(),
+			token: useGetToken(),
 		}
 	},
 
@@ -88,10 +90,6 @@ export default {
 		actorId() {
 			return this.actorStore.actorId
 		},
-
-		token() {
-			return this.$store.getters.getToken()
-		},
 	},
 
 	watch: {

src/components/TopBar/CallButton.vue

@@ -101,6 +101,7 @@ import IconPhoneDial from 'vue-material-design-icons/PhoneDial.vue'
 import IconPhoneHangup from 'vue-material-design-icons/PhoneHangup.vue'
 import IconPhoneOff from 'vue-material-design-icons/PhoneOff.vue'
 import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { ATTENDEE, CALL, CONVERSATION, PARTICIPANT } from '../../constants.ts'
 import { callSIPDialOut } from '../../services/callsService.js'
@@ -191,6 +192,7 @@ export default {
 	setup() {
 		return {
 			actorStore: useActorStore(),
+			token: useGetToken(),
 			isInCall: useIsInCall(),
 			breakoutRoomsStore: useBreakoutRoomsStore(),
 			callViewStore: useCallViewStore(),
@@ -209,10 +211,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		isNextcloudTalkHashDirty() {
 			return this.talkHashStore.isNextcloudTalkHashDirty
 				|| this.talkHashStore.isNextcloudTalkProxyHashDirty[this.token]

src/components/TopBar/CallTime.vue

@@ -67,6 +67,7 @@ import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconRecordCircle from 'vue-material-design-icons/RecordCircle.vue'
 import IconStop from 'vue-material-design-icons/Stop.vue'
 import { useDocumentVisibility } from '../../composables/useDocumentVisibility.ts'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { CALL } from '../../constants.ts'
 import { formattedTime } from '../../utils/formattedTime.ts'
 
@@ -96,6 +97,7 @@ export default {
 	setup() {
 		return {
 			isDocumentVisible: useDocumentVisibility(),
+			token: useGetToken(),
 		}
 	},
 
@@ -118,10 +120,6 @@ export default {
 			return new Date(this.start * 1000)
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},

src/components/TopBar/TopBar.vue

@@ -130,6 +130,7 @@ import TasksCounter from './TasksCounter.vue'
 import TopBarMediaControls from './TopBarMediaControls.vue'
 import TopBarMenu from './TopBarMenu.vue'
 import { useGetParticipants } from '../../composables/useGetParticipants.js'
+import { useGetToken } from '../../composables/useGetToken.ts'
 import { AVATAR, CONVERSATION } from '../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { useActorStore } from '../../stores/actor.ts'
@@ -190,6 +191,7 @@ export default {
 			sidebarStore: useSidebarStore(),
 			actorStore: useActorStore(),
 			CONVERSATION,
+			token: useGetToken(),
 		}
 	},
 
@@ -215,10 +217,6 @@ export default {
 			return this.$store.getters.isModeratorOrUser
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},

src/composables/useActiveSession.js

@@ -8,6 +8,7 @@ import { CONFIG, SESSION } from '../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../services/CapabilitiesManager.ts'
 import { setSessionState } from '../services/participantsService.js'
 import { useDocumentVisibility } from './useDocumentVisibility.ts'
+import { useGetToken } from './useGetToken.ts'
 import { useIsInCall } from './useIsInCall.js'
 import { useStore } from './useStore.js'
 
@@ -25,7 +26,7 @@ const experimentalRecoverSession = (getTalkConfig('local', 'experiments', 'enabl
  */
 export function useActiveSession() {
 	const store = useStore()
-	const token = computed(() => store.getters.getToken())
+	const token = useGetToken()
 	// FIXME has no API support on federated conversations
 	const supportSessionState = computed(() => hasTalkFeature(token.value, 'session-state'))
 

src/composables/useGetParticipants.js

@@ -9,6 +9,7 @@ import { getTalkConfig } from '../services/CapabilitiesManager.ts'
 import { EventBus } from '../services/EventBus.ts'
 import { useSessionStore } from '../stores/session.ts'
 import { useDocumentVisibility } from './useDocumentVisibility.ts'
+import { useGetToken } from './useGetToken.ts'
 import { useIsInCall } from './useIsInCall.js'
 import { useStore } from './useStore.js'
 
@@ -22,7 +23,7 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) {
 	// Encapsulation
 	const sessionStore = useSessionStore()
 	const store = useStore()
-	const token = computed(() => store.getters.getToken())
+	const token = useGetToken()
 	const conversation = computed(() => store.getters.conversation(token.value))
 	const isInCall = useIsInCall()
 	const isDocumentVisible = useDocumentVisibility()

src/composables/useGetToken.ts

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createSharedComposable } from '@vueuse/core'
+import { computed } from 'vue'
+import { useStore } from './useStore.js'
+
+/**
+ * FIXME: if router is available (main app), rely on it.
+ * otherwise mock route object and expose controls
+ *
+ * TODO: move tokenStore.updateToken from router change to here
+ *
+ * const route = useRouter() ? useRoute() : undefined
+ * return computed<string>(() => route?.params?.token ?? tokenStore.token)
+ */
+
+/**
+ * Shared composable to get token of current conversation
+ */
+export const useGetToken = createSharedComposable(function() {
+	// FIXME: Fallback to tokenStore for now, to be removed
+	const store = useStore()
+
+	return computed<string>(() => store.getters.getToken())
+})

src/composables/useIsInCall.js

@@ -9,6 +9,7 @@ import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
 import { EventBus } from '../services/EventBus.ts'
 import SessionStorage from '../services/SessionStorage.js'
 import { useCallViewStore } from '../stores/callView.ts'
+import { useGetToken } from './useGetToken.ts'
 import { useStore } from './useStore.js'
 
 /**
@@ -19,6 +20,7 @@ import { useStore } from './useStore.js'
 function useIsInCallComposable() {
 	const store = useStore()
 	const callViewStore = useCallViewStore()
+	const token = useGetToken()
 
 	const sessionStorageJoinedConversation = ref(null)
 
@@ -39,7 +41,7 @@ function useIsInCallComposable() {
 		if (callViewStore.forceCallView) {
 			return true
 		}
-		return sessionStorageJoinedConversation.value === store.getters.getToken() && store.getters.isInCall(store.getters.getToken())
+		return sessionStorageJoinedConversation.value === token.value && store.getters.isInCall(token.value)
 	})
 }
 

src/composables/useSortParticipants.js

@@ -7,6 +7,7 @@
 import { computed } from 'vue'
 import { ATTENDEE, PARTICIPANT } from '../constants.ts'
 import { isDoNotDisturb } from '../utils/userStatus.ts'
+import { useGetToken } from './useGetToken.ts'
 import { useStore } from './useStore.js'
 
 const MODERATOR_TYPES = [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR]
@@ -16,9 +17,10 @@ const MODERATOR_TYPES = [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PAR
  */
 export function useSortParticipants() {
 	const store = useStore()
+	const token = useGetToken()
 
 	const selfIsModerator = computed(() => {
-		const participantType = store.getters.conversation(store.getters.getToken())?.participantType
+		const participantType = store.getters.conversation(token.value)?.participantType
 		return MODERATOR_TYPES.includes(participantType)
 	})
 

src/views/FilesSidebarChatView.vue

@@ -24,6 +24,7 @@ import PollManager from '../components/PollViewer/PollManager.vue'
 import PollViewer from '../components/PollViewer/PollViewer.vue'
 import InternalSignalingHint from '../components/RightSidebar/InternalSignalingHint.vue'
 import CallButton from '../components/TopBar/CallButton.vue'
+import { useGetToken } from '../composables/useGetToken.ts'
 import { useIsInCall } from '../composables/useIsInCall.js'
 
 export default {
@@ -43,6 +44,7 @@ export default {
 	setup() {
 		return {
 			isInCall: useIsInCall(),
+			token: useGetToken(),
 		}
 	},
 
@@ -53,10 +55,6 @@ export default {
 	},
 
 	computed: {
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		connectionFailed() {
 			return this.$store.getters.connectionFailed(this.token)
 		},