fix: schema and add quibs count in response

backend/apps/quiblet/api/v1/serializers.py

@@ -1,3 +1,5 @@
+from typing import Optional
+
 from rest_framework import serializers
 
 from apps.user.models import Profile
@@ -12,7 +14,7 @@ class Meta:
         model = Profile
         fields = ('username', 'avatar', 'name')
 
-    def get_name(self, obj):
+    def get_name(self, obj) -> Optional[str]:
         if obj.first_name or obj.last_name:
             truthy_fields = filter(None, [obj.first_name, obj.last_name])
             return " ".join(truthy_fields)
@@ -21,11 +23,15 @@ def get_name(self, obj):
 
 class QuibletDetailSerializer(serializers.ModelSerializer):
     rangers = RangerSerializer(many=True)
+    quibs = serializers.SerializerMethodField()
 
     class Meta:
         model = Quiblet
         fields = '__all__'
 
+    def get_quibs(self, obj) -> int:
+        return obj.quibs.count()
+
 
 class QuibletSerializer(serializers.ModelSerializer):
     class Meta:

frontend/src/lib/clients/v1.ts

@@ -791,6 +791,7 @@ export interface components {
     QuibletDetail: {
       readonly id: number;
       rangers: components['schemas']['Ranger'][];
+      readonly quibs: number;
       /**
        * Create at
        * Format: date-time
@@ -1999,7 +2000,7 @@ export interface components {
       username: string;
       /** Format: uri */
       avatar?: string | null;
-      readonly name: string;
+      readonly name: string | null;
     };
     /**
      * @description * `server_error` - Server Error

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

@@ -28,13 +28,19 @@
         {quiblet?.is_public ? 'Public' : 'Private'}
       </div>
     </div>
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-4">
       <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 class="flex flex-col">
+        <span class="text-sm text-info">{quiblet?.quibs}</span>
+        <span class="text-xs text-base-content/75"
+          >{pluralize('Quib', quiblet?.quibs ?? 0)}</span
+        >
+      </div>
     </div>
     <div class="divider my-0 before:h-px after:h-px"></div>
     <div class="flex items-center gap-2">