pack: prettier now use space instead of tab

src/main/MainRunner.ts

@@ -3,91 +3,91 @@ import Constants from './utils/Constants'
 import * as electronRemote from '@electron/remote/main'
 
 const exitApp = (mainWindow: BrowserWindow): void => {
-	if (mainWindow && !mainWindow.isDestroyed()) {
-		mainWindow.hide()
-	}
-	mainWindow.destroy()
-	app.exit()
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.hide()
+  }
+  mainWindow.destroy()
+  app.exit()
 }
 
 export const createMainWindow = async (mainWindow: BrowserWindow): Promise<BrowserWindow> => {
-	mainWindow = new BrowserWindow({
-		title: Constants.APP_NAME,
-		show: false,
-		width: Constants.IS_DEV_ENV ? 1500 : 1200,
-		height: 650,
-		useContentSize: true,
-		webPreferences: Constants.DEFAULT_WEB_PREFERENCES
-	})
+  mainWindow = new BrowserWindow({
+    title: Constants.APP_NAME,
+    show: false,
+    width: Constants.IS_DEV_ENV ? 1500 : 1200,
+    height: 650,
+    useContentSize: true,
+    webPreferences: Constants.DEFAULT_WEB_PREFERENCES
+  })
 
-	mainWindow.setMenu(null)
+  mainWindow.setMenu(null)
 
-	mainWindow.on('close', (event: Event) => {
-		event.preventDefault()
-		exitApp(mainWindow)
-	})
+  mainWindow.on('close', (event: Event) => {
+    event.preventDefault()
+    exitApp(mainWindow)
+  })
 
-	mainWindow.webContents.on('did-frame-finish-load', () => {
-		if (Constants.IS_DEV_ENV) {
-			mainWindow.webContents.openDevTools()
-		}
-	})
+  mainWindow.webContents.on('did-frame-finish-load', () => {
+    if (Constants.IS_DEV_ENV) {
+      mainWindow.webContents.openDevTools()
+    }
+  })
 
-	mainWindow.once('ready-to-show', () => {
-		mainWindow.setAlwaysOnTop(true)
-		mainWindow.show()
-		mainWindow.focus()
-		mainWindow.setAlwaysOnTop(false)
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.setAlwaysOnTop(true)
+    mainWindow.show()
+    mainWindow.focus()
+    mainWindow.setAlwaysOnTop(false)
 
-		electronRemote.initialize()
-	})
+    electronRemote.initialize()
+  })
 
-	if (Constants.IS_DEV_ENV) {
-		await mainWindow.loadURL(Constants.APP_INDEX_URL_DEV)
-	} else {
-		await mainWindow.loadFile(Constants.APP_INDEX_URL_PROD)
-	}
+  if (Constants.IS_DEV_ENV) {
+    await mainWindow.loadURL(Constants.APP_INDEX_URL_DEV)
+  } else {
+    await mainWindow.loadFile(Constants.APP_INDEX_URL_PROD)
+  }
 
-	return mainWindow
+  return mainWindow
 }
 
 export const createErrorWindow = async (
-	errorWindow: BrowserWindow,
-	mainWindow: BrowserWindow,
-	details?: RenderProcessGoneDetails
+  errorWindow: BrowserWindow,
+  mainWindow: BrowserWindow,
+  details?: RenderProcessGoneDetails
 ): Promise<BrowserWindow> => {
-	if (!Constants.IS_DEV_ENV) {
-		mainWindow?.hide()
-	}
+  if (!Constants.IS_DEV_ENV) {
+    mainWindow?.hide()
+  }
 
-	errorWindow = new BrowserWindow({
-		title: Constants.APP_NAME,
-		show: false,
-		resizable: Constants.IS_DEV_ENV,
-		webPreferences: Constants.DEFAULT_WEB_PREFERENCES
-	})
+  errorWindow = new BrowserWindow({
+    title: Constants.APP_NAME,
+    show: false,
+    resizable: Constants.IS_DEV_ENV,
+    webPreferences: Constants.DEFAULT_WEB_PREFERENCES
+  })
 
-	errorWindow.setMenu(null)
+  errorWindow.setMenu(null)
 
-	if (Constants.IS_DEV_ENV) {
-		await errorWindow.loadURL(`${Constants.APP_INDEX_URL_DEV}#/error`)
-	} else {
-		await errorWindow.loadFile(Constants.APP_INDEX_URL_PROD, { hash: 'error' })
-	}
+  if (Constants.IS_DEV_ENV) {
+    await errorWindow.loadURL(`${Constants.APP_INDEX_URL_DEV}#/error`)
+  } else {
+    await errorWindow.loadFile(Constants.APP_INDEX_URL_PROD, { hash: 'error' })
+  }
 
-	errorWindow.on('ready-to-show', () => {
-		if (!Constants.IS_DEV_ENV && mainWindow && !mainWindow.isDestroyed()) {
-			mainWindow.destroy()
-		}
-		errorWindow.show()
-		errorWindow.focus()
-	})
+  errorWindow.on('ready-to-show', () => {
+    if (!Constants.IS_DEV_ENV && mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.destroy()
+    }
+    errorWindow.show()
+    errorWindow.focus()
+  })
 
-	errorWindow.webContents.on('did-frame-finish-load', () => {
-		if (Constants.IS_DEV_ENV) {
-			errorWindow.webContents.openDevTools()
-		}
-	})
+  errorWindow.webContents.on('did-frame-finish-load', () => {
+    if (Constants.IS_DEV_ENV) {
+      errorWindow.webContents.openDevTools()
+    }
+  })
 
-	return errorWindow
+  return errorWindow
 }

src/main/index.ts

@@ -7,33 +7,33 @@ let mainWindow
 let errorWindow
 
 app.on('ready', () => {
-	macOSDisableDefaultMenuItem()
+  macOSDisableDefaultMenuItem()
 
-	mainWindow = createMainWindow(mainWindow)
+  mainWindow = createMainWindow(mainWindow)
 })
 
 app.on('activate', () => {
-	if (!mainWindow) {
-		mainWindow = createMainWindow(mainWindow)
-	}
+  if (!mainWindow) {
+    mainWindow = createMainWindow(mainWindow)
+  }
 })
 
 app.on('window-all-closed', () => {
-	mainWindow = null
-	errorWindow = null
+  mainWindow = null
+  errorWindow = null
 
-	if (!Constants.IS_MAC) {
-		app.quit()
-	}
+  if (!Constants.IS_MAC) {
+    app.quit()
+  }
 })
 
 app.on(
-	'render-process-gone',
-	(event: Event, webContents: WebContents, details: RenderProcessGoneDetails) => {
-		errorWindow = createErrorWindow(errorWindow, mainWindow, details)
-	}
+  'render-process-gone',
+  (event: Event, webContents: WebContents, details: RenderProcessGoneDetails) => {
+    errorWindow = createErrorWindow(errorWindow, mainWindow, details)
+  }
 )
 
 process.on('uncaughtException', () => {
-	errorWindow = createErrorWindow(errorWindow, mainWindow)
+  errorWindow = createErrorWindow(errorWindow, mainWindow)
 })

src/main/utils/Constants.ts

@@ -1,19 +1,19 @@
 import { join } from 'path'
 
 export default class Constants {
-	static APP_NAME = 'Vutron'
+  static APP_NAME = 'Vutron'
 
-	static IS_DEV_ENV = process.env.NODE_ENV === 'development'
+  static IS_DEV_ENV = process.env.NODE_ENV === 'development'
 
-	static IS_MAC = process.platform === 'darwin'
+  static IS_MAC = process.platform === 'darwin'
 
-	static DEFAULT_WEB_PREFERENCES = {
-		nodeIntegration: true,
-		contextIsolation: false,
-		nodeIntegrationInWorker: true,
-		preload: join(__dirname, '../preload/index.js')
-	}
+  static DEFAULT_WEB_PREFERENCES = {
+    nodeIntegration: true,
+    contextIsolation: false,
+    nodeIntegrationInWorker: true,
+    preload: join(__dirname, '../preload/index.js')
+  }
 
-	static APP_INDEX_URL_DEV = 'http://localhost:5173/index.html'
-	static APP_INDEX_URL_PROD = join(__dirname, '../index.html')
+  static APP_INDEX_URL_DEV = 'http://localhost:5173/index.html'
+  static APP_INDEX_URL_PROD = join(__dirname, '../index.html')
 }

src/main/utils/Menus.ts

@@ -2,12 +2,12 @@ import { systemPreferences } from 'electron'
 import Constants from './Constants'
 
 export default class Menus {
-	static macOSDisableDefaultMenuItem(): void {
-		if (Constants.IS_MAC) {
-			systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true)
-			systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', true)
-		}
-	}
+  static macOSDisableDefaultMenuItem(): void {
+    if (Constants.IS_MAC) {
+      systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true)
+      systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', true)
+    }
+  }
 }
 
 export const { macOSDisableDefaultMenuItem } = Menus

src/preload/index.ts

@@ -1,5 +1,5 @@
 const main = (): void => {
-	console.log('[Preload] Script loaded.')
+  console.log('[Preload] Script loaded.')
 }
 
 main()

src/renderer/App.vue

@@ -3,23 +3,23 @@ import { DefaultLayout } from '@/renderer/components/layout'
 </script>
 
 <template>
-	<DefaultLayout>
-		<router-view />
-	</DefaultLayout>
+  <DefaultLayout>
+    <router-view />
+  </DefaultLayout>
 </template>
 
 <style>
 html {
-	overflow-y: auto !important;
-	user-select: none;
+  overflow-y: auto !important;
+  user-select: none;
 }
 html,
 body {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 /* Do not force capitalization of button text */
 .v-btn {
-	text-transform: unset !important;
+  text-transform: unset !important;
 }
 </style>

src/renderer/components/layout/DefaultLayout.vue

@@ -3,12 +3,12 @@ import HeaderLayout from '@/renderer/components/layout/HeaderLayout.vue'
 </script>
 
 <template>
-	<v-app>
-		<v-layout>
-			<HeaderLayout />
-			<v-main>
-				<slot />
-			</v-main>
-		</v-layout>
-	</v-app>
+  <v-app>
+    <v-layout>
+      <HeaderLayout />
+      <v-main>
+        <slot />
+      </v-main>
+    </v-layout>
+  </v-app>
 </template>

src/renderer/components/layout/HeaderLayout.vue

@@ -6,41 +6,41 @@ const route = useRoute()
 const titleKey: string = (route?.meta?.titleKey || 'title.main') as string
 
 const handleRoute = (path: string): void => {
-	router.push(path)
+  router.push(path)
 }
 
 const isCurrentRoute = (path: string): boolean => {
-	return path === route.path
+  return path === route.path
 }
 </script>
 <template>
-	<v-app-bar color="primary" density="compact">
-		<v-app-bar-title>{{ $t(titleKey) }}</v-app-bar-title>
-		<template #append>
-			<v-btn
-				prepend-icon="mdi-home"
-				variant="text"
-				:class="{ active: isCurrentRoute('/') }"
-				@click="handleRoute('/')"
-			>
-				{{ $t('title.main') }}
-			</v-btn>
-			<v-btn
-				prepend-icon="mdi-fit-to-screen-outline"
-				variant="text"
-				:class="{ active: isCurrentRoute('/second') }"
-				@click="handleRoute('/second')"
-			>
-				{{ $t('title.second') }}
-			</v-btn>
-		</template>
-	</v-app-bar>
+  <v-app-bar color="primary" density="compact">
+    <v-app-bar-title>{{ $t(titleKey) }}</v-app-bar-title>
+    <template #append>
+      <v-btn
+        prepend-icon="mdi-home"
+        variant="text"
+        :class="{ active: isCurrentRoute('/') }"
+        @click="handleRoute('/')"
+      >
+        {{ $t('title.main') }}
+      </v-btn>
+      <v-btn
+        prepend-icon="mdi-fit-to-screen-outline"
+        variant="text"
+        :class="{ active: isCurrentRoute('/second') }"
+        @click="handleRoute('/second')"
+      >
+        {{ $t('title.second') }}
+      </v-btn>
+    </template>
+  </v-app-bar>
 </template>
 <style scoped>
 .v-btn {
-	opacity: 0.4;
+  opacity: 0.4;
 }
 .active {
-	opacity: 1 !important;
+  opacity: 1 !important;
 }
 </style>

src/renderer/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-	</head>
-	<body>
-		<div id="app"></div>
-	</body>
-	<script type="module" src="./main.ts"></script>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module" src="./main.ts"></script>
 </html>

src/renderer/locales/en.json

@@ -1,19 +1,19 @@
 {
-	"desc": {
-		"welcome-title": "Hello Vutron! Everything is ready.",
-		"welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
-		"second-desc": "You have moved to the second screen! There is nothing here!"
-	},
-	"title": {
-		"main": "Main Screen",
-		"second": "Second Screen",
-		"error": "Unknown Error"
-	},
-	"menu": {
-		"change-theme": "Change Theme",
-		"change-language": "Change Language",
-		"increase-count": "Count 1 increment",
-		"documentation": "Documentation",
-		"github": "Source Code"
-	}
+  "desc": {
+    "welcome-title": "Hello Vutron! Everything is ready.",
+    "welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
+    "second-desc": "You have moved to the second screen! There is nothing here!"
+  },
+  "title": {
+    "main": "Main Screen",
+    "second": "Second Screen",
+    "error": "Unknown Error"
+  },
+  "menu": {
+    "change-theme": "Change Theme",
+    "change-language": "Change Language",
+    "increase-count": "Count 1 increment",
+    "documentation": "Documentation",
+    "github": "Source Code"
+  }
 }

src/renderer/locales/ko.json

@@ -1,19 +1,19 @@
 {
-	"desc": {
-		"welcome-title": "안녕 Vutron! 모든 준비를 마쳤습니다.",
-		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다.",
-		"second-desc": "두번째 화면으로 이동하였습니다! 여기는 아무 것도 없습니다!"
-	},
-	"title": {
-		"main": "메인 화면",
-		"second": "두번째 화면",
-		"error": "에러 발생"
-	},
-	"menu": {
-		"change-theme": "테마 변경",
-		"change-language": "언어 변경",
-		"increase-count": "카운트 1 증가",
-		"documentation": "문서",
-		"github": "소스코드"
-	}
+  "desc": {
+    "welcome-title": "안녕 Vutron! 모든 준비를 마쳤습니다.",
+    "welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다.",
+    "second-desc": "두번째 화면으로 이동하였습니다! 여기는 아무 것도 없습니다!"
+  },
+  "title": {
+    "main": "메인 화면",
+    "second": "두번째 화면",
+    "error": "에러 발생"
+  },
+  "menu": {
+    "change-theme": "테마 변경",
+    "change-language": "언어 변경",
+    "increase-count": "카운트 1 증가",
+    "documentation": "문서",
+    "github": "소스코드"
+  }
 }

src/renderer/locales/zh-hans.json

@@ -1,19 +1,19 @@
 {
-	"desc": {
-		"welcome-title": "你好武特龙！ 一切都准备好了。",
-		"welcome-desc": "您现在可以编写跨平台的 Web 应用程序。 实时查看更改并使用一个命令构建到多个平台。 如果您还不熟悉它，可以从下面的文档页面获得帮助，或者运行一些预先编写的示例代码。",
-		"second-desc": "您已移至第二个屏幕！ 这里什么都没有！"
-	},
-	"title": {
-		"main": "主屏幕",
-		"second": "第二屏",
-		"error": "未知错误"
-	},
-	"menu": {
-		"change-theme": "改变主题",
-		"change-language": "改变语言",
-		"increase-count": "计数 1 个增量",
-		"documentation": "文档",
-		"github": "源代码"
-	}
+  "desc": {
+    "welcome-title": "你好武特龙！ 一切都准备好了。",
+    "welcome-desc": "您现在可以编写跨平台的 Web 应用程序。 实时查看更改并使用一个命令构建到多个平台。 如果您还不熟悉它，可以从下面的文档页面获得帮助，或者运行一些预先编写的示例代码。",
+    "second-desc": "您已移至第二个屏幕！ 这里什么都没有！"
+  },
+  "title": {
+    "main": "主屏幕",
+    "second": "第二屏",
+    "error": "未知错误"
+  },
+  "menu": {
+    "change-theme": "改变主题",
+    "change-language": "改变语言",
+    "increase-count": "计数 1 个增量",
+    "documentation": "文档",
+    "github": "源代码"
+  }
 }

src/renderer/locales/zh-hant.json

@@ -1,19 +1,19 @@
 {
-	"desc": {
-		"welcome-title": "你好武特龍！ 一切都準備好了。",
-		"welcome-desc": "您現在可以編寫跨平台的 Web 應用程序。 實時查看更改並使用一個命令構建到多個平台。 如果您還不熟悉它，可以從下面的文檔頁面獲得幫助，或者運行一些預先編寫的示例代碼。",
-		"second-desc": "您已移至第二個屏幕！ 這裡什麼都沒有！"
-	},
-	"title": {
-		"main": "主屏幕",
-		"second": "第二屏",
-		"error": "未知錯誤"
-	},
-	"menu": {
-		"change-theme": "改變主題",
-		"change-language": "改變語言",
-		"increase-count": "計數 1 個增量",
-		"documentation": "文檔",
-		"github": "源代碼"
-	}
+  "desc": {
+    "welcome-title": "你好武特龍！ 一切都準備好了。",
+    "welcome-desc": "您現在可以編寫跨平台的 Web 應用程序。 實時查看更改並使用一個命令構建到多個平台。 如果您還不熟悉它，可以從下面的文檔頁面獲得幫助，或者運行一些預先編寫的示例代碼。",
+    "second-desc": "您已移至第二個屏幕！ 這裡什麼都沒有！"
+  },
+  "title": {
+    "main": "主屏幕",
+    "second": "第二屏",
+    "error": "未知錯誤"
+  },
+  "menu": {
+    "change-theme": "改變主題",
+    "change-language": "改變語言",
+    "increase-count": "計數 1 個增量",
+    "documentation": "文檔",
+    "github": "源代碼"
+  }
 }

src/renderer/plugins/i18n.ts

@@ -6,14 +6,14 @@ import zhHant from '@/renderer/locales/zh-hant.json'
 import { getCurrentLocale } from '@/renderer/utils'
 
 export default createI18n({
-	legacy: false,
-	locale: getCurrentLocale(),
-	fallbackLocale: 'en',
-	globalInjection: true,
-	messages: {
-		en,
-		ko,
-		zhHans,
-		zhHant
-	}
+  legacy: false,
+  locale: getCurrentLocale(),
+  fallbackLocale: 'en',
+  globalInjection: true,
+  messages: {
+    en,
+    ko,
+    zhHans,
+    zhHant
+  }
 })

src/renderer/plugins/vuetify.ts

@@ -7,32 +7,32 @@ import '@mdi/font/css/materialdesignicons.min.css'
 import colors from 'vuetify/lib/util/colors.mjs'
 
 export default createVuetify({
-	locale: {
-		messages: { ko, en, zhHans, zhHant },
-		locale: 'en',
-		fallback: 'en'
-	},
-	icons: {
-		defaultSet: 'mdi',
-		aliases,
-		sets: {
-			mdi
-		}
-	},
-	theme: {
-		themes: {
-			light: {
-				dark: false,
-				colors: {
-					primary: colors.green.darken2
-				}
-			},
-			dark: {
-				dark: true,
-				colors: {
-					primary: colors.green.darken4
-				}
-			}
-		}
-	}
+  locale: {
+    messages: { ko, en, zhHans, zhHant },
+    locale: 'en',
+    fallback: 'en'
+  },
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi
+    }
+  },
+  theme: {
+    themes: {
+      light: {
+        dark: false,
+        colors: {
+          primary: colors.green.darken2
+        }
+      },
+      dark: {
+        dark: true,
+        colors: {
+          primary: colors.green.darken4
+        }
+      }
+    }
+  }
 })

src/renderer/router/index.ts

@@ -2,32 +2,32 @@ import { createRouter, createWebHashHistory } from 'vue-router/dist/vue-router.e
 import { MainScreen, ErrorScreen, SecondScreen } from '@/renderer/screens'
 
 export default createRouter({
-	history: createWebHashHistory(),
-	routes: [
-		{
-			path: '/',
-			component: MainScreen,
-			meta: {
-				titleKey: 'title.main'
-			}
-		},
-		{
-			path: '/second',
-			component: SecondScreen,
-			meta: {
-				titleKey: 'title.second'
-			}
-		},
-		{
-			path: '/error',
-			component: ErrorScreen,
-			meta: {
-				titleKey: 'title.error'
-			}
-		},
-		{
-			path: '/:pathMatch(.*)*',
-			redirect: '/'
-		}
-	]
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      component: MainScreen,
+      meta: {
+        titleKey: 'title.main'
+      }
+    },
+    {
+      path: '/second',
+      component: SecondScreen,
+      meta: {
+        titleKey: 'title.second'
+      }
+    },
+    {
+      path: '/error',
+      component: ErrorScreen,
+      meta: {
+        titleKey: 'title.error'
+      }
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/'
+    }
+  ]
 })

src/renderer/screens/ErrorScreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx"></script>
 
 <template>
-	<div>Unknown error occurred</div>
+  <div>Unknown error occurred</div>
 </template>

src/renderer/screens/MainScreen.vue

@@ -15,88 +15,88 @@ const languages = ref(['en'])
 languages.value = availableLocales
 
 const handleChangeTheme = (): void => {
-	theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 
 const handleChangeLanguage = (val): void => {
-	locale.value = val
+  locale.value = val
 }
 
 const handleDocument = async (): Promise<void> => {
-	await openExternal('https://vutron.jooy2.com')
+  await openExternal('https://vutron.jooy2.com')
 }
 
 const handleGitHub = async (): Promise<void> => {
-	await openExternal('https://github.com/jooy2/vutron')
+  await openExternal('https://github.com/jooy2/vutron')
 }
 
 const handleCountIncrease = (): void => {
-	counterIncrease(1)
+  counterIncrease(1)
 }
 </script>
 
 <template>
-	<v-container>
-		<v-row no-gutters align="center" class="text-center">
-			<v-col cols="12" md="5">
-				<img
-					alt="logo"
-					draggable="false"
-					class="ma-auto h-auto w-75"
-					src="/images/vutron-logo.webp"
-				/>
-			</v-col>
-			<v-col cols="12" md="7">
-				<h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
-				<p>{{ $t('desc.welcome-desc') }}</p>
-				<v-row class="my-4">
-					<v-col cols="3">
-						<v-btn icon color="primary" @click="handleChangeTheme">
-							<v-icon icon="mdi-brightness-6" />
-							<v-tooltip activator="parent" location="bottom">
-								{{ $t('menu.change-theme') }}
-							</v-tooltip>
-						</v-btn>
-					</v-col>
-					<v-col cols="3">
-						<v-badge color="blue" :content="counter">
-							<v-btn icon color="primary" @click="handleCountIncrease">
-								<v-icon icon="mdi-plus-circle" />
-								<v-tooltip activator="parent" location="bottom">
-									{{ $t('menu.increase-count') }}
-								</v-tooltip>
-							</v-btn>
-						</v-badge>
-					</v-col>
-					<v-col cols="3">
-						<v-btn icon color="primary" @click="handleDocument">
-							<v-icon icon="mdi-file-document" />
-							<v-tooltip activator="parent" location="bottom">
-								{{ $t('menu.documentation') }}
-							</v-tooltip>
-						</v-btn>
-					</v-col>
-					<v-col cols="3">
-						<v-btn icon color="primary" @click="handleGitHub">
-							<v-icon icon="mdi-github" />
-							<v-tooltip activator="parent" location="bottom">
-								{{ $t('menu.github') }}
-							</v-tooltip>
-						</v-btn>
-					</v-col>
-					<v-col cols="12">
-						<v-select
-							:model-value="locale"
-							density="compact"
-							:label="$t('menu.change-language')"
-							:items="languages"
-							@update:model-value="handleChangeLanguage"
-						>
-							{{ $t('menu.change-language') }}
-						</v-select>
-					</v-col>
-				</v-row>
-			</v-col>
-		</v-row>
-	</v-container>
+  <v-container>
+    <v-row no-gutters align="center" class="text-center">
+      <v-col cols="12" md="5">
+        <img
+          alt="logo"
+          draggable="false"
+          class="ma-auto h-auto w-75"
+          src="/images/vutron-logo.webp"
+        />
+      </v-col>
+      <v-col cols="12" md="7">
+        <h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
+        <p>{{ $t('desc.welcome-desc') }}</p>
+        <v-row class="my-4">
+          <v-col cols="3">
+            <v-btn icon color="primary" @click="handleChangeTheme">
+              <v-icon icon="mdi-brightness-6" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.change-theme') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
+          <v-col cols="3">
+            <v-badge color="blue" :content="counter">
+              <v-btn icon color="primary" @click="handleCountIncrease">
+                <v-icon icon="mdi-plus-circle" />
+                <v-tooltip activator="parent" location="bottom">
+                  {{ $t('menu.increase-count') }}
+                </v-tooltip>
+              </v-btn>
+            </v-badge>
+          </v-col>
+          <v-col cols="3">
+            <v-btn icon color="primary" @click="handleDocument">
+              <v-icon icon="mdi-file-document" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.documentation') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
+          <v-col cols="3">
+            <v-btn icon color="primary" @click="handleGitHub">
+              <v-icon icon="mdi-github" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.github') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
+          <v-col cols="12">
+            <v-select
+              :model-value="locale"
+              density="compact"
+              :label="$t('menu.change-language')"
+              :items="languages"
+              @update:model-value="handleChangeLanguage"
+            >
+              {{ $t('menu.change-language') }}
+            </v-select>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>

src/renderer/screens/SecondScreen.vue

@@ -1,12 +1,12 @@
 <script setup lang="tsx"></script>
 
 <template>
-	<v-container>
-		<v-row no-gutters align="center" class="text-center">
-			<v-col cols="12">
-				<v-icon icon="mdi-emoticon-cool-outline" size="250" color="#009f57" />
-			</v-col>
-			<v-col cols="12" class="my-4">{{ $t('desc.second-desc') }}</v-col>
-		</v-row>
-	</v-container>
+  <v-container>
+    <v-row no-gutters align="center" class="text-center">
+      <v-col cols="12">
+        <v-icon icon="mdi-emoticon-cool-outline" size="250" color="#009f57" />
+      </v-col>
+      <v-col cols="12" class="my-4">{{ $t('desc.second-desc') }}</v-col>
+    </v-row>
+  </v-container>
 </template>

src/renderer/store/temp.ts

@@ -1,15 +1,15 @@
 import { defineStore } from 'pinia'
 
 export const useTempStore = defineStore('temp', {
-	state: () => ({
-		counter: 0
-	}),
-	getters: {
-		getCounter: (state): number => state.counter
-	},
-	actions: {
-		counterIncrease(amount: number) {
-			this.counter += amount
-		}
-	}
+  state: () => ({
+    counter: 0
+  }),
+  getters: {
+    getCounter: (state): number => state.counter
+  },
+  actions: {
+    counterIncrease(amount: number) {
+      this.counter += amount
+    }
+  }
 })

src/renderer/utils/index.ts

@@ -1,13 +1,13 @@
 import { shell } from 'electron'
 
 export default class Utils {
-	static getCurrentLocale(): string {
-		return navigator?.language?.split('-')[0] || 'en'
-	}
+  static getCurrentLocale(): string {
+    return navigator?.language?.split('-')[0] || 'en'
+  }
 
-	static async openExternal(url: string): Promise<void> {
-		await shell.openExternal(url)
-	}
+  static async openExternal(url: string): Promise<void> {
+    await shell.openExternal(url)
+  }
 }
 
 export const { getCurrentLocale, openExternal } = Utils