fix(ui): update template editor layout

- remove modal, everything in one screent

src/components/HorizontalResizer.vue

@@ -10,12 +10,14 @@
       :show="resizing"
       placement="left"
       class="
-        p-1
+        px-1
-        bg-white
+        py-0.5
         border
-        rounded
+        rounded-md
         shadow
-        text-sm text-center text-gray-800
+        text-sm text-center
+        bg-gray-900
+        text-gray-100
       "
       style="min-width: 2rem"
     >

src/pages/Desk.vue

@@ -46,6 +46,7 @@ import { toggleSidebar } from 'src/utils/ui';
         rtl-rotate-180
         p-1
         m-4
+        opacity-0
         hover:opacity-100 hover:shadow-md
       "
       @click="() => toggleSidebar()"

src/pages/TemplateBuilder/TemplateBuilder.vue

@@ -21,24 +21,85 @@
     <!-- Template Builder Body -->
     <div
       v-if="doc"
-      class="w-full overflowauto bg-gray-25 grid"
+      class="w-full bg-gray-25 grid"
       :style="templateBuilderBodyStyles"
     >
       <!-- Template Display Area -->
-      <div class="overflow-auto custom-scroll p-4">
+      <div
+        class="overflow-auto custom-scroll flex flex-col"
+        style="height: calc(100vh - var(--h-row-largest) - 1px)"
+      >
         <!-- Display Hints -->
-        <div v-if="helperMessage" class="text-sm text-gray-700">
+        <p v-if="helperMessage" class="text-sm text-gray-700 p-4">
           {{ helperMessage }}
-        </div>
+        </p>
 
-        <!-- Template Container -->
+        <div
-        <PrintContainer
+          v-else-if="doc.template && values"
-          ref="printContainer"
+          class="p-4 overflow-auto custom-scroll"
-          v-if="doc.template && values"
+        >
-          :template="doc.template"
+          <!-- Template Container -->
-          :values="values"
+          <PrintContainer
-          :scale="scale"
+            ref="printContainer"
-        />
+            :template="doc.template"
+            :values="values"
+            :scale="scale"
+          />
+        </div>
+        <div
+          class="
+            w-full
+            sticky
+            bottom-0
+            flex
+            bg-white
+            border-t
+            mt-auto
+            flex-shrink-0
+          "
+        >
+          <FormControl
+            :title="fields.type.label"
+            class="w-40 border-r flex-shrink-0"
+            :df="fields.type"
+            :border="false"
+            :value="doc.get('type')"
+            @change="async (value) => await setType(value)"
+          />
+
+          <FormControl
+            v-if="doc.type"
+            :title="displayDocField.label"
+            class="w-40 border-r flex-shrink-0"
+            :df="displayDocField"
+            :border="false"
+            :value="displayDoc?.name"
+            @change="(value: string) => setDisplayDoc(value)"
+          />
+
+          <div
+            class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
+          >
+            <p class="text-sm text-gray-600 my-auto">{{ t`Display Scale` }}</p>
+            <input
+              type="number"
+              class="
+                my-auto
+                w-10
+                text-base text-end
+                bg-transparent
+                text-gray-800
+                focus:text-gray-900
+              "
+              :value="scale"
+              @change="setScale"
+              @input="setScale"
+              min="0.1"
+              max="10"
+              step="0.05"
+            />
+          </div>
+        </div>
       </div>
 
       <!-- Input Panel Resizer -->
@@ -199,6 +260,14 @@ export default defineComponent({
     this.wasSidebarShown = showSidebar.value;
   },
   methods: {
+    setScale({ target }: Event) {
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+
+      const scale = Number(target.value);
+      this.scale = Math.max(Math.min(scale, 10), 0.15);
+    },
     toggleEditMode() {
       this.editMode = !this.editMode;
 
@@ -268,6 +337,14 @@ export default defineComponent({
         this.name
       )) as PrintTemplate;
     },
+    async setType(value: unknown) {
+      if (typeof value !== 'string') {
+        return;
+      }
+
+      await this.doc?.set('type', value);
+      await this.setDisplayInitialDoc();
+    },
     async setDisplayDoc(value: string) {
       if (!value) {
         delete this.hints;

src/pages/TemplateBuilder/TemplateEditor.vue

@@ -215,7 +215,8 @@ function getCompletionOption(
 }
 
 .cm-gutters {
-  border: none !important;
+  border: none black !important;
+  border-right: 1px solid theme('colors.gray.200') !important;
 }
 
 .cm-activeLine,