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

@@ -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 

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>

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>