@agent-native/core 0.101.14 → 0.102.1

package/corpus/templates/tasks/app/components/layout/Sidebar.tsx

@@ -0,0 +1,211 @@
+import { appPath, FeedbackButton } from "@agent-native/core/client";
+import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
+import { OrgSwitcher } from "@agent-native/core/client/org";
+import {
+  IconCheckbox,
+  IconForms,
+  IconInbox,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+} from "@tabler/icons-react";
+import { Link, useLocation } from "react-router";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { APP_TITLE } from "@/lib/app-config";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { icon: IconInbox, label: "Inbox", href: "/inbox" },
+  { icon: IconCheckbox, label: "Tasks", href: "/tasks" },
+  { icon: IconForms, label: "Fields", href: "/fields" },
+];
+
+interface SidebarProps {
+  collapsed?: boolean;
+  collapsible?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+}
+
+export function Sidebar({
+  collapsed = false,
+  collapsible = true,
+  onCollapsedChange,
+}: SidebarProps) {
+  const location = useLocation();
+  const ToggleIcon = collapsed
+    ? IconLayoutSidebarLeftExpand
+    : IconLayoutSidebarLeftCollapse;
+  const navClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      "flex items-center text-sm transition-colors",
+      collapsed
+        ? "relative h-10 w-full justify-center rounded-none border-l-2 px-0"
+        : "h-9 rounded-md gap-3 px-3",
+      isActive
+        ? collapsed
+          ? "border-l-sidebar-accent-foreground/80 bg-sidebar-accent text-sidebar-accent-foreground"
+          : "bg-sidebar-accent text-sidebar-accent-foreground"
+        : collapsed
+          ? "border-l-transparent text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
+          : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
+    );
+  const collapseButton = collapsible ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => onCollapsedChange?.(!collapsed)}
+          className={cn(
+            "flex shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            collapsed ? "size-8" : "size-7",
+          )}
+          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          <ToggleIcon className="size-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+
+  return (
+    <aside
+      data-collapsed={collapsed ? "true" : "false"}
+      className={cn(
+        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-150",
+        collapsed ? "w-12" : "w-60",
+      )}
+    >
+      <div
+        className={cn(
+          "flex shrink-0 items-center border-b border-sidebar-border",
+          collapsed ? "h-12 justify-center px-0" : "h-14 px-3",
+        )}
+      >
+        <Link
+          to="/tasks"
+          className={cn(
+            "flex min-w-0 items-center rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            collapsed ? "size-7 justify-center" : "flex-1 gap-3",
+          )}
+          aria-label={collapsed ? APP_TITLE : undefined}
+        >
+          <img
+            src={appPath("/agent-native-icon-light.svg")}
+            alt=""
+            aria-hidden="true"
+            className="block h-4 w-auto shrink-0 dark:hidden"
+          />
+          <img
+            src={appPath("/agent-native-icon-dark.svg")}
+            alt=""
+            aria-hidden="true"
+            className="hidden h-4 w-auto shrink-0 dark:block"
+          />
+          <div className={cn("min-w-0", collapsed && "sr-only")}>
+            <p className="truncate text-sm font-semibold text-sidebar-accent-foreground">
+              {APP_TITLE}
+            </p>
+          </div>
+        </Link>
+      </div>
+
+      <nav
+        className={cn(
+          "flex-1 overflow-y-auto",
+          collapsed ? "px-0 py-2" : "px-2 py-3",
+        )}
+      >
+        <div className={cn("grid", collapsed ? "gap-0" : "gap-1")}>
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = location.pathname.startsWith(item.href);
+            const link = (
+              <Link
+                to={item.href}
+                className={navClass({ isActive })}
+                aria-current={isActive ? "page" : undefined}
+                aria-label={collapsed ? item.label : undefined}
+              >
+                <Icon className="size-4 shrink-0" />
+                <span className={collapsed ? "sr-only" : "truncate"}>
+                  {item.label}
+                </span>
+              </Link>
+            );
+            return collapsed ? (
+              <Tooltip key={item.href}>
+                <TooltipTrigger asChild>{link}</TooltipTrigger>
+                <TooltipContent side="right">{item.label}</TooltipContent>
+              </Tooltip>
+            ) : (
+              <div key={item.href}>{link}</div>
+            );
+          })}
+        </div>
+      </nav>
+
+      <div
+        className={cn(
+          "mt-auto shrink-0",
+          collapsed && "border-t border-sidebar-border py-2",
+        )}
+      >
+        {!collapsed ? (
+          <div className="border-t border-sidebar-border px-2 py-1">
+            <ExtensionsSidebarSection />
+          </div>
+        ) : null}
+
+        <div
+          className={cn(
+            collapsed
+              ? "px-1 py-1"
+              : "border-t border-sidebar-border px-3 py-2",
+          )}
+        >
+          <OrgSwitcher
+            reserveSpace
+            className={
+              collapsed
+                ? "h-8 justify-center px-0 [&>span]:sr-only [&>svg:last-child]:hidden"
+                : undefined
+            }
+          />
+        </div>
+
+        <div
+          className={cn(
+            collapsed
+              ? "flex justify-center px-1 py-1"
+              : "border-t border-sidebar-border px-3 py-2",
+          )}
+        >
+          <FeedbackButton
+            variant={collapsed ? "icon" : "sidebar"}
+            side="right"
+            align={collapsed ? "center" : "end"}
+          />
+        </div>
+
+        {collapseButton ? (
+          <div
+            className={cn(
+              collapsed
+                ? "flex justify-center px-1 py-1"
+                : "flex justify-end border-t border-sidebar-border px-3 py-2",
+            )}
+          >
+            {collapseButton}
+          </div>
+        ) : null}
+      </div>
+    </aside>
+  );
+}

package/corpus/templates/tasks/app/components/shared/AddListItemInput.tsx

@@ -0,0 +1,57 @@
+import { useRef, useState, type FormEvent } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface AddListItemInputProps {
+  disabled?: boolean;
+  onCreate: (title: string) => Promise<unknown>;
+  placeholder?: string;
+  buttonLabel?: string;
+  inputAriaLabel?: string;
+  errorMessage?: string;
+}
+
+export function AddListItemInput({
+  disabled = false,
+  onCreate,
+  placeholder = "Add a task...",
+  buttonLabel = "Add task",
+  inputAriaLabel = "New task title",
+  errorMessage = "Failed to create task. Please try again.",
+}: AddListItemInputProps) {
+  const [title, setTitle] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    const trimmed = title.trim();
+    if (!trimmed) return;
+    setTitle("");
+    void onCreate(trimmed)
+      .catch(() => {
+        setTitle(trimmed);
+        toast.error(errorMessage);
+      })
+      .finally(() => {
+        inputRef.current?.focus();
+      });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2 p-1">
+      <Input
+        ref={inputRef}
+        value={title}
+        onChange={(event) => setTitle(event.target.value)}
+        placeholder={placeholder}
+        aria-label={inputAriaLabel}
+        disabled={disabled}
+      />
+      <Button type="submit" disabled={disabled || !title.trim()}>
+        {buttonLabel}
+      </Button>
+    </form>
+  );
+}

package/corpus/templates/tasks/app/components/shared/AlertDialog.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+
+import {
+  AlertDialog as AlertDialogRoot,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+export interface AlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: ReactNode;
+  pending?: boolean;
+  onConfirm: () => void | Promise<void>;
+}
+
+export function AlertDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  pending = false,
+  onConfirm,
+}: AlertDialogProps) {
+  return (
+    <AlertDialogRoot open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription asChild={typeof description !== "string"}>
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            disabled={pending}
+            onClick={() => void onConfirm()}
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogRoot>
+  );
+}

package/corpus/templates/tasks/app/components/shared/BulkDeleteDialog.tsx

@@ -0,0 +1,76 @@
+import {
+  AlertDialog,
+  type AlertDialogProps,
+} from "@/components/shared/AlertDialog";
+
+type SelectableItem = { id: string; title: string };
+
+type BulkDeleteDialogProps = Omit<AlertDialogProps, "title" | "description"> & {
+  selectedItems: SelectableItem[];
+  entitySingular: string;
+  entityPlural: string;
+};
+
+function BulkDeleteDialogDescription({
+  selectedItems,
+  entitySingular,
+  entityPlural,
+}: Pick<
+  BulkDeleteDialogProps,
+  "selectedItems" | "entitySingular" | "entityPlural"
+>) {
+  const selectedCount = selectedItems.length;
+
+  return (
+    <div className="space-y-2 text-sm text-muted-foreground">
+      <p>
+        This permanently removes{" "}
+        {selectedCount === 1
+          ? `the selected ${entitySingular}`
+          : `all ${selectedCount} selected ${entityPlural}`}
+        .
+      </p>
+      {selectedItems.length > 0 ? (
+        <ul className="list-disc space-y-1 pl-5 text-foreground">
+          {selectedItems.slice(0, 5).map((item) => (
+            <li key={item.id} className="truncate">
+              {item.title}
+            </li>
+          ))}
+          {selectedItems.length > 5 ? (
+            <li className="text-muted-foreground">
+              and {selectedItems.length - 5} more
+            </li>
+          ) : null}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+export function BulkDeleteDialog({
+  open,
+  onOpenChange,
+  selectedItems,
+  entitySingular,
+  entityPlural,
+  pending,
+  onConfirm,
+}: BulkDeleteDialogProps) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      pending={pending}
+      title={`Delete ${selectedItems.length === 1 ? entitySingular : entityPlural}?`}
+      description={
+        <BulkDeleteDialogDescription
+          selectedItems={selectedItems}
+          entitySingular={entitySingular}
+          entityPlural={entityPlural}
+        />
+      }
+      onConfirm={onConfirm}
+    />
+  );
+}

package/corpus/templates/tasks/app/components/shared/ChipSelect.tsx

@@ -0,0 +1,240 @@
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { IconChevronDown, IconGripVertical, IconX } from "@tabler/icons-react";
+import { useMemo } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+export type ChipSelectOption = {
+  id: string;
+  label: string;
+};
+
+type ChipSelectProps = {
+  label: string;
+  options: ChipSelectOption[];
+  selectedIds: string[];
+  onSelectedIdsChange: (ids: string[]) => void;
+  disabled?: boolean;
+  limit?: number;
+  addButtonLabel?: string;
+  emptyLabel?: string;
+  sortable?: boolean;
+};
+
+function ChipSelectChip({
+  option,
+  disabled,
+  sortable,
+  onRemove,
+}: {
+  option: ChipSelectOption;
+  disabled: boolean;
+  sortable: boolean;
+  onRemove: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: option.id, disabled: disabled || !sortable });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        "inline-flex h-8 max-w-56 items-center gap-1.5 rounded-md border border-transparent bg-secondary px-2 text-sm font-medium text-secondary-foreground transition-colors",
+        sortable && !disabled && "cursor-pointer",
+        isDragging && "opacity-60 ring-1 ring-ring",
+      )}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      {...(sortable ? attributes : undefined)}
+      {...(sortable ? listeners : undefined)}
+    >
+      {sortable ? (
+        <IconGripVertical className="size-3.5 shrink-0 text-muted-foreground" />
+      ) : null}
+      <span className="min-w-0 truncate">{option.label}</span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        disabled={disabled}
+        aria-label={`Remove ${option.label}`}
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          event.stopPropagation();
+          onRemove();
+        }}
+        className="ml-0.5 size-5 shrink-0 rounded-sm text-muted-foreground hover:bg-background hover:text-foreground [&_svg]:size-3.5"
+      >
+        <IconX />
+      </Button>
+    </div>
+  );
+}
+
+export function ChipSelect({
+  label,
+  options,
+  selectedIds,
+  onSelectedIdsChange,
+  disabled = false,
+  limit,
+  addButtonLabel = "Add",
+  emptyLabel = "None selected",
+  sortable = true,
+}: ChipSelectProps) {
+  const optionsById = useMemo(
+    () => new Map(options.map((option) => [option.id, option])),
+    [options],
+  );
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const selectedOptions = useMemo(
+    () =>
+      selectedIds
+        .map((id) => optionsById.get(id))
+        .filter((option): option is ChipSelectOption => Boolean(option)),
+    [optionsById, selectedIds],
+  );
+  const availableOptions = useMemo(
+    () => options.filter((option) => !selectedIdSet.has(option.id)),
+    [options, selectedIdSet],
+  );
+  const atLimit = limit !== undefined && selectedOptions.length >= limit;
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function addOption(option: ChipSelectOption) {
+    if (atLimit) return;
+    onSelectedIdsChange([...selectedIds, option.id]);
+  }
+
+  function removeOption(option: ChipSelectOption) {
+    onSelectedIdsChange(selectedIds.filter((id) => id !== option.id));
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (disabled || !sortable || !over || active.id === over.id) return;
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const oldIndex = selectedOptions.findIndex(
+      (option) => option.id === activeId,
+    );
+    const newIndex = selectedOptions.findIndex(
+      (option) => option.id === overId,
+    );
+    if (oldIndex < 0 || newIndex < 0) return;
+
+    onSelectedIdsChange(
+      arrayMove(selectedOptions, oldIndex, newIndex).map((option) => option.id),
+    );
+  }
+
+  const chips = (
+    <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+      {selectedOptions.map((option) => (
+        <ChipSelectChip
+          key={option.id}
+          option={option}
+          disabled={disabled}
+          sortable={sortable}
+          onRemove={() => removeOption(option)}
+        />
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="grid gap-2 rounded-lg border border-border bg-card p-3">
+      <div className="flex min-w-0 items-center justify-between gap-3">
+        <Label className="text-sm font-medium">{label}</Label>
+        {limit !== undefined ? (
+          <span className="text-xs text-muted-foreground">
+            {selectedOptions.length}/{limit}
+          </span>
+        ) : null}
+      </div>
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        {selectedOptions.length === 0 ? (
+          <span className="text-sm text-muted-foreground">{emptyLabel}</span>
+        ) : sortable ? (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={selectedOptions.map((option) => option.id)}
+              strategy={horizontalListSortingStrategy}
+            >
+              {chips}
+            </SortableContext>
+          </DndContext>
+        ) : (
+          chips
+        )}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={disabled || availableOptions.length === 0 || atLimit}
+              className="h-8 gap-1.5 px-2"
+            >
+              {addButtonLabel}
+              <IconChevronDown className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-64">
+            {availableOptions.map((option) => (
+              <DropdownMenuItem
+                key={option.id}
+                disabled={disabled}
+                onSelect={() => addOption(option)}
+              >
+                <span className="min-w-0 truncate">{option.label}</span>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/shared/DeleteItemDialog.tsx

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+
+import {
+  AlertDialog,
+  type AlertDialogProps,
+} from "@/components/shared/AlertDialog";
+
+type DeleteItemDialogProps = Omit<AlertDialogProps, "title" | "description"> & {
+  entityLabel: string;
+  itemTitle: string | null;
+  description?: ReactNode;
+};
+
+export function DeleteItemDialog({
+  open,
+  onOpenChange,
+  entityLabel,
+  itemTitle,
+  description,
+  pending,
+  onConfirm,
+}: DeleteItemDialogProps) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      pending={pending}
+      title={`Delete ${entityLabel}?`}
+      description={
+        description ??
+        (itemTitle ? (
+          <>This removes &quot;{itemTitle}&quot; permanently.</>
+        ) : (
+          `This removes the ${entityLabel} permanently.`
+        ))
+      }
+      onConfirm={onConfirm}
+    />
+  );
+}