fix(flatpak): add UI for clearing font config cache

src/main.js

@@ -17,7 +17,7 @@ const { triggerDownloadUrl } = require('./app/downloads.ts')
 const { setupReleaseNotificationScheduler } = require('./app/githubReleaseNotification.service.js')
 const { initLaunchAtStartupListener } = require('./app/launchAtStartup.config.ts')
 const { runMigrations } = require('./app/migration.service.ts')
-const { systemInfo, isLinux, isMac, isWindows, isSameExecution } = require('./app/system.utils.ts')
+const { systemInfo, isLinux, isMac, isWindows, isSameExecution, clearFlatpakFontConfigCache } = require('./app/system.utils.ts')
 const { applyTheme } = require('./app/theme.config.ts')
 const { buildTitle } = require('./app/utils.ts')
 const { enableWebRequestInterceptor, disableWebRequestInterceptor } = require('./app/webRequestInterceptor.js')
@@ -132,6 +132,7 @@ ipcMain.handle('app:getDesktopCapturerSources', async () => {
 		thumbnail: source.thumbnail && !source.thumbnail.isEmpty() ? source.thumbnail.toDataURL() : null,
 	}))
 })
+ipcMain.handle('app:cleanFlatpakFontConfigCache', () => clearFlatpakFontConfigCache())
 
 /**
  * Whether the window is being relaunched.

src/preload.js

@@ -80,6 +80,12 @@
 	 * @return {Promise<{ id: string, name: string, icon?: string }[]|null>}
 	 */
 	getDesktopCapturerSources: () => ipcRenderer.invoke('app:getDesktopCapturerSources'),
+	/**
+	 * Clean Flatpak font config cache
+	 *
+	 * @return {Promise<string | undefined>} - Error message if any
+	 */
+	cleanFlatpakFontConfigCache: () => ipcRenderer.invoke('app:cleanFlatpakFontConfigCache'),
 	/**
 	 * Relaunch an entire application
 	 */
@@ -99,7 +105,7 @@
 	 * Set an application config value by key
 	 *
 	 * @param {string} key - Config key
 	 * @param {any} [value] - Config value
 	 * @return {Promise<void>}
 	 */
 	setAppConfig: (key, value) => ipcRenderer.invoke('app:config:set', key, value),
@@ -129,7 +135,7 @@
 	/**
 	 * Invoke app:anything
 	 *
 	 * @param {...any} args - Arguments
 	 */
 	invokeAnything: (...args) => ipcRenderer.invoke('app:anything', ...args),
 	/**

src/talk/renderer/Settings/DesktopSettingsSection.vue

@@ -14,15 +14,19 @@ import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
 import IconThemeLightDark from 'vue-material-design-icons/ThemeLightDark.vue'
 import IconWeatherNight from 'vue-material-design-icons/WeatherNight.vue'
 import IconWeatherSunny from 'vue-material-design-icons/WeatherSunny.vue'
+import DesktopSettingsSectionFlatpakFontCache from './components/DesktopSettingsSectionFlatpakFontCache.vue'
 import DesktopSettingsSectionRelaunchNote from './components/DesktopSettingsSectionRelaunchNote.vue'
 import UiFormBoxAudioOutput from './components/UiFormBoxAudioOutput.vue'
 import UiFormBoxSelectNative from './components/UiFormBoxSelectNative.vue'
 import UiFormGroupZoom from './components/UiFormGroupZoom.vue'
+import { useDevMode } from '../../../shared/useDevMode.ts'
 import { useAppConfigStore } from './appConfig.store.ts'
 import { useAppConfigValue } from './useAppConfigValue.ts'
 
 const isLinux = window.systemInfo.isLinux
+const isFlatpak = window.systemInfo.isFlatpak
 
+const { isDevMode } = useDevMode()
 const { isRelaunchRequired } = storeToRefs(useAppConfigStore())
 
 const launchAtStartup = useAppConfigValue('launchAtStartup')
@@ -91,6 +95,10 @@ const secondarySpeakerDevice = useAppConfigValue('secondarySpeakerDevice')
 				<UiFormBoxAudioOutput v-if="secondarySpeaker" v-model="secondarySpeakerDevice" :label="t('talk_desktop', 'Secondary speaker')" />
 			</NcFormBox>
 		</NcFormGroup>
+
+		<NcFormGroup v-if="isDevMode && isFlatpak" :label="t('talk_desktop', 'Advanced')">
+			<DesktopSettingsSectionFlatpakFontCache />
+		</NcFormGroup>
 	</div>
 </template>
 

src/talk/renderer/Settings/components/DesktopSettingsSectionFlatpakFontCache.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { ref } from 'vue'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormBoxCopyButton from '@nextcloud/vue/components/NcFormBoxCopyButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import IconConsole from 'vue-material-design-icons/Console.vue'
+import { BUILD_CONFIG } from '../../../../shared/build.config.ts'
+
+const isFlatpak = window.systemInfo.isFlatpak
+const linuxAppId = BUILD_CONFIG.linuxAppId
+
+const loadingCleanFlatpakFontConfigCache = ref(false)
+
+/**
+ * Cleans the Flatpak font config cache
+ */
+async function onCleanFlatpakFontConfigCache() {
+	loadingCleanFlatpakFontConfigCache.value = true
+	const error = await window.TALK_DESKTOP.cleanFlatpakFontConfigCache()
+	if (error) {
+		loadingCleanFlatpakFontConfigCache.value = false
+		// Error is not supposed to happen...
+		// Using alert for an unexpected error in an advanced feature for simplicity
+		alert(error)
+		return
+	}
+	window.TALK_DESKTOP.relaunch()
+}
+</script>
+
+<template>
+	<NcFormBox v-if="isFlatpak">
+		<NcFormBoxButton
+			label="Clean Flatpak font config cache and relaunch the app"
+			description="Might help with font or emoji rendering issues"
+			:disabled="loadingCleanFlatpakFontConfigCache"
+			@click="onCleanFlatpakFontConfigCache">
+			<template #icon>
+				<NcLoadingIcon v-if="loadingCleanFlatpakFontConfigCache" :size="20" />
+				<IconConsole v-else :size="20" />
+			</template>
+		</NcFormBoxButton>
+		<NcFormBoxCopyButton
+			label="Copy the command to clean the font config cache manually"
+			:value="`rm -rf ~/.var/app/${linuxAppId}/cache/fontconfig/`" />
+	</NcFormBox>
+</template>