refactor: layout level data loading and basic layout

Author: stabldev

frontend/src/lib/functions/date.ts

@@ -19,6 +19,15 @@ export class FormatDate {
     this.parsedDate = _date;
   }
 
+  format() {
+    const formatted_date = this.parsedDate.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+    return formatted_date;
+  }
+
   timeAgo() {
     const diff_time = Math.floor((new Date().valueOf() - this.parsedDate.valueOf()) / 1000);
     if (diff_time <= 0) return 'just now';

frontend/src/lib/functions/pluralize.ts

@@ -0,0 +1,3 @@
+export function pluralize(str: string, count: number) {
+  return count <= 1 ? str : str + 's';
+}

frontend/src/routes/(app)/q/[name]/+page.server.ts renamed to frontend/src/routes/(app)/q/[name]/+layout.server.ts

@@ -1,8 +1,8 @@
-import client from '$lib/clients/client';
 import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
+import type { LayoutServerLoad } from './$types';
+import client from '$lib/clients/client';
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: LayoutServerLoad = async ({ params }) => {
   const { data, error, response } = await client.GET('/api/v1/quiblets/{name}/', {
     params: {
       path: { name: params.name }

frontend/src/routes/(app)/q/[name]/+layout.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  const { children } = $props();
+  import type { Snippet } from 'svelte';
+  import type { PageData } from './$types';
+  import { FormatDate } from '$lib/functions/date';
+  import { pluralize } from '$lib/functions/pluralize';
+
+  const { data, children }: { data: PageData; children: Snippet } = $props();
+  const { quiblet } = data;
 </script>
 
 <div class="flex h-max flex-1 flex-col gap-4 p-4">
@@ -9,6 +15,25 @@
   <div
     class="fixed top-[3.75rem] flex h-[calc(100dvh-3.75rem)] w-80 flex-col gap-4 overflow-y-scroll p-4 scrollbar-none"
   >
-    Hey!
+    <div class="flex flex-col gap-2">
+      <h3 class="font-medium">{quiblet?.title ?? `q/${quiblet?.name}`}</h3>
+      <p class="text-sm text-base-content/75">{quiblet?.description}</p>
+      <div class="flex items-center gap-2 text-xs">
+        <coreicons-shape-gift class="size-4"></coreicons-shape-gift>
+        Created {new FormatDate(quiblet?.created_at ?? '').format()}
+      </div>
+      <div class="flex items-center gap-2 text-xs">
+        <coreicons-shape-globe class="size-4"></coreicons-shape-globe>
+        {quiblet?.is_public ? 'Public' : 'Private'}
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <div class="flex flex-col">
+        <span class="text-sm text-info">{quiblet?.members?.length}</span>
+        <span class="text-xs text-base-content/75"
+          >{pluralize('Member', quiblet?.members?.length ?? 0)}</span
+        >
+      </div>
+    </div>
   </div>
 </div>

frontend/src/routes/(app)/q/[name]/+page.svelte

@@ -19,10 +19,22 @@
     )}
     style="background-image: url({quiblet?.banner});"
   ></div>
-  <div class="absolute inset-x-0 -bottom-10 flex items-end px-4">
-    <div class="flex items-end">
+  <div class="absolute inset-x-0 -bottom-12 flex items-end justify-between px-4">
+    <div class="flex items-end gap-2">
       <Avatar class="!size-20 outline outline-8 outline-base-300" src={quiblet?.avatar} />
-      <h3>q/{quiblet?.name}</h3>
+      <h3 class="text-3xl font-bold text-info">q/{quiblet?.name}</h3>
+    </div>
+    <div class="flex items-center gap-2">
+      <button class="btn btn-primary h-10 px-3" aria-label="Create a Post">
+        <coreicons-shape-plus variant="no-border" class="size-5"></coreicons-shape-plus>
+        <span class="text-sm font-medium">Create Quib</span>
+      </button>
+      <button class="btn btn-secondary h-10 px-3" aria-label="Join quiblet">
+        <span class="text-sm font-medium">Join</span>
+      </button>
+      <button class="btn btn-neutral size-10 p-0" aria-label="More options">
+        <coreicons-shape-more class="size-5 rotate-90"></coreicons-shape-more>
+      </button>
     </div>
   </div>
 </div>