Added openFile example

src/renderer/screens/MainScreen.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
-import { openExternal } from '@/renderer/utils'
+import { openExternal, openFile } from '@/renderer/utils'
 import { useCounterStore } from '@/renderer/store/counter'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
@@ -12,6 +12,7 @@ const { counter } = storeToRefs(useCounterStore())
 const theme = useTheme()
 const languages = ref(['en'])
 const appVersion = ref('Unknown')
+const selectedFile = ref('')
 
 onMounted((): void => {
   languages.value = availableLocales
@@ -43,6 +44,13 @@ const handleOpenGitHub = async (): Promise<void> => {
 const handleCountIncrease = (): void => {
   counterIncrease(1)
 }
+
+const handleOpenFile = async () => {
+  const dialogResult = await openFile('text')
+  if (!dialogResult.canceled) {
+    selectedFile.value = dialogResult.filePaths[0]
+  }
+}
 </script>
 
 <template>
@@ -63,8 +71,13 @@ const handleCountIncrease = (): void => {
         <p class="my-4">
           App Version: <strong>{{ appVersion }}</strong>
         </p>
+          <p v-if="selectedFile !== ''">{{
+                  $t('desc.selected-file', {
+                    filePath: selectedFile
+                  })
+                }}</p>
         <v-row class="my-4">
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleChangeTheme">
               <v-icon icon="mdi-brightness-6" />
               <v-tooltip activator="parent" location="bottom">
@@ -72,7 +85,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-badge data-testid="counter-badge" color="blue" :content="counter">
               <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
                 <v-icon icon="mdi-plus-circle" />
@@ -82,7 +95,7 @@ const handleCountIncrease = (): void => {
               </v-btn>
             </v-badge>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenDocument">
               <v-icon icon="mdi-file-document" />
               <v-tooltip activator="parent" location="bottom">
@@ -90,7 +103,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenGitHub">
               <v-icon icon="mdi-github" />
               <v-tooltip activator="parent" location="bottom">
@@ -98,9 +111,17 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
+          <v-col>
+            <v-btn icon color="primary" @click="handleOpenFile">
+              <v-icon icon="mdi-folder-open" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.open-file') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
           <v-col cols="12">
             <v-select
-              data-testid="select-language"
+data-testid="select-language"
               :model-value="locale"
               density="compact"
               :label="$t('menu.change-language')"