pin to homepage and liveblog ticker

frontend/src/components/admin/live-blog/LiveBlogManager.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { 
   useLiveBlog, 
   useDeleteLiveBlogUpdate, 
@@ -23,7 +23,9 @@ import {
   Square, 
   Archive,
   Eye,
-  MessageSquare
+  MessageSquare,
+  Pin,
+  PinOff
 } from 'lucide-react';
 
 interface LiveBlogManagerProps {
@@ -37,7 +39,7 @@ export function LiveBlogManager({ slug, onBack, className }: LiveBlogManagerProp
   const [isEditing, setIsEditing] = useState(false);
   const [editForm, setEditForm] = useState<UpdateLiveBlogDto>({});
   
-  const { data: liveBlog, isLoading, error, refetch } = useLiveBlog(slug);
+  const { data: liveBlog, isLoading, error } = useLiveBlog(slug);
   const deleteUpdateMutation = useDeleteLiveBlogUpdate();
   const updateLiveBlogMutation = useUpdateLiveBlog();
   const deleteLiveBlogMutation = useDeleteLiveBlog();
@@ -111,6 +113,21 @@ export function LiveBlogManager({ slug, onBack, className }: LiveBlogManagerProp
     }
   };
 
+  const handleTogglePin = async () => {
+    if (!liveBlog) return;
+    
+    try {
+      await updateLiveBlogMutation.mutateAsync({
+        id: liveBlog.id,
+        dto: { isPinned: !liveBlog.isPinned },
+      });
+      
+    } catch (error) {
+      console.error('Failed to toggle pin:', error);
+      alert(`Failed to toggle pin: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  };
+
   const handleDeleteLiveBlog = async () => {
     if (!liveBlog) return;
     
@@ -402,6 +419,25 @@ export function LiveBlogManager({ slug, onBack, className }: LiveBlogManagerProp
                               {updateLiveBlogMutation.isPending ? 'Updating...' : 'Unarchive'}
                             </Button>
                           )}
+                          
+                          <Button 
+                            variant={liveBlog.isPinned ? "default" : "outline"}
+                            size="sm"
+                            onClick={handleTogglePin}
+                            disabled={updateLiveBlogMutation.isPending}
+                          >
+                            {liveBlog.isPinned ? (
+                              <>
+                                <PinOff className="w-4 h-4 mr-2" />
+                                {updateLiveBlogMutation.isPending ? 'Updating...' : 'Unpin'}
+                              </>
+                            ) : (
+                              <>
+                                <Pin className="w-4 h-4 mr-2" />
+                                {updateLiveBlogMutation.isPending ? 'Updating...' : 'Pin to Homepage'}
+                              </>
+                            )}
+                          </Button>
                         </div>
                      </div>
                      
@@ -422,15 +458,24 @@ export function LiveBlogManager({ slug, onBack, className }: LiveBlogManagerProp
                              <span className="font-medium text-right max-w-xs">{liveBlog.description}</span>
                            </div>
                          )}
-                         <div className="flex justify-between">
-                           <span className="text-muted-foreground">Status:</span>
-                           <Badge className={getStatusColor(liveBlog.status)} variant="outline">
-                             <div className="flex items-center gap-1">
-                               {getStatusIcon(liveBlog.status)}
-                               {liveBlog.status}
-                             </div>
-                           </Badge>
-                         </div>
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Status:</span>
+                            <Badge className={getStatusColor(liveBlog.status)} variant="outline">
+                              <div className="flex items-center gap-1">
+                                {getStatusIcon(liveBlog.status)}
+                                {liveBlog.status}
+                              </div>
+                            </Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Pinned:</span>
+                            <Badge variant={liveBlog.isPinned ? "default" : "outline"}>
+                              <div className="flex items-center gap-1">
+                                {liveBlog.isPinned ? <Pin className="w-3 h-3" /> : <PinOff className="w-3 h-3" />}
+                                {liveBlog.isPinned ? 'Yes' : 'No'}
+                              </div>
+                            </Badge>
+                          </div>
                        </div>
                      </div>
                    </>