renderer: redesign main screen

src/renderer/locales/en.json

@@ -1,10 +1,13 @@
 {
 	"desc": {
-		"welcome": "Thank you for using Vutron. This cool template makes it easy to create a variety of cross-platform applications."
+		"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."
 	},
 	"menu": {
 		"change-theme": "Change Theme",
 		"change-language": "Change Language",
-		"about": "About Vutron"
+		"increase-count": "Count 1 increment",
+		"documentation": "Documentation",
+		"github": "Source Code"
 	}
 }

src/renderer/locales/ko.json

@@ -1,10 +1,13 @@
 {
 	"desc": {
-		"welcome": "Vutron을 이용해주셔서 감사드립니다. 이 멋진 템플릿을 활용하면 다양한 크로스플랫폼 애플리케이션을 손쉽게 제작할 수 있습니다."
+		"welcome-title": "안녕 Vutron! 모든 준비를 마쳤습니다.",
+		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다."
 	},
 	"menu": {
 		"change-theme": "테마 변경",
 		"change-language": "언어 변경",
-		"about": "Vutron 정보"
+		"increase-count": "카운트 1 증가",
+		"documentation": "문서",
+		"github": "소스코드"
 	}
 }

src/renderer/screens/MainScreen.vue

@@ -4,25 +4,29 @@ import { useTheme } from 'vuetify'
 import { openExternal } from '@/renderer/utils'
 import { useTempStore } from '@/renderer/store/temp'
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 
-const { locale } = useI18n()
+const { locale, availableLocales } = useI18n()
 const theme = useTheme()
 const { counterIncrease } = useTempStore()
 const { counter } = storeToRefs(useTempStore())
+const languages = ref(['en'])
+
+languages.value = availableLocales
 
 const handleChangeTheme = (): void => {
 	theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 
-const handleChangeLanguage = (): void => {
-	if (locale.value === 'en') {
-		locale.value = 'ko'
-	} else {
-		locale.value = 'en'
-	}
+const handleChangeLanguage = (val): void => {
+	locale.value = val
 }
 
-const handleAbout = async (): Promise<void> => {
+const handleDocument = async (): Promise<void> => {
+	await openExternal('https://vutron.jooy2.com')
+}
+
+const handleGitHub = async (): Promise<void> => {
 	await openExternal('https://github.com/jooy2/vutron')
 }
 
@@ -33,31 +37,60 @@ const handleCountIncrease = (): void => {
 
 <template>
 	<v-container>
-		<v-row align="center" class="text-center">
-			<v-col cols="12">
+		<v-row no-gutters align="center" class="text-center">
+			<v-col cols="5">
 				<img alt="logo" class="ma-auto h-auto w-75" src="/images/vutron-logo.webp" />
 			</v-col>
-			<v-col cols="12">
-				{{ $t('desc.welcome') }}
-			</v-col>
-			<v-col cols="12"> Counter: {{ counter }} </v-col>
+			<v-col cols="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 block color="primary" @click="handleChangeTheme">
+						<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-btn block color="primary" @click="handleChangeLanguage">
+						<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-btn>
+						</v-select>
 					</v-col>
-			<v-col cols="3">
-				<v-btn block color="primary" @click="handleAbout">
-					{{ $t('menu.about') }}
-				</v-btn>
-			</v-col>
-			<v-col cols="3">
-				<v-btn block color="primary" @click="handleCountIncrease">Count + 1</v-btn>
+				</v-row>
 			</v-col>
 		</v-row>
 	</v-container>