refactor: add AppWindow wrapper component

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

Author: ShGKme

src/authentication/renderer/AuthenticationApp.vue

@@ -10,6 +10,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import AppWindow from '../../shared/components/AppWindow.vue'
 import { appData } from '../../app/AppData.js'
 import { refetchAppData } from '../../app/appData.service.js'
 import { MIN_REQUIRED_NEXTCLOUD_VERSION, MIN_REQUIRED_TALK_VERSION } from '../../constants.js'
@@ -157,7 +158,7 @@ async function login() {
 </script>
 
 <template>
-	<div class="wrapper">
+	<AppWindow class="wrapper">
 		<div class="spacer">
 			<div class="logo" />
 		</div>
@@ -209,12 +210,11 @@ async function login() {
 				{{ BUILD_CONFIG.applicationName }} {{ version }}
 			</footer>
 		</div>
-	</div>
+	</AppWindow>
 </template>
 
 <style scoped>
 .wrapper {
-	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	align-items: center;

src/callbox/renderer/CallboxApp.vue

@@ -11,6 +11,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconPhoneHangupOutline from 'vue-material-design-icons/PhoneHangupOutline.vue'
 import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
+import AppWindow from '../../shared/components/AppWindow.vue'
 import { postBroadcast } from '../../shared/broadcast.service.ts'
 import { waitCurrentUserHasJoinedCall } from './callbox.service.ts'
 import { playRingtone } from './callbox.utils.ts'
@@ -62,7 +63,7 @@ function dismiss() {
 </script>
 
 <template>
-	<div class="callbox">
+	<AppWindow class="callbox">
 		<div class="callbox__info">
 			<NcAvatar
 				class="callbox__avatar"
@@ -110,15 +111,9 @@ function dismiss() {
 				{{ t('talk_desktop', 'Join call') }}
 			</NcButton>
 		</div>
-	</div>
+	</AppWindow>
 </template>
 
-<style>
-* {
-	box-sizing: border-box;
-}
-</style>
-
 <style scoped>
 .callbox {
 	--height: calc(var(--default-clickable-area) * 2 + var(--default-grid-baseline) * 2 * 3);
@@ -127,7 +122,6 @@ function dismiss() {
 	flex-direction: column;
 	gap: var(--gap);
 	padding: var(--gap);
-	height: 100vh;
 	user-select: none;
 	backdrop-filter: blur(12px);
 	background: rgba(0, 0, 0, .2);

src/certificate/renderer/CertificateApp.vue

@@ -13,6 +13,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconAlert from 'vue-material-design-icons/Alert.vue'
 import IconShieldOffOutline from 'vue-material-design-icons/ShieldOffOutline.vue'
+import AppWindow from '../../shared/components/AppWindow.vue'
 import CertificateInfo from './components/CertificateInfo.vue'
 
 useHotKey('Escape', () => window.close())
@@ -29,7 +30,7 @@ const isAdvanced = ref(false)
 </script>
 
 <template>
-	<div class="certificate">
+	<AppWindow class="certificate">
 		<h2 class="certificate__heading">
 			{{ t('talk_desktop', 'Warning: potential security risk') }}
 		</h2>
@@ -85,22 +86,15 @@ const isAdvanced = ref(false)
 				{{ t('talk_desktop', 'Cancel') }}
 			</NcButton>
 		</div>
-	</div>
+	</AppWindow>
 </template>
 
-<style>
-* {
-	box-sizing: border-box;
-}
-</style>
-
 <style scoped>
 .certificate {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
 	gap: calc(4 * var(--default-grid-baseline));
-	height: 100vh;
 	padding: calc(4 * var(--default-grid-baseline));
 	background: var(--color-main-background);
 }

src/help/renderer/HelpApp.vue

@@ -11,6 +11,7 @@ import { ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcRichText from '@nextcloud/vue/components/NcRichText'
 import IconWindowClose from 'vue-material-design-icons/WindowClose.vue'
+import AppWindow from '../../shared/components/AppWindow.vue'
 import ButtonCopy from './ButtonCopy.vue'
 import TalkLogo from '../../../img/talk-icon-rounded.svg'
 import { BUILD_CONFIG } from '../../shared/build.config.ts'
@@ -40,7 +41,7 @@ function close() {
 </script>
 
 <template>
-	<div class="help">
+	<AppWindow class="help">
 		<div class="help__title-bar" :class="{ 'help__title-bar--mac': isMac }">
 			<NcButton
 				:aria-label="t('talk_desktop', 'Close')"
@@ -90,15 +91,9 @@ function close() {
 				</div>
 			</div>
 		</div>
-	</div>
+	</AppWindow>
 </template>
 
-<style>
-* {
-	box-sizing: border-box;
-}
-</style>
-
 <style scoped>
 .no-drag {
 	app-region: no-drag;
@@ -107,7 +102,6 @@ function close() {
 .help {
 	--spacing-4: calc(4 * var(--default-grid-baseline));
 	app-region: drag;
-	height: 100vh;
 	padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;
 	display: flex;
 	flex-direction: column;

src/help/renderer/help.styles.css

@@ -3,10 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-* {
-	box-sizing: border-box;
-}
-
 body {
 	background: var(--color-background-dark) !important;
 }

src/shared/components/AppWindow.vue

@@ -0,0 +1,22 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<template>
+	<div class="window">
+		<slot />
+	</div>
+</template>
+
+<style>
+* {
+	box-sizing: border-box;
+}
+</style>
+
+<style scoped>
+.window {
+	height: 100vh;
+}
+</style>

src/talk/renderer/TalkDesktop.vue

@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { provide, ref } from 'vue'
+import AppWindow from '../../shared/components/AppWindow.vue'
 import TalkWrapper from './TalkWrapper/TalkWrapper.vue'
 import TitleBar from './TitleBar/TitleBar.vue'
 import { useNotificationsStore } from './notifications/notifications.store.js'
@@ -19,7 +20,9 @@ window.OCA.Viewer = createViewer()
 </script>
 
 <template>
-	<div id="skip-actions" />
-	<TitleBar id="header" />
-	<TalkWrapper @ready="isTalkInitialized = true" />
+	<AppWindow>
+		<div id="skip-actions" />
+		<TitleBar id="header" />
+		<TalkWrapper @ready="isTalkInitialized = true" />
+	</AppWindow>
 </template>

src/upgrade/renderer/UpgradeApp.vue

@@ -9,14 +9,15 @@ import { generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconCloudDownloadOutline from 'vue-material-design-icons/CloudDownloadOutline.vue'
 import IconWeb from 'vue-material-design-icons/Web.vue'
+import AppWindow from '../../shared/components/AppWindow.vue'
 
 const packageInfo = window.TALK_DESKTOP.packageInfo
 
 const browserLink = generateUrl('/apps/spreed')
 </script>
 
 <template>
-	<div class="upgrade">
+	<AppWindow class="upgrade">
 		<div class="upgrade__content">
 			<h2 class="upgrade__heading">
 				{{ t('talk_desktop', 'Upgrade required') }}
@@ -47,16 +48,9 @@ const browserLink = generateUrl('/apps/spreed')
 				{{ t('talk_desktop', 'Continue in web browser') }} ↗
 			</NcButton>
 		</div>
-	</div>
+	</AppWindow>
 </template>
 
-<style>
-* {
-	box-sizing: border-box;
-	user-select: none;
-}
-</style>
-
 <style scoped>
 .upgrade {
 	--upgrade-spacing: calc(2 * var(--default-grid-baseline));
@@ -65,9 +59,9 @@ const browserLink = generateUrl('/apps/spreed')
 	align-items: stretch;
 	text-align: center;
 	gap: var(--upgrade-spacing);
-	height: 100vh;
 	background: var(--color-main-background);
 	padding: var(--upgrade-spacing);
+	user-select: none;
 }
 
 .upgrade__content {