feat: Phase 3 - filter bar, keyboard navigation, notifications, comments

- FilterBar component with text search, label chips, due date and priority dropdowns - "/" keyboard shortcut and toolbar button to toggle filter bar - Keyboard card navigation with J/K/H/L keys, Enter to open, Escape to clear - Focus ring on keyboard-selected cards with auto-scroll - Desktop notifications for due/overdue cards via tauri-plugin-notification - CommentsSection component with add/delete and relative timestamps - Filtered card count display in column headers
2026-02-16 14:52:08 +02:00
parent a17c8b6b62
commit fc4310a30f
17 changed files with 791 additions and 140 deletions
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { Plus } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
+import { OverlayScrollbarsComponent, type OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
 import { staggerContainer } from "@/lib/motion";
 import {
  DndContext,
@@ -26,6 +27,8 @@ import {
  ColumnOverlay,
 } from "@/components/board/DragOverlayContent";
 import { CardDetailModal } from "@/components/card-detail/CardDetailModal";
+import { FilterBar, type FilterState, EMPTY_FILTER, isFilterActive } from "@/components/board/FilterBar";
+import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import type { Board } from "@/types/board";

 function findColumnByCardId(board: Board, cardId: string) {
@@ -63,9 +66,77 @@ export function BoardView() {
  const moveColumn = useBoardStore((s) => s.moveColumn);

  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
+  const [showFilterBar, setShowFilterBar] = useState(false);
+  const [filters, setFilters] = useState<FilterState>(EMPTY_FILTER);
+  const { focusedCardId, setFocusedCardId } = useKeyboardNavigation(board, handleCardClick);
  const [addingColumn, setAddingColumn] = useState(false);
  const [newColumnTitle, setNewColumnTitle] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
+  const osRef = useRef<OverlayScrollbarsComponentRef>(null);
+
+  // Track columns that existed on initial render (for stagger vs instant appearance)
+  const initialColumnIds = useRef<Set<string> | null>(null);
+  if (initialColumnIds.current === null && board) {
+    initialColumnIds.current = new Set(board.columns.map((c) => c.id));
+  }
+
+  function handleCardClick(cardId: string) {
+    setSelectedCardId(cardId);
+    setFocusedCardId(null);
+  }
+
+  function filterCards(cardIds: string[]): string[] {
+    if (!isFilterActive(filters) || !board) return cardIds;
+    return cardIds.filter((id) => {
+      const card = board.cards[id];
+      if (!card) return false;
+      if (filters.text && !card.title.toLowerCase().includes(filters.text.toLowerCase())) return false;
+      if (filters.labels.length > 0 && !filters.labels.some((l) => card.labels.includes(l))) return false;
+      if (filters.priority !== "all" && card.priority !== filters.priority) return false;
+      if (filters.dueDate !== "all") {
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        if (filters.dueDate === "none" && card.dueDate != null) return false;
+        if (filters.dueDate === "overdue" && (!card.dueDate || new Date(card.dueDate) >= today)) return false;
+        if (filters.dueDate === "today") {
+          if (!card.dueDate) return false;
+          const d = new Date(card.dueDate);
+          if (d.toDateString() !== today.toDateString()) return false;
+        }
+        if (filters.dueDate === "week") {
+          if (!card.dueDate) return false;
+          const d = new Date(card.dueDate);
+          const weekEnd = new Date(today);
+          weekEnd.setDate(weekEnd.getDate() + 7);
+          if (d < today || d > weekEnd) return false;
+        }
+      }
+      return true;
+    });
+  }
+
+  // Keyboard shortcut: "/" to open filter bar
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "/" && !e.ctrlKey && !e.metaKey) {
+        const tag = (e.target as HTMLElement).tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        e.preventDefault();
+        setShowFilterBar(true);
+      }
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, []);
+
+  // Listen for toggle-filter-bar custom event from TopBar
+  useEffect(() => {
+    function handleToggleFilter() {
+      setShowFilterBar((prev) => !prev);
+    }
+    document.addEventListener("toggle-filter-bar", handleToggleFilter);
+    return () => document.removeEventListener("toggle-filter-bar", handleToggleFilter);
+  }, []);

  // Listen for custom event to open card detail from command palette
  useEffect(() => {
@@ -105,6 +176,15 @@ export function BoardView() {
      addColumn(trimmed);
      setNewColumnTitle("");
      inputRef.current?.focus();
+      // Force OverlayScrollbars to detect the new content and scroll to show it
+      setTimeout(() => {
+        const instance = osRef.current?.osInstance();
+        if (instance) {
+          instance.update(true);
+          const viewport = instance.elements().viewport;
+          viewport.scrollTo({ left: viewport.scrollWidth, behavior: "smooth" });
+        }
+      }, 50);
    }
  }

@@ -119,168 +199,174 @@ export function BoardView() {

  // --- Drag handlers ---

+  // Debounce cross-column moves to prevent oscillation crashes
+  const lastCrossColumnMoveRef = useRef<number>(0);
+
+  const clearDragState = useCallback(() => {
+    setActiveId(null);
+    setActiveType(null);
+    lastCrossColumnMoveRef.current = 0;
+  }, []);
+
  const handleDragStart = useCallback((event: DragStartEvent) => {
    const { active } = event;
    const type = active.data.current?.type as "card" | "column" | undefined;
    setActiveId(active.id as string);
    setActiveType(type ?? null);
+    lastCrossColumnMoveRef.current = 0;
  }, []);

  const handleDragOver = useCallback(
    (event: DragOverEvent) => {
      const { active, over } = event;
-      if (!over || !board) return;
+      if (!over) return;
+
+      // Always read fresh state to avoid stale-closure bugs
+      const currentBoard = useBoardStore.getState().board;
+      if (!currentBoard) return;

      const activeType = active.data.current?.type;
-      if (activeType !== "card") return; // Only handle card cross-column moves here
+      if (activeType !== "card") return;

      const activeCardId = active.id as string;
      const overId = over.id as string;
+      if (overId === activeCardId) return;

-      // Determine the source column
-      const activeColumn = findColumnByCardId(board, activeCardId);
+      const activeColumn = findColumnByCardId(currentBoard, activeCardId);
      if (!activeColumn) return;

-      // Determine the target column
      let overColumn: ReturnType<typeof findColumnByCardId>;
      let overIndex: number;

-      // Check if we're hovering over a card
      const overType = over.data.current?.type;
      if (overType === "card") {
-        overColumn = findColumnByCardId(board, overId);
+        overColumn = findColumnByCardId(currentBoard, overId);
        if (!overColumn) return;
        overIndex = overColumn.cardIds.indexOf(overId);
      } else if (overType === "column") {
-        // Hovering over the droppable area of a column
        const columnId = over.data.current?.columnId as string | undefined;
        if (columnId) {
-          overColumn = board.columns.find((c) => c.id === columnId);
+          overColumn = currentBoard.columns.find((c) => c.id === columnId);
        } else {
-          overColumn = board.columns.find((c) => c.id === overId);
+          overColumn = currentBoard.columns.find((c) => c.id === overId);
        }
        if (!overColumn) return;
-        overIndex = overColumn.cardIds.length; // Append to end
+        overIndex = overColumn.cardIds.length;
      } else {
        return;
      }

-      // Only move if we're going to a different column or different position
+      // Only move cross-column (within-column handled by sortable transforms + dragEnd)
      if (activeColumn.id === overColumn.id) return;

+      // Debounce: prevent rapid oscillation between columns
+      const now = Date.now();
+      if (now - lastCrossColumnMoveRef.current < 100) return;
+      lastCrossColumnMoveRef.current = now;
+
      moveCard(activeCardId, activeColumn.id, overColumn.id, overIndex);
    },
-    [board, moveCard]
+    [moveCard]
  );

  const handleDragEnd = useCallback(
    (event: DragEndEvent) => {
-      const { active, over } = event;
+      try {
+        const { active, over } = event;

-      if (!over || !board) {
-        setActiveId(null);
-        setActiveType(null);
-        return;
-      }
+        // Always read fresh state
+        const currentBoard = useBoardStore.getState().board;
+        if (!over || !currentBoard) return;

-      const type = active.data.current?.type;
+        const type = active.data.current?.type;

-      if (type === "column") {
-        // Column reordering
-        const activeColumnId = active.id as string;
-        const overColumnId = over.id as string;
+        if (type === "column") {
+          const activeColumnId = active.id as string;
+          const overColumnId = over.id as string;

-        if (activeColumnId !== overColumnId) {
-          const fromIndex = board.columns.findIndex(
-            (c) => c.id === activeColumnId
-          );
-          const toIndex = board.columns.findIndex(
-            (c) => c.id === overColumnId
-          );
-          if (fromIndex !== -1 && toIndex !== -1) {
-            moveColumn(fromIndex, toIndex);
-          }
-        }
-      } else if (type === "card") {
-        // Card reordering within same column (cross-column already handled in onDragOver)
-        const activeCardId = active.id as string;
-        const overId = over.id as string;
-
-        const activeColumn = findColumnByCardId(board, activeCardId);
-        if (!activeColumn) {
-          setActiveId(null);
-          setActiveType(null);
-          return;
-        }
-
-        const overType = over.data.current?.type;
-
-        if (overType === "card") {
-          const overColumn = findColumnByCardId(board, overId);
-          if (!overColumn) {
-            setActiveId(null);
-            setActiveType(null);
-            return;
-          }
-
-          if (activeColumn.id === overColumn.id) {
-            // Within same column, reorder
-            const oldIndex = activeColumn.cardIds.indexOf(activeCardId);
-            const newIndex = activeColumn.cardIds.indexOf(overId);
-            if (oldIndex !== newIndex) {
-              moveCard(activeCardId, activeColumn.id, activeColumn.id, newIndex);
+          if (activeColumnId !== overColumnId) {
+            const fromIndex = currentBoard.columns.findIndex(
+              (c) => c.id === activeColumnId
+            );
+            const toIndex = currentBoard.columns.findIndex(
+              (c) => c.id === overColumnId
+            );
+            if (fromIndex !== -1 && toIndex !== -1) {
+              moveColumn(fromIndex, toIndex);
            }
          }
-        } else if (overType === "column") {
-          // Dropped on an empty column droppable
-          const columnId = over.data.current?.columnId as string | undefined;
-          const targetColumnId = columnId ?? (over.id as string);
-          const targetColumn = board.columns.find(
-            (c) => c.id === targetColumnId
-          );
+        } else if (type === "card") {
+          const activeCardId = active.id as string;
+          const overId = over.id as string;

-          if (targetColumn && activeColumn.id !== targetColumn.id) {
-            moveCard(
-              activeCardId,
-              activeColumn.id,
-              targetColumn.id,
-              targetColumn.cardIds.length
+          const activeColumn = findColumnByCardId(currentBoard, activeCardId);
+          if (!activeColumn) return;
+
+          const overType = over.data.current?.type;
+
+          if (overType === "card") {
+            const overColumn = findColumnByCardId(currentBoard, overId);
+            if (!overColumn) return;
+
+            if (activeColumn.id === overColumn.id) {
+              const oldIndex = activeColumn.cardIds.indexOf(activeCardId);
+              const newIndex = activeColumn.cardIds.indexOf(overId);
+              if (oldIndex !== newIndex) {
+                moveCard(activeCardId, activeColumn.id, activeColumn.id, newIndex);
+              }
+            }
+          } else if (overType === "column") {
+            const columnId = over.data.current?.columnId as string | undefined;
+            const targetColumnId = columnId ?? (over.id as string);
+            const targetColumn = currentBoard.columns.find(
+              (c) => c.id === targetColumnId
            );
+
+            if (targetColumn && activeColumn.id !== targetColumn.id) {
+              moveCard(
+                activeCardId,
+                activeColumn.id,
+                targetColumn.id,
+                targetColumn.cardIds.length
+              );
+            }
          }
        }
+      } finally {
+        clearDragState();
      }
-
-      setActiveId(null);
-      setActiveType(null);
    },
-    [board, moveCard, moveColumn]
+    [moveCard, moveColumn, clearDragState]
  );

  const [announcement, setAnnouncement] = useState("");

  const handleDragEndWithAnnouncement = useCallback(
    (event: DragEndEvent) => {
+      // Read board BEFORE handleDragEnd potentially modifies it
+      const currentBoard = useBoardStore.getState().board;
      handleDragEnd(event);
+
      const { active, over } = event;
-      if (over && board) {
+      if (over && currentBoard) {
        const type = active.data.current?.type;
        if (type === "card") {
-          const card = board.cards[active.id as string];
+          const card = currentBoard.cards[active.id as string];
          const targetCol = over.data.current?.type === "column"
-            ? board.columns.find((c) => c.id === (over.data.current?.columnId ?? over.id))
-            : findColumnByCardId(board, over.id as string);
+            ? currentBoard.columns.find((c) => c.id === (over.data.current?.columnId ?? over.id))
+            : findColumnByCardId(currentBoard, over.id as string);
          if (card && targetCol) {
            setAnnouncement(`Moved card "${card.title}" to ${targetCol.title}`);
          }
        } else if (type === "column") {
-          const col = board.columns.find((c) => c.id === (active.id as string));
+          const col = currentBoard.columns.find((c) => c.id === (active.id as string));
          if (col) {
            setAnnouncement(`Reordered column "${col.title}"`);
          }
        }
      }
    },
-    [handleDragEnd, board]
+    [handleDragEnd]
  );

  if (!board) {
@@ -311,31 +397,53 @@ export function BoardView() {
    >
      {announcement}
    </div>
+    <AnimatePresence>
+      {showFilterBar && board && (
+        <FilterBar
+          filters={filters}
+          onChange={setFilters}
+          onClose={() => { setShowFilterBar(false); setFilters(EMPTY_FILTER); }}
+          boardLabels={board.labels}
+        />
+      )}
+    </AnimatePresence>
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDragEnd={handleDragEndWithAnnouncement}
+      onDragCancel={clearDragState}
    >
      <SortableContext
        items={columnIds}
        strategy={horizontalListSortingStrategy}
      >
+        <OverlayScrollbarsComponent
+          ref={osRef}
+          className="h-full"
+          options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true }, overflow: { y: "hidden" } }}
+          defer
+        >
        <motion.div
-          className="flex h-full overflow-x-auto"
+          className="flex h-full"
          style={{ gap: `calc(1.5rem * var(--density-factor))`, padding: `calc(1.5rem * var(--density-factor))`, ...getBoardBackground(board) }}
          variants={staggerContainer(0.06)}
          initial="hidden"
          animate="visible"
        >
-          {board.columns.map((column) => (
-            <KanbanColumn
-              key={column.id}
-              column={column}
-              onCardClick={setSelectedCardId}
-            />
-          ))}
+          <AnimatePresence>
+            {board.columns.map((column) => (
+              <KanbanColumn
+                key={column.id}
+                column={column}
+                filteredCardIds={isFilterActive(filters) ? filterCards(column.cardIds) : undefined}
+                focusedCardId={focusedCardId}
+                onCardClick={handleCardClick}
+                isNew={!initialColumnIds.current?.has(column.id)}
+              />
+            ))}
+          </AnimatePresence>

          {/* Add column button / inline input */}
          <div className="shrink-0">
@@ -384,6 +492,7 @@ export function BoardView() {
            )}
          </div>
        </motion.div>
+        </OverlayScrollbarsComponent>
      </SortableContext>

      {/* Drag overlay - renders a styled copy of the dragged item */}
@@ -400,7 +509,7 @@ export function BoardView() {

    <CardDetailModal
      cardId={selectedCardId}
-      onClose={() => setSelectedCardId(null)}
+      onClose={() => { setSelectedCardId(null); }}
    />
    </>
  );
--- a/src/components/board/CardThumbnail.tsx
+++ b/src/components/board/CardThumbnail.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { format } from "date-fns";
 import { motion, useReducedMotion, AnimatePresence } from "framer-motion";
@@ -65,9 +65,10 @@ interface CardThumbnailProps {
  boardLabels: Label[];
  columnId: string;
  onCardClick?: (cardId: string) => void;
+  isFocused?: boolean;
 }

-export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: CardThumbnailProps) {
+export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocused }: CardThumbnailProps) {
  const prefersReducedMotion = useReducedMotion();

  const {
@@ -82,6 +83,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
    data: { type: "card", columnId },
  });

+  const cardRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (isFocused && cardRef.current) {
+      cardRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [isFocused]);
+
  const hasDueDate = card.dueDate != null;
  const dueDateStatus = getDueDateStatus(card.dueDate);

@@ -111,7 +120,10 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <motion.button
-          ref={setNodeRef}
+          ref={(node) => {
+            setNodeRef(node);
+            (cardRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+          }}
          style={{
            transform: CSS.Transform.toString(transform),
            transition,
@@ -119,7 +131,9 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
            opacity: getAgingOpacity(card.updatedAt),
          }}
          onClick={handleClick}
-          className="w-full rounded-lg bg-pylon-surface shadow-sm text-left"
+          className={`w-full rounded-lg bg-pylon-surface shadow-sm text-left ${
+            isFocused ? "ring-2 ring-pylon-accent ring-offset-2 ring-offset-pylon-column" : ""
+          }`}
          layoutId={`card-${card.id}`}
          variants={fadeSlideUp}
          initial={prefersReducedMotion ? false : "hidden"}
--- a/src/components/board/ColumnHeader.tsx
+++ b/src/components/board/ColumnHeader.tsx
@@ -20,6 +20,7 @@ import type { Column, ColumnWidth } from "@/types/board";
 interface ColumnHeaderProps {
  column: Column;
  cardCount: number;
+  filteredCount?: number;
 }

 const COLOR_PRESETS = [
@@ -35,7 +36,7 @@ const COLOR_PRESETS = [
  { hue: "0", label: "Slate" },
 ];

-export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
+export function ColumnHeader({ column, cardCount, filteredCount }: ColumnHeaderProps) {
  const [editing, setEditing] = useState(false);
  const [editValue, setEditValue] = useState(column.title);
  const inputRef = useRef<HTMLInputElement>(null);
@@ -107,7 +108,7 @@ export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
              ? "text-[oklch(65%_0.15_70)]"
              : "text-pylon-text-secondary"
        }`}>
-          {cardCount}{column.wipLimit != null ? `/${column.wipLimit}` : ""}
+          {filteredCount != null ? `${filteredCount} of ` : ""}{cardCount}{column.wipLimit != null ? `/${column.wipLimit}` : ""}
        </span>
      </div>

--- a/src/components/board/FilterBar.tsx
+++ b/src/components/board/FilterBar.tsx
@@ -0,0 +1,146 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { springs } from "@/lib/motion";
+import { X, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { Label, Priority } from "@/types/board";
+
+export interface FilterState {
+  text: string;
+  labels: string[];
+  dueDate: "all" | "overdue" | "week" | "today" | "none";
+  priority: "all" | Priority;
+}
+
+export const EMPTY_FILTER: FilterState = {
+  text: "",
+  labels: [],
+  dueDate: "all",
+  priority: "all",
+};
+
+export function isFilterActive(f: FilterState): boolean {
+  return f.text !== "" || f.labels.length > 0 || f.dueDate !== "all" || f.priority !== "all";
+}
+
+interface FilterBarProps {
+  filters: FilterState;
+  onChange: (filters: FilterState) => void;
+  onClose: () => void;
+  boardLabels: Label[];
+}
+
+export function FilterBar({ filters, onChange, onClose, boardLabels }: FilterBarProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [textDraft, setTextDraft] = useState(filters.text);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleTextChange = useCallback(
+    (value: string) => {
+      setTextDraft(value);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        onChange({ ...filters, text: value });
+      }, 200);
+    },
+    [filters, onChange]
+  );
+
+  function toggleLabel(labelId: string) {
+    const labels = filters.labels.includes(labelId)
+      ? filters.labels.filter((l) => l !== labelId)
+      : [...filters.labels, labelId];
+    onChange({ ...filters, labels });
+  }
+
+  function clearAll() {
+    setTextDraft("");
+    onChange(EMPTY_FILTER);
+  }
+
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: "auto", opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={springs.snappy}
+      className="overflow-hidden border-b border-border bg-pylon-surface"
+    >
+      <div className="flex items-center gap-3 px-4 py-2">
+        {/* Text search */}
+        <div className="flex items-center gap-1.5 rounded-md bg-pylon-column px-2 py-1">
+          <Search className="size-3.5 text-pylon-text-secondary" />
+          <input
+            ref={inputRef}
+            value={textDraft}
+            onChange={(e) => handleTextChange(e.target.value)}
+            placeholder="Search cards..."
+            className="h-5 w-40 bg-transparent text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
+          />
+        </div>
+
+        {/* Label filter chips */}
+        {boardLabels.length > 0 && (
+          <div className="flex items-center gap-1">
+            {boardLabels.map((label) => (
+              <button
+                key={label.id}
+                onClick={() => toggleLabel(label.id)}
+                className={`rounded-full px-2 py-0.5 text-xs transition-all ${
+                  filters.labels.includes(label.id)
+                    ? "text-white"
+                    : "opacity-40 hover:opacity-70"
+                }`}
+                style={{ backgroundColor: label.color }}
+              >
+                {label.name}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Due date filter */}
+        <select
+          value={filters.dueDate}
+          onChange={(e) => onChange({ ...filters, dueDate: e.target.value as FilterState["dueDate"] })}
+          className="h-6 rounded-md bg-pylon-column px-2 text-xs text-pylon-text outline-none"
+        >
+          <option value="all">All dates</option>
+          <option value="overdue">Overdue</option>
+          <option value="week">Due this week</option>
+          <option value="today">Due today</option>
+          <option value="none">No date</option>
+        </select>
+
+        {/* Priority filter */}
+        <select
+          value={filters.priority}
+          onChange={(e) => onChange({ ...filters, priority: e.target.value as FilterState["priority"] })}
+          className="h-6 rounded-md bg-pylon-column px-2 text-xs text-pylon-text outline-none"
+        >
+          <option value="all">All priorities</option>
+          <option value="urgent">Urgent</option>
+          <option value="high">High</option>
+          <option value="medium">Medium</option>
+          <option value="low">Low</option>
+          <option value="none">No priority</option>
+        </select>
+
+        {/* Spacer + clear + close */}
+        <div className="flex-1" />
+        {isFilterActive(filters) && (
+          <Button variant="ghost" size="sm" onClick={clearAll} className="text-xs text-pylon-text-secondary">
+            Clear all
+          </Button>
+        )}
+        <Button variant="ghost" size="icon-xs" onClick={onClose} className="text-pylon-text-secondary hover:text-pylon-text">
+          <X className="size-3.5" />
+        </Button>
+      </div>
+    </motion.div>
+  );
+}
--- a/src/components/board/KanbanColumn.tsx
+++ b/src/components/board/KanbanColumn.tsx
@@ -25,11 +25,13 @@ const WIDTH_MAP = {

 interface KanbanColumnProps {
  column: Column;
+  filteredCardIds?: string[];
+  focusedCardId?: string | null;
  onCardClick?: (cardId: string) => void;
  isNew?: boolean;
 }

-export function KanbanColumn({ column, onCardClick, isNew }: KanbanColumnProps) {
+export function KanbanColumn({ column, filteredCardIds, focusedCardId, onCardClick, isNew }: KanbanColumnProps) {
  const [showAddCard, setShowAddCard] = useState(false);
  const board = useBoardStore((s) => s.board);
  const toggleColumnCollapse = useBoardStore((s) => s.toggleColumnCollapse);
@@ -62,6 +64,8 @@ export function KanbanColumn({ column, onCardClick, isNew }: KanbanColumnProps)
      ? `3px solid ${board.color}30`
      : undefined;

+  const displayCardIds = filteredCardIds ?? column.cardIds;
+  const isFiltering = filteredCardIds != null;
  const cardCount = column.cardIds.length;

  const wipTint = column.wipLimit != null
@@ -117,7 +121,7 @@ export function KanbanColumn({ column, onCardClick, isNew }: KanbanColumnProps)
    >
      {/* The column header is the drag handle for column reordering */}
      <div {...listeners}>
-        <ColumnHeader column={column} cardCount={column.cardIds.length} />
+        <ColumnHeader column={column} cardCount={cardCount} filteredCount={isFiltering ? displayCardIds.length : undefined} />
      </div>

      {/* Card list - wrapped in SortableContext for within-column sorting */}
@@ -138,7 +142,7 @@ export function KanbanColumn({ column, onCardClick, isNew }: KanbanColumnProps)
            initial="hidden"
            animate="visible"
          >
-            {column.cardIds.map((cardId) => {
+            {displayCardIds.map((cardId) => {
              const card = board?.cards[cardId];
              if (!card) return null;
              return (
@@ -148,13 +152,14 @@ export function KanbanColumn({ column, onCardClick, isNew }: KanbanColumnProps)
                    boardLabels={board?.labels ?? []}
                    columnId={column.id}
                    onCardClick={onCardClick}
+                    isFocused={focusedCardId === cardId}
                  />
                </li>
              );
            })}
-            {column.cardIds.length === 0 && (
+            {displayCardIds.length === 0 && (
              <li className="flex min-h-[60px] items-center justify-center rounded-md border border-dashed border-pylon-text-secondary/20 text-xs text-pylon-text-secondary/50">
-                Drop or add a card
+                {isFiltering ? "No matching cards" : "Drop or add a card"}
              </li>
            )}
          </motion.ul>
--- a/src/components/card-detail/CardDetailModal.tsx
+++ b/src/components/card-detail/CardDetailModal.tsx
@@ -9,6 +9,7 @@ import { LabelPicker } from "@/components/card-detail/LabelPicker";
 import { DueDatePicker } from "@/components/card-detail/DueDatePicker";
 import { AttachmentSection } from "@/components/card-detail/AttachmentSection";
 import { PriorityPicker } from "@/components/card-detail/PriorityPicker";
+import { CommentsSection } from "@/components/card-detail/CommentsSection";
 import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";

 interface CardDetailModalProps {
@@ -165,6 +166,15 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
                    attachments={card.attachments}
                  />
                </motion.div>
+
+                {/* Row 5: Comments (full width) */}
+                <motion.div
+                  className="col-span-2 rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <CommentsSection cardId={cardId} comments={card.comments} />
+                </motion.div>
              </motion.div>
              </OverlayScrollbarsComponent>
            </motion.div>
--- a/src/components/card-detail/CommentsSection.tsx
+++ b/src/components/card-detail/CommentsSection.tsx
@@ -0,0 +1,97 @@
+import { useState, useRef } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { X } from "lucide-react";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import { Button } from "@/components/ui/button";
+import { useBoardStore } from "@/stores/board-store";
+import type { Comment } from "@/types/board";
+
+interface CommentsSectionProps {
+  cardId: string;
+  comments: Comment[];
+}
+
+export function CommentsSection({ cardId, comments }: CommentsSectionProps) {
+  const addComment = useBoardStore((s) => s.addComment);
+  const deleteComment = useBoardStore((s) => s.deleteComment);
+  const [draft, setDraft] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  function handleAdd() {
+    const trimmed = draft.trim();
+    if (!trimmed) return;
+    addComment(cardId, trimmed);
+    setDraft("");
+    textareaRef.current?.focus();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleAdd();
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+        Comments
+      </h4>
+
+      {/* Add comment */}
+      <div className="flex gap-2">
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Add a comment... (Enter to send, Shift+Enter for newline)"
+          rows={2}
+          className="flex-1 resize-none rounded-md bg-pylon-column px-2 py-1.5 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:ring-1 focus:ring-pylon-accent"
+        />
+        <Button
+          size="sm"
+          onClick={handleAdd}
+          disabled={!draft.trim()}
+          className="self-end"
+        >
+          Add
+        </Button>
+      </div>
+
+      {/* Comment list */}
+      {comments.length > 0 && (
+        <OverlayScrollbarsComponent
+          className="max-h-[200px]"
+          options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true }, overflow: { x: "hidden" } }}
+          defer
+        >
+          <div className="flex flex-col gap-2">
+            {comments.map((comment) => (
+              <div
+                key={comment.id}
+                className="group/comment flex gap-2 rounded px-2 py-1.5 hover:bg-pylon-column/60"
+              >
+                <div className="flex-1">
+                  <p className="whitespace-pre-wrap text-sm text-pylon-text">
+                    {comment.text}
+                  </p>
+                  <span className="font-mono text-[10px] text-pylon-text-secondary">
+                    {formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
+                  </span>
+                </div>
+                <button
+                  onClick={() => deleteComment(cardId, comment.id)}
+                  className="shrink-0 self-start rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/comment:opacity-100"
+                  aria-label="Delete comment"
+                >
+                  <X className="size-3" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </OverlayScrollbarsComponent>
+      )}
+    </div>
+  );
+}
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { springs } from "@/lib/motion";
-import { ArrowLeft, Settings, Search, Undo2, Redo2, SlidersHorizontal } from "lucide-react";
+import { ArrowLeft, Settings, Search, Undo2, Redo2, SlidersHorizontal, Filter } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
  Tooltip,
@@ -11,7 +11,8 @@ import {
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
@@ -138,6 +139,21 @@ export function TopBar() {
      <div className="flex items-center gap-1">
        {isBoardView && (
          <>
+            <AnimatePresence mode="wait">
+              {savingStatus && (
+                <motion.span
+                  key={savingStatus}
+                  className="font-mono text-xs text-pylon-text-secondary"
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 4 }}
+                  transition={springs.snappy}
+                >
+                  {savingStatus}
+                </motion.span>
+              )}
+            </AnimatePresence>
+            <div className="mx-2 h-4 w-px bg-pylon-text-secondary/20" />
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
@@ -168,6 +184,21 @@ export function TopBar() {
                Redo <kbd className="ml-1 font-mono text-[10px] opacity-60">Ctrl+Shift+Z</kbd>
              </TooltipContent>
            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="text-pylon-text-secondary hover:text-pylon-text"
+                  onClick={() => document.dispatchEvent(new CustomEvent("toggle-filter-bar"))}
+                >
+                  <Filter className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                Filter cards <kbd className="ml-1 font-mono text-[10px] opacity-60">/</kbd>
+              </TooltipContent>
+            </Tooltip>
          </>
        )}
        {isBoardView && board && (
@@ -185,37 +216,33 @@ export function TopBar() {
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>Background</DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
-                  {(["none", "dots", "grid", "gradient"] as const).map((bg) => (
-                    <DropdownMenuItem
-                      key={bg}
-                      onClick={() => useBoardStore.getState().updateBoardSettings({ ...board.settings, background: bg })}
-                    >
-                      {bg.charAt(0).toUpperCase() + bg.slice(1)}
-                      {board.settings.background === bg && (
-                        <span className="ml-auto text-pylon-accent">*</span>
-                      )}
-                    </DropdownMenuItem>
-                  ))}
+                  <DropdownMenuRadioGroup
+                    value={board.settings.background}
+                    onValueChange={(v) => useBoardStore.getState().updateBoardSettings({ ...board.settings, background: v as typeof board.settings.background })}
+                  >
+                    {(["none", "dots", "grid", "gradient"] as const).map((bg) => (
+                      <DropdownMenuRadioItem key={bg} value={bg}>
+                        {bg.charAt(0).toUpperCase() + bg.slice(1)}
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Attachments</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup
+                    value={board.settings.attachmentMode}
+                    onValueChange={(v) => useBoardStore.getState().updateBoardSettings({ ...board.settings, attachmentMode: v as typeof board.settings.attachmentMode })}
+                  >
+                    <DropdownMenuRadioItem value="link">Link to original</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="copy">Copy into board</DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
            </DropdownMenuContent>
          </DropdownMenu>
        )}
-        <AnimatePresence mode="wait">
-          {savingStatus && (
-            <motion.span
-              key={savingStatus}
-              className="mr-2 font-mono text-xs text-pylon-text-secondary"
-              initial={{ opacity: 0, y: -4 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 4 }}
-              transition={springs.snappy}
-            >
-              {savingStatus}
-            </motion.span>
-          )}
-        </AnimatePresence>
-
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
--- a/src/hooks/useKeyboardNavigation.ts
+++ b/src/hooks/useKeyboardNavigation.ts
@@ -0,0 +1,90 @@
+import { useState, useEffect, useCallback } from "react";
+import type { Board } from "@/types/board";
+
+export function useKeyboardNavigation(
+  board: Board | null,
+  onOpenCard: (cardId: string) => void
+) {
+  const [focusedCardId, setFocusedCardId] = useState<string | null>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!board) return;
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+
+      const key = e.key.toLowerCase();
+      const isNav = ["j", "k", "h", "l", "arrowdown", "arrowup", "arrowleft", "arrowright", "enter", "escape"].includes(key);
+      if (!isNav) return;
+
+      e.preventDefault();
+
+      if (key === "escape") {
+        setFocusedCardId(null);
+        return;
+      }
+
+      if (key === "enter" && focusedCardId) {
+        onOpenCard(focusedCardId);
+        return;
+      }
+
+      // Build navigation grid
+      const columns = board.columns.filter((c) => !c.collapsed && c.cardIds.length > 0);
+      if (columns.length === 0) return;
+
+      // Find current position
+      let colIdx = -1;
+      let cardIdx = -1;
+      if (focusedCardId) {
+        for (let ci = 0; ci < columns.length; ci++) {
+          const idx = columns[ci].cardIds.indexOf(focusedCardId);
+          if (idx !== -1) {
+            colIdx = ci;
+            cardIdx = idx;
+            break;
+          }
+        }
+      }
+
+      // If nothing focused, focus first card
+      if (colIdx === -1) {
+        setFocusedCardId(columns[0].cardIds[0]);
+        return;
+      }
+
+      if (key === "j" || key === "arrowdown") {
+        const col = columns[colIdx];
+        const next = Math.min(cardIdx + 1, col.cardIds.length - 1);
+        setFocusedCardId(col.cardIds[next]);
+      } else if (key === "k" || key === "arrowup") {
+        const col = columns[colIdx];
+        const next = Math.max(cardIdx - 1, 0);
+        setFocusedCardId(col.cardIds[next]);
+      } else if (key === "l" || key === "arrowright") {
+        const nextCol = Math.min(colIdx + 1, columns.length - 1);
+        const targetIdx = Math.min(cardIdx, columns[nextCol].cardIds.length - 1);
+        setFocusedCardId(columns[nextCol].cardIds[targetIdx]);
+      } else if (key === "h" || key === "arrowleft") {
+        const prevCol = Math.max(colIdx - 1, 0);
+        const targetIdx = Math.min(cardIdx, columns[prevCol].cardIds.length - 1);
+        setFocusedCardId(columns[prevCol].cardIds[targetIdx]);
+      }
+    },
+    [board, focusedCardId, onOpenCard]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  // Clear focus when a card is removed
+  useEffect(() => {
+    if (focusedCardId && board && !board.cards[focusedCardId]) {
+      setFocusedCardId(null);
+    }
+  }, [board, focusedCardId]);
+
+  return { focusedCardId, setFocusedCardId };
+}
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -86,4 +86,5 @@ export const appSettingsSchema = z.object({
  windowState: windowStateSchema.nullable().default(null),
  boardSortOrder: z.enum(["manual", "title", "created", "updated"]).default("updated"),
  boardManualOrder: z.array(z.string()).default([]),
+  lastNotificationCheck: z.string().nullable().default(null),
 });
--- a/src/stores/app-store.ts
+++ b/src/stores/app-store.ts
@@ -1,7 +1,8 @@
 import { create } from "zustand";
-import type { AppSettings } from "@/types/settings";
+import type { AppSettings, BoardSortOrder } from "@/types/settings";
 import type { BoardMeta, ColumnWidth } from "@/types/board";
-import { loadSettings, saveSettings, listBoards, ensureDataDirs } from "@/lib/storage";
+import { loadSettings, saveSettings, listBoards, ensureDataDirs, loadBoard } from "@/lib/storage";
+import { isPermissionGranted, requestPermission, sendNotification } from "@tauri-apps/plugin-notification";

 export type View = { type: "board-list" } | { type: "board"; boardId: string };

@@ -20,6 +21,9 @@ interface AppState {
  setView: (view: View) => void;
  refreshBoards: () => Promise<void>;
  addRecentBoard: (boardId: string) => void;
+  setBoardSortOrder: (order: BoardSortOrder) => void;
+  setBoardManualOrder: (ids: string[]) => void;
+  getSortedBoards: () => BoardMeta[];
 }

 function applyTheme(theme: AppSettings["theme"]): void {
@@ -63,6 +67,9 @@ export const useAppStore = create<AppState>((set, get) => ({
    density: "comfortable",
    defaultColumnWidth: "standard",
    windowState: null,
+    boardSortOrder: "updated",
+    boardManualOrder: [],
+    lastNotificationCheck: null,
  },
  boards: [],
  view: { type: "board-list" },
@@ -75,6 +82,45 @@ export const useAppStore = create<AppState>((set, get) => ({
    set({ settings, boards, initialized: true });
    applyTheme(settings.theme);
    applyAppearance(settings);
+
+    // Due date notifications (once per hour)
+    const lastCheck = settings.lastNotificationCheck;
+    const hourAgo = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+    if (!lastCheck || lastCheck < hourAgo) {
+      try {
+        let granted = await isPermissionGranted();
+        if (!granted) {
+          const perm = await requestPermission();
+          granted = perm === "granted";
+        }
+        if (granted) {
+          let dueToday = 0;
+          let overdue = 0;
+          const today = new Date();
+          const todayStr = today.toDateString();
+
+          for (const meta of boards) {
+            try {
+              const board = await loadBoard(meta.id);
+              for (const card of Object.values(board.cards)) {
+                if (!card.dueDate) continue;
+                const due = new Date(card.dueDate);
+                if (due.toDateString() === todayStr) dueToday++;
+                else if (due < today) overdue++;
+              }
+            } catch { /* skip */ }
+          }
+
+          if (dueToday > 0) {
+            sendNotification({ title: "OpenPylon", body: `You have ${dueToday} card${dueToday > 1 ? "s" : ""} due today` });
+          }
+          if (overdue > 0) {
+            sendNotification({ title: "OpenPylon", body: `You have ${overdue} overdue card${overdue > 1 ? "s" : ""}` });
+          }
+        }
+        updateAndSave(get, set, { lastNotificationCheck: new Date().toISOString() });
+      } catch { /* notification plugin not available */ }
+    }
  },

  setTheme: (theme) => {
@@ -117,4 +163,44 @@ export const useAppStore = create<AppState>((set, get) => ({
    ].slice(0, 10);
    updateAndSave(get, set, { recentBoardIds: recent });
  },
+
+  setBoardSortOrder: (boardSortOrder) => {
+    // When switching to manual for the first time, snapshot current order
+    if (boardSortOrder === "manual" && get().settings.boardManualOrder.length === 0) {
+      const currentSorted = get().getSortedBoards();
+      updateAndSave(get, set, {
+        boardSortOrder,
+        boardManualOrder: currentSorted.map((b) => b.id),
+      });
+    } else {
+      updateAndSave(get, set, { boardSortOrder });
+    }
+  },
+
+  setBoardManualOrder: (boardManualOrder) => {
+    updateAndSave(get, set, { boardManualOrder });
+  },
+
+  getSortedBoards: () => {
+    const { boards, settings } = get();
+    const order = settings.boardSortOrder;
+
+    if (order === "manual") {
+      const manualOrder = settings.boardManualOrder;
+      const orderMap = new Map(manualOrder.map((id, i) => [id, i]));
+      return [...boards].sort((a, b) => {
+        const ai = orderMap.get(a.id) ?? Infinity;
+        const bi = orderMap.get(b.id) ?? Infinity;
+        return ai - bi;
+      });
+    }
+    if (order === "title") {
+      return [...boards].sort((a, b) => a.title.localeCompare(b.title));
+    }
+    if (order === "created") {
+      return [...boards].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    }
+    // "updated" — default, already sorted from listBoards
+    return boards;
+  },
 }));
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -8,6 +8,8 @@ export interface WindowState {
  maximized: boolean;
 }

+export type BoardSortOrder = "manual" | "title" | "created" | "updated";
+
 export interface AppSettings {
  theme: "light" | "dark" | "system";
  dataDirectory: string | null;
@@ -17,4 +19,7 @@ export interface AppSettings {
  density: "compact" | "comfortable" | "spacious";
  defaultColumnWidth: ColumnWidth;
  windowState: WindowState | null;
+  boardSortOrder: BoardSortOrder;
+  boardManualOrder: string[];
+  lastNotificationCheck: string | null;
 }