Correct Hub and Engine component geometry

packages/ui-react/src/AppHeader.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 import { cn } from "./cn";
 
 export interface AppHeaderProps extends HTMLAttributes<HTMLElement> {
@@ -41,6 +41,23 @@ export function HeaderProfile({ children, className, ...props }: HTMLAttributes<
   return <div className={cn("nodedc-header__profile", className)} {...props}>{children}</div>;
 }
 
+export function HeaderProfileButton({ className, children, type = "button", ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type={type} className={cn("nodedc-header__profile-button", className)} {...props}>{children}</button>;
+}
+
+export interface HeaderAvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  label: string;
+  imageUrl?: string;
+}
+
+export function HeaderAvatar({ label, imageUrl, className, ...props }: HeaderAvatarProps) {
+  return (
+    <span className={cn("nodedc-header__avatar", className)} title={label} {...props}>
+      {imageUrl ? <img src={imageUrl} alt="" /> : label.slice(0, 2).toUpperCase()}
+    </span>
+  );
+}
+
 export interface HeaderWorkspaceProps extends HTMLAttributes<HTMLSpanElement> {
   label: string;
   imageUrl?: string;
@@ -53,4 +70,3 @@ export function HeaderWorkspace({ label, imageUrl, className, ...props }: Header
     </span>
   );
 }
-