@alpaca-editor/core 1.0.3898 → 1.0.3900

package/src/splash-screen/SplashScreen.tsx

@@ -10,6 +10,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
 import { Spinner } from "../editor/ui/Spinner";
 import { ItemDescriptor } from "../editor/pageModel";
+import { Card } from "../components/ui/card";
 
 export function SplashScreen() {
   const savedHistory =
@@ -76,38 +77,53 @@ export function SplashScreen() {
   const tabs: Tab[] = [
     {
       content: (
-        <div className="flex flex-1 gap-4 text-sm">
-          <div className="relative w-2/3">
-            <ScrollingContentTree
-              selectedItemId={selectedPage?.id}
-              onSelectionChange={(selection) => {
-                const selectedItem = selection[0];
-                if (selectedItem) {
-                  loadItem(selectedItem);
-                }
-              }}
-            />
+        <div className="flex flex-1 flex-col gap-4 text-sm md:flex-row">
+          <div className="flex-1">
+            <Card
+              icon={<i className="pi pi-sitemap text-sm"></i>}
+              title="Browse Content"
+              description="Navigate through your content structure"
+              noPadding
+            >
+              <div className="relative h-full">
+                <ScrollingContentTree
+                  selectedItemId={selectedPage?.id}
+                  onSelectionChange={(selection) => {
+                    const selectedItem = selection[0];
+                    if (selectedItem) {
+                      loadItem(selectedItem);
+                    }
+                  }}
+                />
+              </div>
+            </Card>
           </div>
-          <div className="flex w-1/3 flex-col border-l pl-6">
-            <div className="mb-3 font-bold">Recent Pages</div>
-            <div className="relative flex-1">
-              <ul className="absolute inset-0 overflow-auto">
-                {history?.map((page, index) => (
-                  <li
-                    key={index}
-                    onMouseOver={() => setSelectedPage(page)}
-                    onClick={() => loadItem(page)}
-                    className="flex cursor-pointer items-center gap-2 p-1 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>
+          <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
+            >
+              <div className="relative h-full">
+                <ul className="absolute inset-0 overflow-auto p-6 pt-0">
+                  {history?.map((page, index) => (
+                    <li
+                      key={index}
+                      onMouseOver={() => setSelectedPage(page)}
+                      onClick={() => loadItem(page)}
+                      className="flex cursor-pointer items-center gap-2 rounded p-2 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>
           </div>
         </div>
       ),
@@ -128,7 +144,7 @@ export function SplashScreen() {
 
   return (
     <div className="flex h-full items-center justify-center bg-gray-100">
-      <div className="relative h-3/4 w-2/3 space-y-8 rounded-lg bg-white p-6 p-8 shadow-lg">
+      <div className="relative h-full w-full space-y-8 rounded-lg bg-white p-4 shadow-lg md:h-3/4 md:w-2/3 md:p-8">
         <div className="flex h-full flex-col">
           <div className="flex flex-1 flex-col">
             <SimpleTabs
@@ -147,7 +163,7 @@ export function SplashScreen() {
           </div>
         </div>
 
-        <div className="absolute top-0 right-0 p-2">
+        <div className="absolute top-0 right-0 hidden p-2 md:block">
           <SimpleIconButton
             icon="pi pi-times"
             onClick={() =>