Omarchy Window Frame

import * as React from "react"
import { cn } from "cn"

import { Badge } from "@/components/ui/badge"

/**
 * A tiled window as Hyprland draws it: an accent border while focused, a quiet
 * border otherwise, plus a compact title bar carrying the workspace tag.
 */
function OmarchyWindowFrame({
  title,
  workspace,
  focused,
  floating,
  actions,
  children,
  className,
  ...props
}: Omit<React.ComponentProps<"section">, "title"> & {
  title: string
  workspace?: string
  focused?: boolean
  floating?: boolean
  actions?: React.ReactNode
}) {
  const titleId = React.useId()

  return (
    <section
      data-slot="omarchy-window-frame"
      data-focused={focused || undefined}
      data-floating={floating || undefined}
      aria-labelledby={titleId}
      className={cn(
        "flex min-w-0 flex-col overflow-hidden rounded-lg border-2 bg-card text-card-foreground transition-colors",
        "border-border data-[focused]:border-primary",
        "data-[floating]:shadow-lg",
        className
      )}
      {...props}
    >
      <header className="flex items-center gap-2 border-b border-border bg-muted/60 px-2.5 py-1.5">
        <span
          id={titleId}
          className="truncate font-mono text-xs font-medium text-muted-foreground"
        >
          {title}
        </span>
        {floating ? (
          <Badge variant="outline" className="h-4 px-1 text-[0.625rem]">
            floating
          </Badge>
        ) : null}
        <div className="ml-auto flex items-center gap-2">
          {actions}
          {workspace ? (
            <span
              className="font-mono text-[0.6875rem] text-muted-foreground"
              aria-label={`Workspace ${workspace}`}
            >
              {workspace}
            </span>
          ) : null}
        </div>
      </header>
      <div className="min-w-0 flex-1 p-3 text-sm">{children}</div>
    </section>
  )
}

export { OmarchyWindowFrame }