@jhits/plugin-blog 0.0.5 → 0.0.7

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { ArrowLeft, Library, Settings2 } from 'lucide-react';
+import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye } from 'lucide-react';
 import { useEditor } from '../../state/EditorContext';
 import { SaveConfirmationModal } from './SaveConfirmationModal';
 
@@ -15,6 +15,11 @@ export interface EditorHeaderProps {
     isSaving: boolean;
     onSave: (publish?: boolean) => Promise<void>;
     onSaveError: (error: string | null) => void;
+    autoSaveEnabled?: boolean;
+    onAutoSaveToggle?: (enabled: boolean) => void;
+    isDirty?: boolean;
+    autoSaveCountdown?: number | null;
+    autoSaveStatus?: 'idle' | 'saving' | 'saved' | 'error';
 }
 
 export function EditorHeader({
@@ -27,6 +32,11 @@ export function EditorHeader({
     isSaving,
     onSave,
     onSaveError,
+    autoSaveEnabled = false,
+    onAutoSaveToggle,
+    isDirty = false,
+    autoSaveCountdown = null,
+    autoSaveStatus = 'idle',
 }: EditorHeaderProps) {
     const { state, dispatch } = useEditor();
     const [showConfirmModal, setShowConfirmModal] = useState(false);
@@ -49,21 +59,21 @@ export function EditorHeader({
         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
@@ -73,7 +83,7 @@ export function EditorHeader({
             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
@@ -85,7 +95,7 @@ export function EditorHeader({
             } 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
@@ -94,10 +104,20 @@ export function EditorHeader({
     };
 
     return (
-        <header className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md z-10 border-b border-dashboard-border flex-none shrink-0">
+        <header 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">
                 <button
-                    onClick={() => window.location.href = '/dashboard/blog'}
+                    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;
+                            }
+                        }
+                        window.location.href = '/dashboard/blog';
+                    }}
                     className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors"
                 >
                     <ArrowLeft size={20} strokeWidth={1.5} />
@@ -114,15 +134,84 @@ export function EditorHeader({
             </div>
 
             <div className="flex items-center gap-4">
-                <button
-                    onClick={onPreviewToggle}
-                    className={`text-[10px] uppercase tracking-widest font-bold transition-colors ${isPreviewMode
-                        ? 'text-primary dark:text-primary'
-                        : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                {/* Auto-save Toggle */}
+                {onAutoSaveToggle && (
+                    <div className="flex items-center gap-2">
+                        <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'}
+                        >
+                            <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'}
+                            </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>
+                            )}
+                        </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>
+                        )}
+                    </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">
+                    <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'
                         }`}
-                >
-                    {isPreviewMode ? 'Edit' : 'Preview'}
-                </button>
+                        title="Edit mode - Make changes to your post"
+                    >
+                        <Edit size={12} strokeWidth={2.5} />
+                        <span>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"
+                    >
+                        <Eye size={12} strokeWidth={2.5} />
+                        <span>Preview</span>
+                    </button>
+                </div>
                 {/* Save Draft Button - Always visible for drafts and new posts */}
                 {(state.status === 'draft' || !state.postId) && (
                     <button