Add basic forms and routes

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

@@ -1,31 +1,33 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import DateTime from "$lib/components/DateTime.svelte";
+  import { sortOptions } from "$lib/utils.js";
+  import { page } from "$app/stores";
 
   const { form, data } = $props();
 </script>
 
+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
 <section>
   <h2>Create website</h2>
 
   <form method="POST" action="?/createWebsite" use:enhance>
-    {#if form?.createWebsite?.success}
-      <p>Successfully created website</p>
-    {/if}
-
-    {#if form?.createWebsite?.success === false}
-      <p>{form.createWebsite.message}</p>
-    {/if}
-
     <label>
-      Type
+      Type:
       <select name="content-type">
         <option value="Blog">Blog</option>
         <option value="Docs">Docs</option>
       </select>
     </label>
     <label>
-      Title
+      Title:
       <input type="text" name="title" />
     </label>
 
@@ -33,71 +35,86 @@
   </form>
 </section>
 
-<section>
-  <h2>Your websites</h2>
+{#if data.totalWebsiteCount > 0}
+  <section>
+    <h2>All websites</h2>
 
-  {#if form?.deleteWebsite?.success}
-    <p>Successfully deleted website</p>
-  {/if}
+    <form method="GET">
+      <label>
+        Search:
+        <input
+          type="text"
+          name="website_search_query"
+          value={$page.url.searchParams.get("website_search_query")}
+        />
+      </label>
+      <label>
+        Sort:
+        <select name="website_sort">
+          {#each sortOptions as { value, text }}
+            <option {value} selected={value === $page.url.searchParams.get("website_sort")}
+              >{text}</option
+            >
+          {/each}
+        </select>
+      </label>
+      <label>
+        Filter:
+        <select name="website_filter">
+          <option value="all">Show all</option>
+          <option value="creations">Created by you</option>
+          <option value="shared">Shared with you</option>
+        </select>
+      </label>
+      <button type="submit">Submit</button>
+    </form>
 
-  {#if form?.deleteWebsite?.success === false}
-    <p>{form.deleteWebsite.message}</p>
-  {/if}
+    {#each data.websites as { id, content_type, title, created_at }}
+      <article>
+        <h3>
+          <a href="/website/{id}">{title}</a>
+        </h3>
+        <p>
+          <strong>Type:</strong>
+          {content_type}
+        </p>
+        <p>
+          <strong>Created at:</strong>
+          <DateTime date={created_at} />
+        </p>
+        <details>
+          <summary>Update</summary>
+          <form
+            method="POST"
+            action="?/updateWebsite"
+            use:enhance={() => {
+              return async ({ update }) => {
+                await update({ reset: false });
+              };
+            }}
+          >
+            <input type="hidden" name="id" value={id} />
+            <label>
+              Title
+              <input type="text" name="title" value={title} />
+            </label>
 
-  {#each data.websites as { id, content_type, title, created_at }}
-    <article>
-      <h3>
-        <a href="/website/{id}">{title}</a>
-      </h3>
-      <p>
-        <strong>Type:</strong>
-        {content_type}
-      </p>
-      <p>
-        <strong>Created at:</strong>
-        <DateTime date={created_at} />
-      </p>
-      <details>
-        <summary>Update</summary>
-        <form
-          method="POST"
-          action="?/updateWebsite"
-          use:enhance={() => {
-            return async ({ update }) => {
-              await update({ reset: false });
-            };
-          }}
-        >
-          {#if form?.updateWebsite?.success}
-            <p>Successfully updated website</p>
-          {/if}
+            <button type="submit">Submit</button>
+          </form>
+        </details>
+        <details>
+          <summary>Delete</summary>
+          <p>
+            <strong>Caution!</strong>
+            Deleting this website will irretrievably erase all data.
+          </p>
+          <form method="POST" action="?/deleteWebsite" use:enhance>
+            <input type="hidden" name="id" value={id} />
 
-          {#if form?.updateWebsite?.success === false}
-            <p>{form.updateWebsite.message}</p>
-          {/if}
-
-          <input type="hidden" name="id" value={id} />
-          <label>
-            Title
-            <input type="text" name="title" value={title} />
-          </label>
-
-          <button type="submit">Submit</button>
-        </form>
-      </details>
-      <details>
-        <summary>Delete</summary>
-        <!-- TODO: Needs to be password protected -->
-        <form method="POST" action="?/deleteWebsite" use:enhance>
-          <input type="hidden" name="id" value={id} />
-
-          <button type="submit">Delete</button>
-        </form>
-      </details>
-    </article>
-  {/each}
-</section>
-
-<section>
-  <h2>Shared with you</h2>
-</section>
+            <button type="submit">Permanently delete website</button>
+          </form>
+        </details>
+      </article>
+    {/each}
+  </section>
+{/if}