From c39c5d19eb0f5fe635d02548ee4a97d5b5a430a8 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 22 Jan 2026 15:31:09 +0100
Subject: [PATCH] fix(flatpak): add UI for clearing font config cache

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/main.js                                   |  3 +-
 src/preload.js                                |  6 +++
 .../Settings/DesktopSettingsSection.vue       |  8 ++++
 ...DesktopSettingsSectionFlatpakFontCache.vue | 48 +++++++++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/talk/renderer/Settings/components/DesktopSettingsSectionFlatpakFontCache.vue

diff --git a/src/main.js b/src/main.js
index 02f6853c3..4dcddcbeb 100644
--- a/src/main.js
+++ b/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.
diff --git a/src/preload.js b/src/preload.js
index 76c774029..8106ace88 100644
--- a/src/preload.js
+++ b/src/preload.js
@@ -80,6 +80,12 @@ const TALK_DESKTOP = {
 	 * @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
 	 */
diff --git a/src/talk/renderer/Settings/DesktopSettingsSection.vue b/src/talk/renderer/Settings/DesktopSettingsSection.vue
index b8cadac77..72fe80861 100644
--- a/src/talk/renderer/Settings/DesktopSettingsSection.vue
+++ b/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>
 
diff --git a/src/talk/renderer/Settings/components/DesktopSettingsSectionFlatpakFontCache.vue b/src/talk/renderer/Settings/components/DesktopSettingsSectionFlatpakFontCache.vue
new file mode 100644
index 000000000..2ddff5668
--- /dev/null
+++ b/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>