@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye, Globe, Plus, ChevronDown } from 'lucide-react';
+import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye, Globe, Plus, ChevronDown, CheckCircle2 } from 'lucide-react';
 import { useEditor } from '../../state/EditorContext';
 import { SaveConfirmationModal } from './SaveConfirmationModal';
 
@@ -61,268 +61,249 @@ export function EditorHeader({
         es: 'Español',
     };
 
-    const availableToAdd = ['en', 'nl', 'sv', 'de', 'fr', 'es'].filter(lang => !languages.includes(lang));
+    const getFlagUrl = (lang: string) => {
+        const mapping: Record<string, string> = {
+            en: 'gb', nl: 'nl', sv: 'se', de: 'de', fr: 'fr', es: 'es'
+        };
+        return `https://flagcdn.com/w40/${(mapping[lang] || lang).toLowerCase()}.png`;
+    };
+
+    const allCreatedLanguages = Array.from(new Set([...languages, currentLanguage]));
+    const availableToAdd = ['en', 'nl', 'sv', 'de', 'fr', 'es'].filter(lang => !allCreatedLanguages.includes(lang));
+
+
 
     const handleSaveDraftClick = () => {
         setSaveAsDraft(true);
-        setSaveError(null); // Clear any previous errors
+        setSaveError(null);
         setShowConfirmModal(true);
     };
 
     const handlePublishClick = () => {
         setSaveAsDraft(false);
-        setSaveError(null); // Clear any previous errors
+        setSaveError(null);
         setShowConfirmModal(true);
     };
 
     const handleConfirmSave = async () => {
         try {
-            const targetStatus = saveAsDraft ? 'draft' : 'published';
-            console.log('[EditorHeader] Starting save process...', { saveAsDraft, targetStatus, currentStatus: state.status });
-
-            // Set status before saving - ensure state is updated
             if (saveAsDraft) {
                 dispatch({ type: 'SET_STATUS', payload: 'draft' });
             } else {
                 dispatch({ type: 'SET_STATUS', payload: 'published' });
             }
-
-            // Wait longer to ensure state update propagates through the reducer and context
-            // React state updates are asynchronous, so we need to wait for the state to actually update
             await new Promise(resolve => setTimeout(resolve, 150));
-
-            // Verify status was updated
-            console.log('[EditorHeader] Status after update:', state.status, 'Expected:', targetStatus);
-
             await onSave(!saveAsDraft);
-            console.log('[EditorHeader] Post saved successfully');
-            // Clear any previous errors
             setSaveError(null);
-            // Modal will show success message and close automatically
         } catch (error: any) {
-            console.error('[EditorHeader] Failed to save post:', error);
-            // Extract user-friendly error message
             let errorMessage = error.message || 'Failed to save post';
-
-            // Make error messages more user-friendly
-            if (errorMessage.includes('Missing required fields')) {
-                // Keep the detailed message about missing fields
-                errorMessage = errorMessage.replace('Missing required fields for publishing:', 'To publish, please fill in:');
-            } else if (errorMessage.includes('All required fields')) {
-                errorMessage = 'To publish, please fill in all required fields: summary, featured image, category, and content.';
-            } else if (errorMessage.includes('Unauthorized')) {
-                errorMessage = 'You are not authorized to save this post. Please log in again.';
-            } else if (errorMessage.includes('Failed to save')) {
-                errorMessage = 'Unable to save the post. Please check your connection and try again.';
-            }
-
             setSaveError(errorMessage);
             onSaveError(errorMessage);
-            // Re-throw the error so the modal knows it failed and doesn't show success
             throw error;
         }
     };
 
     return (
-        <div className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0">
-            <div className="flex items-center gap-6">
+        <div className="flex items-center justify-between px-4 lg:px-8 py-3 lg:py-4 bg-dashboard-bg/80 backdrop-blur-xl border-b border-dashboard-border/50 flex-none shrink-0 z-50">
+            {/* Left Section: Navigation & Library */}
+            <div className="flex items-center gap-3 lg:gap-6">
                 <button
                     onClick={() => {
                         if (isDirty) {
-                            const confirmed = window.confirm(
-                                'You have unsaved changes. Are you sure you want to leave? Your changes will be lost.'
-                            );
-                            if (!confirmed) {
-                                return;
-                            }
+                            if (!window.confirm('You have unsaved changes. Leave anyway?')) return;
                         }
                         window.location.href = '/dashboard/blog';
                     }}
-                    className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors"
+                    className="size-9 lg:size-10 flex items-center justify-center bg-dashboard-card border border-dashboard-border rounded-xl text-dashboard-text-secondary hover:text-primary hover:border-primary/30 transition-all active:scale-95 shadow-sm"
                 >
-                    <ArrowLeft size={20} strokeWidth={1.5} />
+                    <ArrowLeft className="size-[18px] lg:size-[20px]" />
                 </button>
-                <div className="h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" />
+
+                <div className="h-6 lg:h-8 w-px bg-dashboard-border/30" />
+
                 <button
                     onClick={onLibraryToggle}
-                    className={`flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isLibraryOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'
-                        }`}
+                    className={`flex items-center gap-2 lg:gap-3 px-3 lg:px-5 py-2 lg:py-2.5 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] transition-all border ${
+                        isLibraryOpen 
+                        ? 'bg-primary text-white border-primary/20 shadow-lg shadow-primary/20' 
+                        : 'bg-dashboard-card text-dashboard-text-secondary border-dashboard-border hover:border-primary/30'
+                    }`}
                 >
-                    <Library size={16} strokeWidth={1.5} />
-                    Library
+                    <Library size={16} />
+                    <span className="hidden xl:inline">Blocks Library</span>
+                    <span className="xl:hidden hidden lg:inline text-[8px]">Blocks</span>
                 </button>
+
                 {/* Language Switcher */}
                 {languages.length > 0 && onLanguageChange && (
-                    <>
-                        <div className="h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" />
-                        <div className="relative">
-                            <button
-                                onClick={() => setShowLanguageDropdown(!showLanguageDropdown)}
-                                className="flex items-center gap-2 px-3 py-2 text-[10px] uppercase tracking-widest font-bold bg-dashboard-card border border-dashboard-border rounded-lg text-neutral-600 dark:text-neutral-400 hover:text-dashboard-text hover:border-primary/50 transition-all shadow-sm"
-                            >
-                                <Globe size={14} strokeWidth={1.5} />
-                                <span>{languageLabels[currentLanguage] || currentLanguage.toUpperCase()}</span>
-                                <ChevronDown size={12} className={`transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`} />
-                            </button>
-                            {showLanguageDropdown && (
-                                <div className="absolute top-full left-0 mt-2 py-1 bg-dashboard-card border border-dashboard-border rounded-lg shadow-xl z-[9999] min-w-[160px] overflow-hidden">
-                                    <div className="px-3 py-2 text-[9px] text-neutral-500 uppercase tracking-wider border-b border-dashboard-border">
-                                        Beschikbare Talen
-                                    </div>
-                                    {languages.map(lang => (
-                                        <button
-                                            key={lang}
-                                            onClick={() => {
-                                                onLanguageChange(lang);
-                                                setShowLanguageDropdown(false);
-                                            }}
-                                            className={`w-full text-left px-3 py-2 text-[10px] uppercase tracking-wider transition-colors ${lang === currentLanguage
-                                                ? 'bg-primary/10 text-primary font-bold'
-                                                : 'text-neutral-600 dark:text-neutral-400 hover:bg-dashboard-bg hover:text-dashboard-text'
-                                                }`}
-                                        >
-                                            {languageLabels[lang] || lang.toUpperCase()}
-                                        </button>
-                                    ))}
-                                    {availableToAdd.length > 0 && onAddLanguage && (
-                                        <>
-                                            <div className="my-1 border-t border-dashboard-border" />
-                                            <div className="px-3 py-1 text-[9px] text-neutral-500 uppercase tracking-wider">
-                                                Add Language
-                                            </div>
-                                            {availableToAdd.slice(0, 3).map(lang => (
-                                                <button
-                                                    key={lang}
-                                                    onClick={() => {
-                                                        onAddLanguage(lang);
-                                                        setShowLanguageDropdown(false);
-                                                    }}
-                                                    className="w-full text-left px-3 py-2 text-[10px] uppercase tracking-wider text-neutral-600 dark:text-neutral-400 hover:bg-dashboard-bg hover:text-dashboard-text transition-colors"
-                                                >
-                                                    + {languageLabels[lang] || lang.toUpperCase()}
-                                                </button>
-                                            ))}
-                                        </>
-                                    )}
-                                </div>
-                            )}
-                        </div>
-                    </>
-                )}
-            </div>
-
-            <div className="flex items-center gap-4">
-                {/* Auto-save Toggle */}
-                {onAutoSaveToggle && (
-                    <div className="flex items-center gap-2">
+                    <div className="relative group">
                         <button
-                            onClick={() => onAutoSaveToggle(!autoSaveEnabled)}
-                            className={`relative flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${autoSaveEnabled
-                                ? 'bg-primary/20 text-primary border border-primary/30'
-                                : 'bg-dashboard-bg text-neutral-600 dark:text-neutral-400 border border-dashboard-border hover:text-neutral-950 dark:hover:text-white'
-                                }`}
-                            title={autoSaveEnabled ? 'Auto-save enabled (saves after 10s of inactivity)' : 'Click to enable auto-save'}
+                            onClick={() => setShowLanguageDropdown(!showLanguageDropdown)}
+                            className="flex items-center gap-2 lg:gap-3 px-3 lg:px-4 py-2 lg:py-2.5 bg-dashboard-card border border-dashboard-border rounded-xl hover:border-primary/30 transition-all shadow-sm"
                         >
-                            <Clock size={12} className={autoSaveEnabled && autoSaveStatus !== 'saving' ? 'animate-pulse' : ''} />
-                            <span>Auto-save</span>
-                            <span className={`ml-1 text-[9px] ${autoSaveEnabled ? 'text-primary' : 'text-neutral-500 dark:text-neutral-400'}`}>
-                                {autoSaveEnabled ? 'ON' : 'OFF'}
+                            <img src={getFlagUrl(currentLanguage)} className="w-4 h-2.5 lg:w-5 lg:h-3.5 object-cover rounded-sm border border-white/20" alt="" />
+                            <span className="text-[10px] font-black uppercase tracking-widest text-dashboard-text-secondary">
+                                {currentLanguage.toUpperCase()}
                             </span>
-                            {/* Countdown or Status */}
-                            {autoSaveEnabled && isDirty && (
-                                <span className="ml-1.5 text-[9px] font-bold tabular-nums">
-                                    {autoSaveStatus === 'saving' && (
-                                        <span className="text-primary animate-pulse">Saving...</span>
-                                    )}
-                                    {autoSaveStatus === 'saved' && (
-                                        <span className="text-green-500 dark:text-green-400">Saved!</span>
-                                    )}
-                                    {autoSaveStatus === 'error' && (
-                                        <span className="text-red-500 dark:text-red-400">Error</span>
-                                    )}
-                                    {autoSaveStatus === 'idle' && autoSaveCountdown !== null && (
-                                        <span className="text-primary/70">{autoSaveCountdown}s</span>
-                                    )}
-                                </span>
-                            )}
+                            <ChevronDown className={`size-[12px] lg:size-[14px] text-dashboard-text-secondary transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`} />
                         </button>
-                        {/* Unsaved Changes Indicator - only show when auto-save is off */}
-                        {isDirty && !autoSaveEnabled && (
-                            <span className="text-[10px] text-amber-500 dark:text-amber-400 font-bold uppercase tracking-widest animate-pulse">
-                                Unsaved
-                            </span>
+                        
+                        {showLanguageDropdown && (
+                            <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-[180px] animate-in fade-in zoom-in-95 duration-200">
+                                <label className="px-3 py-2 text-[8px] font-black text-dashboard-text-secondary uppercase tracking-[0.3em] block border-b border-dashboard-border/30 mb-1">
+                                    Switch Edition
+                                </label>
+                                {allCreatedLanguages.map(lang => (
+                                    <button
+                                        key={lang}
+                                        onClick={() => {
+                                            onLanguageChange(lang);
+                                            setShowLanguageDropdown(false);
+                                        }}
+                                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${
+                                            lang === currentLanguage
+                                            ? 'bg-primary/10 text-primary font-bold'
+                                            : 'text-dashboard-text-secondary hover:bg-white/5 hover:text-dashboard-text'
+                                        }`}
+                                    >
+                                        <img src={getFlagUrl(lang)} className="w-4 h-3 object-cover rounded-sm" alt="" />
+                                        <span className="text-[10px] font-black uppercase tracking-widest">{languageLabels[lang] || lang.toUpperCase()}</span>
+                                    </button>
+                                ))}
+
+                                {availableToAdd.length > 0 && onAddLanguage && (
+                                    <>
+                                        <div className="my-2 border-t border-dashboard-border/30 mx-2" />
+                                        <label className="px-3 py-2 text-[8px] font-black text-dashboard-text-secondary uppercase tracking-[0.3em] block mb-1">
+                                            Add Edition
+                                        </label>
+                                        {availableToAdd.map(lang => (
+                                            <button
+                                                key={lang}
+                                                onClick={() => {
+                                                    onAddLanguage(lang);
+                                                    setShowLanguageDropdown(false);
+                                                }}
+                                                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-dashboard-text-secondary hover:bg-primary/10 hover:text-primary transition-all group/add"
+                                            >
+                                                <div className="relative">
+                                                    <img src={getFlagUrl(lang)} className="w-4 h-3 object-cover rounded-sm opacity-60 group-hover/add:opacity-100 transition-opacity" alt="" />
+                                                    <div className="absolute -top-1 -right-1 size-2 bg-primary rounded-full border border-dashboard-bg flex items-center justify-center text-[6px] text-white font-bold">
+                                                        +
+                                                    </div>
+                                                </div>
+                                                <span className="text-[10px] font-black uppercase tracking-widest">{languageLabels[lang] || lang.toUpperCase()}</span>
+                                            </button>
+                                        ))}
+                                    </>
+                                )}
+                            </div>
                         )}
                     </div>
                 )}
-                {/* Edit/Preview Toggle - Segmented Control Style */}
-                <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1">
+            </div>
+
+            {/* Middle Section: Status */}
+            <div className="hidden md:flex items-center gap-2 lg:gap-4">
+                {state.status === 'published' && (
+                    <div className="flex items-center gap-2 px-3 lg:px-4 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full text-emerald-500">
+                        <CheckCircle2 size={12} className="animate-pulse" />
+                        <span className="text-[9px] font-black uppercase tracking-[0.2em] hidden lg:inline">Live Edition</span>
+                        <span className="text-[9px] font-black uppercase tracking-[0.2em] lg:hidden">Live</span>
+                    </div>
+                )}
+                {state.status === 'not-translated' && (
+                    <div className="flex items-center gap-2 px-3 lg:px-4 py-1.5 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-500">
+                        <Plus size={12} />
+                        <span className="text-[9px] font-black uppercase tracking-[0.2em] hidden lg:inline">New Edition</span>
+                        <span className="text-[9px] font-black uppercase tracking-[0.2em] lg:hidden">New</span>
+                    </div>
+                )}
+                {isDirty && !autoSaveEnabled && (
+                    <div className="flex items-center gap-2 px-3 lg:px-4 py-1.5 bg-amber-500/10 border border-amber-500/20 rounded-full text-amber-500 animate-pulse">
+                        <Clock size={12} />
+                        <span className="text-[9px] font-black uppercase tracking-[0.2em] hidden lg:inline">Unsaved Edits</span>
+                        <span className="text-[9px] font-black uppercase tracking-[0.2em] lg:hidden">Dirty</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Right Section: Controls & Save */}
+            <div className="flex items-center gap-2 lg:gap-4">
+                {/* Auto-save */}
+                {onAutoSaveToggle && (
                     <button
-                        onClick={() => {
-                            if (isPreviewMode) {
-                                onPreviewToggle();
-                            }
-                        }}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${!isPreviewMode
-                            ? 'bg-primary text-white shadow-sm'
-                            : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                            }`}
-                        title="Edit mode - Make changes to your post"
+                        onClick={() => onAutoSaveToggle(!autoSaveEnabled)}
+                        className={`group flex items-center gap-2 lg:gap-3 px-3 lg:px-4 py-2 lg:py-2.5 rounded-xl border transition-all ${
+                            autoSaveEnabled 
+                            ? 'bg-primary/10 border-primary/30 text-primary' 
+                            : 'bg-dashboard-card border border-dashboard-border text-dashboard-text-secondary'
+                        }`}
                     >
-                        <Edit size={12} strokeWidth={2.5} />
-                        <span>Edit</span>
+                        <Clock size={14} className={autoSaveEnabled && autoSaveStatus === 'saving' ? 'animate-spin' : ''} />
+                        <span className="text-[9px] font-black uppercase tracking-widest hidden lg:inline">
+                            {autoSaveStatus === 'saving' ? 'Syncing...' : 'Auto-Sync'}
+                        </span>
+                        <div className={`size-1.5 rounded-full ${autoSaveEnabled ? 'bg-primary animate-pulse' : 'bg-dashboard-text-secondary/30'}`} />
+                    </button>
+                )}
+
+                {/* Edit/Preview Toggle */}
+                <div className="flex items-center bg-dashboard-card border border-dashboard-border rounded-xl p-1 shadow-inner">
+                    <button
+                        onClick={() => isPreviewMode && onPreviewToggle()}
+                        className={`flex items-center gap-2 px-3 lg:px-4 py-1.5 lg:py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${
+                            !isPreviewMode ? 'bg-primary text-white shadow-md' : 'text-dashboard-text-secondary hover:text-dashboard-text'
+                        }`}
+                    >
+                        <Edit size={12} />
+                        <span className="hidden sm:inline">Edit</span>
                     </button>
                     <button
-                        onClick={() => {
-                            if (!isPreviewMode) {
-                                onPreviewToggle();
-                            }
-                        }}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${isPreviewMode
-                            ? 'bg-primary text-white shadow-sm'
-                            : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                            }`}
-                        title="Preview mode - See how your post will look"
+                        onClick={() => !isPreviewMode && onPreviewToggle()}
+                        className={`flex items-center gap-2 px-3 lg:px-4 py-1.5 lg:py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${
+                            isPreviewMode ? 'bg-primary text-white shadow-md' : 'text-dashboard-text-secondary hover:text-dashboard-text'
+                        }`}
                     >
-                        <Eye size={12} strokeWidth={2.5} />
-                        <span>Preview</span>
+                        <Eye size={12} />
+                        <span className="hidden sm:inline">View</span>
                     </button>
                 </div>
-                {/* Save Draft Button - Always visible for drafts and new posts */}
-                {(state.status === 'draft' || !state.postId) && (
+
+                {/* Save Options */}
+                <div className="flex items-center gap-2">
+                    {state.status !== 'published' && (
+                        <button
+                            onClick={handleSaveDraftClick}
+                            disabled={isSaving}
+                            className="px-4 lg:px-6 py-2 lg:py-2.5 bg-dashboard-card border border-dashboard-border text-dashboard-text-secondary rounded-xl text-[10px] font-black uppercase tracking-[0.2em] hover:border-primary/30 transition-all active:scale-95"
+                        >
+                            <span className="hidden lg:inline">{isSaving ? '...' : 'Save Draft'}</span>
+                            <span className="lg:hidden">{isSaving ? '...' : 'Draft'}</span>
+                        </button>
+                    )}
                     <button
-                        onClick={handleSaveDraftClick}
+                        onClick={handlePublishClick}
                         disabled={isSaving}
-                        className={`px-4 py-2 border-2 border-dashboard-border text-dashboard-text rounded-full text-[10px] font-bold uppercase tracking-widest transition-all ${isSaving
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'hover:bg-dashboard-bg'
-                            }`}
+                        className="px-5 lg:px-8 py-2 lg:py-2.5 bg-primary text-white rounded-xl text-[10px] font-black uppercase tracking-[0.3em] shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
                     >
-                        {isSaving ? 'Saving...' : 'Save Draft'}
+                        <span className="hidden lg:inline">{isSaving ? 'Publishing...' : state.status === 'published' ? 'Update Live' : 'Go Live'}</span>
+                        <Save size={14} className="lg:hidden" />
                     </button>
-                )}
-                {/* Publish/Update Button */}
-                <button
-                    onClick={handlePublishClick}
-                    disabled={isSaving}
-                    className={`px-6 py-2 bg-primary text-white rounded-full text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving
-                        ? 'opacity-50 cursor-not-allowed'
-                        : 'hover:bg-primary/90'
-                        }`}
-                >
-                    {isSaving ? 'Saving...' : state.status === 'published' ? 'Update Post' : 'Publish Post'}
-                </button>
+                </div>
+
                 <button
                     onClick={onSidebarToggle}
-                    className={`p-2 rounded-full transition-colors ${isSidebarOpen
-                        ? 'bg-dashboard-bg text-dashboard-text'
-                        : 'text-neutral-500 dark:text-neutral-400 hover:bg-dashboard-bg'
-                        }`}
+                    className={`size-9 lg:size-10 flex items-center justify-center rounded-xl transition-all border ${
+                        isSidebarOpen 
+                        ? 'bg-primary/10 border-primary/30 text-primary shadow-lg shadow-primary/10' 
+                        : 'bg-dashboard-card border border-dashboard-border text-dashboard-text-secondary hover:border-primary/30'
+                    }`}
                 >
-                    <Settings2 size={18} />
+                    <Settings2 className="size-[18px] lg:size-[20px]" />
                 </button>
             </div>
 
-            {/* Save Confirmation Modal */}
             <SaveConfirmationModal
                 isOpen={showConfirmModal}
                 onClose={() => {
@@ -340,4 +321,3 @@ export function EditorHeader({
         </div>
     );
 }
-