From 0578d15288fe295365ba4ef16fa9ef7261f2e8aa Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 10 Oct 2025 12:46:40 +0000
Subject: [PATCH] Add icons to distinguish between feed, story, and combined
 posts

Integrates new icons for 'feed', 'story', and 'both' post types across CalendarListView, CalendarView, RecentPublications, and History components. Adds a post preview modal and refactors history view to display scheduled posts. Enhances CalendarView with auto-refresh.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/d2GBAIk
---
 client/src/components/calendar-list-view.tsx  |  19 +-
 client/src/components/calendar-view.tsx       |  31 ++-
 client/src/components/recent-publications.tsx |  25 +-
 client/src/pages/history.tsx                  | 215 +++++++++++++-----
 4 files changed, 229 insertions(+), 61 deletions(-)

diff --git a/client/src/components/calendar-list-view.tsx b/client/src/components/calendar-list-view.tsx
index 82105eb..0ca4a3e 100644
--- a/client/src/components/calendar-list-view.tsx
+++ b/client/src/components/calendar-list-view.tsx
@@ -1,6 +1,6 @@
 import { format, isSameDay, parseISO } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Edit, Trash2, ChevronDown, ChevronUp, Eye } from "lucide-react";
+import { Edit, Trash2, ChevronDown, ChevronUp, Eye, Image, Smartphone } from "lucide-react";
 import { SiFacebook, SiInstagram } from "react-icons/si";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
@@ -15,6 +15,22 @@ interface CalendarListViewProps {
 export default function CalendarListView({ scheduledPosts, onEditPost, onDeletePost, onPreviewPost }: CalendarListViewProps) {
   const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
 
+  const getPostTypeIcon = (postType: string) => {
+    if (postType === 'feed') {
+      return <Image className="w-4 h-4" />;
+    } else if (postType === 'story') {
+      return <Smartphone className="w-4 h-4" />;
+    } else if (postType === 'both') {
+      return (
+        <div className="flex gap-0.5">
+          <Image className="w-3 h-3" />
+          <Smartphone className="w-3 h-3" />
+        </div>
+      );
+    }
+    return null;
+  };
+
   // Group posts by date
   const groupedPosts = scheduledPosts.reduce((acc: { [key: string]: any[] }, post) => {
     if (!post.scheduledAt) return acc;
@@ -115,6 +131,7 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
                         <div className="flex items-start justify-between gap-3">
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2 mb-1">
+                              {getPostTypeIcon(post.postType)}
                               <span className="font-semibold text-lg text-foreground">{time}</span>
                               <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
                                 isPending 
diff --git a/client/src/components/calendar-view.tsx b/client/src/components/calendar-view.tsx
index 5d9fdfe..14979fa 100644
--- a/client/src/components/calendar-view.tsx
+++ b/client/src/components/calendar-view.tsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Trash2, Edit, MoreHorizontal, Eye } from "lucide-react";
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Trash2, Edit, MoreHorizontal, Eye, Image, Smartphone } from "lucide-react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -24,6 +24,7 @@ export default function CalendarView() {
 
   const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
     queryKey: ["/api/scheduled-posts"],
+    refetchInterval: 30000, // Auto-refresh every 30 seconds
   });
 
   const deletePostMutation = useMutation({
@@ -90,6 +91,22 @@ export default function CalendarView() {
     }
   };
 
+  const getPostTypeIcon = (postType: string) => {
+    if (postType === 'feed') {
+      return <Image className="w-3 h-3" />;
+    } else if (postType === 'story') {
+      return <Smartphone className="w-3 h-3" />;
+    } else if (postType === 'both') {
+      return (
+        <div className="flex gap-0.5">
+          <Image className="w-2.5 h-2.5" />
+          <Smartphone className="w-2.5 h-2.5" />
+        </div>
+      );
+    }
+    return null;
+  };
+
   const getPostsForDate = (date: Date) => {
     return (scheduledPosts || []).filter(post => {
       if (!post.scheduledAt) return false;
@@ -256,7 +273,10 @@ export default function CalendarView() {
                         >
                           <div className="flex items-start justify-between gap-2">
                             <div className="flex-1 min-w-0">
-                              <div className="font-semibold">{time}</div>
+                              <div className="flex items-center gap-1 font-semibold">
+                                {getPostTypeIcon(post.postType)}
+                                <span>{time}</span>
+                              </div>
                               <div className="flex items-center gap-1 truncate opacity-90">
                                 <PlatformIcon className="w-3 h-3 flex-shrink-0" />
                                 <span className="truncate">{pageName}</span>
@@ -332,7 +352,10 @@ export default function CalendarView() {
                                 >
                                   <div className="flex items-start justify-between gap-2">
                                     <div className="flex-1 min-w-0">
-                                      <div className="font-semibold">{time}</div>
+                                      <div className="flex items-center gap-1 font-semibold">
+                                        {getPostTypeIcon(post.postType)}
+                                        <span>{time}</span>
+                                      </div>
                                       <div className="flex items-center gap-1 truncate opacity-90">
                                         <PlatformIcon className="w-3 h-3 flex-shrink-0" />
                                         <span className="truncate">{pageName}</span>
diff --git a/client/src/components/recent-publications.tsx b/client/src/components/recent-publications.tsx
index 550d0ab..30362be 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 } from "lucide-react";
+import { Facebook, Instagram, Clock, CheckCircle2, XCircle, Eye, Image as ImageIcon, Smartphone } from "lucide-react";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import type { ScheduledPost, SocialPage, Post, Media } from "@shared/schema";
@@ -60,6 +60,22 @@ export default function RecentPublications() {
     }
   };
 
+  const getPostTypeIcon = (postType: string) => {
+    if (postType === 'feed') {
+      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 === 'both') {
+      return (
+        <div className="flex gap-0.5">
+          <ImageIcon className="w-3 h-3" />
+          <Smartphone className="w-3 h-3" />
+        </div>
+      );
+    }
+    return null;
+  };
+
   return (
     <Card className="rounded-2xl border-border/50 shadow-lg" data-testid="card-recent-publications">
       <CardHeader>
@@ -136,9 +152,10 @@ export default function RecentPublications() {
                   </div>
                   
                   <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
-                    <span className="capitalize">
-                      {scheduledPost.postType === 'feed' ? 'Publication' : 
-                       scheduledPost.postType === 'story' ? 'Story' : scheduledPost.postType}
+                    <span className="flex items-center gap-1 capitalize">
+                      {getPostTypeIcon(scheduledPost.postType)}
+                      {scheduledPost.postType === 'feed' ? 'Feed' : 
+                       scheduledPost.postType === 'story' ? 'Story' : 'Feed & Story'}
                     </span>
                     <span>•</span>
                     <span>
diff --git a/client/src/pages/history.tsx b/client/src/pages/history.tsx
index 37154a2..3b770fb 100644
--- a/client/src/pages/history.tsx
+++ b/client/src/pages/history.tsx
@@ -1,22 +1,83 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon } from "lucide-react";
+import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon, Eye, Image as ImageIcon, Smartphone } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import type { Post } from "@shared/schema";
+import { Button } from "@/components/ui/button";
+import type { ScheduledPost, SocialPage, Post, Media } from "@shared/schema";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
+import { PreviewModal } from "@/components/preview-modal";
+import { useToast } from "@/hooks/use-toast";
+
+type ScheduledPostWithRelations = ScheduledPost & {
+  post?: Post;
+  page?: SocialPage;
+};
 
 export default function History() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [previewModalOpen, setPreviewModalOpen] = useState(false);
+  const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
+  const { toast } = useToast();
 
-  const { data: posts = [], isLoading } = useQuery<Post[]>({
-    queryKey: ['/api/posts'],
+  const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
+    queryKey: ['/api/scheduled-posts'],
   });
 
-  const publishedPosts = posts.filter(p => p.status === 'published');
+  // Filter attempted posts (scheduled in the past)
+  const now = new Date();
+  const publishedPosts = scheduledPosts
+    .filter(sp => sp.scheduledAt && new Date(sp.scheduledAt) <= now)
+    .sort((a, b) => new Date(b.scheduledAt!).getTime() - new Date(a.scheduledAt!).getTime());
+
+  const handlePreviewPost = async (scheduledPost: ScheduledPostWithRelations) => {
+    try {
+      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({
+        title: "Erreur",
+        description: "Impossible de charger la prévisualisation",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const getPostTypeIcon = (postType: string) => {
+    if (postType === 'feed') {
+      return <ImageIcon className="w-4 h-4" />;
+    } else if (postType === 'story') {
+      return <Smartphone className="w-4 h-4" />;
+    } else if (postType === 'both') {
+      return (
+        <div className="flex gap-0.5">
+          <ImageIcon className="w-3 h-3" />
+          <Smartphone className="w-3 h-3" />
+        </div>
+      );
+    }
+    return null;
+  };
 
   return (
     <div className="flex h-screen overflow-hidden bg-background">
@@ -65,60 +126,110 @@ export default function History() {
             </Card>
           ) : (
             <div className="space-y-6">
-              {publishedPosts.map((post) => (
-                <Card key={post.id} className="rounded-2xl border-border/50 shadow-lg overflow-hidden" data-testid={`card-post-${post.id}`}>
-                  <CardHeader className="border-b border-border/50 bg-gradient-to-r from-muted/20 to-muted/10 p-6">
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-3 mb-3">
-                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-success to-success/80 flex items-center justify-center shadow-md">
-                            <CheckCircle className="w-5 h-5 text-white" />
+              {publishedPosts.map((scheduledPost) => {
+                const isPending = !scheduledPost.publishedAt;
+                const hasError = !!scheduledPost.error;
+                
+                return (
+                  <Card key={scheduledPost.id} className="rounded-2xl border-border/50 shadow-lg overflow-hidden" data-testid={`card-post-${scheduledPost.id}`}>
+                    <CardHeader className="border-b border-border/50 bg-gradient-to-r from-muted/20 to-muted/10 p-6">
+                      <div className="flex items-start justify-between">
+                        <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' :
+                              'bg-gradient-to-br from-success to-success/80'
+                            }`}>
+                              {hasError ? (
+                                <XCircle className="w-5 h-5 text-white" />
+                              ) : (
+                                <CheckCircle className="w-5 h-5 text-white" />
+                              )}
+                            </div>
+                            <CardTitle className="text-lg">
+                              {scheduledPost.page?.pageName || 'Page inconnue'}
+                            </CardTitle>
                           </div>
-                          <CardTitle className="text-lg">
-                            Publication #{post.id.substring(0, 8)}
-                          </CardTitle>
+                          <p className="text-sm text-foreground leading-relaxed line-clamp-3">
+                            {scheduledPost.post?.content || 'Aucun texte'}
+                          </p>
+                        </div>
+                        <div className="flex items-center gap-2 ml-4">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handlePreviewPost(scheduledPost)}
+                            className="h-9 w-9 p-0"
+                            data-testid={`button-preview-post-${scheduledPost.id}`}
+                            title="Prévisualiser"
+                          >
+                            <Eye className="w-4 h-4" />
+                          </Button>
+                          <Badge 
+                            className={`${
+                              hasError 
+                                ? 'bg-destructive/20 text-destructive hover:bg-destructive/30' 
+                                : 'bg-success/20 text-success hover:bg-success/30'
+                            }`}
+                          >
+                            {hasError ? (
+                              <>
+                                <XCircle className="w-3 h-3 mr-1" />
+                                Échoué
+                              </>
+                            ) : (
+                              <>
+                                <CheckCircle className="w-3 h-3 mr-1" />
+                                Publié
+                              </>
+                            )}
+                          </Badge>
                         </div>
-                        <p className="text-sm text-foreground leading-relaxed line-clamp-3">
-                          {post.content}
-                        </p>
                       </div>
-                      <Badge 
-                        className={`ml-4 ${
-                          post.status === 'published' 
-                            ? 'bg-success/20 text-success hover:bg-success/30' 
-                            : 'bg-destructive/20 text-destructive hover:bg-destructive/30'
-                        }`}
-                      >
-                        {post.status === 'published' && <CheckCircle className="w-3 h-3 mr-1" />}
-                        {post.status === 'failed' && <XCircle className="w-3 h-3 mr-1" />}
-                        {post.status === 'published' ? 'Publié' : 'Échoué'}
-                      </Badge>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="p-6">
-                    <div className="flex items-center gap-6 text-sm text-muted-foreground flex-wrap">
-                      <div className="flex items-center gap-2">
-                        <Calendar className="w-4 h-4" />
-                        <span className="font-medium">
-                          {post.updatedAt 
-                            ? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
-                            : 'Date inconnue'
-                          }
-                        </span>
+                    </CardHeader>
+                    <CardContent className="p-6">
+                      <div className="flex items-center gap-6 text-sm text-muted-foreground flex-wrap">
+                        <div className="flex items-center gap-2">
+                          {getPostTypeIcon(scheduledPost.postType)}
+                          <span className="font-medium capitalize">
+                            {scheduledPost.postType === 'feed' ? 'Feed' : 
+                             scheduledPost.postType === 'story' ? 'Story' : 'Feed & Story'}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Calendar className="w-4 h-4" />
+                          <span className="font-medium">
+                            {scheduledPost.scheduledAt 
+                              ? format(new Date(scheduledPost.scheduledAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
+                              : 'Date inconnue'
+                            }
+                          </span>
+                        </div>
+                        {scheduledPost.post?.aiGenerated && (
+                          <Badge variant="outline" className="text-xs bg-gradient-to-r from-primary/5 to-secondary/5 border-primary/20">
+                            <CheckCircle className="w-3 h-3 mr-1" />
+                            Généré par IA
+                          </Badge>
+                        )}
                       </div>
-                      {post.aiGenerated && (
-                        <Badge variant="outline" className="text-xs bg-gradient-to-r from-primary/5 to-secondary/5 border-primary/20">
-                          <CheckCircle className="w-3 h-3 mr-1" />
-                          Généré par IA
-                        </Badge>
-                      )}
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
+                    </CardContent>
+                  </Card>
+                );
+              })}
             </div>
           )}
         </div>
+
+        <PreviewModal
+          open={previewModalOpen}
+          onOpenChange={setPreviewModalOpen}
+          postText={previewData.postText}
+          selectedMedia={previewData.mediaIds}
+          mediaList={previewData.allMedia}
+          onPublish={() => {}}
+          isPublishing={false}
+          readOnly={true}
+        />
       </main>
     </div>
   );