feat(dev): enable studio in development mode without auth (#94)

Co-authored-by: Baptiste Leproux <[email protected]>
Co-authored-by: Sébastien Chopin <[email protected]>

Author: 3 people

playground/docus/content/2.studio/2.setup.md

@@ -2,9 +2,10 @@
 import { computed } from 'vue'
 import { useStudio } from '../composables/useStudio'
 import { useStudioState } from '../composables/useStudioState'
+import type { DropdownMenuItem } from '@nuxt/ui'
 
 const { ui, host, git } = useStudio()
-const { preferences, updatePreference, unsetActiveLocation } = useStudioState()
+const { devMode, preferences, updatePreference, unsetActiveLocation } = useStudioState()
 const user = host.user.get()
 
 // const showTechnicalMode = computed({
@@ -16,19 +17,19 @@ const user = host.user.get()
 
 const repositoryUrl = computed(() => git.getBranchUrl())
 const userMenuItems = computed(() => [
-  [
-  // [{
-  //   slot: 'view-mode' as const,
-  // }
-    repositoryUrl.value
-      ? {
+  repositoryUrl.value
+    ? [
+        // [{
+        //   slot: 'view-mode' as const,
+        // }
+        {
           label: `${host.repository.owner}/${host.repository.repo}`,
           icon: 'i-simple-icons:github',
           to: repositoryUrl.value,
           target: '_blank',
-        }
-      : undefined,
-  ].filter(Boolean),
+        },
+      ]
+    : undefined,
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
@@ -38,7 +39,7 @@ const userMenuItems = computed(() => [
       })
     },
   }],
-])
+].filter(Boolean) as DropdownMenuItem[][])
 
 function closeStudio() {
   unsetActiveLocation()
@@ -50,7 +51,14 @@ function closeStudio() {
   <div
     class="bg-muted/50 border-default border-t-[0.5px] flex items-center justify-between gap-1.5 px-2 py-2"
   >
+    <span
+      v-if="devMode"
+      class="ml-2 text-xs text-muted"
+    >
+      Using local filesystem
+    </span>
     <UDropdownMenu
+      v-else
       :portal="false"
       :items="userMenuItems"
       :ui="{ content: 'w-full' }"

src/app/src/components/AppFooter.vue

@@ -8,7 +8,7 @@ import { useStudioState } from '../../composables/useStudioState'
 const router = useRouter()
 const route = useRoute()
 const { context } = useStudio()
-const { setLocation } = useStudioState()
+const { setLocation, devMode } = useStudioState()
 
 const items = [
   {
@@ -52,6 +52,7 @@ const current = computed({
     />
 
     <UButton
+      v-if="!devMode"
       label="Review"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"
@@ -66,7 +67,7 @@ const current = computed({
       >
         <UBadge
           :label="context.draftCount.value.toString()"
-          class="bg-[var(--ui-color-neutral-400)]"
+          class="bg-neutral-400"
           size="xs"
           variant="soft"
         />

src/app/src/components/header/HeaderMain.vue

@@ -234,6 +234,10 @@ export const useContext = createSharedComposable((
     actionInProgress.value = null
   }
 
+  function switchFeature(feature: StudioFeature) {
+    router.push(`/${feature}`)
+  }
+
   return {
     currentFeature,
     activeTree,
@@ -246,5 +250,6 @@ export const useContext = createSharedComposable((
     draftCount,
     isDraftInProgress,
     unsetActionInProgress,
+    switchFeature,
   }
 })

src/app/src/composables/useContext.ts

@@ -2,12 +2,12 @@ import type { Storage } from 'unstorage'
 import { joinURL } from 'ufo'
 import type { DraftItem, StudioHost, GithubFile, DatabaseItem, MediaItem, BaseItem } from '../types'
 import { ContentFileExtension } from '../types'
-import { studioFlags } from './useStudio'
 import { DraftStatus } from '../types/draft'
 import { checkConflict, findDescendantsFromFsPath } from '../utils/draft'
 import type { useGit } from './useGit'
 import { useHooks } from './useHooks'
 import { ref } from 'vue'
+import { useStudioState } from './useStudioState'
 
 export function useDraftBase<T extends DatabaseItem | MediaItem>(
   type: 'media' | 'document',
@@ -25,6 +25,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
   const areDocumentsEqual = host.document.utils.areEqual
 
   const hooks = useHooks()
+  const { devMode } = useStudioState()
 
   async function get(fsPath: string): Promise<DraftItem<T> | undefined> {
     return list.value.find(item => item.fsPath === fsPath) as DraftItem<T>
@@ -73,40 +74,45 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       await storage.removeItem(fsPath)
       await hostDb.delete(fsPath)
 
-      let deleteDraftItem: DraftItem<T> | null = null
-      if (existingDraftItem) {
-        if (existingDraftItem.status === DraftStatus.Deleted) return
+      if (!devMode.value) {
+        let deleteDraftItem: DraftItem<T> | null = null
+        if (existingDraftItem) {
+          if (existingDraftItem.status === DraftStatus.Deleted) return
 
-        if (existingDraftItem.status === DraftStatus.Created) {
-          list.value = list.value.filter(item => item.fsPath !== fsPath)
+          if (existingDraftItem.status === DraftStatus.Created) {
+            list.value = list.value.filter(item => item.fsPath !== fsPath)
+          }
+          else {
+          // TODO: check if gh file has been updated
+            const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
+
+            deleteDraftItem = {
+              fsPath: existingDraftItem.fsPath,
+              status: DraftStatus.Deleted,
+              original: existingDraftItem.original,
+              githubFile,
+            }
+
+            list.value = list.value.map(item => item.fsPath === fsPath ? deleteDraftItem! : item) as DraftItem<T>[]
+          }
         }
         else {
+        // TODO: check if gh file has been updated
+          const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
+
           deleteDraftItem = {
-            fsPath: existingDraftItem.fsPath,
+            fsPath,
             status: DraftStatus.Deleted,
-            original: existingDraftItem.original,
-            githubFile: existingDraftItem.githubFile,
+            original: originalDbItem,
+            githubFile,
           }
 
-          list.value = list.value.map(item => item.fsPath === fsPath ? deleteDraftItem! : item) as DraftItem<T>[]
+          list.value.push(deleteDraftItem)
         }
-      }
-      else {
-      // TODO: check if gh file has been updated
-        const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
-
-        deleteDraftItem = {
-          fsPath,
-          status: DraftStatus.Deleted,
-          original: originalDbItem,
-          githubFile,
-        }
-
-        list.value.push(deleteDraftItem)
-      }
 
-      if (deleteDraftItem) {
-        await storage.setItem(fsPath, deleteDraftItem)
+        if (deleteDraftItem) {
+          await storage.setItem(fsPath, deleteDraftItem)
+        }
       }
 
       if (rerender) {
@@ -215,7 +221,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
   }
 
   function getStatus(modified: BaseItem, original: BaseItem): DraftStatus {
-    if (studioFlags.dev) {
+    if (devMode.value) {
       return DraftStatus.Pristine
     }