New modal event

src/App.svelte

@@ -8,8 +8,7 @@
   import dayGridPlugin from '@fullcalendar/daygrid';
   import listPlugin from '@fullcalendar/list';
   import frLocale from '@fullcalendar/core/locales/fr';
-  import Modal, { bind } from 'svelte-simple-modal';
-  import EventDetails from './EventDetails.svelte';
+  import EventModal from './EventModal.svelte';
   import FilterBar from './FilterBar.svelte';
   import { refreshEvents, calendarTree } from './calendar';
   import { debounce } from 'lodash';
@@ -18,7 +17,11 @@
   import 'bootstrap-icons/font/bootstrap-icons.css';
   import bootstrap5Plugin from '@fullcalendar/bootstrap5';
 
-  const modal = writable(null);
+  const event = writable(null);
+
+  let openModal = false;
+  const toggle = () => (openModal = !openModal);
+
   let calendar;
 
   let options = writable({
@@ -42,7 +45,8 @@
     nowIndicator: true,
     now: new Date(),
     eventClick: info => {
-      modal.set(bind(EventDetails, { event: info.event }));
+      openModal = true;
+      event.set(info.event);
     },
     events: [],
     themeSystem: 'bootstrap5'
@@ -79,12 +83,11 @@
 <div class="app-container">
   <h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
   <div style="height: 100%; display: flex;">
-    <Modal show={$modal}>
-      <FilterBar {calendarTree} bind:selected={selectedCalendars} />
-      <div style="flex: 1;">
-        <FullCalendar bind:this={calendar} options={$options} />
-      </div>
-    </Modal>
+    <FilterBar {calendarTree} bind:selected={selectedCalendars} />
+    <div style="flex: 1;">
+      <FullCalendar bind:this={calendar} options={$options} />
+    </div>
+    <EventModal event={$event} open={openModal} {toggle} />
   </div>
 </div>
 

src/EventModal.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
+
+  export let event = undefined;
+  export let open = undefined;
+  export let toggle = undefined;
+</script>
+
+<Modal isOpen={open} {toggle} centered scrollable>
+  <ModalHeader {toggle}>{event.title}</ModalHeader>
+  {#if event.extendedProps.description}
+    <ModalBody>
+      {#each event.extendedProps.description.split('\n') as line}
+        <p>{line}</p>
+      {/each}
+    </ModalBody>
+  {/if}
+  {#if event.extendedProps.location}
+    <ModalFooter>
+      <Icon name="geo" />
+    </ModalFooter>
+  {/if}
+</Modal>