fix(dev): improve vfs ui (#802)

nitrojs · Jan 16, 2023 · acc298c · acc298c
1 parent d63f07b
commit acc298c
Showing 1 changed file with 23 additions and 12 deletions.
diff --git a/src/dev/vfs.ts b/src/dev/vfs.ts
@@ -47,16 +47,16 @@ export function createVFSHandler(nitro: Nitro) {
             : "hover:bg-gray-800 text-gray-200";
         return `<li class="flex flex-nowrap"><a href="/_vfs/${encodeURIComponent(
           key
-        )}" class="w-full text-sm px-2 py-1 border-b border-gray-500 ${linkClass}">${key.replace(
+        )}" class="w-full text-sm px-2 py-1 border-b border-gray-10 ${linkClass}">${key.replace(
           nitro.options.rootDir,
           ""
         )}</a></li>`;
       })
       .join("\n");
 
     const files = `
-      <div>
-        <p class="bg-gray-700 text-white text-bold border-b border-gray-500 text-center">virtual files</p>
+      <div class="h-full overflow-auto border-r border-gray:10">
+        <p class="text-white text-bold text-center py-1 opacity-50">Virtual Files</p>
         <ul class="flex flex-col">${items}</ul>
       </div>
       `;
@@ -71,8 +71,8 @@ export function createVFSHandler(nitro: Nitro) {
           wordWrapColumn: 80,
         })
       : `
-        <div class="m-2">
-          <h1 class="text-white">Select a virtual file to inspect</h1>
+        <div class="w-full h-full flex opacity-50">
+          <h1 class="text-white m-auto">Select a virtual file to inspect</h1>
         </div>
       `;
 
@@ -83,9 +83,18 @@ export function createVFSHandler(nitro: Nitro) {
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
   <link rel="stylesheet" data-name="vs/editor/editor.main" href="${vsUrl}/editor/editor.main.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
+  <style>
+    html {
+      background: #1E1E1E;
+      color: white;
+    }
+    [un-cloak] {
+      display: none;
+    }
+  </style>
 </head>
 <body class="bg-[#1E1E1E]">
-  <div class="flex">
+  <div un-cloak class="h-screen h-screen grid grid-cols-[300px_1fr]">
     ${files}
     ${file}
   </div>
@@ -99,7 +108,7 @@ const monacoUrl = `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/${monaco
 const vsUrl = `${monacoUrl}/vs`;
 
 const editorTemplate = (options: Record<string, any>) => `
-<div id="editor" class="min-h-screen flex-1"></div>
+<div id="editor" class="min-h-screen w-full h-full"></div>
 <script src="${vsUrl}/loader.min.js"></script>
 <script>
   require.config({ paths: { vs: '${vsUrl}' } })
@@ -110,10 +119,12 @@ const editorTemplate = (options: Record<string, any>) => `
   \`], { type: 'text/javascript' }))
   window.MonacoEnvironment = { getWorkerUrl: () => proxy }
 
-  require(['vs/editor/editor.main'], function () {
-    monaco.editor.create(document.getElementById('editor'), ${JSON.stringify(
-      options
-    )})
-  })
+  setTimeout(() => {
+    require(['vs/editor/editor.main'], function () {
+      monaco.editor.create(document.getElementById('editor'), ${JSON.stringify(
+        options
+      )})
+    })
+  }, 0);
 </script>
 `;