@knotpad/app 0.1.0 → 0.1.1

package/components/tasks/task-detail.tsx

@@ -1,458 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { X, FileText, Clock } from "lucide-react";
-import Link from "next/link";
-import { TaskBadge } from "./task-badge";
-import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
-import { SnippetThread } from "./snippet-thread";
-
-type AuditEntry = {
-  id: string;
-  action: string;
-  detail: string | null;
-  createdAt: string;
-  user: { id: string; name: string | null } | null;
-};
-
-type Reference = { noteId: string; noteTitle: string; snippet: string };
-
-type Task = {
-  id: string;
-  title: string;
-  status: string;
-  priority?: string | null;
-  assigneeType: "HUMAN" | "AGENT";
-  claimedBy: string | null;
-  claimedByAlias: string | null;
-  fileRefs: string[];
-  startDate: string | null;
-  dueDate: string | null;
-  note: { id: string; title: string };
-  assignee: { id: string; name: string | null; email: string | null; image: string | null } | null;
-  auditLogs: AuditEntry[];
-  references: Reference[];
-};
-
-type Props = { task: Task; backHref: string };
-
-// Format relative time (e.g., "3d ago", "2h ago", "5m ago")
-function formatRelativeTime(date: string | Date): string {
-  const now = new Date();
-  const then = new Date(date);
-  const diffMs = now.getTime() - then.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHour = Math.floor(diffMin / 60);
-  const diffDay = Math.floor(diffHour / 24);
-  const diffWeek = Math.floor(diffDay / 7);
-  const diffMonth = Math.floor(diffDay / 30);
-  const diffYear = Math.floor(diffDay / 365);
-
-  if (diffSec < 60) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHour < 24) return `${diffHour}h ago`;
-  if (diffDay < 7) return `${diffDay}d ago`;
-  if (diffWeek < 4) return `${diffWeek}w ago`;
-  if (diffMonth < 12) return `${diffMonth}mo ago`;
-  return `${diffYear}y ago`;
-}
-
-// Format date for date input (YYYY-MM-DD) in local timezone
-function formatDateForInput(date: string | Date | null): string {
-  if (!date) return "";
-  const d = new Date(date);
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-
-function getBackLabel(backHref: string): string {
-  if (backHref.startsWith("/list")) return "Back to List";
-  if (backHref.startsWith("/kanban")) return "Back to Kanban";
-  if (backHref.startsWith("/calendar")) return "Back to Calendar";
-  if (backHref.startsWith("/notes")) return "Back to Note";
-  return "Back";
-}
-
-export function TaskDetail({ task, backHref }: Props) {
-  const router = useRouter();
-  const kanbanStatuses = useKanbanStatuses();
-  const statusOptions = kanbanStatuses.map((s) => s.key);
-  const backLabel = getBackLabel(backHref);
-  const [status, setStatus] = useState<string>(task.status);
-  const [updating, setUpdating] = useState(false);
-  const [error, setError] = useState("");
-  const [successMessage, setSuccessMessage] = useState("");
-  const [startDate, setStartDate] = useState<string>(formatDateForInput(task.startDate));
-  const [savingStart, setSavingStart] = useState(false);
-  const [dueDate, setDueDate] = useState<string>(formatDateForInput(task.dueDate));
-  const [savingDue, setSavingDue] = useState(false);
-  const [showAllActivity, setShowAllActivity] = useState(false);
-  const [priority, setPriority] = useState<string>(task.priority ?? "medium");
-  const [savingPriority, setSavingPriority] = useState(false);
-
-  // Sync local state when task prop changes (e.g., after router.refresh())
-  useEffect(() => {
-    setStatus(task.status);
-    setPriority(task.priority ?? "medium");
-    setStartDate(formatDateForInput(task.startDate));
-    setDueDate(formatDateForInput(task.dueDate));
-  }, [task.dueDate, task.priority, task.startDate, task.status]);
-
-  async function handleStatusChange(newStatus: string) {
-    if (newStatus === status) return;
-    const prev = status;
-    setUpdating(true);
-    setStatus(newStatus);
-    setError("");
-    try {
-      const res = await fetch(`/api/tasks/${task.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ status: newStatus }),
-      });
-      if (!res.ok) throw new Error("patch failed");
-      router.refresh();
-    } catch {
-      setStatus(prev);
-      setError("Failed to update status. Please try again.");
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  async function handleStartDateChange(val: string) {
-    const prev = startDate;
-    setStartDate(val);
-    setSavingStart(true);
-    setError("");
-    try {
-      const res = await fetch(`/api/tasks/${task.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ startDate: val || null }),
-      });
-      if (!res.ok) throw new Error();
-      router.refresh();
-    } catch {
-      setStartDate(prev);
-      setError("Failed to update start date.");
-    } finally {
-      setSavingStart(false);
-    }
-  }
-
-  async function handleDueDateChange(val: string) {
-    const prev = dueDate;
-    setDueDate(val);
-    setSavingDue(true);
-    setError("");
-    setSuccessMessage("");
-    try {
-      const res = await fetch(`/api/tasks/${task.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ dueDate: val || null }),
-      });
-      if (!res.ok) throw new Error();
-      setSuccessMessage(val ? "Due date updated." : "Due date cleared.");
-      router.refresh();
-    } catch {
-      setDueDate(prev);
-      setError("Failed to update due date.");
-    } finally {
-      setSavingDue(false);
-    }
-  }
-
-  async function handlePriorityChange(newPriority: string) {
-    const normalizedPriority = newPriority.toLowerCase();
-    if (normalizedPriority === priority) return;
-    const prev = priority;
-    setPriority(normalizedPriority);
-    setSavingPriority(true);
-    setError("");
-    setSuccessMessage("");
-    try {
-      const res = await fetch(`/api/tasks/${task.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ priority: normalizedPriority.toUpperCase() }),
-      });
-      if (!res.ok) throw new Error();
-      setSuccessMessage("Priority updated.");
-      router.refresh();
-    } catch {
-      setPriority(prev);
-      setError("Failed to update priority.");
-    } finally {
-      setSavingPriority(false);
-    }
-  }
-
-  // Task 2.5.4 - Assignee picker
-  const [assigneeType, setAssigneeType] = useState<"HUMAN" | "AGENT">(task.assigneeType);
-  const [savingAssignee, setSavingAssignee] = useState(false);
-
-  async function handleAssigneeChange(type: "HUMAN" | "AGENT") {
-    const prev = assigneeType;
-    setAssigneeType(type);
-    setSavingAssignee(true);
-    setError("");
-    try {
-      const res = await fetch(`/api/tasks/${task.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ assigneeType: type }),
-      });
-      if (!res.ok) throw new Error();
-      router.refresh();
-    } catch {
-      setAssigneeType(prev);
-      setError("Failed to update assignee.");
-    } finally {
-      setSavingAssignee(false);
-    }
-  }
-
-  const displayLogs = showAllActivity ? task.auditLogs : task.auditLogs.slice(0, 5);
-  const hasMoreLogs = task.auditLogs.length > 5;
-  const summaryChips = [
-    dueDate && new Date(dueDate) < new Date() && status !== "DONE" ? "Overdue" : null,
-    assigneeType === "AGENT" ? "Agent task" : "Human task",
-    `References ${task.references.length}`,
-    task.auditLogs[0]?.createdAt ? `Updated ${formatRelativeTime(task.auditLogs[0].createdAt)}` : null,
-  ].filter((chip): chip is string => Boolean(chip));
-
-  const auditSection = task.auditLogs.length > 0 && (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <label className="text-xs font-medium text-zinc-500">Activity</label>
-        {hasMoreLogs && (
-          <button
-            onClick={() => setShowAllActivity(!showAllActivity)}
-            className="text-xs text-zinc-400 hover:text-zinc-300 transition-colors"
-          >
-            {showAllActivity ? "Show less" : `Show ${task.auditLogs.length - 5} more`}
-          </button>
-        )}
-      </div>
-      <div className="space-y-2">
-        {displayLogs.map((log) => (
-          <div key={log.id} className="flex items-start gap-2 text-xs">
-            <Clock size={11} className="mt-0.5 shrink-0 text-zinc-600" />
-            <div className="min-w-0 space-y-1">
-              <div className="flex flex-wrap items-center gap-1">
-                <span className="font-medium text-zinc-300">{log.user?.name ?? "System"}</span>
-                <span className="text-zinc-500">{log.action.replace(/_/g, " ")}</span>
-              </div>
-              {log.detail && (
-                <p className="text-zinc-600 truncate">{log.detail}</p>
-              )}
-              <p className="text-zinc-700" title={new Date(log.createdAt).toLocaleString()}>
-                {formatRelativeTime(log.createdAt)}
-              </p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="flex h-full flex-col overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3 md:px-6">
-        <Link
-          href={backHref}
-          className="flex items-center gap-1.5 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
-        >
-          <X size={14} />
-          <span>{backLabel}</span>
-        </Link>
-        <nav className="min-w-0 text-xs text-zinc-600">
-          <Link href={`/notes/${task.note.id}`} className="block truncate hover:text-zinc-400 transition-colors">
-            {task.note.title}
-          </Link>
-        </nav>
-      </div>
-
-      {error && (
-        <div className="border-b border-red-800/40 bg-red-950/40 px-4 py-2 flex items-center justify-between gap-3 md:px-6">
-          <p className="text-sm text-red-300">{error}</p>
-          <button onClick={() => setError("")} className="text-red-500 hover:text-red-300 text-lg leading-none shrink-0">×</button>
-        </div>
-      )}
-
-      {successMessage && !error && (
-        <div className="border-b border-emerald-800/40 bg-emerald-950/40 px-4 py-2 md:px-6">
-          <p className="text-sm text-emerald-300">{successMessage}</p>
-        </div>
-      )}
-
-      {summaryChips.length > 0 && (
-        <div className="flex flex-wrap gap-2 border-b border-zinc-800 px-4 py-2 md:px-6">
-          {summaryChips.map((chip) => (
-            <span
-              key={chip}
-              className="rounded-full border border-zinc-800 bg-zinc-900 px-2.5 py-1 text-xs text-zinc-300"
-            >
-              {chip}
-            </span>
-          ))}
-        </div>
-      )}
-
-      {/* Body */}
-      <div className="flex flex-1 flex-col overflow-y-auto md:flex-row md:overflow-hidden md:divide-x md:divide-zinc-800">
-        {/* Left — task details */}
-        <div className="flex w-full shrink-0 flex-col gap-6 border-b border-zinc-800 p-4 md:w-[380px] md:overflow-y-auto md:border-b-0 md:p-6">
-          <h1 className="text-xl font-semibold text-zinc-100 leading-snug">{task.title}</h1>
-
-          {/* Status */}
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-zinc-500">Status</label>
-            <div className="flex flex-wrap gap-1.5">
-              {statusOptions.map((s) => (
-                <button
-                  key={s}
-                  disabled={updating}
-                  onClick={() => handleStatusChange(s)}
-                  className={`transition-opacity disabled:opacity-50 ${
-                    status === s ? "ring-1 ring-white/20 rounded" : "opacity-60 hover:opacity-90"
-                  }`}
-                >
-                  <TaskBadge status={s} />
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Assignee - Task 2.5.4 */}
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-zinc-500">Assignee</label>
-            <select
-              value={assigneeType}
-              onChange={(e) => handleAssigneeChange(e.target.value as "HUMAN" | "AGENT")}
-              disabled={savingAssignee}
-              className={`text-sm bg-zinc-800 border border-zinc-700 rounded px-2 py-1 w-full cursor-pointer ${
-                savingAssignee ? "opacity-50" : ""
-              } ${task.assigneeType === "AGENT" ? "text-blue-400" : "text-zinc-300"}`}
-            >
-              <option value="HUMAN">Human</option>
-              <option value="AGENT">Agent</option>
-            </select>
-            {savingAssignee && <span className="text-xs text-zinc-500">Saving...</span>}
-          </div>
-
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-zinc-500">
-              Priority {savingPriority && <span className="font-normal text-zinc-600">saving...</span>}
-            </label>
-            <select
-              value={priority}
-              onChange={(e) => handlePriorityChange(e.target.value)}
-              disabled={savingPriority}
-              className={`w-full rounded border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm text-zinc-300 ${
-                savingPriority ? "opacity-50" : ""
-              }`}
-            >
-              <option value="low">low</option>
-              <option value="medium">medium</option>
-              <option value="high">high</option>
-              <option value="critical">critical</option>
-            </select>
-          </div>
-
-          {/* Source note */}
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-zinc-500">Continue in source note</label>
-            <Link
-              href={`/notes/${task.note.id}`}
-              className="flex items-center gap-1.5 text-sm text-zinc-300 hover:text-white transition-colors"
-            >
-              <FileText size={13} />
-              {task.note.title}
-            </Link>
-          </div>
-
-          {/* File refs */}
-          {task.fileRefs.length > 0 && (
-            <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-500">File references</label>
-              <div className="flex flex-wrap gap-1.5">
-                {task.fileRefs.map((f) => (
-                  <span
-                    key={f}
-                    className="rounded border border-zinc-700 bg-zinc-800 px-2 py-0.5 font-mono text-xs text-emerald-400"
-                  >
-                    {f}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Start date */}
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-zinc-500">
-              Start date {savingStart && <span className="text-zinc-600 font-normal">saving…</span>}
-            </label>
-            <input
-              type="date"
-              value={startDate}
-              onChange={(e) => handleStartDateChange(e.target.value)}
-              className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-base text-zinc-300 focus:border-zinc-500 focus:outline-none ring-focus [color-scheme:dark]"
-            />
-            {startDate && (
-              <button
-                onClick={() => handleStartDateChange("")}
-                className="block text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
-              >
-                Clear date
-              </button>
-            )}
-          </div>
-
-          {/* Due date */}
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-zinc-500">
-              Due date {savingDue && <span className="text-zinc-600 font-normal">saving…</span>}
-            </label>
-            <input
-              type="date"
-              value={dueDate}
-              onChange={(e) => handleDueDateChange(e.target.value)}
-              className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-base text-zinc-300 focus:border-zinc-500 focus:outline-none ring-focus [color-scheme:dark]"
-            />
-            {dueDate && (
-              <button
-                onClick={() => handleDueDateChange("")}
-                className="block text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
-              >
-                Clear date
-              </button>
-            )}
-          </div>
-
-          {/* Audit trail — desktop only here; on mobile it moves below the
-              note references (see bottom of this layout). */}
-          {auditSection && <div className="hidden md:block">{auditSection}</div>}
-        </div>
-
-        {/* Right — snippet thread */}
-        <div className="flex-1 p-4 md:overflow-y-auto md:p-6">
-          <SnippetThread references={task.references} taskTitle={task.title} />
-        </div>
-
-        {/* Audit trail — mobile only, after note references */}
-        {auditSection && (
-          <div className="border-t border-zinc-800 p-4 md:hidden">{auditSection}</div>
-        )}
-      </div>
-    </div>
-  );
-}

package/components/tasks/task-list-filters.test.tsx

@@ -1,75 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { TaskListFilters } from "@/components/tasks/task-list-filters";
-
-const pushMock = vi.fn();
-let pathname = "/list";
-let searchParams = new URLSearchParams();
-
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: pushMock, refresh: vi.fn() }),
-  usePathname: () => pathname,
-  useSearchParams: () => searchParams,
-}));
-
-beforeEach(() => {
-  pushMock.mockReset();
-  pathname = "/list";
-  searchParams = new URLSearchParams();
-});
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("TaskListFilters", () => {
-  it("shows active filter chips and removes only the clicked chip", async () => {
-    const user = userEvent.setup();
-    searchParams = new URLSearchParams(
-      "note=n1&folder=f1&status=DONE&assigneeType=AGENT&overdue=true&hasDueDate=true"
-    );
-
-    render(
-      <TaskListFilters
-        folders={[{ id: "f1", name: "Product" }]}
-        filterFolderId="f1"
-        statusFilter="DONE"
-        assigneeFilter="AGENT"
-        overdueOnly="true"
-        hasDueDateFilter="true"
-      />
-    );
-
-    expect(screen.getByRole("button", { name: "Folder: Product ×" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Status: DONE ×" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Assignee: AGENT ×" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Overdue ×" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Has due date ×" })).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Status: DONE ×" }));
-
-    expect(pushMock).toHaveBeenCalledWith(
-      "/list?note=n1&folder=f1&assigneeType=AGENT&overdue=true&hasDueDate=true"
-    );
-  });
-
-  it("clears only filter params and preserves unrelated query state", async () => {
-    const user = userEvent.setup();
-    searchParams = new URLSearchParams("note=n1&folder=f1&status=DONE&overdue=true");
-
-    render(
-      <TaskListFilters
-        folders={[{ id: "f1", name: "Product" }]}
-        filterFolderId="f1"
-        statusFilter="DONE"
-        overdueOnly="true"
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Clear all" }));
-
-    expect(pushMock).toHaveBeenCalledWith("/list?note=n1");
-  });
-});

package/components/tasks/task-list-filters.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-
-type Props = {
-  folders: { id: string; name: string }[];
-  filterFolderId?: string;
-  statusFilter?: string;
-  assigneeFilter?: string;
-  overdueOnly?: string;
-  hasDueDateFilter?: string;
-};
-
-export function TaskListFilters({
-  folders,
-  filterFolderId,
-  statusFilter,
-  assigneeFilter,
-  overdueOnly,
-  hasDueDateFilter,
-}: Props) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  function pushParams(params: URLSearchParams) {
-    const query = params.toString();
-    router.push(query ? `${pathname}?${query}` : pathname);
-  }
-
-  function setParam(key: string, value: string | null) {
-    const params = new URLSearchParams(searchParams.toString());
-    if (value) params.set(key, value);
-    else params.delete(key);
-    pushParams(params);
-  }
-
-  function toggleParam(key: string) {
-    const params = new URLSearchParams(searchParams.toString());
-    if (params.get(key) === "true") params.delete(key);
-    else params.set(key, "true");
-    pushParams(params);
-  }
-
-  function clearFilters() {
-    const params = new URLSearchParams(searchParams.toString());
-    for (const key of ["folder", "status", "assigneeType", "overdue", "hasDueDate"]) {
-      params.delete(key);
-    }
-    pushParams(params);
-  }
-
-  const hasActiveFilters = Boolean(
-    statusFilter || assigneeFilter || overdueOnly || hasDueDateFilter || filterFolderId
-  );
-  const activeFilters: { key: string; label: string }[] = [];
-
-  if (filterFolderId) {
-    const folderName = folders.find((folder) => folder.id === filterFolderId)?.name ?? filterFolderId;
-    activeFilters.push({ key: "folder", label: `Folder: ${folderName}` });
-  }
-  if (statusFilter) {
-    activeFilters.push({ key: "status", label: `Status: ${statusFilter}` });
-  }
-  if (assigneeFilter) {
-    activeFilters.push({ key: "assigneeType", label: `Assignee: ${assigneeFilter}` });
-  }
-  if (overdueOnly === "true") {
-    activeFilters.push({ key: "overdue", label: "Overdue" });
-  }
-  if (hasDueDateFilter === "true") {
-    activeFilters.push({ key: "hasDueDate", label: "Has due date" });
-  }
-
-  return (
-    <div className="flex flex-wrap items-center gap-2 px-3 md:px-6 py-2 border-b border-zinc-800/50 bg-zinc-900/30">
-      {/* Folder Filter */}
-      {folders.length > 0 && (
-        <select
-          value={filterFolderId || ""}
-          onChange={(e) => setParam("folder", e.target.value || null)}
-          className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-300"
-        >
-          <option value="">All folders</option>
-          {folders.map((f) => (
-            <option key={f.id} value={f.id}>{f.name}</option>
-          ))}
-        </select>
-      )}
-
-      {/* Status Filter */}
-      <select
-        value={statusFilter || ""}
-        onChange={(e) => setParam("status", e.target.value || null)}
-        className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-300"
-      >
-        <option value="">All statuses</option>
-        <option value="TODO,DOING">Active (To Do / Doing)</option>
-        <option value="DONE">Done</option>
-        <option value="ARCHIVED">Archived</option>
-      </select>
-
-      {/* Assignee Filter */}
-      <select
-        value={assigneeFilter || ""}
-        onChange={(e) => setParam("assigneeType", e.target.value || null)}
-        className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-300"
-      >
-        <option value="">All assignees</option>
-        <option value="HUMAN">Human</option>
-        <option value="AGENT">Agent</option>
-      </select>
-
-      {/* Overdue Toggle */}
-      <button
-        onClick={() => toggleParam("overdue")}
-        className={`text-xs px-2 py-1 rounded border transition-colors ${
-          overdueOnly === "true"
-            ? "bg-red-900/30 border-red-700 text-red-300"
-            : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-zinc-300"
-        }`}
-      >
-        Overdue only
-      </button>
-
-      {/* Has Due Date Toggle */}
-      <button
-        onClick={() => toggleParam("hasDueDate")}
-        className={`text-xs px-2 py-1 rounded border transition-colors ${
-          hasDueDateFilter === "true"
-            ? "bg-blue-900/30 border-blue-700 text-blue-300"
-            : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-zinc-300"
-        }`}
-      >
-        Has due date
-      </button>
-
-      {activeFilters.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2">
-          {activeFilters.map((filter) => (
-            <button
-              key={filter.key}
-              onClick={() => setParam(filter.key, null)}
-              className="rounded-full border border-zinc-700 bg-zinc-800 px-2 py-1 text-xs text-zinc-300"
-            >
-              {filter.label} ×
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* Clear Filters */}
-      {hasActiveFilters && (
-        <button
-          onClick={clearFilters}
-          className="text-xs text-zinc-500 hover:text-zinc-300 ml-2"
-        >
-          Clear all
-        </button>
-      )}
-    </div>
-  );
-}