Use fluid scale custom properties and make everything mobile friendly

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

@@ -1,9 +1,10 @@
 import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX } from "$lib/utils";
 
-export const load: PageServerLoad = async ({ fetch, cookies, url }) => {
+export const load: PageServerLoad = async ({ fetch, cookies, url, locals }) => {
   const searchQuery = url.searchParams.get("website_search_query");
   const sortBy = url.searchParams.get("website_sort");
+  const filterBy = url.searchParams.get("website_filter");
 
   const params = new URLSearchParams();
 
@@ -29,6 +30,15 @@ export const load: PageServerLoad = async ({ fetch, cookies, url }) => {
       break;
   }
 
+  switch (filterBy) {
+    case "creations":
+      params.append("user_id", `eq.${locals.user.id}`);
+      break;
+    case "shared":
+      params.append("user_id", `not.eq.${locals.user.id}`);
+      break;
+  }
+
   const constructedFetchUrl = `${baseFetchUrl}?${params.toString()}`;
 
   const totalWebsitesData = await fetch(baseFetchUrl, {

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

@@ -157,24 +157,24 @@
 <style>
   .website-grid {
     display: grid;
-    gap: 1rem;
+    gap: var(--space-s);
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 35ch), 1fr));
-    margin-block-start: 1rem;
+    margin-block-start: var(--space-m);
   }
 
   .website-card {
     border: var(--border-primary);
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    padding-inline: 1rem;
-    padding-block: 2rem;
+    gap: var(--space-s);
+    padding-inline: var(--space-s);
+    padding-block: var(--space-m);
   }
 
   .website-card__actions {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2xs);
     flex-wrap: wrap;
   }
 </style>

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

@@ -1,9 +1,10 @@
 import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX } from "$lib/utils";
 
-export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent }) => {
+export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent, locals }) => {
   const searchQuery = url.searchParams.get("article_search_query");
   const sortBy = url.searchParams.get("article_sort");
+  const filterBy = url.searchParams.get("article_filter");
 
   const parameters = new URLSearchParams();
 
@@ -29,6 +30,15 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent
       break;
   }
 
+  switch (filterBy) {
+    case "creations":
+      parameters.append("user_id", `eq.${locals.user.id}`);
+      break;
+    case "shared":
+      parameters.append("user_id", `not.eq.${locals.user.id}`);
+      break;
+  }
+
   const constructedFetchUrl = `${baseFetchUrl}&${parameters.toString()}`;
 
   const totalArticlesData = await fetch(baseFetchUrl, {

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

@@ -66,6 +66,14 @@
             {/each}
           </select>
         </label>
+        <label>
+          Filter:
+          <select name="article_filter">
+            <option value="all">Show all</option>
+            <option value="creations">Created by you</option>
+            <option value="shared">Created by others</option>
+          </select>
+        </label>
         <button type="submit">Submit</button>
       </form>
 
@@ -109,19 +117,24 @@
   .article-card {
     display: flex;
     align-items: center;
-    column-gap: 2rem;
-    row-gap: 0.5rem;
+    column-gap: var(--space-s);
+    row-gap: var(--space-2xs);
     flex-wrap: wrap;
     justify-content: space-between;
   }
 
+  .article-card + .article-card {
+    padding-block-start: var(--space-s);
+    border-block-start: var(--border-primary);
+  }
+
   .article-card:nth-of-type(1) {
-    margin-block-start: 1rem;
+    margin-block-start: var(--space-m);
   }
 
   .article-card__actions {
     display: flex;
-    gap: 1rem;
+    gap: var(--space-s);
     align-items: center;
   }
 </style>

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

@@ -117,19 +117,24 @@
   .collaborator-card {
     display: flex;
     align-items: center;
-    column-gap: 2rem;
-    row-gap: 0.5rem;
+    column-gap: var(--space-s);
+    row-gap: var(--space-2xs);
     flex-wrap: wrap;
     justify-content: space-between;
   }
 
+  .collaborator-card + .collaborator-card {
+    padding-block-start: var(--space-s);
+    border-block-start: var(--border-primary);
+  }
+
   .collaborator-card:nth-of-type(1) {
-    margin-block-start: 1rem;
+    margin-block-start: var(--space-xs);
   }
 
   .collaborator-card__actions {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-2xs);
     align-items: center;
   }
 </style>