@jhits/plugin-blog 0.0.19 → 0.0.20

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

@@ -1,8 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Globe, Search, Box } from 'lucide-react';
+import React, { useState } from 'react';
+import { Globe, Search, Box, Hash, X, Shield, Key, Users, Layout, Type, Image as ImageIcon } from 'lucide-react';
 import { FeaturedMediaSection, PrivacySettingsSection } from './index';
+import { useEditor } from '../../../state/EditorContext';
+import { useCategories } from '../../../hooks/useCategories';
 import type { Block } from '../../../types/block';
 import type { PostMetadata, SEOMetadata } from '../../../types/post';
 
@@ -25,157 +27,224 @@ export function EditorSidebar({
     onSEOUpdate,
     onMetadataUpdate,
 }: EditorSidebarProps) {
+    const [newTag, setNewTag] = useState('');
+    const { state } = useEditor();
+    const { categories: existingCategories } = useCategories(state.currentLanguage || undefined);
+
+    const handleTagAdd = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && newTag.trim()) {
+            const tag = newTag.trim();
+            if (!metadata.tags?.includes(tag)) {
+                onMetadataUpdate({
+                    tags: [...(metadata.tags || []), tag]
+                });
+            }
+            setNewTag('');
+        }
+    };
+
+    const handleTagRemove = (tagToRemove: string) => {
+        onMetadataUpdate({
+            tags: (metadata.tags || []).filter(t => t !== tagToRemove)
+        });
+    };
+
     return (
-        <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
-            {/* SEO Section */}
-            <section>
-                <div className="flex items-center gap-3 mb-6">
-                    <Search 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">
-                        SEO Settings
-                    </label>
+        <div className="p-8 w-96 min-w-0 max-w-full space-y-10 overflow-y-auto max-h-full custom-scrollbar">
+            {/* 1. PUBLISHING STATUS SECTION */}
+            <section className="p-6 bg-primary/5 border border-primary/20 rounded-[2rem] relative overflow-hidden">
+                <div className="absolute top-0 right-0 p-4 opacity-10">
+                    <Globe size={60} className="text-primary" />
                 </div>
-                <div className="space-y-4">
-                    <div>
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                            SEO Title
+                <div className="relative z-10">
+                    <div className="flex items-center justify-between mb-4">
+                        <label className="text-[10px] font-black text-primary uppercase tracking-[0.3em]">
+                            Publication Status
                         </label>
-                        <input
-                            type="text"
-                            value={seo.title || ''}
-                            onChange={(e) => onSEOUpdate({ title: e.target.value })}
-                            placeholder="SEO title (defaults to post title)"
-                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                        />
-                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
-                            {seo.title?.length || 0} / 60 characters
-                        </p>
+                        <span className={`px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest border shadow-sm ${
+                            status === 'published' 
+                            ? 'bg-emerald-500 text-white border-emerald-400' 
+                            : status === 'not-translated'
+                            ? 'bg-blue-500 text-white border-blue-400'
+                            : 'bg-amber-500 text-white border-amber-400'
+                        }`}>
+                            {status === 'not-translated' ? 'Not Translated' : status}
+                        </span>
                     </div>
-                    <div>
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                            Meta Description
-                        </label>
-                        <textarea
-                            value={seo.description || ''}
-                            onChange={(e) => onSEOUpdate({ description: e.target.value })}
-                            placeholder="Brief description for search engines"
-                            rows={3}
-                            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 resize-none"
-                        />
-                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
-                            {seo.description?.length || 0} / 160 characters
+                    <div className="space-y-4">
+                        <div className="bg-dashboard-card/50 p-4 rounded-2xl border border-dashboard-border/50">
+                            <span className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] block mb-2">Live Endpoint</span>
+                            <div className="text-[11px] font-mono text-dashboard-text leading-relaxed break-all bg-white/5 p-2 rounded-lg border border-white/5">
+                                /blog/<span className="text-primary font-bold">{slug || 'untitled-publication'}</span>
+                            </div>
+                        </div>
+                        <p className="text-[10px] text-dashboard-text-secondary leading-relaxed italic opacity-70">
+                            {status === 'published'
+                                ? 'This publication is live across all connected digital touchpoints.'
+                                : status === 'not-translated'
+                                ? 'This language edition has not been created yet. Save it as a draft to begin.'
+                                : 'Your article is currently private. Only editorial staff can view and modify it.'}
                         </p>
                     </div>
-                    <div>
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                            Keywords (comma-separated)
-                        </label>
-                        <input
-                            type="text"
-                            value={seo.keywords?.join(', ') || ''}
-                            onChange={(e) => {
-                                const keywords = e.target.value.split(',').map(k => k.trim()).filter(k => k);
-                                onSEOUpdate({ keywords });
-                            }}
-                            placeholder="keyword1, keyword2, keyword3"
-                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                        />
-                    </div>
-                    <div>
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                            Open Graph Image URL
-                        </label>
-                        <input
-                            type="url"
-                            value={seo.ogImage || ''}
-                            onChange={(e) => onSEOUpdate({ ogImage: e.target.value })}
-                            placeholder="https://example.com/image.jpg"
-                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                        />
-                    </div>
                 </div>
             </section>
 
-            {/* Publishing Section */}
-            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-                <div className="flex items-center gap-3 mb-6">
-                    <Globe 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">
-                        Publishing
+            {/* 2. CLASSIFICATION SECTION */}
+            <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">
+                        <Box size={14} />
+                    </div>
+                    <label className="text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]">
+                        Classification
                     </label>
                 </div>
-                <div className="bg-dashboard-bg p-5 rounded-2xl border border-dashboard-border">
-                    <span className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-3">Slug / Permalink</span>
-                    <div className="text-xs font-mono break-all text-neutral-600 dark:text-neutral-400 leading-relaxed">
-                        /blog/<span className="text-neutral-950 dark:text-white bg-amber-50 dark:bg-amber-900/20 px-1 rounded">{slug || 'untitled-post'}</span>
+                
+                <div className="space-y-4 p-6 bg-dashboard-card/30 rounded-[2rem] border border-dashboard-border/50">
+                    <div className="group">
+                        <label className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors">
+                            Primary Category
+                        </label>
+                        <div className="relative">
+                            <Layout size={12} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-dashboard-text-secondary group-focus-within:text-primary transition-colors" />
+                            <input
+                                type="text"
+                                list="category-suggestions"
+                                value={metadata.categories?.[0] || ''}
+                                onChange={(e) => onMetadataUpdate({ categories: e.target.value.trim() ? [e.target.value.trim()] : [] })}
+                                placeholder="e.g. Technology, Lifestyle"
+                                className="w-full pl-10 pr-4 py-3 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"
+                            />
+                            <datalist id="category-suggestions">
+                                {existingCategories.map(cat => (
+                                    <option key={cat} value={cat} />
+                                ))}
+                            </datalist>
+                        </div>
+                    </div>
+
+                    <div className="group">
+                        <label className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors">
+                            Article Tags
+                        </label>
+                        <div className="flex flex-wrap gap-2 mb-3">
+                            {metadata.tags?.map((tag) => (
+                                <span 
+                                    key={tag} 
+                                    className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 border border-primary/20 rounded-full text-[9px] font-black text-primary uppercase tracking-widest group/tag hover:bg-primary/20 transition-all"
+                                >
+                                    {tag}
+                                    <button 
+                                        onClick={() => handleTagRemove(tag)}
+                                        className="text-primary/40 hover:text-primary transition-colors"
+                                    >
+                                        <X size={10} strokeWidth={3} />
+                                    </button>
+                                </span>
+                            ))}
+                        </div>
+                        <div className="relative">
+                            <Hash size={12} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-dashboard-text-secondary group-focus-within:text-primary transition-colors" />
+                            <input
+                                type="text"
+                                value={newTag}
+                                onChange={(e) => setNewTag(e.target.value)}
+                                onKeyDown={handleTagAdd}
+                                placeholder="Add tag + Enter"
+                                className="w-full pl-10 pr-4 py-3 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>
                 </div>
             </section>
 
-            {/* Category Section */}
-            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-                <div className="flex items-center gap-3 mb-6">
-                    <Box 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">
-                        Category
+            {/* 3. FEATURED MEDIA */}
+            <div className="p-6 bg-dashboard-card/30 rounded-[2rem] border border-dashboard-border/50">
+                <FeaturedMediaSection
+                    featuredImage={metadata.featuredImage}
+                    heroBlock={heroBlock}
+                    slug={slug}
+                    onUpdate={(image) => onMetadataUpdate({ featuredImage: image })}
+                />
+            </div>
+
+            {/* 4. SEO OPTIMIZATION */}
+            <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">
+                        <Search size={14} />
+                    </div>
+                    <label className="text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]">
+                        SEO & Meta
                     </label>
                 </div>
-                <div className="space-y-4">
-                    <div>
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                            Category
+                
+                <div className="space-y-5 p-6 bg-dashboard-card/30 rounded-[2.5rem] border border-dashboard-border/50">
+                    <div className="group">
+                        <label className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors">
+                            Search Engine Title
                         </label>
                         <input
                             type="text"
-                            value={metadata.categories?.[0] || ''}
-                            onChange={(e) => {
-                                const category = e.target.value.trim();
-                                onMetadataUpdate({
-                                    categories: category ? [category] : []
-                                });
-                            }}
-                            placeholder="Enter category (required for publishing)"
-                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                            value={seo.title || ''}
+                            onChange={(e) => onSEOUpdate({ title: e.target.value })}
+                            placeholder="Defaults to article title"
+                            className="w-full px-4 py-3 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"
                         />
-                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
-                            {metadata.categories?.[0] ? 'Category set' : 'No category set'}
-                        </p>
+                        <div className="flex justify-between mt-1.5 px-1">
+                            <p className="text-[8px] font-black text-dashboard-text-secondary uppercase opacity-40">Optimized: 60 chars</p>
+                            <p className={`text-[9px] font-mono ${ (seo.title?.length || 0) > 60 ? 'text-red-500' : 'text-primary'}`}>
+                                {seo.title?.length || 0}/60
+                            </p>
+                        </div>
                     </div>
-                </div>
-            </section>
 
-            {/* Featured Media Section */}
-            <FeaturedMediaSection
-                featuredImage={metadata.featuredImage}
-                heroBlock={heroBlock}
-                slug={slug}
-                onUpdate={(image) => onMetadataUpdate({ featuredImage: image })}
-            />
-
-            {/* Privacy Settings Section */}
-            <PrivacySettingsSection
-                privacy={metadata.privacy}
-                onUpdate={(privacy) => onMetadataUpdate({ privacy })}
-            />
+                    <div className="group">
+                        <label className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors">
+                            Meta Description
+                        </label>
+                        <textarea
+                            value={seo.description || ''}
+                            onChange={(e) => onSEOUpdate({ description: e.target.value })}
+                            placeholder="Write a compelling summary..."
+                            rows={4}
+                            className="w-full px-4 py-3 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 resize-none"
+                        />
+                        <div className="flex justify-between mt-1.5 px-1">
+                            <p className="text-[8px] font-black text-dashboard-text-secondary uppercase opacity-40">Recommended: 160 chars</p>
+                            <p className={`text-[9px] font-mono ${ (seo.description?.length || 0) > 160 ? 'text-red-500' : 'text-primary'}`}>
+                                {seo.description?.length || 0}/160
+                            </p>
+                        </div>
+                    </div>
 
-            {/* Post Status Section */}
-            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-                <div className="flex items-center justify-between mb-4">
-                    <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                        Post Status
-                    </label>
-                    <span className="text-[10px] font-black text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2.5 py-1 rounded-full uppercase tracking-tighter">
-                        {status}
-                    </span>
+                    <div className="group">
+                        <label className="text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors">
+                            Social Media Asset (OG Image)
+                        </label>
+                        <div className="relative">
+                            <ImageIcon size={12} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-dashboard-text-secondary group-focus-within:text-primary transition-colors" />
+                            <input
+                                type="url"
+                                value={seo.ogImage || ''}
+                                onChange={(e) => onSEOUpdate({ ogImage: e.target.value })}
+                                placeholder="https://..."
+                                className="w-full pl-10 pr-4 py-3 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>
                 </div>
-                <p className="text-[11px] text-neutral-500 dark:text-neutral-400 leading-relaxed italic">
-                    {status === 'draft'
-                        ? 'This post is private. Only you can see it until you hit publish.'
-                        : status === 'published'
-                            ? 'This post is live and visible to everyone.'
-                            : 'This post is scheduled for publication.'}
-                </p>
             </section>
+
+            {/* 5. PRIVACY & SECURITY */}
+            <div className="p-6 bg-dashboard-card/30 rounded-[2.5rem] border border-dashboard-border/50">
+                <PrivacySettingsSection
+                    privacy={metadata.privacy}
+                    onUpdate={(privacy) => onMetadataUpdate({ privacy })}
+                />
+            </div>
+            
+            <div className="pb-10" />
         </div>
     );
 }