@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/bug/filters/filter-value-input.tsx

@@ -0,0 +1,518 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from "react";
+import { CalendarIcon, Check, CircleUser } from "lucide-react";
+import { format } from "date-fns";
+import type { DateRange } from "react-day-picker";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@allbluecn/ui/input";
+import { UserAvatar } from "@/components/shared-kit";
+import { BUG_STATES, BUG_SEVERITIES, BUG_SOURCES, type BugState, type BugSeverity, type BugSource } from "@/shared/bug/constants";
+import type { BugFilterKey, FilterOperator } from "./filter-types";
+import type { UserBrief } from "@/components/story/types";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+
+interface FilterValueInputProps {
+  property: BugFilterKey;
+  operator: FilterOperator;
+  value: string;
+  onChange: (value: string) => void;
+  users?: UserBrief[];
+  labels?: { id: string; name: string; color: string }[];
+}
+
+const compactBtn = "h-6 rounded-sm bg-muted px-2 text-xs font-normal";
+
+interface EnumOption {
+  value: string;
+  label: () => string;
+  colorToken?: string;
+}
+
+export function FilterValueInput({ property, operator, value, onChange, users, labels }: FilterValueInputProps) {
+  const multi = operator === "is_any_of" || operator === "is_not_any_of";
+  const selected = value ? value.split(",").filter(Boolean) : [];
+
+  const handleMultiToggle = (val: string) => {
+    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+    onChange(next.length ? next.join(",") : "");
+  };
+
+  switch (property) {
+    case "state":
+      return (
+        <EnumSelect
+          options={BUG_STATES.map((s) => ({ value: s.value, label: s.label, colorToken: s.colorToken }))}
+          value={(selected[0] as BugState) ?? "open"}
+          onChange={(v) => onChange(v)}
+          mode={multi ? "multi" : "single"}
+          selected={selected}
+          onMultiChange={handleMultiToggle}
+          className={compactBtn}
+        />
+      );
+    case "severity":
+      return (
+        <EnumSelect
+          options={BUG_SEVERITIES.map((s) => ({ value: s.value, label: s.label, colorToken: s.colorToken }))}
+          value={(selected[0] as BugSeverity) ?? "medium"}
+          onChange={(v) => onChange(v)}
+          mode={multi ? "multi" : "single"}
+          selected={selected}
+          onMultiChange={handleMultiToggle}
+          className={compactBtn}
+        />
+      );
+    case "source":
+      return (
+        <EnumSelect
+          options={BUG_SOURCES.map((s) => ({ value: s.value, label: s.label, colorToken: s.colorToken }))}
+          value={(selected[0] as BugSource) ?? "manual"}
+          onChange={(v) => onChange(v)}
+          mode={multi ? "multi" : "single"}
+          selected={selected}
+          onMultiChange={handleMultiToggle}
+          className={compactBtn}
+        />
+      );
+    case "assigneeId": {
+      const realSelected = selected.filter((id) => id !== "__none__");
+      const selectedUser = !multi && realSelected[0] ? users?.find((u) => u.id === realSelected[0]) ?? null : null;
+      return (
+        <UserSelect
+          value={selectedUser}
+          users={users ?? []}
+          onChange={(id) => onChange(id ?? "__none__")}
+          mode={multi ? "multi" : "single"}
+          selected={selected}
+          onMultiChange={handleMultiToggle}
+          className={compactBtn}
+        />
+      );
+    }
+    case "labelId":
+      return (
+        <LabelSelect
+          labelIds={selected}
+          labels={labels ?? []}
+          onChange={(ids) => onChange(ids.length ? ids.join(",") : "")}
+          mode={multi ? "multi" : "single"}
+          className={compactBtn}
+        />
+      );
+    case "createdDate":
+    case "lastOccurAt":
+      return <DateSelect operator={operator} value={value} onChange={onChange} />;
+    case "title":
+      return (
+        <Input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          autoFocus
+          className="h-6 w-36 rounded-sm bg-background px-2 text-xs"
+        />
+      );
+    case "env":
+      return (
+        <Input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          autoFocus
+          placeholder={m.bug_filter_field_env()}
+          className="h-6 w-28 rounded-sm bg-background px-2 text-xs"
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+interface SelectRenderProps {
+  mode: "single" | "multi";
+  selected: string[];
+}
+
+/** 单/多选通用触发表ul：单选显示当前项 chip，多选显示全部已选 chip */
+function ChipTriggers({ mode, selected, renderOption }: SelectRenderProps & { renderOption: (v: string) => React.ReactNode }) {
+  if (mode === "multi" && selected.length > 0) {
+    return (
+      <>{selected.map((s) => <span key={s}>{renderOption(s)}</span>)}</>
+    );
+  }
+  return null;
+}
+
+function EnumSelect({
+  options,
+  value,
+  onChange,
+  mode,
+  selected,
+  onMultiChange,
+  className,
+}: {
+  options: EnumOption[];
+  value: string;
+  onChange: (value: string) => void;
+  mode: "single" | "multi";
+  selected: string[];
+  onMultiChange?: (value: string) => void;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const isMulti = mode === "multi";
+
+  const renderChip = (v: string) => {
+    const opt = options.find((o) => o.value === v);
+    if (!opt) return <FallbackChip key={v} value={v} />;
+    return (
+      <span key={v} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
+        <span className={cn("whitespace-nowrap rounded-sm px-1", opt.colorToken)}>{opt.label()}</span>
+      </span>
+    );
+  };
+
+  const current = options.find((o) => o.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {isMulti && selected.length > 0 ? (
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+          <ChipTriggers mode={mode} selected={selected} renderOption={renderChip} />
+        </PopoverTrigger>
+      ) : (
+        <PopoverTrigger render={<button type="button" className={cn("whitespace-nowrap transition-colors hover:bg-muted/80", className)} />}>
+          <span className={cn("rounded-sm px-1", current?.colorToken)}>{current?.label() ?? value}</span>
+        </PopoverTrigger>
+      )}
+      <PopoverContent className="w-40 p-1" align="start">
+        {options.map((opt) => {
+          const active = isMulti ? selected.includes(opt.value) : value === opt.value;
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => {
+                if (isMulti) {
+                  onMultiChange?.(opt.value);
+                } else {
+                  onChange(opt.value);
+                  setOpen(false);
+                }
+              }}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                active ? "bg-accent font-medium" : "hover:bg-muted",
+              )}
+            >
+              {isMulti && (
+                <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
+                  {active && <Check className="size-3" />}
+                </div>
+              )}
+              <span className={cn("rounded-sm px-1", opt.colorToken)}>{opt.label()}</span>
+              {!isMulti && active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+            </button>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function UserSelect({
+  value,
+  users,
+  onChange,
+  mode,
+  selected,
+  onMultiChange,
+  className,
+}: {
+  value: UserBrief | null;
+  users: UserBrief[];
+  onChange: (id: string | null) => void;
+  mode: "single" | "multi";
+  selected: string[];
+  onMultiChange?: (value: string) => void;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const isMulti = mode === "multi";
+
+  const renderChip = (v: string) => {
+    if (v === "__none__") {
+      return (
+        <span key={v} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs text-muted-foreground">
+          <CircleUser className="size-3" />
+          {m.bug_list_unassigned()}
+        </span>
+      );
+    }
+    const u = users.find((user) => user.id === v);
+    if (!u) return <FallbackChip key={v} value={v} />;
+    return (
+      <span key={v} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
+        <UserAvatar avatarConfig={u.avatarConfig} bgShape="circle" bgColor={u.bgColor} name={u.username} size="xs" className="!w-3.5 !h-3.5" />
+        <span className="whitespace-nowrap">{u.username}</span>
+      </span>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {isMulti && selected.length > 0 ? (
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+          <ChipTriggers mode={mode} selected={selected} renderOption={renderChip} />
+        </PopoverTrigger>
+      ) : (
+        <PopoverTrigger render={<button type="button" className={cn("flex items-center gap-1 whitespace-nowrap transition-colors hover:bg-muted/80", className)} />}>
+          {value ? (
+            <>
+              <UserAvatar avatarConfig={value.avatarConfig} bgShape="circle" bgColor={value.bgColor} name={value.username} size="xs" className="!w-3.5 !h-3.5" />
+              <span>{value.username}</span>
+            </>
+          ) : (
+            <>
+              <CircleUser className="size-3 text-muted-foreground" />
+              <span className="text-muted-foreground">{m.bug_list_unassigned()}</span>
+            </>
+          )}
+        </PopoverTrigger>
+      )}
+      <PopoverContent className="w-48 p-1" align="start">
+        <button
+          type="button"
+          onClick={() => {
+            if (isMulti) {
+              onMultiChange?.("__none__");
+            } else {
+              onChange(null);
+              setOpen(false);
+            }
+          }}
+          className={cn(
+            "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+            selected.includes("__none__") ? "bg-accent font-medium" : "hover:bg-muted",
+          )}
+        >
+          {isMulti && (
+            <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", selected.includes("__none__") ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
+              {selected.includes("__none__") && <Check className="size-3" />}
+            </div>
+          )}
+          <CircleUser className="size-3.5 text-muted-foreground" />
+          {m.bug_list_unassigned()}
+        </button>
+        {users.map((u) => {
+          const active = isMulti ? selected.includes(u.id) : value?.id === u.id;
+          return (
+            <button
+              key={u.id}
+              type="button"
+              onClick={() => {
+                if (isMulti) {
+                  onMultiChange?.(u.id);
+                } else {
+                  onChange(u.id);
+                  setOpen(false);
+                }
+              }}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                active ? "bg-accent font-medium" : "hover:bg-muted",
+              )}
+            >
+              {isMulti && (
+                <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
+                  {active && <Check className="size-3" />}
+                </div>
+              )}
+              <UserAvatar avatarConfig={u.avatarConfig} bgShape="circle" bgColor={u.bgColor} name={u.username} size="xs" className="!w-4 !h-4" />
+              <span className="truncate">{u.username}</span>
+              {!isMulti && active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+            </button>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function LabelSelect({
+  labelIds,
+  labels,
+  onChange,
+  mode,
+  className,
+}: {
+  labelIds: string[];
+  labels: { id: string; name: string; color: string }[];
+  onChange: (ids: string[]) => void;
+  mode: "single" | "multi";
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const isMulti = mode === "multi";
+
+  const toggle = (id: string) => {
+    const next = labelIds.includes(id) ? labelIds.filter((v) => v !== id) : [...labelIds, id];
+    onChange(next);
+  };
+
+  const renderChip = (id: string) => {
+    const l = labels.find((lb) => lb.id === id);
+    if (!l) return <FallbackChip key={id} value={id} />;
+    return (
+      <span key={id} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
+        <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
+        <span className="whitespace-nowrap">{l.name}</span>
+      </span>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {isMulti && labelIds.length > 0 ? (
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+          {labelIds.map(renderChip)}
+        </PopoverTrigger>
+      ) : (
+        <PopoverTrigger render={<button type="button" className={cn("whitespace-nowrap transition-colors hover:bg-muted/80", className)} />}>
+          {labelIds.length === 1 ? renderChip(labelIds[0]) : <span className="text-muted-foreground">{m.bug_filter_select_label()}</span>}
+        </PopoverTrigger>
+      )}
+      <PopoverContent className="w-48 p-1" align="start">
+        {labels.length === 0 ? (
+          <div className="px-2 py-3 text-center text-xs text-muted-foreground">{m.bug_filter_no_labels()}</div>
+        ) : (
+          labels.map((l) => {
+            const active = labelIds.includes(l.id);
+            return (
+              <button
+                key={l.id}
+                type="button"
+                onClick={() => {
+                  if (isMulti || labelIds.length > 0) {
+                    toggle(l.id);
+                  } else {
+                    onChange([l.id]);
+                    setOpen(false);
+                  }
+                }}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                  active ? "bg-accent font-medium" : "hover:bg-muted",
+                )}
+              >
+                <div className={cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", active ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
+                  {active && <Check className="size-3" />}
+                </div>
+                <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
+                <span className="truncate">{l.name}</span>
+              </button>
+            );
+          })
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function parseDate(value: string): Date | undefined {
+  const d = new Date(value);
+  return isNaN(d.getTime()) ? undefined : d;
+}
+
+function DateSelect({ operator, value, onChange }: { operator: FilterOperator; value: string; onChange: (v: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [range, setRange] = useState<DateRange | undefined>();
+
+  if (operator === "between") {
+    const from = range?.from;
+    const to = range?.to;
+
+    return (
+      <Popover
+        open={open}
+        onOpenChange={(o) => {
+          setOpen(o);
+          if (o) {
+            const parts = value ? value.split(",") : ["", ""];
+            const f = parseDate(parts[0]);
+            const t = parseDate(parts[1]);
+            setRange(f && t ? { from: f, to: t } : undefined);
+          }
+        }}
+      >
+        <PopoverTrigger render={<button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap" />}>
+            <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
+            {from && to ? `${format(from, "MM/dd")}~${format(to, "MM/dd")}` : m.bug_filter_select_range()}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={range}
+            defaultMonth={from ?? new Date()}
+            numberOfMonths={2}
+            min={1}
+            onSelect={(r) => {
+              setRange(r);
+              if (r?.from && r?.to) {
+                onChange([format(r.from, "yyyy-MM-dd"), format(r.to, "yyyy-MM-dd")].join(","));
+              }
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  const date = parseDate(value ?? "");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger render={<button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap" />}>
+          <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
+          {date ? format(date, "yyyy-MM-dd") : m.bug_filter_select_date()}
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start" initialFocus={false} finalFocus={false}>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(d) => {
+            if (d) {
+              onChange(format(d, "yyyy-MM-dd"));
+              setOpen(false);
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function FallbackChip({ value }: { value: string }) {
+  return (
+    <span className="inline-flex items-center rounded-sm border border-border px-1.5 py-0.5 text-xs whitespace-nowrap">
+      {value}
+    </span>
+  );
+}

package/src/components/bug/filters/index.tsx

@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export { BugFilterToggle } from "./filter-toggle";
+export { BugFilterRow } from "./filter-row";
+export { AppliedFilters } from "./applied-filters";
+export { deserializeFilters, serializeFilters, createDefaultCondition, getFilterConfig, getFilterLabel, getFilterIcon, FILTER_FIELD_CONFIGS, OPERATOR_LABELS } from "./filter-types";
+export type { FilterCondition, BugFilterKey, FilterOperator, FilterFieldType } from "./filter-types";

package/src/components/bug/inline-editors/assignee-editor.tsx

@@ -0,0 +1,136 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useMemo, useState } from "react";
+import { CircleUser, Search, Check } from "lucide-react";
+import { Input } from "@allbluecn/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { UserAvatar } from "@/components/shared-kit";
+import type { UserBrief } from "@/components/story/types";
+import { cn } from "@/lib/utils";
+import { InlineTrigger } from "./inline-trigger";
+import { m } from "@/paraglide/messages.js";
+
+interface AssigneeEditorProps {
+  assignee: UserBrief | null;
+  users: UserBrief[];
+  onChange: (userId: string | null) => void;
+  className?: string;
+  /** 渲染形态：chip=有值时显示 chip 边框（筛选场景），button=始终 Button（列表/详情场景） */
+  variant?: "chip" | "button";
+}
+
+export function AssigneeEditor({ assignee, users, onChange, className, variant = "chip" }: AssigneeEditorProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const showChip = variant === "chip";
+  const filtered = useMemo(
+    () => (search ? users.filter((u) => u.username.includes(search)) : users),
+    [users, search],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={(v) => { setOpen(v); if (v) setSearch(""); }}>
+      {showChip && assignee ? (
+        <PopoverTrigger render={<div className="flex items-center gap-1" />}>
+            <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
+              <UserAvatar
+                avatarConfig={assignee.avatarConfig}
+                bgShape="circle"
+                bgColor={assignee.bgColor}
+                name={assignee.username}
+                size="xs"
+                className="!w-4 !h-4"
+              />
+              <span className="text-xs">{assignee.username}</span>
+            </span>
+          </PopoverTrigger>
+      ) : (
+        <InlineTrigger
+          title={m.bug_filter_field_assignee()}
+          value={assignee?.username ?? m.bug_list_unassigned()}
+          hasValue={!!assignee}
+          icon={assignee ? (
+            <UserAvatar
+              avatarConfig={assignee.avatarConfig}
+              bgShape="circle"
+              bgColor={assignee.bgColor}
+              name={assignee.username}
+              size="xs"
+            />
+          ) : (
+            <CircleUser className="size-3.5 shrink-0 text-muted-foreground" />
+          )}
+          label={assignee?.username}
+          className={className}
+        />
+      )}
+      <PopoverContent className="w-52 p-1 flex flex-col gap-0 max-h-72" align="start">
+        <div className="relative mb-1 shrink-0 sticky top-0 z-10 bg-popover py-0.5 -mx-1 px-1 -mt-1 flex items-center gap-1">
+          <Search className="absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={m.bug_inline_search_members()}
+            className="h-6 pl-8 pr-2 text-xs md:text-xs"
+          />
+        </div>
+        <div className="overflow-y-auto min-h-0 flex-1 -mx-1 -mb-1 p-1">
+          <button
+            type="button"
+            onClick={() => { onChange(null); setOpen(false); }}
+            className={cn(
+              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+              !assignee ? "bg-accent font-medium" : "hover:bg-muted",
+            )}
+          >
+            <CircleUser strokeWidth={1.5} className="size-6 text-muted-foreground" />
+            {m.bug_list_unassigned()}
+          </button>
+          {filtered.length === 0 ? (
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">{m.bug_inline_no_match_members()}</div>
+          ) : (
+            filtered.map((u) => {
+              const active = assignee?.id === u.id;
+              return (
+                <button
+                  key={u.id}
+                  type="button"
+                  onClick={() => { onChange(u.id); setOpen(false); }}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    active ? "bg-accent font-medium" : "hover:bg-muted",
+                  )}
+                >
+                  <UserAvatar
+                    avatarConfig={u.avatarConfig}
+                    bgShape={u.bgShape as "circle" | "rounded" | "square" | null}
+                    bgColor={u.bgColor}
+                    name={u.username}
+                    size="sm"
+                  />
+                  {u.username}
+                  {active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+                </button>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}