feat: show document sync and edit this page button

src/app/src/App.vue

@@ -4,7 +4,8 @@ import PanelContent from './components/panel/content/PanelContent.vue'
 import PanelMedia from './components/panel/PanelMedia.vue'
 import PanelConfig from './components/panel/PanelConfig.vue'
 import { useSidebar } from './composables/useSidebar'
-import { watch } from 'vue'
+import { watch, ref } from 'vue'
+import { StudioFeature } from './types'
 
 const { sidebarWidth } = useSidebar()
 const { ui, host, isReady, tree } = useStudio()
@@ -13,29 +14,30 @@ watch(sidebarWidth, () => {
     host.ui.updateStyles()
   }
 })
-// const activeDocuments = ref<{ id: string, label: string, value: string }[]>([])
+const activeDocuments = ref<{ id: string, title: string }[]>([])
 
-// function detectActiveDocuments() {
-//   activeDocuments.value = host.document.detectActives().map((content) => {
-//     return {
-//       id: content.id,
-//       label: content.title,
-//       value: content.id,
-//       onSelect: () => {
-//         onContentSelect(content.id)
-//       },
-//     }
-//   })
-// }
+function detectActiveDocuments() {
+  activeDocuments.value = host.document.detectActives().map((content) => {
+    return {
+      id: content.id,
+      title: content.title,
+    }
+  })
+}
 
-// host.on.mounted(() => {
-//   detectActiveDocuments()
-//   host.on.routeChange(() => {
-//     setTimeout(() => {
-//       detectActiveDocuments()
-//     }, 100)
-//   })
-// })
+function onContentSelect(id: string) {
+  tree.selectItemById(id)
+  ui.openPanel(StudioFeature.Content)
+}
+
+host.on.mounted(() => {
+  detectActiveDocuments()
+  host.on.routeChange(() => {
+    setTimeout(() => {
+      detectActiveDocuments()
+    }, 100)
+  })
+})
 </script>
 
 <template>
@@ -63,14 +65,24 @@ watch(sidebarWidth, () => {
       </PanelBase>
 
       <!-- Floating Files Panel Toggle -->
-      <UButton
-        v-if="!ui.isPanelOpen.value"
-        icon="i-lucide-panel-left-open"
-        size="lg"
-        color="primary"
-        class="fixed bottom-4 left-4 z-50 shadow-lg"
-        @click="ui.panels.content = true"
-      />
+      <div v-if="!ui.isPanelOpen.value" class="fixed bottom-4 left-4 z-50 shadow-lg flex gap-2">
+        <UButton
+          icon="i-lucide-panel-left-open"
+          size="lg"
+          color="primary"
+          class="shadow-lg"
+          @click="ui.panels.content = true"
+        />
+        <UButton
+          v-if="activeDocuments.length === 1"
+          icon="i-lucide-file-text"
+          size="lg"
+          color="secondary"
+          label="Edit This Page"
+          class="shadow-lg"
+          @click="onContentSelect(activeDocuments[0].id)"
+        />
+      </div>
     </UApp>
   </Suspense>
 </template>

src/app/src/components/panel/base/PanelBaseFooter.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useStudio } from '../../../composables/useStudio'
 
 const studio = useStudio()
+const uiConfig = studio.ui.config
 
 const user = studio.host.user.get()
 
@@ -41,6 +42,15 @@ const userMenuItems = computed(() => [
     </template>
 
     <template #right>
+      <UTooltip :text="uiConfig.syncEditorAndRoute ? 'Sync editor and route' : 'Don\'t sync editor and route'">
+        <UButton
+          icon="i-lucide-arrow-left-right"
+          variant="link"
+          :color="uiConfig.syncEditorAndRoute ? 'success' : 'neutral'"
+          size="md"
+          @click="uiConfig.syncEditorAndRoute = !uiConfig.syncEditorAndRoute"
+        />
+      </UTooltip>
       <UButton
         icon="i-lucide-panel-left-close"
         variant="link"

src/app/src/composables/useStudio.ts

@@ -38,9 +38,11 @@ export const useStudio = createSharedComposable(() => {
     isReady.value = true
 
     host.on.routeChange((to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
-      tree.selectByRoute(to)
+      if (ui.isPanelOpen.value && ui.config.value.syncEditorAndRoute) {
+        tree.selectByRoute(to)
+      }
       // setTimeout(() => {
-      //   detectActiveDocuments()
+      //   host.document.detectActives()
       // }, 100)
     })
   })

src/app/src/composables/useUi.ts

@@ -1,4 +1,4 @@
-import { createSharedComposable } from '@vueuse/core'
+import { createSharedComposable, useStorage } from '@vueuse/core'
 import { computed, reactive, watch } from 'vue'
 import { type StudioHost, StudioFeature } from '../types'
 
@@ -9,6 +9,8 @@ export const useUi = createSharedComposable((host: StudioHost) => {
     [StudioFeature.Config]: false,
   })
 
+  const config = useStorage('studio-ui-config', { syncEditorAndRoute: true })
+
   const isPanelOpen = computed(() => Object.values(panels).some(value => value))
   watch(isPanelOpen, (value) => {
     if (value) {
@@ -47,6 +49,7 @@ export const useUi = createSharedComposable((host: StudioHost) => {
 
   return {
     panels,
+    config,
     isPanelOpen,
     openPanel,
     closePanels,