Show published status for articles

backend/app/Http/Resources/ArticleResource.php

@@ -5,13 +5,11 @@
 use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\JsonResource;
 
+/**
+ * @property int $id
+ */
 class ArticleResource extends JsonResource
 {
-    /**
-     * Transform the resource into an array.
-     *
-     * @return array<string, mixed>
-     */
     public function toArray(Request $request): array
     {
         return [
@@ -27,10 +25,11 @@ public function toArray(Request $request): array
             'approved_by' => $this->approved_by,
             'fetched_at' => $this->fetched_at?->toISOString(),
             'validated_at' => $this->validated_at?->toISOString(),
+            'is_published' => $this->relationLoaded('articlePublication') && $this->articlePublication !== null,
             'created_at' => $this->created_at->toISOString(),
             'updated_at' => $this->updated_at->toISOString(),
             'feed' => new FeedResource($this->whenLoaded('feed')),
             'article_publication' => new ArticlePublicationResource($this->whenLoaded('articlePublication')),
         ];
     }
-}
+}

frontend/src/lib/api.ts

@@ -41,6 +41,7 @@ export interface Article {
   published_at: string | null;
   author: string | null;
   approval_status: 'pending' | 'approved' | 'rejected';
+  is_published: boolean;
   created_at: string;
   updated_at: string;
   feed?: Feed;

frontend/src/pages/Articles.tsx

@@ -57,8 +57,19 @@ const Articles: React.FC = () => {
     refreshMutation.mutate();
   };
 
-  const getStatusBadge = (status: string) => {
+  const getStatusBadge = (article: Article) => {
-    switch (status) {
+    // Show "Published" status if the article has been published
+    if (article.is_published) {
+      return (
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+          <ExternalLink className="h-3 w-3 mr-1" />
+          Published
+        </span>
+      );
+    }
+    
+    // Otherwise show the approval status
+    switch (article.approval_status) {
       case 'approved':
         return (
           <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
@@ -162,7 +173,7 @@ const Articles: React.FC = () => {
                 </div>
               </div>
               <div className="flex items-center space-x-3 ml-4">
-                {getStatusBadge(article.approval_status)}
+                {getStatusBadge(article)}
                 {article.url && (
                   <a
                     href={article.url}