Breakdown Workspace components in to more flexible pieces

packages/graph-explorer/src/components/NavBar.tsx

@@ -0,0 +1,116 @@
+import { cn } from "@/utils";
+import GraphExplorerIcon from "@/components/icons/GraphExplorerIcon";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+type NavBarProps = {
+  logoVisible?: boolean;
+};
+
+export function NavBar({
+  className,
+  children,
+  logoVisible,
+}: ComponentPropsWithRef<"div"> & NavBarProps) {
+  return (
+    <div
+      data-slot="nav-bar"
+      className={cn(
+        "bg-background-default text-text-primary flex min-h-14 flex-row items-center gap-3 border-b pr-3",
+        !logoVisible && "pl-3",
+        className,
+      )}
+    >
+      {logoVisible ? <NavBarLogo /> : null}
+      {children}
+    </div>
+  );
+}
+
+export function NavBarContent({
+  className,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="nav-bar-content"
+      className={cn("flex flex-1 flex-row items-center gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+export function NavBarActions({
+  className,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="nav-bar-actions"
+      className={cn(
+        "flex h-full flex-row items-center gap-3 justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavBarLogo({ className, ...rest }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="nav-bar-logo"
+      className={cn(
+        "bg-logo-gradient mr-2 grid aspect-square h-full place-content-center overflow-hidden text-white",
+        className,
+      )}
+      {...rest}
+    >
+      <GraphExplorerIcon width="2em" height="2em" />
+    </div>
+  );
+}
+
+export function NavBarVersion({
+  className,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="nav-bar-version"
+      className={cn(
+        "text-text-secondary flex items-center justify-center text-xs font-light",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type NavBarTitleProps = {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+};
+
+export function NavBarTitle({
+  title,
+  subtitle,
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<"div"> & NavBarTitleProps) {
+  return (
+    <div className={cn("flex h-full items-center", className)} {...props}>
+      <div className="flex flex-col">
+        {title && (
+          <div className="line-clamp-1 overflow-hidden font-bold">{title}</div>
+        )}
+        {subtitle && (
+          <div className="text-text-secondary line-clamp-1 overflow-hidden text-sm leading-tight font-medium">
+            {subtitle}
+          </div>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}

packages/graph-explorer/src/components/Panel.tsx

@@ -8,9 +8,26 @@ interface PanelProps extends React.ComponentPropsWithRef<"div"> {
   variant?: "default" | "sidebar";
 }
 
+export function PanelGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="panel-group"
+      className={cn(
+        "bg-brand-100 flex min-h-0 min-w-0 flex-1 gap-2 p-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 function Panel({ variant = "default", className, ...props }: PanelProps) {
   return (
     <div
+      data-slot="panel"
       className={cn(
         "bg-background-default flex h-full flex-col overflow-hidden",
         variant === "default" &&

packages/graph-explorer/src/components/Workspace.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/utils";
+import type { ComponentPropsWithRef } from "react";
+
+export function Workspace({
+  className,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="workspace"
+      className={cn(
+        "bg-background-secondary flex min-h-0 flex-1 flex-col overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function WorkspaceContent({
+  className,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="workspace-content"
+      className={cn("flex min-h-0 flex-1 flex-col overflow-hidden", className)}
+      {...props}
+    />
+  );
+}