From 8dcd50b179534261f6bbcd6d8993d2384491d117 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Sat, 28 Sep 2024 13:14:54 -0700
Subject: [PATCH] add onboard for sqlite client

---
 .../(theme)/playground/client/page-client.tsx | 72 +++++++++++++++++++
 src/components/gui/sidebar-tab.tsx            | 36 ----------
 src/components/gui/sortable-tab.tsx           |  3 -
 3 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/src/app/(theme)/playground/client/page-client.tsx b/src/app/(theme)/playground/client/page-client.tsx
index 34bbc5a..d93e3da 100644
--- a/src/app/(theme)/playground/client/page-client.tsx
+++ b/src/app/(theme)/playground/client/page-client.tsx
@@ -16,6 +16,77 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+
+function OverlayAround({
+  x,
+  y,
+  w,
+  h,
+}: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}) {
+  return (
+    <>
+      <div
+        className="opacity-40 bg-black fixed z-30"
+        style={{ left: 0, width: x + "px", top: 0, bottom: 0 }}
+      ></div>
+      <div
+        className="opacity-40 bg-black fixed z-30"
+        style={{ left: x + w + "px", right: 0, top: 0, bottom: 0 }}
+      ></div>
+      <div
+        className="opacity-40 bg-black fixed z-30"
+        style={{ left: x + "px", top: 0, height: y, width: w }}
+      ></div>
+      <div
+        className="opacity-40 bg-black fixed z-30"
+        style={{ left: x + "px", top: y + h + "px", bottom: 0, width: w }}
+      ></div>
+    </>
+  );
+}
+
+function Onboarding() {
+  const [onboard, setOnboard] = useState(
+    () => !localStorage.getItem("sqlite-onboard-v1")
+  );
+
+  if (!onboard) return null;
+
+  return (
+    <>
+      <OverlayAround x={15} y={8} w={50} h={50} />
+      <div
+        className="fixed z-40 bg-background p-3 rounded-lg shadow-lg text-sm"
+        style={{ top: 10, left: 75 }}
+      >
+        <h2 className="font-semibold text-lg">There is more!</h2>
+        <ul className="list-disc mt-2 mb-4 mx-4">
+          <li>
+            You can <strong>open</strong> and <strong>save</strong> your SQLite
+            database here.
+          </li>
+          <li>Switch dark and light mode</li>
+          <li>And many more in the future</li>
+        </ul>
+        <Button
+          size={"sm"}
+          onClick={() => {
+            setOnboard(false);
+            localStorage.setItem("sqlite-onboard-v1", "1");
+          }}
+        >
+          Got it
+        </Button>
+      </div>
+    </>
+  );
+}
 
 export default function PlaygroundEditorBody({
   preloadDatabase,
@@ -255,6 +326,7 @@ export default function PlaygroundEditorBody({
     <>
       <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
       <ScreenDropZone onFileDrop={setHandler} />
+      <Onboarding />
       {dom}
     </>
   );
diff --git a/src/components/gui/sidebar-tab.tsx b/src/components/gui/sidebar-tab.tsx
index 2fb052e..1fca4ff 100644
--- a/src/components/gui/sidebar-tab.tsx
+++ b/src/components/gui/sidebar-tab.tsx
@@ -51,42 +51,6 @@ export default function SidebarTab({ tabs }: Readonly<SidebarTabProps>) {
   return (
     <div className={cn("flex h-full border-l-8", bgPrimary)}>
       <div className={cn("shrink-0")}>
-        {/* <div className="text-sm my-2 px-3 font-semibold flex">
-          {config.onBack && (
-            <div
-              className="flex items-center -ml-2 mr-2 cursor-pointer hover:text-blue-500"
-              onClick={config.onBack}
-            >
-              <LucideChevronLeft />
-            </div>
-          )}
-
-          <div className="flex-grow flex items-center">
-            <div className="line-clamp-1 text-ellipsis">{config.name}</div>
-          </div>
-
-          {!disableToggle && (
-            <div className="flex justify-center items-center">
-              <button
-                onClick={() => toggleTheme()}
-                className="text-xs font-normal flex gap-0.5 border rounded px-2 py-1 bg-background"
-              >
-                {theme === "dark" ? (
-                  <>
-                    <LucideMoon className={cn("w-4 h-4")} />
-                    Dark
-                  </>
-                ) : (
-                  <>
-                    <LucideSun className={cn("w-4 h-4")} />
-                    Light
-                  </>
-                )}
-              </button>
-            </div>
-          )}
-        </div> */}
-
         <div className="flex flex-col border-r h-full p-2 gap-2">
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger>
diff --git a/src/components/gui/sortable-tab.tsx b/src/components/gui/sortable-tab.tsx
index 0f71f71..f1444e6 100644
--- a/src/components/gui/sortable-tab.tsx
+++ b/src/components/gui/sortable-tab.tsx
@@ -22,7 +22,6 @@ type WindowTabItemButtonProps = ButtonProps & {
   onClose?: () => void;
   isDragging?: boolean;
   index: number;
-  tabCount: number;
 };
 
 export const WindowTabItemButton = forwardRef<
@@ -78,7 +77,6 @@ export const WindowTabItemButton = forwardRef<
 
 export function SortableTab({
   index,
-  tabCount,
   tab,
   selected,
   onSelectChange,
@@ -108,7 +106,6 @@ export function SortableTab({
       onClose={onClose}
       style={style}
       index={index}
-      tabCount={tabCount}
       isDragging={isDragging}
       {...attributes}
       {...listeners}