From ae128dea6cd6c6cb092da476102e7086c452328b Mon Sep 17 00:00:00 2001
From: Thilo Hohlt <123883702+thiloho@users.noreply.github.com>
Date: Fri, 2 Aug 2024 16:36:21 +0200
Subject: [PATCH] Add toast for errors and success messages

---
 .../src/lib/components/SuccessOrError.svelte  | 46 +++++++++++++++++++
 .../src/lib/components/WebsiteEditor.svelte   |  4 +-
 .../src/routes/(anonymous)/login/+page.svelte |  9 +---
 .../routes/(anonymous)/register/+page.svelte  |  9 +---
 .../src/routes/(authenticated)/+page.svelte   | 32 +++++++++----
 .../(authenticated)/account/+page.svelte      | 20 ++++----
 .../website/[websiteId]/+page.svelte          |  9 +---
 .../website/[websiteId]/articles/+page.svelte | 31 +++++++++----
 .../articles/[articleId]/+page.svelte         |  9 +---
 web-app/src/routes/+layout.svelte             |  1 -
 10 files changed, 113 insertions(+), 57 deletions(-)
 create mode 100644 web-app/src/lib/components/SuccessOrError.svelte

diff --git a/web-app/src/lib/components/SuccessOrError.svelte b/web-app/src/lib/components/SuccessOrError.svelte
new file mode 100644
index 0000000..436145e
--- /dev/null
+++ b/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>
diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte
index 517815d..4b6b593 100644
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/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>
diff --git a/web-app/src/routes/(anonymous)/login/+page.svelte b/web-app/src/routes/(anonymous)/login/+page.svelte
index 0ba5c3a..d56885c 100644
--- a/web-app/src/routes/(anonymous)/login/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <form method="POST" use:enhance>
   <label>
diff --git a/web-app/src/routes/(anonymous)/register/+page.svelte b/web-app/src/routes/(anonymous)/register/+page.svelte
index f320b40..4a2c8fb 100644
--- a/web-app/src/routes/(anonymous)/register/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <form method="POST" use:enhance>
   <label>
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte
index e1be125..3cb29a0 100644
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <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>
diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte
index fce0127..8c5fb3f 100644
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <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 />
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
index 38f75af..8fde115 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <WebsiteEditor
   id={data.website.id}
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
index 84eb8f0..95b63c2 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <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>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
index b4f4790..713eb8e 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/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}
-  <p>{form.message}</p>
-{/if}
-
-{#if form?.success === false}
-  <p>{form.message}</p>
-{/if}
+<SuccessOrError success={form?.success} message={form?.message} />
 
 <WebsiteEditor
   id={data.website.id}
diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte
index 746027d..59d551f 100644
--- a/web-app/src/routes/+layout.svelte
+++ b/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;
   }