fix: better handling of post metadata (from db instead of arrays)

src/renderer/components/StatusBar/StatusBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useAppStore } from '../../store';
 import { ProjectSelector } from '../ProjectSelector';
 import './StatusBar.css';
@@ -8,16 +8,27 @@ export const StatusBar: React.FC = () => {
     syncStatus,
     syncConfigured,
     pendingChanges,
-    posts,
     media,
     tasks,
     selectedPostId,
     totalPosts,
   } = useAppStore();
 
+  const [selectedPostStatus, setSelectedPostStatus] = useState<string | null>(null);
+
+  // Fetch selected post status from database
+  useEffect(() => {
+    if (!selectedPostId) {
+      setSelectedPostStatus(null);
+      return;
+    }
+    window.electronAPI?.posts.get(selectedPostId).then(post => {
+      setSelectedPostStatus(post?.status || null);
+    });
+  }, [selectedPostId]);
+
   const runningTasks = tasks.filter(t => t.status === 'running');
   const totalPending = pendingChanges.posts + pendingChanges.media;
-  const selectedPost = posts.find(p => p.id === selectedPostId);
 
   return (
     <div className="status-bar">
@@ -53,16 +64,16 @@ export const StatusBar: React.FC = () => {
 
       <div className="status-bar-right">
         {/* Current Post Info */}
-        {selectedPost && (
+        {selectedPostStatus && (
           <div className="status-bar-item">
-            <span className={`status-dot status-${selectedPost.status}`} />
-            <span>{selectedPost.status}</span>
+            <span className={`status-dot status-${selectedPostStatus}`} />
+            <span>{selectedPostStatus}</span>
           </div>
         )}
 
         {/* Stats */}
         <div className="status-bar-item">
-          <span>{totalPosts || posts.length} posts</span>
+          <span>{totalPosts} posts</span>
         </div>
         <div className="status-bar-item">
           <span>{media.length} media</span>