feat: task filtering (#72)

Co-authored-by: Claude <[email protected]>

Author: jonathanlab

src/renderer/features/tasks/components/FilterOperatorToggle.tsx

@@ -0,0 +1,101 @@
+import type {
+  FilterCategory,
+  FilterOperator,
+} from "@features/tasks/stores/taskStore";
+import { useTaskStore } from "@features/tasks/stores/taskStore";
+import { DropdownMenu, Text } from "@radix-ui/themes";
+
+interface FilterOperatorToggleProps {
+  category: FilterCategory;
+  value: string;
+  operator: FilterOperator;
+}
+
+export function FilterOperatorToggle({
+  category,
+  value,
+  operator,
+}: FilterOperatorToggleProps) {
+  const toggleFilterOperator = useTaskStore(
+    (state) => state.toggleFilterOperator,
+  );
+
+  const isDateCategory = category === "created_at";
+
+  const getOperatorLabel = (op: FilterOperator) => {
+    switch (op) {
+      case "is":
+        return "is";
+      case "is_not":
+        return "is not";
+      case "before":
+        return "before";
+      case "after":
+        return "after";
+    }
+  };
+
+  const setOperator = (newOperator: FilterOperator) => {
+    if (operator !== newOperator) {
+      toggleFilterOperator(category, value);
+    }
+  };
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <button
+          type="button"
+          className="cursor-pointer rounded px-1 py-0.5 opacity-50 hover:bg-gray-5 hover:opacity-100"
+        >
+          {getOperatorLabel(operator)}
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {isDateCategory ? (
+          <>
+            <DropdownMenu.Item
+              className="hover:bg-gray-5"
+              onSelect={(e) => {
+                e.preventDefault();
+                setOperator("before");
+              }}
+            >
+              <Text size="1">before</Text>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className="hover:bg-gray-5"
+              onSelect={(e) => {
+                e.preventDefault();
+                setOperator("after");
+              }}
+            >
+              <Text size="1">after</Text>
+            </DropdownMenu.Item>
+          </>
+        ) : (
+          <>
+            <DropdownMenu.Item
+              className="hover:bg-gray-5"
+              onSelect={(e) => {
+                e.preventDefault();
+                setOperator("is");
+              }}
+            >
+              <Text size="1">is</Text>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className="hover:bg-gray-5"
+              onSelect={(e) => {
+                e.preventDefault();
+                setOperator("is_not");
+              }}
+            >
+              <Text size="1">is not</Text>
+            </DropdownMenu.Item>
+          </>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}

src/renderer/features/tasks/components/TaskFilterBadge.tsx

@@ -0,0 +1,91 @@
+import { FilterOperatorToggle } from "@features/tasks/components/FilterOperatorToggle";
+import { TaskFilterValueEditor } from "@features/tasks/components/TaskFilterValueEditor";
+import type {
+  FilterCategory,
+  FilterOperator,
+} from "@features/tasks/stores/taskStore";
+import { useTaskStore } from "@features/tasks/stores/taskStore";
+import type { FilterCategoryConfig } from "@features/tasks/utils/filterCategories";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Badge, DropdownMenu, Flex, Separator } from "@radix-ui/themes";
+
+interface TaskFilterBadgeProps {
+  category: FilterCategory;
+  categoryLabel: string;
+  value: string;
+  valueLabel: string;
+  operator: FilterOperator;
+  badgeKey: string;
+  categoryConfig: FilterCategoryConfig | undefined;
+  onRemoveFilter: (category: FilterCategory, value: string) => void;
+  onToggleFilter: (category: FilterCategory, value: string) => void;
+}
+
+export function TaskFilterBadge({
+  category,
+  categoryLabel,
+  value,
+  valueLabel,
+  operator,
+  badgeKey,
+  categoryConfig,
+  onRemoveFilter,
+  onToggleFilter,
+}: TaskFilterBadgeProps) {
+  const editingBadgeKey = useTaskStore((state) => state.editingFilterBadgeKey);
+  const setEditingBadgeKey = useTaskStore(
+    (state) => state.setEditingFilterBadgeKey,
+  );
+  const isEditing = editingBadgeKey === badgeKey;
+
+  return (
+    <DropdownMenu.Root
+      open={isEditing}
+      onOpenChange={(open) => {
+        setEditingBadgeKey(open ? badgeKey : null);
+      }}
+    >
+      <Badge size="1" color="gray" variant="soft">
+        <Flex align="center" gap="0">
+          <span className="font-medium">{categoryLabel}</span>
+          <Separator orientation="vertical" mx="1" />
+          <FilterOperatorToggle
+            category={category}
+            value={value}
+            operator={operator}
+          />
+          <Separator orientation="vertical" mx="1" />
+          <DropdownMenu.Trigger>
+            <button
+              type="button"
+              className="cursor-pointer rounded px-1 py-0.5 font-medium hover:bg-gray-5"
+            >
+              {valueLabel}
+            </button>
+          </DropdownMenu.Trigger>
+          <Separator orientation="vertical" mx="1" />
+          <button
+            type="button"
+            className="flex cursor-pointer items-center justify-center rounded p-0.5 hover:bg-gray-5"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemoveFilter(category, value);
+              setEditingBadgeKey(null);
+            }}
+          >
+            <Cross2Icon width="10" height="10" />
+          </button>
+        </Flex>
+      </Badge>
+      <DropdownMenu.Content className="min-w-[200px]">
+        {categoryConfig && (
+          <TaskFilterValueEditor
+            config={categoryConfig}
+            onToggleFilter={onToggleFilter}
+          />
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}

src/renderer/features/tasks/components/TaskFilterBadges.tsx

@@ -0,0 +1,101 @@
+import { TaskFilterBadge } from "@features/tasks/components/TaskFilterBadge";
+import type {
+  ActiveFilters,
+  FilterCategory,
+  FilterOperator,
+} from "@features/tasks/stores/taskStore";
+import { useTaskStore } from "@features/tasks/stores/taskStore";
+import type { FilterCategoryConfig } from "@features/tasks/utils/filterCategories";
+import { Flex } from "@radix-ui/themes";
+import type { ReactNode } from "react";
+
+interface TaskFilterBadgesProps {
+  activeFilters: ActiveFilters;
+  filterCategories: FilterCategoryConfig[];
+  onRemoveFilter: (category: FilterCategory, value: string) => void;
+  onUpdateFilter: (
+    category: FilterCategory,
+    oldValue: string,
+    newValue: string,
+  ) => void;
+  children?: ReactNode;
+}
+
+export function TaskFilterBadges({
+  activeFilters,
+  filterCategories,
+  onRemoveFilter,
+  onUpdateFilter,
+  children,
+}: TaskFilterBadgesProps) {
+  const setEditingBadgeKey = useTaskStore(
+    (state) => state.setEditingFilterBadgeKey,
+  );
+  const badges: Array<{
+    category: FilterCategory;
+    categoryLabel: string;
+    value: string;
+    valueLabel: string;
+    operator: FilterOperator;
+  }> = [];
+
+  for (const [category, filterValues] of Object.entries(activeFilters)) {
+    if (!filterValues || filterValues.length === 0) continue;
+
+    const categoryConfig = filterCategories.find(
+      (c) => c.category === category,
+    );
+    if (!categoryConfig) continue;
+
+    for (const filterValue of filterValues) {
+      const option = categoryConfig.options.find(
+        (o) => o.value === filterValue.value,
+      );
+      badges.push({
+        category: category as FilterCategory,
+        categoryLabel: categoryConfig.label,
+        value: filterValue.value,
+        valueLabel: option?.label || filterValue.value,
+        operator: filterValue.operator,
+      });
+    }
+  }
+
+  const handleToggleFilterFromBadge = (
+    category: FilterCategory,
+    oldValue: string,
+    newValue: string,
+  ) => {
+    onUpdateFilter(category, oldValue, newValue);
+    setEditingBadgeKey(null);
+  };
+
+  return (
+    <Flex gap="1" wrap="wrap" align="center" style={{ maxWidth: "60%" }}>
+      {badges.map((badge) => {
+        const categoryConfig = filterCategories.find(
+          (c) => c.category === badge.category,
+        );
+        const badgeKey = `${badge.category}-${badge.value}`;
+
+        return (
+          <TaskFilterBadge
+            key={badgeKey}
+            category={badge.category}
+            categoryLabel={badge.categoryLabel}
+            value={badge.value}
+            valueLabel={badge.valueLabel}
+            operator={badge.operator}
+            badgeKey={badgeKey}
+            categoryConfig={categoryConfig}
+            onRemoveFilter={onRemoveFilter}
+            onToggleFilter={(category, newValue) =>
+              handleToggleFilterFromBadge(category, badge.value, newValue)
+            }
+          />
+        );
+      })}
+      {children}
+    </Flex>
+  );
+}

src/renderer/features/tasks/components/TaskFilterCategory.tsx

@@ -0,0 +1,35 @@
+import { TaskFilterOption } from "@features/tasks/components/TaskFilterOption";
+import type { FilterCategory } from "@features/tasks/stores/taskStore";
+import type { FilterCategoryConfig } from "@features/tasks/utils/filterCategories";
+import { DropdownMenu, Text } from "@radix-ui/themes";
+
+interface TaskFilterCategoryProps {
+  config: FilterCategoryConfig;
+  onToggleFilter: (category: FilterCategory, value: string) => void;
+  defaultOpen?: boolean;
+}
+
+export function TaskFilterCategory({
+  config,
+  onToggleFilter,
+  defaultOpen = false,
+}: TaskFilterCategoryProps) {
+  return (
+    <DropdownMenu.Sub defaultOpen={defaultOpen}>
+      <DropdownMenu.SubTrigger>
+        <Text size="1">{config.label}</Text>
+      </DropdownMenu.SubTrigger>
+      <DropdownMenu.SubContent>
+        {config.options.map((option) => (
+          <TaskFilterOption
+            key={option.value}
+            category={config.category}
+            label={option.label}
+            value={option.value}
+            onToggle={onToggleFilter}
+          />
+        ))}
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+  );
+}

src/renderer/features/tasks/components/TaskFilterClearButton.tsx

@@ -0,0 +1,26 @@
+import { useTaskStore } from "@features/tasks/stores/taskStore";
+import { Button } from "@radix-ui/themes";
+
+export function TaskFilterClearButton() {
+  const clearActiveFilters = useTaskStore((state) => state.clearActiveFilters);
+  const totalActiveFilterCount = useTaskStore((state) => {
+    return Object.values(state.activeFilters).reduce(
+      (sum, filters) => sum + (filters?.length || 0),
+      0,
+    );
+  });
+
+  if (totalActiveFilterCount === 0) return null;
+
+  return (
+    <Button
+      size="1"
+      variant="ghost"
+      color="gray"
+      onClick={clearActiveFilters}
+      style={{ cursor: "pointer" }}
+    >
+      Clear
+    </Button>
+  );
+}

src/renderer/features/tasks/components/TaskFilterMatchToggle.tsx

@@ -0,0 +1,31 @@
+import { useTaskStore } from "@features/tasks/stores/taskStore";
+import { Button } from "@radix-ui/themes";
+
+export function TaskFilterMatchToggle() {
+  const filterMatchMode = useTaskStore((state) => state.filterMatchMode);
+  const setFilterMatchMode = useTaskStore((state) => state.setFilterMatchMode);
+  const totalActiveFilterCount = useTaskStore((state) => {
+    return Object.values(state.activeFilters).reduce(
+      (sum, filters) => sum + (filters?.length || 0),
+      0,
+    );
+  });
+
+  if (totalActiveFilterCount <= 1) return null;
+
+  const toggleMode = () => {
+    setFilterMatchMode(filterMatchMode === "all" ? "any" : "all");
+  };
+
+  return (
+    <Button
+      size="1"
+      variant="ghost"
+      color="gray"
+      onClick={toggleMode}
+      style={{ cursor: "pointer" }}
+    >
+      Match {filterMatchMode === "all" ? "all filters" : "any filter"}
+    </Button>
+  );
+}