Allow inserting dynamic field tokens while creating SMS templates.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/SmsComposeModal.vue

@@ -147,20 +147,15 @@ function insertField(token: string) {
       el.setSelectionRange(caret, caret);
     });
   }
-  fieldsOpen.value = false;
 }
 
 function toggleFields() {
   fieldsOpen.value = !fieldsOpen.value;
-  if (fieldsOpen.value) templatesOpen.value = false;
 }
 
 function toggleTemplates() {
   templatesOpen.value = !templatesOpen.value;
-  if (templatesOpen.value) {
+  if (templatesOpen.value) void loadTemplates();
-    fieldsOpen.value = false;
-    void loadTemplates();
-  }
 }
 
 function applyTemplate(item: SmsTemplateDto) {
@@ -290,6 +285,18 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
             </button>
           </li>
         </ul>
+        <div class="tpl-fields" role="group" aria-label="فیلدهای پویا برای متن آماده">
+          <span class="tpl-fields-label">درج فیلد در متن:</span>
+          <button
+            v-for="item in MESSAGE_AUTOMATION_FIELDS"
+            :key="`tpl-${item.token}`"
+            type="button"
+            :title="item.label"
+            @click="insertField(item.token)"
+          >
+            <code>{{ item.token }}</code>
+          </button>
+        </div>
         <form class="save-row" @submit.prevent="saveTemplate">
           <input
             v-model="templateName"
@@ -497,6 +504,37 @@ function statusLabel(status: OutboundSmsLogDto['status']) {
   padding: 0.35rem 0.45rem;
 }
 
+.tpl-fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  margin-top: 0.15rem;
+  padding-top: 0.35rem;
+  border-top: 1px solid #eef2f7;
+}
+
+.tpl-fields-label {
+  color: #64748b;
+  font-size: 0.74rem;
+  margin-inline-end: 0.15rem;
+}
+
+.tpl-fields button {
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
+  background: #fff;
+  color: var(--accent-deep);
+  border-radius: 999px;
+  font: inherit;
+  font-size: 0.74rem;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+}
+
+.tpl-fields code {
+  color: inherit;
+}
+
 .save-row {
   display: flex;
   gap: 0.3rem;