move ifac settings to its own card section

src/frontend/components/interfaces/AddInterfacePage.vue

@@ -697,55 +697,58 @@
                                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                             />
                         </div>
-                        <div class="mb-4">
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-zinc-100 mb-2">IFAC Settings</h3>
-                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ IFAC (Interface Access Code) settings are used for creating private networks and can be configured on the interface level.</p>
-                            <div class="grid grid-cols-3 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
-                                    <input
-                                        v-model="sharedInterfaceSettings.network_name"
-                                        type="text"
-                                        placeholder="Enter network name"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
-                                    <input
-                                        v-model="sharedInterfaceSettings.passphrase"
-                                        type="text"
-                                        placeholder="Enter passphrase"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
-                                    <input
-                                        v-model="sharedInterfaceSettings.ifac_size"
-                                        type="number"
-                                        min="8"
-                                        max="512"
-                                        placeholder="Enter size (8-512)"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                            </div>
-                        </div>
                     </div>
 
                 </div>
+            </div>
 
-                <div class="p-2">
+            <!-- ifac settings -->
-
+            <ExpandingSection>
-                    <!-- add/save interface button -->
+                <template v-slot:title>IFAC Settings</template>
-                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                <template v-slot:subtitle>Interface Access Code settings are used for creating private networks and can be configured on the interface level.</template>
-                        <span v-if="isEditingInterface">Save Interface</span>
+                <template v-slot:content>
-                        <span v-else>Add Interface</span>
+                    <div class="p-2">
-                    </button>
+                        <div class="grid grid-cols-3 gap-4">
-
+                            <div>
-                </div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
+                                <input
+                                    v-model="sharedInterfaceSettings.network_name"
+                                    type="text"
+                                    placeholder="Enter network name"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
+                                <input
+                                    v-model="sharedInterfaceSettings.passphrase"
+                                    type="text"
+                                    placeholder="Enter passphrase"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
+                                <input
+                                    v-model="sharedInterfaceSettings.ifac_size"
+                                    type="number"
+                                    min="8"
+                                    max="512"
+                                    placeholder="Enter size (8-512)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </ExpandingSection>
 
+            <!-- add/save interface button -->
+            <div class="p-2 bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+                <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    <span v-if="isEditingInterface">Save Interface</span>
+                    <span v-else>Add Interface</span>
+                </button>
             </div>
 
         </div>
@@ -756,10 +759,12 @@
 import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 import ExpandingSectionHeader from "./ExpandingSectionHeader.vue";
+import ExpandingSection from "./ExpandingSection.vue";
 
 export default {
     name: 'AddInterfacePage',
     components: {
+        ExpandingSection,
         ExpandingSectionHeader,
     },
     data() {

src/frontend/components/interfaces/ExpandingSection.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer">
+            <div class="my-auto mr-auto">
+                <div class="font-bold dark:text-white">
+                    <slot name="title"/>
+                </div>
+                <div class="text-sm dark:text-white">
+                    <slot name="subtitle"/>
+                </div>
+            </div>
+            <div class="my-auto ml-2">
+                <div class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
+                        <rect width="256" height="256" fill="none"/>
+                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div v-if="isExpanded" class="divide-y divide-gray-200 dark:text-white">
+            <slot name="content"/>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ExpandingSection',
+    data() {
+        return {
+            isExpanded: false,
+        };
+    },
+}
+</script>

src/frontend/components/interfaces/ExpandingSectionHeader.vue

@@ -15,7 +15,7 @@
 export default {
     name: 'ExpandingSectionHeader',
     props: {
-        isExpanded: false,
+        isExpanded: Boolean,
     },
 }
 </script>