@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,159 @@
+// 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 { useTranslation } from "react-i18next";
+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";
+
+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 { t } = useTranslation("story");
+  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}
+        t={t}
+      />
+
+      <div className="h-4 w-px bg-border" />
+
+      <OperatorSelect
+        current={condition.operator}
+        operators={config.operators}
+        onChange={onChangeOperator}
+        t={t}
+      />
+
+      {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, t }: { current: FilterKey; options: typeof FILTER_FIELD_CONFIGS; onChange: (key: FilterKey) => void; t: (key: string) => string }) {
+  const CurrentIcon = options.find((o) => o.key === current)?.icon;
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <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">{t(options.find((o) => o.key === current)?.label ?? current)}</span>
+        </button>
+      </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>{t(opt.label)}</span>
+            </button>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function OperatorSelect({ current, operators, onChange, t }: { current: FilterOperator; operators: FilterOperator[]; onChange: (op: FilterOperator) => void; t: (key: string) => string }) {
+  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 asChild>
+        <button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap">
+          {t(OPERATOR_LABELS[current])}
+        </button>
+      </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>{t(OPERATOR_LABELS[op])}</span>
+              {isSingle(op) && (
+                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{t("filter.single")}</span>
+              )}
+              {isMulti(op) && (
+                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{t("filter.multi")}</span>
+              )}
+            </button>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+}
+

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

@@ -0,0 +1,117 @@
+// 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 { useTranslation } from "react-i18next";
+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";
+
+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 { t } = useTranslation("story");
+  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">{t("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" />
+            {t("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" />
+            {t("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" />
+            {t("filter.saveAsView")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+// 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 { useTranslation } from "react-i18next";
+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 { t } = useTranslation("story");
+  const activeCount = conditions.length;
+  const hasActive = activeCount > 0;
+  const isOpen = visible || hasActive;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <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>
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{t(isOpen ? "filter.cancel" : "filter.toggleOpen")}</TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,119 @@
+// 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, 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: "filter.field.title", icon: Type, fieldType: "text", operators: TEXT_OPERATORS, defaultOperator: "contains" },
+  { key: "state", label: "filter.field.state", icon: ListFilter, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "backlog" },
+  { key: "priority", label: "filter.field.priority", icon: Flag, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "none" },
+  { key: "assigneeId", label: "filter.field.assignee", icon: CircleUser, fieldType: "user", operators: USER_OPERATORS, defaultOperator: "is", defaultValue: "__none__" },
+  { key: "labelId", label: "filter.field.label", icon: Tag, fieldType: "multi_select", operators: SELECT_OPERATORS, defaultOperator: "is_any_of" },
+  { key: "createdDate", label: "filter.field.createdDate", icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
+  { key: "targetDate", label: "filter.field.targetDate", icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
+];
+
+export const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  is: "filter.operator.is",
+  is_not: "filter.operator.is_not",
+  is_any_of: "filter.operator.is_any_of",
+  is_not_any_of: "filter.operator.is_not_any_of",
+  is_empty: "filter.operator.is_empty",
+  is_not_empty: "filter.operator.is_not_empty",
+  
+  before: "filter.operator.before",
+  after: "filter.operator.after",
+  on_or_before: "filter.operator.on_or_before",
+  on_or_after: "filter.operator.on_or_after",
+  between: "filter.operator.between",
+  contains: "filter.operator.contains",
+  not_contains: "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

@@ -0,0 +1,187 @@
+// 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, useRef, useEffect } from "react";
+import { CalendarIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+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";
+
+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 { t } = useTranslation("story");
+  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 asChild>
+          <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")}` : t("filter.selectRange")}
+          </button>
+        </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 asChild>
+        <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") : t("filter.selectDate")}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(d) => {
+            if (d) {
+              onChange(format(d, "yyyy-MM-dd"));
+              setOpen(false);
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/story/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 { StoryFilterToggle } from "./filter-toggle";
+export { StoryFilterRow } 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, FilterKey, FilterOperator, FilterFieldType } from "./filter-types";