From 565b6b5c7607c863ab6542567563fc15b1906b29 Mon Sep 17 00:00:00 2001
From: moonlitgrace <moonlitgrace.gaia@gmail.com>
Date: Thu, 19 Dec 2024 12:10:38 +0530
Subject: [PATCH] refactor: move components to root level and remove specific
 components

---
 .../components/pages/home/recent_quibs.svelte | 42 -----------------
 .../components/{pages/home => }/quib.svelte   |  0
 .../{pages/home => }/quibs_header.svelte      |  0
 frontend/src/routes/(app)/+page.svelte        | 46 +++++++++++++++++--
 .../src/routes/(app)/q/[name]/+page.svelte    |  9 ++--
 5 files changed, 45 insertions(+), 52 deletions(-)
 delete mode 100644 frontend/src/lib/components/pages/home/recent_quibs.svelte
 rename frontend/src/lib/components/{pages/home => }/quib.svelte (100%)
 rename frontend/src/lib/components/{pages/home => }/quibs_header.svelte (100%)

diff --git a/frontend/src/lib/components/pages/home/recent_quibs.svelte b/frontend/src/lib/components/pages/home/recent_quibs.svelte
deleted file mode 100644
index f1e8cdc..0000000
--- a/frontend/src/lib/components/pages/home/recent_quibs.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import readable from 'readable-numbers';
-  import Avatar from '$lib/components/ui/avatar.svelte';
-  import recent_posts from '$lib/data/mock/recent_posts.json';
-</script>
-
-<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>
diff --git a/frontend/src/lib/components/pages/home/quib.svelte b/frontend/src/lib/components/quib.svelte
similarity index 100%
rename from frontend/src/lib/components/pages/home/quib.svelte
rename to frontend/src/lib/components/quib.svelte
diff --git a/frontend/src/lib/components/pages/home/quibs_header.svelte b/frontend/src/lib/components/quibs_header.svelte
similarity index 100%
rename from frontend/src/lib/components/pages/home/quibs_header.svelte
rename to frontend/src/lib/components/quibs_header.svelte
diff --git a/frontend/src/routes/(app)/+page.svelte b/frontend/src/routes/(app)/+page.svelte
index ff72e20..c5edf4a 100644
--- a/frontend/src/routes/(app)/+page.svelte
+++ b/frontend/src/routes/(app)/+page.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>
diff --git a/frontend/src/routes/(app)/q/[name]/+page.svelte b/frontend/src/routes/(app)/q/[name]/+page.svelte
index 06c7598..aca8505 100644
--- a/frontend/src/routes/(app)/q/[name]/+page.svelte
+++ b/frontend/src/routes/(app)/q/[name]/+page.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">