yes

src/app/admin/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 interface Post {
   slug: string;
@@ -46,6 +47,11 @@ export default function AdminPage() {
   });
   const [newFolderName, setNewFolderName] = useState('');
   const [isDragging, setIsDragging] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; item: Node | null }>({
+    show: false,
+    item: null,
+  });
+  const [showManageContent, setShowManageContent] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -220,12 +226,56 @@ export default function AdminPage() {
     loadContent();
   }, [currentPath]);
 
-  if (!isAuthenticated) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
-          <h2 className="text-3xl font-bold text-center">Admin Login</h2>
-          <form onSubmit={handleLogin} className="space-y-6">
+  const handleDelete = async (node: Node) => {
+    setDeleteConfirm({ show: true, item: node });
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteConfirm.item) return;
+
+    try {
+      const itemPath = currentPath.join('/');
+      const itemName = deleteConfirm.item.type === 'folder' ? deleteConfirm.item.name : deleteConfirm.item.slug;
+      
+      console.log('Deleting item:', {
+        path: itemPath,
+        name: itemName,
+        type: deleteConfirm.item.type
+      });
+
+      const response = await fetch('/api/admin/delete', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: itemPath,
+          name: itemName,
+          type: deleteConfirm.item.type,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to delete item');
+      }
+
+      console.log('Delete successful:', data);
+      await loadContent();
+      setDeleteConfirm({ show: false, item: null });
+    } catch (error) {
+      console.error('Error deleting item:', error);
+      alert(error instanceof Error ? error.message : 'Error deleting item');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-8">
+      {!isAuthenticated ? (
+        <div className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
+          <h1 className="text-2xl font-bold mb-6">Admin Login</h1>
+          <form onSubmit={handleLogin} className="space-y-4">
             <div>
               <label htmlFor="username" className="block text-sm font-medium text-gray-700">
                 Username
@@ -235,7 +285,7 @@ export default function AdminPage() {
                 id="username"
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                 required
               />
             </div>
@@ -248,190 +298,230 @@ export default function AdminPage() {
                 id="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                 required
               />
             </div>
             <button
               type="submit"
-              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
+              className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             >
               Login
             </button>
           </form>
         </div>
-      </div>
-    );
-  }
+      ) : (
+        <div className="max-w-6xl mx-auto">
+          <div className="flex justify-between items-center mb-8">
+            <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+            <button
+              onClick={handleLogout}
+              className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+            >
+              Logout
+            </button>
+          </div>
 
-  return (
-    <div className="min-h-screen p-8 bg-gray-50">
-      <div className="max-w-4xl mx-auto">
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-3xl font-bold">Admin Dashboard</h1>
-          <button
-            onClick={handleLogout}
-            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
-          >
-            Logout
-          </button>
-        </div>
-
-        {/* Breadcrumb Navigation */}
-        <nav className="mb-6 text-sm text-gray-600 flex gap-2 items-center">
-          {breadcrumbs.map((bc, idx) => (
-            <span key={bc.path.join('/') + idx}>
-              {idx > 0 && <span className="mx-1">/</span>}
+          {/* Breadcrumbs with back button */}
+          <div className="flex items-center gap-4 mb-6">
+            {currentPath.length > 0 && (
               <button
-                className="hover:underline"
-                onClick={() => setCurrentPath(bc.path)}
-                disabled={idx === breadcrumbs.length - 1}
+                onClick={() => setCurrentPath(currentPath.slice(0, -1))}
+                className="flex items-center gap-2 px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition-colors"
+                title="Go back one level"
               >
-                {bc.name}
-              </button>
-            </span>
-          ))}
-        </nav>
-
-        {/* Create Folder Form */}
-        <div className="bg-white rounded-lg shadow p-6 mb-8">
-          <h2 className="text-2xl font-bold mb-4">Create New Folder</h2>
-          <form onSubmit={handleCreateFolder} className="flex gap-4">
-            <input
-              type="text"
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              placeholder="Folder name"
-              className="flex-1 rounded-md border border-gray-300 px-3 py-2"
-              required
-            />
-            <button
-              type="submit"
-              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
-            >
-              Create Folder
-            </button>
-          </form>
-        </div>
-
-        {/* Drag and Drop Zone */}
-        <div
-          className={`mb-8 p-8 border-2 border-dashed rounded-lg text-center ${
-            isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
-          }`}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-        >
-          <div className="text-gray-600">
-            <p className="text-lg font-medium">Drag and drop Markdown files here</p>
-            <p className="text-sm">Files will be uploaded to: {currentPath.join('/') || 'root'}</p>
-          </div>
-        </div>
-
-        {/* Create Post Form */}
-        <div className="bg-white rounded-lg shadow p-6 mb-8">
-          <h2 className="text-2xl font-bold mb-4">Create New Post</h2>
-          <form onSubmit={handleCreatePost} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Title</label>
-              <input
-                type="text"
-                value={newPost.title}
-                onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
-                required
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Date</label>
-              <input
-                type="date"
-                value={newPost.date}
-                onChange={(e) => setNewPost({ ...newPost, date: e.target.value })}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
-                required
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Tags (comma-separated)</label>
-              <input
-                type="text"
-                value={newPost.tags}
-                onChange={(e) => setNewPost({ ...newPost, tags: e.target.value })}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
-                placeholder="tag1, tag2, tag3"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Summary</label>
-              <textarea
-                value={newPost.summary}
-                onChange={(e) => setNewPost({ ...newPost, summary: e.target.value })}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
-                rows={2}
-                required
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Content (Markdown)</label>
-              <textarea
-                value={newPost.content}
-                onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 font-mono"
-                rows={10}
-                required
-              />
-            </div>
-            <button
-              type="submit"
-              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
-            >
-              Create Post
-            </button>
-          </form>
-        </div>
-
-        {/* Content List */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold mb-4">Content</h2>
-          <div className="space-y-4">
-            {/* Folders */}
-            {currentNodes
-              .filter((node): node is Folder => node.type === 'folder')
-              .map((folder) => (
-                <div
-                  key={folder.path}
-                  className="border rounded-lg p-4 cursor-pointer hover:bg-gray-50"
-                  onClick={() => setCurrentPath([...currentPath, folder.name])}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
                 >
-                  <div className="flex items-center gap-2">
-                    <span className="text-2xl">📁</span>
-                    <span className="font-semibold text-lg">{folder.name}</span>
-                  </div>
+                  <path
+                    fillRule="evenodd"
+                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                Back
+              </button>
+            )}
+            <div className="flex items-center gap-2">
+              {breadcrumbs.map((crumb, index) => (
+                <div key={crumb.path.join('/')} className="flex items-center">
+                  {index > 0 && <span className="mx-2 text-gray-500">/</span>}
+                  <button
+                    onClick={() => setCurrentPath(crumb.path)}
+                    className={`px-2 py-1 rounded ${
+                      index === breadcrumbs.length - 1
+                        ? 'bg-blue-100 text-blue-800'
+                        : 'hover:bg-gray-200'
+                    }`}
+                  >
+                    {crumb.name}
+                  </button>
                 </div>
               ))}
+            </div>
+          </div>
 
-            {/* Posts */}
-            {currentNodes
-              .filter((node): node is Post => node.type === 'post')
-              .map((post) => (
-                <div key={post.slug} className="border rounded-lg p-4">
-                  <h3 className="text-xl font-semibold">{post.title}</h3>
-                  <p className="text-gray-600">{post.date}</p>
-                  <p className="text-sm text-gray-500">{post.summary}</p>
-                  <div className="mt-2 flex gap-2">
-                    {(post.tags || []).map((tag) => (
-                      <span key={tag} className="bg-gray-100 px-2 py-1 rounded text-sm">
-                        {tag}
-                      </span>
-                    ))}
+          {/* Create Folder Form */}
+          <div className="bg-white rounded-lg shadow p-6 mb-8">
+            <h2 className="text-2xl font-bold mb-4">Create New Folder</h2>
+            <form onSubmit={handleCreateFolder} className="flex gap-4">
+              <input
+                type="text"
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                placeholder="Folder name"
+                className="flex-1 rounded-md border border-gray-300 px-3 py-2"
+                required
+              />
+              <button
+                type="submit"
+                className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+              >
+                Create Folder
+              </button>
+            </form>
+          </div>
+
+          {/* Drag and Drop Zone */}
+          <div
+            className={`mb-8 p-8 border-2 border-dashed rounded-lg text-center ${
+              isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <div className="text-gray-600">
+              <p className="text-lg font-medium">Drag and drop Markdown files here</p>
+              <p className="text-sm">Files will be uploaded to: {currentPath.join('/') || 'root'}</p>
+            </div>
+          </div>
+
+          {/* Create Post Form */}
+          <div className="bg-white rounded-lg shadow p-6 mb-8">
+            <h2 className="text-2xl font-bold mb-4">Create New Post</h2>
+            <form onSubmit={handleCreatePost} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Title</label>
+                <input
+                  type="text"
+                  value={newPost.title}
+                  onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Date</label>
+                <input
+                  type="date"
+                  value={newPost.date}
+                  onChange={(e) => setNewPost({ ...newPost, date: e.target.value })}
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Tags (comma-separated)</label>
+                <input
+                  type="text"
+                  value={newPost.tags}
+                  onChange={(e) => setNewPost({ ...newPost, tags: e.target.value })}
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                  placeholder="tag1, tag2, tag3"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Summary</label>
+                <textarea
+                  value={newPost.summary}
+                  onChange={(e) => setNewPost({ ...newPost, summary: e.target.value })}
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                  rows={2}
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">Content (Markdown)</label>
+                <textarea
+                  value={newPost.content}
+                  onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 font-mono"
+                  rows={10}
+                  required
+                />
+              </div>
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
+              >
+                Create Post
+              </button>
+            </form>
+          </div>
+
+          {/* Content List */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-2xl font-bold mb-4">Content</h2>
+            <div className="space-y-4">
+              {/* Folders */}
+              {currentNodes
+                .filter((node): node is Folder => node.type === 'folder')
+                .map((folder) => (
+                  <div
+                    key={folder.path}
+                    className="border rounded-lg p-4 cursor-pointer hover:bg-gray-50"
+                    onClick={() => setCurrentPath([...currentPath, folder.name])}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-2xl">📁</span>
+                      <span className="font-semibold text-lg">{folder.name}</span>
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
+
+              {/* Posts */}
+              {currentNodes
+                .filter((node): node is Post => node.type === 'post')
+                .map((post) => (
+                  <div key={post.slug} className="border rounded-lg p-4">
+                    <h3 className="text-xl font-semibold">{post.title}</h3>
+                    <p className="text-gray-600">{post.date}</p>
+                    <p className="text-sm text-gray-500">{post.summary}</p>
+                    <div className="mt-2 flex gap-2">
+                      {(post.tags || []).map((tag) => (
+                        <span key={tag} className="bg-gray-100 px-2 py-1 rounded text-sm">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+
+          <div className="w-full mt-12">
+            <button
+              className="w-full flex justify-center items-center bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer text-3xl focus:outline-none"
+              onClick={() => setShowManageContent((v) => !v)}
+              aria-label={showManageContent ? 'Hide Manage Content' : 'Show Manage Content'}
+            >
+              <span>{showManageContent ? '▲' : '▼'}</span>
+            </button>
+            {showManageContent && (
+              <div className="mt-4 bg-white p-6 rounded-lg shadow text-center">
+                <p className="text-gray-600 mb-2">
+                  Delete posts and folders, manage your content structure
+                </p>
+                <a href="/admin/manage" className="text-blue-600 hover:underline">Go to Content Manager</a>
+              </div>
+            )}
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }