fix: sms layout

src/routes/console/project-[project]/auth/templates/+page.svelte

@@ -96,28 +96,36 @@
     import EmailInviteTemplate from './emailInviteTemplate.svelte';
     import SmsVerificationTemplate from './smsVerificationTemplate.svelte';
     import SmsLoginTemplate from './smsLoginTemplate.svelte';
-    import { emailTemplate } from './strote';
+    import { emailTemplate, smsTemplate } from './strote';
     import type { Models } from '@appwrite.io/console';
 
     export let data: PageData;
     const projectId = $page.params.project;
 
-    let emailVerificationOpen = true;
-    let emailMagicSessionOpen = false;
     let emailOpen = 'verification';
     $: emailVerificationOpen = emailOpen === 'verification';
     $: emailMagicSessionOpen = emailOpen === 'magicSession';
     $: emailResetPassword = emailOpen === 'recovery';
     $: emailInviteUser = emailOpen === 'invitation';
 
+    let smsOpen = 'verification';
+    $: smsVerificationOpen = smsOpen === 'verification';
+    $: smsLoginOpen = smsOpen === 'login';
+    $: smsInvitationOpen = smsOpen === 'invitation';
+
     onMount(async () => {
         openEmail('verification');
+        openSms('verification');
     });
 
     async function openEmail(type: string) {
         emailOpen = type;
         $emailTemplate = await loadEmailTemplate(projectId, type, 'en-us');
     }
+    async function openSms(type: string) {
+        smsOpen = type;
+        $smsTemplate = await loadSmsTemplate(projectId, type, 'en-us');
+    }
 </script>
 
 <Container>
@@ -210,18 +218,33 @@
 
         <svelte:fragment slot="aside">
             <Collapsible>
-                <CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={smsVerificationOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openSms('verification');
+                    }}>
                     <svelte:fragment slot="title">Verification</svelte:fragment>
                     <p class="text">
                         Send a verification SMS to users that sign in with their phone
                     </p>
                     <SmsVerificationTemplate localeCodes={data.localeCodes} />
                 </CollapsibleItem>
-                <CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={smsLoginOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openSms('login');
+                    }}>
                     <svelte:fragment slot="title">Login</svelte:fragment>
                     <SmsLoginTemplate localeCodes={data.localeCodes} />
                 </CollapsibleItem>
-                <CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={smsInvitationOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openSms('invitation');
+                    }}>
                     <svelte:fragment slot="title">Invitation</svelte:fragment>
                     <SmsLoginTemplate localeCodes={data.localeCodes} />
                 </CollapsibleItem>

src/routes/console/project-[project]/auth/templates/smsTemplate.svelte

@@ -14,10 +14,14 @@
 
 <Form onSubmit={submit}>
     <FormList>
-        <InputTextarea bind:value={$smsTemplate.message} id="message" label="Message" />
+        <InputTextarea
+            bind:value={$smsTemplate.message}
+            id="message"
+            label="Message"
+            placeholder="Enter your message" />
+        <div class="u-flex u-gap-32 u-main-end">
+            <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
+            <Button submit>Update</Button>
+        </div>
     </FormList>
-    <div class="u-flex u-gap-32 u-main-end">
-        <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
-        <Button submit>Update</Button>
-    </div>
 </Form>