refactor(theme): improve robustness and code quality

Author: antonreshetov

src/main/ipc/handlers/theme.ts

@@ -301,19 +301,21 @@ async function openThemesDir(): Promise<void> {
 
 function resolveThemeTemplatePath(): string {
   const themesDir = ensureThemesDir()
-  let index = 0
+  const maxAttempts = 1000
 
-  while (true) {
+  for (let index = 0; index < maxAttempts; index++) {
     const suffix = index === 0 ? '' : `-${index}`
     const fileName = `${THEME_TEMPLATE_BASE_NAME}${suffix}${THEME_FILE_EXT}`
     const filePath = path.join(themesDir, fileName)
 
     if (!existsSync(filePath)) {
       return filePath
     }
-
-    index += 1
   }
+
+  throw new Error(
+    `Could not find available theme template name after ${maxAttempts} attempts`,
+  )
 }
 
 function createThemeTemplate(): string {

src/renderer/components/editor/Editor.vue

@@ -41,7 +41,7 @@ const {
   isFocusedSearch,
   isShowJsonVisualizer,
 } = useApp()
-const { getEditorThemeName } = useTheme()
+const { editorThemeName } = useTheme()
 
 const { addToUpdateContentQueue } = useSnippetUpdate()
 
@@ -125,7 +125,7 @@ async function init() {
   editor = CodeMirror(el, {
     value: selectedSnippetContent.value?.value || ' ',
     mode: selectedSnippetContent.value?.language || 'plain_text',
-    theme: getEditorThemeName(),
+    theme: editorThemeName.value,
     lineWrapping: settings.wrap,
     lineNumbers: true,
     tabSize: settings.tabSize,
@@ -239,12 +239,9 @@ async function init() {
     })
   })
 
-  watch(
-    () => getEditorThemeName(),
-    (themeName) => {
-      editor?.setOption('theme', themeName)
-    },
-  )
+  watch(editorThemeName, (themeName) => {
+    editor?.setOption('theme', themeName)
+  })
 
   watch(
     () => settings.fontSize,

src/renderer/components/editor/markdown/Markdown.vue

@@ -16,7 +16,7 @@ import 'codemirror/theme/oceanic-next.css'
 const isDev = import.meta.env.DEV
 
 const { selectedSnippetContent } = useSnippets()
-const { isDark, getEditorThemeName } = useTheme()
+const { isDark, editorThemeName } = useTheme()
 const { scaleToShow, onZoom } = useMarkdown()
 
 const route = useRoute()
@@ -107,7 +107,7 @@ function renderCodeBlockEditors() {
       const editor = CodeMirror(container as HTMLElement, {
         value: blockData.value,
         mode: blockData.language,
-        theme: getEditorThemeName(),
+        theme: editorThemeName.value,
         readOnly: true,
         lineNumbers: false,
         lineWrapping: true,
@@ -156,14 +156,11 @@ watch(renderedContent, () => {
   })
 })
 
-watch(
-  () => getEditorThemeName(),
-  (theme) => {
-    codeEditors.value.forEach((editor) => {
-      editor.setOption('theme', theme)
-    })
-  },
-)
+watch(editorThemeName, (theme) => {
+  codeEditors.value.forEach((editor) => {
+    editor.setOption('theme', theme)
+  })
+})
 
 watch(isDark, () => {
   renderMermaidBlocks()

src/renderer/composables/useTheme.ts

@@ -237,7 +237,7 @@ async function processThemeReloadQueue(): Promise<void> {
   }
 }
 
-function getEditorThemeName(): string {
+const editorThemeName = computed(() => {
   const baseTheme
     = resolvedThemeType.value === 'dark' ? DARK_EDITOR_THEME : LIGHT_EDITOR_THEME
 
@@ -250,23 +250,11 @@ function getEditorThemeName(): string {
   }
 
   return baseTheme
-}
+})
 
 async function initTheme(): Promise<void> {
   await loadCustomThemes()
-
-  const selectedTheme = currentThemeId.value
-
-  if (isBuiltInTheme(selectedTheme)) {
-    applyBuiltInTheme(selectedTheme)
-    return
-  }
-
-  const isApplied = await applyCustomTheme(selectedTheme)
-
-  if (!isApplied) {
-    fallbackToAuto()
-  }
+  await setTheme(currentThemeId.value)
 }
 
 function onThemeChanged() {
@@ -297,6 +285,6 @@ export function useTheme() {
     isDark,
     setTheme,
     loadCustomThemes,
-    getEditorThemeName,
+    editorThemeName,
   }
 }