From 4d8dea9b2f900051c9fd5421f00a4482da85dd08 Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:05:58 -0600
Subject: [PATCH] fix(devtools): enhance UI with improvments

---
 client/app.vue | 116 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 83 insertions(+), 33 deletions(-)

diff --git a/client/app.vue b/client/app.vue
index a853b14..fc31706 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -51,11 +51,12 @@ function prettyURL(font: NormalizedFontFaceData) {
 </script>
 
 <template>
-  <main
-    :grid="`~ ${selected ? 'cols-2' : 'cols-1'}`"
-    class="h-screen of-hidden"
+  <NSplitPane
+    storage-key="devtools:fonts"
+    class="!h-screen"
+    :min-size="30"
   >
-    <div class="of-auto">
+    <template #left>
       <NNavbar v-model:search="search">
         <!-- TODO: add support for editing fonts config -->
         <!-- <template #actions>
@@ -102,10 +103,10 @@ function prettyURL(font: NormalizedFontFaceData) {
           </small>
         </NCard>
       </div>
-    </div>
-    <div
+    </template>
+    <template
       v-if="selected"
-      class="border-l border-base of-auto"
+      #right
     >
       <NNavbar>
         <template #actions>
@@ -139,27 +140,47 @@ function prettyURL(font: NormalizedFontFaceData) {
         </template>
       </NNavbar>
       <div class="p-4 overflow-hidden">
-        <section class="border-b border-base mb-4 pb-4">
-          <span class="op-40">
-            Properties:
-          </span>
-          <div v-if="selected.type">
-            type: {{ selected.type }}
+        <NSectionBlock
+          text="Properties"
+          icon="i-carbon-information"
+          container-class="font-mono text-xs"
+        >
+          <div class="flex items-center gap-2">
+            <div class="op-60">
+              type:
+            </div>
+            <div>
+              {{ selected.type }}
+            </div>
           </div>
-          <div v-if="'provider' in selected">
-            provider: {{ selected.provider }}
+          <div class="flex items-center gap-2">
+            <div class="op-60">
+              provider:
+            </div>
+            <div v-if="'provider' in selected">
+              {{ selected.provider }}
+            </div>
           </div>
-        </section>
-        <section class="border-b border-base mb-4 pb-4 flex flex-col gap-4">
-          <span class="op-40">
-            Fonts:
-          </span>
+          <div class="flex items-center gap-2">
+            <div class="op-60">
+              font family:
+            </div>
+            <div>
+              {{ selected.fontFamily }}
+            </div>
+          </div>
+        </NSectionBlock>
+        <NSectionBlock
+          text="Fonts"
+          icon="i-carbon-text-align-left"
+          container-class="font-mono text-xs"
+        >
           <div
             v-for="font, index of selected.fonts"
             :key="index"
             class="flex justify-between items-center gap-2"
           >
-            <div class="font-mono text-xs flex flex-col gap-1">
+            <div class="flex flex-col gap-1">
               <span class="line-clamp-1">
                 {{ prettyURL(font) }}
               </span>
@@ -186,21 +207,50 @@ function prettyURL(font: NormalizedFontFaceData) {
               :to="font.src.find((i) => 'url' in i)?.url"
             />
           </div>
-        </section>
-        <section class="mb-4 pb-4 flex flex-col gap-4 overflow-x-scroll">
-          <span class="op-40">
-            Generated CSS:
-          </span>
+        </NSectionBlock>
+        <NSectionBlock
+          text="Generated CSS"
+          icon="i-carbon-paint-brush"
+        >
           <NCodeBlock
             v-if="selected.css"
             :code="selected.css"
+            lang="css"
+            class="overflow-x-scroll border border-base rounded-lg"
           />
-          <!-- dev only, will remove it later -->
-          <!-- <NCodeBlock
-            :code="JSON.stringify(selected, null, 2)"
-          /> -->
-        </section>
+        </NSectionBlock>
       </div>
-    </div>
-  </main>
+    </template>
+  </NSplitPane>
 </template>
+
+<style>
+.shiki-themes.vitesse-dark {
+  background-color: #121212!important;
+  padding-top: 10px;
+  border-radius: 10px;
+}
+
+details {
+  border: 0;
+  border-right: 1px solid rgb(156 163 175 / 0.2)!important;
+  border-left: 1px solid rgb(156 163 175 / 0.2)!important;
+}
+
+details:first-of-type {
+  border-top: 1px solid rgb(156 163 175 / 0.2);
+}
+
+details:not(:first-of-type):not(:last-of-type) {
+  border: 1px solid rgb(156 163 175 / 0.2);
+  border-left: 1px solid rgb(156 163 175 / 0.2);
+}
+
+details:last-of-type {
+  border-bottom: 1px solid rgb(156 163 175 / 0.2);
+}
+
+details[open] summary {
+  border-bottom: 1px solid rgb(156 163 175 / 0.2)!important;
+}
+</style>