@alpaca-editor/core 1.0.3908 → 1.0.3912

package/src/splash-screen/OpenPage.tsx

@@ -9,6 +9,7 @@ import { ItemDescriptor } from "../editor/pageModel";
 import { Card } from "../components/ui/card";
 import { Logo, MagicEditIcon } from "../editor/ui/Icons";
 import { ActionButton } from "../components/ActionButton";
+import { RecentPages } from "./RecentPages";
 
 export function OpenPage() {
   const savedHistory =
@@ -22,17 +23,8 @@ export function OpenPage() {
     ? JSON.parse(savedHistory)
     : [];
 
-  const [history, setHistory] = useState<HistoryEntry[]>();
   const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const fetchItems = async () => {
-      const pages = await editContext?.itemsRepository.getItems(recentPages);
-      setHistory(pages);
-    };
-    fetchItems();
-  }, [editContext?.itemsRepository]);
-
   useEffect(() => {
     if (recentPages.length > 0 && recentPages[0])
       setSelectedPage(recentPages[0]);
@@ -106,32 +98,7 @@ export function OpenPage() {
             </Card>
           </div>
           <div className="flex-1 md:pl-4">
-            <Card
-              icon={<i className="pi pi-history text-sm"></i>}
-              title="Recent Pages"
-              description="Quick access to your recently viewed pages"
-              noPadding
-              className="h-full"
-            >
-              <div className="relative h-full">
-                <ul className="absolute inset-0 overflow-auto p-4 pt-0 md:p-6">
-                  {history?.map((page, index) => (
-                    <li
-                      key={index}
-                      onMouseOver={() => setSelectedPage(page)}
-                      onClick={() => loadItem(page)}
-                      className="flex cursor-pointer items-center gap-2 rounded p-1.5 text-xs hover:bg-gray-100"
-                    >
-                      {page.icon && (
-                        <img src={page.icon} width="16" height="16" />
-                      )}{" "}
-                      {page.name}{" "}
-                      <span className="text-gray-500">({page.language})</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </Card>
+            <RecentPages />
           </div>
         </div>
       </div>

package/src/splash-screen/RecentPages.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { HistoryEntry } from "../types";
+import { useEditContext } from "../editor/client/editContext";
+import { ItemDescriptor, FullItem } from "../editor/pageModel";
+import { Card } from "../components/ui/card";
+
+export function RecentPages() {
+  const savedHistory =
+    typeof window !== "undefined"
+      ? localStorage.getItem("editor.browseHistory")
+      : null;
+
+  const editContext = useEditContext();
+  const recentPages: HistoryEntry[] = savedHistory
+    ? JSON.parse(savedHistory)
+    : [];
+
+  const [history, setHistory] = useState<FullItem[]>();
+  const [selectedPage, setSelectedPage] = useState<HistoryEntry | null>(null);
+
+  useEffect(() => {
+    const fetchItems = async () => {
+      const pages = await editContext?.itemsRepository.getItems(recentPages);
+      setHistory(pages);
+    };
+    fetchItems();
+  }, [editContext?.itemsRepository]);
+
+  const handlePageSelect = (page: HistoryEntry) => {
+    setSelectedPage(page);
+  };
+
+  const handlePageLoad = (item: ItemDescriptor) => {
+    if (editContext) {
+      editContext
+        .loadItem({
+          id: item.id,
+          language: item.language ?? "en",
+          version: item.version,
+        })
+        .then(() => {
+          // Switch to the appropriate editor view after loading
+          editContext.switchView(
+            editContext.contentEditorItem?.hasLayout
+              ? "page-editor"
+              : "content-editor",
+          );
+        });
+    }
+  };
+
+  const formatDate = (date?: Date | string) => {
+    if (!date) return "—";
+    const d = new Date(date);
+    return d.toLocaleDateString();
+  };
+
+  return (
+    <Card
+      icon={<i className="pi pi-history text-sm"></i>}
+      title="Recent Pages"
+      description="Quick access to your recently viewed pages"
+      className="flex h-full flex-col"
+    >
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        <div className="absolute inset-0 overflow-auto">
+          <table className="w-full text-xs">
+            <tbody>
+              {history?.map((page, index) => (
+                <tr
+                  key={page.id || index}
+                  onMouseOver={() => handlePageSelect(page)}
+                  onClick={() => handlePageLoad(page)}
+                  className="cursor-pointer border-b border-gray-100 hover:bg-gray-50"
+                >
+                  <td className="py-3">
+                    <div className="flex items-center gap-2">
+                      {/* {page.icon && (
+                        <img
+                          src={page.icon}
+                          width="16"
+                          height="16"
+                          alt=""
+                          className="flex-shrink-0"
+                        />
+                      )} */}
+                      <div className="min-w-0 flex-1">
+                        <div className="font-medium text-gray-900">
+                          {page.name}
+                        </div>
+                        <div className="text-xs break-all text-gray-500">
+                          {page.path}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="hidden p-3 text-gray-700 md:table-cell">
+                    <div className="truncate">{page.templateName || "—"}</div>
+                  </td>
+                  <td className="p-3">
+                    <span className="inline-flex items-center truncate rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
+                      {page.workflowState || "Draft"}
+                    </span>
+                  </td>
+                  <td className="hidden p-3 text-gray-700 md:table-cell">
+                    {page.versions || 0}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {(!history || history.length === 0) && (
+            <div className="p-6 text-center text-sm text-gray-500">
+              No recent pages found
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/splash-screen/SplashScreen.tsx

@@ -1,9 +1,11 @@
 import { Card } from "../components/ui/card";
-import { Logo } from "../editor/ui/Icons";
+import { Logo, MagicEditIcon } from "../editor/ui/Icons";
 import { useEditContext } from "../editor/client/editContext";
 import { useEffect, useState } from "react";
 import { getWizards } from "../page-wizard/service";
 import { Wizard } from "../page-wizard/PageWizard";
+import { ActionButton } from "../components/ActionButton";
+import { RecentPages } from "./RecentPages";
 
 export function SplashScreen() {
   const editContext = useEditContext();
@@ -57,57 +59,72 @@ export function SplashScreen() {
     });
   };
 
-  return (
-    <div className="flex h-full w-full items-center justify-center bg-gray-100">
-      <Card
-        title="Welcome to the Editor Without A Name"
-        description="The easiest way to create and manage your content"
-        icon={<Logo />}
-      >
-        <div className="flex flex-col gap-4 text-sm text-gray-500">
-          Ewan is an editor for your favorite content management system. It
-          allows you to create and manage your content in a simple and intuitive
-          way.
-          <div className="flex flex-col gap-4">
-            {/* Show demo wizard button if demoId is present and wizard is available */}
-            {demoWizard && (
-              <CtaButton onClick={launchDemoWizard}>
-                Launch Page Wizard
-              </CtaButton>
-            )}
-            {!demoWizard && (
-              <>
-                <CtaButton onClick={() => editContext?.switchView("new-page")}>
-                  Create New Page
-                </CtaButton>
-              </>
-            )}
-            <CtaButton onClick={() => editContext?.switchView("open-page")}>
-              Open Existing Page
-            </CtaButton>
-            {/* <CtaButton onClick={() => editContext?.switchView("new-page")}>
-              Take a Tour
-            </CtaButton> */}
+  if (demoWizard) {
+    return (
+      <div className="relative flex h-full w-full bg-gray-100 md:items-center md:justify-center">
+        <div className="z-10 flex flex-1 flex-col items-stretch gap-4 p-4 md:max-w-screen-xl md:flex-row">
+          <div className="flex-1 flex-col gap-7 rounded-lg bg-white p-6">
+            <div className="flex flex-col gap-4 md:flex-row">
+              <div className="flex flex-col gap-2">
+                <h1 className="text-normal flex items-center gap-2 font-bold">
+                  <Logo className="h-5" /> Create content like magic
+                </h1>
+                <h2 className="mb-2 text-xs text-gray-500">
+                  Stunning business pages in no time. Just describe your idea
+                  and let the AI-wizard do the magic.
+                </h2>
+              </div>
+
+              <ActionButton onClick={launchDemoWizard}>
+                Launch wizard <MagicEditIcon />
+              </ActionButton>
+            </div>
+            <div className="bg-wizard-demo mt-3 aspect-[1.75] w-full rounded-lg"></div>
+          </div>
+          <div className="flex-1">
+            <RecentPages />
           </div>
         </div>
-      </Card>
-    </div>
-  );
-}
-
-function CtaButton({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      className="border-theme-secondary hover:bg-theme-secondary-light flex cursor-pointer flex-col gap-4 rounded-lg border p-8 text-2xl"
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
+        <div className="bg-wizard absolute inset-0" />
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex h-full w-full gap-2 bg-gray-100 md:items-center md:justify-center">
+        <div className="z-10 flex flex-1 flex-col items-stretch gap-4 p-4 md:min-h-[40vh] md:max-w-screen-xl md:flex-row">
+          <Card
+            title="Welcome to the Editor Without A Name"
+            description="The easiest way to create and manage your content"
+            icon={<Logo />}
+            className="flex-1"
+          >
+            <div className="flex flex-col gap-4 text-sm text-gray-500">
+              Ewan is an editor for your favorite content management system. It
+              allows you to create and manage your content in a simple and
+              intuitive way.
+              <div className="flex flex-col gap-4">
+                <ActionButton
+                  onClick={() => editContext?.switchView("new-page")}
+                >
+                  Create new page
+                </ActionButton>
+                <ActionButton
+                  onClick={() => editContext?.switchView("open-page")}
+                >
+                  Open existing page
+                </ActionButton>
+                <ActionButton onClick={() => editContext?.startTour()}>
+                  Take tour <MagicEditIcon />
+                </ActionButton>
+              </div>
+            </div>
+          </Card>
+          <div className="flex-1">
+            <RecentPages />
+          </div>
+        </div>
+        <div className="bg-wizard absolute inset-0" />
+      </div>
+    );
+  }
 }