feat: add caret to file tree

components/PanelEditorFileSystemTree.vue

@@ -77,6 +77,18 @@ const icon = computed(() => {
     return getFileIcon(props.name!)
   }
 })
+
+const folderCaret = computed(() => {
+  const icon = 'i-ph-caret-right transition-transform duration-300 op50'
+  if (props.directory) {
+    return isDirectoryOpen.value
+      ? `${icon} rotate-90`
+      : icon
+  }
+  else {
+    return 'opacity-0'
+  }
+})
 </script>
 
 <template>
@@ -85,23 +97,24 @@ const icon = computed(() => {
       v-if="name"
       hover="bg-active"
       :style="{
-        paddingLeft: `${0.8 + 0.8 * (props.depth)}rem`,
+        paddingLeft: `${0.2 + 0.8 * (props.depth)}rem`,
       }"
       :class="isFileSelected ? 'bg-active' : 'saturate-0 text-faded'"
-      w-full flex items-center gap-2 px2 py1 text-left text-sm
+      w-full flex items-center gap-1 px2 py1 text-left text-sm
       @click="handleClick"
     >
+      <div :class="folderCaret" h-4 w-4 flex-none />
       <div :class="icon" h-4 w-4 flex-none />
-      {{ name }}
+      <span ml1>{{ name }}</span>
     </button>
     <div v-if="directory" v-show="isDirectoryOpen">
       <PanelEditorFileSystemTree
         v-for="(child, chileName) in sortedDirectory"
         :key="chileName"
         v-model="selectedFile"
         :name="chileName.toString()"
-        v-bind="child"
         :depth="depth + 1"
+        v-bind="child"
       />
     </div>
   </div>