@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/filters/filter-condition.tsx

@@ -1,152 +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 } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-import { FILTER_FIELD_CONFIGS, OPERATOR_LABELS, type FilterCondition, type FilterKey, type FilterOperator } from "./filter-types";
-import { FilterValueInput } from "./filter-value-input";
-import type { UserBrief } from "../types";
-import { m } from "@/paraglide/messages.js";
-
-function getFilterConfig(key: FilterKey) {
-  return FILTER_FIELD_CONFIGS.find((c) => c.key === key) ?? FILTER_FIELD_CONFIGS[0];
-}
-
-interface FilterConditionRowProps {
-  condition: FilterCondition;
-  onChangeProperty: (property: FilterKey) => void;
-  onChangeOperator: (operator: FilterOperator) => void;
-  onChangeValue: (value: string) => void;
-  onRemove: () => void;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}
-
-export function FilterConditionRow({ condition, onChangeProperty, onChangeOperator, onChangeValue, onRemove, users, labels }: FilterConditionRowProps) {
-  const config = getFilterConfig(condition.property);
-  if (!config) return null;
-
-  const Icon = config.icon;
-  const availableProperties = FILTER_FIELD_CONFIGS;
-
-  return (
-    <div className="inline-flex h-7 items-center rounded-sm border border-border bg-muted/30 text-xs">
-      <PropertySelect
-        current={condition.property}
-        options={availableProperties}
-        onChange={onChangeProperty}
-      />
-
-      <div className="h-4 w-px bg-border" />
-
-      <OperatorSelect
-        current={condition.operator}
-        operators={config.operators}
-        onChange={onChangeOperator}
-      />
-
-      {condition.operator !== "is_empty" && condition.operator !== "is_not_empty" && (
-        <>
-          <div className="h-4 w-px bg-border" />
-          <div className="px-1.5">
-            <FilterValueInput
-              property={condition.property}
-              operator={condition.operator}
-              value={condition.value}
-              onChange={onChangeValue}
-              users={users}
-              labels={labels}
-            />
-          </div>
-        </>
-      )}
-
-      <button
-        type="button"
-        onClick={onRemove}
-        className="flex size-7 shrink-0 items-center justify-center rounded-r-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-      >
-        <X className="size-3.5" />
-      </button>
-    </div>
-  );
-}
-
-function PropertySelect({ current, options, onChange }: { current: FilterKey; options: typeof FILTER_FIELD_CONFIGS; onChange: (key: FilterKey) => void }) {
-  const CurrentIcon = options.find((o) => o.key === current)?.icon;
-  return (
-    <Popover>
-      <PopoverTrigger render={<button className="flex h-full items-center gap-1 rounded-l-sm px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
-          {CurrentIcon && <CurrentIcon className="size-3.5 shrink-0" />}
-          <span className="pr-1">{options.find((o) => o.key === current)?.label() ?? current}</span>
-      </PopoverTrigger>
-      <PopoverContent className="w-40 p-1" align="start">
-        {options.map((opt) => {
-          const OptIcon = opt.icon;
-          const active = opt.key === current;
-          return (
-            <button
-              key={opt.key}
-              type="button"
-              onClick={() => onChange(opt.key)}
-              className={cn("flex w-full items-center gap-2 rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
-            >
-              <OptIcon className="size-4 text-muted-foreground" />
-              <span>{opt.label()}</span>
-            </button>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function OperatorSelect({ current, operators, onChange }: { current: FilterOperator; operators: FilterOperator[]; onChange: (op: FilterOperator) => void }) {
-  const isSingle = (op: FilterOperator) => op === "is" || op === "is_not";
-  const isMulti = (op: FilterOperator) => op === "is_any_of" || op === "is_not_any_of";
-
-  return (
-    <Popover>
-      <PopoverTrigger render={<button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
-          {OPERATOR_LABELS[current]()}
-        </PopoverTrigger>
-      <PopoverContent className="w-40 p-1" align="start">
-        {operators.map((op) => {
-          const active = op === current;
-          return (
-            <button
-              key={op}
-              type="button"
-              onClick={() => onChange(op)}
-              className={cn("flex w-full items-center justify-between rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
-            >
-              <span>{OPERATOR_LABELS[op]()}</span>
-              {isSingle(op) && (
-                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.story_filter_single()}</span>
-              )}
-              {isMulti(op) && (
-                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.story_filter_multi()}</span>
-              )}
-            </button>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-}
-

package/src/components/story/filters/filter-row.tsx

@@ -1,116 +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 { useCallback } from "react";
-import { CopyPlus, BrushCleaning, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { AddFilterDropdown } from "./add-filter-dropdown";
-import { FilterConditionRow } from "./filter-condition";
-import { createDefaultCondition, type FilterCondition, type FilterKey, type FilterOperator } from "./filter-types";
-import type { UserBrief } from "../types";
-import { m } from "@/paraglide/messages.js";
-
-interface StoryFilterRowProps {
-  conditions: FilterCondition[];
-  onChange: (conditions: FilterCondition[]) => void;
-  onClearAll: () => void;
-  onCancel?: () => void;
-  onSaveAsView?: () => void;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}
-
-export function StoryFilterRow({ conditions, onChange, onClearAll, onCancel, onSaveAsView, users, labels }: StoryFilterRowProps) {
-  const handleAdd = useCallback((property: FilterKey) => {
-    onChange([...conditions, createDefaultCondition(property)]);
-  }, [conditions, onChange]);
-
-  const handleRemove = useCallback((id: string) => {
-    onChange(conditions.filter((c) => c.id !== id));
-  }, [conditions, onChange]);
-
-  const handleChangeProperty = useCallback((id: string, property: FilterKey) => {
-    const defaultOp = createDefaultCondition(property);
-    onChange(conditions.map((c) => c.id === id ? { ...c, property, operator: defaultOp.operator, value: "" } : c));
-  }, [conditions, onChange]);
-
-  const handleChangeOperator = useCallback((id: string, operator: FilterOperator) => {
-    onChange(conditions.map((c) => c.id === id ? { ...c, operator, value: operator === "is_empty" || operator === "is_not_empty" ? "" : c.value } : c));
-  }, [conditions, onChange]);
-
-  const handleChangeValue = useCallback((id: string, value: string) => {
-    onChange(conditions.map((c) => c.id === id ? { ...c, value } : c));
-  }, [conditions, onChange]);
-
-  return (
-    <div className="flex w-full items-start gap-2 rounded-lg bg-muted/50 px-3 py-2">
-      <div className="flex flex-1 flex-wrap items-center gap-1.5">
-        {conditions.length > 0 ? (
-          conditions.map((condition) => (
-            <FilterConditionRow
-              key={condition.id}
-              condition={condition}
-              onChangeProperty={(p) => handleChangeProperty(condition.id, p)}
-              onChangeOperator={(o) => handleChangeOperator(condition.id, o)}
-              onChangeValue={(v) => handleChangeValue(condition.id, v)}
-              onRemove={() => handleRemove(condition.id)}
-              users={users}
-              labels={labels}
-            />
-          ))
-        ) : (
-          <span className="px-1 text-xs text-muted-foreground">{m.story_filter_label()}</span>
-        )}
-        <AddFilterDropdown conditions={conditions} onAdd={handleAdd} />
-      </div>
-      <div className="flex shrink-0 items-center gap-2 border-l border-border pl-3">
-        {conditions.length > 0 ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClearAll}
-            className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            <BrushCleaning className="size-3.5" />
-            {m.story_filter_clear()}
-          </Button>
-        ) : onCancel ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onCancel}
-            className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            <X className="size-3.5" />
-            {m.story_filter_cancel()}
-          </Button>
-        ) : null}
-        {onSaveAsView && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onSaveAsView}
-            className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            <CopyPlus className="size-3.5" />
-            {m.story_filter_saveAsView()}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/story/filters/filter-toggle.tsx

@@ -1,60 +0,0 @@
-import { m } from '@/paraglide/messages.js'
-// 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 { ListFilter, ListFilterPlus } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type { FilterCondition } from "./filter-types";
-
-interface StoryFilterToggleProps {
-  visible: boolean;
-  conditions: FilterCondition[];
-  onToggle: () => void;
-}
-
-export function StoryFilterToggle({ visible, conditions, onToggle }: StoryFilterToggleProps) {
-  const activeCount = conditions.length;
-  const hasActive = activeCount > 0;
-  const isOpen = visible || hasActive;
-
-  return (
-    <Tooltip>
-      <TooltipTrigger render={
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onToggle}
-          className={cn(
-            "h-8 gap-1.5 px-2.5 text-sm font-normal relative",
-            hasActive && "border-primary/50 bg-primary/5 text-primary",
-            !hasActive && "text-muted-foreground",
-          )}
-        />
-      }>
-          {isOpen ? <ListFilterPlus className="size-4" /> : <ListFilter className="size-4" />}
-          {activeCount > 0 && (
-            <span className="flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
-              {activeCount}
-            </span>
-          )}
-      </TooltipTrigger>
-      <TooltipContent>{isOpen ? m.story_filter_cancel() : m.story_filter_toggleOpen()}</TooltipContent>
-    </Tooltip>
-  );
-}

package/src/components/story/filters/filter-types.ts

@@ -1,120 +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 { m } from '@/paraglide/messages.js';
-import { ListFilter, Flag, CircleUser, Tag, Calendar, Type, type LucideIcon } from "lucide-react";
-
-export type FilterKey = "state" | "priority" | "assigneeId" | "labelId" | "createdDate" | "targetDate" | "title";
-
-export type FilterOperator =
-  | "is" | "is_not" | "is_any_of" | "is_not_any_of" | "is_empty" | "is_not_empty"
-  | "before" | "after" | "on_or_before" | "on_or_after" | "between"
-  | "contains" | "not_contains";
-
-export interface FilterCondition {
-  id: string;
-  property: FilterKey;
-  operator: FilterOperator;
-  value: string;
-}
-
-export type FilterFieldType = "select" | "multi_select" | "user" | "date" | "text";
-
-export interface FilterFieldConfig {
-  key: FilterKey;
-  label: () => string;
-  icon: LucideIcon;
-  fieldType: FilterFieldType;
-  operators: FilterOperator[];
-  defaultOperator: FilterOperator;
-  defaultValue?: string;
-}
-
-const SELECT_OPERATORS: FilterOperator[] = ["is", "is_not", "is_any_of", "is_not_any_of", "is_empty", "is_not_empty"];
-const USER_OPERATORS: FilterOperator[] = ["is", "is_not", "is_any_of", "is_not_any_of", "is_empty", "is_not_empty"];
-const DATE_OPERATORS: FilterOperator[] = ["is", "is_not", "before", "after", "on_or_before", "on_or_after", "between", "is_empty", "is_not_empty"];
-const TEXT_OPERATORS: FilterOperator[] = ["contains", "not_contains", "is_empty", "is_not_empty"];
-
-export const FILTER_FIELD_CONFIGS: FilterFieldConfig[] = [
-  { key: "title", label: m.story_filter_field_title, icon: Type, fieldType: "text", operators: TEXT_OPERATORS, defaultOperator: "contains" },
-  { key: "state", label: m.story_filter_field_state, icon: ListFilter, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "backlog" },
-  { key: "priority", label: m.story_filter_field_priority, icon: Flag, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "none" },
-  { key: "assigneeId", label: m.story_filter_field_assignee, icon: CircleUser, fieldType: "user", operators: USER_OPERATORS, defaultOperator: "is", defaultValue: "__none__" },
-  { key: "labelId", label: m.story_filter_field_label, icon: Tag, fieldType: "multi_select", operators: SELECT_OPERATORS, defaultOperator: "is_any_of" },
-  { key: "createdDate", label: m.story_filter_field_createdDate, icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
-  { key: "targetDate", label: m.story_filter_field_targetDate, icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
-];
-
-export const OPERATOR_LABELS: Record<FilterOperator, () => string> = {
-  is: m.story_filter_operator_is,
-  is_not: m.story_filter_operator_is_not,
-  is_any_of: m.story_filter_operator_is_any_of,
-  is_not_any_of: m.story_filter_operator_is_not_any_of,
-  is_empty: m.story_filter_operator_is_empty,
-  is_not_empty: m.story_filter_operator_is_not_empty,
-  
-  before: m.story_filter_operator_before,
-  after: m.story_filter_operator_after,
-  on_or_before: m.story_filter_operator_on_or_before,
-  on_or_after: m.story_filter_operator_on_or_after,
-  between: m.story_filter_operator_between,
-  contains: m.story_filter_operator_contains,
-  not_contains: m.story_filter_operator_not_contains,
-};
-
-export function getFilterConfig(key: FilterKey): FilterFieldConfig {
-  return FILTER_FIELD_CONFIGS.find((f) => f.key === key) ?? FILTER_FIELD_CONFIGS[0];
-}
-
-export function getFilterLabel(key: FilterKey): () => string {
-  return getFilterConfig(key).label;
-}
-
-export function getFilterIcon(key: FilterKey): LucideIcon {
-  return getFilterConfig(key).icon;
-}
-
-let _idCounter = 0;
-export function generateConditionId(): string {
-  _idCounter++;
-  return `fc_${Date.now()}_${_idCounter}`;
-}
-
-export function createDefaultCondition(property: FilterKey): FilterCondition {
-  const config = getFilterConfig(property);
-  return {
-    id: generateConditionId(),
-    property,
-    operator: config.defaultOperator,
-    value: config.defaultValue ?? "",
-  };
-}
-
-export function serializeFilters(conditions: FilterCondition[]): string | undefined {
-  if (conditions.length === 0) return undefined;
-  return JSON.stringify(conditions.map(({ id, property, operator, value }) => ({ id, property, operator, value })));
-}
-
-export function deserializeFilters(json: string | undefined): FilterCondition[] {
-  if (!json) return [];
-  try {
-    const parsed = JSON.parse(json) as FilterCondition[];
-    return Array.isArray(parsed) ? parsed.filter((c) => c.property && c.operator) : [];
-  } catch {
-    return [];
-  }
-}

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

@@ -1,182 +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 { CalendarIcon } 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 { StateEditor } from "../inline-editors/state-editor";
-import { PriorityEditor } from "../inline-editors/priority-editor";
-import { AssigneeEditor } from "../inline-editors/assignee-editor";
-import { LabelsEditor } from "../inline-editors/labels-editor";
-import { TitleEditor } from "../inline-editors/title-editor";
-import type { FilterKey, FilterOperator } from "./filter-types";
-import type { UserBrief } from "../types";
-import { m } from "@/paraglide/messages.js";
-
-interface FilterValueInputProps {
-  property: FilterKey;
-  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";
-
-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 (
-        <StateEditor
-          value={(selected[0] as any) ?? "backlog"}
-          onChange={(v) => onChange(v)}
-          mode={multi ? "multi" : "single"}
-          selected={selected}
-          onMultiChange={handleMultiToggle}
-          className={compactBtn}
-        />
-      );
-    case "priority":
-      return (
-        <PriorityEditor
-          value={(selected[0] as any) ?? "none"}
-          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 (
-        <AssigneeEditor
-          assignee={selectedUser}
-          users={users ?? []}
-          onChange={(id) => onChange(id === null ? "__none__" : (id ?? ""))}
-          mode={multi ? "multi" : "single"}
-          selected={selected}
-          onMultiChange={handleMultiToggle}
-          className={compactBtn}
-        />
-      );
-    }
-    case "labelId":
-      return (
-        <LabelsEditor
-          labelIds={selected}
-          labels={labels ?? []}
-          onChange={(ids) => onChange(ids.length ? ids.join(",") : "")}
-          mode={multi ? "multi" : "single"}
-          className={compactBtn}
-        />
-      );
-    case "createdDate":
-    case "targetDate":
-      return <DateSelect operator={operator} value={value} onChange={onChange} />;
-    case "title":
-      return <TitleEditor value={value} onChange={onChange} className="w-32" />;
-    default:
-      return null;
-  }
-}
-
-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.story_filter_selectRange()}
-        </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.story_filter_selectDate()}
-        </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>
-  );
-}