Add share modal

src/App.svelte

@@ -14,6 +14,7 @@
   import { mkSource, calendarTree, initialCalendars, getSubCalendars } from './calendar';
   import { debounce } from 'lodash';
   import Help from './Help.svelte';
+  import Share from './Share.svelte';
 
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -158,6 +159,7 @@
 <div class="h-100 d-flex flex-column">
   <h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
 
+  <Share {calendar} {selectedCalendars} />
   <Help />
 
   <FilterBar {calendarTree} bind:selected={selectedCalendars} {initial} />

src/Share.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
+
+  export let calendar = null;
+  export let selectedCalendars = [];
+
+  let share = document.URL;
+
+  let isOpen = false;
+  const toggle = () => {
+    isOpen = !isOpen;
+
+    const loc = document.location;
+    const search = new URLSearchParams();
+    const api = calendar.getAPI();
+
+    if (calendar !== null) {
+      search.append('v', api.view.type);
+
+      selectedCalendars.forEach(c => search.append('c', c));
+
+      search.append('d', api.getDate().toISOString());
+    }
+
+    share = `${loc.origin}${loc.pathname}?${search.toString()}`;
+  };
+</script>
+
+<span class="share-btn fs-4" data-bs-toggle="tooltip" title="Partager" on:click={toggle}>
+  <Icon name="share" />
+</span>
+
+<Modal {isOpen} {toggle} centered scrollable>
+  <ModalHeader {toggle}>
+    <Icon name="share" class="text-success me-2" />
+    <b>Partage</b>
+  </ModalHeader>
+
+  <ModalBody>
+    <p>La vue actuelle du calendrier peut être partagée avec l'URL suivante :</p>
+
+    <a id="share-url" href={share}>{share}</a>
+  </ModalBody>
+
+  <ModalFooter>
+    <Icon name="balloon-heart" class="text-danger fs-5" />
+    <span class="fs-7">Propulsé par le Club Réseau de l'ENS</span>
+  </ModalFooter>
+</Modal>
+
+<style>
+  .share-btn {
+    position: absolute;
+    top: 0.75em;
+    right: 3em;
+    cursor: pointer;
+  }
+</style>