From f54f196f015067abd20ad153b738d305e87e532d Mon Sep 17 00:00:00 2001
From: moonlitgrace <moonlitgrace.gaia@gmail.com>
Date: Wed, 25 Dec 2024 17:54:32 +0530
Subject: [PATCH] refactor: make slug field editable and change compact layout

---
 .../quib/migrations/0005_alter_quib_slug.py    | 18 ++++++++++++++++++
 backend/apps/quib/models.py                    |  2 +-
 frontend/src/lib/components/quib.svelte        |  6 +++---
 frontend/src/lib/stores/view.svelte.ts         |  4 ++--
 4 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 backend/apps/quib/migrations/0005_alter_quib_slug.py

diff --git a/backend/apps/quib/migrations/0005_alter_quib_slug.py b/backend/apps/quib/migrations/0005_alter_quib_slug.py
new file mode 100644
index 00000000..eb17fd20
--- /dev/null
+++ b/backend/apps/quib/migrations/0005_alter_quib_slug.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.4 on 2024-12-25 12:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('quib', '0004_quib_highlighted'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quib',
+            name='slug',
+            field=models.SlugField(blank=True, max_length=25, verbose_name='slug'),
+        ),
+    ]
diff --git a/backend/apps/quib/models.py b/backend/apps/quib/models.py
index a9fe474f..cd1120b2 100644
--- a/backend/apps/quib/models.py
+++ b/backend/apps/quib/models.py
@@ -28,7 +28,7 @@ class Quib(CreatedAtMixin, IsPublicMixin, ShortUUIDMixin):
     )
     highlighted = models.BooleanField(_('highlighted'), default=False)
     title = models.CharField(_('title'), max_length=255)
-    slug = models.SlugField(_('slug'), editable=False, max_length=25, blank=True)
+    slug = models.SlugField(_('slug'), max_length=25, blank=True)
     content = models.TextField(_('content'), blank=True)
     cover = models.ImageField(
         _('cover'),
diff --git a/frontend/src/lib/components/quib.svelte b/frontend/src/lib/components/quib.svelte
index ca44b13d..0c1c67b6 100644
--- a/frontend/src/lib/components/quib.svelte
+++ b/frontend/src/lib/components/quib.svelte
@@ -121,16 +121,16 @@
     <div class="flex-1 flex gap-4 p-4 p-4">
       {@render href_overlay()}
       <div
-        class="cursor-pointer size-24 rounded-xl bg-cover bg-center inner-border
+        class="cursor-pointer size-20 rounded-xl bg-cover bg-center inner-border
             inner-border-base-content/15 flex-shrink-0"
         class:relative={quib.cover}
         class:bg-base-100={!quib.cover}
         style="background-image: url({quib.cover});"
       ></div>
-      <div class="flex flex-col w-full justify-between">
+      <div class="flex flex-col w-full gap-1">
         {@render avatar_name_date()}
         <h2 class="text-lg font-bold text-info">{quib.title}</h2>
-        <div class="flex items-center gap-4 border-t border-neutral pt-2.5">
+        <div class="flex items-center gap-4 mt-auto">
           <button
             onclick={() => (is_expanded = !is_expanded)}
             class="relative flex items-center gap-2"
diff --git a/frontend/src/lib/stores/view.svelte.ts b/frontend/src/lib/stores/view.svelte.ts
index 83b68927..ecc88bd4 100644
--- a/frontend/src/lib/stores/view.svelte.ts
+++ b/frontend/src/lib/stores/view.svelte.ts
@@ -5,7 +5,7 @@ type ViewState = 'card' | 'compact';
 const default_view: ViewState = 'card';
 
 const stored_view_state: ViewState = browser
-  ? ((localStorage.getItem('view') as ViewState) ?? default_view)
+  ? ((localStorage.getItem('view_store') as ViewState) ?? default_view)
   : default_view;
 
 let view_state = $state<ViewState>(stored_view_state);
@@ -13,7 +13,7 @@ let view_state = $state<ViewState>(stored_view_state);
 $effect.root(() => {
   $effect(() => {
     // auto sync to localStorage on state update
-    localStorage.setItem('view', view_state);
+    localStorage.setItem('view_store', view_state);
   });
 });