Show the Convex logo in embedded dashboard (#38350)

GitOrigin-RevId: f5dd8bfc1fc6c3aff0a7776daf20e69eb8460b58

Author: Nicolapps

npm-packages/dashboard-common/src/elements/Sidebar.tsx

@@ -29,19 +29,14 @@ export function Sidebar({
   items,
   collapsed,
   setCollapsed,
+  header,
 }: {
   collapsed: boolean;
   setCollapsed: (collapsed: boolean) => void;
   items: SidebarGroup[];
+  header?: ReactNode;
 }) {
-  const router = useRouter();
-
-  const path = router.pathname
-    .replace("/t/[team]/[project]/[deploymentName]", "")
-    .split("/")
-    .filter((i) => !!i);
-  const currentPage = path[0] ?? null;
-
+  const currentPage = useCurrentPage();
   const { width } = useWindowSize();
 
   return (
@@ -57,33 +52,38 @@ export function Sidebar({
         { [`min-w-[130px]`]: !collapsed },
       )}
     >
-      <div className="flex gap-1 sm:flex-col sm:divide-x-0 sm:divide-y">
-        {items.map((group) => (
-          <div key={group.key} className="flex gap-1 sm:flex-col sm:py-2">
-            {group.items.map((item) => (
-              <div className="relative h-[1.875rem]" key={item.key}>
-                <SidebarLink
-                  {...omit(item, "key")}
-                  collapsed={collapsed}
-                  isActive={currentPage === item.key}
-                  disabled={item.disabled}
-                  small
-                  tip={
-                    item.tooltip
-                      ? item.tooltip
-                      : collapsed
-                        ? item.label
-                        : undefined
-                  }
-                  tipSide={width > 640 ? "right" : "bottom"}
-                >
-                  {item.label}
-                </SidebarLink>
-              </div>
-            ))}
-          </div>
-        ))}
+      <div className="flex gap-1 sm:flex-col">
+        {header}
+
+        <div className="flex gap-1 sm:flex-col sm:divide-x-0 sm:divide-y">
+          {items.map((group) => (
+            <div key={group.key} className="flex gap-1 sm:flex-col sm:py-2">
+              {group.items.map((item) => (
+                <div className="relative h-[1.875rem]" key={item.key}>
+                  <SidebarLink
+                    {...omit(item, "key")}
+                    collapsed={collapsed}
+                    isActive={currentPage === item.key}
+                    disabled={item.disabled}
+                    small
+                    tip={
+                      item.tooltip
+                        ? item.tooltip
+                        : collapsed
+                          ? item.label
+                          : undefined
+                    }
+                    tipSide={width > 640 ? "right" : "bottom"}
+                  >
+                    {item.label}
+                  </SidebarLink>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
       </div>
+
       <Button
         variant="unstyled"
         onClick={() => setCollapsed(!collapsed)}
@@ -215,3 +215,13 @@ export function sidebarLinkClassNames(props: {
       : null,
   );
 }
+
+export function useCurrentPage() {
+  const router = useRouter();
+
+  const path = router.pathname
+    .replace("/t/[team]/[project]/[deploymentName]", "")
+    .split("/")
+    .filter((i) => !!i);
+  return path[0] ?? null;
+}

npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx

@@ -16,11 +16,13 @@ import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { useGlobalLocalStorage } from "@common/lib/useGlobalLocalStorage";
 import { useCollapseSidebarState } from "@common/lib/useCollapseSidebarState";
 import { PulseIcon } from "@common/elements/icons";
-import { Sidebar } from "@common/elements/Sidebar";
+import { Sidebar, useCurrentPage } from "@common/elements/Sidebar";
 import { FunctionRunnerWrapper } from "@common/features/functionRunner/components/FunctionRunnerWrapper";
 import { FunctionsProvider } from "@common/lib/functions/FunctionsProvider";
 import { useIsGlobalRunnerShown } from "@common/features/functionRunner/lib/functionRunner";
 import { useIsCloudDeploymentInSelfHostedDashboard } from "@common/lib/useIsCloudDeploymentInSelfHostedDashboard";
+import { Tooltip } from "@ui/Tooltip";
+import Image from "next/image";
 
 type LayoutProps = {
   children: JSX.Element;
@@ -121,6 +123,11 @@ export function DeploymentDashboardLayout({
             collapsed={!!collapsed}
             setCollapsed={setCollapsed}
             items={sidebarItems}
+            header={
+              process.env.NEXT_PUBLIC_HIDE_HEADER ? (
+                <EmbeddedConvexLogo collapsed={!!collapsed} />
+              ) : undefined
+            }
           />
           <div
             className={classNames(
@@ -181,3 +188,59 @@ function PauseBanner() {
     </div>
   );
 }
+
+function EmbeddedConvexLogo({ collapsed }: { collapsed: boolean }) {
+  const currentPage = useCurrentPage();
+  const { deploymentName } = useIsCloudDeploymentInSelfHostedDashboard();
+
+  const href = deploymentName
+    ? `https://dashboard.convex.dev/d/${deploymentName}/${currentPage ?? ""}`
+    : "https://dashboard.convex.dev";
+
+  return (
+    <>
+      {/* Vertical layout on small screens */}
+      <div className="mr-2 sm:hidden">
+        <Tooltip tip="Convex" side="bottom" wrapsButton>
+          <a
+            className="flex h-full items-center"
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Image
+              src="/convex-logo-only.svg"
+              width="24"
+              height="24"
+              alt="Convex logo"
+            />
+          </a>
+        </Tooltip>
+      </div>
+
+      {/* Horizontal layout on larger screens, with some text when not collapsed */}
+      <div className="hidden sm:block">
+        <Tooltip tip={collapsed && "Convex"} side="bottom" wrapsButton>
+          <a
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className={
+              collapsed
+                ? "flex w-full justify-center"
+                : "flex items-center gap-2 px-1.5 py-0.5"
+            }
+          >
+            <Image
+              src="/convex-logo-only.svg"
+              width={collapsed ? 24 : 18}
+              height={collapsed ? 24 : 18}
+              alt="Convex logo"
+            />
+            {!collapsed && <div className="text-sm font-medium">Convex</div>}
+          </a>
+        </Tooltip>
+      </div>
+    </>
+  );
+}