Allow removing images and wrap tables with scroll container

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

@@ -72,6 +72,19 @@ export const actions: Actions = {
       }
     );
   },
+  removeFavicon: async ({ fetch, params }) => {
+    return await apiRequest(
+      fetch,
+      `${API_BASE_PREFIX}/settings?website_id=eq.${params.websiteId}`,
+      "PATCH",
+      {
+        body: {
+          favicon_image: null
+        },
+        successMessage: "Successfully removed favicon"
+      }
+    );
+  },
   updateHeader: async ({ request, fetch, params }) => {
     const data = await request.formData();
     const logoImage = data.get("logo-image") as File;
@@ -110,6 +123,19 @@ export const actions: Actions = {
       }
     );
   },
+  removeLogoImage: async ({ fetch, params }) => {
+    return await apiRequest(
+      fetch,
+      `${API_BASE_PREFIX}/header?website_id=eq.${params.websiteId}`,
+      "PATCH",
+      {
+        body: {
+          logo_image: null
+        },
+        successMessage: "Successfully removed logo image"
+      }
+    );
+  },
   updateHome: async ({ request, fetch, params }) => {
     const data = await request.formData();
 

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

@@ -91,6 +91,13 @@
               src={`${data.API_BASE_PREFIX}/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
               alt=""
             />
+            <form
+              method="POST"
+              action="?/removeFavicon"
+              use:enhance={enhanceForm({ reset: false, closeModal: true })}
+            >
+              <button type="submit">Remove</button>
+            </form>
           </Modal>
         {/if}
       </div>
@@ -138,6 +145,13 @@
               src={`${data.API_BASE_PREFIX}/rpc/retrieve_file?id=${data.header.logo_image}`}
               alt=""
             />
+            <form
+              method="POST"
+              action="?/removeLogoImage"
+              use:enhance={enhanceForm({ reset: false, closeModal: true })}
+            >
+              <button type="submit">Remove</button>
+            </form>
           </Modal>
         {/if}
       </div>

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

@@ -72,6 +72,19 @@ export const actions: Actions = {
       }
     );
   },
+  removeCoverImage: async ({ fetch, params }) => {
+    return await apiRequest(
+      fetch,
+      `${API_BASE_PREFIX}/article?id=eq.${params.articleId}`,
+      "PATCH",
+      {
+        body: {
+          cover_image: null
+        },
+        successMessage: "Successfully removed cover image"
+      }
+    );
+  },
   pasteImage: async ({ request, fetch, params }) => {
     const data = await request.formData();
     const file = data.get("file") as File;

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

@@ -107,6 +107,13 @@
                 src={`${data.API_BASE_PREFIX}/rpc/retrieve_file?id=${data.article.cover_image}`}
                 alt=""
               />
+              <form
+                method="POST"
+                action="?/removeCoverImage"
+                use:enhance={enhanceForm({ reset: false, closeModal: true })}
+              >
+                <button type="submit">Remove</button>
+              </form>
             </Modal>
           {/if}
         </div>