@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/bug/views/bug-list/index.tsx

@@ -0,0 +1,344 @@
+// 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 { useCallback, useMemo, useRef, useState, type CSSProperties } from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import {
+  bulkArchiveBugsFn,
+  bulkDeleteBugsFn,
+  bulkUpdateBugsFn,
+} from "@/server/serverFns/bug";
+import { toast } from "@allbluecn/ui/toast";
+import type { UserBrief } from "@/components/story/types";
+import type { BugDisplayOptions, BugDisplayProperty } from "../../display/types";
+import type { BugGroupNode, BugPatch, PagedBugGroupNode } from "../../display/use-paged-bug-groups";
+import { BugGroupHeader, BugGroupTailRow } from "./group";
+import { BugListRow } from "./row";
+import { BugBatchToolbar } from "./batch-toolbar";
+import { computeGroupCheckState, toggleGroupSelection } from "./group-select";
+import { WavePhysicsLoader } from "@/components/shared-kit/loading/wave-physics-loader";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+const HEADER_ROW_HEIGHT = 36;
+const BUG_ROW_HEIGHT = 44;
+const OVERSCAN = 8;
+
+type FlatRow =
+  | { kind: "header"; key: string; node: BugGroupNode; isCollapsed: boolean }
+  | { kind: "bug"; key: string; bug: BugGroupNode["items"][number]; groupKey: string }
+  | { kind: "tail"; key: string; groupKey: string; hasMore: boolean; loading: boolean };
+
+interface BugListProps {
+  groups: PagedBugGroupNode[];
+  /** 首屏加载中：显示骨架行而非「暂无 BUG」空态，避免加载期间闪烁空态文案 */
+  isLoading?: boolean;
+  displayFilters: BugDisplayOptions;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  projectId?: string;
+  onRefresh: () => void;
+  /** 行内编辑乐观原地更新（替代整表 refresh，保持未触发规则的行位置不变） */
+  onPatchBug: (bugId: string, patch: BugPatch) => void;
+  onOpenBug?: (id: string) => void;
+  onLoadMoreGroup?: (groupKey: string) => void;
+}
+
+export function BugList({ groups, isLoading = false, displayFilters, users, labels, projectId, onRefresh, onPatchBug, onOpenBug, onLoadMoreGroup }: BugListProps) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  // 当前展开快捷创建行的组尾 key（组头 + 与组尾「添加」共享一个开关）
+  const [creatorKey, setCreatorKey] = useState<string | null>(null);
+
+  const toggleCollapse = useCallback((key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const tailHeights = useRef<Record<string, number>>({});
+  const setTailHeight = useCallback((key: string, h: number) => {
+    tailHeights.current[key] = h;
+  }, []);
+
+  // 单层分组的扁平行：header / bug / tail（BUG 无子组与子项，照 story use-flat-rows 裁剪）
+  const flatRows = useMemo<FlatRow[]>(() => {
+    const rows: FlatRow[] = [];
+    for (const g of groups) {
+      const isCollapsed = collapsed[g.key] ?? false;
+      rows.push({ kind: "header", key: g.key, node: { ...g, totalCount: g.total ?? g.items.length }, isCollapsed });
+      if (isCollapsed) continue;
+      g.items.forEach((bug) => {
+        rows.push({ kind: "bug", key: bug.id, bug, groupKey: g.key });
+      });
+      rows.push({
+        kind: "tail",
+        key: `${g.key}:tail`,
+        groupKey: g.key,
+        hasMore: !!g.hasMore,
+        loading: !!g.loading,
+      });
+    }
+    return rows;
+  }, [groups, collapsed]);
+
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+  const toggleBug = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  // 视觉顺序上的已加载 bug id（flatRows 稳定，分页展开后更新）
+  const loadedBugIds = useMemo(
+    () => flatRows.filter((r) => r.kind === "bug").map((r) => r.bug.id),
+    [flatRows],
+  );
+
+  const toggleAll = useCallback(() => {
+    setSelectedIds((prev) => {
+      const allChosen = loadedBugIds.length > 0 && loadedBugIds.every((id) => prev.has(id));
+      return allChosen ? new Set() : new Set(loadedBugIds);
+    });
+  }, [loadedBugIds]);
+
+  // 组 key → 组内全部 bug id，用于分组 checkbox 全选/全不选
+  const groupBugIds = useMemo(() => {
+    const map = new Map<string, string[]>();
+    for (const r of flatRows) {
+      if (r.kind === "bug") {
+        const ids = map.get(r.groupKey) ?? [];
+        ids.push(r.bug.id);
+        map.set(r.groupKey, ids);
+      }
+    }
+    return map;
+  }, [flatRows]);
+
+  const toggleGroup = useCallback((key: string) => {
+    const ids = groupBugIds.get(key);
+    if (!ids) return;
+    setSelectedIds((prev) => toggleGroupSelection(ids, prev));
+  }, [groupBugIds]);
+
+  const bulkArchive = useCallback(async (bugIds: string[]) => {
+    if (bugIds.length === 0) return;
+    try {
+      const res = await bulkArchiveBugsFn({ data: { bugIds } });
+      toast.success(
+        res.skipped > 0
+          ? m.bug_list_bulk_archived_skipped({ archived: res.archived, skipped: res.skipped })
+          : m.bug_list_bulk_archived({ count: res.archived }),
+      );
+      setSelectedIds(new Set());
+      onRefresh();
+    } catch (e) {
+      toastError(e, m.bug_list_archive_failed());
+    }
+  }, [onRefresh]);
+
+  const bulkDelete = useCallback(async (bugIds: string[]) => {
+    if (bugIds.length === 0) return;
+    try {
+      const res = await bulkDeleteBugsFn({ data: { bugIds } });
+      toast.success(m.bug_list_bulk_deleted({ count: res.deleted }));
+      setSelectedIds(new Set());
+      onRefresh();
+    } catch (e) {
+      toastError(e, m.bug_list_delete_failed());
+    }
+  }, [onRefresh]);
+
+  const bulkUpdate = useCallback(
+    async (patch: BugPatch) => {
+      if (selectedIds.size === 0) return;
+      try {
+        await bulkUpdateBugsFn({ data: { bugIds: [...selectedIds], patch } });
+        setSelectedIds(new Set());
+        toast.success(m.bug_list_bulk_updated());
+        onRefresh();
+      } catch (e) {
+        toastError(e, m.bug_list_bulk_update_failed());
+      }
+    },
+    [selectedIds, onRefresh],
+  );
+
+  const allSelected = loadedBugIds.length > 0 && selectedIds.size === loadedBugIds.length;
+
+  const groupHeaderIndexes = useMemo(
+    () =>
+      flatRows.reduce<number[]>(
+        (acc, r, i) => (r.kind === "header" ? [...acc, i] : acc),
+        [],
+      ),
+    [flatRows],
+  );
+  const activeStickyRef = useRef<{ headerIdx: number }>({ headerIdx: 0 });
+
+  const estimateSize = useCallback((i: number) => {
+    const row = flatRows[i];
+    if (!row) return HEADER_ROW_HEIGHT;
+    if (row.kind === "header") return HEADER_ROW_HEIGHT;
+    if (row.kind === "bug") return BUG_ROW_HEIGHT;
+    return tailHeights.current[row.key] ?? 40;
+  }, [flatRows]);
+
+  const rowVirtualizer = useVirtualizer({
+    count: flatRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize,
+    overscan: OVERSCAN,
+    rangeExtractor: useCallback(
+      (range) => {
+        const activeHeaderIdx = [...groupHeaderIndexes].reverse().find((i) => range.startIndex >= i);
+        activeStickyRef.current = { headerIdx: activeHeaderIdx ?? 0 };
+        const idx = new Set(defaultRangeExtractor(range));
+        if (activeHeaderIdx != null) idx.add(activeHeaderIdx);
+        return [...idx].sort((a, b) => a - b);
+      },
+      [groupHeaderIndexes],
+    ),
+    enabled: flatRows.length > 0,
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalHeight = rowVirtualizer.getTotalSize();
+  const remeasureRows = useCallback(() => rowVirtualizer.measure(), [rowVirtualizer]);
+
+  const renderVirtualRow = (virtualRow: (typeof virtualRows)[number]) => {
+    const row = flatRows[virtualRow.index];
+    if (!row) return null;
+    const baseStyle: CSSProperties = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      transform: `translateY(${virtualRow.start}px)`,
+    };
+    if (row.kind === "header") {
+      const isSticky = activeStickyRef.current.headerIdx === virtualRow.index;
+      const style: CSSProperties = isSticky
+        ? {
+            position: "sticky",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: HEADER_ROW_HEIGHT,
+            zIndex: 10,
+          }
+        : { ...baseStyle, height: HEADER_ROW_HEIGHT };
+      return (
+        <div key={row.key} style={style} className="relative">
+          <BugGroupHeader
+            node={row.node}
+            collapsed={row.isCollapsed}
+            collapseKey={row.key}
+            onToggle={toggleCollapse}
+            onCreate={() => {
+              // 折叠状态下先展开组再定位快捷创建行
+              if (row.isCollapsed) {
+                setCollapsed((prev) => ({ ...prev, [row.key]: false }));
+              }
+              setCreatorKey(`${row.key}:tail`);
+              remeasureRows();
+            }}
+            sticky={isSticky}
+            selectState={computeGroupCheckState(groupBugIds.get(row.key) ?? [], selectedIds)}
+            onToggleSelect={() => toggleGroup(row.key)}
+            showSelect={selectedIds.size > 0}
+          />
+        </div>
+      );
+    }
+    if (row.kind === "bug") {
+      return (
+        <div key={row.key} style={baseStyle}>
+          <BugListRow
+            bug={row.bug}
+            group={row.groupKey}
+            users={users}
+            labels={labels}
+            properties={displayFilters.properties as BugDisplayProperty[]}
+            onOpenBug={onOpenBug}
+            onPatchBug={onPatchBug}
+            selected={selectedIds.has(row.bug.id)}
+            onToggle={toggleBug}
+          />
+        </div>
+      );
+    }
+    if (row.kind === "tail") {
+      return (
+        <div key={row.key} style={baseStyle} id={row.key}>
+          <BugGroupTailRow
+            rowKey={row.key}
+            hasMore={row.hasMore}
+            loading={row.loading}
+            groupBy={displayFilters.groupBy}
+            groupKey={row.groupKey}
+            showEditor={creatorKey === row.key}
+            onShowEditorChange={(v) => setCreatorKey(v ? row.key : null)}
+            setTailHeight={setTailHeight}
+            remeasure={remeasureRows}
+            projectId={projectId}
+            users={users}
+            labels={labels}
+            onLoadMore={() => onLoadMoreGroup?.(row.groupKey)}
+            onCreated={onRefresh}
+          />
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+        <div style={{ height: totalHeight, position: "relative" }}>
+          {virtualRows.map((virtualRow) => renderVirtualRow(virtualRow))}
+        </div>
+        {isLoading && groups.length === 0 && (
+          <div className="flex flex-col items-center gap-3 py-12" aria-busy="true">
+            <WavePhysicsLoader />
+            <p className="text-sm text-muted-foreground">{m.bug_list_loading_data()}</p>
+          </div>
+        )}
+        {!isLoading && groups.length === 0 && (
+          <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+            {m.bug_list_no_bugs()}
+          </div>
+        )}
+      </div>
+      <BugBatchToolbar
+        selectedCount={selectedIds.size}
+        totalLoaded={loadedBugIds.length}
+        allSelected={allSelected}
+        busy={false}
+        selectedIds={loadedBugIds.filter((id) => selectedIds.has(id))}
+        users={users}
+        labels={labels}
+        onToggleAll={toggleAll}
+        onArchive={(ids) => void bulkArchive(ids)}
+        onDelete={(ids) => void bulkDelete(ids)}
+        onBulkUpdate={(patch) => void bulkUpdate(patch)}
+        onClearSelection={() => setSelectedIds(new Set())}
+      />
+    </div>
+  );
+}

package/src/components/bug/views/bug-list/inline-bug-creator.tsx

@@ -0,0 +1,129 @@
+// 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 { memo, useEffect, useRef, useState } from "react";
+import { Bug, Loader2, Check, X } from "lucide-react";
+import { createBugFn } from "@/server/serverFns/bug";
+import { toast } from "@allbluecn/ui/toast";
+import type { UserBrief } from "@/components/story/types";
+import type { BugState, BugSeverity } from "@/shared/bug/constants";
+import { StateEditor, SeverityEditor, AssigneeEditor, LabelsEditor } from "../../inline-editors";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+export interface InlineBugCreatorProps {
+  /** 快捷创建行继承该组的 state（规格 §6 入口 2） */
+  initialState: BugState;
+  /** 快捷创建行继承该组的 severity */
+  initialSeverity: BugSeverity;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  projectId?: string;
+  onCreated: () => void;
+  onCancel: () => void;
+}
+
+export const InlineBugCreator = memo(function InlineBugCreator({
+  initialState,
+  initialSeverity,
+  users,
+  labels,
+  projectId,
+  onCreated,
+  onCancel,
+}: InlineBugCreatorProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [title, setTitle] = useState("");
+  const [state, setState] = useState<BugState>(initialState);
+  const [severity, setSeverity] = useState<BugSeverity>(initialSeverity);
+  const [assigneeId, setAssigneeId] = useState<string | null>(null);
+  const [labelIds, setLabelIds] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = async () => {
+    const trimmed = title.trim();
+    if (!trimmed || loading) return;
+    setLoading(true);
+    try {
+      await createBugFn({
+        data: {
+          title: trimmed,
+          state,
+          severity,
+          assigneeId: assigneeId ?? undefined,
+          labelIds,
+          ...(projectId ? { projectId } : {}),
+        },
+      });
+      toast.success(m.bug_create_success());
+      setTitle("");
+      setAssigneeId(null);
+      setLabelIds([]);
+      onCreated();
+    } catch (e) {
+      toastError(e, m.bug_list_create_failed());
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-14 items-center gap-2 border-b border-border/40 bg-card px-6">
+      <div className="flex items-center gap-2 shrink-0 text-xs text-muted-foreground">
+        <Bug className="size-3.5" />
+        <span className="font-mono">BUG</span>
+      </div>
+      <input
+        ref={inputRef}
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") { e.preventDefault(); void handleSubmit(); }
+          if (e.key === "Escape") { e.preventDefault(); onCancel(); }
+        }}
+        placeholder={m.bug_inline_creator_placeholder()}
+        className="flex-1 min-w-0 h-7 rounded bg-background px-2 text-xs text-foreground outline-none border-border focus:ring-1 focus:ring-ring"
+      />
+      <SeverityEditor value={severity} onChange={setSeverity} variant="button" />
+      <StateEditor value={state} onChange={setState} variant="button" />
+      <AssigneeEditor assignee={users.find((u) => u.id === assigneeId) ?? null} users={users} onChange={setAssigneeId} variant="button" />
+      <LabelsEditor labelIds={labelIds} labels={labels} onChange={setLabelIds} variant="button" />
+      <button
+        type="button"
+        className="flex items-center justify-center size-7 rounded hover:bg-accent text-muted-foreground hover:text-foreground shrink-0 disabled:opacity-50"
+        disabled={loading}
+        onClick={() => void handleSubmit()}
+        aria-label={m.bug_inline_creator_create()}
+      >
+        {loading ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
+      </button>
+      <button
+        type="button"
+        className="flex items-center justify-center size-7 rounded hover:bg-accent text-muted-foreground hover:text-foreground shrink-0"
+        onClick={onCancel}
+        aria-label={m.bug_inline_creator_cancel()}
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  );
+});

package/src/components/bug/views/bug-list/row.tsx

@@ -0,0 +1,185 @@
+// 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 { memo, useCallback, useMemo, useRef, useState } from "react";
+import { useServerFn } from "@tanstack/react-start";
+import { CalendarClock, Pencil } from "lucide-react";
+import { Checkbox } from "@allbluecn/ui/checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+import { updateBugFn } from "@/server/serverFns/bug";
+import type { BugListItem } from "../../types";
+import type { BugState, BugSeverity } from "@/shared/bug/constants";
+import { SOURCE_LABEL, SOURCE_COLOR } from "@/shared/bug/constants";
+import type { UserBrief } from "@/components/story/types";
+import type { BugDisplayProperty } from "../../display/types";
+import type { BugPatch } from "../../display/use-paged-bug-groups";
+import { StateEditor, SeverityEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../../inline-editors";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+interface BugListRowProps {
+  bug: BugListItem;
+  group: string;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  properties: BugDisplayProperty[];
+  onOpenBug?: (id: string) => void;
+  /** 行内编辑保存成功后的乐观原地更新回调（未触发分组/排序规则时保持位置不变） */
+  onPatchBug: (bugId: string, patch: BugPatch) => void;
+  selected: boolean;
+  onToggle: (id: string) => void;
+}
+
+export const BugListRow = memo(function BugListRow({ bug, users, labels, properties, onOpenBug, onPatchBug, selected, onToggle }: BugListRowProps) {
+  const updateBug = useServerFn(updateBugFn);
+
+  const updateField = useCallback(
+    async (patch: BugPatch) => {
+      try {
+        // lastOccurAt 客户端允许 null（DateEditor 清除语义），服务端 z.string() 非可空 → 归一为 undefined（no-op）
+        await updateBug({ data: { bugId: bug.id, ...patch, lastOccurAt: patch.lastOccurAt ?? undefined } });
+        onPatchBug(bug.id, patch);
+      } catch (e) {
+        toastError(e, m.bug_row_update_failed());
+      }
+    },
+    [bug.id, updateBug, onPatchBug],
+  );
+
+  const setState = useCallback((v: BugState) => updateField({ state: v }), [updateField]);
+  const setSeverity = useCallback((v: BugSeverity) => updateField({ severity: v }), [updateField]);
+  const setAssignee = useCallback((v: string | null) => updateField({ assigneeId: v }), [updateField]);
+  const setLabels = useCallback((v: string[]) => updateField({ labelIds: v }), [updateField]);
+  // lastOccurAt 不支持清空（服务端 z.string() 非可空）：仅日期选择触发更新
+  const setLastOccurAt = useCallback(
+    (v: string | null) => {
+      if (!v) return;
+      void updateField({ lastOccurAt: v });
+    },
+    [updateField],
+  );
+
+  const currentLabelIds = useMemo(() => bug.labels.map((l) => l.id), [bug.labels]);
+
+  // 标题行内编辑：点击铅笔（或双击标题）进入编辑，Enter/失焦提交
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState(bug.title);
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
+  const startEditTitle = useCallback(() => {
+    setTitleDraft(bug.title);
+    setEditingTitle(true);
+    requestAnimationFrame(() => titleInputRef.current?.select());
+  }, [bug.title]);
+
+  const commitTitle = useCallback(() => {
+    setEditingTitle(false);
+    const next = titleDraft.trim();
+    if (!next || next === bug.title) return;
+    void updateField({ title: next });
+  }, [titleDraft, bug.title, updateField]);
+
+  return (
+    <div
+      className={cn(
+        "group flex h-11 items-center gap-1.5 border-b border-border/40 bg-card px-2 text-sm transition-colors hover:bg-muted/10",
+        selected && "bg-muted/20 hover:bg-muted/20",
+      )}
+    >
+      <Checkbox
+        checked={selected}
+        onCheckedChange={() => onToggle(bug.id)}
+        aria-label={m.bug_row_select_bug({ title: bug.title })}
+        className={cn("shrink-0 transition-opacity", selected ? "opacity-100" : "opacity-0 group-hover:opacity-100")}
+      />
+      <span className="font-mono text-xs text-muted-foreground shrink-0">{bug.identifier}</span>
+      {editingTitle ? (
+        <input
+          ref={titleInputRef}
+          type="text"
+          value={titleDraft}
+          onChange={(e) => setTitleDraft(e.target.value)}
+          onBlur={commitTitle}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") { e.preventDefault(); commitTitle(); }
+            if (e.key === "Escape") { e.preventDefault(); setEditingTitle(false); }
+          }}
+          autoFocus
+          className="min-w-0 flex-1 h-7 rounded bg-background px-2 text-sm font-medium outline-none border-border focus:ring-1 focus:ring-ring"
+        />
+      ) : (
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          <button
+            type="button"
+            onDoubleClick={startEditTitle}
+            onClick={() => onOpenBug?.(bug.id)}
+            className="min-w-0 flex-1 truncate text-left font-medium"
+          >
+            {bug.title}
+          </button>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={startEditTitle}
+                  aria-label={m.bug_row_edit_title()}
+                  className="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100"
+                />
+              }
+            >
+              <Pencil className="size-3" />
+            </TooltipTrigger>
+            <TooltipContent side="top" className="text-xs">{m.bug_row_edit_title()}</TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+
+      {properties.includes("severity") && (
+        <SeverityEditor value={bug.severity} onChange={setSeverity} variant="button" />
+      )}
+      {properties.includes("state") && (
+        <StateEditor value={bug.state} onChange={setState} variant="button" />
+      )}
+      {properties.includes("assignee") && (
+        <AssigneeEditor assignee={bug.assignee} users={users} onChange={setAssignee} variant="button" />
+      )}
+      {properties.includes("labels") && (
+        <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={setLabels} variant="button" />
+      )}
+      {properties.includes("source") && (
+        <span className={cn("inline-flex shrink-0 items-center rounded-sm border border-border px-1.5 py-0.5 text-xs", SOURCE_COLOR[bug.source]?.split(" ").find((c) => c.startsWith("text")))}>
+          {SOURCE_LABEL[bug.source]?.() ?? bug.source}
+        </span>
+      )}
+      {properties.includes("totalCount") && (
+        <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+          {m.bug_list_occurrences({ count: bug.totalCount })}
+        </span>
+      )}
+      {properties.includes("lastOccurAt") && (
+        <DateEditor
+          value={bug.lastOccurAt.slice(0, 10)}
+          onChange={setLastOccurAt}
+          label={m.bug_filter_field_lastOccurAt()}
+          icon={CalendarClock}
+        />
+      )}
+    </div>
+  );
+});