chore: Improve the style of DiffEditor (#69)

Author: CoutinhoTTS

packages/devtools-vite/src/app/components/code/Viewer.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type CodeMirror from 'codemirror'
+import { onMounted, toRefs, useTemplateRef, watchEffect } from 'vue'
+import { useCodeMirror } from '~/composables/codemirror'
+import { settings } from '~/state/settings'
+
+const props = defineProps<{
+  code: string
+}
+>()
+
+const { code } = toRefs(props)
+
+let cm: CodeMirror.Editor
+
+const codeEl = useTemplateRef('codeEl')
+
+onMounted(() => {
+  cm = useCodeMirror(
+    codeEl,
+    code,
+    {
+      mode: 'javascript',
+      readOnly: true,
+      lineNumbers: true,
+    },
+  )
+  watchEffect(() => {
+    cm.setOption('lineWrapping', settings.value.codeviewerLineWrap)
+  })
+})
+</script>
+
+<template>
+  <div ref="codeEl" />
+</template>

packages/devtools-vite/src/app/components/data/AssetDetails.vue

@@ -99,11 +99,8 @@ function openInEditor() {
         <DisplayCloseButton @click="showSource = false" />
       </div>
       <div class="w-full of-auto px2 py1" border="~ base rounded-lg">
-        <CodeDiffEditor
-          :from="asset.content!"
-          :to="asset.content!"
-          :diff="false"
-          :one-column="true"
+        <CodeViewer
+          :code="asset.content!"
         />
       </div>
     </template>

packages/devtools-vite/src/app/styles/splitpanes.css

@@ -27,20 +27,27 @@
 
 .splitpanes--vertical>.splitpanes__splitter {
   width: 0 !important;
+  min-width: 0 !important;
 }
 
 .splitpanes--horizontal>.splitpanes__splitter {
   height: 0 !important;
+  min-height: 0 !important;
 }
 
 .splitpanes--vertical>.splitpanes__splitter:before {
   left: -5px;
-  right: -4px;
+  right: -5px;
   height: 100%;
 }
 
 .splitpanes--horizontal>.splitpanes__splitter:before {
   top: -5px;
-  bottom: -4px;
+  bottom: -5px;
   width: 100%;
 }
+
+.splitpanes__pane[style*="display: none"]+.splitpanes__splitter,
+.splitpanes__pane[hidden]+.splitpanes__splitter {
+  display: none;
+}