feat: Filter workflows by tag + update existing filter UI

frontend/src/components/ui/filter-chip.ts

@@ -0,0 +1,163 @@
+import { localized } from "@lit/localize";
+import type { SlDropdown } from "@shoelace-style/shoelace";
+import clsx from "clsx";
+import { html } from "lit";
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+} from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { focusable } from "tabbable";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import type { BtrixChangeEvent } from "@/events/btrix-change";
+import { tw } from "@/utils/tailwind";
+
+export type BtrixFilterChipChangeEvent = BtrixChangeEvent;
+
+/**
+ * A filter chip lets users select a content filter. If there's only one option, the chip toggles on and off.
+ * Otherwise, clicking the chip reveals a dropdown menu of filter options.
+ *
+ * Filter chips are meant to be shown as multiple filter options, hence the plus (`+`) icon to indicate adding a filter.
+ *
+ * @slot
+ * @slot dropdown-header
+ * @slot dropdown-content
+ *
+ * @fires btrix-change
+ */
+@customElement("btrix-filter-chip")
+@localized()
+export class FilterChip extends TailwindElement {
+  @property({ type: Boolean })
+  checked?: boolean;
+
+  @property({ type: Boolean })
+  selectFromDropdown?: boolean;
+
+  @property({ type: Boolean })
+  stayOpenOnChange?: boolean;
+
+  @property({ type: Boolean })
+  open?: boolean;
+
+  @query("sl-dropdown")
+  private readonly dropdown?: SlDropdown | null;
+
+  @queryAssignedElements({ slot: "dropdown-content" })
+  private readonly dropdownContent!: HTMLElement[];
+
+  render() {
+    if (this.selectFromDropdown) {
+      return html`
+        <sl-dropdown
+          distance="4"
+          hoist
+          ?stayOpenOnSelect=${this.stayOpenOnChange}
+          class="group/dropdown"
+          @sl-change=${() => {
+            if (!this.stayOpenOnChange) {
+              void this.dropdown?.hide();
+            }
+          }}
+          ?open=${this.open}
+          @keydown=${{ handleEvent: this.onKeyDown, capture: true }}
+        >
+          ${this.renderButton()}
+
+          <div
+            class="flex max-h-[var(--auto-size-available-height)] max-w-[var(--auto-size-available-width)] flex-col overflow-hidden rounded border bg-white text-left"
+          >
+            <header
+              class="flex-shrink-0 flex-grow-0 overflow-hidden rounded-t bg-white"
+            >
+              <slot name="dropdown-header"></slot>
+            </header>
+            <slot name="dropdown-content"></slot>
+          </div>
+        </sl-dropdown>
+      `;
+    }
+
+    return this.renderButton();
+  }
+
+  private renderButton() {
+    return html`
+      <sl-button
+        slot=${ifDefined(this.selectFromDropdown ? "trigger" : undefined)}
+        role="checkbox"
+        aria-checked=${this.checked ? "true" : "false"}
+        size="small"
+        ?caret=${this.selectFromDropdown}
+        outline
+        pill
+        class=${clsx([
+          tw`part-[] part-[suffix]:-mr-0.5`,
+          tw`hover:part-[base]:border-primary-300 hover:part-[base]:bg-transparent hover:part-[base]:text-primary-600`,
+          tw`aria-checked:part-[base]:border-primary-300 aria-checked:part-[base]:bg-primary-50/80 aria-checked:part-[base]:text-primary-600`,
+          tw`group-open/dropdown:part-[base]:border-primary-300 group-open/dropdown:part-[caret]:text-primary-600 group-open/dropdown:part-[label]:text-primary-600`,
+        ])}
+        @click=${this.onClick}
+      >
+        <sl-icon
+          class="size-4 text-base group-open/dropdown:text-primary-600"
+          slot="prefix"
+          name=${this.checked ? "check2-circle" : "plus-circle-dotted"}
+        ></sl-icon>
+        <slot></slot>
+      </sl-button>
+    `;
+  }
+
+  private readonly onClick = () => {
+    if (!this.selectFromDropdown) {
+      this.toggleChecked();
+    }
+  };
+
+  private readonly onKeyDown = (e: KeyboardEvent) => {
+    if (
+      this.selectFromDropdown &&
+      this.dropdown?.open &&
+      this.dropdownContent.length
+    ) {
+      // Enable basic focus trapping
+      const options = focusable(this.dropdownContent[0]);
+
+      if (!options.length) return;
+
+      const focused = options.findIndex((opt) => opt.matches(":focus"));
+
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          options[
+            focused === -1 || focused === options.length - 1 ? 0 : focused + 1
+          ].focus();
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          options[
+            focused === -1 || focused === 0 ? options.length - 1 : focused - 1
+          ].focus();
+          break;
+        }
+        default:
+          break;
+      }
+    }
+  };
+
+  private toggleChecked() {
+    this.checked = !this.checked;
+
+    this.dispatchEvent(
+      new CustomEvent<BtrixFilterChipChangeEvent["detail"]>("btrix-change"),
+    );
+  }
+}

frontend/src/components/ui/index.ts

@@ -20,6 +20,7 @@ import("./data-grid");
 import("./details");
 import("./file-input");
 import("./file-list");
+import("./filter-chip");
 import("./format-date");
 import("./inline-input");
 import("./language-select");

frontend/src/controllers/localize.ts

@@ -34,4 +34,6 @@ export class LocalizeController extends SlLocalizeController {
   };
 
   readonly bytes = localize.bytes;
+
+  readonly list = localize.list;
 }

frontend/src/features/crawl-workflows/index.ts

@@ -7,3 +7,5 @@ import("./queue-exclusion-form");
 import("./queue-exclusion-table");
 import("./workflow-editor");
 import("./workflow-list");
+import("./workflow-schedule-filter");
+import("./workflow-tag-filter");

frontend/src/features/crawl-workflows/workflow-schedule-filter.ts

@@ -0,0 +1,126 @@
+import { localized, msg } from "@lit/localize";
+import type { SlChangeEvent, SlRadioGroup } from "@shoelace-style/shoelace";
+import { html, nothing, type PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { BtrixElement } from "@/classes/BtrixElement";
+import type { BtrixChangeEvent } from "@/events/btrix-change";
+
+export type BtrixChangeWorkflowScheduleFilterEvent = BtrixChangeEvent<
+  undefined | boolean
+>;
+
+enum ScheduleType {
+  Scheduled = "Scheduled",
+  None = "None",
+  Any = "Any",
+}
+
+/**
+ * @fires btrix-change
+ */
+@customElement("btrix-workflow-schedule-filter")
+@localized()
+export class WorkflowScheduleFilter extends BtrixElement {
+  @property({ type: Boolean })
+  schedule?: boolean;
+
+  #schedule?: boolean;
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("schedule")) {
+      this.#schedule = this.schedule;
+    }
+  }
+
+  render() {
+    const radio = (label: string, value: string) => html`
+      <sl-radio
+        class="!mt-0 w-full part-[base]:w-full part-[base]:rounded part-[base]:p-2 part-[base]:hover:bg-primary-50 part-[base]:focus:bg-primary-50"
+        value=${value}
+        >${label}</sl-radio
+      >
+    `;
+
+    return html`
+      <btrix-filter-chip
+        ?checked=${this.schedule !== undefined}
+        selectFromDropdown
+        @sl-after-hide=${() => {
+          if (this.#schedule !== this.schedule) {
+            this.dispatchEvent(
+              new CustomEvent<BtrixChangeWorkflowScheduleFilterEvent["detail"]>(
+                "btrix-change",
+                {
+                  detail: { value: this.#schedule },
+                },
+              ),
+            );
+          }
+        }}
+      >
+        ${this.schedule === undefined
+          ? msg("Schedule")
+          : html`<span
+              >${this.schedule ? msg("Scheduled") : msg("No Schedule")}</span
+            >`}
+
+        <div
+          slot="dropdown-header"
+          class="flex items-center justify-between py-1"
+        >
+          <sl-menu-label class="part-[base]:px-4" id="schedule-list-label">
+            ${msg("Filter by Schedule Type")}
+          </sl-menu-label>
+          ${this.schedule !== undefined
+            ? html`<sl-button
+                variant="text"
+                size="small"
+                @click=${() => {
+                  this.dispatchEvent(
+                    new CustomEvent<BtrixChangeEvent["detail"]>(
+                      "btrix-change",
+                      {
+                        detail: {
+                          value: undefined,
+                        },
+                      },
+                    ),
+                  );
+                }}
+                >${msg("Clear Filter")}</sl-button
+              >`
+            : nothing}
+        </div>
+
+        <div slot="dropdown-content" class="p-1">
+          <sl-radio-group
+            @sl-change=${(e: SlChangeEvent) => {
+              const { value } = e.target as SlRadioGroup;
+
+              switch (value as ScheduleType) {
+                case ScheduleType.Scheduled:
+                  this.#schedule = true;
+                  break;
+                case ScheduleType.None:
+                  this.#schedule = false;
+                  break;
+                default:
+                  this.#schedule = undefined;
+                  break;
+              }
+            }}
+            value=${this.schedule === undefined
+              ? ScheduleType.Any
+              : this.schedule
+                ? ScheduleType.Scheduled
+                : ScheduleType.None}
+          >
+            ${radio(msg("Scheduled"), ScheduleType.Scheduled)}
+            ${radio(msg("No Schedule"), ScheduleType.None)}
+          </sl-radio-group>
+        </div>
+      </btrix-filter-chip>
+    `;
+  }
+}