@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/bug-list-table.tsx

@@ -1,187 +0,0 @@
-// 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, useRef } from "react";
-import { flexRender, useTable, type SortingState } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { ArrowDown, ArrowUp, ChevronDown } from "lucide-react";
-import { bugOrderToSortingState, bugTableFeatures, createBugColumns, SORT_COLUMN_TO_ORDER } from "./columns";
-import { InfiniteScrollSentinel } from "@/components/infinite-scroll-sentinel";
-import type { BugListItem } from "./types";
-import { BUG_DISPLAY_PROPERTIES, type BugDisplayProperty, type BugOrderDirection, type BugOrderKey } from "./display/types";
-import type { PagedBugGroupNode } from "./display/use-paged-bug-groups";
-import { m } from "@/paraglide/messages.js";
-
-const ROW_HEIGHT = 44;
-
-/**
- * BUG 表格视图（照 story-list-table 同构改造）：
- * - 数据源为分组 hook 的已加载组（展平为行，不直连 listBugsFn——分页统一走分组 hook）
- * - 哨兵相交时对全部「还有更多」的组触发 onLoadMoreGroup 并聚合 Promise 返回
- *   （哨兵只在 thenable 完成后解除 loading，返回 void 会导致第二页起永久死锁）
- * - 排序单轨：orderBy/orderDir 是唯一事实源；列头箭头点击经 onOrderChange 回写
- *   显示选项（下拉高亮/持久化随之联动），enableSortingRemoval 关闭清除档
- */
-export function BugListTable({ groups, onOpenBug, properties, orderBy, orderDir, onLoadMoreGroup, onOrderChange }: {
-  groups: PagedBugGroupNode[];
-  onOpenBug?: (id: string) => void;
-  properties: BugDisplayProperty[];
-  orderBy: BugOrderKey;
-  orderDir: BugOrderDirection;
-  onLoadMoreGroup: (groupKey: string) => void | Promise<unknown>;
-  /** 列头排序变更回写显示选项（缺省时列头排序退化为只读展示） */
-  onOrderChange?: (orderBy: BugOrderKey, orderDir: BugOrderDirection) => void;
-}) {
-  // 排序完全由受控 props 派生（单轨）：本地 sorting 副本会与下拉/持久化脱节
-  const sorting = useMemo<SortingState>(() => bugOrderToSortingState(orderBy, orderDir), [orderBy, orderDir]);
-
-  const columns = useMemo(() => createBugColumns(), []);
-
-  const columnVisibility = useMemo(() => {
-    const vis: Record<string, boolean> = {};
-    BUG_DISPLAY_PROPERTIES.forEach((p) => {
-      vis[p] = properties.includes(p);
-    });
-    // 隐形排序列恒隐藏（仅承载 created/updated 的排序 accessor）
-    vis.createdAt = false;
-    vis.updatedAt = false;
-    return vis;
-  }, [properties]);
-
-  const handleSortingChange = (updater: SortingState | ((old: SortingState) => SortingState)) => {
-    const next = typeof updater === "function" ? updater(sorting) : updater;
-    const entry = next[next.length - 1];
-    if (!entry) return; // 清除档已被 enableSortingRemoval 关闭，防御性忽略
-    const nextOrder = SORT_COLUMN_TO_ORDER[entry.id];
-    if (!nextOrder) return;
-    const nextDir: BugOrderDirection = entry.desc ? "desc" : "asc";
-    if (nextOrder === orderBy && nextDir === orderDir) return;
-    onOrderChange?.(nextOrder, nextDir);
-  };
-
-  const data = useMemo<BugListItem[]>(() => groups.flatMap((g) => g.items), [groups]);
-
-  const table = useTable({
-    features: bugTableFeatures,
-    data,
-    columns,
-    state: { sorting, columnVisibility },
-    onSortingChange: handleSortingChange,
-    enableSortingRemoval: false,
-    initialState: {
-      columnPinning: { start: ["identifier", "title"], end: [] },
-    },
-  });
-
-  const { rows } = table.getRowModel();
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => ROW_HEIGHT,
-    overscan: 12,
-  });
-
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  const totalHeight = rowVirtualizer.getTotalSize();
-  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-  const paddingBottom = virtualRows.length > 0 ? totalHeight - virtualRows[virtualRows.length - 1].end : 0;
-
-  const headerGroups = table.getHeaderGroups();
-  const totalWidth = table.getTotalSize();
-
-  const hasMore = groups.some((g) => g.hasMore && !g.loading);
-  // 必须返回 Promise：哨兵只在 thenable 完成后 setLoading(false)，
-  // 否则 loadingRef 恒 true，第二次相交起永不再触发（第一页后死锁）
-  const handleLoadMore = () => {
-    const jobs = groups
-      .filter((g) => g.hasMore && !g.loading)
-      .map((g) => onLoadMoreGroup(g.key));
-    return Promise.all(jobs).then(() => undefined);
-  };
-
-  return (
-    <div ref={parentRef} className="h-full min-h-0 overflow-auto rounded-lg border bg-card">
-      <div style={{ width: totalWidth, minWidth: "100%" }}>
-        {/* 表头 */}
-        <div className="sticky top-0 z-10 flex h-9 items-center border-b bg-muted/50 backdrop-blur">
-          {headerGroups[0].headers.map((header) => {
-            const canSort = header.column.getCanSort();
-            const sortDir = header.column.getIsSorted();
-            return (
-              <div
-                key={header.id}
-                style={{ width: header.getSize() }}
-                className="flex h-full items-center gap-1 px-3 text-xs font-medium text-muted-foreground"
-              >
-                {flexRender(header.column.columnDef.header, header.getContext())}
-                {canSort && (
-                  <button
-                    type="button"
-                    onClick={header.column.getToggleSortingHandler()}
-                    className="text-muted-foreground/60 hover:text-foreground"
-                  >
-                    {sortDir === "asc" ? <ArrowUp className="size-3" />
-                      : sortDir === "desc" ? <ArrowDown className="size-3" />
-                      : <ChevronDown className="size-3" />}
-                  </button>
-                )}
-              </div>
-            );
-          })}
-        </div>
-
-        {/* 虚拟化行 */}
-        <div>
-          {paddingTop > 0 && <div style={{ height: paddingTop }} />}
-          {virtualRows.map((virtualRow) => {
-            const row = rows[virtualRow.index];
-            return (
-              <button
-                key={row.original.id}
-                type="button"
-                data-testid="bug-table-row"
-                onClick={() => onOpenBug?.(row.original.id)}
-                style={{ height: ROW_HEIGHT }}
-                className="flex w-full items-center border-b border-border/40 text-sm hover:bg-accent/40 transition-colors"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <div
-                    key={cell.id}
-                    style={{ width: cell.column.getSize() }}
-                    className="flex h-full items-center overflow-hidden px-3"
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </div>
-                ))}
-              </button>
-            );
-          })}
-          {paddingBottom > 0 && <div style={{ height: paddingBottom }} />}
-          <InfiniteScrollSentinel loadedAllLabel={m.bug_list_loaded_all()} onLoadMore={handleLoadMore} hasMore={hasMore} rootRef={parentRef} />
-        </div>
-
-        {rows.length === 0 && (
-          <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
-            {m.bug_table_empty()}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/bug/columns.tsx

@@ -1,193 +0,0 @@
-// 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 {
-  columnPinningFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  createSortedRowModel,
-  rowSortingFeature,
-  sortFns,
-  tableFeatures,
-  type ColumnDef,
-} from "@tanstack/react-table";
-import { Badge } from "@/components/ui/badge";
-import { UserAvatar } from "@/components/shared-kit";
-import { SEVERITY_COLOR, SEVERITY_LABEL, SOURCE_COLOR, SOURCE_LABEL, STATE_COLOR, STATE_LABEL, severityRank, type BugSeverity } from "@/shared/bug/constants";
-import type { BugListItem } from "./types";
-import type { BugOrderDirection, BugOrderKey } from "./display/types";
-import { m } from "@/paraglide/messages.js";
-
-export const bugTableFeatures = tableFeatures({
-  rowSortingFeature,
-  columnPinningFeature,
-  columnSizingFeature,
-  columnVisibilityFeature,
-  sortFns,
-  sortedRowModel: createSortedRowModel(),
-});
-
-/** OrderKey → 排序列 id（与服务端 BUG_ORDER_FIELD 对齐；createdAt/updatedAt 为隐形排序列） */
-export const BUG_ORDER_SORT_COLUMN: Record<BugOrderKey, string> = {
-  manual: "createdAt",
-  created: "createdAt",
-  updated: "updatedAt",
-  severity: "severity",
-};
-
-/** 排序列 id → OrderKey（列头排序回写用；createdAt 反向映射取 created 而非 manual） */
-export const SORT_COLUMN_TO_ORDER: Record<string, BugOrderKey> = {
-  createdAt: "created",
-  updatedAt: "updated",
-  severity: "severity",
-};
-
-/** 显示选项排序 → react-table SortingState（manual = 录入序 createdAt asc） */
-export function bugOrderToSortingState(orderBy: BugOrderKey, orderDir: BugOrderDirection) {
-  return [{ id: BUG_ORDER_SORT_COLUMN[orderBy], desc: orderDir === "desc" }];
-}
-
-function formatDate(iso: string | null): string {
-  if (!iso) return "—";
-  const d = new Date(iso.slice(0, 10));
-  return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
-}
-
-export function createBugColumns(): ColumnDef<typeof bugTableFeatures, BugListItem>[] {
-  return [
-    {
-      accessorKey: "identifier",
-      header: m.bug_column_identifier(),
-      size: 110,
-      cell: ({ row }) => (
-        <span className="font-mono text-xs text-muted-foreground">{row.original.identifier}</span>
-      ),
-    },
-    {
-      accessorKey: "title",
-      header: m.bug_column_title(),
-      size: 260,
-      cell: ({ row }) => <span className="truncate font-medium">{row.original.title}</span>,
-    },
-    {
-      accessorKey: "state",
-      header: m.bug_column_state(),
-      size: 100,
-      cell: ({ row }) => (
-        <Badge variant="outline" className={STATE_COLOR[row.original.state]}>
-          {STATE_LABEL[row.original.state]?.() ?? row.original.state}
-        </Badge>
-      ),
-    },
-    {
-      accessorKey: "severity",
-      header: m.bug_column_severity(),
-      size: 100,
-      // severity 是 String 列（DB 字典序 ≠ rank 序），按 severityRank 全序比较
-      //（v9 改名：sortingFn → sortFn）
-      sortFn: (rowA, rowB) =>
-        severityRank(rowA.original.severity as BugSeverity) - severityRank(rowB.original.severity as BugSeverity),
-      cell: ({ row }) => (
-        <Badge
-          variant="outline"
-          data-testid="bug-table-severity"
-          className={SEVERITY_COLOR[row.original.severity]}
-        >
-          {SEVERITY_LABEL[row.original.severity]?.() ?? row.original.severity}
-        </Badge>
-      ),
-    },
-    {
-      id: "assignee",
-      header: m.bug_column_assignee(),
-      size: 140,
-      cell: ({ row }) => {
-        const a = row.original.assignee;
-        if (!a) return <span className="text-xs text-muted-foreground">{m.bug_list_unassigned()}</span>;
-        return (
-          <div className="flex items-center gap-2">
-            <UserAvatar
-              avatarConfig={a.avatarConfig}
-              bgShape={a.bgShape as "circle" | "rounded" | "square" | null}
-              bgColor={a.bgColor}
-              name={a.username}
-              size="sm"
-            />
-            <span className="text-xs">{a.username}</span>
-          </div>
-        );
-      },
-    },
-    {
-      id: "labels",
-      header: m.bug_column_labels(),
-      size: 160,
-      cell: ({ row }) => (
-        <div className="flex flex-wrap gap-1">
-          {row.original.labels.length === 0
-            ? <span className="text-xs text-muted-foreground">—</span>
-            : row.original.labels.map((l) => (
-                <span
-                  key={l.id}
-                  className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
-                  style={{ backgroundColor: `${l.color}22`, color: l.color }}
-                >
-                  {l.name}
-                </span>
-              ))}
-        </div>
-      ),
-    },
-    {
-      accessorKey: "source",
-      header: m.bug_column_source(),
-      size: 100,
-      cell: ({ row }) => (
-        <span
-          className={`inline-flex items-center rounded-sm border border-border px-1.5 py-0.5 text-xs ${SOURCE_COLOR[row.original.source]?.split(" ").find((c) => c.startsWith("text")) ?? ""}`}
-        >
-          {SOURCE_LABEL[row.original.source]?.() ?? row.original.source}
-        </span>
-      ),
-    },
-    {
-      accessorKey: "totalCount",
-      header: m.bug_column_totalCount(),
-      size: 90,
-      cell: ({ row }) => (
-        <span className="text-xs tabular-nums text-muted-foreground">{row.original.totalCount}</span>
-      ),
-    },
-    {
-      accessorKey: "lastOccurAt",
-      header: m.bug_column_lastOccurAt(),
-      size: 110,
-      cell: ({ row }) => <span className="text-xs">{formatDate(row.original.lastOccurAt)}</span>,
-    },
-    // 隐形排序列：created/updated 映射目标恒不在展示属性清单，仅承载排序
-    {
-      accessorKey: "createdAt",
-      header: "createdAt",
-      size: 0,
-    },
-    {
-      accessorKey: "updatedAt",
-      header: "updatedAt",
-      size: 0,
-    },
-  ];
-}

package/src/components/bug/filters/add-filter-dropdown.tsx

@@ -1,70 +0,0 @@
-// 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 { Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { FILTER_FIELD_CONFIGS, type BugFilterKey, type FilterCondition } from "./filter-types";
-import { m } from "@/paraglide/messages.js";
-
-interface AddFilterDropdownProps {
-  conditions: FilterCondition[];
-  onAdd: (property: BugFilterKey) => void;
-}
-
-export function AddFilterDropdown({ conditions, onAdd }: AddFilterDropdownProps) {
-  const [open, setOpen] = useState(false);
-  const usedKeys = new Set(conditions.map((c) => c.property));
-  const available = FILTER_FIELD_CONFIGS.filter((c) => !usedKeys.has(c.key));
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={
-        <Button
-          variant="ghost"
-          size="sm"
-          disabled={available.length === 0}
-          className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-        />
-      }>
-          <Plus className="size-3.5" />
-          {m.bug_filter_add_condition()}
-      </PopoverTrigger>
-      <PopoverContent className="w-48 p-1" align="start">
-        {available.length === 0 ? (
-          <div className="px-2 py-4 text-center text-xs text-muted-foreground">{m.bug_filter_all_added()}</div>
-        ) : (
-          available.map((config) => {
-            const Icon = config.icon;
-            return (
-              <button
-                key={config.key}
-                type="button"
-                onClick={() => { onAdd(config.key); setOpen(false); }}
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted transition-colors"
-              >
-                <Icon className="size-4 text-muted-foreground shrink-0" />
-                <span>{config.label()}</span>
-              </button>
-            );
-          })
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/bug/filters/applied-filters.tsx

@@ -1,214 +0,0 @@
-// 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 { X, Calendar, CircleUser, BrushCleaning } from "lucide-react";
-import { format, parseISO, isValid } from "date-fns";
-import { Button } from "@/components/ui/button";
-import { UserAvatar } from "@/components/shared-kit";
-import {
-  STATE_LABEL,
-  STATE_COLOR,
-  SEVERITY_LABEL,
-  SEVERITY_COLOR,
-  SOURCE_LABEL,
-  SOURCE_COLOR,
-  type BugState,
-  type BugSeverity,
-  type BugSource,
-} from "@/shared/bug/constants";
-import { getFilterLabel, getFilterIcon, type FilterCondition, type BugFilterKey } from "./filter-types";
-import { cn } from "@/lib/utils";
-import type { UserBrief } from "@/components/story/types";
-import { m } from "@/paraglide/messages.js";
-
-interface AppliedFiltersProps {
-  conditions: FilterCondition[];
-  onRemove: (id: string) => void;
-  onClearAll: () => void;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}
-
-const valueChipClass = "inline-flex items-center gap-1 px-1 py-0.5 leading-none";
-
-export function AppliedFilters({ conditions, onRemove, onClearAll, users, labels }: AppliedFiltersProps) {
-  if (conditions.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap items-center gap-1.5">
-      {conditions.map((c) => {
-        const Icon = getFilterIcon(c.property);
-        const isRange = c.operator === "between";
-        const isEmptyOp = c.operator === "is_empty" || c.operator === "is_not_empty";
-        const valueItems = !isEmptyOp && c.value ? (c.property === "title" || c.property === "env" ? [c.value] : c.value.split(",").filter(Boolean)) : [];
-
-        return (
-          <span
-            key={c.id}
-            className="inline-flex h-7 items-center rounded-full border border-border bg-muted/30 text-xs"
-          >
-            <span className="flex h-full items-center gap-1 rounded-l-full pl-2 pr-1.5 text-foreground">
-              <Icon className="size-3.5 shrink-0 text-muted-foreground" />
-              <span className="whitespace-nowrap font-medium">{getFilterLabel(c.property)()}</span>
-            </span>
-
-            {!isEmptyOp && valueItems.length > 0 && (
-              <>
-                <div className="h-4 w-px bg-border" />
-                <span className={cn("flex h-full items-center px-1.5", valueItems.length > 1 ? "gap-1.5" : "gap-1")}>
-                  {isRange && valueItems.length === 2 ? (
-                    <DateRangeChip from={valueItems[0]} to={valueItems[1]} />
-                  ) : (
-                    valueItems.map((item) => (
-                      <ValueChip
-                        key={item}
-                        property={c.property}
-                        valueItem={item}
-                        users={users}
-                        labels={labels}
-                      />
-                    ))
-                  )}
-                </span>
-              </>
-            )}
-
-            <button
-              type="button"
-              onClick={() => onRemove(c.id)}
-              className="flex size-7 shrink-0 items-center justify-center rounded-r-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            >
-              <X className="size-3.5" />
-            </button>
-          </span>
-        );
-      })}
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onClearAll}
-        className="h-7 rounded px-2 text-xs text-muted-foreground hover:text-foreground"
-      >
-        <BrushCleaning className="mr-1 size-3.5" />
-        {m.bug_filters_clear_all()}
-      </Button>
-    </div>
-  );
-}
-
-function ValueChip({
-  property,
-  valueItem,
-  users,
-  labels,
-}: {
-  property: BugFilterKey;
-  valueItem: string;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}) {
-  switch (property) {
-    case "state": {
-      const v = valueItem as BugState;
-      return (
-        <span className={valueChipClass}>
-          <span className={cn("whitespace-nowrap rounded-sm px-1", STATE_COLOR[v])}>{STATE_LABEL[v]?.() ?? valueItem}</span>
-        </span>
-      );
-    }
-    case "severity": {
-      const v = valueItem as BugSeverity;
-      return (
-        <span className={valueChipClass}>
-          <span className={cn("whitespace-nowrap rounded-sm px-1", SEVERITY_COLOR[v])}>{SEVERITY_LABEL[v]?.() ?? valueItem}</span>
-        </span>
-      );
-    }
-    case "source": {
-      const v = valueItem as BugSource;
-      return (
-        <span className={valueChipClass}>
-          <span className={cn("whitespace-nowrap rounded-sm px-1", SOURCE_COLOR[v])}>{SOURCE_LABEL[v]?.() ?? valueItem}</span>
-        </span>
-      );
-    }
-    case "assigneeId": {
-      if (valueItem === "__none__") {
-        return (
-          <span className={valueChipClass}>
-            <CircleUser className="size-3 text-muted-foreground" />
-            <span className="whitespace-nowrap text-muted-foreground">{m.bug_list_unassigned()}</span>
-          </span>
-        );
-      }
-      const u = users?.find((user) => user.id === valueItem);
-      if (!u) return <FallbackValue value={valueItem} />;
-      return (
-        <span className={valueChipClass}>
-          <UserAvatar
-            avatarConfig={u.avatarConfig}
-            bgShape="circle"
-            bgColor={u.bgColor}
-            name={u.username}
-            size="xs"
-            className="!w-4 !h-4"
-          />
-          <span className="whitespace-nowrap">{u.username}</span>
-        </span>
-      );
-    }
-    case "labelId": {
-      const l = labels?.find((lb) => lb.id === valueItem);
-      if (!l) return <FallbackValue value={valueItem} />;
-      return (
-        <span className={valueChipClass}>
-          <span className="inline-block size-2 rounded-full" style={{ backgroundColor: l.color }} />
-          <span className="whitespace-nowrap">{l.name}</span>
-        </span>
-      );
-    }
-    case "createdDate":
-    case "lastOccurAt": {
-      const d = parseISO(valueItem);
-      return (
-        <span className={valueChipClass}>
-          <Calendar className="size-3 text-muted-foreground" />
-          <span className="whitespace-nowrap">{isValid(d) ? format(d, "MM/dd") : valueItem}</span>
-        </span>
-      );
-    }
-    default:
-      return <FallbackValue value={valueItem} />;
-  }
-}
-
-function DateRangeChip({ from, to }: { from: string; to: string }) {
-  const f = parseISO(from);
-  const t = parseISO(to);
-  return (
-    <span className={valueChipClass}>
-      <Calendar className="size-3 text-muted-foreground" />
-      <span className="whitespace-nowrap">
-        {isValid(f) ? format(f, "MM/dd") : from} ~ {isValid(t) ? format(t, "MM/dd") : to}
-      </span>
-    </span>
-  );
-}
-
-function FallbackValue({ value }: { value: string }) {
-  return <span className={cn(valueChipClass, "whitespace-nowrap text-foreground")}>{value}</span>;
-}