@jhits/plugin-blog 0.0.16 → 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

package/src/lib/layouts/blocks/ColumnsBlock.tsx.tmp

@@ -1,81 +0,0 @@
-/**
- * Columns Block
- * Flex/grid container with configurable column layouts
- */
-
-'use client';
-
-import React from 'react';
-import { Plus, Trash2 } from 'lucide-react';
-import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
-import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
-import { COLUMN_LAYOUTS, ColumnLayout } from '../index';
-import { Block } from '../../../types/block';
-
-/**
- * Columns Block Edit Component
- */
-export const ColumnsEdit: React.FC<BlockEditProps & {
-    childBlocks: Block[];
-    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
-    onChildBlockDelete: (blockId: string) => void;
-    onChildBlockMove: (blockId: string, newIndex: number) => void;
-}> = ({
-    block,
-    childBlocks,
-    onChildBlockAdd,
-    onChildBlockDelete,
-    onChildBlockMove,
-}) => {
-        // Support both old layout-based system and new dynamic column count
-        const columnCount = block.data.columnCount as number | undefined;
-        const layout: ColumnLayout | undefined = block.data.layout as ColumnLayout | undefined;
-        
-        // Determine number of columns: use columnCount if set, otherwise derive from layout
-        let numColumns: number;
-        let gridClass: string;
-        let columnWidths: number[];
-        
-        // Grid class mapping for Tailwind (must be explicit for dynamic classes)
-        const gridClassMap: Record<number, string> = {
-            1: 'grid-cols-1',
-            2: 'grid-cols-2',
-            3: 'grid-cols-3',
-            4: 'grid-cols-4',
-            5: 'grid-cols-5',
-            6: 'grid-cols-6',
-        };
-        
-        if (columnCount !== undefined && columnCount > 0) {
-            // Dynamic column system
-            numColumns = columnCount;
-            // Create equal-width columns
-            const widthPercent = Math.floor(100 / numColumns);
-            columnWidths = Array(numColumns).fill(widthPercent);
-            // Use explicit grid class from map, fallback to inline style if needed
-            gridClass = gridClassMap[numColumns] || \`grid-cols-\${numColumns}\`;
-        } else if (layout && COLUMN_LAYOUTS[layout]) {
-            // Legacy layout-based system
-            const layoutConfig = COLUMN_LAYOUTS[layout];
-            numColumns = layoutConfig.widths.length;
-            gridClass = layoutConfig.grid;
-            columnWidths = layoutConfig.widths;
-        } else {
-            // Default to 2 columns
-            numColumns = 2;
-            gridClass = 'grid-cols-2';
-            columnWidths = [50, 50];
-        }
-
-        // Split child blocks into columns based on columnIndex in meta, or round-robin
-        const columns: Block[][] = Array.from({ length: numColumns }, () => []);
-        childBlocks.forEach((childBlock) => {
-            const columnIndex = childBlock.meta?.columnIndex;
-            if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
-                columns[columnIndex].push(childBlock);
-            } else {
-                // Fallback to round-robin if no columnIndex specified
-                const index = childBlocks.indexOf(childBlock);
-                columns[index % numColumns].push(childBlock);
-            }
-        });