@almanaclabs/blaze-ui 0.4.0 → 0.5.0

package/recipes/workspace-shell/workspace-shell.tsx

@@ -1,19 +1,24 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
 import type { ComponentProps, ComponentType, ReactNode } from 'react'
 import {
-  IconArrowsUpDown,
-  IconBolt,
-  IconBrowser,
-  IconChartBar,
-  IconHome,
+  IconAd2,
+  IconChevronDown,
+  IconFileAnalytics,
+  IconIdBadge,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
   IconLogout,
-  IconSearch,
+  IconMessageStar,
+  IconMessages,
+  IconPlugConnected,
+  IconScoreboard,
   IconSettings,
-  IconStar,
-  IconTags,
-  IconTarget,
   IconUser,
   IconUsers,
-  IconWorld,
+  IconWorldSearch,
+  IconWorldWww,
 } from '@tabler/icons-react'
 
 import {
@@ -27,27 +32,67 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  IdentityMark,
+  IdentityMarkImage,
+  navigationActionVariants,
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
-  SidebarHeader,
   SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
   SidebarRail,
-  SidebarTrigger,
   TooltipProvider,
+  cn,
+  useSidebar,
 } from '@almanaclabs/blaze-ui'
 
-type NavigationIcon = ComponentType<{
+import './workspace-shell.css'
+
+const googleSearchAdsLogo = new URL(
+  './assets/google-search-ads.svg',
+  import.meta.url,
+).href
+const radiantHealthLogo = new URL(
+  './assets/radiant-health.png',
+  import.meta.url,
+).href
+
+type NavigationIconProps = {
   className?: string
   'aria-hidden'?: boolean | 'true' | 'false'
-}>
+}
+
+type NavigationIcon = ComponentType<NavigationIconProps>
+
+function HomeNavigationIcon({
+  className,
+  'aria-hidden': ariaHidden,
+}: NavigationIconProps) {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      aria-hidden={ariaHidden}
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M4.6875 10.6641H10.3125M7.06536 2.00698L2.19036 5.30377C1.99251 5.43757 1.875 5.65416 1.875 5.88503V12.0551C1.875 12.646 2.37868 13.125 3 13.125H12C12.6213 13.125 13.125 12.646 13.125 12.0551V5.88503C13.125 5.65416 13.0075 5.43757 12.8096 5.30377L7.93464 2.00698C7.67442 1.83101 7.32558 1.83101 7.06536 2.00698Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+        style={{ strokeWidth: 'var(--icon-stroke-15)' }}
+      />
+    </svg>
+  )
+}
 
 export type WorkspaceShellNavigationItem = {
   key: string
@@ -56,67 +101,113 @@ export type WorkspaceShellNavigationItem = {
   icon: NavigationIcon
 }
 
-export type WorkspaceShellSubNavigationItem = {
+export type WorkspaceShellNavigationGroup = {
   key: string
   label: string
-  href: string
+  items: readonly WorkspaceShellNavigationItem[]
 }
 
 export type WorkspaceShellRecipeProps = {
-  title: string
-  workspaceName: string
-  userEmail: string
   activeNavigationKey: string
-  activeSubNavigationKey?: string
-  accessMode?: 'am' | 'client'
+  channelTitle: string
   children?: ReactNode
+  channelMark?: ReactNode
   defaultSidebarOpen?: boolean
-  subNavigation?: readonly WorkspaceShellSubNavigationItem[]
+  defaultSidebarWidth?: number
+  footer?: ReactNode
+  headerAction?: ReactNode
+  mode?: 'standard' | 'focused'
+  maxSidebarWidth?: number
+  minSidebarWidth?: number
+  navigationGroups?: readonly WorkspaceShellNavigationGroup[]
+  pageHeader?: ReactNode
+  onSidebarWidthChange?: (width: number) => void
+  userAvatar?: ReactNode
+  userName: string
+  workspaceMark?: ReactNode
+  workspaceName: string
 }
 
-const primaryNavigation: readonly WorkspaceShellNavigationItem[] = [
-  { key: 'home', label: 'Home', href: '#home', icon: IconHome },
-  {
-    key: 'analytics',
-    label: 'Analytics',
-    href: '#analytics',
-    icon: IconChartBar,
-  },
-  {
-    key: 'integrations',
-    label: 'Integrations',
-    href: '#integrations',
-    icon: IconBolt,
-  },
-  { key: 'brand-kit', label: 'Brand Kit', href: '#brand-kit', icon: IconTags },
-  {
-    key: 'scorecard',
-    label: 'Scorecard',
-    href: '#scorecard',
-    icon: IconTarget,
-  },
-]
+const DEFAULT_SIDEBAR_WIDTH = 220
+const MIN_SIDEBAR_WIDTH = 200
+const MAX_SIDEBAR_WIDTH = 320
 
-const channelNavigation: readonly WorkspaceShellNavigationItem[] = [
-  {
-    key: 'google-ads',
-    label: 'Google Ads',
-    href: '#google-ads',
-    icon: IconSearch,
-  },
-  { key: 'seo-aeo', label: 'SEO/AEO', href: '#seo-aeo', icon: IconWorld },
-  { key: 'website', label: 'Website', href: '#website', icon: IconBrowser },
+function clampSidebarWidth(width: number, min: number, max: number) {
+  return Math.min(Math.max(width, min), max)
+}
+
+const defaultNavigationGroups: readonly WorkspaceShellNavigationGroup[] = [
   {
-    key: 'reputation',
-    label: 'Reputation',
-    href: '#reputation',
-    icon: IconStar,
+    key: 'primary',
+    label: 'Manage',
+    items: [
+      {
+        key: 'home',
+        label: 'Home',
+        href: '#home',
+        icon: HomeNavigationIcon,
+      },
+      {
+        key: 'analytics',
+        label: 'Analytics',
+        href: '#analytics',
+        icon: IconFileAnalytics,
+      },
+      {
+        key: 'integrations',
+        label: 'Integrations',
+        href: '#integrations',
+        icon: IconPlugConnected,
+      },
+      {
+        key: 'brand-kit',
+        label: 'Brand Kit',
+        href: '#brand-kit',
+        icon: IconIdBadge,
+      },
+      {
+        key: 'scorecard',
+        label: 'Scorecard',
+        href: '#scorecard',
+        icon: IconScoreboard,
+      },
+    ],
   },
   {
-    key: 'inbound-sdr',
-    label: 'Inbound SDR',
-    href: '#inbound-sdr',
-    icon: IconUsers,
+    key: 'channels',
+    label: 'Channels',
+    items: [
+      {
+        key: 'google-ads',
+        label: 'Google Ads',
+        href: '#google-ads',
+        icon: IconAd2,
+      },
+      {
+        key: 'seo-aeo',
+        label: 'SEO/AEO',
+        href: '#seo-aeo',
+        icon: IconWorldSearch,
+      },
+      {
+        key: 'website',
+        label: 'Website',
+        href: '#website',
+        icon: IconWorldWww,
+      },
+      {
+        key: 'reputation',
+        label: 'Reputation',
+        href: '#reputation',
+        icon: IconMessageStar,
+      },
+      {
+        key: 'inbound-sdr',
+        label: 'Inbound SDR',
+        href: '#inbound-sdr',
+        icon: IconMessages,
+      },
+    ],
   },
 ]
 
@@ -141,79 +232,163 @@ function RecipeLink({
   )
 }
 
-function WorkspaceSelector({ workspaceName }: { workspaceName: string }) {
+function DefaultWorkspaceMark() {
   return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={
-              <SidebarMenuButton
-                size="lg"
-                aria-label={`Open workspace menu for ${workspaceName}`}
-                className="data-[popup-open]:bg-sidebar-accent data-[popup-open]:text-sidebar-accent-foreground"
-              />
-            }
-          >
-            <span className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary font-semibold text-sidebar-primary-foreground">
-              {initials(workspaceName).slice(0, 1)}
-            </span>
-            <span className="grid flex-1 text-left text-sm leading-tight">
-              <span className="truncate font-medium">{workspaceName}</span>
-              <span className="truncate text-xs text-sidebar-foreground/65">
-                Client workspace
-              </span>
-            </span>
-            <IconArrowsUpDown className="ml-auto" aria-hidden="true" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" side="right" className="min-w-56">
-            <DropdownMenuGroup>
-              <DropdownMenuLabel>Workspace</DropdownMenuLabel>
-              <DropdownMenuItem>
-                <IconUsers aria-hidden="true" />
-                All workspaces
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <IconLogout aria-hidden="true" />
-              Sign out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
+    <IdentityMark data-identity="workspace" className="bg-[#45164a]">
+      <IdentityMarkImage
+        data-identity-artwork="workspace"
+        src={radiantHealthLogo}
+        alt=""
+        aria-hidden="true"
+        className="rounded-[4px] object-cover"
+      />
+    </IdentityMark>
+  )
+}
+
+function DefaultChannelMark() {
+  return (
+    <IdentityMark data-identity="channel">
+      <IdentityMarkImage
+        data-identity-artwork="channel"
+        src={googleSearchAdsLogo}
+        alt=""
+        aria-hidden="true"
+      />
+    </IdentityMark>
+  )
+}
+
+function WorkspaceSidebarTrigger() {
+  const { state, toggleSidebar } = useSidebar()
+
+  if (state === 'collapsed') {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="tertiary"
+      size="icon-sm"
+      aria-label="Collapse workspace navigation"
+      onClick={toggleSidebar}
+      className="mr-px shrink-0 text-foreground group-data-[collapsible=icon]:hidden"
+    >
+      <IconLayoutSidebarLeftCollapse aria-hidden="true" />
+    </Button>
+  )
+}
+
+function WorkspaceFrameSidebarTrigger() {
+  const { isMobile, state, toggleSidebar } = useSidebar()
+
+  if (!isMobile && state !== 'collapsed') {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="tertiary"
+      size="icon-sm"
+      aria-label={
+        isMobile ? 'Open workspace navigation' : 'Expand workspace navigation'
+      }
+      onClick={toggleSidebar}
+      className="shrink-0 text-foreground"
+    >
+      <IconLayoutSidebarLeftExpand aria-hidden="true" />
+    </Button>
+  )
+}
+
+function WorkspaceMenu({
+  workspaceMark,
+  workspaceName,
+}: {
+  workspaceMark: ReactNode
+  workspaceName: string
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="tertiary"
+            size="md"
+            aria-label={`Open workspace menu for ${workspaceName}`}
+            className="min-w-0 flex-1 justify-start gap-1.5 px-[10px] text-left group-data-[collapsible=icon]:size-6 group-data-[collapsible=icon]:flex-none group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0"
+          />
+        }
+      >
+        {workspaceMark}
+        <span className="truncate text-sm font-medium leading-[1.4] tracking-[0.01em] group-data-[collapsible=icon]:hidden">
+          {workspaceName}
+        </span>
+        <IconChevronDown
+          className="icon-optical-16 shrink-0 group-data-[collapsible=icon]:hidden"
+          aria-hidden="true"
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="right" className="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Workspace</DropdownMenuLabel>
+          <DropdownMenuItem>
+            <IconUsers aria-hidden="true" />
+            All workspaces
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <IconLogout aria-hidden="true" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
 function NavigationGroup({
-  items,
+  group,
   activeKey,
-  label,
 }: {
-  items: readonly WorkspaceShellNavigationItem[]
+  group: WorkspaceShellNavigationGroup
   activeKey: string
-  label?: string
 }) {
   return (
-    <SidebarGroup>
-      {label && <SidebarGroupLabel>{label}</SidebarGroupLabel>}
+    <SidebarGroup className="gap-0.5 p-0">
+      <SidebarGroupLabel className="h-[27px] rounded-[2px] px-[10px] text-xs font-medium tracking-[0.02em] text-foreground group-data-[collapsible=icon]:mt-0! group-data-[collapsible=icon]:opacity-0">
+        {group.label}
+      </SidebarGroupLabel>
       <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
+        <SidebarMenu className="gap-px">
+          {group.items.map((item) => (
             <SidebarMenuItem key={item.key}>
               <SidebarMenuButton
                 tooltip={item.label}
                 isActive={item.key === activeKey}
+                data-navigation-action=""
+                className={cn(
+                  navigationActionVariants(),
+                  'h-[31px] gap-[10px] rounded-[4px] px-[10px] py-2 text-sm font-normal leading-[1.1] tracking-normal [--icon-stroke-width:var(--icon-stroke-15)] data-active:rounded-[8px] data-active:font-normal group-data-[collapsible=icon]:h-[31px]! group-data-[collapsible=icon]:w-full! group-data-[collapsible=icon]:px-[10px]! group-data-[collapsible=icon]:py-2! [&_svg]:size-[15px]',
+                )}
                 render={
                   <RecipeLink
                     href={item.href}
+                    aria-label={item.label}
                     aria-current={item.key === activeKey ? 'page' : undefined}
                   />
                 }
               >
-                <item.icon aria-hidden="true" />
-                <span>{item.label}</span>
+                <item.icon
+                  className="icon-optical-15 text-foreground"
+                  aria-hidden="true"
+                />
+                <span className="workspace-navigation-label group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0">
+                  {item.label}
+                </span>
               </SidebarMenuButton>
             </SidebarMenuItem>
           ))}
@@ -223,29 +398,34 @@ function NavigationGroup({
   )
 }
 
-function AccountMenu({ userEmail }: { userEmail: string }) {
+function AccountMenu({
+  userAvatar,
+  userName,
+}: {
+  userAvatar: ReactNode
+  userName: string
+}) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
         render={
           <Button
-            variant="ghost"
-            size="icon"
-            aria-label={`Open account menu. Signed in as ${userEmail}`}
-            className="rounded-full"
+            type="button"
+            variant="tertiary"
+            size="md"
+            aria-label={`Open account menu for ${userName}`}
+            className="min-w-0 flex-1 justify-start gap-1.5 px-[10px] text-left font-normal group-data-[collapsible=icon]:size-5 group-data-[collapsible=icon]:flex-none group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0"
           />
         }
       >
-        <Avatar size="sm">
-          <AvatarFallback>{initials(userEmail)}</AvatarFallback>
-        </Avatar>
+        {userAvatar}
+        <span className="truncate text-sm font-normal leading-[1.4] tracking-[0.01em] group-data-[collapsible=icon]:hidden">
+          {userName}
+        </span>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-56">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>{userEmail}</DropdownMenuLabel>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
+      <DropdownMenuContent align="start" side="right" className="min-w-56">
         <DropdownMenuGroup>
+          <DropdownMenuLabel>{userName}</DropdownMenuLabel>
           <DropdownMenuItem>
             <IconUser aria-hidden="true" />
             Account settings
@@ -262,123 +442,193 @@ function AccountMenu({ userEmail }: { userEmail: string }) {
 }
 
 export function WorkspaceShellRecipe({
-  title,
-  workspaceName,
-  userEmail,
   activeNavigationKey,
-  activeSubNavigationKey,
+  channelTitle,
   children,
-  accessMode = 'client',
+  channelMark = <DefaultChannelMark />,
   defaultSidebarOpen = true,
-  subNavigation = [],
+  defaultSidebarWidth = DEFAULT_SIDEBAR_WIDTH,
+  footer,
+  headerAction,
+  mode = 'standard',
+  maxSidebarWidth = MAX_SIDEBAR_WIDTH,
+  minSidebarWidth = MIN_SIDEBAR_WIDTH,
+  navigationGroups = defaultNavigationGroups,
+  pageHeader,
+  onSidebarWidthChange,
+  userAvatar,
+  userName,
+  workspaceMark = <DefaultWorkspaceMark />,
+  workspaceName,
 }: WorkspaceShellRecipeProps) {
-  const darkSidebar = accessMode === 'client'
-  const sidebarTheme = darkSidebar ? 'dark' : 'light'
+  const resolvedMinSidebarWidth = Math.min(minSidebarWidth, maxSidebarWidth)
+  const resolvedMaxSidebarWidth = Math.max(minSidebarWidth, maxSidebarWidth)
+  const [sidebarWidth, setSidebarWidth] = useState(() =>
+    clampSidebarWidth(
+      defaultSidebarWidth,
+      resolvedMinSidebarWidth,
+      resolvedMaxSidebarWidth,
+    ),
+  )
+  const [isSidebarResizing, setIsSidebarResizing] = useState(false)
+
+  useEffect(() => {
+    setSidebarWidth((currentWidth) =>
+      clampSidebarWidth(
+        currentWidth,
+        resolvedMinSidebarWidth,
+        resolvedMaxSidebarWidth,
+      ),
+    )
+  }, [resolvedMaxSidebarWidth, resolvedMinSidebarWidth])
+
+  const updateSidebarWidth = useCallback(
+    (nextWidth: number) => {
+      const boundedWidth = clampSidebarWidth(
+        Math.round(nextWidth),
+        resolvedMinSidebarWidth,
+        resolvedMaxSidebarWidth,
+      )
+      if (boundedWidth === sidebarWidth) {
+        return
+      }
+
+      setSidebarWidth(boundedWidth)
+      onSidebarWidthChange?.(boundedWidth)
+    },
+    [
+      onSidebarWidthChange,
+      resolvedMaxSidebarWidth,
+      resolvedMinSidebarWidth,
+      sidebarWidth,
+    ],
+  )
+
+  const resolvedUserAvatar = userAvatar ?? (
+    <Avatar size="xs" shape="rounded">
+      <AvatarFallback>{initials(userName)}</AvatarFallback>
+    </Avatar>
+  )
 
   return (
     <TooltipProvider>
       <SidebarProvider
         defaultOpen={defaultSidebarOpen}
-        className="min-h-[720px]"
+        data-sidebar-resizing={isSidebarResizing || undefined}
+        className="workspace-shell-motion h-svh min-h-[720px] overflow-hidden bg-[#f5f5f5]"
+        style={
+          {
+            '--sidebar-width': `${sidebarWidth}px`,
+            '--sidebar-width-icon': '3.4375rem',
+            '--sidebar': '#f5f5f5',
+          } as ComponentProps<typeof SidebarProvider>['style']
+        }
       >
-        <Sidebar collapsible="icon">
-          <div
-            className={`${darkSidebar ? 'dark' : ''} flex min-h-0 flex-1 flex-col bg-sidebar text-sidebar-foreground`}
-            data-sidebar-theme={sidebarTheme}
-          >
-            <SidebarHeader className="border-b border-sidebar-border p-2">
-              <WorkspaceSelector workspaceName={workspaceName} />
-            </SidebarHeader>
-            <SidebarContent>
-              <nav aria-label="Primary">
-                <NavigationGroup
-                  items={primaryNavigation}
-                  activeKey={activeNavigationKey}
-                />
-                <NavigationGroup
-                  items={channelNavigation}
-                  activeKey={activeNavigationKey}
-                  label="Channels"
-                />
+        <Sidebar
+          collapsible="icon"
+          className="group-data-[side=left]:border-r-0"
+        >
+          <div className="flex min-h-0 flex-1 flex-col bg-sidebar text-sidebar-foreground">
+            <SidebarGroup className="h-[76px] shrink-0 flex-row items-center gap-2 p-0 px-[10px] group-data-[collapsible=icon]:px-[15px]">
+              <WorkspaceMenu
+                workspaceMark={workspaceMark}
+                workspaceName={workspaceName}
+              />
+              <WorkspaceSidebarTrigger />
+            </SidebarGroup>
+
+            <SidebarContent className="pt-2">
+              <nav
+                aria-label="Workspace"
+                className="flex flex-col gap-6 px-[10px]"
+              >
+                {navigationGroups.map((group) => (
+                  <NavigationGroup
+                    key={group.key}
+                    group={group}
+                    activeKey={activeNavigationKey}
+                  />
+                ))}
               </nav>
             </SidebarContent>
-            <SidebarFooter className="p-2">
-              <nav aria-label="Settings">
-                <SidebarMenu>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton
-                      tooltip="Settings"
-                      isActive={activeNavigationKey === 'settings'}
-                      render={
-                        <RecipeLink
-                          href="#settings"
-                          aria-current={
-                            activeNavigationKey === 'settings'
-                              ? 'page'
-                              : undefined
-                          }
-                        />
-                      }
-                    >
-                      <IconSettings aria-hidden="true" />
-                      <span>Settings</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                </SidebarMenu>
-              </nav>
+
+            <SidebarFooter className="h-14 shrink-0 flex-row items-center gap-2 px-[10px] py-0 group-data-[collapsible=icon]:h-[90px] group-data-[collapsible=icon]:flex-col-reverse group-data-[collapsible=icon]:gap-[10px] group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-[22px]">
+              <AccountMenu
+                userAvatar={resolvedUserAvatar}
+                userName={userName}
+              />
+              <Button
+                nativeButton={false}
+                render={<RecipeLink href="#settings" />}
+                variant="tertiary"
+                size="icon-sm"
+                aria-label="Settings"
+                className="mr-px shrink-0 text-foreground group-data-[collapsible=icon]:mr-0"
+              >
+                <IconSettings aria-hidden="true" />
+              </Button>
             </SidebarFooter>
           </div>
-          <SidebarRail />
+          <SidebarRail
+            mode="resize"
+            value={sidebarWidth}
+            min={resolvedMinSidebarWidth}
+            max={resolvedMaxSidebarWidth}
+            onValueChange={updateSidebarWidth}
+            onResizeStart={() => setIsSidebarResizing(true)}
+            onResizeEnd={() => setIsSidebarResizing(false)}
+            aria-label="Resize workspace navigation"
+            className="inset-y-2.5"
+          />
         </Sidebar>
 
-        <SidebarInset className="min-w-0">
-          <header className="sticky top-0 z-20 shrink-0 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-            <div className="grid min-h-16 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-4 transition-[min-height] group-has-data-[collapsible=icon]/sidebar-wrapper:min-h-12 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:px-6">
-              <div className="col-start-1 row-start-1 flex min-w-0 items-center gap-2">
-                <SidebarTrigger className="-ml-2 shrink-0" />
-                <h1 className="truncate text-lg font-semibold tracking-tight">
-                  {title}
-                </h1>
+        <SidebarInset className="min-h-0 min-w-0 bg-[#f5f5f5] p-0 md:p-2.5 md:pl-0">
+          <section
+            data-slot="workspace-frame"
+            data-mode={mode}
+            aria-label={channelTitle}
+            className="flex min-h-0 flex-1 flex-col overflow-hidden border bg-background md:rounded-[10px]"
+          >
+            <header className="flex h-14 shrink-0 items-center gap-1 px-4 md:px-5">
+              <WorkspaceFrameSidebarTrigger />
+              <div className="flex min-w-0 items-center gap-2">
+                {channelMark}
+                <span className="truncate text-sm font-medium tracking-normal">
+                  {channelTitle}
+                </span>
               </div>
-
-              {subNavigation.length > 0 && (
-                <nav
-                  aria-label="Page"
-                  className="col-span-2 col-start-1 row-start-2 -mx-4 overflow-x-auto border-t px-4 md:col-span-1 md:col-start-2 md:row-start-1 md:mx-0 md:overflow-visible md:border-0 md:px-0"
-                >
-                  <ul className="flex min-w-max items-center justify-center gap-1">
-                    {subNavigation.map((item) => {
-                      const active = item.key === activeSubNavigationKey
-
-                      return (
-                        <li key={item.key}>
-                          <Button
-                            aria-current={active ? 'page' : undefined}
-                            nativeButton={false}
-                            render={<RecipeLink href={item.href} />}
-                            role="link"
-                            size="sm"
-                            variant={active ? 'secondary' : 'ghost'}
-                          >
-                            {item.label}
-                          </Button>
-                        </li>
-                      )
-                    })}
-                  </ul>
-                </nav>
+              {headerAction && (
+                <div className="ml-auto flex shrink-0 items-center">
+                  {headerAction}
+                </div>
               )}
+            </header>
 
-              <div className="col-start-2 row-start-1 flex items-center gap-2 justify-self-end md:col-start-3">
-                <Button variant="outline" size="sm">
-                  {accessMode === 'client' ? 'Client' : 'AM'}
-                </Button>
-                <AccountMenu userEmail={userEmail} />
+            {pageHeader && (
+              <div data-slot="workspace-page-header" className="shrink-0">
+                {pageHeader}
               </div>
+            )}
+
+            <div
+              data-slot="workspace-content"
+              className={cn(
+                'min-h-0 flex-1',
+                mode === 'focused' ? 'overflow-hidden' : 'overflow-auto',
+              )}
+            >
+              {children}
             </div>
-          </header>
 
-          <div className="flex-1 p-4 md:p-6">{children}</div>
+            {footer && (
+              <footer
+                data-slot="workspace-footer"
+                className="min-h-[88px] shrink-0 border-t bg-background"
+              >
+                {footer}
+              </footer>
+            )}
+          </section>
         </SidebarInset>
       </SidebarProvider>
     </TooltipProvider>