fix(messaging): initialize topic, message, and provider id to null

src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte

@@ -23,7 +23,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
     let showCustomId = false;
-    let id: string;
+    let id: string | null = null;
     let subject: string;
     let content: string;
     let topics: string[];

src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte

@@ -24,7 +24,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
     let showCustomId = false;
-    let id: string;
+    let id: string | null = null;
     let file: Models.File;
     let data: Writable<[string, string][]> = writable([['', '']]);
     let title: string;

src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte

@@ -22,7 +22,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
     let showCustomId = false;
-    let id: string;
+    let id: string | null = null;
     let content: string;
     let topics: string[];
     let users: string[];

src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte

@@ -4,14 +4,14 @@
     import { CustomId, LabelCard } from '$lib/components';
     import { providers } from '../store';
     import { InputText } from '$lib/elements/forms';
-    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { Tag, Icon } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { Providers } from '../../provider.svelte';
     import { SmtpEncryption } from '@appwrite.io/console';
 
     let name = '';
     let showCustomId = false;
-    let id: string = null;
+    let id: string | null = null;
 
     $: {
         name;
@@ -152,12 +152,10 @@
 
     {#if !showCustomId}
         <div>
-            <Badge
-                variant="secondary"
-                content="Provider ID"
-                on:click={() => (showCustomId = !showCustomId)}>
-                <Icon icon={IconPencil} size="s" slot="start" />
-            </Badge>
+            <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" />
+                Provider ID
+            </Tag>
         </div>
     {:else}
         <CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />

src/routes/(console)/project-[region]-[project]/messaging/topics/create.svelte

@@ -14,7 +14,9 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string, error: string;
+    let name: string,
+        id: string | null = null,
+        error: string;
     let showCustomId = false;
 
     const create = async () => {