feat(app): big refactor for great UX (#22)

Co-authored-by: Baptiste Leproux <[email protected]>

Author: atinux

package.json

@@ -8,8 +8,8 @@
   "exports": {
     ".": "./dist/module/module.mjs",
     "./app": {
-      "types": "./dist/app/index.d.ts",
-      "default": "./dist/app/index.js"
+      "types": "./dist/app/main.d.ts",
+      "default": "./dist/app/main.js"
     },
     "./app/utils": {
       "types": "./dist/app/utils.d.ts",
@@ -64,6 +64,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
+    "@iconify-json/simple-icons": "^1.2.53",
     "@nuxtjs/mdc": "https://pkg.pr.new/@nuxtjs/mdc@61af819",
     "@nuxtlabs/monarch-mdc": "^0.8.1",
     "@unhead/vue": "^2.0.17",

pnpm-lock.yaml

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { useStudio } from './composables/useStudio'
+import { watch, ref } from 'vue'
+import { StudioFeature } from './types'
+import { defineShortcuts } from '#imports'
+import { useRouter } from 'vue-router'
+
+const { host, ui, isReady, documentTree } = useStudio()
+const router = useRouter()
+
+defineShortcuts({
+  'meta_.': () => {
+    ui.toggle()
+  },
+})
+
+watch(ui.sidebar.sidebarWidth, () => {
+  if (ui.isOpen.value) {
+    host.ui.updateStyles()
+  }
+})
+const activeDocuments = ref<{ id: string, title: string }[]>([])
+
+function detectActiveDocuments() {
+  activeDocuments.value = host.document.detectActives().map((content) => {
+    return {
+      id: content.id,
+      title: content.title,
+    }
+  })
+}
+
+async function editContentFile(id: string) {
+  await documentTree.selectItemById(id)
+  ui.open(StudioFeature.Content)
+}
+
+const colorModeClass = ref(host.ui.colorMode)
+
+host.on.colorModeChange((colorMode) => {
+  colorModeClass.value = colorMode
+})
+
+host.on.mounted(() => {
+  detectActiveDocuments()
+  host.on.routeChange(() => {
+    setTimeout(() => {
+      detectActiveDocuments()
+    }, 100)
+  })
+})
+
+const direction = ref<'left' | 'right'>('left')
+const directionOrder = ['content', 'media']
+
+router.beforeEach((to, from) => {
+  direction.value = directionOrder.indexOf(from.name as string) > directionOrder.indexOf(to.name as string) ? 'left' : 'right'
+})
+</script>
+
+<template>
+  <div :class="colorModeClass">
+    <UApp :toaster="{ portal: false }">
+      <AppLayout :open="ui.isOpen.value">
+        <RouterView v-slot="{ Component }">
+          <Transition
+            enter-active-class="transition-translate duration-200 absolute"
+            :enter-from-class="direction === 'right' ? 'translate-x-full' : '-translate-x-full'"
+            enter-to-class="translate-x-0"
+            leave-active-class="transition-translate duration-200 absolute"
+            leave-from-class="translate-x-0"
+            :leave-to-class="direction === 'right' ? '-translate-x-full' : 'translate-x-full'"
+          >
+            <KeepAlive>
+              <component
+                :is="Component"
+                class="w-full h-full"
+              />
+            </KeepAlive>
+          </Transition>
+        </RouterView>
+      </AppLayout>
+
+      <!-- Floating Files Panel Toggle -->
+      <div
+        class="fixed bottom-2 left-2 flex transition-all"
+        :class="[isReady && !ui.isOpen.value ? 'opacity-100 duration-200 delay-300 translate-y-0' : 'duration-0 opacity-0 -translate-x-12 pointer-events-none']"
+      >
+        <UFieldGroup>
+          <UTooltip
+            text="Toggle Studio"
+            :kbds="['meta', '.']"
+          >
+            <UButton
+              icon="i-lucide-panel-left-open"
+              size="sm"
+              color="neutral"
+              variant="outline"
+              class="bg-transparent backdrop-blur-md"
+              @click="ui.open()"
+            />
+          </UTooltip>
+          <UButton
+            v-if="activeDocuments.length === 1"
+            size="sm"
+            color="neutral"
+            variant="outline"
+            class="bg-transparent backdrop-blur-md px-2"
+            label="Edit this page"
+            @click="editContentFile(activeDocuments[0].id)"
+          />
+        </UFieldGroup>
+      </div>
+    </UApp>
+  </div>
+</template>

src/app/src/App.vue

@@ -11,7 +11,7 @@
 @source inline('ring-red-200 hover:ring-red-300 hover:dark:ring-red-700');
 @source inline('ring-green-200 hover:ring-green-300 hover:dark:ring-green-700');
 
-:root {
+:root, .light {
   --ui-primary: black;
 }
 
@@ -20,11 +20,6 @@
 }
 
 @theme static {
-  --ui-sub-header-height: 45px;
-  --ui-footer-height: 40px;
-
-  --font-sans: 'Public Sans', sans-serif;
-
   --color-green-50: '#EFFDF5';
   --color-green-100: '#D9FBE8';
   --color-green-200: '#B3F5D1';

src/app/src/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useStudio } from '../../../composables/useStudio'
+import { useStudio } from '../composables/useStudio'
 
 const { ui, host } = useStudio()
 
@@ -17,46 +17,43 @@ const repositoryUrl = computed(() => {
 
 const userMenuItems = computed(() => [
   [{
-    label: 'Open Repository',
-    icon: 'i-lucide-github',
-    onClick: () => {
-      window.open(repositoryUrl.value, '_blank')
-    },
+    label: `${host.repository.owner}/${host.repository.repo}`,
+    icon: 'i-simple-icons:github',
+    to: repositoryUrl.value,
+    target: '_blank',
   }],
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
     onClick: () => {
-      alert('TODO: delete cookie manually')
+      fetch('/__nuxt_content/studio/auth/session', { method: 'delete' }).then(() => {
+        document.location.reload()
+      })
     },
   }],
 ])
 </script>
 
 <template>
-  <UFooter
-    class="h-var(--ui-footer-height) sticky bottom-0 bg-white"
-    :ui="{ container: 'px-2 sm:px-2 lg:px-2', right: 'gap-0' }"
+  <div
+    class="bg-muted/50 border-default border-t-[0.5px] flex items-center justify-between gap-1.5 px-2 py-2"
   >
-    <template #left>
-      <UDropdownMenu
-        :portal="false"
-        :items="userMenuItems"
-        :ui="{ content: 'w-full' }"
-        size="xs"
-      >
-        <UButton
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          :avatar="{ src: user?.avatar, alt: user?.name, size: '2xs' }"
-          class="px-2 font-medium"
-          :label="user?.name"
-        />
-      </UDropdownMenu>
-    </template>
+    <UDropdownMenu
+      :portal="false"
+      :items="userMenuItems"
+      :ui="{ content: 'w-full' }"
+    >
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :avatar="{ src: user?.avatar, alt: user?.name, size: '2xs' }"
+        class="px-2 py-1 font-medium"
+        :label="user?.name"
+      />
+    </UDropdownMenu>
 
-    <template #right>
+    <div class="flex items-center">
       <UTooltip
         :text="uiConfig.syncEditorAndRoute ? 'Unlink editor and preview' : 'Link editor and preview'"
         :delay-duration="0"
@@ -66,17 +63,15 @@ const userMenuItems = computed(() => [
           variant="ghost"
           :color="uiConfig.syncEditorAndRoute ? 'info' : 'neutral'"
           :class="!uiConfig.syncEditorAndRoute && 'opacity-50'"
-          size="sm"
           @click="uiConfig.syncEditorAndRoute = !uiConfig.syncEditorAndRoute"
         />
       </UTooltip>
       <UButton
         icon="i-lucide-panel-left-close"
         variant="ghost"
         color="neutral"
-        size="sm"
-        @click="ui.closePanels()"
+        @click="ui.close()"
       />
-    </template>
-  </UFooter>
+    </div>
+  </div>
 </template>