@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/CanvasEditor/components/PrivacySettingsSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Shield, Key, Users } from 'lucide-react';
+import { Shield, Key, Users, Lock, Unlock, EyeOff } from 'lucide-react';
 
 export interface PrivacySettings {
     isPrivate?: boolean;
@@ -14,35 +14,25 @@ export interface PrivacySettingsSectionProps {
     onUpdate: (privacy: PrivacySettings) => void;
 }
 
-/**
- * Privacy Settings Section Component
- * Handles privacy settings: private, password-protected, share with users
- */
 export function PrivacySettingsSection({
     privacy,
     onUpdate,
 }: PrivacySettingsSectionProps) {
-    const [users, setUsers] = useState<Array<{ _id: string; name: string; email: string }>>([]);
+    const [users, setUsers] = useState<Array<{ _id: string; name: string; email: string; image?: string }>>([]);
     const [loadingUsers, setLoadingUsers] = useState(false);
     const [showPasswordInput, setShowPasswordInput] = useState(false);
     const [passwordValue, setPasswordValue] = useState(privacy?.password || '');
     const [showUserSelector, setShowUserSelector] = useState(false);
 
-    // Fetch users from plugin-users
     useEffect(() => {
         const fetchUsers = async () => {
             try {
                 setLoadingUsers(true);
                 const res = await fetch('/api/users');
                 const data = await res.json();
-                if (Array.isArray(data)) {
-                    setUsers(data);
-                }
-            } catch (err) {
-                console.error('Failed to load users', err);
-            } finally {
-                setLoadingUsers(false);
-            }
+                if (Array.isArray(data)) setUsers(data);
+            } catch (err) { console.error(err); }
+            finally { setLoadingUsers(false); }
         };
         fetchUsers();
     }, []);
@@ -51,17 +41,13 @@ export function PrivacySettingsSection({
         onUpdate({
             ...privacy,
             isPrivate,
-            // Clear password and shared users if making public
             ...(isPrivate ? {} : { password: undefined, sharedWithUsers: undefined }),
         });
     };
 
     const handlePasswordChange = (password: string) => {
         setPasswordValue(password);
-        onUpdate({
-            ...privacy,
-            password: password || undefined,
-        });
+        onUpdate({ ...privacy, password: password || undefined });
     };
 
     const handleUserToggle = (userId: string) => {
@@ -69,144 +55,107 @@ export function PrivacySettingsSection({
         const newUsers = currentUsers.includes(userId)
             ? currentUsers.filter(id => id !== userId)
             : [...currentUsers, userId];
-        onUpdate({
-            ...privacy,
-            sharedWithUsers: newUsers.length > 0 ? newUsers : undefined,
-        });
+        onUpdate({ ...privacy, sharedWithUsers: newUsers.length > 0 ? newUsers : undefined });
     };
 
     return (
-        <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-            <div className="flex items-center gap-3 mb-6">
-                <Shield size={14} className="text-neutral-500 dark:text-neutral-400" />
-                <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                    Privacy Settings
+        <section className="space-y-6">
+            <div className="flex items-center gap-3">
+                <div className="size-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
+                    <Shield size={14} />
+                </div>
+                <label className="text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]">
+                    Privacy & Security
                 </label>
             </div>
+
             <div className="space-y-4">
-                {/* Private Toggle */}
-                <div className="flex items-center justify-between">
-                    <div>
-                        <label className="text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1">
-                            Make Private
-                        </label>
-                        <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
-                            Hide from public view
-                        </p>
+                {/* 1. Visibility Toggle */}
+                <div className={`p-4 rounded-[1.5rem] border transition-all duration-500 ${privacy?.isPrivate ? 'bg-primary/5 border-primary/20 shadow-sm' : 'bg-dashboard-bg/50 border-dashboard-border/50'}`}>
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <div className={`size-10 rounded-xl flex items-center justify-center border transition-all ${privacy?.isPrivate ? 'bg-primary text-white border-primary/20' : 'bg-dashboard-card text-dashboard-text-secondary border-dashboard-border'}`}>
+                                {privacy?.isPrivate ? <Lock size={16} /> : <Unlock size={16} />}
+                            </div>
+                            <div>
+                                <label className="text-[10px] font-black text-dashboard-text uppercase tracking-widest">Restrict Access</label>
+                                <p className="text-[9px] text-dashboard-text-secondary italic opacity-60">Hide from public view</p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={() => handlePrivacyToggle(!privacy?.isPrivate)}
+                            className={`relative w-12 h-6 rounded-full transition-colors ${privacy?.isPrivate ? 'bg-primary' : 'bg-dashboard-card border border-dashboard-border'}`}
+                        >
+                            <div className={`absolute top-1 left-1 size-4 rounded-full transition-transform ${privacy?.isPrivate ? 'translate-x-6 bg-white shadow-sm' : 'translate-x-0 bg-dashboard-text-secondary/30'}`} />
+                        </button>
                     </div>
-                    <button
-                        onClick={() => handlePrivacyToggle(!privacy?.isPrivate)}
-                        className={`relative w-12 h-6 rounded-full transition-colors ${privacy?.isPrivate ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-700'
-                            }`}
-                    >
-                        <div className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${privacy?.isPrivate ? 'translate-x-6' : 'translate-x-0'
-                            }`} />
-                    </button>
                 </div>
 
-                {/* Password Protection */}
+                {/* 2. Password & Users (Only if Private) */}
                 {privacy?.isPrivate && (
-                    <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <label className="text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1">
-                                    Password Protection
+                    <div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
+                        {/* Password */}
+                        <div className="group">
+                            <div className="flex items-center justify-between mb-2 px-1">
+                                <label className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-widest group-focus-within:text-primary transition-colors flex items-center gap-2">
+                                    <Key size={10} /> Password Layer
                                 </label>
-                                <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
-                                    Require password to view
-                                </p>
                             </div>
-                            <button
-                                onClick={() => {
-                                    setShowPasswordInput(!showPasswordInput);
-                                    if (!showPasswordInput && !privacy.password) {
-                                        setPasswordValue('');
-                                    }
-                                }}
-                                className={`p-1.5 rounded-lg transition-colors ${privacy.password || showPasswordInput
-                                    ? 'bg-primary/10 text-primary'
-                                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'
-                                    }`}
-                            >
-                                <Key size={14} />
-                            </button>
-                        </div>
-                        {(showPasswordInput || privacy.password) && (
                             <input
                                 type="password"
                                 value={passwordValue}
                                 onChange={(e) => handlePasswordChange(e.target.value)}
-                                placeholder="Enter password"
-                                className="w-full px-3 py-2 text-xs bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg outline-none focus:border-primary transition-all dark:text-neutral-100"
+                                placeholder="Set viewing password..."
+                                className="w-full px-4 py-2.5 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all"
                             />
-                        )}
-                    </div>
-                )}
+                        </div>
 
-                {/* Share with Users */}
-                {privacy?.isPrivate && (
-                    <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <label className="text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1">
-                                    Share with Users
-                                </label>
-                                <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
-                                    Grant access to specific users
-                                </p>
-                            </div>
+                        {/* User Selection */}
+                        <div className="pt-2">
                             <button
                                 onClick={() => setShowUserSelector(!showUserSelector)}
-                                className={`p-1.5 rounded-lg transition-colors ${(privacy.sharedWithUsers?.length || 0) > 0 || showUserSelector
-                                    ? 'bg-primary/10 text-primary'
-                                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'
-                                    }`}
+                                className={`w-full flex items-center justify-between p-3 rounded-xl border transition-all ${showUserSelector ? 'bg-primary/10 border-primary/30 text-primary' : 'bg-dashboard-card/50 border-dashboard-border/50 text-dashboard-text-secondary hover:border-primary/30'}`}
                             >
-                                <Users size={14} />
+                                <div className="flex items-center gap-2 text-[9px] font-black uppercase tracking-widest">
+                                    <Users size={12} />
+                                    <span>Grant Personal Access</span>
+                                </div>
+                                <span className="text-[10px] font-bold opacity-60 bg-white/5 px-2 py-0.5 rounded-full">
+                                    {privacy.sharedWithUsers?.length || 0}
+                                </span>
                             </button>
-                        </div>
-                        {showUserSelector && (
-                            <div className="bg-dashboard-bg rounded-lg p-3 border border-dashboard-border max-h-48 overflow-y-auto">
-                                {loadingUsers ? (
-                                    <p className="text-[10px] text-neutral-500 dark:text-neutral-400">Loading users...</p>
-                                ) : users.length === 0 ? (
-                                    <p className="text-[10px] text-neutral-500 dark:text-neutral-400">No users found</p>
-                                ) : (
-                                    <div className="space-y-2">
-                                        {users.map((user) => (
-                                            <label
-                                                key={user._id}
-                                                className="flex items-center gap-2 cursor-pointer hover:bg-dashboard-bg p-2 rounded transition-colors"
-                                            >
+
+                            {showUserSelector && (
+                                <div className="mt-3 bg-dashboard-bg/80 backdrop-blur-xl rounded-2xl border border-dashboard-border/50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-300">
+                                    <div className="max-h-48 overflow-y-auto p-2 custom-scrollbar space-y-1">
+                                        {loadingUsers ? (
+                                            <div className="p-4 text-center animate-pulse text-[10px] font-black text-primary/40 uppercase tracking-widest">Scanning Network...</div>
+                                        ) : users.map((user) => (
+                                            <label key={user._id} className="flex items-center gap-3 p-2 rounded-xl hover:bg-primary/5 cursor-pointer transition-all group/user">
                                                 <input
                                                     type="checkbox"
                                                     checked={privacy.sharedWithUsers?.includes(user._id) || false}
                                                     onChange={() => handleUserToggle(user._id)}
-                                                    className="rounded border-neutral-300 dark:border-neutral-700 text-primary focus:ring-primary"
+                                                    className="size-4 rounded border-dashboard-border text-primary focus:ring-primary/20 bg-dashboard-card"
                                                 />
-                                                <div className="flex-1 min-w-0">
-                                                    <p className="text-[10px] font-bold text-neutral-700 dark:text-neutral-300 truncate">
-                                                        {user.name}
-                                                    </p>
-                                                    <p className="text-[9px] text-neutral-500 dark:text-neutral-400 truncate">
-                                                        {user.email}
-                                                    </p>
+                                                <div className="flex items-center gap-2 min-w-0">
+                                                    <div className="size-7 rounded-lg bg-dashboard-card border border-dashboard-border flex items-center justify-center text-[10px] font-black overflow-hidden shrink-0">
+                                                        {user.image ? <img src={user.image} className="size-full object-cover" crossOrigin="anonymous" /> : user.name[0]}
+                                                    </div>
+                                                    <div className="min-w-0">
+                                                        <p className="text-[10px] font-black text-dashboard-text uppercase truncate">{user.name}</p>
+                                                        <p className="text-[8px] text-dashboard-text-secondary truncate opacity-60 italic">{user.email}</p>
+                                                    </div>
                                                 </div>
                                             </label>
                                         ))}
                                     </div>
-                                )}
-                            </div>
-                        )}
-                        {privacy.sharedWithUsers && privacy.sharedWithUsers.length > 0 && (
-                            <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
-                                Shared with {privacy.sharedWithUsers.length} user{privacy.sharedWithUsers.length !== 1 ? 's' : ''}
-                            </p>
-                        )}
+                                </div>
+                            )}
+                        </div>
                     </div>
                 )}
             </div>
         </section>
     );
 }
-

package/src/views/CanvasEditor/components/index.ts

@@ -25,4 +25,5 @@ export { EditorCanvas } from './EditorCanvas';
 export type { EditorCanvasProps } from './EditorCanvas';
 
 export { EditorSidebar } from './EditorSidebar';
-export type { EditorSidebarProps } from './EditorSidebar';
+export type { EditorSidebarProps } from './EditorSidebar';export { JSONInspector } from './JSONInspector';
+export type { JSONInspectorProps } from './JSONInspector';

package/src/views/CanvasEditor/hooks/useHeroBlock.ts

@@ -36,12 +36,13 @@ export function useHeroBlock(state: EditorState, registeredBlocks: any[]) {
                     }
                     
                     // If no hero block in contentBlocks, initialize from defaults
-                    // Hero image and featured image are completely independent - no syncing
+                    // We map metadata.excerpt to both 'summary' and 'description' to support different block implementations
                     const initialData = {
                         ...heroData,
                         title: state.title || heroData.title || '',
                         summary: state.metadata.excerpt || heroData.summary || '',
-                        image: heroData.image, // Use default image, not featured image
+                        description: state.metadata.excerpt || heroData.description || '',
+                        category: state.metadata.categories?.[0] || heroData.category || '',
                     };
                     return {
                         id: generateBlockId(),
@@ -55,40 +56,36 @@ export function useHeroBlock(state: EditorState, registeredBlocks: any[]) {
         } else {
             setHeroBlock(null);
         }
-    }, [heroBlockDefinition, state.blocks, state.title, state.metadata.excerpt]);
+    }, [heroBlockDefinition, state.blocks, state.title, state.metadata.excerpt, state.metadata.categories]);
 
     // Sync hero block with editor state when post is loaded (for existing posts)
-    // BUT: Never sync image from featured image to hero - they are independent
-    // Only sync title, summary, and category
     useEffect(() => {
         if (heroBlock && heroBlockDefinition && state.postId) {
-            // Only update if the hero block data doesn't match the editor state
-            // This prevents overwriting user edits with stale data
             const currentTitle = (heroBlock.data as any)?.title || '';
             const currentSummary = (heroBlock.data as any)?.summary || '';
+            const currentDescription = (heroBlock.data as any)?.description || '';
             const currentCategory = (heroBlock.data as any)?.category || '';
 
             const stateTitle = state.title || '';
-            const stateSummary = state.metadata.excerpt || '';
+            const stateExcerpt = state.metadata.excerpt || '';
             const stateCategory = state.metadata.categories?.[0] || '';
 
-            // Check if hero block is out of sync with editor state
-            // NOTE: We do NOT sync image anymore - hero and featured image are independent
             const titleMismatch = currentTitle !== stateTitle;
-            const summaryMismatch = currentSummary !== stateSummary;
+            // Check both summary and description for mismatches
+            const summaryMismatch = currentSummary !== stateExcerpt;
+            const descriptionMismatch = currentDescription !== stateExcerpt;
             const categoryMismatch = currentCategory !== stateCategory;
 
-            // Only update title, summary, and category - NEVER update image
-            // The hero block image should come from contentBlocks, not from featured image
-            if ((titleMismatch || summaryMismatch || categoryMismatch) && (stateTitle || stateSummary || stateCategory)) {
+            // Sync if state has values and there's a mismatch
+            if ((titleMismatch || summaryMismatch || descriptionMismatch || categoryMismatch) && (stateTitle || stateExcerpt || stateCategory)) {
                 setHeroBlock({
                     ...heroBlock,
                     data: {
                         ...heroBlock.data,
-                        title: stateTitle || (heroBlock.data as any)?.title || '',
-                        summary: stateSummary || (heroBlock.data as any)?.summary || '',
-                        // DO NOT sync image - keep hero block's own image
-                        category: stateCategory || (heroBlock.data as any)?.category || '',
+                        title: stateTitle || currentTitle,
+                        summary: stateExcerpt || currentSummary,
+                        description: stateExcerpt || currentDescription,
+                        category: stateCategory || currentCategory,
                     },
                 });
             }

package/src/views/CanvasEditor/hooks/usePostLoader.ts

@@ -1,7 +1,12 @@
+'use client';
+
 import { useEffect, useState, useRef } from 'react';
 import { apiToBlogPost, type APIBlogDocument } from '../../../lib/mappers/apiMapper';
 import type { BlogPost } from '../../../types/post';
 
+/**
+ * Technical hook for loading post data into the Orchestrator
+ */
 export function usePostLoader(
     postId: string | undefined,
     currentPostId: string | null,
@@ -10,41 +15,44 @@ export function usePostLoader(
     language?: string
 ) {
     const [isLoadingPost, setIsLoadingPost] = useState(false);
-    // Use a ref to track language so changes don't re-trigger initial load
     const languageRef = useRef(language);
     languageRef.current = language;
 
     useEffect(() => {
+        // Only trigger if we have a target ID but no active post in state
+        // This prevents infinite loops while allowing initial synchronization
         if (postId && !currentPostId) {
             const loadPostData = async () => {
                 try {
                     setIsLoadingPost(true);
-                    // Reset hero block before loading new post so it gets re-initialized from the new post's blocks
                     resetHeroBlock();
-                    const lang = languageRef.current;
-                    const url = lang 
-                        ? `/api/plugin-blog/${postId}?language=${lang}`
-                        : `/api/plugin-blog/${postId}`;
+                    
+                    const lang = languageRef.current || 'nl';
+                    // We use the relative URL which will hit the Dashboard API
+                    const url = `/api/plugin-blog/${postId}?language=${lang}&admin=true`;
+                    
+
+                    
                     const response = await fetch(url);
                     if (!response.ok) {
-                        throw new Error('Failed to load post');
+                        throw new Error(`NODE_HANDSHAKE_FAILED: ${response.status}`);
                     }
+                    
                     const apiDoc: APIBlogDocument = await response.json();
+
+                    
                     const blogPost = apiToBlogPost(apiDoc);
                     loadPost(blogPost);
                 } catch (error) {
-                    console.error('Failed to load post:', error);
-                    alert('Failed to load post. Please try again.');
+                    console.error('[usePostLoader] CRITICAL_SYNC_ERROR:', error);
                 } finally {
                     setIsLoadingPost(false);
                 }
             };
+            
             loadPostData();
         }
-    // Only re-run on initial load (postId / currentPostId change), NOT on language change
-    // Language switching is handled separately by handleLanguageChange
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [postId, currentPostId]);
+    }, [postId, currentPostId, loadPost, resetHeroBlock]);
 
     return { isLoadingPost };
 }

package/src/views/CanvasEditor/hooks/useUnsavedChanges.ts

@@ -89,7 +89,7 @@ export function useUnsavedChanges({
         try {
             localStorage.setItem(AUTO_SAVE_STORAGE_KEY, enabled.toString());
             setAutoSaveEnabledState(enabled);
-            console.log('[useUnsavedChanges] Auto-save preference updated:', enabled);
+
         } catch (error) {
             console.error('[useUnsavedChanges] Failed to save auto-save preference:', error);
         }
@@ -117,7 +117,7 @@ export function useUnsavedChanges({
         // When a post is loaded (postId exists) and isDirty is false, update the saved state reference
         if (postId && !isDirty && lastSavedStateRef.current === '') {
             lastSavedStateRef.current = getStateSnapshot();
-            console.log('[useUnsavedChanges] Initialized saved state reference after post load');
+
         }
         // Also update if isDirty becomes false after being true (e.g., after save or MARK_CLEAN)
         if (!isDirty && lastSavedStateRef.current !== getStateSnapshot()) {
@@ -136,11 +136,11 @@ export function useUnsavedChanges({
             setSaveStatus('saving');
             setCountdown(null);
             countdownStartTimeRef.current = null;
-            console.log('[useUnsavedChanges] Auto-saving...');
+
             await onSave(heroBlock);
             lastSavedStateRef.current = getStateSnapshot();
             setSaveStatus('saved');
-            console.log('[useUnsavedChanges] Auto-save completed');
+
             
             // Clear save status after 2 seconds
             if (saveStatusTimeoutRef.current) {

package/src/views/PostManager/EmptyState.tsx

@@ -1,12 +1,12 @@
 /**
  * Empty State Component
- * Botanical-themed empty state for when no posts are found
+ * Generic empty state for when no posts are found
  */
 
 'use client';
 
 import React from 'react';
-import { Sprout, Plus } from 'lucide-react';
+import { PenTool, Plus } from 'lucide-react';
 
 export interface EmptyStateProps {
     hasFilters: boolean;
@@ -16,27 +16,26 @@ export interface EmptyStateProps {
 export function EmptyState({ hasFilters, onCreatePost }: EmptyStateProps) {
     return (
         <div className="flex flex-col items-center justify-center py-20 px-8 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border-2 border-dashed border-neutral-300 dark:border-neutral-700">
-            <div className="w-24 h-24 rounded-full bg-green-500/10 dark:bg-green-500/20 flex items-center justify-center mb-6">
-                <Sprout className="text-green-600 dark:text-green-400 size-12" />
+            <div className="w-24 h-24 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center mb-6">
+                <PenTool className="text-primary size-12" />
             </div>
             <h3 className="text-xl font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-2">
-                {hasFilters ? 'No Posts Found' : 'No Posts Yet'}
+                {hasFilters ? 'No Results Found' : 'Your Journal is Empty'}
             </h3>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400 text-center mb-6 max-w-md">
+            <p className="text-sm text-neutral-500 dark:text-neutral-400 text-center mb-6 max-w-md leading-relaxed">
                 {hasFilters
                     ? 'Try adjusting your search or filter criteria to find what you\'re looking for.'
-                    : 'Start growing your content garden. Create your first blog post to share your botanical knowledge with the world.'}
+                    : 'It looks like you haven\'t published any stories yet. Start writing to share your insights with the world.'}
             </p>
             {!hasFilters && (
                 <button
                     onClick={onCreatePost}
-                    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"
+                    className="inline-flex items-center gap-2 px-8 py-4 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} />
-                    Create Your First Post
+                    Start Writing
                 </button>
             )}
         </div>
     );
 }
-

package/src/views/PostManager/FilterDropdown.tsx

@@ -0,0 +1,95 @@
+/**
+ * Filter Dropdown Component
+ * Custom styled dropdown matching the dashboard design
+ */
+
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface Option {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+
+interface FilterDropdownProps {
+    options: Option[];
+    value: string;
+    onChange: (value: string) => void;
+    icon: React.ReactNode;
+    label: string;
+    minWidth?: string;
+}
+
+export function FilterDropdown({
+    options,
+    value,
+    onChange,
+    icon,
+    label,
+    minWidth = '160px'
+}: FilterDropdownProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const selectedOption = options.find(opt => opt.value === value) || options[0];
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    return (
+        <div className="relative" ref={dropdownRef}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={`flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all hover:bg-white/5 group ${
+                    isOpen ? 'text-primary' : 'text-dashboard-text-secondary'
+                }`}
+                style={{ minWidth }}
+            >
+                <div className={`${isOpen ? 'text-primary' : 'text-dashboard-text-secondary group-hover:text-primary'} transition-colors`}>
+                    {selectedOption.icon || icon}
+                </div>
+                <div className="flex flex-col items-start flex-1 overflow-hidden text-left">
+                    <span className="text-[8px] font-black uppercase tracking-[0.2em] opacity-40">{label}</span>
+                    <span className="text-[10px] font-black uppercase tracking-widest truncate w-full">
+                        {selectedOption.label}
+                    </span>
+                </div>
+                <ChevronDown className={`size-3 transition-transform duration-300 ${isOpen ? 'rotate-180 text-primary' : 'opacity-30'}`} />
+            </button>
+
+            {isOpen && (
+                <div className="absolute top-full left-0 mt-3 p-2 bg-dashboard-bg/95 backdrop-blur-2xl border border-dashboard-border rounded-2xl shadow-2xl z-[100] min-w-[200px] animate-in fade-in zoom-in-95 duration-200">
+                    {options.map((option) => (
+                        <button
+                            key={option.value}
+                            onClick={() => {
+                                onChange(option.value);
+                                setIsOpen(false);
+                            }}
+                            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${
+                                option.value === value
+                                    ? 'bg-primary/10 text-primary font-bold'
+                                    : 'text-dashboard-text-secondary hover:bg-white/5 hover:text-dashboard-text'
+                            }`}
+                        >
+                            <div className={option.value === value ? 'text-primary' : 'opacity-50'}>
+                                {option.icon || icon}
+                            </div>
+                            <span className="text-[10px] font-black uppercase tracking-widest">{option.label}</span>
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/views/PostManager/LanguageFlags.tsx

@@ -60,7 +60,8 @@ export function LanguageFlags({ post }: LanguageFlagsProps) {
             {post.availableLanguages.map((lang) => {
                 const langData = post.languages?.[lang];
                 const status = langData?.status || 'draft';
-                const langTitle = langData?.metadata?.title || post.title;
+                // Try to get title from metadata, fallback to root title
+                const langTitle = (langData as any)?.metadata?.title || post.title;
                 const isHovered = hoveredLang === lang;
 
                 return (
@@ -68,7 +69,10 @@ export function LanguageFlags({ post }: LanguageFlagsProps) {
                         key={lang}
                         ref={(el) => { flagRefs.current[lang] = el; }}
                         className="relative"
-                        onMouseEnter={() => setHoveredLang(lang)}
+                        onMouseEnter={() => {
+
+                            setHoveredLang(lang);
+                        }}
                         onMouseLeave={() => setHoveredLang(null)}
                     >
                         <motion.div