Omarchy Workspace Switcher

ui

A controlled, accessible workspace selector with occupied and urgent states.

bunx --bun shadcn@latest add yamz8/omarchy-shadcn-registry/omarchy-workspace-switcher

Preview

Dependencies

npm
cn
registry
toggle-group

Source

registry/ui/omarchy-workspace-switcher.tsx
"use client"

import { cn } from "cn"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export type OmarchyWorkspace = {
  id: string
  label?: string
  occupied?: boolean
  urgent?: boolean
}

function OmarchyWorkspaceSwitcher({
  workspaces,
  value,
  onValueChange,
  className,
}: {
  workspaces: readonly OmarchyWorkspace[]
  value: string
  onValueChange?: (value: string) => void
  className?: string
}) {
  return (
    <ToggleGroup
      value={[value]}
      onValueChange={(next) => {
        const selected = next.at(-1)

        if (selected) {
          onValueChange?.(selected)
        }
      }}
      variant="outline"
      spacing={1}
      aria-label="Workspace"
      className={cn("flex-wrap", className)}
    >
      {workspaces.map((workspace) => (
        <ToggleGroupItem
          key={workspace.id}
          value={workspace.id}
          aria-label={`Workspace ${workspace.label ?? workspace.id}`}
          data-occupied={workspace.occupied || undefined}
          data-urgent={workspace.urgent || undefined}
          className="font-mono data-[urgent]:text-destructive"
        >
          {workspace.label ?? workspace.id}
          {workspace.occupied ? (
            <span
              aria-hidden
              className="size-1 rounded-full bg-current opacity-60"
            />
          ) : null}
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  )
}

export { OmarchyWorkspaceSwitcher }