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>

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

@@ -3,7 +3,6 @@
   import { page } from "$app/stores";
   import type { LayoutServerData } from "./$types";
   import type { Snippet } from "svelte";
-  import { dev } from "$app/environment";
 
   const { data, children } = $props<{ data: LayoutServerData; children: Snippet }>();
 
@@ -17,13 +16,23 @@
 
 <nav>
   <strong>archtika</strong>
-  {#if data.user}
-    <a href="/">Dashboard</a>
-    <a href="/account">Account</a>
-  {:else}
-    <a href="/register">Register</a>
-    <a href="/login">Login</a>
-  {/if}
+  <ul class="link-wrapper">
+    {#if data.user}
+      <li>
+        <a href="/">Dashboard</a>
+      </li>
+      <li>
+        <a href="/account">Account</a>
+      </li>
+    {:else}
+      <li>
+        <a href="/register">Register</a>
+      </li>
+      <li>
+        <a href="/login">Login</a>
+      </li>
+    {/if}
+  </ul>
 </nav>
 
 {#if !isProjectRoute}
@@ -38,7 +47,9 @@
 
 <footer>
   <p>
-    <small>archtika is a free, open, modern, performant and lightweight CMS</small>
+    <small
+      >&copy; {new Date().getFullYear()} &mdash; <a href="https://archtika.com">archtika</a></small
+    >
   </p>
 </footer>
 
@@ -47,20 +58,24 @@
   header,
   main,
   footer {
-    padding-block: 1rem;
-    inline-size: min(100% - 2rem, 1024px);
+    padding-block: var(--space-s);
+    inline-size: min(100% - var(--space-m), 1024px);
     margin-inline: auto;
   }
 
   nav {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    overflow-x: auto;
+    column-gap: var(--space-m);
+    row-gap: var(--space-3xs);
+    flex-wrap: wrap;
+    justify-content: space-between;
   }
 
-  nav > *:first-child {
-    margin-inline-end: auto;
+  nav > .link-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-s);
   }
 
   footer {
@@ -69,11 +84,17 @@
   }
 
   .editor {
-    inline-size: min(100% - 2rem, 1536px);
-    block-size: calc(100vh - 7rem);
-    border-block-start: var(--border-primary);
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    block-size: calc(100vh - (4 * var(--space-s) + 2 * 1.5rem));
+    inline-size: min(100% - var(--space-m), 1536px);
+    border-block-start: var(--border-primary);
     padding-block: 0;
+    position: relative;
+  }
+
+  @media (min-width: 640px) {
+    .editor {
+      grid-template-columns: 1fr 1fr;
+    }
   }
 </style>