feat: allow some white labeling the side footer

gui/src/components/schema-sidebar.tsx

@@ -4,9 +4,11 @@ import SchemaList from "./schema-sidebar-list";
 import ListButtonItem from "./list-button-item";
 import { Separator } from "./ui/separator";
 import { openTab } from "@gui/messages/open-tab";
+import { useConfig } from "@gui/contexts/config-provider";
 
 export default function SchemaView() {
   const [search, setSearch] = useState("");
+  const { sideBarFooterComponent } = useConfig();
 
   const onNewTable = useCallback(() => {
     openTab({
@@ -46,31 +48,17 @@ export default function SchemaView() {
         </div>
 
         <Separator />
-        <div className="text-sm p-4">
-          <strong>LibStudio Studio</strong> is open-source GUI for serverless
-          database. We are new and need your feedback
-          <ul className="list-disc ml-6 mt-2">
-            <li className="mb-1">
-              <a
-                className="text-blue-700 underline dark:text-blue-400"
-                href={"https://github.com/invisal/libsql-studio/issues"}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Request New Features
-              </a>
-            </li>
-            <li>
-              <a
-                className="text-blue-700 underline dark:text-blue-400"
-                href={"https://github.com/invisal/libsql-studio/issues"}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Report Bugs
-              </a>
-            </li>
-          </ul>
+        {sideBarFooterComponent}
+        <div className="p-2 px-3 text-xs">
+          Powered by{" "}
+          <a
+            href="https://libsqlstudio.com"
+            target="_blank"
+            rel="noreferrer"
+            className="text-blue-700 underline"
+          >
+            LibSQL Studio
+          </a>
         </div>
       </div>
     </div>

gui/src/contexts/config-provider.tsx

@@ -1,10 +1,11 @@
-import type { PropsWithChildren } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 import { createContext, useContext, useMemo } from "react";
 
 interface ConfigContextProps {
   color: string;
   name: string;
   onBack: () => void;
+  sideBarFooterComponent?: ReactElement;
 }
 
 const ConfigContext = createContext<ConfigContextProps>({
@@ -24,8 +25,12 @@ export function ConfigProvider({
   color,
   name,
   onBack,
+  sideBarFooterComponent,
 }: PropsWithChildren<ConfigContextProps>) {
-  const memo = useMemo(() => ({ color, name, onBack }), [name, color, onBack]);
+  const memo = useMemo(
+    () => ({ color, name, onBack, sideBarFooterComponent }),
+    [name, color, onBack, sideBarFooterComponent]
+  );
 
   return (
     <ConfigContext.Provider value={memo}>{children}</ConfigContext.Provider>

gui/src/studio.tsx

@@ -6,6 +6,7 @@ import { DriverProvider } from "./contexts/driver-provider";
 import ThemeProvider from "./contexts/theme-provider";
 import type { BaseDriver } from "./drivers/base-driver";
 import { CollaborationDriver } from "./drivers/collaboration-driver";
+import { ReactElement } from "react";
 
 interface StudioProps {
   driver: BaseDriver;
@@ -14,6 +15,8 @@ interface StudioProps {
   color: string;
   defaultTheme?: "dark" | "light";
   onBack: () => void;
+
+  sideBarFooterComponent?: ReactElement;
 }
 
 export function Studio({
@@ -22,12 +25,18 @@ export function Studio({
   collaboration,
   name,
   color,
+  sideBarFooterComponent,
   onBack,
 }: Readonly<StudioProps>) {
   return (
     <ThemeProvider defaultTheme={defaultTheme ?? "light"}>
       <DriverProvider driver={driver} collaborationDriver={collaboration}>
-        <ConfigProvider name={name} color={color} onBack={onBack}>
+        <ConfigProvider
+          name={name}
+          color={color}
+          onBack={onBack}
+          sideBarFooterComponent={sideBarFooterComponent}
+        >
           <MainScreen />
         </ConfigProvider>
       </DriverProvider>

studio/src/app/client/[[...driver]]/page-client.tsx

@@ -1,17 +1,16 @@
 "use client";
 import TursoDriver from "@studio/drivers/turso-driver";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import {
   SavedConnectionItemConfigConfig,
   SupportedDriver,
 } from "../../connect/saved-connection-storage";
 import RqliteDriver from "@studio/drivers/rqlite-driver";
 import ValtownDriver from "@studio/drivers/valtown-driver";
-import { Studio } from "@libsqlstudio/gui";
-import { useRouter } from "next/navigation";
+
+import MyStudio from "@studio/components/my-studio";
 
 export default function ClientPageBody() {
-  const router = useRouter();
   const driver = useMemo(() => {
     const config: SavedConnectionItemConfigConfig & {
       driver: SupportedDriver;
@@ -25,11 +24,5 @@ export default function ClientPageBody() {
     return new TursoDriver(config.url, config.token as string, true);
   }, []);
 
-  const goBack = useCallback(() => {
-    router.push("/connect");
-  }, [router]);
-
-  return (
-    <Studio driver={driver} name="Quick Connect" color="blue" onBack={goBack} />
-  );
+  return <MyStudio driver={driver} name="Quick Connect" color="blue" />;
 }

studio/src/app/client/layout.tsx

@@ -0,0 +1,10 @@
+import "@libsqlstudio/gui/css";
+import { Fragment } from "react";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Fragment>{children}</Fragment>;
+}

studio/src/app/client/r/page-client.tsx

@@ -1,12 +1,10 @@
 "use client";
-
 import { SavedConnectionItem } from "@studio/app/connect/saved-connection-storage";
-import { useTheme } from "@studio/context/theme-provider";
 import CollaborationDriver from "@studio/drivers/collaboration-driver";
 import RemoteDriver from "@studio/drivers/remote-driver";
-import { Studio } from "@libsqlstudio/gui";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import MyStudio from "@studio/components/my-studio";
 
 export default function ClientPageBody({
   token,
@@ -15,9 +13,7 @@ export default function ClientPageBody({
   token: string;
   config: SavedConnectionItem;
 }>) {
-  const { theme } = useTheme();
   const params = useSearchParams();
-  const router = useRouter();
 
   const { driver, collaborator } = useMemo(() => {
     const databaseId = params.get("p");
@@ -29,22 +25,16 @@ export default function ClientPageBody({
     };
   }, [params, token]);
 
-  const goBack = useCallback(() => {
-    router.push("/connect");
-  }, [router]);
-
   if (!driver) {
     return <div>Something wrong</div>;
   }
 
   return (
-    <Studio
-      defaultTheme={theme}
+    <MyStudio
       driver={driver}
       name={config.name}
       color={config.label ?? "blue"}
-      collaboration={collaborator}
-      onBack={goBack}
+      collabarator={collaborator}
     />
   );
 }

studio/src/app/client/s/[[...driver]]/page-client.tsx

@@ -1,20 +1,13 @@
 "use client";
-
 import { SavedConnectionLocalStorage } from "@studio/app/connect/saved-connection-storage";
 import RqliteDriver from "@studio/drivers/rqlite-driver";
 import TursoDriver from "@studio/drivers/turso-driver";
 import ValtownDriver from "@studio/drivers/valtown-driver";
-import { Studio } from "@libsqlstudio/gui";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useMemo } from "react";
-
-// TODO: might have a way to include this in the Studio component
-import "@libsqlstudio/gui/css";
-import { useTheme } from "@studio/context/theme-provider";
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import MyStudio from "@studio/components/my-studio";
 
 export default function ClientPageBody() {
-  const { theme } = useTheme();
-  const router = useRouter();
   const params = useSearchParams();
   const conn = useMemo(() => {
     const connectionParams = params.get("p");
@@ -39,21 +32,11 @@ export default function ClientPageBody() {
     return new TursoDriver(conn.config.url, conn.config.token, true);
   }, [conn]);
 
-  const goBack = useCallback(() => {
-    router.push("/connect");
-  }, [router]);
-
   if (!driver || !conn) {
     return <div>Something wrong</div>;
   }
 
   return (
-    <Studio
-      driver={driver}
-      name={conn.name}
-      color={conn.label ?? "blue"}
-      defaultTheme={theme}
-      onBack={goBack}
-    />
+    <MyStudio driver={driver} name={conn.name} color={conn.label ?? "blue"} />
   );
 }

studio/src/components/my-studio.tsx

@@ -0,0 +1,68 @@
+import { BaseDriver, CollaborationDriver } from "@libsqlstudio/gui/driver";
+import { Studio } from "@libsqlstudio/gui";
+import { useTheme } from "@studio/context/theme-provider";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo } from "react";
+
+interface MyStudioProps {
+  name: string;
+  color: string;
+  driver: BaseDriver;
+  collabarator?: CollaborationDriver;
+}
+
+export default function MyStudio({
+  name,
+  color,
+  driver,
+  collabarator,
+}: MyStudioProps) {
+  const router = useRouter();
+  const { theme } = useTheme();
+
+  const goBack = useCallback(() => {
+    router.push("/connect");
+  }, [router]);
+
+  const sideBanner = useMemo(() => {
+    return (
+      <div className="text-sm p-3 px-4">
+        <strong>LibStudio Studio</strong> is open-source database GUI.
+        <ul className="list-disc ml-6 mt-2">
+          <li className="mb-1">
+            <a
+              className="text-blue-700 underline dark:text-blue-400"
+              href={"https://github.com/invisal/libsql-studio/issues"}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Request New Features
+            </a>
+          </li>
+          <li>
+            <a
+              className="text-blue-700 underline dark:text-blue-400"
+              href={"https://github.com/invisal/libsql-studio/issues"}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Report Bugs
+            </a>
+          </li>
+        </ul>
+      </div>
+    );
+  }, []);
+
+  return (
+    <Studio
+      driver={driver}
+      name={name}
+      color={color ?? "blue"}
+      defaultTheme={theme}
+      onBack={goBack}
+      collaboration={collabarator}
+      sideBarFooterComponent={sideBanner}
+    />
+  );
+}