feat: ✨ send emails alert

src/lib/components/Alert.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { createDialog, melt } from "@melt-ui/svelte";
+  import type { SvelteComponent, ComponentType } from "svelte";
+  import { fade } from "svelte/transition";
+
+  export let title: string;
+  export let confirmText: string;
+  export let confirmIcon: ComponentType<SvelteComponent<{ size?: number | string }>> | undefined =
+    undefined;
+
+  const {
+    elements: { trigger, overlay, content, title: titleElement, close, portalled },
+    states: { open },
+  } = createDialog({
+    role: "alertdialog",
+  });
+</script>
+
+<slot name="trigger" trigger={$trigger} />
+
+<div use:melt={$portalled}>
+  {#if $open}
+    <div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
+    <div use:melt={$content} transition:fade={{ duration: 100 }} class="content">
+      <h2 use:melt={$titleElement}>{title}</h2>
+      <p class="tooltip">
+        <slot name="tooltip" />
+      </p>
+      <div class="actions">
+        <button use:melt={$close} aria-label="cancel" class="cancel">Cancel</button>
+        <button class="confirm"
+          ><svelte:component this={confirmIcon} size={14} />{confirmText}</button
+        >
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @use "$lib/styles/button" as button;
+
+  .content {
+    z-index: 1000;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 512px;
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid var(--gray100);
+    background-color: var(--background);
+
+    h2 {
+      font-size: 20px;
+      font-weight: 500;
+      margin: 24px 16px;
+    }
+
+    .tooltip {
+      font-size: 14px;
+      line-height: 20px;
+      margin: 16px;
+      overflow-wrap: break-word;
+
+      :global(a) {
+        color: var(--pink400);
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+      margin: 16px;
+
+      button {
+        @include button.button;
+        width: 100%;
+      }
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+</style>

src/routes/(nav)/[[selectedMember]]/+page.svelte

@@ -1,6 +1,18 @@
+<script context="module" lang="ts">
+  import type { Writable } from "svelte/store";
+
+  export type SelectedContacts = Writable<string[]>;
+</script>
+
 <script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
   import Actions from "./Actions.svelte";
   import Table from "./Table.svelte";
+
+  const selectedContacts: SelectedContacts = writable([]);
+  setContext("selectedContacts", selectedContacts);
 </script>
 
 <Actions />

src/routes/(nav)/[[selectedMember]]/Actions.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
   import AddContact from "./AddContact.svelte";
   import BulkAddContact from "./BulkAddContact.svelte";
+  import SendEmails from "./SendEmails.svelte";
 </script>
 
 <div class="actions">
+  <SendEmails />
   <BulkAddContact />
   <AddContact />
 </div>
 
 <style lang="scss">
   .actions {
+    top: 0;
+    position: sticky;
     display: flex;
     justify-content: flex-end;
-    margin: 12px 16px;
+    padding: 12px 16px;
     gap: 12px;
+    background-color: var(--background);
+    z-index: 500;
+    border-bottom: 1px solid var(--gray100);
   }
 </style>

src/routes/(nav)/[[selectedMember]]/SendEmails.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { melt } from "@melt-ui/svelte";
+  import { Send } from "lucide-svelte";
+  import { getContext } from "svelte";
+
+  import type { SelectedContacts } from "./+page.svelte";
+
+  import Alert from "$lib/components/Alert.svelte";
+
+  const selectedRows = getContext<SelectedContacts>("selectedContacts");
+</script>
+
+<Alert title="Send Emails" confirmText="Send" confirmIcon={Send}>
+  <svelte:fragment slot="tooltip"
+    >You have {$selectedRows.length} contacts selected.</svelte:fragment
+  >
+  <button let:trigger use:melt={trigger} slot="trigger">
+    <Send size={14} /><span>Send Emails</span>
+  </button>
+</Alert>
+
+<style lang="scss">
+  @use "$lib/styles/button" as button;
+
+  button {
+    @include button.button;
+  }
+</style>

src/routes/(nav)/[[selectedMember]]/Table.svelte

@@ -9,14 +9,19 @@
   } from "@tanstack/svelte-table";
   import type { SortingState, RowSelectionState, TableOptions } from "@tanstack/svelte-table";
   import { CheckSquare, Square } from "lucide-svelte";
+  import { getContext } from "svelte";
   import { writable } from "svelte/store";
 
+  import type { SelectedContacts } from "./+page.svelte";
+
   import type { GetContacts } from "$api/contacts";
   import { page } from "$app/stores";
   import Drawer from "$lib/components/Drawer.svelte";
   import LineTableRow from "$lib/components/LineTableRow.svelte";
   import { formatDateToPST } from "$lib/util/formatDateToPST";
 
+  const selectedRows = getContext<SelectedContacts>("selectedContacts");
+
   let sorting = [] as SortingState;
   let rowSelection = {} as RowSelectionState;
   const columnHelper = createColumnHelper<GetContacts[0]>();
@@ -82,6 +87,9 @@
         rowSelection = updater;
       }
 
+      const selectedRowIds = Object.keys(rowSelection).filter((key) => rowSelection[key]);
+      selectedRows.set(selectedRowIds);
+
       options.update((old) => ({
         ...old,
         state: {