From a8f05b3e50857638faa5a75a5b652abebfd26775 Mon Sep 17 00:00:00 2001
From: Blake Gentry <blakesgentry@gmail.com>
Date: Thu, 16 May 2024 21:53:05 -0500
Subject: [PATCH] dropdown job list state picker for mobile

---
 ui/src/components/Button.tsx         | 235 +++++++++++++++++++++++++++
 ui/src/components/Dropdown.tsx       | 227 ++++++++++++++++++++++++++
 ui/src/components/HeadlessLink.tsx   |  25 +++
 ui/src/components/JobFilters.tsx     |  71 ++------
 ui/src/components/JobList.stories.ts |   2 +
 ui/src/components/JobList.tsx        |  91 ++++++++---
 ui/src/components/TopNav.tsx         |   2 +-
 ui/src/routes/jobs/index.tsx         |   1 +
 ui/src/utils/jobStateFilterItems.ts  |  62 +++++++
 9 files changed, 635 insertions(+), 81 deletions(-)
 create mode 100644 ui/src/components/Button.tsx
 create mode 100644 ui/src/components/Dropdown.tsx
 create mode 100644 ui/src/components/HeadlessLink.tsx
 create mode 100644 ui/src/utils/jobStateFilterItems.ts

diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx
new file mode 100644
index 0000000..7332ffc
--- /dev/null
+++ b/ui/src/components/Button.tsx
@@ -0,0 +1,235 @@
+import {
+  Button as HeadlessButton,
+  type ButtonProps as HeadlessButtonProps,
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import React from "react";
+import { HeadlessLink } from "@components/HeadlessLink";
+
+const styles = {
+  base: [
+    // Base
+    "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
+
+    // Sizing
+    "px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6",
+
+    // Focus
+    "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
+
+    // Disabled
+    "data-[disabled]:opacity-50",
+
+    // Icon
+    "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
+  ],
+  solid: [
+    // Optical border, implemented as the button background to avoid corner artifacts
+    "border-transparent bg-[--btn-border]",
+
+    // Dark mode: border is rendered on `after` so background is set to button background
+    "dark:bg-[--btn-bg]",
+
+    // Button background, implemented as foreground layer to stack on top of pseudo-border layer
+    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]",
+
+    // Drop shadow, applied to the inset `before` layer so it blends with the border
+    "before:shadow",
+
+    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+    "dark:before:hidden",
+
+    // Dark mode: Subtle white outline is applied using a border
+    "dark:border-white/5",
+
+    // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
+    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]",
+
+    // Inner highlight shadow
+    "after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]",
+
+    // White overlay on hover
+    "after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]",
+
+    // Dark mode: `after` layer expands to cover entire button
+    "dark:after:-inset-px dark:after:rounded-lg",
+
+    // Disabled
+    "before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
+  ],
+  outline: [
+    // Base
+    "border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]",
+
+    // Dark mode
+    "dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5",
+
+    // Icon
+    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+  ],
+  plain: [
+    // Base
+    "border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5",
+
+    // Dark mode
+    "dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10",
+
+    // Icon
+    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+  ],
+  colors: {
+    "dark/zinc": [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
+    ],
+    light: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
+      "dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
+      "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+    ],
+    "dark/white": [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
+    ],
+    dark: [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
+    ],
+    white: [
+      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
+      "dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]",
+    ],
+    zinc: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]",
+      "dark:[--btn-hover-overlay:theme(colors.white/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
+    ],
+    indigo: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]",
+      "[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]",
+    ],
+    cyan: [
+      "text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]",
+      "[--btn-icon:theme(colors.cyan.500)]",
+    ],
+    red: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]",
+      "[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]",
+    ],
+    orange: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]",
+      "[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]",
+    ],
+    amber: [
+      "text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]",
+      "[--btn-icon:theme(colors.amber.600)]",
+    ],
+    yellow: [
+      "text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]",
+      "[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]",
+    ],
+    lime: [
+      "text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]",
+      "[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]",
+    ],
+    green: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    emerald: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    teal: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    sky: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
+    ],
+    blue: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]",
+      "[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]",
+    ],
+    violet: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]",
+      "[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]",
+    ],
+    purple: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]",
+      "[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]",
+    ],
+    fuchsia: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]",
+      "[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]",
+    ],
+    pink: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]",
+      "[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]",
+    ],
+    rose: [
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]",
+      "[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]",
+    ],
+  },
+};
+
+type ButtonProps = (
+  | { color?: keyof typeof styles.colors; outline?: never; plain?: never }
+  | { color?: never; outline: true; plain?: never }
+  | { color?: never; outline?: never; plain: true }
+) & { children: React.ReactNode } & { className: string } & (
+    | HeadlessButtonProps
+    | React.ComponentPropsWithoutRef<typeof HeadlessLink>
+  );
+
+export const Button = React.forwardRef(function Button(
+  { color, outline, plain, className, children, ...props }: ButtonProps,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  const classes = clsx(
+    className,
+    styles.base,
+    outline
+      ? styles.outline
+      : plain
+        ? styles.plain
+        : clsx(styles.solid, styles.colors[color ?? "dark/zinc"])
+  );
+
+  return "href" in props ? (
+    <HeadlessLink
+      {...props}
+      className={classes}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+    >
+      <TouchTarget>{children}</TouchTarget>
+    </HeadlessLink>
+  ) : (
+    <HeadlessButton
+      {...props}
+      className={clsx(classes, "cursor-default")}
+      ref={ref}
+    >
+      <TouchTarget>{children}</TouchTarget>
+    </HeadlessButton>
+  );
+});
+
+/* Expand the hit area to at least 44×44px on touch devices */
+export function TouchTarget({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      <span
+        className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
+        aria-hidden="true"
+      />
+    </>
+  );
+}
diff --git a/ui/src/components/Dropdown.tsx b/ui/src/components/Dropdown.tsx
new file mode 100644
index 0000000..b3d8b28
--- /dev/null
+++ b/ui/src/components/Dropdown.tsx
@@ -0,0 +1,227 @@
+import {
+  Description as HeadlessDescription,
+  Label as HeadlessLabel,
+  Menu as HeadlessMenu,
+  MenuButton as HeadlessMenuButton,
+  MenuHeading as HeadlessMenuHeading,
+  MenuItem as HeadlessMenuItem,
+  MenuItems as HeadlessMenuItems,
+  MenuSection as HeadlessMenuSection,
+  MenuSeparator as HeadlessMenuSeparator,
+  Transition as HeadlessTransition,
+  type DescriptionProps as HeadlessDescriptionProps,
+  type LabelProps as HeadlessLabelProps,
+  type MenuHeadingProps as HeadlessMenuHeadingProps,
+  type MenuItemProps as HeadlessMenuItemProps,
+  type MenuItemsProps as HeadlessMenuItemsProps,
+  type MenuProps as HeadlessMenuProps,
+  type MenuSectionProps as HeadlessMenuSectionProps,
+  type MenuSeparatorProps as HeadlessMenuSeparatorProps,
+} from "@headlessui/react";
+import clsx from "clsx";
+import type React from "react";
+import { LinkProps } from "@tanstack/react-router";
+import { Button } from "@components/Button";
+import { HeadlessLink } from "@components/HeadlessLink";
+
+export function Dropdown(props: HeadlessMenuProps) {
+  return <HeadlessMenu {...props} />;
+}
+
+export function DropdownButton<T extends React.ElementType = typeof Button>(
+  props: React.ComponentProps<typeof HeadlessMenuButton<T>>
+) {
+  return <HeadlessMenuButton as={Button} {...props} />;
+}
+
+export function DropdownMenu({
+  anchor = "bottom",
+  ...props
+}: HeadlessMenuItemsProps) {
+  return (
+    <HeadlessTransition leave="duration-100 ease-in" leaveTo="opacity-0">
+      <HeadlessMenuItems
+        {...props}
+        anchor={anchor}
+        className={clsx(
+          props.className,
+
+          // Anchor positioning
+          "[--anchor-gap:theme(spacing.2)] [--anchor-padding:theme(spacing.3)] data-[anchor~=start]:[--anchor-offset:-4px] data-[anchor~=end]:[--anchor-offset:4px]",
+
+          // Base styles
+          "isolate w-max rounded-xl p-1",
+
+          // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
+          "outline outline-1 outline-transparent focus:outline-none",
+
+          // Handle scrolling when menu won't fit in viewport
+          "overflow-y-auto",
+
+          // Popover background
+          "bg-white backdrop-blur-xl dark:bg-slate-800",
+
+          // Shadows
+          "shadow-lg ring-1 ring-zinc-950/10 dark:ring-inset dark:ring-white/10",
+
+          // Define grid at the menu level if subgrid is supported
+          "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
+        )}
+      />
+    </HeadlessTransition>
+  );
+}
+
+export function DropdownItem(
+  props: { to?: LinkProps["to"] } & Omit<Omit<LinkProps, "to">, "type"> &
+    HeadlessMenuItemProps<"button">
+) {
+  return (
+    <HeadlessMenuItem
+      as={props.to ? HeadlessLink : "button"}
+      type={props.to ? undefined : "button"}
+      {...props}
+      className={clsx(
+        props.className,
+
+        // Base styles
+        "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-none sm:px-3 sm:py-1.5",
+
+        // Text styles
+        "text-left text-sm/6 text-zinc-950 dark:text-white sm:text-sm/6 forced-colors:text-[CanvasText]",
+
+        // Focus
+        "data-[focus]:bg-blue-500 data-[focus]:text-white",
+
+        // Disabled state
+        "data-[disabled]:opacity-50",
+
+        // Forced colors mode
+        "forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText] forced-colors:[&>[data-slot=icon]]:data-[focus]:text-[HighlightText]",
+
+        // Use subgrid when available but fallback to an explicit grid layout if not
+        "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid",
+
+        // Icon
+        "[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4",
+        "[&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:dark:text-white"
+      )}
+    />
+  );
+}
+
+export function DropdownHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      className={clsx(className, "col-span-5 px-3.5 pb-1 pt-2.5 sm:px-3")}
+    />
+  );
+}
+
+export function DropdownSection({
+  className,
+  ...props
+}: HeadlessMenuSectionProps) {
+  return (
+    <HeadlessMenuSection
+      {...props}
+      className={clsx(
+        className,
+        // Define grid at the section level instead of the item level if subgrid is supported
+        "col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
+      )}
+    />
+  );
+}
+
+export function DropdownHeading({
+  className,
+  ...props
+}: HeadlessMenuHeadingProps) {
+  return (
+    <HeadlessMenuHeading
+      {...props}
+      className={clsx(
+        className,
+        "col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-zinc-500 dark:text-zinc-400 sm:px-3 sm:text-xs/5"
+      )}
+    />
+  );
+}
+
+export function DropdownSeparator({
+  className,
+  ...props
+}: HeadlessMenuSeparatorProps) {
+  return (
+    <HeadlessMenuSeparator
+      {...props}
+      className={clsx(
+        className,
+        "col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 dark:bg-white/10 sm:mx-3 forced-colors:bg-[CanvasText]"
+      )}
+    />
+  );
+}
+
+export function DropdownLabel({ className, ...props }: HeadlessLabelProps) {
+  return (
+    <HeadlessLabel
+      {...props}
+      data-slot="label"
+      className={clsx(className, "col-start-2 row-start-1")}
+      {...props}
+    />
+  );
+}
+
+export function DropdownDescription({
+  className,
+  ...props
+}: HeadlessDescriptionProps) {
+  return (
+    <HeadlessDescription
+      data-slot="description"
+      {...props}
+      className={clsx(
+        className,
+        "col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-[focus]:text-white dark:text-zinc-400 sm:text-xs/5 forced-colors:group-data-[focus]:text-[HighlightText]"
+      )}
+    />
+  );
+}
+
+export function DropdownShortcut({
+  className,
+  keys,
+  ...props
+}: { keys: string | string[] } & HeadlessDescriptionProps<"kbd">) {
+  return (
+    <HeadlessDescription
+      as="kbd"
+      {...props}
+      className={clsx(
+        className,
+        "col-start-5 row-start-1 flex justify-self-end"
+      )}
+    >
+      {(Array.isArray(keys) ? keys : keys.split("")).map((char, index) => (
+        <kbd
+          key={index}
+          className={clsx([
+            "min-w-[2ch] text-center font-sans capitalize text-zinc-400 group-data-[focus]:text-white forced-colors:group-data-[focus]:text-[HighlightText]",
+
+            // Make sure key names that are longer than one character (like "Tab") have extra space
+            index > 0 && char.length > 1 && "pl-1",
+          ])}
+        >
+          {char}
+        </kbd>
+      ))}
+    </HeadlessDescription>
+  );
+}
diff --git a/ui/src/components/HeadlessLink.tsx b/ui/src/components/HeadlessLink.tsx
new file mode 100644
index 0000000..05deca6
--- /dev/null
+++ b/ui/src/components/HeadlessLink.tsx
@@ -0,0 +1,25 @@
+/*
+TODO: Update this component to use your client-side framework's link
+component. We've provided examples of how to do this for Next.js,
+Remix, and Inertia.js in the Catalyst documentation:
+
+https://catalyst.tailwindui.com/docs#client-side-router-integration
+*/
+
+import { DataInteractive as HeadlessDataInteractive } from "@headlessui/react";
+import React from "react";
+import { Link } from "@tanstack/react-router";
+import { LinkProps } from "@tanstack/react-router";
+
+export const HeadlessLink = React.forwardRef(function HeadlessLink(
+  props: { to?: LinkProps["to"] } & Omit<LinkProps, "to"> & {
+      className: string;
+    },
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  return (
+    <HeadlessDataInteractive>
+      <Link {...props} to={props.to} ref={ref} />
+    </HeadlessDataInteractive>
+  );
+});
diff --git a/ui/src/components/JobFilters.tsx b/ui/src/components/JobFilters.tsx
index b6303a8..a5d49b8 100644
--- a/ui/src/components/JobFilters.tsx
+++ b/ui/src/components/JobFilters.tsx
@@ -1,75 +1,25 @@
 import { Link } from "@tanstack/react-router";
+import { useMemo } from "react";
 
-import { JobState } from "@services/types";
 import Logo from "@components/Logo";
 import { StatesAndCounts } from "@services/states";
+import { jobStateFilterItems } from "@utils/jobStateFilterItems";
 
-type jobStateFilterItem = {
-  name: string;
-  count: bigint;
-  state: JobState;
-};
-
-type SidebarProps = {
+type JobFiltersProps = {
   statesAndCounts?: StatesAndCounts;
 };
 
-export const JobFilters: (arg0: SidebarProps) => JSX.Element = ({
+export const JobFilters: (props: JobFiltersProps) => JSX.Element = ({
   statesAndCounts,
 }) => {
-  const getCount = (state: JobState): bigint => {
-    if (statesAndCounts) {
-      return BigInt(statesAndCounts[state]);
-    }
-    return BigInt(0);
-  };
-
-  const jobStateFilterItems: jobStateFilterItem[] = [
-    {
-      name: "Pending",
-      state: JobState.Pending,
-      count: getCount(JobState.Pending),
-    },
-    {
-      name: "Scheduled",
-      state: JobState.Scheduled,
-      count: getCount(JobState.Scheduled),
-    },
-    {
-      name: "Available",
-      state: JobState.Available,
-      count: getCount(JobState.Available),
-    },
-    {
-      name: "Running",
-      state: JobState.Running,
-      count: getCount(JobState.Running),
-    },
-    {
-      name: "Retryable",
-      state: JobState.Retryable,
-      count: getCount(JobState.Retryable),
-    },
-    {
-      name: "Cancelled",
-      state: JobState.Cancelled,
-      count: getCount(JobState.Cancelled),
-    },
-    {
-      name: "Discarded",
-      state: JobState.Discarded,
-      count: getCount(JobState.Discarded),
-    },
-    {
-      name: "Completed",
-      state: JobState.Completed,
-      count: getCount(JobState.Completed),
-    },
-  ];
+  const filterItems = useMemo(
+    () => jobStateFilterItems(statesAndCounts),
+    [statesAndCounts]
+  );
 
   return (
     <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4 dark:border-gray-800 dark:bg-gray-900">
-      <div className="mt-3 flex h-10 shrink-0 items-center text-slate-900 dark:text-slate-100">
+      <div className="mt-3  hidden h-10 shrink-0 items-center text-slate-900 dark:text-slate-100 lg:flex">
         <Logo className="h-full w-auto" />
       </div>
       <nav className="flex flex-1 flex-col">
@@ -79,7 +29,7 @@ export const JobFilters: (arg0: SidebarProps) => JSX.Element = ({
               Job State
             </div>
             <ul role="list" className="-mx-2 mt-2 space-y-1">
-              {jobStateFilterItems.map((item) => {
+              {filterItems.map((item) => {
                 return (
                   <li key={item.name}>
                     <Link
@@ -94,7 +44,6 @@ export const JobFilters: (arg0: SidebarProps) => JSX.Element = ({
                           "text-gray-700 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800",
                       }}
                       search={{ state: item.state }}
-                      startTransition={true}
                       params={{}}
                     >
                       {item.name}
diff --git a/ui/src/components/JobList.stories.ts b/ui/src/components/JobList.stories.ts
index 338ae11..222eb92 100644
--- a/ui/src/components/JobList.stories.ts
+++ b/ui/src/components/JobList.stories.ts
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import JobList from "./JobList";
 import { jobFactory } from "@test/factories/job";
+import { JobState } from "@services/types";
 
 const meta: Meta<typeof JobList> = {
   title: "Pages/JobList",
@@ -15,5 +16,6 @@ type Story = StoryObj<typeof JobList>;
 export const Running: Story = {
   args: {
     jobs: jobFactory.running().buildList(10),
+    state: JobState.Running,
   },
 };
diff --git a/ui/src/components/JobList.tsx b/ui/src/components/JobList.tsx
index 54ab5ed..4a3133e 100644
--- a/ui/src/components/JobList.tsx
+++ b/ui/src/components/JobList.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Link } from "@tanstack/react-router";
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { MenuButton as HeadlessMenuButton } from "@headlessui/react";
 
 import { Job } from "@services/jobs";
 import { JobState } from "@services/types";
@@ -9,6 +9,12 @@ import { StatesAndCounts } from "@services/states";
 import { JobFilters } from "@components/JobFilters";
 import RelativeTimeFormatter from "@components/RelativeTimeFormatter";
 import TopNav from "@components/TopNav";
+import { Dropdown, DropdownItem, DropdownMenu } from "@components/Dropdown";
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import {
+  JobStateFilterItem,
+  jobStateFilterItems,
+} from "@utils/jobStateFilterItems";
 
 const states: { [key in JobState]: string } = {
   [JobState.Available]: "text-sky-500 bg-sky-100/10",
@@ -184,31 +190,78 @@ type JobListProps = {
   jobs: Job[];
   showFewer: () => void;
   showMore: () => void;
+  state: JobState;
   statesAndCounts: StatesAndCounts | undefined;
 };
 
 const JobList = (props: JobListProps) => {
-  const { loading, statesAndCounts } = props;
+  const { loading, state, statesAndCounts } = props;
+
+  const stateFormatted = state.charAt(0).toUpperCase() + state.slice(1);
+  const jobsInState = useMemo(() => {
+    if (!statesAndCounts) {
+      return 0;
+    }
+    return statesAndCounts[state] || 0;
+  }, [state, statesAndCounts]);
+
+  const filterItems = useMemo(
+    () => jobStateFilterItems(statesAndCounts),
+    [statesAndCounts]
+  );
 
   return (
     <div className="h-full lg:pl-72">
       <TopNav>
-        <form className="relative" action="#" method="GET">
-          <label htmlFor="search-field" className="sr-only">
-            Search
-          </label>
-          <MagnifyingGlassIcon
-            className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
-            aria-hidden="true"
-          />
-          <input
-            id="search-field"
-            className="block size-full border-0 bg-transparent py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 dark:text-gray-100 sm:text-sm"
-            placeholder="Search..."
-            type="search"
-            name="search"
-          />
-        </form>
+        <header className="flex flex-1 items-center lg:hidden">
+          <h1 className="hidden text-base font-semibold leading-6 text-slate-900 dark:text-slate-100 lg:inline">
+            Jobs
+          </h1>
+          <Dropdown>
+            <HeadlessMenuButton
+              className="flex items-center gap-3 rounded-xl border border-transparent px-2 py-1 text-slate-700 data-[active]:border-slate-200 data-[hover]:border-slate-200 dark:text-slate-300 dark:data-[active]:border-slate-700 dark:data-[hover]:border-slate-700"
+              aria-label="Account options"
+            >
+              <span className="flex w-36 flex-1 items-center justify-between text-left">
+                <span className="block align-middle text-base font-semibold">
+                  {stateFormatted}
+                </span>
+                <span
+                  className="ml-3 block w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200 dark:bg-gray-900 dark:text-white dark:ring-gray-700"
+                  aria-hidden="true"
+                >
+                  {jobsInState.toString()}
+                </span>
+              </span>
+              <ChevronUpDownIcon className="ml-auto mr-1 size-4 shrink-0 stroke-zinc-400" />
+            </HeadlessMenuButton>
+            <DropdownMenu className="z-40 min-w-[--button-width]">
+              {filterItems.map((item: JobStateFilterItem) => (
+                <DropdownItem
+                  key={item.state}
+                  to="/jobs"
+                  className="group flex rounded-md p-2 text-sm font-semibold leading-6"
+                  activeProps={{
+                    className:
+                      "bg-gray-50 dark:bg-gray-800 text-indigo-600 dark:text-slate-100",
+                  }}
+                  inactiveProps={{
+                    className:
+                      "text-gray-700 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800",
+                  }}
+                  search={{ state: item.state }}
+                  params={{}}
+                >
+                  <span className="">{item.name}</span>
+                  <span className="col-span-2 ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200 dark:bg-gray-900 dark:text-white dark:ring-gray-700">
+                    {item.count.toString()}
+                  </span>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+          {/* <JobFilters statesAndCounts={statesAndCounts} /> */}
+        </header>
       </TopNav>
 
       <div className="hidden lg:fixed lg:inset-y-0 lg:left-16 lg:z-40 lg:flex lg:w-72 lg:flex-col">
diff --git a/ui/src/components/TopNav.tsx b/ui/src/components/TopNav.tsx
index 1389bbb..b2b1f78 100644
--- a/ui/src/components/TopNav.tsx
+++ b/ui/src/components/TopNav.tsx
@@ -12,7 +12,7 @@ const TopNav = ({ children }: TopNavProps) => {
 
   return (
     <div className="sticky top-0 z-40 bg-white dark:border-slate-700 dark:bg-slate-900 lg:mx-auto">
-      <div className="flex h-16 items-center gap-x-4 border-b border-slate-200 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 lg:shadow-none">
+      <div className="flex h-16 items-center gap-x-4 border-b  px-4 shadow-sm dark:border-slate-800 sm:gap-x-6 sm:px-6 lg:px-8 lg:shadow-none">
         <button
           type="button"
           className="-m-2.5 p-2.5 text-slate-700 lg:hidden"
diff --git a/ui/src/routes/jobs/index.tsx b/ui/src/routes/jobs/index.tsx
index 72270d5..9f3dfa6 100644
--- a/ui/src/routes/jobs/index.tsx
+++ b/ui/src/routes/jobs/index.tsx
@@ -86,6 +86,7 @@ function JobsIndexComponent() {
       jobs={jobsQuery.data || []}
       showFewer={showFewer}
       showMore={showMore}
+      state={Route.useLoaderDeps().state!}
       statesAndCounts={statesQuery.data}
     />
   );
diff --git a/ui/src/utils/jobStateFilterItems.ts b/ui/src/utils/jobStateFilterItems.ts
new file mode 100644
index 0000000..15487d4
--- /dev/null
+++ b/ui/src/utils/jobStateFilterItems.ts
@@ -0,0 +1,62 @@
+import { StatesAndCounts } from "@services/states";
+import { JobState } from "@services/types";
+
+export type JobStateFilterItem = {
+  name: string;
+  count: bigint;
+  state: JobState;
+};
+
+export const jobStateFilterItems: (
+  statesAndCounts: StatesAndCounts | undefined
+) => JobStateFilterItem[] = (statesAndCounts) => {
+  const getCount = (state: JobState): bigint => {
+    if (statesAndCounts) {
+      return BigInt(statesAndCounts[state]);
+    }
+    return BigInt(0);
+  };
+
+  return [
+    {
+      name: "Pending",
+      state: JobState.Pending,
+      count: getCount(JobState.Pending),
+    },
+    {
+      name: "Scheduled",
+      state: JobState.Scheduled,
+      count: getCount(JobState.Scheduled),
+    },
+    {
+      name: "Available",
+      state: JobState.Available,
+      count: getCount(JobState.Available),
+    },
+    {
+      name: "Running",
+      state: JobState.Running,
+      count: getCount(JobState.Running),
+    },
+    {
+      name: "Retryable",
+      state: JobState.Retryable,
+      count: getCount(JobState.Retryable),
+    },
+    {
+      name: "Cancelled",
+      state: JobState.Cancelled,
+      count: getCount(JobState.Cancelled),
+    },
+    {
+      name: "Discarded",
+      state: JobState.Discarded,
+      count: getCount(JobState.Discarded),
+    },
+    {
+      name: "Completed",
+      state: JobState.Completed,
+      count: getCount(JobState.Completed),
+    },
+  ];
+};