add new resource card

package.json

@@ -21,7 +21,8 @@
     "format:fix": "prettier --write .",
     "lint": "next lint",
     "lint:fix": "next lint --fix .",
-    "dialect": "node build-dialect.js"
+    "dialect": "node build-dialect.js",
+    "remove-branch": "npx git-removed-branches --prune -f"
   },
   "overrides": {
     "@libsql/client": "^0.5.3"
@@ -98,6 +99,7 @@
     "react-resizable-panels": "^2.1.7",
     "sonner": "^1.4.41",
     "sql-formatter": "^15.3.2",
+    "swr": "^2.3.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "use-immer": "^0.11.0",

src/app/(theme)/w/[workspaceId]/[baseId]/page.tsx

@@ -1,6 +1,5 @@
 import ClientOnly from "@/components/client-only";
 import OuterbaseSourcePageClient from "./page-client";
-import ThemeLayout from "@/app/(theme)/theme_layout";
 
 interface OuterbaseSourcePageProps {
   params: Promise<{
@@ -15,13 +14,11 @@ export default async function OuterbaseSourcePage(
   const params = await props.params;
 
   return (
-    <ThemeLayout>
-      <ClientOnly>
-        <OuterbaseSourcePageClient
-          baseId={params.baseId}
-          workspaceId={params.workspaceId}
-        />
-      </ClientOnly>
-    </ThemeLayout>
+    <ClientOnly>
+      <OuterbaseSourcePageClient
+        baseId={params.baseId}
+        workspaceId={params.workspaceId}
+      />
+    </ClientOnly>
   );
 }

src/app/(theme)/w/[workspaceId]/board/[boardId]/page.tsx

@@ -1,5 +1,4 @@
 import ClientOnly from "@/components/client-only";
-import ThemeLayout from "../../../../theme_layout";
 import BoardPageClient from "./page-client";
 
 interface BoardPageProps {
@@ -10,13 +9,11 @@ export default async function BoardPage(props: BoardPageProps) {
   const params = await props.params;
 
   return (
-    <ThemeLayout>
-      <ClientOnly>
-        <BoardPageClient
-          workspaceId={params.workspaceId}
-          boardId={params.boardId}
-        />
-      </ClientOnly>
-    </ThemeLayout>
+    <ClientOnly>
+      <BoardPageClient
+        workspaceId={params.workspaceId}
+        boardId={params.boardId}
+      />
+    </ClientOnly>
   );
 }

src/app/(theme)/w/[workspaceId]/layout.tsx

@@ -1,9 +1,14 @@
 import { OuterbaseSessionProvider } from "@/outerbase-cloud/session-provider";
+import ThemeLayout from "../../theme_layout";
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <OuterbaseSessionProvider>{children}</OuterbaseSessionProvider>;
+  return (
+    <ThemeLayout>
+      <OuterbaseSessionProvider>{children}</OuterbaseSessionProvider>
+    </ThemeLayout>
+  );
 }

src/app/(theme)/w/[workspaceId]/page-client.tsx

@@ -1,42 +1,42 @@
 "use client";
 
+import ResourceCard from "@/components/resource-card";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
   getOuterbaseDashboardList,
   getOuterbaseWorkspace,
 } from "@/outerbase-cloud/api";
-import {
-  OuterbaseAPIBase,
-  OuterbaseAPIDashboard,
-} from "@/outerbase-cloud/api-type";
+import { Database } from "@phosphor-icons/react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import useSWR from "swr";
 
 export default function WorkspaceListPageClient({
   workspaceId,
 }: {
   workspaceId: string;
 }) {
-  const [loading, setLoading] = useState(true);
-  const [bases, setBases] = useState<OuterbaseAPIBase[]>([]);
-  const [boards, setBoards] = useState<OuterbaseAPIDashboard[]>([]);
+  const { data, isLoading } = useSWR(`workspace-${workspaceId}`, () => {
+    const fetching = async () => {
+      const [workspaces, boards] = await Promise.all([
+        getOuterbaseWorkspace(),
+        getOuterbaseDashboardList(workspaceId),
+      ]);
+
+      return {
+        bases:
+          workspaces.items.find((w) => w.short_name === workspaceId)?.bases ??
+          [],
+        boards: (boards.items ?? []).filter((b) => b.base_id === null),
+      };
+    };
+
+    return fetching();
+  });
 
-  useEffect(() => {
-    Promise.all([
-      getOuterbaseWorkspace(),
-      getOuterbaseDashboardList(workspaceId),
-    ])
-      .then(([workspace, boards]) => {
-        setBases(
-          workspace.items.find((w) => w.short_name === workspaceId)?.bases ?? []
-        );
-        setBoards((boards.items ?? []).filter((b) => b.base_id === null));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [workspaceId]);
+  const boards = data?.boards ?? [];
+  const bases = data?.bases ?? [];
 
-  if (loading) {
+  if (isLoading) {
     return <div>Loading...</div>;
   }
 
@@ -58,13 +58,15 @@ export default function WorkspaceListPageClient({
       <h1>Base</h1>
       <div className="flex flex-wrap gap-4 p-4">
         {bases.map((base) => (
-          <Link
+          <ResourceCard
             key={base.id}
-            className="border p-4"
+            icon={() => <Database weight="fill" />}
             href={`/w/${workspaceId}/${base.short_name}`}
+            title={base.name}
+            subtitle={base.sources[0]?.type}
           >
-            {base.name}
-          </Link>
+            <DropdownMenuItem>Remove</DropdownMenuItem>
+          </ResourceCard>
         ))}
       </div>
     </div>

src/app/(theme)/w/[workspaceId]/page.tsx

@@ -1,5 +1,4 @@
 import ClientOnly from "@/components/client-only";
-import ThemeLayout from "../../theme_layout";
 import WorkspaceListPageClient from "./page-client";
 
 interface WorkspaceListPageProps {
@@ -10,10 +9,8 @@ export default async function WorkspaceListPage(props: WorkspaceListPageProps) {
   const params = await props.params;
 
   return (
-    <ThemeLayout>
-      <ClientOnly>
-        <WorkspaceListPageClient workspaceId={params.workspaceId} />
-      </ClientOnly>
-    </ThemeLayout>
+    <ClientOnly>
+      <WorkspaceListPageClient workspaceId={params.workspaceId} />
+    </ClientOnly>
   );
 }