App header

1"use client";
2 
3import * as React from "react";
4import { ChevronDown, Globe, HelpCircle, Maximize2, Minimize2, X } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { StatusBadge, type StatusBadgeProps } from "@/registry/blacksite/ui/status-badge";
8 
9interface AppHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
10  /** Brand / nav slot on the far left. */
11  brand?: React.ReactNode;
12  /** App or workspace title. */
13  title?: React.ReactNode;
14  /** Subtitle (rendered after a slash). */
15  subtitle?: React.ReactNode;
16  /** Status pill shown next to the workspace label. */
17  status?: StatusBadgeProps["status"];
18  statusLabel?: string;
19  /** Region / environment label (right side selector). */
20  region?: string;
21  user?: { name: string; avatarUrl?: string };
22  /** Right-side actions slot (overrides default window controls). */
23  actions?: React.ReactNode;
24  /** Show fake window controls (minimise / maximise / close). */
25  windowControls?: boolean;
26}
27 
28const AppHeader = React.forwardRef<HTMLElement, AppHeaderProps>(
29  (
30    {
31      className,
32      brand,
33      title,
34      subtitle,
35      status,
36      statusLabel,
37      region,
38      user,
39      actions,
40      windowControls = false,
41      ...props
42    },
43    ref,
44  ) => {
45    return (
46      <header
47        ref={ref}
48        className={cn(
49          "border-border flex h-10 items-center gap-3 border-b",
50          "bg-background-elevated text-foreground px-2",
51          className,
52        )}
53        {...props}
54      >
55        <div className="flex min-w-0 items-center gap-2">
56          {brand}
57          {(title || subtitle) && (
58            <h1 className="text-mono text-foreground truncate text-[11px] tracking-[0.1em] uppercase">
59              {title}
60              {subtitle && <span className="text-foreground-subtle"> — {subtitle}</span>}
61            </h1>
62          )}
63        </div>
64 
65        <div className="flex-1" />
66 
67        <div className="flex items-center gap-2">
68          {user && (
69            <button
70              type="button"
71              className="border-border text-mono hover:border-border-strong flex h-7 items-center gap-1.5 rounded-sm border px-2 text-[11px] tracking-[0.06em] uppercase"
72            >
73              <span className="bg-foreground/10 grid size-4 place-items-center rounded-full text-[9px]">
74                {user.name.slice(0, 1).toUpperCase()}
75              </span>
76              <span className="max-w-[120px] truncate">{user.name}</span>
77// … truncated