add switch from ellipis in toolbar

Author: larbish

src/app/src/components/AppFooter.vue

@@ -95,17 +95,6 @@ function closeStudio() {
     </UDropdownMenu>
 
     <div class="flex items-center">
-      <UTooltip
-        :text="preferences.editorMode === 'code' ? $t('studio.tooltips.switchToTipTap') : $t('studio.tooltips.switchToCode')"
-        :delay-duration="0"
-      >
-        <UButton
-          :icon="preferences.editorMode === 'code' ? 'i-lucide-whole-word' : 'i-lucide-code'"
-          variant="ghost"
-          color="neutral"
-          @click="updatePreference('editorMode', preferences.editorMode === 'code' ? 'tiptap' : 'code')"
-        />
-      </UTooltip>
       <UTooltip
         :text="syncTooltipText"
         :delay-duration="0"

src/app/src/components/shared/item/ItemActionsToolbar.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useStudio } from '../../../composables/useStudio'
+import { useStudioState } from '../../../composables/useStudioState'
 import type { StudioAction } from '../../../types'
 import { StudioItemActionId, TreeStatus } from '../../../types'
-import { MEDIA_EXTENSIONS } from '../../../utils/file'
+import { MEDIA_EXTENSIONS, getFileExtension } from '../../../utils/file'
 import type { DropdownMenuItem } from '@nuxt/ui/runtime/components/DropdownMenu.vue.d.ts'
 import { useI18n } from 'vue-i18n'
 
 const { context, gitProvider } = useStudio()
+const { preferences, updatePreference } = useStudioState()
 const { t } = useI18n()
 const fileInputRef = ref<HTMLInputElement>()
 const toolbarRef = ref<HTMLElement>()
@@ -26,19 +28,38 @@ const item = computed(() => context.activeTree.value.currentItem.value)
 const extraActions = computed<DropdownMenuItem[]>(() => {
   const actions: DropdownMenuItem[] = []
 
-  if (item.value.type === 'file' && item.value.status !== TreeStatus.Created) {
-    const providerInfo = gitProvider.api.getRepositoryInfo()
-    const provider = providerInfo.provider
-    const feature = context.currentFeature.value
+  if (item.value.type === 'file') {
+    const fileExtension = getFileExtension(item.value.fsPath)
+    const isMarkdown = fileExtension === 'md'
 
-    if (feature) {
+    // Add editor mode switch for markdown files
+    if (isMarkdown) {
       actions.push({
-        label: t(`studio.actions.labels.openGitProvider`, { providerName: gitProvider.name }),
-        icon: provider === 'gitlab' ? 'i-simple-icons:gitlab' : 'i-simple-icons:github',
-        to: gitProvider.api.getFileUrl(feature, item.value.fsPath),
-        target: '_blank',
+        label: preferences.value.editorMode === 'code'
+          ? t('studio.actions.labels.switchToTipTap')
+          : t('studio.actions.labels.switchToCode'),
+        icon: preferences.value.editorMode === 'code' ? 'i-lucide-file-pen' : 'i-lucide-file-code',
+        onClick: () => {
+          updatePreference('editorMode', preferences.value.editorMode === 'code' ? 'tiptap' : 'code')
+        },
       })
     }
+
+    // Add git provider link for existing files
+    if (item.value.status !== TreeStatus.Created) {
+      const providerInfo = gitProvider.api.getRepositoryInfo()
+      const provider = providerInfo.provider
+      const feature = context.currentFeature.value
+
+      if (feature) {
+        actions.push({
+          label: t(`studio.actions.labels.openGitProvider`, { providerName: gitProvider.name }),
+          icon: provider === 'gitlab' ? 'i-simple-icons:gitlab' : 'i-simple-icons:github',
+          to: gitProvider.api.getFileUrl(feature, item.value.fsPath),
+          target: '_blank',
+        })
+      }
+    }
   }
 
   return actions

src/app/src/locales/en.json

@@ -128,7 +128,9 @@
         "duplicateItem": "Duplicate",
         "revertItem": "Revert changes",
         "publishBranch": "Publish branch",
-        "openGitProvider": "Open on {providerName}"
+        "openGitProvider": "Open on {providerName}",
+        "switchToTipTap": "Use visual editor",
+        "switchToCode": "Use code editor"
       },
       "tooltips": {
         "createDocument": "Create a new file",

src/app/src/locales/fr.json

@@ -128,7 +128,9 @@
         "duplicateItem": "Dupliquer",
         "revertItem": "Annuler les changements",
         "publishBranch": "Publier la branche",
-        "openGitProvider": "Ouvrir sur {providerName}"
+        "openGitProvider": "Ouvrir sur {providerName}",
+        "switchToTipTap": "Utiliser l'éditeur visuel",
+        "switchToCode": "Utiliser l'éditeur de code"
       },
       "tooltips": {
         "createDocument": "Créer un nouveau fichier",