feat: add tree spacing and move arrage outside

src/components/shared/TreeView.vue

@@ -107,42 +107,41 @@ function toggleExpand(node: Node, ancestor?: []) {
         :data="{ node, toggleExpand, toggleCheck }"
       />
 
-      <template v-else>
+      <div class="row items-center" v-else>
+        <div v-if="!level && movable" style="width: var(--size-16)">
+          <q-btn
+            id="btn-up"
+            for="btn-up"
+            icon="mdi-arrow-up"
+            size="sm"
+            dense
+            flat
+            round
+            :disable="i === 0"
+            style="color: hsl(var(--text-mute-2))"
+            @click.stop="$emit('moveUp', node)"
+          />
+          <q-btn
+            id="btn-down"
+            for="btn-down"
+            icon="mdi-arrow-down"
+            size="sm"
+            dense
+            flat
+            round
+            class="q-mx-sm"
+            :disable="i === nodes.length - 1"
+            style="color: hsl(var(--text-mute-2))"
+            @click.stop="$emit('moveDown', node)"
+          />
+        </div>
         <div
-          class="item__content row items-center no-wrap"
+          class="item__content row items-center no-wrap col"
           :class="{ active: selectedNode?.includes(node) }"
           @click="
             () => (selectable ? $emit('select', node) : toggleExpand(node))
           "
         >
-          <div v-if="!level && movable" style="width: var(--size-16)">
-            <q-btn
-              id="btn-up"
-              for="btn-up"
-              icon="mdi-arrow-up"
-              size="sm"
-              dense
-              flat
-              round
-              :disable="i === 0"
-              style="color: hsl(var(--text-mute-2))"
-              @click.stop="$emit('moveUp', node)"
-            />
-            <q-btn
-              id="btn-down"
-              for="btn-down"
-              icon="mdi-arrow-down"
-              size="sm"
-              dense
-              flat
-              round
-              class="q-mx-sm"
-              :disable="i === nodes.length - 1"
-              style="color: hsl(var(--text-mute-2))"
-              @click.stop="$emit('moveDown', node)"
-            />
-          </div>
-
           <div style="width: var(--size-6); margin-right: var(--size-1)">
             <div
               v-if="level !== maxLevel"
@@ -219,11 +218,12 @@ function toggleExpand(node: Node, ancestor?: []) {
             @click.stop="$emit('delete', node)"
           />
         </div>
-      </template>
+      </div>
 
       <transition name="slide">
         <div
           v-if="node.opened && node.children && node.children.length > 0"
+          :class="{ 'q-pl-xl': movable }"
           class="tree-children"
         >
           <TreeView
@@ -285,7 +285,7 @@ function toggleExpand(node: Node, ancestor?: []) {
   </div>
 </template>
 
-<style lang="css">
+<style lang="css" scoped>
 .tree-container {
   display: flex;
   flex-direction: column;