From f1b3628ac0d4eb4a0bd02b4f1bbc4f7f96d0218b Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Tue, 10 Feb 2026 14:38:27 +0100
Subject: [PATCH] fix(ui): correct reel labeling in history and dashboard

---
 client/src/components/recent-publications.tsx | 28 ++++++++++---------
 client/src/pages/history.tsx                  | 19 +++++++------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/client/src/components/recent-publications.tsx b/client/src/components/recent-publications.tsx
index 30362be..c9dec0f 100644
--- a/client/src/components/recent-publications.tsx
+++ b/client/src/components/recent-publications.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Facebook, Instagram, Clock, CheckCircle2, XCircle, Eye, Image as ImageIcon, Smartphone } from "lucide-react";
+import { Facebook, Instagram, Clock, CheckCircle2, XCircle, Eye, Image as ImageIcon, Smartphone, Clapperboard } from "lucide-react";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import type { ScheduledPost, SocialPage, Post, Media } from "@shared/schema";
@@ -35,21 +35,21 @@ export default function RecentPublications() {
       const response = await fetch(`/api/posts/${scheduledPost.postId}`, {
         credentials: "include",
       });
-      
+
       if (!response.ok) {
         throw new Error("Failed to fetch post");
       }
-      
+
       const postWithMedia = await response.json();
       const mediaIds = postWithMedia.media?.map((m: Media) => m.id) || [];
       const allMedia = postWithMedia.media || [];
-      
+
       setPreviewData({
         postText: postWithMedia.post.content || '',
         mediaIds: mediaIds,
         allMedia: allMedia,
       });
-      
+
       setPreviewModalOpen(true);
     } catch (error) {
       toast({
@@ -65,6 +65,8 @@ export default function RecentPublications() {
       return <ImageIcon className="w-3.5 h-3.5" />;
     } else if (postType === 'story') {
       return <Smartphone className="w-3.5 h-3.5" />;
+    } else if (postType === 'reel') {
+      return <Clapperboard className="w-3.5 h-3.5" />;
     } else if (postType === 'both') {
       return (
         <div className="flex gap-0.5">
@@ -105,11 +107,10 @@ export default function RecentPublications() {
                 data-testid={`publication-${scheduledPost.id}`}
               >
                 {/* Platform icon */}
-                <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
-                  scheduledPost.page?.platform === 'facebook' 
-                    ? 'bg-blue-500' 
+                <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${scheduledPost.page?.platform === 'facebook'
+                    ? 'bg-blue-500'
                     : 'bg-gradient-to-br from-purple-500 to-pink-500'
-                }`}>
+                  }`}>
                   {scheduledPost.page?.platform === 'facebook' ? (
                     <Facebook className="w-5 h-5 text-white" />
                   ) : (
@@ -150,12 +151,13 @@ export default function RecentPublications() {
                       )}
                     </div>
                   </div>
-                  
+
                   <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
                     <span className="flex items-center gap-1 capitalize">
                       {getPostTypeIcon(scheduledPost.postType)}
-                      {scheduledPost.postType === 'feed' ? 'Feed' : 
-                       scheduledPost.postType === 'story' ? 'Story' : 'Feed & Story'}
+                      {scheduledPost.postType === 'feed' ? 'Feed' :
+                        scheduledPost.postType === 'story' ? 'Story' :
+                          scheduledPost.postType === 'reel' ? 'Reel' : 'Feed & Story'}
                     </span>
                     <span>•</span>
                     <span>
@@ -181,7 +183,7 @@ export default function RecentPublications() {
         postText={previewData.postText}
         selectedMedia={previewData.mediaIds}
         mediaList={previewData.allMedia}
-        onPublish={() => {}}
+        onPublish={() => { }}
         isPublishing={false}
         readOnly={true}
       />
diff --git a/client/src/pages/history.tsx b/client/src/pages/history.tsx
index c5e73a5..2bba9e4 100644
--- a/client/src/pages/history.tsx
+++ b/client/src/pages/history.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon, Eye, Image as ImageIcon, Smartphone, Loader2 } from "lucide-react";
+import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon, Eye, Image as ImageIcon, Smartphone, Loader2, Clapperboard } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -69,6 +69,8 @@ export default function History() {
       return <ImageIcon className="w-4 h-4" />;
     } else if (postType === 'story') {
       return <Smartphone className="w-4 h-4" />;
+    } else if (postType === 'reel') {
+      return <Clapperboard className="w-4 h-4" />;
     } else if (postType === 'both') {
       return (
         <div className="flex gap-0.5">
@@ -138,8 +140,8 @@ export default function History() {
                         <div className="flex-1">
                           <div className="flex items-center gap-3 mb-3">
                             <div className={`w-10 h-10 rounded-xl flex items-center justify-center shadow-md ${hasError ? 'bg-gradient-to-br from-destructive to-destructive/80' :
-                                isPending ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
-                                  'bg-gradient-to-br from-green-500 to-green-600'
+                              isPending ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
+                                'bg-gradient-to-br from-green-500 to-green-600'
                               }`}>
                               {hasError ? (
                                 <XCircle className="w-5 h-5 text-white" />
@@ -170,10 +172,10 @@ export default function History() {
                           </Button>
                           <Badge
                             className={`${hasError
-                                ? 'bg-destructive/20 text-destructive hover:bg-destructive/30'
-                                : isPending
-                                  ? 'bg-blue-500/20 text-blue-500 hover:bg-blue-500/30'
-                                  : 'bg-success/20 text-success hover:bg-success/30'
+                              ? 'bg-destructive/20 text-destructive hover:bg-destructive/30'
+                              : isPending
+                                ? 'bg-blue-500/20 text-blue-500 hover:bg-blue-500/30'
+                                : 'bg-success/20 text-success hover:bg-success/30'
                               }`}
                           >
                             {hasError ? (
@@ -202,7 +204,8 @@ export default function History() {
                           {getPostTypeIcon(scheduledPost.postType)}
                           <span className="font-medium capitalize">
                             {scheduledPost.postType === 'feed' ? 'Feed' :
-                              scheduledPost.postType === 'story' ? 'Story' : 'Feed & Story'}
+                              scheduledPost.postType === 'story' ? 'Story' :
+                                scheduledPost.postType === 'reel' ? 'Reel' : 'Feed & Story'}
                           </span>
                         </div>
                         <div className="flex items-center gap-2">