BaseHeader -> Header

apps/designer/app/designer/features/sidebar-left/lib/header.tsx

@@ -2,12 +2,12 @@ import { Flex, IconButton, Text } from "@webstudio-is/design-system";
 import { Separator } from "@webstudio-is/design-system";
 import { Cross1Icon } from "@webstudio-is/icons";
 
-type BaseHeaderProps = {
+type HeaderProps = {
   title: string;
-  actions: React.ReactNode;
+  suffix: React.ReactNode;
 };
 
-export const BaseHeader = ({ title, actions }: BaseHeaderProps) => {
+export const Header = ({ title, suffix }: HeaderProps) => {
   return (
     <>
       <Flex
@@ -16,30 +16,15 @@ export const BaseHeader = ({ title, actions }: BaseHeaderProps) => {
         justify="between"
       >
         <Text variant="title">{title}</Text>
-        {actions && <Flex css={{ marginRight: "$1" }}>{actions}</Flex>}
+        {suffix && <Flex css={{ marginRight: "$1" }}>{suffix}</Flex>}
       </Flex>
       <Separator css={{ height: 2 }} />
     </>
   );
 };
 
-type HeaderProps = {
-  title: string;
-  isClosable?: boolean;
-  onClose?: () => void;
-};
-
-export const Header = ({ title, isClosable = true, onClose }: HeaderProps) => {
-  return (
-    <BaseHeader
-      title={title}
-      actions={
-        isClosable ? (
-          <IconButton onClick={() => onClose?.()} size="2" aria-label="Close">
-            <Cross1Icon />
-          </IconButton>
-        ) : null
-      }
-    />
-  );
-};
+export const CloseButton = ({ onClick }: { onClick: () => void }) => (
+  <IconButton onClick={onClick} size="2" aria-label="Close">
+    <Cross1Icon />
+  </IconButton>
+);

apps/designer/app/designer/features/sidebar-left/lib/navigator/navigator.tsx

@@ -4,7 +4,7 @@ import { type Publish } from "~/shared/pubsub";
 import { useCallback } from "react";
 import { useSelectedInstanceData } from "~/designer/shared/nano-states";
 import { useRootInstance } from "~/shared/nano-states";
-import { Header } from "../header";
+import { Header, CloseButton } from "../header";
 import { InstanceTree } from "~/designer/shared/tree";
 
 declare module "~/shared/pubsub" {
@@ -81,7 +81,10 @@ export const Navigator = ({ publish, isClosable, onClose }: NavigatorProps) => {
   if (rootInstance === undefined) return null;
   return (
     <Flex css={{ height: "100%", flexDirection: "column" }}>
-      <Header title="Navigator" onClose={onClose} isClosable={isClosable} />
+      <Header
+        title="Navigator"
+        suffix={isClosable && <CloseButton onClick={() => onClose?.()} />}
+      />
       <Flex css={{ flexGrow: 1, flexDirection: "column" }}>
         <InstanceTree
           root={rootInstance}

apps/designer/app/designer/features/sidebar-left/panels/assets/assets.tsx

@@ -1,7 +1,7 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import { ImageManager } from "~/designer/shared/image-manager";
 import { TabName } from "../../types";
-import { Header } from "../../lib/header";
+import { Header, CloseButton } from "../../lib/header";
 
 export const TabContent = ({
   onSetActiveTab,
@@ -12,9 +12,7 @@ export const TabContent = ({
     <>
       <Header
         title="Assets"
-        onClose={() => {
-          onSetActiveTab("none");
-        }}
+        suffix={<CloseButton onClick={() => onSetActiveTab("none")} />}
       />
       <ImageManager />
     </>

apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx

@@ -9,7 +9,7 @@ import { createInstance } from "~/shared/tree-utils";
 import type { TabName } from "../../types";
 import { ComponentThumb } from "./component-thumb";
 import { useCanvasRect, useZoom } from "~/designer/shared/nano-states";
-import { Header } from "../../lib/header";
+import { Header, CloseButton } from "../../lib/header";
 
 const componentNames = (
   Object.keys(components) as Array<Instance["component"]>
@@ -135,9 +135,7 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
     <Flex css={{ height: "100%", flexDirection: "column" }}>
       <Header
         title="Add"
-        onClose={() => {
-          onSetActiveTab("none");
-        }}
+        suffix={<CloseButton onClick={() => onSetActiveTab("none")} />}
       />
       <Flex
         gap="1"

apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx

@@ -6,7 +6,7 @@ import {
 import { type Publish } from "~/shared/pubsub";
 import { Cross1Icon, NewPageIcon, PageIcon } from "@webstudio-is/icons";
 import type { TabName } from "../../types";
-import { BaseHeader } from "../../lib/header";
+import { CloseButton, Header } from "../../lib/header";
 import { type Page, type Pages } from "@webstudio-is/project";
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -96,20 +96,16 @@ const PagesPanel = ({
 
   return (
     <>
-      <BaseHeader
+      <Header
         title="Pages"
-        actions={
+        suffix={
           <>
             {onNewPage && (
               <IconButton size="2" onClick={onNewPage} aria-label="New Page">
                 <NewPageIcon />
               </IconButton>
             )}
-            {onClose && (
-              <IconButton size="2" onClick={onClose} aria-label="Close">
-                <Cross1Icon />
-              </IconButton>
-            )}
+            {onClose && <CloseButton onClick={onClose} />}
           </>
         }
       />

apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx

@@ -13,7 +13,7 @@ import {
 import { useFetcher } from "@remix-run/react";
 import { ChevronDoubleLeftIcon } from "@webstudio-is/icons";
 import type { ZodError } from "zod";
-import { BaseHeader } from "../../lib/header";
+import { Header } from "../../lib/header";
 import { useEffect, useRef, useState } from "react";
 import { type Page } from "@webstudio-is/project";
 
@@ -73,16 +73,14 @@ export const NewPageSettings = ({
 
   return (
     <>
-      <BaseHeader
+      <Header
         title="New Page Settings"
-        actions={
-          <>
-            {onClose && (
-              <IconButton size="2" onClick={onClose} aria-label="Cancel">
-                <ChevronDoubleLeftIcon />
-              </IconButton>
-            )}
-          </>
+        suffix={
+          onClose && (
+            <IconButton size="2" onClick={onClose} aria-label="Cancel">
+              <ChevronDoubleLeftIcon />
+            </IconButton>
+          )
         }
       />
       <Box css={{ overflow: "auto", padding: "$2 $3" }}>