Improve UI/UX style

assets/vendor/manager/src/assets/_general.scss

@@ -22,6 +22,13 @@
     }
 }
 
+.astroid-footer-links {
+    font-size: 0.897rem;
+    img {
+        max-width: 30px;
+    }
+}
+
 @for $i from 6 through 12 {
     .order-#{$i} {
         order: #{$i} !important;

assets/vendor/manager/src/components/Heading.vue

@@ -30,12 +30,11 @@ watch(switcher, (newValue) => {
 })
 
 const social_menu = [
+  {title: 'Astroid Website', href: props.config.astroid_lib.astroid_link, icon: 'fas fa-meteor'},
   {title: 'Docs', href: props.config.astroid_lib.document_link, icon: 'fas fa-book'},
   {title: 'GitHub', href: props.config.astroid_lib.github_link, icon: 'fab fa-github'},
-  {title: 'Videos Tutorial', href: props.config.astroid_lib.video_tutorial, icon: 'fab fa-youtube'},
-  {title: 'Astroid Website', href: props.config.astroid_lib.astroid_link, icon: 'fas fa-meteor'},
+  {title: 'Buy Me a Coffee', href: props.config.astroid_lib.donate_link, icon: 'fa-solid fa-mug-saucer'}
 ]
-
 function submitForm() {
   const action_link = props.config.astroid_lib.astroid_action.replace(/\&amp\;/g, '&');
   const toastAstroidMsg = document.getElementById('astroidMessage');

assets/vendor/manager/src/components/Main.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, ref, reactive } from 'vue';
+import { onBeforeMount, ref, reactive, inject } from 'vue';
 import axios from "axios";
 import Fields from './helpers/Fields.vue'
 
@@ -11,6 +11,7 @@ const props = defineProps({
 
 const $scope = ref(new Object());
 const astroidcontentlayouts = ref(new Object());
+const constant  =   inject('constant', {});
 let action_link = '';
 
 onBeforeMount(() => {
@@ -180,6 +181,11 @@ function selectPreset(event, group) {
         </div>
       </div>
     </form>
+    <nav class="nav justify-content-center mb-3 astroid-footer-links">
+      <a class="nav-link d-inline-flex align-items-center" href="https://ko-fi.com/astroidframework" data-bs-toggle="tooltip" data-bs-title="Buy Me a Coffee" target="_blank"><img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Buy Me a Coffee" class="me-2">Support Astroid with $10</a>
+      <a class="nav-link" :href="constant.astroid_link" data-bs-toggle="tooltip" data-bs-title="Go to Astroid Framework" target="_blank">Astroid Framework</a>
+      <a class="nav-link" :href="constant.document_link" data-bs-toggle="tooltip" data-bs-title="Go to Documentation" target="_blank">Documentation</a>
+    </nav>
     <div class="toast-container position-fixed bottom-0 end-0 p-3">
       <div id="loadGroupPreset" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">

assets/vendor/manager/src/components/helpers/Layout.vue

@@ -17,6 +17,7 @@ const language  =   inject('language', []);
 
 onBeforeMount(()=>{
     layout.value    =   props.field.input.value;
+    form_template.value = constant.form_template;
     if (typeof layout.value.devices === 'undefined') {
         layout.value.devices = [ 
             { "code": "lg", "icon": "fa-solid fa-computer", "title": "Large Device" }, 
@@ -42,8 +43,6 @@ onBeforeMount(()=>{
             // handle error
             console.log(error);
         });
-    } else {
-        form_template.value = constant.form_template;
     }
 })
 onUpdated(()=>{

assets/vendor/manager/src/components/helpers/SubLayouts.vue

@@ -62,13 +62,15 @@ function editLayout(filename = '') {
                 formInfo.desc = response.data.data.desc;
                 formInfo.thumbnail = response.data.data.thumbnail;
                 formInfo.name = filename;
+                editItem.value = true;
             }
         })
         .catch((err) => {
             console.error(err);
         });
+    } else {
+        editItem.value = true;
     }
-    editItem.value = true;
 }
 
 function onFileChange(e) {