feat: add editing and deleting flags

frontend/src/routes/settings/flags/Flag.svelte

@@ -1,15 +1,75 @@
 <script lang="ts">
-  import { flagURL, type PrideFlag } from "$lib/api/entities";
-  import { Button } from "sveltestrap";
+  import { flagURL, type APIError, type PrideFlag } from "$lib/api/entities";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import { addToast } from "$lib/toast";
+  import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
 
   export let flag: PrideFlag;
+  export let deleteFlag: (id: string) => Promise<void>;
+
+  let error: APIError | null = null;
+
+  let modalOpen = false;
+  const toggleModal = () => (modalOpen = !modalOpen);
+
+  let deleteModalOpen = false;
+  const toggleDeleteModal = () => (deleteModalOpen = !deleteModalOpen);
+
+  let name = flag.name;
+  let description = flag.description;
+
+  const updateFlag = async () => {
+    try {
+      const resp = await apiFetchClient<PrideFlag>(`/users/@me/flags/${flag.id}`, "PATCH", {
+        name,
+        description: description || null,
+      });
+
+      error = null;
+      flag = resp;
+
+      addToast({ header: "Updated flag", body: "Successfully updated flag!" });
+      toggleModal();
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
 </script>
 
-<Button outline class="m-1">
+<Button outline class="m-1" on:click={toggleModal}>
   <img class="flag" src={flagURL(flag)} alt={flag.description ?? flag.name} />
   {flag.name}
 </Button>
 
+<Modal isOpen={modalOpen} toggle={toggleModal}>
+  <ModalHeader toggle={toggleModal}>Edit {flag.name} flag</ModalHeader>
+  <ModalBody>
+    <p>
+      <label for="name" class="form-label">Name</label>
+      <Input id="name" bind:value={name} />
+    </p>
+    <p>
+      <label for="description" class="form-label">Description</label>
+      <textarea id="description" class="form-control" bind:value={description} />
+    </p>
+  </ModalBody>
+  <ModalFooter>
+    <Button color="danger" on:click={toggleDeleteModal}>Delete flag</Button>
+    <Button disabled={!name} color="success" on:click={() => updateFlag()}>Edit flag</Button>
+  </ModalFooter>
+</Modal>
+
+<Modal isOpen={deleteModalOpen} toggle={toggleDeleteModal}>
+  <ModalHeader toggle={toggleDeleteModal}>Delete {flag.name} flag</ModalHeader>
+  <ModalBody>
+    Are you sure you want to delete the {flag.name} flag? <strong>This cannot be undone!</strong>
+  </ModalBody>
+  <ModalFooter>
+    <Button color="danger" on:click={() => deleteFlag(flag.id)}>Delete flag</Button>
+    <Button color="secondary" on:click={toggleDeleteModal}>Cancel</Button>
+  </ModalFooter>
+</Modal>
+
 <style>
   .flag {
     height: 2rem;
@@ -17,4 +77,8 @@
     border-radius: 3px;
     margin-left: -5px;
   }
+
+  textarea {
+    height: 100px;
+  }
 </style>