@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/PostManager/PostManagerView.tsx

@@ -1,13 +1,12 @@
 /**
  * Post Manager View
- * Production-ready listing page for managing blog posts
- * Follows dashboard earth-tone design system
+ * Natural scroll layout with sticky header synchronization
  */
 
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Plus, List, Grid3x3 } from 'lucide-react';
+import { Plus, List, Grid3x3, Settings, Loader2, Zap } from 'lucide-react';
 import { PostListItem, PostStatus } from '../../types/post';
 import { PostStats } from './PostStats';
 import { PostFilters } from './PostFilters';
@@ -33,24 +32,21 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
     const [statusFilter, setStatusFilter] = useState<PostStatus | 'all'>('all');
     const [categoryFilter, setCategoryFilter] = useState<string>('all');
     const [currentLanguage, setCurrentLanguage] = useState<string>(locale || 'nl');
-    
-    // Load view mode preference from localStorage
+
     const getStoredViewMode = (): ViewMode => {
         if (typeof window === 'undefined') return 'list';
         const stored = localStorage.getItem(`${STORAGE_KEY_PREFIX}-${siteId}`);
         return (stored === 'list' || stored === 'cards') ? stored : 'list';
     };
-    
+
     const [viewMode, setViewMode] = useState<ViewMode>(getStoredViewMode);
-    
-    // Save view mode preference to localStorage when it changes
+
     useEffect(() => {
         if (typeof window !== 'undefined') {
             localStorage.setItem(`${STORAGE_KEY_PREFIX}-${siteId}`, viewMode);
         }
     }, [viewMode, siteId]);
 
-    // Fetch posts from API
     useEffect(() => {
         const fetchPosts = async () => {
             try {
@@ -59,38 +55,23 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                 const data = await response.json();
 
                 if (data.blogs && Array.isArray(data.blogs)) {
-                    // Convert API format to PostListItem format
-                    const postListItems: PostListItem[] = data.blogs.map((doc: APIBlogDocument) => {
-                        const blogPost = apiToBlogPost(doc);
-                        // Use semantic ID (id) - plugin-images handles resolution
-                        // The id is the semantic ID (e.g., "blog-featured-{slug}") which plugin-images resolves
-                        const featuredImageId = blogPost.metadata.featuredImage?.id;
-                        // Extract category from metadata or hero block
-                        let category: string | undefined = undefined;
-                        if (blogPost.metadata.categories && blogPost.metadata.categories.length > 0) {
-                            category = blogPost.metadata.categories[0];
-                        } else {
-                            // Check hero block for category
-                            const heroBlock = blogPost.blocks.find(block => block.type === 'hero');
-                            if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
-                                const heroCategory = (heroBlock.data as any).category;
-                                if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
-                                    category = heroCategory.trim();
-                                }
-                            }
-                        }
+
+
+
+                    const postListItems: PostListItem[] = data.blogs.map((doc: any) => {
                         return {
-                            id: blogPost.id,
-                            title: blogPost.title,
-                            slug: blogPost.slug,
-                            status: blogPost.publication.status,
-                            date: blogPost.publication.date,
-                            excerpt: blogPost.metadata.excerpt,
-                            featuredImage: featuredImageId,
-                            authorId: blogPost.publication.authorId,
-                            updatedAt: blogPost.updatedAt,
-                            category: category,
-                            lang: blogPost.metadata.lang,
+                            id: doc.id,
+                            title: doc.title,
+                            slug: doc.slug,
+                            status: doc.status,
+                            date: doc.publication?.date,
+                            excerpt: doc.summary,
+                            featuredImage: doc.image?.id || doc.image?.src,
+                            authorId: doc.authorId,
+                            author: doc.author,
+                            updatedAt: doc.updatedAt || doc.publication?.date || doc.date || new Date().toISOString(),
+                            category: doc.categoryTags?.category,
+                            lang: doc.lang,
                             availableLanguages: doc.availableLanguages,
                             languages: doc.languages,
                         };
@@ -108,7 +89,6 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
         fetchPosts();
     }, [currentLanguage]);
 
-    // Extract unique categories from posts
     const categories = React.useMemo(() => {
         const categorySet = new Set<string>();
         posts.forEach(post => {
@@ -119,7 +99,6 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
         return Array.from(categorySet).sort();
     }, [posts]);
 
-    // Extract unique languages from all posts
     const availableLanguages = React.useMemo(() => {
         const langSet = new Set<string>();
         posts.forEach(post => {
@@ -128,14 +107,11 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
             }
             if (post.lang) langSet.add(post.lang);
         });
-        // Always include the current locale/language to ensure it's selectable
         if (locale) langSet.add(locale);
         if (currentLanguage) langSet.add(currentLanguage);
-        
         return Array.from(langSet).sort();
     }, [posts, locale, currentLanguage]);
 
-    // Filter posts
     const filteredPosts = React.useMemo(() => {
         return posts.filter((post) => {
             const matchesSearch =
@@ -143,73 +119,28 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                 post.title.toLowerCase().includes(search.toLowerCase()) ||
                 post.excerpt?.toLowerCase().includes(search.toLowerCase()) ||
                 post.slug.toLowerCase().includes(search.toLowerCase());
-
             const matchesStatus = statusFilter === 'all' || post.status === statusFilter;
-
             const matchesCategory = categoryFilter === 'all' || post.category === categoryFilter;
-
             return matchesSearch && matchesStatus && matchesCategory;
         });
     }, [posts, search, statusFilter, categoryFilter]);
 
-    // Action handlers
-    const handleCreatePost = () => {
-        // Navigate to editor route - the plugin router will handle this
-        // The route 'new' maps to the editor view
-        window.location.href = '/dashboard/blog/new';
-    };
-
+    const handleCreatePost = () => { window.location.href = '/dashboard/blog/new'; };
     const handleEdit = (postId: string) => {
-        // Find the post to get its slug
         const post = posts.find(p => p.id === postId);
-        if (post) {
-            // Navigate to editor with slug (API uses slug, not ID)
-            window.location.href = `/dashboard/blog/editor/${post.slug}`;
-        }
-    };
-
-    const handlePreview = (postId: string) => {
-        // Open preview in new tab
-        window.open(`/dashboard/blog/preview/${postId}`, '_blank');
-    };
-
-    const handleDuplicate = (postId: string) => {
-        // TODO: Implement duplicate functionality
-        const post = posts.find((p) => p.id === postId);
-        if (post) {
-            const duplicated: PostListItem = {
-                ...post,
-                id: `duplicate-${Date.now()}`,
-                title: `${post.title} (Copy)`,
-                slug: `${post.slug}-copy-${Date.now()}`,
-                status: 'draft',
-                updatedAt: new Date().toISOString(),
-            };
-            setPosts((prev) => [...prev, duplicated]);
-        }
+        if (post) window.location.href = `/dashboard/blog/editor/${post.slug}`;
     };
-
+    const handlePreview = (postId: string) => { window.open(`/dashboard/blog/preview/${postId}`, '_blank'); };
+    const handleDuplicate = (postId: string) => { /* logic */ };
     const handleDelete = async (postId: string) => {
-        if (confirm('Are you sure you want to delete this post?')) {
-            try {
-                const post = posts.find(p => p.id === postId);
-                if (post) {
-                    const response = await fetch(`/api/plugin-blog/${post.slug}`, {
-                        method: 'DELETE',
-                    });
-
-                    if (response.ok) {
-                        // Remove from local state
-                        setPosts((prev) => prev.filter((p) => p.id !== postId));
-                        setTotalPosts(prev => prev - 1);
-                    } else {
-                        const error = await response.json();
-                        alert(error.error || 'Failed to delete post');
-                    }
+        if (confirm('Are you sure?')) {
+            const post = posts.find(p => p.id === postId);
+            if (post) {
+                const res = await fetch(`/api/plugin-blog/${post.slug}`, { method: 'DELETE' });
+                if (res.ok) {
+                    setPosts((prev) => prev.filter((p) => p.id !== postId));
+                    setTotalPosts(prev => prev - 1);
                 }
-            } catch (error) {
-                console.error('Failed to delete post:', error);
-                alert('Failed to delete post');
             }
         }
     };
@@ -217,96 +148,118 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
     const hasActiveFilters = search !== '' || statusFilter !== 'all' || categoryFilter !== 'all';
 
     return (
-        <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
-            {/* Header Section */}
-            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-                <div>
-                    <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
-                        Blog Posts
-                    </h1>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                        Manage your blog posts, drafts, and published content
-                    </p>
+        <div className="w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 bg-transparent">
+            {/* 1. HEADER SECTION */}
+            <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 px-2">
+                <div className="space-y-3">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/15 border border-primary/30 text-primary text-[10px] font-bold uppercase tracking-wider shadow-sm">
+                        <Zap size={12} className="fill-primary animate-pulse" />
+                        <span>Editorial Content Control</span>
+                    </div>
+                    <div>
+                        <h1 className="text-4xl font-bold text-dashboard-text tracking-tight leading-none mb-2">
+                            Blog <span className="text-primary">&</span> Articles
+                        </h1>
+                        <p className="text-sm text-dashboard-text-secondary font-medium max-w-md leading-relaxed opacity-80">
+                            Create and manage your digital publications and stories across the ecosystem.
+                        </p>
+                    </div>
                 </div>
 
-                <button
-                    onClick={handleCreatePost}
-                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20"
-                >
-                    <Plus size={16} />
-                    New Post
-                </button>
-            </div>
-
-            {/* Stats Summary */}
-            <PostStats total={totalPosts} posts={posts} />
-
-            {/* Filters & Search Bar with View Toggle */}
-            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
-                <PostFilters
-                    search={search}
-                    onSearchChange={setSearch}
-                    statusFilter={statusFilter}
-                    onStatusFilterChange={setStatusFilter}
-                    categoryFilter={categoryFilter}
-                    onCategoryFilterChange={setCategoryFilter}
-                    categories={categories}
-                    language={currentLanguage}
-                    onLanguageChange={setCurrentLanguage}
-                    availableLanguages={availableLanguages}
-                />
-
-                {/* View Toggle */}
-                <div className="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/50 rounded-full p-1 border border-neutral-300 dark:border-neutral-700">
+                <div className="flex items-center gap-4">
                     <button
-                        onClick={() => setViewMode('list')}
-                        className={`p-2 rounded-full transition-all ${viewMode === 'list'
-                            ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
-                            : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                            }`}
-                        title="List View"
+                        onClick={() => window.location.href = '/dashboard/blog/settings'}
+                        className="p-3.5 bg-dashboard-card/50 border border-dashboard-border/40 text-dashboard-text-secondary rounded-2xl hover:text-primary hover:border-primary/30 transition-all active:scale-95 shadow-sm"
+                        title="Blog Settings"
                     >
-                        <List size={18} />
+                        <Settings size={18} />
                     </button>
                     <button
-                        onClick={() => setViewMode('cards')}
-                        className={`p-2 rounded-full transition-all ${viewMode === 'cards'
-                            ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
-                            : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                            }`}
-                        title="Card View"
+                        onClick={handleCreatePost}
+                        className="group relative flex items-center gap-3 px-7 py-3.5 bg-primary text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest overflow-hidden transition-all hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20"
                     >
-                        <Grid3x3 size={18} />
+                        <Plus size={18} className="relative z-10" />
+                        <span className="relative z-10">Add New Post</span>
                     </button>
                 </div>
             </div>
 
-            {/* Content */}
-            {loading ? (
-                <div className="flex items-center justify-center py-20">
-                    <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+            {/* 2. STATS SECTION */}
+            <div className="px-2">
+                <PostStats total={totalPosts} posts={posts} />
+            </div>
+
+            {/* 3. STICKY TOOLBAR */}
+            <div className="sticky top-[-40px] lg:top-[-40px] z-40 bg-dashboard-bg/40 backdrop-blur-xl border-y border-dashboard-border/40 py-4 px-2 ml-[-8px] mr-[-8px]">
+                <div className="flex flex-col lg:flex-row items-center gap-4">
+                    <PostFilters
+                        search={search}
+                        onSearchChange={setSearch}
+                        statusFilter={statusFilter}
+                        onStatusFilterChange={setStatusFilter}
+                        categoryFilter={categoryFilter}
+                        onCategoryFilterChange={setCategoryFilter}
+                        categories={categories}
+                        language={currentLanguage}
+                        onLanguageChange={setCurrentLanguage}
+                        availableLanguages={availableLanguages}
+                    />
+
+                    {/* View Toggle */}
+                    <div className="flex items-center gap-1.5 p-1.5 bg-dashboard-card/50 rounded-xl border border-dashboard-border/40">
+                        <button
+                            onClick={() => setViewMode('list')}
+                            className={`p-2.5 rounded-lg transition-all ${viewMode === 'list'
+                                ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'
+                                }`}
+                            title="List View"
+                        >
+                            <List size={18} />
+                        </button>
+                        <button
+                            onClick={() => setViewMode('cards')}
+                            className={`p-2.5 rounded-lg transition-all ${viewMode === 'cards'
+                                ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'
+                                }`}
+                            title="Card View"
+                        >
+                            <Grid3x3 size={18} />
+                        </button>
+                    </div>
                 </div>
-            ) : filteredPosts.length === 0 ? (
-                <EmptyState hasFilters={hasActiveFilters} onCreatePost={handleCreatePost} />
-            ) : viewMode === 'list' ? (
-                <PostTable
-                    posts={filteredPosts}
-                    locale={locale}
-                    onEdit={handleEdit}
-                    onPreview={handlePreview}
-                    onDuplicate={handleDuplicate}
-                    onDelete={handleDelete}
-                />
-            ) : (
-                <PostCards
-                    posts={filteredPosts}
-                    locale={locale}
-                    onEdit={handleEdit}
-                    onPreview={handlePreview}
-                    onDuplicate={handleDuplicate}
-                    onDelete={handleDelete}
-                />
-            )}
+            </div>
+
+            {/* 4. CONTENT GRID */}
+            <div className="px-2 min-h-[400px] pb-32">
+                {loading ? (
+                    <div className="flex flex-col items-center justify-center py-32 gap-4">
+                        <Loader2 className="animate-spin text-primary opacity-40" size={40} />
+                        <p className="text-[10px] font-bold text-primary uppercase tracking-widest animate-pulse">Loading Publications</p>
+                    </div>
+                ) : filteredPosts.length === 0 ? (
+                    <EmptyState hasFilters={hasActiveFilters} onCreatePost={handleCreatePost} />
+                ) : viewMode === 'list' ? (
+                    <PostTable
+                        posts={filteredPosts}
+                        locale={locale}
+                        onEdit={handleEdit}
+                        onPreview={handlePreview}
+                        onDuplicate={handleDuplicate}
+                        onDelete={handleDelete}
+                    />
+                ) : (
+                    <PostCards
+                        posts={filteredPosts}
+                        locale={locale}
+                        onEdit={handleEdit}
+                        onPreview={handlePreview}
+                        onDuplicate={handleDuplicate}
+                        onDelete={handleDelete}
+                    />
+                )}
+            </div>
         </div>
     );
 }

package/src/views/PostManager/PostStats.tsx

@@ -24,53 +24,54 @@ export function PostStats({ total, posts }: PostStatsProps) {
             label: 'Total Posts',
             value: total,
             icon: FileText,
-            color: 'text-neutral-600 dark:text-neutral-400',
-            bgColor: 'bg-neutral-100 dark:bg-neutral-800',
+            color: 'text-primary',
+            accent: 'bg-primary',
         },
         {
             label: 'Published',
             value: published,
             icon: CheckCircle2,
-            color: 'text-green-600 dark:text-green-400',
-            bgColor: 'bg-green-500/10 dark:bg-green-500/20',
+            color: 'text-emerald-500',
+            accent: 'bg-emerald-500',
         },
         {
             label: 'Drafts',
             value: drafts,
             icon: Clock,
-            color: 'text-amber-600 dark:text-amber-400',
-            bgColor: 'bg-amber-500/10 dark:bg-amber-500/20',
+            color: 'text-amber-500',
+            accent: 'bg-amber-500',
         },
         {
             label: 'Scheduled',
             value: scheduled,
             icon: Archive,
-            color: 'text-blue-600 dark:text-blue-400',
-            bgColor: 'bg-blue-500/10 dark:bg-blue-500/20',
+            color: 'text-blue-500',
+            accent: 'bg-blue-500',
         },
     ];
 
     return (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-5">
             {stats.map((stat) => {
                 const Icon = stat.icon;
                 return (
                     <div
                         key={stat.label}
-                        className={`p-4 rounded-2xl border border-neutral-300 dark:border-neutral-700 ${stat.bgColor}`}
+                        className="bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500"
                     >
-                        <div className="flex items-center gap-3">
-                            <div className={`p-2 rounded-xl ${stat.bgColor}`}>
-                                <Icon className={`size-5 ${stat.color}`} />
-                            </div>
-                            <div>
-                                <p className="text-2xl font-black text-neutral-950 dark:text-white">
-                                    {stat.value as ReactNode}
-                                </p>
-                                <p className="text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+                        <div className={`absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 transition-all duration-700 ${stat.color}`}>
+                            <Icon size={80} />
+                        </div>
+                        <div className="relative z-10">
+                            <div className="flex items-center gap-2 mb-1">
+                                <div className={`size-1.5 rounded-full ${stat.accent} animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),0.5)]`} />
+                                <label className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest block opacity-80">
                                     {stat.label}
-                                </p>
+                                </label>
                             </div>
+                            <p className={`text-3xl font-bold tracking-tight ${stat.color}`}>
+                                {stat.value as ReactNode}
+                            </p>
                         </div>
                     </div>
                 );