feat: use devtools ui

Author: stafyniaksacha

.eslintrc

@@ -1,8 +1,10 @@
 {
+  "root": true,
   "extends": [
     "@nuxtjs/eslint-config-typescript"
   ],
   "rules": {
+    "import/named": "off",
     "@typescript-eslint/no-unused-vars": [
       "off"
     ]

.gitignore

@@ -22,11 +22,9 @@ dist
 .vercel_build_output
 .build-*
 .env
+!client/.env
 .netlify
 
-# Env
-.env
-
 # Testing
 reports
 coverage

.nuxtrc

@@ -1 +1,2 @@
 imports.autoImport=false
+typescript.includeWorkspace=true

client/.env

@@ -0,0 +1 @@
+NUXT_PUBLIC_MV_BASE_URL=http://localhost:3000/

src/client/app.vue renamed to client/app.vue

@@ -5,7 +5,7 @@ const isDropping = ref(false)
 // drag file over app handlers, to show drop placeholder
 // we need to keep track of how deep the drag is because it raises on each child elements
 let dragCount = 0
-function onDragenter (e) {
+function onDragenter (e: DragEvent) {
   dragCount += 1
   if (dragCount === 1) {
     isDropping.value = true
@@ -63,8 +63,8 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <div v-if="isDropping" class="fixed inset-0 transition-all hover:backdrop-blur-none backdrop-blur-sm bg-white/30" />
-    <div v-show="isDropping" class="fixed inset-0 my-24 mx-32">
+    <div v-if="isDropping" class="fixed inset-0 transition-all hover:backdrop-blur-none backdrop-blur-sm bg-base/30" />
+    <div v-show="isDropping" class="fixed inset-0">
       <Transition
         enter-active-class="transition duration-100 ease-out"
         enter-from-class="transform scale-0 opacity-0"
@@ -74,7 +74,7 @@ onBeforeUnmount(() => {
         leave-to-class="transform scale-0 opacity-0"
       >
         <div v-if="isDropping" class="h-full flex-1 flex items-center justify-center">
-          <div class="rounded border border-slate-100 drop-shadow-sm flex bg-white items-center justify-center w-[500px] h-[230px] mx-auto">
+          <div class="rounded border n-border-base drop-shadow-sm flex bg-base items-center justify-center w-[500px] h-[230px] mx-auto">
             <div class="text-2xl">
               Drop your files
             </div>

src/client/components/MediaDropPlaceholder.vue renamed to client/components/MediaDropPlaceholder.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-12 gap-4">
+  <div class="flex flex-wrap gap-4">
     <MediaGalleryItem
       v-for="key in props.assetsKeys"
       :key="key"

src/client/components/MediaGallery.vue renamed to client/components/MediaGallery.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { inject, onMounted, ref } from 'vue'
-import { keyToPath } from '../shared'
-import type { AssetStats } from '../../../types/preview'
+import { useRuntimeConfig } from '#app'
+import type { AssetStats } from '../../types/preview'
+import { useKeyPath } from '~/composables/keys'
 
 const props = defineProps<{
-  assetKey: string
+  assetKey: string;
 }>()
 
 const isImage = ref(true)
 const fileStat = ref<AssetStats>()
+const mvBaseURL = useRuntimeConfig().public.mvBaseURL
 const config = inject<any>('mediaViewerConfig')
-const src = keyToPath(props.assetKey, config)
+const src = useKeyPath(props.assetKey, config)
 
 onMounted(() => {
   // check if image loads, the @error.once seems to be cached
@@ -19,17 +21,24 @@ onMounted(() => {
   image.onerror = async () => {
     image.onerror = null
     // @ts-ignore
-    fileStat.value = await $fetch(`/__media_viewer__/stats?key=${props.assetKey}`, {
-      baseURL: '/'
-    })
+    fileStat.value = await $fetch(
+      `/__media_viewer/stats?key=${props.assetKey}`,
+      {
+        baseURL: mvBaseURL
+      }
+    )
     isImage.value = false
   }
   image.src = src.value
 })
 </script>
 
 <template>
-  <NuxtLink :key="props.assetKey" :to="`#${props.assetKey}`" class="transition-all prevent-drag hover:scale-150">
+  <NuxtLink
+    :key="props.assetKey"
+    :to="`#${props.assetKey}`"
+    class="transition-all prevent-drag hover:scale-110"
+  >
     <img
       v-if="isImage"
       :src="`${src}?h=300`"
@@ -38,9 +47,12 @@ onMounted(() => {
       loading="lazy"
       decoding="async"
       draggable="false"
-      class="prevent-drag rounded border select-none pointer-events-none border-slate-100 w-[150px] h-[150px] preview bg-white object-scale-down"
+      class="prevent-drag rounded border select-none pointer-events-none n-border-base w-[150px] h-[150px] preview bg-white object-scale-down"
+    >
+    <div
+      v-else
+      class="rounded flex flex-col justify-center border select-none pointer-events-none n-border-base w-[150px] h-[150px] preview bg-white object-scale-down"
     >
-    <div v-else class="rounded flex flex-col justify-center border select-none pointer-events-none border-slate-100 w-[150px] h-[150px] preview bg-white object-scale-down">
       <div class="truncate w-full text-center">
         {{ fileStat?.name }}
       </div>
@@ -53,10 +65,17 @@ onMounted(() => {
 
 <style scoped>
 .preview {
-  background-image: repeating-conic-gradient(#f8fafc 0% 25%, transparent 0% 50%);
+  background-image: repeating-conic-gradient(
+    #f8fafc 0% 25%,
+    #ffffff 0% 50%
+  );
   background-size: 15px 15px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
+.dark .preview {
+  background-image: repeating-conic-gradient(#1c1c1c 0% 25%, #151515 0% 50%);
+}
+
 .prevent-drag {
   -webkit-user-drag: none;
   -khtml-user-drag: none;

src/client/components/MediaGalleryItem.vue renamed to client/components/MediaGalleryItem.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { computed, reactive, provide, watchEffect, watch } from 'vue'
 // @ts-ignore
-import { useRoute } from '#app'
+import { useRuntimeConfig, useRoute } from '#app'
 
-import type { PreviewState } from '../../../types/preview'
-import { vFocus, generateSnippet } from '../shared'
+import type { PreviewState } from '../../types/preview'
 import MediaPreviewImage from './MediaPreviewImage.vue'
 import MediaPreviewStats from './MediaPreviewStats.vue'
+import { generateSnippet } from '~~/utils/snippets'
+import { vFocus } from '~~/utils/directives'
 
 // keep track of the current image in hash so we can use the history
 const route = useRoute()
 const selectedAssetKey = computed(() => route.hash ? route.hash.substring(1) : '')
+const mvBaseURL = useRuntimeConfig().public.mvBaseURL
 
 // provide state to childs
 const previewState = reactive({
@@ -32,8 +34,8 @@ watchEffect(async () => {
   }
 
   // @ts-ignore
-  previewState.stats = await $fetch(`/__media_viewer__/stats?key=${selectedAssetKey.value}`, {
-    baseURL: '/'
+  previewState.stats = await $fetch(`/__media_viewer/stats?key=${selectedAssetKey.value}`, {
+    baseURL: mvBaseURL
   })
 
   // reset preview state
@@ -54,11 +56,6 @@ watch(previewState, () => {
 
 // prevent gallery scrolling when preview modal is open
 watchEffect(() => {
-  // @ts-ignore
-  if (process.server) {
-    return
-  }
-
   if (selectedAssetKey.value) {
     document.documentElement.classList.add('overflow-hidden')
   } else {
@@ -68,9 +65,8 @@ watchEffect(() => {
 </script>
 
 <template>
-  <ClientOnly>
-    <NuxtLink v-if="selectedAssetKey" to="/" class="fixed inset-0 transition-all hover:backdrop-blur-none backdrop-blur-sm bg-white/30" />
-    <div v-show="selectedAssetKey" class="fixed inset-0 my-24 mx-32">
+  <div>
+    <div v-show="selectedAssetKey" class="fixed inset-0">
       <Transition
         enter-active-class="transition duration-100 ease-out"
         enter-from-class="transform scale-0 opacity-0"
@@ -79,13 +75,13 @@ watchEffect(() => {
         leave-from-class="transform scale-1 opacity-100"
         leave-to-class="transform scale-0 opacity-0"
       >
-        <div v-if="selectedAssetKey" v-focus tabindex="0" class="rounded border border-slate-100 drop-shadow-sm flex flex-1 relative bg-white h-full items-center justify-center">
+        <div v-if="selectedAssetKey" v-focus tabindex="0" class="rounded border n-border-base drop-shadow-sm flex flex-1 relative n-bg-base h-full items-center justify-center">
           <div class="rounded flex flex-1 h-full w-full">
-            <MediaPreviewImage :selected-asset-key="selectedAssetKey" />
-            <MediaPreviewStats :selected-asset-key="selectedAssetKey" />
+            <MediaPreviewImage class="w-6/12 md:w-7/12 lg:w-8/12" :selected-asset-key="selectedAssetKey" />
+            <MediaPreviewStats class="w-6/12 md:w-5/12 lg:w-4/12" :selected-asset-key="selectedAssetKey" />
           </div>
         </div>
       </Transition>
     </div>
-  </ClientOnly>
+  </div>
 </template>

src/client/components/MediaPreview.vue renamed to client/components/MediaPreview.vue

@@ -2,8 +2,8 @@
 import { ref, computed, inject, watchEffect, onBeforeUnmount, watch } from 'vue'
 // @ts-ignore
 import { useRoute } from '#app'
-import { keyToPath } from '../shared'
-import type { PreviewState } from '../../../types/preview'
+import type { PreviewState } from '../../types/preview'
+import { useKeyPath } from '~~/composables/keys'
 
 const route = useRoute()
 
@@ -12,7 +12,7 @@ const mode = ref<'scale' | 'real'>('scale')
 const config = inject<any>('mediaViewerConfig')
 
 const selectedAssetKey = computed(() => route.hash ? route.hash.substring(1) : '')
-const selectedAssetSrc = keyToPath(selectedAssetKey, config)
+const selectedAssetSrc = useKeyPath(selectedAssetKey, config)
 
 const previewState = inject<PreviewState>('previewState')
 const isImage = computed(() => previewState?.stats?.mimetype?.startsWith('image/'))
@@ -64,8 +64,8 @@ watch(mode, () => {
 </script>
 
 <template>
-  <div class="relative overflow-hidden rounded-l border-slate-100 border-r preview w-7/12 flex items-center justify-center">
-    <div v-if="!isImage" class="rounded flex flex-col justify-center border select-none pointer-events-none border-slate-100 w-[150px] h-[150px] bg-white object-scale-down">
+  <div class="relative overflow-hidden rounded-l n-border-base border-r preview flex items-center justify-center">
+    <div v-if="!isImage" class="rounded flex flex-col justify-center border select-none pointer-events-none n-border-base w-[150px] h-[150px] n-bg-base object-scale-down">
       <div class="truncate w-full text-center">
         {{ previewState?.stats?.name }}
       </div>
@@ -92,41 +92,44 @@ watch(mode, () => {
       class="prevent-drag block object-scale-down w-full max-w-full max-h-full"
       tabindex="0"
     >
-    <div class="absolute right-6 top-6 flex gap-2">
+    <div class="absolute left-4 right-4 top-4 flex justify-between gap-2">
+      <NButton
+        to="/"
+        icon="carbon:arrow-left"
+        class="n-bg-base"
+      >
+        <span>Back</span>
+      </NButton>
       <div>
-        <button
-          type="button"
-          class=" text-sm py-1 px-3 rounded-l border-r-0 border border-slate-100 disabled:opacity-60 disabled:cursor-not-allowed active:hover:bg-indigo-400 active:hover:text-white"
+        <NButton
           :class="[
-            mode === 'scale' && 'bg-indigo-400 text-white',
-            mode !== 'scale' && 'bg-white',
+            mode === 'scale' ? 'bg-primary' : 'n-bg-base',
           ]"
+          class="border-r-0 rounded-r-none"
           :disabled="!isImage"
           @click="mode = 'scale'"
         >
           Overview
-        </button>
-        <button
-          type="button"
-          class=" text-sm py-1 px-3 rounded-r bg-white border border-slate-100 disabled:opacity-60 disabled:cursor-not-allowed active:hover:bg-indigo-400 active:hover:text-white"
+        </NButton>
+        <NButton
           :class="[
-            mode === 'real' && 'bg-indigo-400 text-white',
-            mode !== 'real' && 'bg-white',
+            mode === 'real' ? 'bg-primary' : 'n-bg-base',
           ]"
+          class="border-l-0 rounded-l-none"
           :disabled="!isImage"
           @click="mode = 'real'"
         >
-          Realtime preview
-        </button>
+          Real-size preview
+        </NButton>
       </div>
 
-      <a
-        :href="selectedAssetSrc"
-        class=" text-sm py-1 px-3 rounded bg-white border border-slate-100 hover:bg-indigo-400 hover:text-white"
+      <NButton
+        :to="selectedAssetSrc"
         target="_blank"
+        class="n-bg-base"
       >
         Open in new tab
-      </a>
+      </NButton>
     </div>
   </div>
 </template>
@@ -137,6 +140,9 @@ watch(mode, () => {
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
+.dark .preview {
+  background-image: repeating-conic-gradient(#1c1c1c 0% 25%, #151515 0% 50%);
+}
 .prevent-drag, .prevent-drag:deep(*) {
   -webkit-user-drag: none;
   -khtml-user-drag: none;