refactor: move components to root level and remove specific components

Author: stabldev

frontend/src/lib/components/pages/home/recent_quibs.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import Quib from '$lib/components/pages/home/quib.svelte';
-  import QuibsHeader from '$lib/components/pages/home/quibs_header.svelte';
-  import RecentQuibs from '$lib/components/pages/home/recent_quibs.svelte';
+  import Quib from '$lib/components/quib.svelte';
+  import QuibsHeader from '$lib/components/quibs_header.svelte';
+  import recent_posts from '$lib/data/mock/recent_posts.json';
+  import readable from 'readable-numbers';
+  import Avatar from '$lib/components/ui/avatar.svelte';
   import type { PageData } from './$types';
 
   const { data }: { data: PageData } = $props();
@@ -25,6 +27,42 @@
   <div
     class="fixed top-[3.75rem] flex h-[calc(100dvh-3.75rem)] w-72 flex-col gap-4 overflow-y-scroll p-4 scrollbar-none"
   >
-    <RecentQuibs />
+    <h2 class="font-medium">Recent Quibs</h2>
+    <div class="flex flex-col gap-4">
+      {#each recent_posts as post}
+        <div class="flex flex-col gap-2">
+          <div class="flex justify-between gap-2">
+            <div class="flex flex-col gap-1">
+              <a
+                href="/q/{post.community.name}"
+                class="flex items-center gap-2 hover:text-accent hover:underline"
+              >
+                <Avatar src={post.community.avatar} />
+                <h3 class="text-xs font-semibold">q/{post.community.name}</h3>
+              </a>
+              <a
+                href="/q/{post.community.name}/posts/{post.slug}"
+                class="font-semibold text-info hover:underline"
+              >
+                {post.title}
+              </a>
+            </div>
+            {#if post.cover}
+              <img
+                class="aspect-square size-20 flex-shrink-0 rounded-xl object-cover"
+                src={post.cover}
+                alt=""
+              />
+            {/if}
+          </div>
+          <div class="flex items-center gap-2">
+            <p class="text-xs font-medium">{readable(post.likes)} upvotes</p>
+            <coreicons-shape-circle variant="filled" class="size-0.5"
+            ></coreicons-shape-circle>
+            <p class="text-xs font-medium">{readable(post.comments)} comments</p>
+          </div>
+        </div>
+      {/each}
+    </div>
   </div>
 </div>

frontend/src/lib/components/pages/home/quib.svelte renamed to frontend/src/lib/components/quib.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Quib from '$lib/components/pages/home/quib.svelte';
-  import QuibsHeader from '$lib/components/pages/home/quibs_header.svelte';
+  import Quib from '$lib/components/quib.svelte';
+  import QuibsHeader from '$lib/components/quibs_header.svelte';
   import Avatar from '$lib/components/ui/avatar.svelte';
   import { cn } from '$lib/functions/classnames';
   import type { PageData } from './$types';
@@ -34,10 +34,7 @@
   ></div>
   <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={'https://google.com'}
-      />
+      <Avatar class="!size-20 outline outline-8 outline-base-300" src={quiblet?.avatar} />
       <h3 class="text-2xl font-bold text-info">q/{quiblet?.name}</h3>
     </div>
     <div class="flex items-center gap-2">