refactor: make slug field editable and change compact layout

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'),
+        ),
+    ]

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'),

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"

frontend/src/lib/stores/view.svelte.ts

@@ -5,15 +5,15 @@ 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);
 
 $effect.root(() => {
   $effect(() => {
     // auto sync to localStorage on state update
-    localStorage.setItem('view', view_state);
+    localStorage.setItem('view_store', view_state);
   });
 });