@jhits/plugin-blog 0.0.17 → 0.0.18

package/src/views/PostManager/LanguageFlags.tsx

@@ -0,0 +1,136 @@
+/**
+ * Language Flags Component
+ * Displays interactive language flags with custom tooltips
+ */
+
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { PostListItem } from '../../types/post';
+
+interface LanguageFlagsProps {
+    post: PostListItem;
+}
+
+const LANGUAGE_COUNTRY_CODES: Record<string, string> = {
+    en: 'gb',
+    nl: 'nl',
+    sv: 'se',
+    de: 'de',
+    fr: 'fr',
+    es: 'es',
+    it: 'it',
+    pt: 'pt',
+    pl: 'pl',
+    ru: 'ru',
+    ja: 'jp',
+    zh: 'cn',
+    ar: 'sa',
+    tr: 'tr',
+};
+
+const getFlagUrl = (lang: string) => {
+    const countryCode = LANGUAGE_COUNTRY_CODES[lang] || lang;
+    return `https://flagcdn.com/w40/${countryCode}.png`;
+};
+
+export function LanguageFlags({ post }: LanguageFlagsProps) {
+    const [hoveredLang, setHoveredLang] = useState<string | null>(null);
+    const [tooltipCoords, setTooltipCoords] = useState<{ top: number; left: number } | null>(null);
+    const flagRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+    useEffect(() => {
+        if (hoveredLang && flagRefs.current[hoveredLang]) {
+            const rect = flagRefs.current[hoveredLang]!.getBoundingClientRect();
+            setTooltipCoords({
+                top: rect.top, // Viewport-relative
+                left: rect.left + rect.width / 2, // Center horizontally
+            });
+        }
+    }, [hoveredLang]);
+
+    if (!post.availableLanguages || post.availableLanguages.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="flex gap-2">
+            {post.availableLanguages.map((lang) => {
+                const langData = post.languages?.[lang];
+                const status = langData?.status || 'draft';
+                const langTitle = langData?.metadata?.title || post.title;
+                const isHovered = hoveredLang === lang;
+
+                return (
+                    <div
+                        key={lang}
+                        ref={(el) => { flagRefs.current[lang] = el; }}
+                        className="relative"
+                        onMouseEnter={() => setHoveredLang(lang)}
+                        onMouseLeave={() => setHoveredLang(null)}
+                    >
+                        <motion.div
+                            whileHover={{ scale: 1.15 }}
+                            className={`relative flex items-center justify-center w-7 h-4.5 rounded shadow-sm overflow-hidden border cursor-help transition-colors ${
+                                status === 'published'
+                                    ? 'border-green-500/40 bg-white'
+                                    : 'border-amber-500/40 bg-white opacity-90'
+                            }`}
+                        >
+                            <img
+                                src={getFlagUrl(lang)}
+                                alt={lang}
+                                className="w-full h-full object-cover"
+                            />
+                            
+                            {status !== 'published' && (
+                                <div className="absolute inset-0 bg-amber-500/5" />
+                            )}
+                        </motion.div>
+
+                        {typeof document !== 'undefined' && createPortal(
+                            <AnimatePresence>
+                                {isHovered && tooltipCoords && (
+                                    <motion.div
+                                        initial={{ opacity: 0, y: -90, x: '-50%', scale: 0.95 }}
+                                        animate={{ opacity: 1, y: -100, x: '-50%', scale: 1 }}
+                                        exit={{ opacity: 0, y: -90, x: '-50%', scale: 0.95 }}
+                                        className="fixed z-[9999] pointer-events-none"
+                                        style={{
+                                            top: tooltipCoords.top - 12,
+                                            left: tooltipCoords.left,
+                                        }}
+                                    >
+                                        <div className="bg-neutral-900 dark:bg-neutral-800 text-white p-3 rounded-xl shadow-2xl border border-neutral-700/50 backdrop-blur-md min-w-[180px] max-w-[280px]">
+                                            <div className="flex items-center justify-between gap-4 mb-1.5">
+                                                <span className="text-[10px] font-black uppercase tracking-widest text-neutral-400">
+                                                    {lang.toUpperCase()} Version
+                                                </span>
+                                                <span className={`text-[9px] font-black uppercase px-1.5 py-0.5 rounded ${
+                                                    status === 'published' 
+                                                        ? 'bg-green-500/20 text-green-400' 
+                                                        : 'bg-amber-500/20 text-amber-400'
+                                                }`}>
+                                                    {status}
+                                                </span>
+                                            </div>
+                                            <p className="text-xs font-bold leading-snug line-clamp-2">
+                                                {langTitle}
+                                            </p>
+                                            
+                                            {/* Tooltip Arrow */}
+                                            <div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-neutral-900 dark:border-t-neutral-800" />
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>,
+                            document.body
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/src/views/PostManager/PostCards.tsx

@@ -10,6 +10,7 @@ import { Calendar, User, UserCheck } from 'lucide-react';
 import { Image } from '@jhits/plugin-images';
 import { PostListItem, PostStatus } from '../../types/post';
 import { PostActionsMenu } from './PostActionsMenu';
+import { LanguageFlags } from './LanguageFlags';
 import { useSession } from 'next-auth/react';
 
 export interface PostCardsProps {
@@ -21,7 +22,7 @@ export interface PostCardsProps {
     onDelete: (postId: string) => void;
 }
 
-function getStatusBadgeColor(status: PostStatus) {
+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';
@@ -31,6 +32,8 @@ function getStatusBadgeColor(status: PostStatus) {
             return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
         case 'archived':
             return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        case 'not-translated':
+            return 'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20 italic';
         default:
             return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
     }
@@ -98,10 +101,10 @@ export function PostCards({
             {posts.map((post) => (
                 <div
                     key={post.id}
-                    className="bg-dashboard-card rounded-2xl border border-dashboard-border overflow-hidden hover:shadow-xl transition-all duration-300 group"
+                    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">
+                    <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}
@@ -139,9 +142,9 @@ export function PostCards({
                     </div>
 
                     {/* Card Content */}
-                    <div className="p-6">
+                    <div className="p-6 flex flex-col flex-1">
                         {/* Title & Slug */}
-                        <div className="mb-4">
+                        <div className="mb-4 min-h-[72px]">
                             <button 
                                 onClick={() => onEdit(post.id)}
                                 className="text-left w-full hover:cursor-pointer"
@@ -150,20 +153,27 @@ export function PostCards({
                                     {post.title}
                                 </h3>
                             </button>
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
+                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono line-clamp-1">
                                 /{post.slug}
                             </p>
                         </div>
 
                         {/* Excerpt */}
-                        {post.excerpt && (
-                            <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-2">
-                                {post.excerpt}
-                            </p>
-                        )}
+                        <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}
+                                </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">
+                        <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) ? (

package/src/views/PostManager/PostFilters.tsx

@@ -6,7 +6,7 @@
 'use client';
 
 import React from 'react';
-import { Search, Filter, Tag } from 'lucide-react';
+import { Search, Filter, Tag, Globe } from 'lucide-react';
 import { PostStatus } from '../../types/post';
 
 export interface PostFiltersProps {
@@ -17,6 +17,9 @@ export interface PostFiltersProps {
     categoryFilter: string;
     onCategoryFilterChange: (value: string) => void;
     categories: string[];
+    language: string;
+    onLanguageChange: (value: string) => void;
+    availableLanguages: string[];
 }
 
 export function PostFilters({
@@ -27,7 +30,20 @@ export function PostFilters({
     categoryFilter,
     onCategoryFilterChange,
     categories,
+    language,
+    onLanguageChange,
+    availableLanguages,
 }: PostFiltersProps) {
+    const langNames: Record<string, string> = {
+        nl: 'Nederlands (NL)',
+        en: 'English (EN)',
+        sv: 'Svenska (SV)',
+        de: 'Deutsch (DE)',
+        fr: 'Français (FR)',
+        es: 'Español (ES)',
+        it: 'Italiano (IT)',
+        pt: 'Português (PT)',
+    };
     return (
         <div className="flex flex-col sm:flex-row gap-4 mb-6">
             {/* Search Input */}
@@ -89,6 +105,27 @@ export function PostFilters({
                     ))}
                 </select>
             </div>
+
+            {/* 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"
+                    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>
+            </div>
         </div>
     );
 }

package/src/views/PostManager/PostManagerView.tsx

@@ -32,6 +32,7 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
     const [search, setSearch] = useState('');
     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 => {
@@ -54,7 +55,7 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
         const fetchPosts = async () => {
             try {
                 setLoading(true);
-                const response = await fetch('/api/plugin-blog?admin=true');
+                const response = await fetch(`/api/plugin-blog?admin=true&language=${currentLanguage}`);
                 const data = await response.json();
 
                 if (data.blogs && Array.isArray(data.blogs)) {
@@ -89,6 +90,9 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                             authorId: blogPost.publication.authorId,
                             updatedAt: blogPost.updatedAt,
                             category: category,
+                            lang: blogPost.metadata.lang,
+                            availableLanguages: doc.availableLanguages,
+                            languages: doc.languages,
                         };
                     });
                     setPosts(postListItems);
@@ -102,7 +106,7 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
         };
 
         fetchPosts();
-    }, []);
+    }, [currentLanguage]);
 
     // Extract unique categories from posts
     const categories = React.useMemo(() => {
@@ -115,6 +119,22 @@ 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 => {
+            if (post.availableLanguages) {
+                post.availableLanguages.forEach(lang => langSet.add(lang));
+            }
+            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) => {
@@ -231,6 +251,9 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                     categoryFilter={categoryFilter}
                     onCategoryFilterChange={setCategoryFilter}
                     categories={categories}
+                    language={currentLanguage}
+                    onLanguageChange={setCurrentLanguage}
+                    availableLanguages={availableLanguages}
                 />
 
                 {/* View Toggle */}

package/src/views/PostManager/PostTable.tsx

@@ -10,6 +10,7 @@ import { Calendar, User, UserCheck } from 'lucide-react';
 import { Image } from '@jhits/plugin-images';
 import { PostListItem, PostStatus } from '../../types/post';
 import { PostActionsMenu } from './PostActionsMenu';
+import { LanguageFlags } from './LanguageFlags';
 import { useSession } from 'next-auth/react';
 
 export interface PostTableProps {
@@ -21,7 +22,7 @@ export interface PostTableProps {
     onDelete: (postId: string) => void;
 }
 
-function getStatusBadgeColor(status: PostStatus) {
+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';
@@ -31,6 +32,8 @@ function getStatusBadgeColor(status: PostStatus) {
             return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
         case 'archived':
             return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        case 'not-translated':
+            return 'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20 italic';
         default:
             return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
     }
@@ -108,6 +111,9 @@ export function PostTable({
                             <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
                                 Category
                             </th>
+                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Languages
+                            </th>
                             <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
                                 Status
                             </th>
@@ -183,6 +189,11 @@ export function PostTable({
                                     </span>
                                 </td>
 
+                                {/* Languages */}
+                                <td className="px-6 py-4">
+                                    <LanguageFlags post={post} />
+                                </td>
+
                                 {/* Status Badge */}
                                 <td className="px-6 py-4">
                                     <span