Omarchy Keybinding Reference

"use client"

import * as React from "react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty"
import { Input } from "@/components/ui/input"
import { OmarchyShortcut } from "@/components/ui/omarchy-keycap"

type Binding = {
  keys: readonly string[]
  action: string
}

/** Mirrors the stock bindings in `/usr/share/omarchy/default/hypr/bindings/`. */
const bindingGroups: readonly {
  heading: string
  bindings: readonly Binding[]
}[] = [
  {
    heading: "Applications",
    bindings: [
      { keys: ["Super", "Return"], action: "Terminal" },
      { keys: ["Super", "Shift", "Return"], action: "Browser" },
      { keys: ["Super", "Shift", "F"], action: "File manager" },
      { keys: ["Super", "Shift", "N"], action: "Editor" },
      { keys: ["Super", "Shift", "M"], action: "Music" },
    ],
  },
  {
    heading: "Windows",
    bindings: [
      { keys: ["Super", "W"], action: "Close window" },
      { keys: ["Super", "F"], action: "Full screen" },
      { keys: ["Super", "T"], action: "Toggle floating/tiling" },
      { keys: ["Super", "J"], action: "Toggle window split" },
      { keys: ["Super", "O"], action: "Pop window out (float & pin)" },
      { keys: ["Alt", "Tab"], action: "Focus on next window" },
    ],
  },
  {
    heading: "Workspaces",
    bindings: [
      { keys: ["Super", "1"], action: "Switch to workspace 1" },
      { keys: ["Super", "Shift", "1"], action: "Move window to workspace 1" },
      { keys: ["Super", "Tab"], action: "Next workspace" },
      { keys: ["Super", "Shift", "Tab"], action: "Previous workspace" },
      { keys: ["Super", "S"], action: "Toggle scratchpad" },
      { keys: ["Super", "L"], action: "Toggle workspace layout" },
    ],
  },
  {
    heading: "Menus",
    bindings: [
      { keys: ["Super", "Space"], action: "Omarchy menu" },
      { keys: ["Super", "Alt", "Space"], action: "Apps menu" },
      { keys: ["Super", "K"], action: "Keybindings" },
      { keys: ["Super", "Ctrl", "C"], action: "Capture menu" },
      { keys: ["Super", "Escape"], action: "System menu" },
    ],
  },
  {
    heading: "Appearance",
    bindings: [
      { keys: ["Super", "Shift", "Ctrl", "Space"], action: "Theme menu" },
      { keys: ["Super", "Ctrl", "Space"], action: "Background switcher" },
      { keys: ["Super", "Shift", "Space"], action: "Toggle top bar" },
      { keys: ["Super", "Backspace"], action: "Toggle window transparency" },
      { keys: ["Super", "Shift", "Backspace"], action: "Toggle window gaps" },
    ],
  },
  {
    heading: "Notifications",
    bindings: [
      { keys: ["Super", ","], action: "Dismiss last notification" },
      { keys: ["Super", "Shift", ","], action: "Dismiss all notifications" },
      { keys: ["Super", "Alt", ","], action: "Invoke last notification" },
      { keys: ["Super", "Ctrl", ","], action: "Toggle silencing" },
    ],
  },
]

/** The Omarchy keybinding cheat sheet, filterable by action or key. */
export function OmarchyKeybindingReference() {
  const [query, setQuery] = React.useState("")

  const filtered = React.useMemo(() => {
    const needle = query.trim().toLowerCase()

    if (!needle) {
      return bindingGroups
    }

    return bindingGroups
      .map((group) => ({
        ...group,
        bindings: group.bindings.filter((binding) =>
          `${binding.action} ${binding.keys.join(" ")}`
            .toLowerCase()
            .includes(needle)
        ),
      }))
      .filter((group) => group.bindings.length > 0)
  }, [query])

  return (
    <Card className="w-full max-w-xl">
      <CardHeader>
        <CardTitle>Keybindings</CardTitle>
        <CardDescription>
          Stock Omarchy bindings. Press Super+K on the desktop for the live
          list.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-5">
        <Input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Filter bindings"
          aria-label="Filter keybindings"
        />
        {filtered.length === 0 ? (
          <Empty className="py-8">
            <EmptyHeader>
              <EmptyTitle>No bindings</EmptyTitle>
              <EmptyDescription>Nothing matches “{query}”.</EmptyDescription>
            </EmptyHeader>
          </Empty>
        ) : (
          filtered.map((group) => (
            <section key={group.heading} className="flex flex-col gap-1">
              <h3 className="font-mono text-[0.6875rem] tracking-wide text-muted-foreground uppercase">
                {group.heading}
              </h3>
              <dl className="flex flex-col">
                {group.bindings.map((binding) => (
                  <div
                    key={`${group.heading}-${binding.action}`}
                    className="flex items-center justify-between gap-4 border-b border-border py-1.5 last:border-b-0"
                  >
                    <dt className="text-sm">{binding.action}</dt>
                    <dd>
                      <OmarchyShortcut keys={binding.keys} />
                    </dd>
                  </div>
                ))}
              </dl>
            </section>
          ))
        )}
      </CardContent>
    </Card>
  )
}