@jhits/plugin-blog 0.0.1

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

@@ -0,0 +1,212 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Shield, Key, Users } from 'lucide-react';
+
+export interface PrivacySettings {
+    isPrivate?: boolean;
+    password?: string;
+    sharedWithUsers?: string[];
+}
+
+export interface PrivacySettingsSectionProps {
+    privacy?: PrivacySettings;
+    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 [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);
+            }
+        };
+        fetchUsers();
+    }, []);
+
+    const handlePrivacyToggle = (isPrivate: boolean) => {
+        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,
+        });
+    };
+
+    const handleUserToggle = (userId: string) => {
+        const currentUsers = privacy?.sharedWithUsers || [];
+        const newUsers = currentUsers.includes(userId)
+            ? currentUsers.filter(id => id !== userId)
+            : [...currentUsers, userId];
+        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
+                </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>
+                    </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 */}
+                {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
+                                </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"
+                            />
+                        )}
+                    </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>
+                            <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'
+                                    }`}
+                            >
+                                <Users size={14} />
+                            </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"
+                                            >
+                                                <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"
+                                                />
+                                                <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>
+                                            </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>
+        </section>
+    );
+}
+

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

@@ -0,0 +1,17 @@
+/**
+ * Canvas Editor Components
+ * Exports all components used in the Canvas Editor
+ */
+
+export { LibraryItem } from './LibraryItem';
+export type { LibraryItemProps } from './LibraryItem';
+
+export { CustomBlockItem } from './CustomBlockItem';
+export type { CustomBlockItemProps } from './CustomBlockItem';
+
+export { FeaturedMediaSection } from './FeaturedMediaSection';
+export type { FeaturedMediaSectionProps, FeaturedImage } from './FeaturedMediaSection';
+
+export { PrivacySettingsSection } from './PrivacySettingsSection';
+export type { PrivacySettingsSectionProps, PrivacySettings } from './PrivacySettingsSection';
+

package/src/views/CanvasEditor/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Canvas Editor View Exports
+ */
+
+export { CanvasEditorView } from './CanvasEditorView';
+export type { CanvasEditorViewProps } from './CanvasEditorView';
+export { EditorBody } from './EditorBody';
+export { LayoutContainer } from './LayoutContainer';
+export type { LayoutContainerProps } from './LayoutContainer';
+export type { EditorBodyProps } from './EditorBody';
+export { BlockWrapper } from './BlockWrapper';
+export type { BlockWrapperProps } from './BlockWrapper';
+export { EditorHeader } from './EditorHeader';
+export type { EditorHeaderProps } from './EditorHeader';
+export { SaveConfirmationModal } from './SaveConfirmationModal';
+export type { SaveConfirmationModalProps } from './SaveConfirmationModal';

package/src/views/PostManager/EmptyState.tsx

@@ -0,0 +1,42 @@
+/**
+ * Empty State Component
+ * Botanical-themed empty state for when no posts are found
+ */
+
+'use client';
+
+import React from 'react';
+import { Sprout, Plus } from 'lucide-react';
+
+export interface EmptyStateProps {
+    hasFilters: boolean;
+    onCreatePost: () => void;
+}
+
+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>
+            <h3 className="text-xl font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-2">
+                {hasFilters ? 'No Posts Found' : 'No Posts Yet'}
+            </h3>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400 text-center mb-6 max-w-md">
+                {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.'}
+            </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"
+                >
+                    <Plus size={16} />
+                    Create Your First Post
+                </button>
+            )}
+        </div>
+    );
+}
+

package/src/views/PostManager/PostActionsMenu.tsx

@@ -0,0 +1,112 @@
+/**
+ * Post Actions Menu Component
+ * Three-dot menu with actions for each post
+ */
+
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { MoreVertical, Edit, Eye, Copy, Trash2 } from 'lucide-react';
+
+export interface PostActionsMenuProps {
+    onEdit: () => void;
+    onPreview: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+
+export function PostActionsMenu({
+    onEdit,
+    onPreview,
+    onDuplicate,
+    onDelete,
+}: PostActionsMenuProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0 });
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    // Calculate menu position when opening
+    useEffect(() => {
+        if (isOpen && buttonRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            setMenuPosition({
+                top: buttonRect.bottom + 8, // 8px = mt-2 equivalent
+                right: window.innerWidth - buttonRect.right,
+            });
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (
+                menuRef.current &&
+                !menuRef.current.contains(event.target as Node) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target as Node)
+            ) {
+                setIsOpen(false);
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    const actions = [
+        { label: 'Edit', icon: Edit, onClick: onEdit, color: 'text-neutral-600 dark:text-neutral-400' },
+        // { label: 'Preview', icon: Eye, onClick: onPreview, color: 'text-blue-600 dark:text-blue-400' },
+        { label: 'Duplicate', icon: Copy, onClick: onDuplicate, color: 'text-neutral-600 dark:text-neutral-400' },
+        { label: 'Delete', icon: Trash2, onClick: onDelete, color: 'text-red-600 dark:text-red-400' },
+    ];
+
+    const menuContent = isOpen && (
+        <div
+            ref={menuRef}
+            className="fixed w-48 bg-dashboard-card border border-dashboard-border rounded-2xl shadow-xl z-[9999] overflow-hidden"
+            style={{
+                top: `${menuPosition.top}px`,
+                right: `${menuPosition.right}px`,
+            }}
+        >
+            {actions.map((action) => {
+                const Icon = action.icon;
+                return (
+                    <button
+                        key={action.label}
+                        onClick={() => {
+                            action.onClick();
+                            setIsOpen(false);
+                        }}
+                        className={`w-full flex items-center font-sans gap-3 px-4 py-3 text-sm hover:bg-dashboard-bg transition-colors ${action.color}`}
+                    >
+                        <Icon size={16} />
+                        <span>{action.label}</span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+
+    return (
+        <>
+            <button
+                ref={buttonRef}
+                onClick={() => setIsOpen(!isOpen)}
+                className="p-2 text-neutral-400 hover:text-dashboard-text hover:bg-dashboard-bg rounded-full transition-colors"
+                title="Actions"
+            >
+                <MoreVertical size={18} />
+            </button>
+
+            {typeof window !== 'undefined' && isOpen && createPortal(menuContent, document.body)}
+        </>
+    );
+}
+

package/src/views/PostManager/PostCards.tsx

@@ -0,0 +1,192 @@
+/**
+ * Post Cards Component
+ * Card-based layout for displaying posts
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Calendar, User, UserCheck } from 'lucide-react';
+import { Image } from '@jhits/plugin-images';
+import { PostListItem, PostStatus } from '../../types/post';
+import { PostActionsMenu } from './PostActionsMenu';
+import { useSession } from 'next-auth/react';
+
+export interface PostCardsProps {
+    posts: PostListItem[];
+    locale: string;
+    onEdit: (postId: string) => void;
+    onPreview: (postId: string) => void;
+    onDuplicate: (postId: string) => void;
+    onDelete: (postId: string) => void;
+}
+
+function getStatusBadgeColor(status: PostStatus) {
+    switch (status) {
+        case 'published':
+            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+        case 'draft':
+            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+        case 'archived':
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        default:
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+    }
+}
+
+function formatDate(dateString: string | undefined, locale: string) {
+    if (!dateString) return 'No date';
+    return new Date(dateString).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+
+export function PostCards({
+    posts,
+    locale,
+    onEdit,
+    onPreview,
+    onDuplicate,
+    onDelete,
+}: PostCardsProps) {
+    const { data: session, status: sessionStatus } = useSession();
+    const currentUserId = (session?.user as any)?.id;
+    const [userMap, setUserMap] = useState<Record<string, string>>({});
+    
+    // Helper function to check if user is the owner
+    const isPostOwner = (post: PostListItem): boolean => {
+        if (sessionStatus === 'loading') return false; // Don't show actions while loading
+        if (!currentUserId || !post.authorId) return false;
+        // Convert both to strings for comparison to handle ObjectId vs string
+        return String(currentUserId) === String(post.authorId);
+    };
+
+    // Fetch users to map IDs to names
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                const response = await fetch('/api/users');
+                const users = await response.json();
+                if (Array.isArray(users)) {
+                    const map: Record<string, string> = {};
+                    users.forEach((user: { _id: string; name?: string; email?: string }) => {
+                        const id = user._id?.toString();
+                        if (id) {
+                            map[id] = user.name || user.email || 'Unknown';
+                        }
+                    });
+                    setUserMap(map);
+                }
+            } catch (error) {
+                console.error('Failed to fetch users:', error);
+            }
+        };
+        fetchUsers();
+    }, []);
+
+    const getAuthorName = (authorId?: string) => {
+        if (!authorId) return 'Unknown';
+        return userMap[authorId] || authorId;
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {posts.map((post) => (
+                <div
+                    key={post.id}
+                    className="bg-dashboard-card rounded-2xl border border-dashboard-border overflow-hidden hover:shadow-xl transition-all duration-300 group"
+                >
+                    {/* Featured Image */}
+                    <div className="relative w-full h-48 bg-neutral-200 dark:bg-neutral-800 overflow-hidden">
+                        {post.featuredImage ? (
+                            <Image
+                                id={post.featuredImage}
+                                alt={post.title}
+                                fill
+                                editable={false}
+                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                            />
+                        ) : (
+                            <div className="w-full h-full flex items-center justify-center">
+                                <span className="text-sm text-neutral-400">No Image</span>
+                            </div>
+                        )}
+                        {/* Actions Menu - Top Left - Only show for own posts */}
+                        {isPostOwner(post) && (
+                            <div className="absolute top-4 left-4 z-10">
+                                <div className="bg-white/90 dark:bg-neutral-900/90 backdrop-blur-sm rounded-full p-1 shadow-lg border border-neutral-200 dark:border-neutral-700">
+                                    <PostActionsMenu
+                                        onEdit={() => onEdit(post.id)}
+                                        onPreview={() => onPreview(post.id)}
+                                        onDuplicate={() => onDuplicate(post.id)}
+                                        onDelete={() => onDelete(post.id)}
+                                    />
+                                </div>
+                            </div>
+                        )}
+                        {/* Status Badge Overlay */}
+                        <div className="absolute top-4 right-4 flex items-center gap-2">
+                            {/* Owner Badge */}
+                            {isPostOwner(post) && (
+                                <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm bg-primary/10 text-primary border-primary/20">
+                                    <UserCheck size={12} />
+                                    Mijn artikel
+                                </span>
+                            )}
+                            <span
+                                className={`inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm ${getStatusBadgeColor(post.status)}`}
+                            >
+                                {post.status}
+                            </span>
+                        </div>
+                    </div>
+
+                    {/* Card Content */}
+                    <div className="p-6">
+                        {/* Title & Slug */}
+                        <div className="mb-4">
+                            <h3 className="font-bold text-lg text-neutral-950 dark:text-white mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                                {post.title}
+                            </h3>
+                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
+                                /{post.slug}
+                            </p>
+                        </div>
+
+                        {/* Excerpt */}
+                        {post.excerpt && (
+                            <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-2">
+                                {post.excerpt}
+                            </p>
+                        )}
+
+                        {/* Meta Information */}
+                        <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700">
+                            {/* Author */}
+                            <div className="flex items-center gap-2">
+                                <User size={14} className="text-neutral-400" />
+                                <span className="text-xs text-neutral-600 dark:text-neutral-400">
+                                    {getAuthorName(post.authorId)}
+                                </span>
+                            </div>
+
+                            {/* Last Modified */}
+                            <div className="flex items-center gap-2">
+                                <Calendar size={14} className="text-neutral-400" />
+                                <span className="text-xs text-neutral-600 dark:text-neutral-400">
+                                    {formatDate(post.updatedAt, locale)}
+                                </span>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+

package/src/views/PostManager/PostFilters.tsx

@@ -0,0 +1,80 @@
+/**
+ * Post Filters Component
+ * Search and filter controls for posts
+ */
+
+'use client';
+
+import React from 'react';
+import { Search, Filter, Tag } from 'lucide-react';
+import { PostStatus } from '../../types/post';
+
+export interface PostFiltersProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    statusFilter: PostStatus | 'all';
+    onStatusFilterChange: (value: PostStatus | 'all') => void;
+    categoryFilter: string;
+    onCategoryFilterChange: (value: string) => void;
+    categories: string[];
+}
+
+export function PostFilters({
+    search,
+    onSearchChange,
+    statusFilter,
+    onStatusFilterChange,
+    categoryFilter,
+    onCategoryFilterChange,
+    categories,
+}: PostFiltersProps) {
+    return (
+        <div className="flex flex-col sm:flex-row gap-4 mb-6">
+            {/* Search Input */}
+            <div className="relative flex-1">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4" />
+                <input
+                    type="text"
+                    value={search}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                    placeholder="Search posts by title or content..."
+                    className="w-full pl-11 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"
+                />
+            </div>
+
+            {/* Status Filter */}
+            <div className="relative">
+                <Filter className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
+                <select
+                    value={statusFilter}
+                    onChange={(e) => onStatusFilterChange(e.target.value as PostStatus | 'all')}
+                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
+                >
+                    <option value="all">All Statuses</option>
+                    <option value="published">Published</option>
+                    <option value="draft">Draft</option>
+                    <option value="scheduled">Scheduled</option>
+                    <option value="archived">Archived</option>
+                </select>
+            </div>
+
+            {/* Category Filter */}
+            <div className="relative">
+                <Tag className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
+                <select
+                    value={categoryFilter}
+                    onChange={(e) => onCategoryFilterChange(e.target.value)}
+                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
+                >
+                    <option value="all">All Categories</option>
+                    {categories.map((category) => (
+                        <option key={category} value={category}>
+                            {category}
+                        </option>
+                    ))}
+                </select>
+            </div>
+        </div>
+    );
+}
+