Add toast for errors and success messages

web-app/src/lib/components/SuccessOrError.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  const { success, message } = $props<{
+    success: boolean | undefined;
+    message: string;
+  }>();
+</script>
+
+{#if success}
+  <p class="toast success">{message}</p>
+{/if}
+
+{#if success === false}
+  <p class="toast error">{message}</p>
+{/if}
+
+<style>
+  .toast {
+    position: fixed;
+    inset-block-end: 1rem;
+    inset-inline-end: 1rem;
+    padding-inline: 1rem;
+    padding-block: 0.5rem;
+    border-radius: var(--border-radius);
+    color: var(--color-text-invert);
+    z-index: 30;
+    animation: toast 3s forwards;
+  }
+
+  .success {
+    background-color: var(--color-success);
+  }
+
+  .error {
+    background-color: var(--color-error);
+  }
+
+  @keyframes toast {
+    0%,
+    90% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+</style>

web-app/src/lib/components/WebsiteEditor.svelte

@@ -33,10 +33,10 @@
   }
 
   .operations {
-    inline-size: 50%;
     border-inline-end: var(--border-primary);
     resize: horizontal;
     overflow-y: auto;
+    inline-size: 50%;
   }
 
   .operations__nav {
@@ -51,6 +51,6 @@
   }
 
   .preview {
-    flex-grow: 1;
+    flex: 1;
   }
 </style>

web-app/src/routes/(anonymous)/login/+page.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { form } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <form method="POST" use:enhance>
   <label>

web-app/src/routes/(anonymous)/register/+page.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { form } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <form method="POST" use:enhance>
   <label>

web-app/src/routes/(authenticated)/+page.svelte

@@ -4,17 +4,12 @@
   import { sortOptions } from "$lib/utils.js";
   import { page } from "$app/stores";
   import Modal from "$lib/components/Modal.svelte";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { form, data } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <section>
   <h2>Create website</h2>
@@ -22,7 +17,16 @@
   <Modal id="create-website" text="Create website">
     <h3>Create website</h3>
 
-    <form method="POST" action="?/createWebsite" use:enhance>
+    <form
+      method="POST"
+      action="?/createWebsite"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update();
+          window.location.hash = "!";
+        };
+      }}
+    >
       <label>
         Type:
         <select name="content-type">
@@ -100,6 +104,7 @@
                 use:enhance={() => {
                   return async ({ update }) => {
                     await update({ reset: false });
+                    window.location.hash = "!";
                   };
                 }}
               >
@@ -119,7 +124,16 @@
                 <strong>Caution!</strong>
                 Deleting this website will irretrievably erase all data.
               </p>
-              <form method="POST" action="?/deleteWebsite" use:enhance>
+              <form
+                method="POST"
+                action="?/deleteWebsite"
+                use:enhance={() => {
+                  return async ({ update }) => {
+                    await update();
+                    window.location.hash = "!";
+                  };
+                }}
+              >
                 <input type="hidden" name="id" value={id} />
 
                 <button type="submit">Permanently delete website</button>

web-app/src/routes/(authenticated)/account/+page.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import Modal from "$lib/components/Modal.svelte";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { data, form } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <section>
   <h2>Overview</h2>
@@ -45,7 +40,16 @@
       Deleting your account will irretrievably erase all data.
     </p>
 
-    <form method="POST" action="?/deleteAccount" use:enhance>
+    <form
+      method="POST"
+      action="?/deleteAccount"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update();
+          window.location.hash = "!";
+        };
+      }}
+    >
       <label>
         Password:
         <input type="password" name="password" required />

web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte

@@ -2,17 +2,12 @@
   import { enhance } from "$app/forms";
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import { ALLOWED_MIME_TYPES } from "$lib/utils";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { data, form } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <WebsiteEditor
   id={data.website.id}

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

@@ -4,17 +4,12 @@
   import { page } from "$app/stores";
   import { enhance } from "$app/forms";
   import Modal from "$lib/components/Modal.svelte";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { data, form } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <WebsiteEditor
   id={data.website.id}
@@ -27,7 +22,16 @@
     <Modal id="create-article" text="Create article">
       <h3>Create article</h3>
 
-      <form method="POST" action="?/createArticle" use:enhance>
+      <form
+        method="POST"
+        action="?/createArticle"
+        use:enhance={() => {
+          return async ({ update }) => {
+            await update();
+            window.location.hash = "!";
+          };
+        }}
+      >
         <label>
           Title:
           <input type="text" name="title" />
@@ -78,7 +82,16 @@
                 Deleting this article will irretrievably erase all data.
               </p>
 
-              <form method="POST" action="?/deleteArticle" use:enhance>
+              <form
+                method="POST"
+                action="?/deleteArticle"
+                use:enhance={() => {
+                  return async ({ update }) => {
+                    await update();
+                    window.location.hash = "!";
+                  };
+                }}
+              >
                 <input type="hidden" name="id" value={id} />
 
                 <button type="submit">Permanently delete article</button>

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -2,17 +2,12 @@
   import { enhance } from "$app/forms";
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import { ALLOWED_MIME_TYPES } from "$lib/utils";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
 
   const { data, form } = $props();
 </script>
 
-{#if form?.success}
+<SuccessOrError success={form?.success} message={form?.message} />
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
 
 <WebsiteEditor
   id={data.website.id}

web-app/src/routes/+layout.svelte

@@ -68,7 +68,6 @@
     inline-size: min(100% - 2rem, 1536px);
     block-size: calc(100vh - 7rem);
     border: var(--border-primary);
-    overflow-y: auto;
     display: flex;
     padding-block: 0;
   }