@agent-native/core 0.101.14 → 0.102.1

package/corpus/templates/tasks/app/components/shared/list/ListRowDragHandle.tsx

@@ -0,0 +1,52 @@
+import { IconGripVertical } from "@tabler/icons-react";
+
+import type {
+  ListRowDrag,
+  ListRowRowSelection,
+} from "@/components/shared/list/ListRow";
+import { cn } from "@/lib/utils";
+
+interface ListRowDragHandleProps {
+  rowDrag: ListRowDrag;
+  rowSelection: ListRowRowSelection;
+  displayTitle: string;
+  disabled?: boolean;
+}
+
+export function ListRowDragHandle({
+  rowDrag,
+  rowSelection,
+  displayTitle,
+  disabled = false,
+}: ListRowDragHandleProps) {
+  const { dragHandleProps, isDragging } = rowDrag;
+  const { selectionMode } = rowSelection;
+
+  if (!dragHandleProps) return null;
+
+  return (
+    <button
+      type="button"
+      {...dragHandleProps}
+      disabled={disabled}
+      aria-label={`Reorder ${displayTitle}`}
+      onClick={(event) => {
+        if (selectionMode) {
+          event.stopPropagation();
+        }
+      }}
+      onPointerDown={(event) => {
+        dragHandleProps.onPointerDown?.(event);
+        if (selectionMode) {
+          event.stopPropagation();
+        }
+      }}
+      className={cn(
+        "flex size-8 shrink-0 cursor-grab items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50",
+        isDragging && "cursor-grabbing",
+      )}
+    >
+      <IconGripVertical className="size-4" />
+    </button>
+  );
+}

package/corpus/templates/tasks/app/components/shared/list/ListSkeletonRows.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ListSkeletonRows() {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: 3 }).map((_, index) => (
+        <Skeleton key={index} className="h-12 w-full rounded-lg" />
+      ))}
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/list/SortableListItemShell.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface SortableListItemShellProps {
+  setNodeRef: (element: HTMLElement | null) => void;
+  style: React.CSSProperties | undefined;
+  isDragging: boolean;
+  hideForBlockDrag: boolean;
+  children: ReactNode;
+}
+
+export function SortableListItemShell({
+  setNodeRef,
+  style,
+  isDragging,
+  hideForBlockDrag,
+  children,
+}: SortableListItemShellProps) {
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "transition-[height,opacity,margin] duration-200 ease-out",
+        (isDragging || hideForBlockDrag) && "opacity-0",
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/list/types.ts

@@ -0,0 +1 @@
+export type ListIdentifiable = { id: string; title?: string };

package/corpus/templates/tasks/app/components/shared/selection/ListSelectionBar.tsx

@@ -0,0 +1,158 @@
+import { IconCircleCheck, IconCircle } from "@tabler/icons-react";
+import { toast } from "sonner";
+
+import { ListSelectionToolbar } from "@/components/shared/selection/ListSelectionToolbar";
+import { type ListSelection } from "@/components/shared/selection/use-list-selection";
+import { Button } from "@/components/ui/button";
+import { useBulkMarkInboxItemsReady } from "@/hooks/use-inbox-items";
+import { useBulkUpdateTasks } from "@/hooks/use-tasks";
+
+interface ListSelectionBarProps<
+  T extends { id: string; title: string; done?: boolean },
+> {
+  promotedToTask: boolean;
+  items: T[];
+  selection: ListSelection<T>;
+  toolbarBusy: boolean;
+  onOpenBulkDelete: () => void;
+}
+
+export function ListSelectionBar<
+  T extends { id: string; title: string; done?: boolean },
+>({
+  promotedToTask,
+  items,
+  selection,
+  toolbarBusy,
+  onOpenBulkDelete,
+}: ListSelectionBarProps<T>) {
+  const bulkUpdateTasks = useBulkUpdateTasks();
+  const bulkMarkInboxItemsReady = useBulkMarkInboxItemsReady();
+
+  const selectedItems = selection.state.selectedItems;
+  const selectedCount = selectedItems.length;
+  const selectedIdSet = new Set(selectedItems.map((item) => item.id));
+  const allVisibleSelected =
+    items.length > 0 && items.every((item) => selectedIdSet.has(item.id));
+
+  const entityLabel = promotedToTask ? "task" : "item";
+
+  async function markSelectedReady() {
+    if (selectedCount === 0) return;
+
+    try {
+      await bulkMarkInboxItemsReady.mutateAsync({
+        inboxItemIds: selectedItems.map((item) => item.id),
+      });
+      toast.success(
+        `Marked ${selectedCount} ${selectedCount === 1 ? "item" : "items"} ready`,
+      );
+      selection.actions.clearSelection();
+    } catch {
+      toast.error("Could not mark selected items ready.");
+    }
+  }
+
+  async function markSelectedDone(done: boolean) {
+    const applicableTasks = selectedItems.filter((task) => task.done !== done);
+    const skippedCount = selectedItems.length - applicableTasks.length;
+    if (applicableTasks.length === 0) {
+      toast.info(
+        done
+          ? "All selected tasks are already complete."
+          : "All selected tasks are already incomplete.",
+      );
+      return;
+    }
+
+    const taskIds = applicableTasks.map((task) => task.id);
+
+    try {
+      await bulkUpdateTasks.mutateAsync({ taskIds, done });
+
+      const countLabel = applicableTasks.length === 1 ? "task" : "tasks";
+      toast.success(
+        done
+          ? skippedCount > 0
+            ? `Marked ${applicableTasks.length} ${countLabel} complete (${skippedCount} already complete)`
+            : `Marked ${applicableTasks.length} ${countLabel} complete`
+          : skippedCount > 0
+            ? `Marked ${applicableTasks.length} ${countLabel} incomplete (${skippedCount} already incomplete)`
+            : `Marked ${applicableTasks.length} ${countLabel} incomplete`,
+      );
+      selection.actions.clearSelection();
+    } catch {
+      toast.error("Could not update selected tasks.");
+    }
+  }
+
+  const allSelectedComplete =
+    promotedToTask &&
+    selectedCount > 0 &&
+    selectedItems.every((task) => task.done === true);
+  const allSelectedIncomplete =
+    promotedToTask &&
+    selectedCount > 0 &&
+    selectedItems.every((task) => task.done !== true);
+
+  const toolbarDisabled =
+    toolbarBusy || (!promotedToTask && bulkMarkInboxItemsReady.isPending);
+
+  return (
+    <ListSelectionToolbar
+      ariaLabel={
+        promotedToTask ? "Task selection actions" : "Inbox selection actions"
+      }
+      emptySelectionHint={`Tap ${entityLabel}s to select them.`}
+      visibleCount={items.length}
+      selectedCount={selectedCount}
+      allVisibleSelected={allVisibleSelected}
+      toolbarDisabled={toolbarDisabled}
+      selectionActions={selection.actions}
+      onOpenBulkDelete={onOpenBulkDelete}
+    >
+      {promotedToTask ? (
+        <>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 shrink-0 gap-1 px-2 text-xs"
+            disabled={
+              selectedCount === 0 || toolbarDisabled || allSelectedComplete
+            }
+            aria-label="Mark complete"
+            onClick={() => void markSelectedDone(true)}
+          >
+            <IconCircleCheck className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">Complete</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 shrink-0 gap-1 px-2 text-xs"
+            disabled={
+              selectedCount === 0 || toolbarDisabled || allSelectedIncomplete
+            }
+            aria-label="Mark incomplete"
+            onClick={() => void markSelectedDone(false)}
+          >
+            <IconCircle className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">Incomplete</span>
+          </Button>
+        </>
+      ) : (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 shrink-0 gap-1 px-2 text-xs"
+          disabled={selectedCount === 0 || toolbarDisabled}
+          aria-label="Mark ready"
+          onClick={() => void markSelectedReady()}
+        >
+          <IconCircleCheck className="h-3.5 w-3.5" />
+          <span className="hidden sm:inline">Mark ready</span>
+        </Button>
+      )}
+    </ListSelectionToolbar>
+  );
+}

package/corpus/templates/tasks/app/components/shared/selection/ListSelectionHeaderToggle.tsx

@@ -0,0 +1,28 @@
+import { IconChecks } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+
+interface ListSelectionHeaderToggleProps {
+  selectionMode: boolean;
+  disabled?: boolean;
+  onSelectionModeChange: (next: boolean) => void;
+}
+
+export function ListSelectionHeaderToggle({
+  selectionMode,
+  disabled,
+  onSelectionModeChange,
+}: ListSelectionHeaderToggleProps) {
+  return (
+    <Button
+      variant={selectionMode ? "secondary" : "ghost"}
+      size="sm"
+      className="h-8 shrink-0 gap-1.5 text-xs"
+      disabled={disabled}
+      onClick={() => onSelectionModeChange(!selectionMode)}
+    >
+      <IconChecks className="h-3.5 w-3.5" />
+      {selectionMode ? "Done selecting" : "Select"}
+    </Button>
+  );
+}

package/corpus/templates/tasks/app/components/shared/selection/ListSelectionToolbar.tsx

@@ -0,0 +1,81 @@
+import { IconTrash, IconX } from "@tabler/icons-react";
+import { type ReactNode } from "react";
+
+import { type ListSelectionActions } from "@/components/shared/selection/use-list-selection";
+import { Button } from "@/components/ui/button";
+
+interface ListSelectionToolbarProps {
+  ariaLabel: string;
+  emptySelectionHint: string;
+  visibleCount: number;
+  selectedCount: number;
+  allVisibleSelected: boolean;
+  toolbarDisabled: boolean;
+  selectionActions: ListSelectionActions;
+  onOpenBulkDelete: () => void;
+  children?: ReactNode;
+}
+
+export function ListSelectionToolbar({
+  ariaLabel,
+  emptySelectionHint,
+  visibleCount,
+  selectedCount,
+  allVisibleSelected,
+  toolbarDisabled,
+  selectionActions,
+  onOpenBulkDelete,
+  children,
+}: ListSelectionToolbarProps) {
+  const statusText =
+    selectedCount === 0
+      ? emptySelectionHint
+      : selectedCount > 1
+        ? `${selectedCount} selected · drag to reorder`
+        : `${selectedCount} selected`;
+
+  return (
+    <div
+      className="flex h-12 items-center gap-2 px-1"
+      role="toolbar"
+      aria-label={ariaLabel}
+    >
+      <p className="min-w-0 flex-1 truncate text-sm text-muted-foreground">
+        {statusText}
+      </p>
+      <div className="flex shrink-0 items-center gap-1 overflow-x-auto">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 shrink-0 px-2 text-xs"
+          disabled={toolbarDisabled || visibleCount === 0}
+          onClick={selectionActions.selectAll}
+        >
+          {allVisibleSelected ? "Clear all" : "Select all"}
+        </Button>
+        {children}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 shrink-0 gap-1 px-2 text-xs text-destructive hover:text-destructive"
+          disabled={selectedCount === 0 || toolbarDisabled}
+          aria-label="Delete"
+          onClick={onOpenBulkDelete}
+        >
+          <IconTrash className="h-3.5 w-3.5" />
+          <span className="hidden sm:inline">Delete</span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0"
+          disabled={toolbarDisabled}
+          onClick={selectionActions.clearSelection}
+          aria-label="Exit selection mode"
+        >
+          <IconX className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/selection/get-list-row-selection-ui.ts

@@ -0,0 +1,41 @@
+import type { MouseEvent } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type ListRowSelectionContainerUi = {
+  className: string;
+  role?: "option";
+  "aria-selected"?: boolean;
+  "aria-label"?: string;
+  onClick?: (event: MouseEvent<Element>) => void;
+};
+
+type GetListRowSelectionUiArgs = {
+  selectionMode: boolean;
+  selected: boolean;
+  itemLabel: string;
+  onRowSelect?: (event: MouseEvent<Element>) => void;
+};
+
+export function getListRowSelectionUi({
+  selectionMode,
+  selected,
+  itemLabel,
+  onRowSelect,
+}: GetListRowSelectionUiArgs): ListRowSelectionContainerUi {
+  if (!selectionMode) {
+    return { className: "" };
+  }
+
+  return {
+    className: cn(
+      "cursor-pointer select-none",
+      selected &&
+        "border-primary/40 bg-primary/[0.08] ring-2 ring-inset ring-primary/20",
+    ),
+    role: "option",
+    "aria-selected": selected,
+    "aria-label": itemLabel,
+    onClick: onRowSelect,
+  };
+}

package/corpus/templates/tasks/app/components/shared/selection/use-list-selection.ts

@@ -0,0 +1,196 @@
+import { setClientAppState } from "@agent-native/core/client/application-state";
+import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
+import { type ListSelectionAppState } from "@shared/navigation";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent,
+} from "react";
+
+import { TAB_ID } from "@/lib/tab-id";
+
+function useSelectionAppStateSync(
+  appStateKey: string | null,
+  selectionMode: boolean,
+  selectedIds: Set<string>,
+) {
+  const selectedIdsArray = Array.from(selectedIds);
+
+  useEffect(() => {
+    if (appStateKey === null) return;
+
+    const scopedKey = appStateKeyForBrowserTab(appStateKey, TAB_ID);
+    const hasSelection = selectionMode || selectedIdsArray.length > 0;
+    const value: ListSelectionAppState | null = hasSelection
+      ? { selectionMode, selectedIds: selectedIdsArray }
+      : null;
+
+    void setClientAppState(scopedKey, value, {
+      requestSource: TAB_ID,
+    });
+  }, [appStateKey, selectionMode, selectedIdsArray.join("\0")]);
+}
+
+export type ListSelectionState<T extends { id: string }> = {
+  selectionMode: boolean;
+  selectedItems: T[];
+};
+
+export type ListSelectionActions = {
+  clearSelection: () => void;
+  setSelectionModeFromHeader: (next: boolean) => void;
+  selectRow: (id: string, event: MouseEvent<Element>) => void;
+  startSelection: (id: string) => void;
+  selectAll: () => void;
+};
+
+export type ListSelection<T extends { id: string }> = {
+  state: ListSelectionState<T>;
+  actions: ListSelectionActions;
+};
+
+export function useListSelection<T extends { id: string }>(
+  items: T[],
+  appStateKey: string | null,
+): ListSelection<T> {
+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+  const lastSelectedIndexRef = useRef<number | null>(null);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+
+  const selectedItems = useMemo(
+    () => items.filter((item) => selectedIds.has(item.id)),
+    [items, selectedIds],
+  );
+
+  useSelectionAppStateSync(appStateKey, selectionMode, selectedIds);
+
+  useEffect(() => {
+    setSelectedIds((prev) => {
+      if (prev.size === 0) return prev;
+      const visibleIds = new Set(items.map((item) => item.id));
+      const next = new Set([...prev].filter((id) => visibleIds.has(id)));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [items]);
+
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+    setSelectionMode(false);
+    lastSelectedIndexRef.current = null;
+  }, []);
+
+  const setSelectionModeFromHeader = useCallback((next: boolean) => {
+    if (!next) {
+      setSelectedIds(new Set());
+      lastSelectedIndexRef.current = null;
+    }
+    setSelectionMode(next);
+  }, []);
+
+  const selectRow = useCallback((id: string, event: MouseEvent<Element>) => {
+    const visibleItems = itemsRef.current;
+    const index = visibleItems.findIndex((item) => item.id === id);
+    if (index < 0) return;
+
+    if (event.shiftKey && lastSelectedIndexRef.current !== null) {
+      const start = Math.min(lastSelectedIndexRef.current, index);
+      const end = Math.max(lastSelectedIndexRef.current, index);
+      const rangeIds = visibleItems
+        .slice(start, end + 1)
+        .map((item) => item.id);
+      setSelectedIds((prev) => new Set([...prev, ...rangeIds]));
+      return;
+    }
+
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+    lastSelectedIndexRef.current = index;
+  }, []);
+
+  const startSelection = useCallback((id: string) => {
+    const visibleItems = itemsRef.current;
+    const index = visibleItems.findIndex((item) => item.id === id);
+    setSelectionMode(true);
+    setSelectedIds(new Set([id]));
+    lastSelectedIndexRef.current = index >= 0 ? index : null;
+  }, []);
+
+  const selectAll = useCallback(() => {
+    const visibleItems = itemsRef.current;
+    setSelectedIds((prev) => {
+      const allVisibleSelected =
+        visibleItems.length > 0 &&
+        visibleItems.every((item) => prev.has(item.id));
+      if (allVisibleSelected) {
+        return new Set();
+      }
+      return new Set(visibleItems.map((item) => item.id));
+    });
+  }, []);
+
+  const actions = useMemo(
+    () => ({
+      clearSelection,
+      setSelectionModeFromHeader,
+      selectRow,
+      startSelection,
+      selectAll,
+    }),
+    [
+      clearSelection,
+      setSelectionModeFromHeader,
+      selectRow,
+      startSelection,
+      selectAll,
+    ],
+  );
+
+  useEffect(() => {
+    if (!selectionMode) return;
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        clearSelection();
+        return;
+      }
+
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "a") {
+        const target = event.target;
+        if (
+          target instanceof HTMLElement &&
+          (target.isContentEditable ||
+            target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA")
+        ) {
+          return;
+        }
+        event.preventDefault();
+        selectAll();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [selectionMode, clearSelection, selectAll]);
+
+  return {
+    state: {
+      selectionMode,
+      selectedItems,
+    },
+    actions,
+  };
+}