feat: move log out button to settings

frontend/src/routes/settings/+layout.svelte

@@ -1,10 +1,22 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import type { LayoutData } from "./$types";
-
-  import { ListGroup, ListGroupItem } from "sveltestrap";
+  import { Button, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter } from "sveltestrap";
+  import { userStore } from "$lib/store";
+  import { goto } from "$app/navigation";
 
   export let data: LayoutData;
+
+  let isOpen = false;
+  const toggle = () => (isOpen = !isOpen);
+
+  const logOut = () => {
+    userStore.set(null);
+    localStorage.removeItem("pronouns-token");
+    localStorage.removeItem("pronouns-user");
+    toggle();
+    goto("/");
+  };
 </script>
 
 <div class="grid">
@@ -39,10 +51,18 @@
         >
           Data export
         </ListGroupItem>
+        <ListGroupItem tag="button" on:click={toggle}>Log out</ListGroupItem>
       </ListGroup>
     </div>
     <div class="col-md m-3">
       <slot />
     </div>
   </div>
+  <Modal header="Log out" {isOpen} {toggle}>
+    <ModalBody>Are you sure you want to log out?</ModalBody>
+    <ModalFooter>
+      <Button color="primary" on:click={logOut}>Log out</Button>
+      <Button color="secondary" on:click={toggle}>Cancel</Button>
+    </ModalFooter>
+  </Modal>
 </div>