@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/PostManager/PostCards.tsx

@@ -5,9 +5,9 @@
 
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Calendar, User, UserCheck } from 'lucide-react';
-import { Image } from '@jhits/plugin-images';
+import React from 'react';
+import { FileText, Tag, Activity } from 'lucide-react';
+import { Image as PluginImage } from '@jhits/plugin-images';
 import { PostListItem, PostStatus } from '../../types/post';
 import { PostActionsMenu } from './PostActionsMenu';
 import { LanguageFlags } from './LanguageFlags';
@@ -25,17 +25,17 @@ export interface PostCardsProps {
 function getStatusBadgeColor(status: PostStatus | 'not-translated') {
     switch (status) {
         case 'published':
-            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+            return 'bg-emerald-500 text-white border-emerald-400 shadow-lg shadow-emerald-500/20';
         case 'draft':
-            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+            return 'bg-amber-500 text-white border-amber-400 shadow-lg shadow-amber-500/20';
         case 'scheduled':
-            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+            return 'bg-blue-500 text-white border-blue-400 shadow-lg shadow-blue-500/20';
         case 'archived':
-            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+            return 'bg-neutral-500 text-white border-neutral-400';
         case 'not-translated':
-            return 'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20 italic';
+            return 'bg-red-500/10 text-red-500 border-red-500/20 italic';
         default:
-            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+            return 'bg-neutral-500/10 text-neutral-500 border-neutral-500/20';
     }
 }
 
@@ -58,150 +58,144 @@ export function PostCards({
 }: PostCardsProps) {
     const { data: session, status: sessionStatus } = useSession();
     const currentUserId = (session?.user as any)?.id;
-    const [userMap, setUserMap] = useState<Record<string, string>>({});
     
     // Helper function to check if user is the owner
     const isPostOwner = (post: PostListItem): boolean => {
-        if (sessionStatus === 'loading') return false; // Don't show actions while loading
+        if (sessionStatus === 'loading') return false;
         if (!currentUserId || !post.authorId) return false;
-        // Convert both to strings for comparison to handle ObjectId vs string
         return String(currentUserId) === String(post.authorId);
     };
 
-    // Fetch users to map IDs to names
-    useEffect(() => {
-        const fetchUsers = async () => {
-            try {
-                const response = await fetch('/api/users');
-                const users = await response.json();
-                if (Array.isArray(users)) {
-                    const map: Record<string, string> = {};
-                    users.forEach((user: { _id: string; name?: string; email?: string }) => {
-                        const id = user._id?.toString();
-                        if (id) {
-                            map[id] = user.name || user.email || 'Unknown';
-                        }
-                    });
-                    setUserMap(map);
-                }
-            } catch (error) {
-                console.error('Failed to fetch users:', error);
-            }
-        };
-        fetchUsers();
-    }, []);
-
-    const getAuthorName = (authorId?: string) => {
-        if (!authorId) return 'Unknown';
-        return userMap[authorId] || authorId;
+    const getAuthorData = (post: PostListItem) => {
+        if (post.author) {
+            return {
+                name: post.author.name || 'Unknown Author',
+                image: post.author.image
+            };
+        }
+        return { name: 'Unknown Author' };
     };
 
     return (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-            {posts.map((post) => (
-                <div
-                    key={post.id}
-                    className="flex flex-col bg-dashboard-card rounded-2xl border border-dashboard-border overflow-hidden hover:shadow-xl transition-all duration-300 group h-full"
-                >
-                    {/* Featured Image */}
-                    <div className="relative w-full h-48 bg-neutral-200 dark:bg-neutral-800 overflow-hidden flex-shrink-0">
-                        {post.featuredImage ? (
-                            <Image
-                                id={post.featuredImage}
-                                alt={post.title}
-                                fill
-                                editable={false}
-                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                            />
-                        ) : (
-                            <div className="w-full h-full flex items-center justify-center">
-                                <span className="text-sm text-neutral-400">No Image</span>
-                            </div>
-                        )}
-                        {/* Actions Menu - Top Left - Only show for own posts */}
-                        {isPostOwner(post) && (
-                            <div className="absolute top-4 left-4 z-10">
-                                <div className="bg-white/90 dark:bg-neutral-900/90 backdrop-blur-sm rounded-full p-1 shadow-lg border border-neutral-200 dark:border-neutral-700">
-                                    <PostActionsMenu
-                                        onEdit={() => onEdit(post.id)}
-                                        onPreview={() => onPreview(post.id)}
-                                        onDuplicate={() => onDuplicate(post.id)}
-                                        onDelete={() => onDelete(post.id)}
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+            {posts.map((post) => {
+                const author = getAuthorData(post);
+                const owner = isPostOwner(post);
+                const initials = author.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+                
+                return (
+                    <div
+                        key={post.id}
+                        className="group relative flex flex-col h-full animate-in fade-in slide-in-from-bottom-2 duration-500"
+                    >
+                        {/* Card Background with glass effect */}
+                        <div className="absolute inset-0 bg-dashboard-card/40 backdrop-blur-md rounded-[2.5rem] border border-dashboard-border/40 transition-all duration-500 group-hover:border-primary/30 group-hover:bg-primary/5 group-hover:shadow-xl group-hover:shadow-primary/5" />
+                        
+                        <div className="relative p-3.5 flex flex-col h-full space-y-5">
+                            {/* 1. Featured Image Area */}
+                            <div className="aspect-[16/9.5] relative bg-dashboard-bg/50 rounded-[2rem] overflow-hidden border border-dashboard-border/40 group-hover:border-primary/20 transition-all shadow-sm">
+                                {post.featuredImage ? (
+                                    <PluginImage
+                                        id={post.featuredImage}
+                                        alt={post.title}
+                                        fill
+                                        editable={false}
+                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                     />
+                                ) : (
+                                    <div className="w-full h-full flex flex-col items-center justify-center bg-dashboard-bg/50 opacity-20">
+                                        <FileText size={40} />
+                                    </div>
+                                )}
+                                
+                                {/* Status Badge Overlay */}
+                                <div className="absolute top-3.5 right-3.5">
+                                    <span
+                                        className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider border backdrop-blur-md shadow-sm ${getStatusBadgeColor(post.status)}`}
+                                    >
+                                        {post.status === 'not-translated' ? 'Edition Missing' : post.status}
+                                    </span>
                                 </div>
+
+                                {/* Quick Actions Overlay */}
+                                {owner && (
+                                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100 z-20">
+                                        <div className="bg-white/10 backdrop-blur-md p-1.5 rounded-2xl border border-white/20 shadow-2xl flex items-center gap-1 scale-90 group-hover:scale-100 transition-transform duration-500">
+                                            <PostActionsMenu
+                                                onEdit={() => onEdit(post.id)}
+                                                onPreview={() => onPreview(post.id)}
+                                                onDuplicate={() => onDuplicate(post.id)}
+                                                onDelete={() => onDelete(post.id)}
+                                            />
+                                        </div>
+                                    </div>
+                                )}
                             </div>
-                        )}
-                        {/* Status Badge Overlay */}
-                        <div className="absolute top-4 right-4">
-                            <span
-                                className={`inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm ${getStatusBadgeColor(post.status)}`}
-                            >
-                                {post.status}
-                            </span>
-                        </div>
-                    </div>
 
-                    {/* Card Content */}
-                    <div className="p-6 flex flex-col flex-1">
-                        {/* Title & Slug */}
-                        <div className="mb-4 min-h-[72px]">
-                            <button 
-                                onClick={() => onEdit(post.id)}
-                                className="text-left w-full hover:cursor-pointer"
-                            >
-                                <h3 className="font-bold text-lg text-neutral-950 dark:text-white mb-2 line-clamp-2 group-hover:text-primary transition-colors hover:underline">
-                                    {post.title}
-                                </h3>
-                            </button>
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono line-clamp-1">
-                                /{post.slug}
-                            </p>
-                        </div>
+                            {/* 2. Content Area */}
+                            <div className="px-3.5 pb-2.5 flex-1 flex flex-col">
+                                <div className="flex items-center gap-3 mb-3.5">
+                                    <LanguageFlags post={post} />
+                                    <div className="h-4 w-px bg-dashboard-border/30" />
+                                    <span className="text-[10px] font-bold text-primary uppercase tracking-widest flex items-center gap-1.5 opacity-80">
+                                        <Tag size={12} />
+                                        {post.category || 'Article'}
+                                    </span>
+                                </div>
 
-                        {/* Excerpt */}
-                        <div className="flex-1 mb-4 min-h-[40px]">
-                            {post.excerpt && (
-                                <p className="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2">
-                                    {post.excerpt}
+                                <button 
+                                    onClick={() => onEdit(post.id)}
+                                    className="text-left w-full group/title mb-2.5"
+                                >
+                                    <h3 className="text-xl font-bold text-dashboard-text tracking-tight leading-tight line-clamp-2 group-hover/title:text-primary transition-colors">
+                                        {post.title}
+                                    </h3>
+                                </button>
+
+                                <p className="text-sm text-dashboard-text-secondary font-medium line-clamp-2 opacity-60 mb-6">
+                                    {post.excerpt || 'No summary available for this publication.'}
                                 </p>
-                            )}
-                        </div>
-
-                        {/* Languages */}
-                        <div className="mb-6">
-                            <LanguageFlags post={post} />
-                        </div>
-
-                        {/* Meta Information */}
-                        <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700 mt-auto">
-                            {/* Author */}
-                            <div className="flex items-center gap-2">
-                                {isPostOwner(post) ? (
-                                    <UserCheck size={14} className="text-primary" />
-                                ) : (
-                                    <User size={14} className="text-neutral-400" />
-                                )}
-                                <span className={`text-xs ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`}>
-                                    {getAuthorName(post.authorId)}
-                                    {isPostOwner(post) && (
-                                        <span className="ml-1">(You)</span>
-                                    )}
-                                </span>
-                            </div>
 
-                            {/* Last Modified */}
-                            <div className="flex items-center gap-2">
-                                <Calendar size={14} className="text-neutral-400" />
-                                <span className="text-xs text-neutral-600 dark:text-neutral-400">
-                                    {formatDate(post.updatedAt, locale)}
-                                </span>
+                                {/* Footer Meta */}
+                                <div className="pt-4 border-t border-dashboard-border/30 mt-auto space-y-4">
+                                    <div className="flex items-center justify-between gap-4">
+                                        <div className="flex items-center gap-3 min-w-0">
+                                            <div className={`size-9 rounded-xl flex items-center justify-center text-xs font-bold border transition-all overflow-hidden shrink-0 ${
+                                                owner ? 'bg-primary text-white border-primary/20 shadow-lg shadow-primary/20' : 'bg-dashboard-bg/50 text-dashboard-text-secondary border-dashboard-border/60'
+                                            }`}>
+                                                {author.image ? (
+                                                    <img src={author.image} alt={author.name} className="size-full object-cover" crossOrigin="anonymous" />
+                                                ) : initials}
+                                            </div>
+                                            <div className="flex flex-col min-w-0">
+                                                <span className="text-[10px] font-bold text-dashboard-text uppercase tracking-tight truncate">
+                                                    {author.name} {owner && <span className="text-primary ml-0.5">(YOU)</span>}
+                                                </span>
+                                                <span className="text-[9px] font-semibold text-dashboard-text-secondary uppercase tracking-widest opacity-60">
+                                                    {formatDate(post.updatedAt, locale)}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        
+                                        {post.status === 'published' && (
+                                            <div className="flex items-center gap-1.5 px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 rounded-full border border-emerald-500/20">
+                                                <Activity size={10} className="animate-pulse" />
+                                                <span className="text-[8px] font-bold uppercase tracking-widest">Live</span>
+                                            </div>
+                                        )}
+                                    </div>
+                                    
+                                    <div className="bg-dashboard-bg/40 px-3 py-1.5 rounded-xl border border-dashboard-border/30">
+                                        <p className="text-[9px] font-mono text-dashboard-text-secondary/50 uppercase tracking-tight truncate">
+                                            Path: /{post.slug}
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-
                     </div>
-                </div>
-            ))}
+                );
+            })}
         </div>
     );
 }
-

package/src/views/PostManager/PostFilters.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { Search, Filter, Tag, Globe } from 'lucide-react';
 import { PostStatus } from '../../types/post';
+import { FilterDropdown } from './FilterDropdown';
 
 export interface PostFiltersProps {
     search: string;
@@ -36,97 +37,101 @@ export function PostFilters({
 }: PostFiltersProps) {
     const langNames: Record<string, string> = {
         nl: 'Nederlands (NL)',
-        en: 'English (EN)',
-        sv: 'Svenska (SV)',
+        en: 'English (GB)',
+        sv: 'Svenska (SE)',
         de: 'Deutsch (DE)',
         fr: 'Français (FR)',
         es: 'Español (ES)',
         it: 'Italiano (IT)',
         pt: 'Português (PT)',
     };
+
+    const getFlagUrl = (lang: string) => {
+        const mapping: Record<string, string> = {
+            en: 'gb',
+            nl: 'nl',
+            sv: 'se',
+            de: 'de',
+            fr: 'fr',
+            es: 'es',
+            it: 'it',
+            pt: 'pt'
+        };
+        const countryCode = mapping[lang] || lang;
+        return `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`;
+    };
+
+    const statusOptions = [
+        { label: 'All Statuses', value: 'all' },
+        { label: 'Published', value: 'published' },
+        { label: 'Draft', value: 'draft' },
+        { label: 'Scheduled', value: 'scheduled' },
+        { label: 'Archived', value: 'archived' },
+    ];
+
+    const categoryOptions = [
+        { label: 'All Categories', value: 'all' },
+        ...categories.map(cat => ({ label: cat, value: cat }))
+    ];
+
+    const languageOptions = availableLanguages.map(lang => ({
+        label: langNames[lang] || lang.toUpperCase(),
+        value: lang,
+        icon: <img src={getFlagUrl(lang)} alt="" className="w-4 h-2.5 rounded-sm object-cover shadow-sm border border-white/10" />
+    }));
+
     return (
-        <div className="flex flex-col sm:flex-row gap-4 mb-6">
+        <div className="flex-1 flex flex-col md:flex-row items-center gap-4">
             {/* Search Input */}
-            <div className="relative flex-1">
-                <label htmlFor="blog-post-search" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
-                    Search posts by title or content
-                </label>
-                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4" />
+            <div className="relative flex-1 group w-full">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors duration-300" size={18} />
                 <input
                     id="blog-post-search"
                     name="blog-post-search"
                     type="text"
                     value={search}
                     onChange={(e) => onSearchChange(e.target.value)}
-                    placeholder="Search posts by title or content..."
-                    className="w-full pl-11 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"
+                    placeholder="Search articles by title..."
+                    className="w-full pl-12 pr-6 py-3.5 bg-dashboard-card/40 border border-dashboard-border/40 rounded-2xl text-sm font-semibold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/30 transition-all"
                 />
             </div>
 
-            {/* Status Filter */}
-            <div className="relative">
-                <label htmlFor="blog-post-status-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
-                    Filter by status
-                </label>
-                <Filter className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
-                <select
-                    id="blog-post-status-filter"
-                    name="blog-post-status-filter"
+            {/* Selects Container */}
+            <div className="flex flex-wrap items-center gap-1.5 p-1.5 bg-dashboard-card/50 rounded-xl border border-dashboard-border/40 w-full md:w-auto">
+                {/* Status Filter */}
+                <FilterDropdown
+                    label="Status"
+                    icon={<Filter size={14} className="text-primary/60" />}
                     value={statusFilter}
-                    onChange={(e) => onStatusFilterChange(e.target.value as PostStatus | 'all')}
-                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
-                >
-                    <option value="all">All Statuses</option>
-                    <option value="published">Published</option>
-                    <option value="draft">Draft</option>
-                    <option value="scheduled">Scheduled</option>
-                    <option value="archived">Archived</option>
-                </select>
-            </div>
+                    options={statusOptions}
+                    onChange={(val) => onStatusFilterChange(val as any)}
+                    minWidth="140px"
+                />
+
+                <div className="h-6 w-px bg-dashboard-border/30 mx-1 hidden md:block" />
 
-            {/* Category Filter */}
-            <div className="relative">
-                <label htmlFor="blog-post-category-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
-                    Filter by category
-                </label>
-                <Tag className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
-                <select
-                    id="blog-post-category-filter"
-                    name="blog-post-category-filter"
+                {/* Category Filter */}
+                <FilterDropdown
+                    label="Category"
+                    icon={<Tag size={14} className="text-primary/60" />}
                     value={categoryFilter}
-                    onChange={(e) => onCategoryFilterChange(e.target.value)}
-                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
-                >
-                    <option value="all">All Categories</option>
-                    {categories.map((category) => (
-                        <option key={category} value={category}>
-                            {category}
-                        </option>
-                    ))}
-                </select>
-            </div>
+                    options={categoryOptions}
+                    onChange={onCategoryFilterChange}
+                    minWidth="150px"
+                />
 
-            {/* Language Selector */}
-            <div className="relative">
-                <label htmlFor="blog-post-language-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
-                    Primary Language
-                </label>
-                <Globe className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
-                <select
-                    id="blog-post-language-filter"
-                    name="blog-post-language-filter"
+                <div className="h-6 w-px bg-dashboard-border/30 mx-1 hidden md:block" />
+
+                {/* Language Selector */}
+                <FilterDropdown
+                    label="Language"
+                    icon={<Globe size={14} className="text-primary/60" />}
                     value={language}
-                    onChange={(e) => onLanguageChange(e.target.value)}
-                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[140px]"
-                >
-                    {availableLanguages.map(lang => (
-                        <option key={lang} value={lang}>
-                            {langNames[lang] || lang.toUpperCase()}
-                        </option>
-                    ))}
-                </select>
+                    options={languageOptions}
+                    onChange={onLanguageChange}
+                    minWidth="160px"
+                />
             </div>
         </div>
     );
 }
-