add animation when remove and add resource

Author: invisal

package-lock.json

@@ -95,6 +95,7 @@
     "lodash": "^4.17.21",
     "lucia": "^3.2.0",
     "lucide-react": "^0.474.0",
+    "motion": "^12.4.3",
     "next": "15.1.4",
     "next-themes": "^0.4.4",
     "oslo": "^1.1.3",

package.json

@@ -1,7 +1,6 @@
 import { OuterbaseSessionProvider } from "@/app/(outerbase)/session-provider";
 import ClientOnly from "@/components/client-only";
 import ThemeLayout from "../(theme)/theme_layout";
-import AuthProvider from "./auth-provider";
 import { WorkspaceProvider } from "./workspace-provider";
 
 export default function OuterbaseLayout({
@@ -13,9 +12,7 @@ export default function OuterbaseLayout({
     <ThemeLayout>
       <ClientOnly>
         <OuterbaseSessionProvider>
-          <AuthProvider>
-            <WorkspaceProvider>{children}</WorkspaceProvider>
-          </AuthProvider>
+          <WorkspaceProvider>{children}</WorkspaceProvider>
         </OuterbaseSessionProvider>
       </ClientOnly>
     </ThemeLayout>

src/app/(outerbase)/layout.tsx

@@ -0,0 +1,76 @@
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import { deleteLocalDashboard } from "./hooks";
+
+export const deleteLocalBoardDialog = createDialog<{
+  boardId: string;
+  boardName: string;
+}>(({ close, boardName, boardId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const deleteClicked = useCallback(() => {
+    if (name !== boardName) return;
+
+    setLoading(true);
+
+    deleteLocalDashboard(boardId)
+      .then(() => {
+        close(undefined);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [name, boardId, close, boardName]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of board {boardName}</DialogTitle>
+        <DialogDescription>
+          All saved charts and any other contributions made to your Dashboard
+          will be deleted. This action is permanent and <strong>cannot</strong>{" "}
+          be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={boardName} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Base to confirm:"
+          placeholder="Board name"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          variant={"destructive"}
+          disabled={loading || boardName !== name}
+          onClick={deleteClicked}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+          understand, delete this board
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});

src/app/(outerbase)/local/dialog-board-delete.tsx

@@ -1,5 +1,5 @@
 import { LocalDashboardData, localDb } from "@/indexdb";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 export function useLocalDashboardList() {
   return useSWR(
@@ -34,3 +34,8 @@ export async function createLocalDashboard(boardName: string) {
   await localDb.table("board").add({ id, content: data });
   return data;
 }
+
+export async function deleteLocalDashboard(boardId: string) {
+  await localDb.table("board").delete(boardId);
+  mutate("/dashboards/local");
+}

src/app/(outerbase)/local/hooks.tsx

@@ -12,6 +12,7 @@ import NavigationLayout from "../nav-layout";
 import NewResourceButton from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
 import { createLocalBoardDialog } from "./dialog-board-create";
+import { deleteLocalBoardDialog } from "./dialog-board-delete";
 import { useLocalDashboardList } from "./hooks";
 
 export default function LocalConnectionPage() {
@@ -49,18 +50,25 @@ export default function LocalConnectionPage() {
     );
   }, [dashboardList]);
 
-  const onCreateBoardClicked = useCallback(() => {
+  const onBoardCreate = useCallback(() => {
     createLocalBoardDialog.show({}).then(() => {
-      refreshDashboard(undefined, { revalidate: true });
+      refreshDashboard();
     });
   }, [refreshDashboard]);
 
+  const onBoardRemove = useCallback((deletedResource: ResourceItemProps) => {
+    deleteLocalBoardDialog
+      .show({ boardId: deletedResource.id, boardName: deletedResource.name })
+      .then()
+      .catch();
+  }, []);
+
   return (
     <NavigationLayout>
-      <NavigationHeader title={"Local Worksapce"} />
+      <NavigationHeader />
       <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
         <div className="flex gap-2">
-          <NewResourceButton onCreateBoard={onCreateBoardClicked} />
+          <NewResourceButton onCreateBoard={onBoardCreate} />
         </div>
 
         <div className="my-4 flex gap-4">
@@ -86,7 +94,11 @@ export default function LocalConnectionPage() {
           </button>
         </div>
 
-        <ResourceItemList boards={dashboardResources} bases={baseResources} />
+        <ResourceItemList
+          boards={dashboardResources}
+          bases={baseResources}
+          onBoardRemove={onBoardRemove}
+        />
       </div>
     </NavigationLayout>
   );

src/app/(outerbase)/local/page.tsx

@@ -1,35 +1,57 @@
 import { cn } from "@/lib/utils";
 import { Cardholder, Database, Gear } from "@phosphor-icons/react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { useWorkspaces } from "./workspace-provider";
 
-interface NavigationHeaderProps {
-  title: string;
-}
-
-export default function NavigationHeader({ title }: NavigationHeaderProps) {
+export default function NavigationHeader() {
   const tabClassName =
     "p-2 border-b-2 border-background flex gap-2 items-center h-full";
   const selectedTabClassName = cn(tabClassName, "border-orange-500");
 
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { currentWorkspace } = useWorkspaces();
+  const pathname = usePathname();
+
   return (
     <div className="bg-background flex h-12 flex-col gap-1 border-b px-6">
-      <ul className="flex h-full gap-2 text-base">
-        <li className={selectedTabClassName}>
+      <nav className="flex h-full gap-2 text-base">
+        <Link
+          className={
+            pathname.endsWith(workspaceId) ? selectedTabClassName : tabClassName
+          }
+          href={`/w/${workspaceId}`}
+        >
           <Database />
           Resources
-        </li>
-        <li className={tabClassName}>
+        </Link>
+        <Link
+          className={
+            pathname.endsWith(`/${workspaceId}/settings`)
+              ? selectedTabClassName
+              : tabClassName
+          }
+          href={`/w/${workspaceId}/settings`}
+        >
           <Gear />
           Settings
-        </li>
-        <li className={tabClassName}>
+        </Link>
+        <Link
+          className={
+            pathname.endsWith(`/${workspaceId}/billing`)
+              ? selectedTabClassName
+              : tabClassName
+          }
+          href={`/w/${workspaceId}/billing`}
+        >
           <Cardholder />
           Billing
-        </li>
+        </Link>
 
-        <li className="flex flex-1 items-center justify-end font-bold">
-          {title}
-        </li>
-      </ul>
+        <div className="flex flex-1 items-center justify-end font-bold">
+          {currentWorkspace?.name ?? ""}
+        </div>
+      </nav>
     </div>
   );
 }