feat: implement Facebook posting service, add new sidebar component, and introduce Remotion server route.

client/src/components/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, Wand2, BarChart3, Video, Music } from "lucide-react";
+import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, ChevronDown, Wand2, BarChart3, Video, Music, Shield } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -19,11 +19,19 @@ export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
     const saved = localStorage.getItem('sidebar-collapsed');
     return saved === 'true';
   });
+  const [adminExpanded, setAdminExpanded] = useState(() => {
+    const saved = localStorage.getItem('sidebar-admin-expanded');
+    return saved !== 'false'; // default: expanded
+  });
 
   useEffect(() => {
     localStorage.setItem('sidebar-collapsed', String(isCollapsed));
   }, [isCollapsed]);
 
+  useEffect(() => {
+    localStorage.setItem('sidebar-admin-expanded', String(adminExpanded));
+  }, [adminExpanded]);
+
   const { data: session } = useQuery<{ id: string; username: string; role: string }>({
     queryKey: ["/api/auth/session"],
     retry: false,
@@ -186,155 +194,64 @@ export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
       <div className="p-4 border-t border-sidebar-border space-y-2">
         {isAdmin && (
           <>
-            {!isCollapsed && (
-              <div className="mb-2">
-                <p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
+            {/* Admin section toggle */}
+            <button
+              onClick={() => !isCollapsed && setAdminExpanded(v => !v)}
+              className={`w-full flex items-center gap-3 px-4 py-2 rounded-xl transition-all text-muted-foreground hover:text-foreground hover:bg-sidebar-accent relative group ${isCollapsed ? 'justify-center' : ''}`}
+            >
+              <Shield className="w-4 h-4 shrink-0" />
+              {!isCollapsed && (
+                <>
+                  <span className="text-xs font-semibold uppercase tracking-wider flex-1 text-left">Administration</span>
+                  <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${adminExpanded ? '' : '-rotate-90'}`} />
+                </>
+              )}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                  Administration
+                </div>
+              )}
+            </button>
+
+            {/* Admin links — collapsible */}
+            {(adminExpanded || isCollapsed) && (
+              <div className={`space-y-0.5 ${!isCollapsed ? 'pl-2' : ''}`}>
+                {[
+                  { href: "/pages",       icon: Users,   label: "Pages gérées",       testId: "link-pages-gérées" },
+                  { href: "/ai",          icon: Bot,     label: "Assistant IA",        testId: "link-assistant-ia" },
+                  { href: "/users",       icon: UserCog, label: "Utilisateurs",        testId: "link-users" },
+                  { href: "/sql",         icon: Database,label: "SQL",                 testId: "link-sql" },
+                  { href: "/audio-admin", icon: Music,   label: "Bibliothèque Audio",  testId: "link-audio-admin" },
+                  { href: "/settings",    icon: Settings,label: "Paramètres",          testId: "link-settings" },
+                ].map(({ href, icon: Icon, label, testId }) => (
+                  <a
+                    key={href}
+                    href={href}
+                    onClick={(e) => handleLinkClick(href, e)}
+                    className={`
+                      flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all relative group cursor-pointer
+                      ${location === href
+                        ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
+                        : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
+                      }
+                      ${isCollapsed ? 'justify-center' : ''}
+                    `}
+                    data-testid={testId}
+                  >
+                    {location === href && (
+                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+                    )}
+                    <Icon className="w-4 h-4 shrink-0" />
+                    {!isCollapsed && <span className="text-sm">{label}</span>}
+                    {isCollapsed && (
+                      <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                        {label}
+                      </div>
+                    )}
+                  </a>
+                ))}
               </div>
             )}
-            <a
-              href="/pages"
-              onClick={(e) => handleLinkClick("/pages", e)}
-              className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
-                ${location === "/pages"
-                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
-                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
-                }
-                ${isCollapsed ? 'justify-center' : ''}
-              `}
-              data-testid="link-pages-gérées"
-            >
-              {location === "/pages" && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
-              )}
-              <Users className="w-5 h-5" />
-              {!isCollapsed && <span>Pages gérées</span>}
-              {isCollapsed && (
-                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
-                  Pages gérées
-                </div>
-              )}
-            </a>
-            <a
-              href="/ai"
-              onClick={(e) => handleLinkClick("/ai", e)}
-              className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
-                ${location === "/ai"
-                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
-                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
-                }
-                ${isCollapsed ? 'justify-center' : ''}
-              `}
-              data-testid="link-assistant-ia"
-            >
-              {location === "/ai" && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
-              )}
-              <Bot className="w-5 h-5" />
-              {!isCollapsed && <span>Assistant IA</span>}
-              {isCollapsed && (
-                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
-                  Assistant IA
-                </div>
-              )}
-            </a>
-            <a
-              href="/users"
-              onClick={(e) => handleLinkClick("/users", e)}
-              className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
-                ${location === "/users"
-                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
-                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
-                }
-                ${isCollapsed ? 'justify-center' : ''}
-              `}
-              data-testid="link-users"
-            >
-              {location === "/users" && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
-              )}
-              <UserCog className="w-5 h-5" />
-              {!isCollapsed && <span>Utilisateurs</span>}
-              {isCollapsed && (
-                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
-                  Utilisateurs
-                </div>
-              )}
-            </a>
-            <a
-              href="/sql"
-              onClick={(e) => handleLinkClick("/sql", e)}
-              className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
-                ${location === "/sql"
-                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
-                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
-                }
-                ${isCollapsed ? 'justify-center' : ''}
-              `}
-              data-testid="link-sql"
-            >
-              {location === "/sql" && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
-              )}
-              <Database className="w-5 h-5" />
-              {!isCollapsed && <span>SQL</span>}
-              {isCollapsed && (
-                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
-                  SQL
-                </div>
-              )}
-            </a>
-            <a
-              href="/audio-admin"
-              onClick={(e) => handleLinkClick("/audio-admin", e)}
-              className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
-                ${location === "/audio-admin"
-                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
-                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
-                }
-                ${isCollapsed ? 'justify-center' : ''}
-              `}
-              data-testid="link-audio-admin"
-            >
-              {location === "/audio-admin" && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
-              )}
-              <Music className="w-5 h-5" />
-              {!isCollapsed && <span>Bibliothèque Audio</span>}
-              {isCollapsed && (
-                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
-                  Bibliothèque Audio
-                </div>
-              )}
-            </a>
-            <a
-              href="/settings"
-              onClick={(e) => handleLinkClick("/settings", e)}
-              className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
-                ${location === "/settings"
-                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
-                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
-                }
-                ${isCollapsed ? 'justify-center' : ''}
-              `}
-              data-testid="link-settings"
-            >
-              {location === "/settings" && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
-              )}
-              <Settings className="w-5 h-5" />
-              {!isCollapsed && <span>Paramètres</span>}
-              {isCollapsed && (
-                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
-                  Paramètres
-                </div>
-              )}
-            </a>
           </>
         )}
 

server/routes/remotion.ts

@@ -375,7 +375,7 @@ remotionRouter.post("/publish", async (req, res) => {
           // Upload video bytes directly — Facebook cannot access local URLs
           const videoBuffer = await fs.promises.readFile(localPath);
           const arrayBuffer = videoBuffer.buffer.slice(videoBuffer.byteOffset, videoBuffer.byteOffset + videoBuffer.byteLength) as ArrayBuffer;
-          const reelId = await facebookService.publishReelFromBuffer(page, arrayBuffer, description || "");
+          const reelId = await facebookService.publishVideoFromBuffer(page, arrayBuffer, description || "");
           await dbStorage.updateScheduledPost(scheduledPost.id, { publishedAt: new Date(), externalPostId: reelId });
           results.push({ pageId, success: true, reelId });
         } else {

server/services/facebook.ts

@@ -79,7 +79,7 @@ export class FacebookService {
         : videoMedia.originalUrl;
       const nodeBuffer = await fs.promises.readFile(localPath);
       const arrayBuffer = nodeBuffer.buffer.slice(nodeBuffer.byteOffset, nodeBuffer.byteOffset + nodeBuffer.byteLength) as ArrayBuffer;
-      return await this.publishReelFromBuffer(page, arrayBuffer, post.content);
+      return await this.publishVideoFromBuffer(page, arrayBuffer, post.content);
     } else {
       // Default to feed
       const imageMedia = mediaList.filter(m => m.type === 'image');
@@ -561,10 +561,49 @@ export class FacebookService {
     return postId;
   }
 
+  /**
+   * Publie une vidéo sur Facebook en uploadant les données binaires via multipart.
+   * Utilise le même endpoint /videos que publishReel mais sans URL publique requise.
+   * Plus compatible que publishReelFromBuffer (pas besoin des permissions Reels API).
+   */
+  async publishVideoFromBuffer(
+    page: SocialPage,
+    videoBuffer: ArrayBuffer,
+    description?: string
+  ): Promise<string> {
+    if (!page.accessToken) throw new Error('No access token found for this page');
+
+    console.log('🎬 Publishing video via multipart to /videos:', {
+      pageId: page.pageId,
+      pageName: page.pageName,
+      size: `${(videoBuffer.byteLength / 1024 / 1024).toFixed(2)} MB`,
+    });
+
+    const formData = new FormData();
+    formData.append('access_token', page.accessToken);
+    if (description) formData.append('description', description);
+    formData.append('source', new Blob([videoBuffer], { type: 'video/mp4' }), 'video.mp4');
+
+    const response = await fetch(`${this.baseUrl}/${page.pageId}/videos`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json() as FacebookError;
+      throw new Error(`Facebook API error publishing video: ${error.error.message} (code: ${error.error.code})`);
+    }
+
+    const data = await response.json() as FacebookVideoResponse;
+    const postId = data.post_id || data.id;
+    console.log('✅ Video published via multipart! ID:', postId);
+    return postId;
+  }
+
   /**
    * Publie une vidéo comme Reel Facebook en uploadant directement les données binaires
    * Utile quand on a la vidéo en base64 (après traitement FFmpeg)
-   * 
+   *
    * @param page - Page Facebook cible
    * @param videoBuffer - Buffer de la vidéo
    * @param description - Description du Reel (optionnel)